* {
    margin: 0;
    padding: 0;
}
*::-webkit-scrollbar {display:none}
html, body {
    background-color: #000;
    height: 100%;
    width: 100%;
    font-family: 'PingFang SC';
font-style: normal;
}
/* w: 3450  h: 1080 - 60   */
#kanban-app {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
header {
    height: .6rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: 400;
    font-size: .36rem;
    
    color: #fff;
    border-bottom: 1px solid rgb(66, 65, 65);
}
header > img {
    margin-left: .2rem;
    height: .38rem;
}
header > span {
    margin-left: .2rem;
    line-height: .36rem;
}
.container-wrap {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*  */
.container {
    width: 100%;
    height: calc(100vw * 1020 / 2653); 
    position: relative;
}
.bg-img-wrap {
    display: block;
    width: 83%;
    margin: 0px auto;
    position: relative;
}
.bg-img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-height: 8rem;
    opacity: 0;
    transition: all 0.8s;
}
.data-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-image: radial-gradient(circle, transparent 20%, #000 70%);
    display: flex;
    flex-direction: row;
}
/*     width: calc(100% * 788 / 3450); */
.data-center {
    width: calc(100% * 388 / 2653);
    height: 100%;
    padding: 0.5rem 0px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: .5rem;
}
.data-left {
    flex: 1;
    height: 100%;   
    padding: .5rem;
    padding-right: 0px;
    box-sizing: border-box;
}
.data-right {
    flex: 1;
    height: 100%;
    padding: .5rem;
    padding-left: 0px;
    box-sizing: border-box;
}


.dc-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #fff;
    font-weight: 400;
    font-size: .18rem;
}
.dc-title-desc {
   font-size: .12rem;
    font-weight: 400;
     color: #fff;
    margin-left: .12rem;
    }
.dct-tag {
    border-left: .07rem solid #2CBEFF;
    border-top: .07rem solid transparent;
    border-right: .07rem solid transparent;
    border-bottom: .07rem solid transparent;
}
.table-alarm {
    width: 100%;
}
.table-th, .table-tr {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.table-th > div, .table-tr > div {
    flex: 1;
    text-align: center;
    color: #fff;
    font-size: .14rem;
    font-weight: 400;
    padding: .2rem 0rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
}
.table-tr {
    background: rgba(25, 198, 255, 0.1);
border: 1px solid rgba(25, 198, 255, 0.3);
margin-bottom: .16rem;
}
.table-tr-alarm {
    border: 1px solid #C92A2D;
    color: #C92A2D;
}
.data-left, .data-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;  
    align-items: flex-start;
    align-content: flex-start;

}
.data-left-block, .data-right-block {
    width: calc(100% / 2);
}
.d-1-context {
    width: 100%;
}
.chart-gauges-container {
    width: 80%;
    display: flex;
    flex-direction: row;
    padding: .4rem 0rem;
}
.chart-gauges-item {
    flex: 1;
}
.chart-gauges-item > div {
    width: 100%;
}
.data-left-block, .data-right-block{
    height: 33.3%;
}
.chart-max-h {
    /* max-height: 2.8rem; */
}
.chart-line-container {
    width: 90%;
    padding: .3rem 0rem;
    box-sizing: border-box;
}
.chart-donut-container {
    width: 80%;
    /* padding: .3rem 0rem; */
    
}
.data-left-block> .dc-title{
    height: .24rem;
}
.data-left-block>div:last-child {
    height: calc(100% - .24rem);
}
.data-left-block>div>div{
    height: 100%;
}
.data-left-block>div>div>div{
    height: 100%;
}

.data-right-block> .dc-title{
    height: .24rem;
}
.data-right-block>div:last-child {
    height: calc(100% - .24rem);
}
.data-right-block>div>div{
    height: 100%;
}
.data-right-block>div>div>div{
    height: 100%;
}
.areapower-donut-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.areapower-d-left-item {
    padding: .12rem;
    font-size: .12rem;
    font-weight: 400;
    color: #fff;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px dashed rgba(255,255,255, 0.5);
}
.areapower-d-left-item > span{
    display: block;
}
.areapower-d-left-item .color-block {
    width: .08rem;
    height: .08rem;
    margin-right: .1rem;
}
.areapower-d-left-item .val-txt{
    margin-left: auto;
    margin-right: 0;
}
.chart-areapower-donut-container {
    /* padding: .3rem 0rem;
    box-sizing: border-box; */
}

.action-block {
    background: rgba(25, 198, 255, 0.1);
    border: 1px solid rgba(25, 198, 255, 0.3);
    margin-bottom: 0.16rem;
}
.action-block-th, .action-block-tr {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.action-block-th > div, .action-block-tr > div{
    flex: 1;
    text-align: center;
    color: #fff;
    font-size: .14rem;
    font-weight: 400;
    padding: 0.10rem 0rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d-1,.d-2,.d-3,.d-4,.d-5,.d-6,
.d-7,.d-8,.d-9,.d-10,.d-11,.d-12,.d-13 {
    opacity: 0;
}

.loading-main {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #1c1c1c;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
.loading-data-block-img {
    width: 50px;
    height: 50px;
    animation: rotating 1.5s infinite;
}
@keyframes rotating {
    100% {
        transform: rotate(360deg);
    }
}

.d-1, .d-2 {
    padding-bottom: 24px;
    box-sizing: border-box;
    height: 28%!important;
    /* height: 271px!important; */
}
.d-3, .d-4 {
    /* padding-bottom: 24px; */
    box-sizing: border-box;
    height: 38.6%!important;
    /* height: 345px!important; */
}
.d-5, .d-6 {
    /* padding-bottom: 24px; */
    box-sizing: border-box;
    /* height: 271px!important; */
}
.d-7 {
    /* padding-bottom: 50px; */
    box-sizing: border-box;
    /* height: 271px!important; */
}
.d-8, .d-9 {
    padding-bottom: 24px;
    box-sizing: border-box;
    height: 28%!important;
    /* height: 270px!important; */
}
.d-10, .d-11 {
    /* padding-bottom: 24px; */
    box-sizing: border-box;
    height: 38.6%!important;
    /* height: 345px!important; */
}
.d-12, .d-13 {
    /* padding-bottom: 24px; */
    box-sizing: border-box;
    /* height: 271px!important; */
}

.data-left, .data-right {
    /* align-content: space-between; */
}

.kanban-app-v2 {
    height: 1080px!important;
}
.kanban-app-v2 .container-wrap {
    width: 1920px!important;
    height: calc(1080px - 0.6rem);
    margin: auto;
    padding: 24px;
}

.kanban-app-v2 .container-wrap .container{
    width: 100%;
    height: 100%;
}

.data-left-v2 {
    
}
.kanban-app-v2 .chart-line-container {
    width: 100%!important;
}

.data-left-v2 .data-left-block, .data-right-v2 .data-left-block {
    width: 100%!important;
}
.bg-img-wrap-v2 {
    height: 100%;
    max-height: 100%!important;
}
.bg-img-wrap-v2 img {
    width: 100%;
    max-height: 100%;
    height: 100%!important;
    object-fit: cover;
    object-position: center;
}