// 驾驶舱模块白色主题样式

@import "./setting.less";

#appBody.light {
    color     : @black;
    transition: @transition;

    .gray {
        color      : @black;
        font-weight: 700;
        transition : @transition;
    }

    .green {
        color      : @deepblue;
        font-weight: 700;
        transition : @transition;
    }

    .white {
        color     : @black;
        transition: @transition;
    }

    #app {
        // background: rgb(220, 221, 223);
        transition: @transition;
    }

    .panel-title {
        color     : @black;
        transition: @transition;
    }

    .panel-tools {
        color     : @black;
        transition: @transition;
    }

    .weather {
        .other-info {
            .text {
                color     : @black;
                transition: @transition;
            }

            div.svg-icon svg use {
                fill      : @deepblue;
                transition: @transition;
            }
        }
    }

    .security-days {
        .text {
            color     : @black;
            transition: @transition;
        }

        .num {
            color     : @deepblue;
            transition: @transition;
        }
    }

    .tab-box {
        .tab-item {
            span {
                svg {
                    use {
                        fill      : @black;
                        transition: @transition;
                    }
                }
            }
        }
    }

    .header-body {
        border    : 0;
        transition: @transition;

        .header-title {
            svg {
                g:nth-child(1) {

                    path,
                    polygon {
                        fill      : @black;
                        transition: @transition;
                    }
                }
            }
        }
    }

    .weather-info {
        span svg use {
            fill      : @black;
            transition: @transition;
        }
    }

    .map .tab-box .tab-item.active {
        color   : @deepblue;
        position: relative;
        background-image: linear-gradient(to top,
                rgba(57, 54, 143, 0.5),
                rgba(5, 187, 76, 0));
        transition: @transition;
    }

    .map .tab-box .tab-item.active::after {
        border    : 0.093vh solid @deepblue;
        transition: @transition;
    }
	.header-menu .header-menu-list{
		align-items: center;
		.header-menu-item{
			width: 11.259vh;
			height: 70%;
			&.active::after {
				content: inherit;
				transition: @transition;
			}
			
			&.active {
			    color   : @deepblue;
			    background: @fadePurple;
				    border-radius: 0.3125rem;
			}
		}
	}


    .home .table-card {
        outline   : none;
        transition: @transition;
        overflow  : hidden;
    }

    .coulometric-analysis {
        .card-1 {
            .card-icon {
                svg use {
                    fill      : @deepblue;
                    filter    : drop-shadow(0 0 6px @deepblue);
                    transition: @transition;
                }
            }
        }
    }

    .map .compass {
        svg g:nth-child(3) {
            g g path {
                fill      : @deepblue;
                transition: @transition;
            }
        }

        svg g:nth-child(4) {
            g g path {
                fill      : @deepblue;
                transition: @transition;
            }
        }

        &::after {
            box-shadow: inset 0px -5px 10px 0px @deepblue;
            transition: @transition;
        }
    }

    .name-box-period-label {
        color     : @black;
        transition: @transition;
    }

    .name-box-period-value {
        color     : @deepblue;
        transition: @transition;
    }

    .svg-map-nx {
        .item-label {
            rect {
                fill      : @deepblue;
                transition: @transition;
            }

            .mapKey {
                fill      : #fff;
                transition: @transition;
            }
        }

        .popup-layer-svg {
            .mapKey {
                fill      : #fff;
                transition: @transition;
            }
        }

        #popup-box-svg rect {
            fill      : @deepblue;
            opacity   : 0.8;
            transition: @transition;
        }

        .esp-1 {
            stroke: @deepblue;
        }

        .esp-6 {
            stroke: @deepblue;
        }

        .esp-c {
            stroke: @deepblue;
        }
    }

    .com-panel-3,
    .com-panel,
    .header-body {
        background: #fff;
        transition: @transition;
    }

    .com-panel.line:before {
        background: @black;
        transition: @transition;
    }
	.com-panel-3{
		border-radius: 10px;
		.dot{
			background: transparent;
			transition: @transition;
		}
	}

    .panel-header {
        background: #fff;
        transition: @transition;
    }

    .fengji-icon {
		box-shadow: inset 1.5px -1px 1px 0px @deepblue;
        svg use {
            fill      : @deepblue;
            transition: @transition;
        }
    }

    .modal.el-dialog {
        background   : rgba(255, 255, 255, 0.85);
        border       : 1px solid rgba(57, 54, 143, 0.5);
        box-shadow   : 0px 8px 17px 1px rgb(57, 54, 143 / 30%);
        border-radius: @borderRaduis;
        transition   : @transition;
    }

    .modal.el-dialog .el-dialog__title {
        color     : rgba(0, 0, 0, 0.75);
        transition: @transition;
    }

    .situation-body {
        .value span:nth-child(2) {
            font-weight: 700;
            transition : @transition;
        }
    }

    .coulometric-analysis .card-title {
        color     : @black;
        transition: @transition;
    }

    .com-panel,
    .panel-header,
    .home .table-card,
    .com-panel-3.situation,
    .el-menu--collapse,
    .el-sub-menu,
    .el-sub-menu__title,
    .el-menu--popup,
    .el-menu-item {
        border-radius: @borderRaduis;
        transition   : @transition;
    }

    .com-panel {
        padding-bottom: 10px;
        transition    : @transition;
    }

    .com-panel.line {
        border-left: 0;
        transition : @transition;
		margin-left: 1px;
		z-index: 1;
		font-weight: 900;
		&::before {
			width     : 0;
			height    : 0;
			margin    : 0;
			transition: @transition;
		}
    }

    .lightMenu {
        width        : 0;
        height       : calc(100% - 71px);
        position     : absolute;
        left         : 14px;
        top          : 57px;
        z-index      : 100;
        border-radius: 20px;
        border       : 0;
        overflow     : hidden;
        transition   : @transition;
    }

    .lightMenu.show {
        width     : 54px;
        transition: @transition;
    }

    .main-body {
        transition : @transition;
    }
	// .dot{
		
	// }
    // .dot.top-left {
    //     top       : 0.85vh;
    //     left      : 0.85vh;
    //     background: @black;
    //     transition: @transition;
    // }

    // .dot.bottom-left {
    //     bottom    : 0.85vh;
    //     left      : 0.85vh;
    //     background: @black;
    //     transition: @transition;
    // }

    // .dot.top-rignt {
    //     top       : 0.85vh;
    //     right     : 0.85vh;
    //     background: @black;
    //     transition: @transition;
    // }

    // .dot.bottom-right {
    //     bottom    : 0.85vh;
    //     right     : 0.85vh;
    //     background: @black;
    //     transition: @transition;
    // }

    .lightMenu .el-menu--collapse {
        width     : 54px;
        transition: @transition;
    }

    .lightMenu .el-menu--collapse {
        height: 100%;
    }

    .lightMenu .el-sub-menu__title {
        text-align    : center;
        vertical-align: middle;
        padding       : 0 20px;
        transition    : @transition;
    }

    .lightMenu .el-sub-menu__title i {
        color     : #fff;
        transition: @transition;
    }
	
	.el-popper.is-light.is-pure .el-menu--popup {
	  padding:0;
	  .el-menu-item-group__title{padding:0;}
	  .el-menu-item{height: 46px;line-height: 46px;}
	}
	
	.el-popper.is-light{
		border:none;
		.el-menu{border-radius: 0px;}
	}
	
    .com-panel-3 {
        border    : 0;
        transition: @transition;
    }

    .map .return {
        color     : rgba(0, 0, 0, 0.8);
        transition: @transition;

        use {
            fill      : @black;
            transition: @transition;
        }
    }

    .map .return:hover {
        color       : @deepblue;
        border-color: @deepblue;
        transition  : @transition;

        use {
            fill      : @deepblue;
            transition: @transition;
        }
    }

    .name-box {
        .name-box-title {
            color     : @black;
            transition: @transition;
        }
    }
	
    background: rgb(220, 221, 223);
    transition: @transition;
}