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

@import "./setting.less";

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

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

  .green {
    color: #05bb4c;
    font-weight: 700;
    transition: @transition;
  }

  .green1 {
    color: fade(@white, 80);
    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;
    }
    .text1 {
      color: @black;
      transition: @transition;
    }
  }

  .save-item {
    .save-value {
      color: @black;
      transition: @transition;
    }
    .save-name {
      color: #5e6269;
      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;
    }
  }

  .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;
  }
  .tab-box .tab-item.active1,
  .rightTitle .active1 {
    color: @deepblue;
    position: relative;
    background-image: linear-gradient(
      to top,
      rgba(57, 54, 143, 0.5),
      rgba(255, 255, 255, 1)
    );
    transition: @transition;
  }

  .tab-box .tab-item.active::after,
  .rightTitle .active1::after {
    // border: 0.093vh solid @deepblue;
    transition: @transition;
  }

  .header-menu .header-menu-list .header-menu-item.active::after {
    border: 0.093vh solid @deepblue;
    transition: @transition;
  }

  .header-menu .header-menu-list .header-menu-item.active {
    color: @deepblue;
    position: relative;
    background: linear-gradient(
      to top,
      rgba(57, 54, 143, 0.5),
      rgba(5, 187, 76, 0)
    );
    border: 0.093vh solid @deepblue;
    transition: color @transition ease-in-out;
  }

  .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;
  }

  .query {
    &.mg-b-8 {
      padding-top: 10px;
    }
    &.mg-b-16 {
      padding-top: 10px;
    }
  }

  .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;
    }
  }

  .svg-map {
    .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;
    }
  }
  .status {
    background-color: #ffffff;
    padding: 10px;
    margin-top: 10px;
    border-radius: 10px;
    .table-box1 {
      border: 0.093vh solid #ffffff;
    }
    .com-table tbody tr:nth-child(2n) {
      background-color: #ffffff;
    }
  }
  .monitorOverview {
    .stationName {
      color: #000000;
    }
    .station-info .item-title {
      color: #000000;
    }
    .station-info .item-name {
      color: #000000;
    }
    .station-info .item-unit {
      color: #000000;
    }
    .model .energy-title {
      color: #000000;
      background-color: rgba(83, 98, 104, 0.4);
      // background: #fff;
    }

    .model1 .energy-title {
      color: #000000;
      background-color: rgba(83, 98, 104, 0.4);
      // background: #fff;
    }

    .energy-content .num {
      color: #000000;
    }
  }
  .com-panel-3,
  .com-panel,
  .header-body {
    background: #fff;
    transition: @transition;
  }

  .com-panel-3 .dot,
  .com-panel.line:before {
    background: @black;
    transition: @transition;
  }

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

  .fengji-icon {
    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::before {
    width: 4px;
    height: 4px;
    background: @black;
    margin: 0.85vh 0.556vh 0vh 0.85vh;
    transition: @transition;
  }

  .com-panel.line {
    border-left: 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.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;

  .zbtjfx .zbtjfx-body {
    .zbtjfx-up .zbtjfx-up-panel {
      background: #ffffff;
      border: 1px solid #ffffff;

      .zbtjfx-up-panel-l {
        border-right: 1px dashed #36348e;
      }

      .zbtjfx-up-panel-r-t {
        color: #36348e;
      }

      .zbtjfx-up-panel-r-b {
        color: #000000;
      }
    }

    .zbtjfx-mi .zbtjfx-mi-panel {
      background: #ffffff;
      border: 1px solid #ffffff;

      .zbtjfx-mi-panel-text {
        color: #666666;

        .zbtjfx-mi-panel-text-green {
          color: #05bb4c;
        }
      }
    }

    .zbtjfx-dn {
      color: #000000;
    }
  }
}