@charset "UTF-8";
html {
    font-family:  -apple-system,BlinkMacSystemFont,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #333;

}
body {
    padding: 0;
    margin: 0;
    background: #09141f;
    scrollbar-width: none;
    background: #09141f;
    /*-ms-overflow-style: none;*/
    width: 100%;
}
::-webkit-scrollbar {
    display: none; /* Chrome Safari */
    width: 0px;
}

#clear{
    text-decoration: none;
    line-height: 2;
    text-align: center;
    color: #fff;
    background: #0d86ed;
    border: none;
    border-radius: 5px;
    font-size: 15px;
    position: absolute;
    padding: 0 10px;
    top: 13px;
    left: 30px;
    opacity: 0.8;
}
#clear:hover{
    opacity: 1;
}
#clear:after{
    content: "画面清闪消音";
}
.flex-row.header{
    justify-content: flex-start;
    align-items:center;
    flex:40px 0;
    height: 40px;
    line-height: 40px;
    width: 100%;
    background: #0d86ed url(../resource/logo.png) no-repeat 5px center;
    font-size: 18px;
    text-indent: 40px;
    letter-spacing: 1px;
    color: #fff;
}
.full{
    width: 100%;
    height: 100%;
}
.border-none{
    border: none;
}
.flex-row{
    display: flex;
    flex-direction: row;
}
.flex-col{
    display: flex;
    flex-direction: column;
}

.up-down:after{
    content: "收缩";
}
.down-up:after{
    content: "展开";
}
.up-down{
    display: inline-block;
    width: 50px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    right: 10px;
    top:2px;
    background-color: #0d86ed;
    color: #fff;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
}
.up-down:after{
    content: "收缩";
}
.down-up:after{
    content: "展开";
}


.fix{
    z-index: 999;
    position: fixed;
}
.diagram{
    position: relative;
    margin: 30px auto 0;
}

.unselectable {
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}
#head{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    background: #0d86ed url(../resource/logo.png) no-repeat 5px center;
    line-height: 40px;
    font-size: 18px;
    text-indent: 40px;
    letter-spacing: 1px;
    overflow: hidden;
    height: 40px;
    color: #fff;
}
.yhy{
    display: none;
}


.head-avatar{
    height: 100%;
    float: right;
    margin-right: 15px;
    background: url("../resource/user.png") no-repeat 20px center;
    text-indent: 50px;
    cursor: pointer;
}

.avatar > span{
    display: inline;
}


#time{
    display: block;
    position: fixed;
    color: #00f2f5;
    font-size: 20px;
    top: 83px;
    right: 10px;
}

.nav{
    line-height: 2;
    background: #ccc;
    overflow: hidden;
    font-size: 16px;
    width: 100%;
    height: 32px;
    overflow:hidden;
}
.nav > span, .nav > a{
    float: left;
    text-align: center;
    text-decoration: none;
    color: #333;
}
.nav-item{
    width: 196px;
    cursor: pointer;
    letter-spacing: 1px;
}
.nav-item.active{
    background-color: #3fa7ff;
    color: #fff;
}
.nav-item:not(.active):hover{
    color: #fff;
}

.station-title{
    color: #ff2929;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 0;
    margin: 10px auto 0;
    line-height: 60px;
    height: 60px;

}
.table{
    position: relative;
    width: 190px;
    height: 70px;
    left: 4px;
    top: 0px;
    color: #ff2929;
    font-size: 13px;
}
.arrow{
    background: url("../resource/1-400-v/jiantou.png") no-repeat center;
    position:relative;
    width: 10px;
    height: 11px;
    top:76px;
    left: 85px;
}

.data-block{
    width: 85px;
    height: 80px;
    border-left: 3px solid #ff2929;
    border-bottom: 3px solid #ff2929;
}
/*.on-off{*/
/*    background-color: black;*/
/*    width: 20px;*/
/*    height: 7px;*/
/*    border:2px solid rgba(255,255,255,0.8);*/
/*    position:relative;*/
/*    top: -17px;*/
/*    left: 35px;*/
/*}*/
/*float*/
.left,.sub-left > *{
    float: left;
}
.right{
    float: right;
}

/*flex*/
.flex{
    display: flex;
}


/*margin*/
.m-l-5{
    margin-left: 5px;
}

.m-t-40{
    margin-top: 40px;
}


.m-t-10{
    margin-top: 10px;
}

/*center*/

.c-20{
    height: 20px;
    line-height: 20px;
}
.c-50{
    height: 50px;
    line-height: 50px;
}


/*space*/
.w-s-10{
    width: 10px;
}
.w-s-20{
    width: 20px;
}
.w-s-30{
    width: 30px;
}
.w-s-40{
    width: 40px;
}
.w-s-50{
    width: 50px;
}

.w-s-60{
    width:60px;
}
.w-s-70{
    width: 70px;
}
.w-s-80{
    width: 80px;
}
.w-s-90{
    width: 90px;
}
.w-s-100{
    width: 100px;
}

.w-s-150{
    width: 150px;
}

.w-s-200{
    width: 200px;
}

/*line*/

.h-line,.h-bus-line{
    height: 2px;
    background: #ff2929;
    position: relative;
}

.h-bus-line{
    height: 7px;
    top: -7px;
    left: 12px;
}
.bus-node-title,.nameplate{
    position: relative;
    color: #ff2929;
    top: -48px;
    letter-spacing: 1px;

}
.bus-node-sub-title{
    display: block;
    color: #FFF;
    font-size: 13px;
    height: 22px;
    line-height: 22px;
}
.nameplate{
    text-align: center;
    font-size: 13px;
}
.nameplate-v{
    width: 1rem;
}
.nameplate-h{
    height: 1rem;
    letter-spacing: 1px;
    width: 150px;
}


@keyframes fade {
    from {
        opacity: 1.0;
    }
    50% {
        opacity: 0.5;
    }
    to {
        opacity: 1.0;
    }
}

@-webkit-keyframes fade {
    from {
        opacity: 1.0;
    }
    50% {
        opacity: 0.5;
    }
    to {
        opacity: 1.0;
    }
}
.bling,.bling-alert{
    animation: fade 500ms infinite;
    -webkit-animation: fade 500ms infinite;
}
.bling-alert{
    background: url("../resource/jinggao.png") no-repeat left 20px center;

}
.space {
    font-size: 0;
    -webkit-text-size-adjust:none;
}
.p,.q,.ia,.ib,.ic,.placeholder{
    font-size: 13px;
    display: inline-block;
    width: 20px;
    text-align: center;
    height: 19px;
    line-height: 19px;
    border-left: 1px dashed grey;
    border-top: 1px dashed grey;
}

.p{
    color: #00d3f9;
}
.q{
    color:#d6269c;
    border-bottom: 1px dashed grey;
}
.ia{
    color:#ffea00;
}
.ib{
    color:#2eff29;
}
.ic{
    color: #ff2929;
    border-bottom: 1px dashed grey;
    opacity: 1;
}

.p.value,.q.value,.ia.value,.ib.value,.ic.value,.placeholder.value{
    width: 65px;
    border-right: 1px dashed grey;
}
.placeholder{
    visibility: hidden;
}
.main-table{
    width: 200px;
    height: 207px;

    float:left;
    border:1px solid #666;
    text-align: center;
    color: white;
    line-height: 25px;
    font-size: 13px;
}
.main-table-title{
    display: inline-block;
    /*color: red;*/
    width: 100%;
    /*border: none;*/
    /*border-bottom: 1px dashed grey;*/
    height: 25px;

    border: none;
    text-align: center;
    font-size: 13px;
    color: #FFF;
    letter-spacing: 2px;
}

.main-table-row{
    width: 100%;
    height: 25px;
    line-height: 25px;
    font-size: 13px;
    border-bottom: 1px dashed grey;
    display: flex;
    flex-wrap: nowrap;
}
.main-table-row:last-child{
    border-bottom: none;
}
.main-table-cell{
    flex:0 50px;
}
.main-table-cell:nth-child(1){
    border-right: 1px dashed grey;
}
.main-table-cell:nth-child(2){
    flex:1 0px;
    font-weight: bold;
    font-size: 15px;
}
.main-table-cell:nth-child(3){
    border-left: 1px dashed grey;
    flex:0 30px;
}

.bottom-frame{
    position: fixed;
    bottom: -53px;
    left: 0;
    z-index: 999;
    height: 150px;
    width: 100%;
    border: none;
    padding: 0;
    display: block;
}

.no-scroll-y{
    overflow-y: hidden;
    -ms-overflow-y: hidden;
}

.unit{
    color: #9e9fa1;
}
.IA,.UA{
    color: #dede12
}
.IB,.UB{
    color:#0dd22d
}
.IC,.UC{
    color: #e02b32
}
.P,.UAB,.UBC,.UCA{
    color: #00ceff;
}
.Q{
    color: #ec4cff;
}
.COS{
    color: #0d86ed ;
}
.WH{
    color: #19f796;
}