svg {
  vertical-align: text-bottom !important;
}

#app {
  .main-container {
    // min-height: 100%;
    transition: margin-left 0.28s;
    // margin-left: $sideBarWidth;
    position: relative;
  }

  .sidebar-container {
    transition: width 0.28s;
    width: $sideBarWidth !important;
    background-color: $menuBg;
    height: calc(100vh - 60px);
    padding-top: 15px;
    position: absolute;
    top: 60px;
    bottom: 0;
    left: 0;
    z-index: 98;
    overflow: hidden;

    // reset element-ui css
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out,
        0s padding-right ease-in-out;
    }

    .scrollbar-wrapper {
      overflow-x: hidden !important;
    }

    .el-scrollbar__bar.is-vertical {
      right: 0px;
    }

    .el-scrollbar {
      height: 100%;
    }

    &.has-logo {
      .el-scrollbar {
        height: calc(100% - 50px);
      }
    }

    .is-horizontal {
      display: none;
    }


    .svg-icon {
      margin-right: 16px;
    }

    .sub-el-icon {
      margin-right: 12px;
      margin-left: -2px;
    }

    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
    }

    // menu hover
    .submenu-title-noDropdown,
    .el-sub-menu__title {
      &:hover {
        color: #209f84 !important;
      }
    }

    // .is-active > .el-sub-menu__title {
    //   color: $subMenuActiveText !important;
    // }

    & .nest-menu .el-sub-menu>.el-sub-menu__title,
    & .el-sub-menu .el-menu-item {
      min-width: $sideBarWidth !important;
      background-color: $subMenuBg !important;

      &:hover {
        color: #209f84 !important;
      }
    }

    .el-menu-item.is-active {
      border-right: 3px solid #209f84;
      background: #e1f2ee !important;
      color: #209f84 !important;
    }
  }

  .hideSidebar {
    .sidebar-container {
      width: 54px !important;

      .svg-icon {
        margin-right: 0px;
      }
    }

    .main-container {
      margin-left: 54px;
    }

    .submenu-title-noDropdown {
      padding: 0 !important;
      position: relative;

      .el-tooltip {
        padding: 0 !important;

        .svg-icon {
          margin-left: 20px;
        }

        .sub-el-icon {
          margin-left: 19px;
        }
      }
    }

    .el-sub-menu {
      overflow: hidden;

      &>.el-sub-menu__title {
        padding: 0 !important;

        .svg-icon {
          margin-left: 20px;
        }

        .sub-el-icon {
          margin-left: 19px;
        }

        .el-sub-menu__icon-arrow {
          display: none;
        }
      }

    }

    .el-menu--collapse {
      .el-sub-menu {
        &>.el-sub-menu__title {
          &>span {
            height: 0;
            width: 0;
            overflow: hidden;
            visibility: hidden;
            display: inline-block;
          }
        }
      }
    }
  }

  .el-menu--collapse .el-menu .el-sub-menu {
    min-width: $sideBarWidth !important;
  }

  // mobile responsive
  .mobile {
    .main-container {
      margin-left: 0px;
    }

    .sidebar-container {
      transition: transform 0.28s;
      width: $sideBarWidth !important;
    }

    &.hideSidebar {
      .sidebar-container {
        pointer-events: none;
        transition-duration: 0.3s;
        transform: translate3d(-$sideBarWidth, 0, 0);
      }
    }
  }

  .withoutAnimation {

    .main-container,
    .sidebar-container {
      transition: none;
    }
  }
}

// when menu collapsed
.el-menu--vertical {
  &>.el-menu {
    .svg-icon {
      margin-right: 16px;
    }

    .sub-el-icon {
      margin-right: 12px;
      margin-left: -2px;
    }
  }

  .nest-menu .el-sub-menu>.el-sub-menu__title,
  .el-menu-item {
    &:hover {
      background-color: #ffffff;
      // you can use $subMenuHover
      color: $menuHover !important;
    }
  }

  // the scroll bar appears when the subMenu is too long
  >.el-menu--popup {
    max-height: 100vh;
    overflow-y: auto;

    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #99a9bf;
      border-radius: 20px;
    }
  }
}

body[layout="mix"] {

  .horizontal-header {
    .el-menu-item {
      height: 50px !important;
      line-height: 50px !important;
    }

    .el-sub-menu__title {
      background-color: #001529 !important;
      height: 50px !important;
    }
  }

  .horizontal-header-right>div {
    color: #FFF;
  }

  .svg-icon {
    margin-right: 16px;
  }

}
.moveBtn-line {
  background-color: #409Eff !important;
}
//选中
// .el-table {
//   --el-table-current-row-background-color: rgba(100, 250, 0, 0.219) !important;
// }


.el-checkbox__inner:hover {
  border-color: #409Eff !important;
}
.el-checkbox__inner{
  background-color: #ffffff00 !important;
  //
}
.el-checkbox .el-checkbox--default .is-checked{
  border-color: #409Eff !important;
}
.screenHomepage .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px #009bff !important;
  color: #fff  !important;
}
.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px #009bff !important;
}
.colorgren.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px #209F84 !important;
}
.is-background .el-pager li.is-active {
  background-color: #209F84 !important;
  color: var(--el-color-white);
}
.el-checkbox{
  --el-checkbox-text-color:#fff !important;
}



.el-select .el-input.is-focus .el-input__wrapper {
  box-shadow: 0 0 0 1px #009bff !important;
}

.effective {
  color: #fff;
}

.el-checkbox__input.is-checked+.el-checkbox__label {
  color: #009BFF !important;
}

.el-tree-node.is-current>.el-tree-node__content {
  background-color: #209F84 !important;
}

:deep(.el-tree-node__content:hover) {
  background-color: #F7F7F7 ; 
}

.el-textarea.is-disabled .el-textarea__inner{
  background-color: #ffffff00 !important;
  box-shadow: 0 0 0 1px #225b7e inset !important; 
}
// .el-menu--horizontal>#color.is-active {
//   border-bottom: 2px solid #209F84 !important;
//   color: #209F84 !important;
// }

// .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
//   color: #209F84 !important;
//   background-color: #d8f0eb !important;

// }

.el-tabs__item{
  color: #B5D7FF !important;
  }
.el-tabs__item.is-active {
  color: #009bff !important;
}

.el-tabs__item:hover {
  color: #009bff !important;
}

.el-dialog__headerbtn:hover .el-dialog__close {
  color: #009bff !important;
}

.el-textarea {
  --el-input-focus-border-color: #209F84 !important;
}

// .el-button {
//   --el-button-hover-text-color:#209F84 !important;
//   --el-button-hover-bg-color: #d8f0eb !important;
//   --el-button-hover-border-color: #209F84 !important;
// }
.el-select-dropdown__item.selected{
  color: #209F84 !important;
}
.el-message-box__headerbtn:focus .el-message-box__close, .el-message-box__headerbtn:hover .el-message-box__close{
  color: #209F84 !important;
}
.el-table__inner-wrapper::before{
  background-color:#ffffff00 !important;
}
.el-select{
  --el-select-input-focus-border-color: #209F84 !important;
}
.login-container .el-input .el-input__wrapper{
  box-shadow: none !important;
}
//表格多选样式
.el-table .success-row {
  background: #0c2a62 !important;
  color: #fff !important;
}
.el-table .warning-row {
  background: #001f5a !important;
  color: #fff !important;
}
.el-table .success-row .el-table-fixed-column--right {
  // background: #17212e !important;
}
//
// .el-menu-item.is-active{
//   color: #209F84  !important;
//   background-color: #d8f0eb !important;
// }
//  .el-menu--vertical .el-menu-item :hover{
//  color: #209F84 !important;
// }
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
  background-color: #00152900 !important;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus{
  background-color: #00152900 !important;
}
.el-menu--horizontal>.el-menu-item{
  color: #fff !important;
}
.el-dropdown__popper{
  --el-dropdown-menuItem-hover-fill:#d8f0eb  !important;
    --el-dropdown-menuItem-hover-color: #209F84  !important;
}
.el-date-picker{
  --el-datepicker-active-color:#46a2f3 !important;
}
.screenHomepage .el-select {
  --el-select-input-focus-border-color: #009bff !important;
  --el-select-border-color-hover: #009bff !important;
}

.screenHomepage .el-range-separator {
  color: #fff !important;
}

.screenHomepage .el-date-editor.el-input__wrapper:hover{
  box-shadow: 0 0 0 1px #009bff inset !important; 
}

.el-table {
  --el-table-row-hover-bg-color:#1b2838bb !important;
}
.el-input{
  --el-input-border-color:#225b7e !important;
  --el-input-hover-border-color:#224a7e !important;
}
//改版分页
 .el-pagination.is-background .btn-prev{
  background-color: #17212e !important;
  border: 1px solid #46576c !important;
  min-width: 26px ;
  height: 26px;
  padding-bottom: 5px !important;
  color: #86a0c0 !important;
}
.el-pagination.is-background .btn-next:disabled {
  background-color: #17212e !important;
  border: 1px solid #46576c !important;
  min-width: 26px ;
  height: 26px;
}
.el-pagination.is-background .btn-next{
  background-color: #17212e !important;
  border: 1px solid #46576c;
  min-width: 26px;
  height: 26px;
  padding-bottom: 5px !important;
  color: #86a0c0 !important;
}
.el-pagination.is-background .btn-prev:hover,
.el-pagination.is-background .btn-next:hover{
  border: 1px solid #009bff;
  color: #009bff !important;
}
.el-pagination.is-background .el-pager li:hover{
  border: 1px solid #009bff;
  color: #009bff !important;
}
.el-pagination.is-background .el-pager li.is-active{
  // background-color: #17212e !important;
  // border: 1px solid #46576c;
  min-width: 26px ;
  height: 26px;
  font-family: 微软雅黑;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #ffffff !important;
  background-color: #009bff !important;
  border: 1px solid #009bff;
}
.el-pagination.is-background .el-pager li{
  background-color: #17212e !important;
  border: 1px solid #46576c;
  min-width: 26px ;
  height: 26px;
  font-family: 微软雅黑;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: rgb(181, 215, 255);
}
.el-input.is-disabled .el-input__wrapper{
background-color: #00152900 !important;
box-shadow: 0 0 0 1px #225b7e inset !important;
}
.el-textarea__inner{
background-color: #ffffff00 !important;
box-shadow: 0 0 0 1px #225b7e inset !important;
color:#fff !important;
}
.el-form-item__label{
 color:#b5d7ff !important; 
}
.el-transfer-panel__item.el-checkbox .el-checkbox__label{
color: #fff;
}
////
