.kb-container {
    width: 100%;
    height: calc(100vh - 98px) !important;
    background-color: rgba(26, 32, 44);

    header {
        height: 64px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        h2 {
            color: aliceblue;
            font-weight: 600;
            font-size: 30px;
            text-shadow: 1px 1px 2px white;
        }

        >div {
            flex: 1;

        }

    }


    .kb-content {
        height: calc(100% - 64px);
        width: 100%;
        display: flex;
        flex-direction: row;

        .Left {
            width: 33.33%;

            .unit {
                flex: 1;


            }
        }

        .Center {
            flex: 2;

            // 库容监控
            >.unit:first-child {
                flex: 2;
                display: flex;
                flex-direction: row;

                >div:first-child {
                    flex: 1;
                    height: 100%;
                }

                >div:last-child {
                    flex: 3;
                }
            }

            >.unit:last-child {
                flex: 1
            }
        }

        .Right {
            flex: 1;

            >.unit:first-child {
                flex: 2;
            }

            >.unit:nth-child(2) {
                flex: 2;
            }

            >.unit:last-child {
                flex: 1;
            }
        }

        .Left,
        .Center,
        .Right {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .unit {
            background-color: rgba(49, 60, 77, .8);
            border-radius: 20px;
            margin: 8px;
            padding: 8px;
        }

    }

    .data-content {
        height: 100%;
        width: 100%;

        .content-title {
            width: 100%;
            height: 48px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            span {
                flex: 1;
                color: #fff;
                text-align: center;
                // font-weight: 600;
                font-size: 14px;
            }
        }


    }

    .content-charts {
        width: 100%;
        height: calc(100% - 32px);
    }

    .content-header {
        height: 32px;
        width: 100%;
        border-bottom: 1px solid;
        border-image: linear-gradient(to left, rgba(255, 255, 255, .1) 10%, rgba(177, 95, 231, 0.637) 50%, #00bbf2 100%) 2 2 2 2;
        color: #fff;
        font-size: 18px;
    }

    .content-div {
        height: calc(100% - 32px);

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 12px;
        padding-bottom: 12px;

        >div {
            flex: 1;
            margin: 12px 24px;
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 0 20px;
            align-items: center;

            img {
                width: 34px;
                height: 34px;
            }

            p {
                color: #fff;
                font-weight: 600;
                font-size: 14px;
                display: block;
                width: 30px;
            }

            span {
                font-size: 35px;
                color: #fff;
                font-weight: 600;
                text-shadow: 1px 1px 2px #fff;
            }
        }

        >div:nth-child(1) {
            background-image: url('../../../public/img/cover1.png');
        }

        >div:nth-child(2) {
            background-image: url('../../../public/img/cover2.png');
        }

        >div:nth-child(3) {
            background-image: url('../../../public/img/cover3.png');
        }

        >div:nth-child(4) {
            background-image: url('../../../public/img/cover3.png');
        }
    }

    .dv-scroll-board {


        background-image: var(--bgUrl--);
        background-position: 0 0;
        background-size: 100% 100%;
        height: calc(100% - 80px);
        background-color: transparent;

        // border-radius: 15px;
        .row {
            width: 100%;
            height: 100%;
        }

        .row-item {
            background-color: transparent !important;
            text-align: center;
            width: 100%;
        }
    }

    .realTime {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.51), rgba(0, 0, 0, 0.51)), linear-gradient(176deg, #77F7F7 -1054%, rgba(145, 143, 220, 0.94) 128%, #313C4D 1124%);

        >div:last-child {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin: auto;
            justify-self: center;

        }

        .realTime-content {
            width: 200px;
            height: 70px;
            background: #1A202C;
            border-radius: 11px;
            box-shadow: inset 1px 1px 2px 1px rgba(255, 255, 255, .3);
            text-align: center;
            line-height: 70px;
            margin-right: 10px;

            span {
                color: #1FDBDB;
                font-size: 25px;
                font-weight: 600;
            }
        }
    }

    .jk-content {
        display: flex;
        flex-direction: row;
        height: calc(100% - 32px);
        padding: 12px 12px 24px 12px;

        .jk-content-unit {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: row;
            margin-left: 6px;

            .numStatus {
                width: 30px !important;

                .numberStatus {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    height: 100%;
                    align-self: center;

                    span {
                        color: #fff;
                        flex: 1;
                        height: auto;
                        align-self: center;
                        font-size: 16px;
                        padding-top: 6px;
                    }
                }
            }

            .jk-statusBottom {
                width: 100%;
                position: absolute;
                top: 1;
            }
        }

        .statusDiv {
            width: 10px;
            height: auto;
            flex: 22%;
            background-color: #00bbf2;
            border-radius: 10px;
            margin: 6px 1px;
        }

        .statusLine {
            width: 10px;
            background-color: green;
            height: 100%;
        }



        .jk-status {
            width: 10px;
            height: 100%;
            display: flex;
            flex-direction: row;
        }

        .statusLine {
            border-radius: 32px;
        }

        .bgline1 {

            background: linear-gradient(180deg, rgba(255, 15, 15, 0.49) 0%, rgba(246, 244, 244, 0.00) 51%, rgba(255, 0, 0, 0.38) 100%);
        }

        .bgline2 {

            background: linear-gradient(180deg, rgba(255, 147, 15, 0.49) 0%, rgba(246, 244, 244, 0.00) 51%, rgba(255, 140, 0, 0.38) 100%);

        }

        .bgline3 {

            background: linear-gradient(180deg, rgba(255, 251, 15, 0.49) 0%, rgba(246, 244, 244, 0.00) 51%, rgba(255, 251, 0, 0.38) 100%);
        }




        .jk-statusContent {
            flex: 1;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            position: relative;

            .jk-statusBottom {
                position: absolute;
                bottom: -20px;
                width: 100%;
                display: flex;
                flex-direction: row;

                span {
                    flex: 1;
                    text-align: center;
                    color: skyblue;
                    font-size: 16px;
                    font-weight: 600;
                }
            }
        }
    }


    .statuslogo {
        >div {
            display: flex;
            flex-direction: row;
            color: #fff;
            margin-right: 12px;
            align-items: center;
        }
    }

    .statustitle {
        width: 16px;
        height: 13px;
        border-radius: 2px;
        margin-right: 3px;
    }
}