/**
 * @author cscake
 * @version 4.0.2
 */
/** ------------------ **/
/**
 * 弱提示
 */
.modal-hint-box{
    position: fixed;
    top: 50%;left: 0;right: 0;
    height: 0;
    display: flex;
    justify-content: center;
    z-index: 2000;
}
.modal-hint-mark{ top: 0; height: 100vh; background-color: rgba(0,0,0,.3) }
.modal-hint-mark .modal-hint-content{ margin-top: 50vh; }
.modal-hint{
    min-height: 60px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    max-width: 400px;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 24px;
    z-index: 2000;
    background-color: rgba(0,0,0,.7);
    color: white;
    margin: 5px auto auto;
    width: fit-content;
    position: relative;
    animation: hint-fadeout-top .2s linear;
}
.modal-hint-content{ height:fit-content; }
.modal-hint-box .modal-hint-content .modal-hint-loading .modal-hint{ margin-top: -68px; }
.modal-hint-box .modal-hint-content .modal-hint-toast{ position: relative; }
.modal-hint-hide{ opacity: 0; transition-duration: .5s;}
/*如果弱提示有icon报错一定距离*/
.modal-hint img{ margin-right: 12px; }
/* --------------------------------------- */

/**
 * 弹框提示 alert | confirm
 */
#alert_box{
    position: fixed; top:0px; left:0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0 , 0 ,.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
#alert_con{
    z-index: 9999;
    min-width: 350px;max-width: 400px;
    min-height: 200px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0px 2px 4px 0px rgba(0,169,123,0.1);
    position: relative;
    animation: alert-fadeout-top .2s linear;
}
#alert_tit{
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    padding: 10px 15px;
    border-bottom: 1px solid var(--primary);
}
#alert_msg{
    padding: 20px;
    text-align: center;
    font-size: 16px;
    color: #333;
}
#alert_btnbox{
    width: 100%;
    position: absolute;
    bottom: 30px;
    display: flex;
    justify-content: center;
}
.mb-btn{ color: #212529; border: 1px solid transparent;outline: none!important; border-radius: .25rem; padding: .375rem .75rem; font-size: 16px;}
.mb-btn-ok{ background-color: var(--primary); border-color: var(--primary);color: white; }
.mb-btn-ok:focus{ box-shadow:0 0 0 .2rem var(--primary); opacity: .7; }
.mb-btn-ok:hover{ background-color: var(--primary); opacity: .7;}
.mb-btn-ok:active{ background-color: var(--primary); opacity: .7; }

.mb-btn-no{ background-color: #989898; border-color: #989898; color: white; }
.mb-btn-no:focus{ box-shadow:0 0 0 .2rem rgba(125,125,125,.5); }
.mb-btn-no:hover{ background-color: rgba(125,125,125,.8);}
.mb-btn-no:active{ background-color: #989898;}
/* --------------------------------------- */

/**
 * 图表无数据提示
 */
.chart-notdata{ background:url(images/no-data.png) no-repeat center;background-size: auto 60%;  }
.chart-notdata > div{ opacity: 0; }
/* ----------------------------------------*/

/**
 * 大屏
 */
.screen-scroll-box{ overflow: hidden;height: 100vh; }
.screen-scroll-box .screen-scroll-body{ width: calc(1920px + 17px);height: 100%;overflow-y: scroll;overflow-x: hidden;transform-origin: left top; }
.screen-scroll-box .screen-scroll-body .screen-scroll-main{ box-sizing: border-box; }
.screen-scroll{ position: fixed;width: 8px;top:100px;right:0;background-color: rgba(255,255,255,.3);z-index: 100;border-radius: 8px; }
.screen-scroll-hide{ opacity: 0; transition-duration: .5s; height: 0!important; transition-delay: .5s; }
.screen-scroll-show{ display: block;opacity: 1; }


/**
 * 动画
 */
/* 旋转动画 */
.rotate{ animation: rotate 2s linear infinite;}
@keyframes rotate{ 0%{ transform:rotate(0deg);} 50%{ transform:rotate(180deg);} 100%{ transform:rotate(360deg);} }
/* 淡入 - 从上往下 */
@keyframes hint-fadeout-top{
    from{ top : -20px; opacity: 0; }
    to{ top : 0px; opacity: 1; }
}
/* 淡入 - 从上往下 */
@keyframes alert-fadeout-top{
    from{ top : -50px; opacity: 0; }
    to{ top : 0px; opacity: 1; }
}