// FZXiaoBiaoSong-B05S  // 方正小标宋_GBK
// Source Han Sans CN   // 思源黑体
// SimHei               // 黑体
@import 'element-variables.scss';

* {
    font-family: SimHei;
}

div {
    box-sizing: border-box;
}

#ScaleBox {
    --scale: 1;
}

.el-table__empty-text {
    font-size: 16PX;
}

.bigscreen-root {
    width: 100%;
    height: 100%;
    background-color: #fff;
    // background-color: #072d62;
    overflow: hidden;
}

.ScaleBox {
    position: absolute;
    transform: scale(var(--scale)) translate(-50%, -50%);
    transform-origin: 0 0;
    left: 50%;
    top: 50%;
    // z-index: 999;
    width: 1920PX;
    height: 1080PX;
}

.content-body {
    width: 100%;
    height: 100%;
    // padding-top: 50.25%;
    // height: 1080PX;
    // width: 1920PX;
    // height: 1080PX;
    position: relative;

    /deep/.el-table__empty-text {
        font-size: 16PX;
    }
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-center-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-around-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.flex-space-b {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-space-a {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.big-screen-data-empty {
    width: 100%;
    height: 100%;
    color: #b7b7b7
}

.screen-container {
    width: 100%;
    height: 100%;
    //background: url('~@/assets/img/bigScreen/img_wk@2x.png') no-repeat center / 101% 102%;
    // background: url('~@/assets/img/bigScreen/bg.jpg') no-repeat center / 100% 100%;
    background-color: #072D62;
    color: #fff;
    position: relative;
}

.screen-header-wrapper {
    height: 90PX;
    width: 100%;
    position: relative;

    .leftLine {
        width: 194PX;
        height: 47PX;
        position: absolute;
        left: 619PX;
        top: 13PX;

        img {
            width: 194PX;
            height: 47PX;
        }
    }

    .rightLine {
        width: 194PX;
        height: 47PX;
        position: absolute;
        left: 1098PX;
        top: 13PX;

        img {
            width: 194PX;
            height: 47PX;
        }
    }

    .title {
        width: 706PX;
        height: 100%;
        text-align: center;

        img {
            width: 914PX;
            height: 29PX;
            position: absolute;
            left: 456PX;
            top: 59PX;
        }
    }
}

.screen-header {
    position: absolute;
    left: 0;
    top: 0;
    background: url('~@/assets/img/bigScreen/top_bg.png') no-repeat center / 100% 100%;
    display: flex;
    height: 90PX; // 105PX
    // height: 105PX;
    width: 100%;
    justify-content: space-between;

    .header-left {
        display: flex;
        justify-content: start;
    }

    .header-left,
    .header-right {
        width: 26%;
        position: relative;
        padding: 0 20PX;
    }

    .header-right {
        width: 26%;
        text-align: right;
    }

    // .header-left:before,.header-right:before{
    //     content: '';
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //     width: 100%;
    //     height: 12PX;
    //     margin-top: 2.5vh;
    // }
    // .header-left:before{
    //     background: url('~@/assets/img/bigScreen/img_wk_zs1@2x.png') no-repeat center / 100% 100%;
    // }
    .header-right:before {
        background: url('~@/assets/img/bigScreen/img_wk_zs22@2x.png') no-repeat center / 100% 100%;
    }

    .header-router-btn {
        position: relative;
        z-index: 2;
        cursor: pointer;
        display: inline-block;
        font-size: 14PX;
        // font-family: SimHei;
        font-weight: 400;
        color: #FFFFFF;
        padding: 4PX 20PX;
        text-align: center;
        margin-top: 14PX;
        margin-left: 20PX;
        background: url('~@/assets/img/bigScreen/img_wk_qh@2x.png') no-repeat center / 100% 100%;
    }

    .header-center {
        width: 30%;
        text-align: center;

        .screen-header-title {
            height: 80PX;
            line-height: 80PX;
            font-weight: bold;
            font-size: 36PX;
            font-family: SimHei;
            text-shadow: 0 0 8PX #005DBC;
            letter-spacing: 9PX;
            // background: linear-gradient(0deg, #8DC7FF 0%, #FFFFFF 100%);
            // -webkit-background-clip: text;
            // -webkit-text-fill-color: transparent;

        }
    }

    .full-screen-btn {
        display: inline-block;
    }

    .header-logout {
        margin-left: 20PX;
        font-size: 32PX;
        margin-top: 16PX;
        vertical-align: top;
        color: #479aee;
        // position: absolute;
        // right: 20PX;
        // top: 20PX;
        // i{
        //     font-size: 32PX;
        //     color: #1158aa;
        // }
        // i:hover{
        //     color: #036ad7;
        // }
    }
}

// .screen-header-nav{

//     height: 48PX;
//     margin-top: 7PX;
//     // width: 1200PX;
//     // margin: 0 auto;
//     padding: 0 156PX;
//     position: relative;
//     display: flex;
//     align-items: center;
//     justify-content: space-between;
//     gap: 10PX 16PX;
//     .header-nav-left,.header-nav-right{
//         width: 620PX;
//         height: 55PX;
//         display: flex;
//         align-items: end;
//         justify-content: space-evenly;
//     }
//     .header-nav-cneter {
//         width: 240PX;
//         margin: 0 90PX ;
//         /deep/ .el-input input:focus {
//             border: 2PX solid rgba(#191E28,0.1);
//             background-color: rgba(#191E28,0.1);
//         }
//         /deep/ .el-input input {
//             border: 2PX solid rgba(#191E28,0.1);
//             background-color: rgba(#191E28,0.1);
//             color: #fff;
//             font-size: 16PX;
//             font-family:"Microsoft YaHei";
//         }
//         /deep/ .el-scrollbar, .el-select-dropdown__item {
//             background-color: #0d57ac !important;
//             color: #fff;
//             span {
//                 font-size: 16PX;
//                 font-family:"Microsoft YaHei";
//             }
//         }
//         /deep/ .el-select-dropdown {
//             border: 2PX solid #0d57ac;
//         }
//     }

//     .header-nav-item{
//         cursor: pointer;
//         width: 142PX;
//         height: 48PX;

//         background: url(~@/assets/img/bigScreen/nav_bg.png) 50% 50% / 100% 100% no-repeat;
//         // background: url('~@/assets/img/bigScreen/nav_bg.png') no-repeat center / 100% 100%;
//         .name{
//             display: block;
//             font-size: 24PX;
//             color: rgba(#fff, 0.9);
//             font-family: SimHei ;
//             margin-top: -40PX;
//             text-align: center;
//         }
//     }
//     .header-nav-item:hover, .header-nav-item.active{
//         .name{
//             font-size: 26PX;
//             font-weight: bold;
//             color: #57C3C2;
//             text-shadow: 0 3PX 8PX rgb(84, 76, 255)
//         }
//     }
// }

.screen-header-nav {
    padding: 0;
    margin: 0;
    width: 1600PX;
    height: 48PX;
    margin: 0 auto;

    ul.ul-item {
        padding: 0;
        margin: 0;
        width: 1600PX;
        height: 48PX;
        display: grid;
        grid-template: repeat(1, 1fr) / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 10PX 12PX;
        overflow: visible;
        padding: 0;
        margin: 0;
        position: absolute;
        left: 0;
        right: 0;
        top: 109PX;
        margin: auto;

        li.li-item {
            padding: 0;
            margin: 0;
            list-style: none;
            position: relative;
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center;
            transition: all 0.3s linear 0s;
            background: url(~@/assets/img/bigScreen/nav_bg.png) 50% 50% / 100% 100% no-repeat;
            // transform: translate(-200PX, 0PX);
            writing-mode: horizontal-tb;

            span {
                font-size: 24PX;
                font-family: '黑体';
                color: rgba(#ffffff, 0.9);
                margin-top: -40PX;
                cursor: pointer;
            }
        }

        li.active {
            background: url(~@/assets/img/bigScreen/tabBack_on.png) 50% 50% / 100% 100% no-repeat;
            span {
                font-size: 26PX;
                font-weight: bold;
                color: #57C3C2;
                text-shadow: 0 3PX 8PX rgb(84, 76, 255);
            }
        }
    }

}

.screen-body {
    height: calc(100% - 145PX);
    width: 100%;
    padding: 10PX 10PX 10PX 10PX;
    box-sizing: border-box;
    display: flex;
}
.no-nav.screen-body {
    height: calc(100% - 115PX);
}

.scroll-table {
    .scroll-table-header {
        width: 100%;
        display: flex;
        justify-content: space-around;
        height: 32PX;
        line-height: 32PX;
        position: relative;
        margin-bottom: 2PX;
    }

    .scroll-table-header:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, #0273E9 0%, rgba(2, 115, 233, 0) 100%);
        opacity: 0.3;
    }

    .scroll-table-body {
        height: calc(100% - 32PX);
        overflow: hidden;
    }

    .header-item {
        font-size: 16PX;
        color: #d8dddd;
        // font-family: SimHei;
        font-weight: 400;
        padding: 0 4PX;
        text-align: center;

        span {
            font-size: 16PX;
            font-weight: 700;
            color: #d8dddd;
            font-weight: 400;
            padding: 0 4PX;
            text-align: center;
        }

        span.level {
            display: inline-block;
            width: 30PX;
            line-height: 20PX;
            height: 20PX;
            border-radius: 10PX;
            padding: 0;
            text-align: center;
            color: #fff;
            font-weight: bold;
            position: relative;
            z-index: 10;
        }

        .levelA {
            background-color: #20A367;
        }

        .levelB {
            background-color: #3877B2;
        }

        .levelC {
            background-color: #E3C428;
        }

        .levelD {
            background-color: #E49317;
        }

        .levelE {
            background-color: #B04332;
        }
    }

    .header-long {
        line-height: 114%;
        font-size: 14PX;
    }

    .scroll-table-column {
        cursor: pointer;
        width: 100%;
        display: flex;
        justify-content: space-around;
        height: 32PX;
        line-height: 32PX;
    }

    .scroll-table-column:nth-of-type(2n + 1) {
        background: rgba(#0273E9, 0.05);
        margin: 1PX 0;
    }

    .scroll-table-column:nth-of-type(2n) {
        background: rgba(#0273E9, 0.1);
        margin: 1PX 0;
    }

    .column-item {
        padding: 0 4PX;
        text-align: center;
        font-size: 16PX;
        color: #dbdbdb;
        box-sizing: border-box;
        // font-family: SimHei;
        font-weight: 400;
        color: #D7F1FF;

        span {
            font-size: 16PX;
        }
    }

    .column-item-rotate {
        transform: rotateX(180deg);

    }

    .columnActive {
        color: red;
    }

    .column-trend-icon {
        display: inline-block;
        width: 30PX;
        height: 30PX;
        line-height: 30PX;
    }

    .cqlt-icon-arrow {
        font-size: 18PX;
    }

    .column-trend-icon-1 {
        color: #59c06c;
        text-shadow: #59c06c 1PX 0 12PX;
    }

    .column-trend-icon-2 {
        color: #fe3b30;
        text-shadow: #fe3b30 1PX 0 12PX;
    }
}

.sub-title {
    margin-top: -4PX;
    width: 100%;
    height: 18PX;
    text-align: center;
    position: relative;
    font-size: 16PX;
    font-family: SimHei;
    font-weight: 800;
    color: #FFFFFF;
    text-shadow: 0PX 0PX 16PX #266BF2;
}

.sub-title::after,
.sub-title::before {
    content: '';
    position: absolute;
    top: 47%;
    width: 40PX;
    height: 4PX;
}

.sub-title::before {
    left: 33%;
    background: url('~@/assets/img/bigScreen/line63.png') no-repeat center / 100% 100%;
}

.sub-title::after {
    right: 33%;
    background: url('~@/assets/img/bigScreen/line62.png') no-repeat center / 100% 100%;
}

.reform-pilot-container {
    position: absolute;
    left: 4%;
    top: 16%;
    width: 92%;
    height: 77%;
}

.reform-pilot-top {
    width: 100%;
    height: 60%;
}

.reform-pilot-bottom {
    width: 100%;
    height: 40%;
}

.reform-pilot-bottom-content {
    width: 100%;
    height: calc(100% - 40PX);
    margin-top: 3%;
}

.reform-pilot-item {
    cursor: pointer;
    flex: 1;
    width: 31.33%;
    height: 100%;
    margin: 0 1%;
    background: rgba(2, 115, 233, 0.1);
}

// .reform-pilot-item:nth-last-of-type(2){
//     margin: 0 10PX;
// }
.pilot-item-title {
    width: 100%;
    text-align: center;
    margin-top: -10PX;

    .block {
        color: #0273E9;
        font-size: 20PX;
        font-weight: bold;
    }

    .text {
        margin: 0 4PX;
        font-size: 16PX;
        font-family: SimHei;
        font-weight: 500;
    }
}

.reform-pilot-item-inner {
    margin-top: 0;
}

.item-inner-left {
    display: flex;
    justify-items: center;
    flex-direction: column;
    align-items: center;

    .item-inner-top {
        background: url('~@/assets/img/bigScreen/img_up1@2x.png') no-repeat center / 100% 100%;
    }

    .item-inner-bottom {
        width: 50PX;
        border: 1PX solid #0273E9;
        background: rgba(#0273E9, 0.2);
    }
}

.item-inner-right {
    display: flex;
    justify-items: center;
    flex-direction: column;
    align-items: center;
    margin-left: 8%;

    .item-inner-top {
        background: url('~@/assets/img/bigScreen/img_up2@2x.png') no-repeat center / 100% 100%;
    }

    .item-inner-bottom {
        width: 90PX;
    }

    .icon-arrow {
        width: 12PX;
        height: 14PX;
        margin-left: 4PX;
    }
}

.reform-pilot-item {
    .item-inner-top {
        width: 76PX;
        height: 42PX;
    }

    .item-inner-bottom {
        height: 24PX;
        line-height: 24PX;
        font-size: 15PX;
        font-family: SimHei;
        font-weight: 500;
        color: #FFFFFF;
        position: relative;
        text-align: center;
    }

    .inner-num {
        font-size: 24PX;
        font-family: SimHei;
        font-weight: bold;
        margin-right: 4PX;
        color: #A4DCFF;
    }

    .inner-unit {
        font-size: 14PX;
        font-family: SimHei;
        font-weight: 400;
        color: #A4DCFF;
    }

    .item-inner-right {
        .inner-num {
            color: #A4DCFF;
        }

        .inner-unit {
            color: #A4DCFF;
        }
    }
}

.reform-pilot-item.item-g {
    .item-inner-right {
        .inner-num {
            color: #96FFCA;
        }

        .inner-unit {
            color: #96FFCA;
        }

        .item-inner-bottom {
            border: 1PX solid #53CD67;
            background: rgba(#53CD67, 0.2);
        }
    }
}

.reform-pilot-item.item-y {
    .item-inner-right {
        .inner-num {
            color: #FFCE86
        }

        .inner-unit {
            color: #FFCE86
        }

        .item-inner-top {
            background: url('~@/assets/img/bigScreen/img_up3@2x.png') no-repeat center / 100% 100%;
        }

        .item-inner-bottom {
            border: 1PX solid #FFB03B;
            background: rgba(#FFB03B, 0.2);
        }

    }
}

.reform-pilot-item.item-p {
    .item-inner-right {
        .inner-num {
            color: #FFBBC9
        }

        .inner-unit {
            color: #FFBBC9
        }

        .item-inner-top {
            background: url('~@/assets/img/bigScreen/img_up6@2x.png') no-repeat center / 100% 100%;
        }

        .item-inner-bottom {
            border: 1PX solid #FF7B97;
            background: rgba(#FF7B97, 0.2);
        }
    }
}

// 表格
.single-top-container {
    position: absolute;
    left: 6%;
    top: 19.5%;
    width: 88%;
    height: 60%;

    .single-table-body {
        height: 99%;
        width: calc(100% + 4PX);
        font-size: 12PX;
        font-family: SimHei;
        font-weight: 400;
        color: #D7F1FF;
        margin-left: -2PX;
    }

    table {
        table-layout: fixed
    }

    td {
        width: 33.33%;
        box-sizing: border-box;
        padding: 0 4PX;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .single-item-sn {
        padding-right: 6PX;

    }

    .single-item-title {
        width: 33.33%;
        height: 33.33;
        padding: 0 4PX;
        box-sizing: border-box;
        background-color: rgba(#1790FF, 0.15);
        font-size: 12PX;
    }

    .single-item-title.title-sec {
        background-color: rgba(#00FFFF, 0.15);
    }

    tr:nth-of-type(1) td {
        background-color: rgba(23, 144, 255, 0.1);
    }

    tr:nth-of-type(2) td,
    tr:nth-of-type(6) td {
        background-color: rgba(0, 255, 255, 0.1);
    }

    tr:nth-of-type(3) td {
        background-color: rgba(23, 144, 255, 0.1);
    }

    .single-item-sn img {
        width: 18PX;
        height: 18PX;
        vertical-align: middle;
    }
}

.major-table-single {
    .single-item-title {
        width: 28%;
    }

    td.project-name {
        width: 42%;
        // text-align: left;
    }

    td {
        width: 30%;
        text-overflow: initial !important;
        white-space: initial !important;
    }

    // .single-item-sn{
    //     width: 12%;
    // }
    .single-top-container td[data-v-7c415c2a] {
        // width: 15%;
        // box-sizing: border-box;
        // padding: 0 0.20833vw;
        // text-align: center;
        // overflow: hidden;

    }
}

.scroll-table {
    .scroll-table-column {
        height: auto !important;
        line-height: initial !important;
        padding: 10PX 0;
    }
}

// ----------区县第二版css-------------
.reform-pilot-container {


    .reform-pilot-left {
        width: 62%;
        height: 100%;
    }

    .reform-pilot-right {
        width: 38%;
        height: 100%;
    }

    .reform-pilot-item {
        cursor: pointer;
        width: 100%;
        height: 28.33%;
        background: rgba(2, 115, 233, 0.1);
        margin-top: 5%;
        box-shadow: 0 0 10PX 2PX rgba(2, 115, 233, 0.5) inset;
    }

    .reform-pilot-item-inner {
        margin-top: 0;
    }

    .reform-pilot-item:nth-last-of-type(2) {
        margin-top: 5%;
    }

    .reform-pilot-bottom-content {
        margin-top: 0;
        height: calc(100% - 16PX);
    }

    .reform-pilot-item {
        .item-inner-top {
            width: 70PX;
            height: 24PX;
        }

        .item-inner-bottom {
            height: 22PX;
            line-height: 22PX;
            font-size: 12PX;
            font-family: SimHei;
            font-weight: 500;
            color: #FFFFFF;
            position: relative;
            text-align: center;
        }

        .inner-num {
            font-size: 20PX;
            font-family: SimHei;
            font-weight: bold;
            margin-right: 4PX;
            color: #A4DCFF;
        }

        .inner-unit {
            font-size: 14PX;
            font-family: SimHei;
            font-weight: 400;
            color: #A4DCFF;
        }

        .item-inner-right {
            .inner-num {
                color: #A4DCFF;
            }

            .inner-unit {
                color: #A4DCFF;
            }
        }
    }

    .reform-pilot-right {
        .sub-title::before {
            left: 16%;

        }

        .sub-title::after {
            right: 16%;
        }
    }
}

.top-item-2 {
    .sub-title::before {
        width: 60PX;
        left: 26% !important;
    }

    .sub-title::after {
        width: 60PX;
        right: 26% !important;
    }
}

.trends-board-container.bottom {
    height: 120PX !important;
    bottom: 2% !important;
}

.reform-pilot.tab-btns {
    right: 2% !important;
    top: 3% !important;

    .tab-btn-more {
        margin: 0 !important;
    }
}

.box-select {
    width: 180PX;
    height: 34PX;
    display: flex;
    justify-content: center;
    // padding-top: 10PX;
    position: relative;
    // margin: 0 auto;
    margin-top: 16PX;

    /deep/ .el-input input:focus {
        border: 2PX solid rgba(#072e7e, 0.1);
        background-color: rgba(#072e7e, 0.1);
    }

    /deep/ .el-input input {
        border: 2PX solid rgba(#072e7e, 0.1);
        background-color: rgba(#072e7e, 0.1);
        color: rgba(#E6F7FF, 0.7);
        font-size: 15PX;
        font-family: "Microsoft YaHei";
    }

    /deep/ .el-scrollbar,
    .el-select-dropdown__item {
        background-color: #0d57ac !important;
        color: rgba(#E6F7FF, 0.7);

        span {
            font-size: 15PX;
            font-family: "Microsoft YaHei";
            color: rgba(#E6F7FF, 0.7);
        }
    }

    /deep/ .el-select-dropdown {
        border: 2PX solid #0d57ac;
    }
}

// ----------区县第二版css-------------