UI3/public/media/screen/screen.less

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.amap-logo {
    display: none !important;
    opacity: 0 !important;
}

.amap-copyright {
    opacity: 0 !important;
}

.main {
    width: 100%;
    height: 100%;
    --menu_w: 120px;
    padding: var(--space_width);
    display: flex;
    flex: 1;

    .menu-box {
        padding: 15px 0px 15px 15px;
        width: var(--menu_w);
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;

        .menu {
            width: 85px;
            height: 70px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: transparent;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
                7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
            outline: none;
            margin: 5px 0;

            &:active {
                top: 2px;
            }

            .icon {
                font-size: 40px;
            }
        }
    }

    .content-box {
        width: calc(100% - var(--menu_w));
        padding: 15px 10px;
    }

    .box-card {
        --card_header_h: 42px;
        --clip_length: 17px;
        --border_length: 12px;
        --border_color: #1e77b3;
        --bg_color: rgba(6, 30, 93, 0.5);
        width: 100%;
        height: 100%;
        flex-direction: column;
        clip-path: polygon(var(--clip_length) 0,
                calc(100% - var(--clip_length)) 0,
                100% var(--clip_length),
                100% calc(100% - var(--clip_length)),
                calc(100% - var(--clip_length)) 100%,
                var(--clip_length) 100%,
                0 calc(100% - var(--clip_length)),
                0 var(--clip_length));
        background: linear-gradient(-45deg,
                var(--border_color) var(--border_length),
                var(--bg_color) 0) bottom right,
            linear-gradient(45deg,
                var(--border_color) var(--border_length),
                var(--bg_color) 0) bottom left,
            linear-gradient(135deg,
                var(--border_color) var(--border_length),
                var(--bg_color) 0) top left,
            linear-gradient(-135deg,
                var(--border_color) var(--border_length),
                var(--bg_color) 0) top right;
        background-size: 50% 50%;
        background-repeat: no-repeat;
        box-shadow: 0 0 8px var(--c1) inset !important;
        border: 2px solid var(--border_color);

        .card-header {
            --border_color: #02102d;
            --bg_color: #04102d;

            clip-path: polygon(var(--clip_length) 0,
                    calc(100% - var(--clip_length)) 0,
                    100% var(--clip_length),
                    100% calc(100% - var(--clip_length)),
                    100% 100%,
                    0 100%,
                    0 var(--clip_length));
            background: linear-gradient(-45deg,
                    var(--border_color) var(--border_length),
                    var(--bg_color) 0) bottom right,
                linear-gradient(45deg,
                    var(--border_color) var(--border_length),
                    var(--bg_color) 0) bottom left,
                linear-gradient(135deg,
                    var(--border_color) var(--border_length),
                    var(--bg_color) 0) top left,
                linear-gradient(-135deg,
                    var(--border_color) var(--border_length),
                    var(--bg_color) 0) top right;
            height: var(--card_header_h);
            line-height: var(--card_header_h);
            padding: 0 25px;
            position: relative;

            .card-title {
                display: flex;
                align-items: center;
                font-size: 16px;

                .icon {
                    padding-right: 8px;
                    color: var(--c1);
                    font-size: 150%;
                }

                img {
                    margin-right: 8px;
                    width: 24px;
                    height: auto;
                }

                color: var(--c2);
                font-weight: bolder;
            }

            .svg-box {
                position: absolute;
                top: 0;
                right: 25px;
                overflow: hidden;
                width: 250px;
            }
        }

        .card-body {
            padding: 0;
            width: 100%;
            height: calc(100% - var(--card_header_h));
        }
    }

    .box-card .card-body {
        .body-content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 10px;
        }
    }

    .infos {
        .info-box {
            display: flex;
            flex-direction: column;

            .info-header {
                .title {
                    font-size: 24px;
                    font-weight: 600;
                    padding-left: 40px;
                }
            }

            .info-body {
                display: flex;
                padding: 10px;
            }

            .info {
                width: 30%;
                min-width: 230px;
                margin: 10px 20px;
                padding: 15px 25px;
                border-radius: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                border: none;
                cursor: none;
                transition: all 0.3s ease;
                position: relative;
                box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
                    7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
                outline: none;
                font-size: 20px;

                .icon {
                    font-size: 50px;
                    margin-right: 20px;
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .text {
                    display: flex;
                    flex-direction: column;
                    text-align: center;

                    span {
                        display: flex;
                        justify-content: space-between;
                        align-items: baseline;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                    .num {
                        font-size: 28px;
                        font-weight: 600;
                        padding: 0 8px;
                    }
                }

            }
        }

        .chart-boxs {
            width: 100%;
            display: flex;
            flex: 1;
            padding: 40px 60px;

            .chart-box {
                width: 40%;
                height: 260px;
                margin: 15px 10px;
            }
        }

    }

    .alarms {
        width: 100%;
        height: calc(100% - 20px);
        padding: 10px 30px;
        overflow: hidden;

        .alarm-box {
            font-size: 20px;
            text-indent: 2em;
            line-height: 1.35;
            padding: 2px 10px;

            .type {
                font-weight: 600;
                margin: 0 1px;
            }
        }

        .no-data {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;

            span {
                margin-top: -10%;
            }
        }
    }

    .map-container {
        width: 100%;
        // height: calc(100% + 30px);
        height: 100%;
    }

    .menu-container {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 999;

        .menu-box {
            padding: 5px;
            width: var(--menu_w);
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: start;

            .menu {
                width: auto;
                height: auto;
                color: #ddd;
                padding: 5px 15px;
                margin: 5px 0;

                .icon {
                    font-size: 18px;
                }
            }
        }

        .company-list {
            width: 380px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: auto;
            background: rgba(25, 55, 117, 0.8);
            padding: 10px 10px 0;
            border-radius: 5px;
            position: relative;
            margin-top: -5px;

            .close-btn {
                position: absolute;
                cursor: pointer;
                right: 0;
                top: 0;
                width: 30px;
                height: 30px;
                background-color: rgba(25, 55, 117, 0.8);
                transform: translate(35%, -25%);
            }

            .input-group {
                display: flex;
                padding: 0 5px 5px;
                // padding-left: 10%;
                // padding-right: 10%;
                justify-content: space-around;
                align-items: center;
                margin-bottom: 5px;
            }

            .company-item {
                width: 100%;
                display: block;
                float: left;
                color: #eee;
                font-size: 14px;
                height: 50px;

                .icon {
                    float: left;
                    width: 60px;
                    height: 40px;
                    background: #eee;
                    margin: 5px 10px;
                    cursor: pointer;
                }

                .text,
                .btn {
                    float: left;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    height: 100%;
                    cursor: pointer;
                    margin-right: 5px;
                }

                .text {
                    span {
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        width: 205px;
                    }
                }

                .btn {
                    float: right;
                }

                &:not(:first-child) {
                    border-top: 1px solid #999;
                }
            }
        }

    }

    .map-company-box {
        width: 450px;
        height: auto;
        background: rgba(25, 55, 117, 0.9);
        display: flex;
        border-radius: 8px;
        flex-direction: column;
        color: #eee;
        font-size: 14px;
        padding: 10px 15px 35px;
        position: relative;
        z-index: 900;

        .close-btn {
            background-color: rgba(25, 55, 117, 0.9);

        }

        .title-box {
            border-bottom: 2px solid #ddd;
            margin-bottom: 10px;

            .name {
                color: #fff;
                font-size: 18px;
                font-weight: 600;
            }

            .address {
                display: flex;
                justify-content: space-between;
                padding: 1px 0 5px;
                white-space: nowrap;

                span {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    text-align: left;

                    &:first-child {
                        width: 100%;

                    }

                    &:last-child {
                        text-align: right;
                        min-width: 130px;
                    }
                }
            }
        }

        .monitor-box {
            .monitor {
                flex-direction: column;
                color: #ddd;

                .name,
                .text {
                    display: flex;
                    flex: 1;
                }

                .name {
                    color: #eee;
                    font-size: 110%;
                    font-weight: 600;
                }

                .splite {
                    border-bottom: 1px dashed #666;
                    width: 100%;
                    margin: 5px 0
                }
            }
        }

        .page-box,
        .btn-box {
            display: flex;
            position: absolute;
            bottom: 5px;

            button {
                width: 20px;
                height: 25px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid #aaa;
                background: rgba(25, 55, 117, 0.9);
                cursor: pointer;

                &:disabled {
                    cursor: not-allowed;
                    color: #999;
                    background: rgba(25, 55, 117, 0.7);
                    border: 1px solid #999;
                }

                &:not(:disabled):hover {
                    color: #fff;
                    border-color: #fff;
                }
            }


        }

        .page-box {
            left: 15px;

            .mid {
                width: auto;
                margin: 0 1px;
                padding: 0 6px;
                height: 25px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid #aaa;
                background: rgba(25, 55, 117, 0.9);
            }
        }

        .btn-box {
            right: 15px;

            button {
                width: auto;
                padding: 0 10px;
            }
        }
    }

    .overs {

        display: flex;
        flex: 1;
        height: 100%;

        &>.left {
            --color: #222;
            --color_1: #4c88cf;
            --color_2: #4c88cf;

            width: 35%;
            padding: 10px 0 10px 15px;
            display: flex;
            flex-direction: column;

            .nav {
                --bg: #eee;
                --bg_active: var(--color_1);
                --bg_hover: #4c88cf;
                --c: #333;
                --c_active: #eee;
                --c_hover: #fff;

                margin: 10px 10px 5px;
                padding: 0 30px;


                &.nav-tabs {
                    height: 32px;
                    display: flex;
                    border-bottom: 3px solid var(--bg_active);

                    .nav-tab {
                        flex: 1;
                        font-size: 13px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: var(--c);
                        background: var(--bg);
                        border: 1px solid var(--bg_active);
                        border-bottom: none;
                        border-radius: 8px 8px 0 0;
                        text-align: center;
                        margin: 0 1px;
                        cursor: pointer;

                        &.active {
                            background: var(--bg_active);
                            color: var(--c_active);
                        }

                        &:hover {
                            background: var(--bg_hover);
                            color: var(--c_hover);
                        }
                    }
                }

                .ant-tabs-nav {
                    --color: var(--mc);
                    width: 100%;

                    >div {
                        width: 100%;
                        height: 32px;
                        display: flex;
                        justify-content: center;
                        border-bottom: 3px solid var(--bg_active);
                    }

                    .ant-tabs-tab {
                        flex: 1;
                        font-size: 13px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: var(--c);
                        background: var(--bg);
                        border: 1px solid var(--bg_active);
                        border-bottom: none;
                        border-radius: 8px 8px 0 0;
                        text-align: center;
                        margin: 0 1px;
                        padding: 0;
                        cursor: pointer;

                        &.ant-tabs-tab-active {
                            background: var(--bg_active);
                            color: var(--c_active);
                        }

                        &:hover {
                            background: var(--bg_hover);
                            color: var(--c_hover);
                        }
                    }

                    .ant-tabs-ink-bar {
                        display: none !important;
                    }
                }
            }

            .detail {

                display: flex;
                font-size: 16px;
                padding: 0 5%;
                justify-content: space-between;
                color: var(--color);

                >div {
                    width: 50%;
                    margin: 5px 10px;
                }

                .icon {
                    color: var(--color_1);
                    font-size: 24px;
                }

                .text {
                    margin-left: 5px;
                }

                .num {
                    font-size: 36px;
                }

            }

            .list-box {
                display: flex;
                flex: 1;
                flex-direction: column;
                height: calc(100% - 115px);
                overflow-y: auto;

                .item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 5px 0;
                    padding-right: 10px;
                    margin: 0 20px;
                    position: relative;
                    border: 1px solid var(--color_1);
                    border-top-style: dashed;
                    cursor: pointer;

                    // &::before {
                    //     content: "";
                    //     position: absolute;
                    //     width: 0;
                    //     height: 100%;
                    //     border-left: 8px solid var(--color_1);
                    //     border-radius: 3px;
                    // }

                    .left {
                        display: flex;
                        flex-direction: column;
                        padding-left: 20px;
                        width: 85%;

                        .name {
                            color: var(--color_1);
                            font-size: 18px;
                            font-weight: 600;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }

                        .address {
                            color: var(--color);
                            font-size: 14px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }
                    }

                    .right {
                        color: var(--color);
                        display: flex;
                        align-items: center;
                        justify-content: end;
                        font-size: 14px;

                        .big {
                            font-size: 28px;
                            margin-right: 5px;
                        }
                    }

                    &:nth-of-type(2n + 1) {
                        --color_1: var(--color_2);
                    }

                    &:not(:last-child) {
                        border-bottom: none;
                    }

                    &:first-child {
                        border-top-style: solid;
                        border-radius: 5px 5px 0 0;
                    }

                    &:last-child {
                        border-radius: 0 0 5px 5px;
                    }
                }
            }
        }

        .right {
            width: 65%;
        }
    }

    .cleans {
        width: 100%;
        height: 100%;
        padding: 25px;
        display: flex;

        .clean-box {
            --header_h: 40px;
            --item_h: 39px;
            --c: #1e77b3;
            width: 100%;
            height: 100%;
            padding: 0 10px;

            &.over {
                --c: rgba(236, 90, 90, 0.5);
            }

            .box-header {
                height: var(--header_h);
                background: var(--c);
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #eee;
                font-size: 14px;
                padding: 0 20px;
                border-radius: 5px 5px 0 0;

                .title {
                    font-size: 16px;
                    font-weight: 600;
                }

                .tool {
                    padding: 3px 12px;
                    border: 1px solid #ccc;
                    border-radius: 3px;
                    cursor: pointer;

                    &:hover {
                        color: #fff;
                        border-color: #fff;
                    }
                }
            }

            .box-body {
                height: calc(100% - var(--header_h));
                border: 1px solid var(--c);
                border-radius: 0 0 5px 5px;
                overflow: hidden;
                height: calc(var(--item_h)*16);

                .list {

                    &.animate-top {
                        margin-top: calc(1px - 1px - var(--item_h));
                    }

                    .item {
                        height: var(--item_h);
                        line-height: var(--item_h);
                        color: var(--c);
                        border-bottom: 1px solid var(--c);
                        font-size: 14px;
                        font-weight: 600;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        text-align: center;

                        &:nth-of-type(2n+1) {
                            background: linear-gradient(rgba(0, 0, 0, .05), rgba(0, 0, 0, .05));
                        }
                    }
                }
            }
        }
    }

    &.dark {
        .menu-box {
            .menu {
                color: #ccc;
                background: rgb(6, 14, 131);
                background: linear-gradient(0deg,
                        rgba(0, 25, 101, 0.6) 0%,
                        rgba(0, 12, 49, 0.6) 100%);

                &.active {
                    color: #eee;
                    background: rgb(6, 14, 131);
                    background: linear-gradient(0deg,
                            rgba(6, 14, 161, 0.6) 0%,
                            rgba(12, 25, 180, 0.6) 100%);
                }

                &:hover {
                    color: #fff;
                    background: rgb(0, 3, 255);
                    background: linear-gradient(0deg,
                            rgba(0, 3, 255, 0.6) 0%,
                            rgba(2, 126, 251, 0.6) 100%);
                }
            }
        }

        .box-card {
            --border_color: #1e77b3;
            --bg_color: rgba(6, 30, 93, 0.5);
            box-shadow: 0 0 8px var(--border_color) inset !important;

            .card-header {
                --border_color: #02102d;
                --bg_color: #04102d;
            }
        }

        .infos {
            .info-box {
                color: #ddd;

                .info {
                    color: #ddd;
                    background: linear-gradient(rgba(32, 107, 172, 0.5),
                            rgba(32, 107, 172, 0.5));

                    .icon {
                        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3));

                    }

                    .text {
                        .num {
                            color: #fff;

                        }
                    }

                    &.bg1 {
                        background: linear-gradient(rgba(56, 164, 90, 0.5),
                                rgba(56, 164, 90, 0.5));
                    }

                    &.bg2 {
                        background: linear-gradient(rgba(19, 165, 165, 0.5),
                                rgba(19, 165, 165, 0.5));
                    }

                    &.bg3 {
                        background: linear-gradient(rgba(223, 148, 83, 0.5),
                                rgba(223, 148, 83, 0.5));
                    }

                    &.bg4 {
                        background: linear-gradient(rgba(236, 90, 90, 0.5),
                                rgba(236, 90, 90, 0.5));
                    }

                }
            }
        }

        .alarms {
            .alarm-box {
                color: #eee;
            }

            .no-data {
                color: #999;
            }
        }

        .overs {
            &>.left {

                --color: rgba(32, 107, 172, 0.7);
                --color_1: rgba(32, 107, 172, 0.7);
                --color_2: rgba(32, 107, 172, 0.7);

                .nav {
                    --bg: #999;
                    --bg_active: rgba(12, 25, 180, 0.6);
                    --bg_hover: rgba(12, 25, 180, 0.8);
                    --c: #333;
                    --c_active: #eee;
                    --c_hover: #fff;
                }

            }

        }

        .menu-container {
            .menu-box {
                .menu {
                    color: #ddd;
                }
            }

            .company-list {
                background: rgba(25, 55, 117, 0.8);
                background: rgba(235, 235, 217, 0.3);

                .close-btn {

                    background-color: rgba(25, 55, 117, 0.8);
                    background-color: rgba(235, 235, 217, 0.3);
                    transform: translate(35%, -25%);
                }

                .company-item {
                    color: #eee;

                    .icon {
                        background: #eee;
                    }

                    &:not(:first-child) {
                        border-top: 1px solid #999;
                    }
                }
            }

        }

        .map-company-box {
            background: rgba(235, 235, 217, 0.3);
            color: #eee;

            .close-btn {
                background-color: rgba(235, 235, 217, 0.3);
            }

            .title-box {
                border-bottom: 2px solid #ddd;

                .name {
                    color: #fff;
                }
            }

            .monitor-box {
                .monitor {
                    color: #ddd;

                    .name {
                        color: #eee;
                    }

                    .splite {
                        border-bottom: 1px dashed #666;
                    }
                }
            }

            .page-box,
            .btn-box {
                button {
                    border: 1px solid #aaa;
                    background: rgba(235, 235, 217, 0.6);

                    &:disabled {
                        color: #999;
                        background: rgba(235, 235, 217, 0.3);
                        border: 1px solid #999;
                    }

                    &:not(:disabled):hover {
                        color: #fff;
                        border-color: #fff;
                    }
                }

            }

            .page-box {
                left: 15px;

                .mid {

                    border: 1px solid #aaa;
                    background: rgba(235, 235, 217, 0.6);
                }
            }

            .btn-box {
                right: 15px;

                button {
                    width: auto;
                    padding: 0 10px;
                }
            }
        }

        .clean-box {
            --c: rgba(32, 107, 172, 0.5);

            &.over {
                --c: rgba(236, 90, 90, 0.5);
            }

            .box-header {
                color: #eee;

                .tool {
                    border: 1px solid #ccc;

                    &:hover {
                        color: #fff;
                        border-color: #fff;
                    }
                }
            }
        }
    }

    &.light {
        --c1: #ddd;
        --c2: #ccc;

        .menu-box {
            .menu {
                color: #333;

                background: rgb(109, 154, 207);
                background: linear-gradient(0deg,
                        rgba(109, 154, 207, 0.6) 0%,
                        rgba(76, 136, 207, 0.6) 100%);



                &.active {
                    color: #eee;
                    background: rgb(6, 14, 131);
                    background: linear-gradient(0deg,
                            rgba(51, 102, 204, 1) 0%,
                            rgba(51, 102, 204, 0.8) 100%);
                }

                &:hover {
                    color: #eee;
                    background: rgb(76, 136, 207);
                    background: linear-gradient(0deg,
                            rgba(57, 126, 207, 1) 0%,
                            rgba(57, 126, 207, 0.8) 100%);
                }
            }
        }

        .box-card {
            --border_color: #9CB9DC;
            --bg_color: rgba(191, 191, 191, 0.5);
            box-shadow: 0 0 8px #508CD3 inset !important;
            background-image: linear-gradient(rgba(191, 191, 191, 0.4), rgba(191, 191, 191, 0.4));
            background-size: 100%;

            .card-header {
                --border_color: #4775D0;
                --bg_color: #4775D0;

                .card-title {
                    color: #fff;

                    .svg-box {
                        svg {
                            rect {
                                fill: #eee;
                            }
                        }
                    }
                }

            }
        }


        .infos {
            .info-box {
                color: #3481ab;

                .info {
                    color: #ddd;
                    background: linear-gradient(rgba(32, 107, 172, 0.9),
                            rgba(32, 107, 172, 0.9));

                    .icon {
                        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3));

                    }

                    .text {
                        .num {
                            color: #fff;

                        }
                    }

                    &.bg1 {
                        background: linear-gradient(rgba(56, 164, 90, 0.9),
                                rgba(56, 164, 90, 0.9));
                    }

                    &.bg2 {
                        background: linear-gradient(rgba(19, 165, 165, 0.9),
                                rgba(19, 165, 165, 0.9));
                    }

                    &.bg3 {
                        background: linear-gradient(rgba(223, 148, 83, 0.9),
                                rgba(223, 148, 83, 0.5));
                    }

                    &.bg4 {
                        background: linear-gradient(rgba(236, 90, 90, 0.9),
                                rgba(236, 90, 90, 0.9));
                    }
                }
            }
        }

        .alarms {
            .alarm-box {
                color: #4888D2;

                .type {
                    color: #4775D0;
                }
            }

            .no-data {
                color: #3481ab;
            }
        }

        .overs {
            &>.left {
                --color: rgba(32, 107, 172, 0.9);
                --color_1: rgba(32, 107, 172, 1);
                --color_2: rgba(32, 107, 172, 1);

                .nav {
                    --bg: #eee;
                    --bg_active: #4c88cf;
                    --bg_hover: #3c88cf;
                    --c: #333;
                    --c_active: #eee;
                    --c_hover: #fff;
                }

            }

        }

        .menu-container {
            .menu-box {
                .menu {
                    color: #ddd;
                    background: linear-gradient(0deg,
                            rgba(57, 126, 207, 1) 0%,
                            rgba(57, 126, 207, 0.8) 100%);

                    &.active {
                        color: #eee;
                        background: linear-gradient(0deg,
                                rgba(51, 102, 204, 1) 0%,
                                rgba(51, 102, 204, 0.8) 100%);
                    }

                    &:hover {
                        color: #eee;
                        background: linear-gradient(0deg,
                                rgba(51, 102, 204, 1) 0%,
                                rgba(36, 80, 167, 0.8) 100%);
                    }
                }
            }

            .company-list {
                background-color: rgba(51, 102, 204, 0.7);

                .close-btn {
                    background-color: rgba(51, 102, 204, 0.7);
                    transform: translate(35%, -25%);
                }

                .company-item {
                    color: #fff;

                    .icon {
                        background: #eee;
                    }

                    &:not(:first-child) {
                        border-top: 1px solid #999;
                    }
                }
            }

        }

        .map-company-box {
            background-color: rgba(51, 102, 204, 0.7);

            color: #eee;

            .close-btn {
                background-color: rgba(51, 102, 204, 0.7);

            }

            .title-box {
                border-bottom: 2px solid #ddd;

                .name {
                    color: #fff;
                }
            }

            .monitor-box {
                .monitor {
                    color: #ddd;

                    .name {
                        color: #eee;
                    }

                    .splite {
                        border-bottom: 1px dashed #666;
                    }
                }
            }

            .page-box,
            .btn-box {
                button {
                    border: 1px solid #ccc;
                    background-color: rgba(51, 102, 204, 0.9);

                    &:disabled {
                        color: #aaa;
                        background-color: rgba(51, 102, 204, 0.4);
                        border: 1px solid #aaa;
                    }

                    &:not(:disabled):hover {
                        color: #fff;
                        border-color: #fff;
                    }
                }

            }

            .page-box {
                left: 15px;

                .mid {

                    border: 1px solid #ccc;
                    background-color: rgba(51, 102, 204, 0.6);
                }
            }

            .btn-box {
                right: 15px;

                button {
                    width: auto;
                    padding: 0 10px;
                }
            }
        }

        .clean-box {
            --c: rgba(32, 107, 172, 0.9);

            &.over {
                --c: rgba(236, 90, 90, 0.9);
            }

            .box-header {
                color: #eee;

                .tool {
                    border: 1px solid #ccc;

                    &:hover {
                        color: #fff;
                        border-color: #fff;
                    }
                }
            }
        }
    }

}

.bar-box {
    display: flex;
    flex: 1;
    height: 30%;
    width: 100%;
    margin: 10px 0;
    align-items: center;
    position: relative;
    font-size: 14px;

    &:first-child {
        margin-top: 0;
    }

    .title {
        color: #fff;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .bar {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ddd;
        height: 100%;
        white-space: nowrap;
        min-width: 100px;
        padding-top: 15px;

        .num {
            color: #fff;
            font-size: 16px;
        }

        &.bar-green {
            background: linear-gradient(rgba(56, 164, 90, 0.7),
                    rgba(56, 164, 90, 0.7));
            box-shadow: 1px 5px 5px rgba(56, 164, 90, 0.8);
        }

        &.bar-info {
            background: linear-gradient(rgba(76, 136, 207, 0.7),
                    rgba(76, 136, 207, 0.7));
            box-shadow: 1px 5px 5px rgba(76, 136, 207, 0.8);
        }

        &.bar-yellow {
            background: linear-gradient(rgba(255, 185, 126, 0.7),
                    rgba(255, 185, 126, 0.7));
            box-shadow: 1px 5px 5px rgba(255, 185, 126, 0.8);
        }

        &.bar-red {
            background: linear-gradient(rgba(236, 120, 120, 0.7),
                    rgba(236, 120, 120, 0.7));
            box-shadow: 1px 5px 5px rgba(236, 120, 120, 0.8);
        }
    }
}

#chart-pf_1,
#chart-pf_2 {
    width: 100%;
    height: 50%;
}

.body-content.charts-box {
    flex: 1;
    justify-content: center;
    align-items: center;
}

.chart-pf {
    width: 100%;
    height: calc(50% - 10px);
}







.map-company-box {
    width: 100%;
    height: 300px;
    background: #999;
}

.close-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(25%, -25%);
    background: transparent;
    cursor: pointer;
    background-size: 90%;
    background-position: center;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjU1MzY1ODQ3ODQwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIyNzgiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNTEyIDk2MEMyNjQuOTYgOTYwIDY0IDc1OS4wNCA2NCA1MTJTMjY0Ljk2IDY0IDUxMiA2NHM0NDggMjAwLjk2IDQ0OCA0NDhTNzU5LjA0IDk2MCA1MTIgOTYwek01MTIgMTI4LjI4OEMzMDAuNDE2IDEyOC4yODggMTI4LjI4OCAzMDAuNDE2IDEyOC4yODggNTEyYzAgMjExLjU1MiAxNzIuMTI4IDM4My43MTIgMzgzLjcxMiAzODMuNzEyIDIxMS41NTIgMCAzODMuNzEyLTE3Mi4xNiAzODMuNzEyLTM4My43MTJDODk1LjcxMiAzMDAuNDE2IDcyMy41NTIgMTI4LjI4OCA1MTIgMTI4LjI4OHoiIHAtaWQ9IjIyNzkiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48cGF0aCBkPSJNNTU3LjA1NiA1MTMuMzc2bDEzOC4zNjgtMTM2Ljg2NGMxMi41NzYtMTIuNDE2IDEyLjY3Mi0zMi42NzIgMC4yNTYtNDUuMjQ4LTEyLjQxNi0xMi41NzYtMzIuNzA0LTEyLjY3Mi00NS4yNDgtMC4yNTZsLTEzOC41NiAxMzcuMDI0LTEzNi40NDgtMTM2Ljg2NGMtMTIuNTEyLTEyLjUxMi0zMi43MzYtMTIuNTc2LTQ1LjI0OC0wLjA2NC0xMi41MTIgMTIuNDgtMTIuNTQ0IDMyLjczNi0wLjA2NCA0NS4yNDhsMTM2LjI1NiAxMzYuNjcyLTEzNy4zNzYgMTM1LjkwNGMtMTIuNTc2IDEyLjQ0OC0xMi42NzIgMzIuNjcyLTAuMjU2IDQ1LjI0OCA2LjI3MiA2LjMzNiAxNC40OTYgOS41MDQgMjIuNzUyIDkuNTA0IDguMTI4IDAgMTYuMjU2LTMuMTA0IDIyLjQ5Ni05LjI0OGwxMzcuNTY4LTEzNi4wNjQgMTM4LjY4OCAxMzkuMTM2YzYuMjQgNi4yNzIgMTQuNDMyIDkuNDA4IDIyLjY1NiA5LjQwOCA4LjE5MiAwIDE2LjM1Mi0zLjEzNiAyMi41OTItOS4zNDQgMTIuNTEyLTEyLjQ4IDEyLjU0NC0zMi43MDQgMC4wNjQtNDUuMjQ4TDU1Ny4wNTYgNTEzLjM3NnoiIHAtaWQ9IjIyODAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=");
}