@import './common/var.scss';
@import './base.scss';
@import './simplicity.scss';
@import './simplicity-top.scss';
.es-main-box {
  height: 100%;
  overflow: hidden;
  position: relative;
  .es-launch-image {
    z-index: 99999;
  }
}
.es-main {
  height: 100%;
  overflow: hidden;
  position: relative;

  .es-main-header {
    height: $--main-header-height;
    position: relative;
    background-color: $--color-primary;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    color: #fff;
    @extend .es-flex;
    @extend .es-align-middle;

    .es-main-logo {
      max-height: 60%;
      margin-left: 50px;
    }

    .es-logo-error {
      padding: 0 4px;
      display: flex;
      align-items: center;
      width: 300px;
      height: 100%;
      color: #333;
      background: #f5f7fa;

      .el-icon-picture-outline {
        font-size: 30px;
        color: #909399;
      }
    }
    & ~ .es-main-default-box {
      top: $--main-header-height;
    }
  }

  .es-main-top-nav {
    flex: 1;
    height: 100%;
    position: relative;
    .es-menu-horizontal-scrollbar {
      position: absolute;
      left: 0;
      right: 0;
      height: $--main-header-height;
    }
    .es-fourth-tabs {
      border: 0;
      background-color: $--color-primary;
      .el-menu {
        border-bottom: 0;
      }
      .el-menu-item,
      .es-submenu,
      .el-submenu__title {
        height: $--main-header-height !important;
        line-height: 1 !important;
        color: rgba(255, 255, 255, 0.85) !important;
        &:not(.is-disabled) {
          &:focus,
          &:hover,
          &.is-active,
          &.es-menu-item-focus {
            background-color: $--color-primary-light-7;
            border: 0;
            & > .el-submenu__title {
              border: 0;
            }
          }
        }
        .es-menu-item-icon {
          color: rgba(255, 255, 255, 0.85);
        }
        .el-submenu__icon-arrow {
          color: rgba(255, 255, 255, 0.85);
        }
      }
      .el-menu-item {
        @extend .es-flex-vertical, .es-align-middle, .es-align-center;
      }
    }
  }
  .es-main-default-box {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
  }

  .es-main-left {
    height: 100%;
    position: relative;
    background-color: $--color-primary-light-10;
    .es-main-side {
      overflow: hidden;
      &.es-main-topside {
        margin-top: -$--main-header-height;
      }
      .es-main-side-logo {
        height: $--main-header-height;
        display: block;
        width: 230px;
        .es-main-logo {
          height: $--main-header-height;
        }
      }
      .es-handle-user {
        .es-user-info {
          height: auto;
          padding: 8px 4px 8px 0;
          .es-user-name {
            height: 30px;
            line-height: 30px;
          }
        }
      }
    }
  }

  .es-main-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-orient: vertical;
    position: relative;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;

    .es-body {
      flex: 1;
      position: relative;
      overflow: hidden;
      &.es-body-wrapper {
        &::after {
          content: '';
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
        }
      }
    }

    .es-body-main {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }
  }

  .es-fourth-tabs {
    height: 45px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-bottom: $--border-base;
    .el-menu-item {
      height: 44px;
      line-height: 44px;
    }
  }

  .es-setting-btn {
    position: fixed;
    right: 0;
    top: 200px;
    z-index: 9;

    .es-icon-set {
      font-size: 18px;
      font-weight: bold;
    }
  }
  &.es-main-topside {
    color: #333 !important;
    .es-main-header {
      padding-left: 230px;
    }
    .es-handle-user {
      padding-top: 16px;
      padding-bottom: 16px;
    }
    .es-main-left {
      border-right: $--border-base;
    }
    .es-nav-main:not(.es-nav-overlap) {
      background-color: transparent;
      border-right: 0;
    }
    .es-main-top-nav {
      .es-menu-horizontal {
        background-color: transparent;
      }
    }
  }
  .es-apps-modal,
  .es-public-drawer {
    position: absolute;
    .el-drawer__header {
      margin-bottom: 0;
    }
    .el-drawer__body {
      padding: 0;
      position: relative;
    }
  }
}
.el-menu--popup-topnav {
  .el-menu {
    background-color: $--color-primary !important;
    color: #ffff !important;
    .el-menu-item,
    .el-submenu__title {
      background-color: transparent !important;
      color: #fff !important;
      .es-menu-item-icon {
        color: #fff;
      }
      .el-submenu__icon-arrow {
        color: #fff;
      }
      &:not(.is-disabled) {
        &:focus,
        &:hover,
        &.is-active {
          background-color: $--color-primary-light-7 !important;
        }
      }
    }
  }
}

.es-sets-drawer {
  padding-top: 48px;

  .el-drawer__header {
    padding: 12px 4px 12px 16px !important;
    margin: 0 !important;
    border-bottom: $--border-base;
    box-shadow: $--box-shadow-base;
    line-height: 21px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 1;

    span {
      font-size: 16px;
      color: #333;
    }
  }

  .el-drawer__body {
    padding: 16px 20px;
  }
}
.es-setting-item {
  & + .es-setting-item {
    border-top: $--border-base;
    padding-top: 20px;
    margin-top: 20px;
  }
  .es-setting-navs-box {
    display: flex;
    flex-wrap: wrap;
    .es-setting-navs-item {
      margin-left: 16px;
    }
  }
  .es-setting-navs {
    width: 100px;
    height: 50px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    background-color: $--color-primary;
    margin-bottom: 12px;
    cursor: pointer;
    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 10px;
      right: 0;
      bottom: 0;
      z-index: 1;
      background-color: #f0f2f5;
    }
    &.es-setting-side-nav {
      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 8px;
        top: 10px;
        bottom: 0;
        z-index: 2;
        background-color: $--color-primary-light-8;
      }
      .es-setting-side-sub-nav {
        width: 16px;
        position: absolute;
        left: 8px;
        top: 10px;
        bottom: 0;
        z-index: 3;
        background-color: $--color-primary-light-10;
      }
    }
    &.es-setting-app-nav {
      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 8px;
        top: 0;
        bottom: 0;
        z-index: 2;
        background-color: $--color-primary-light-8;
      }
      &::after {
        top: 0;
      }
    }
    &.es-setting-subsystem-nav {
      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 16px;
        top: 10px;
        bottom: 0;
        z-index: 2;
        background-color: $--color-primary-light-10;
      }
    }
    &.es-setting-top-side-nav {
      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 20px;
        top: 10px;
        bottom: 0;
        z-index: 2;
        background-color: $--color-primary-light-10;
      }
    }
    &.es-setting-side-navs {
      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 20px;
        top: 0;
        bottom: 0;
        z-index: 2;
        background-color: $--color-primary-light-10;
      }
    }
    .icon-gou {
      position: absolute;
      z-index: 9;
      left: 50%;
      top: 50%;
      margin-left: -8px;
      margin-top: -6px;
    }
  }
}
.es-setting-title {
  margin-bottom: 12px;
  font-size: 14px;
}

.es-setting-theme {
  .el-radio-button {
    cursor: pointer;
    margin-right: 8px;
    border-radius: 2px;
  }

  .el-radio-button__inner {
    z-index: -1;
  }

  .el-radio-button__inner {
    background-color: transparent !important;
    border: 0;
    display: inline-block;
    padding: 0;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    text-align: center;
    line-height: 20px;
  }

  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: transparent !important;
    z-index: 1;
    border-radius: 2px;
    border: 0;
  }
}

.es-msgs-box {
  position: absolute;

  .el-drawer__header {
    padding: 8px 0 0 12px;
    margin-bottom: 0;
  }

  .es-msgs-main {
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.3);
    overflow: hidden;

    .el-drawer__body {
      padding: 0;
      @extend .es-flex-vertical;
    }
  }

  .es-overlook {
    cursor: pointer;
    line-height: 14px;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 12px;

    &:hover {
      color: $--color-primary;
      border-color: $--color-primary-light-3;
      background-color: $--color-primary-light-1;
    }
  }

  .es-msg-header {
    height: 46px;
    line-height: 22px;
    font-size: 14px;
    border-bottom: $--border-base;
    padding: 12px;
    background-color: #f3f3f3;

    .es-overlook {
      float: right;
      line-height: 18px;
    }
  }

  .es-msg-lists-box {
    flex: 1;
    position: relative;
    overflow: hidden;

    .es-msg-lists {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
    }

    .es-msg-item {
      margin: 8px 12px;
      position: relative;
      overflow: visible;

      .el-card__body {
        padding: 8px;
      }

      & + .es-msg-item {
        margin-top: 0;
      }

      .es-overlook {
        float: right;
      }

      .el-icon-circle-close {
        color: #606266;
        cursor: pointer;
        position: absolute;
        background-color: #fff;
        border-radius: 8px;
        top: -4px;
        right: -6px;
        font-size: 16px;

        &:hover {
          color: $--color-primary;
          border-color: $--color-primary-light-3;
          background-color: $--color-primary-light-1;
        }
      }
    }

    .es-msg-item-title {
      font-size: 12px;
      margin-bottom: 8px;
      line-height: 18px;
      text-align: justify;
    }

    .es-msg-item-time {
      font-size: 12px;
      color: #606266;
    }

    .es-msg-tips {
      line-height: 24px;
      font-size: 12px;
      text-align: center;
    }
  }

  .es-msg-total,
  .es-notice-footer {
    height: 46px;
    line-height: 22px;
    font-size: 14px;
    border-top: $--border-base;
    padding: 12px;
    background-color: #f3f3f3;
    span {
      cursor: pointer;
    }
  }
}

.es-notice-box {
  position: absolute;
  border: $--border-base;
  border-radius: 4px;
  right: 0;
  bottom: 0;
  box-shadow: $--box-shadow-base;
  z-index: 99;

  .es-msgs-box {
    background-color: #ffffff;
    position: unset;
    animation: rtl-drawer-out 0.3s;
    width: 260px;
    height: 260px;
    @extend .es-flex-vertical;

    &.es-in {
      animation: rtl-drawer-in 0.3s 1ms;
    }
  }
}

.es-user-info {
  .el-collapse-item__content {
    position: relative;
  }

  .el-form-item.es-user-info-job {
    // display: none !important;
    position: absolute;
    left: 50%;
    width: 50% !important;

    .el-form-item__content {
      margin-right: 0;
    }
  }

  .el-form-item.es-qrcode {
    // display: none !important;
    position: absolute;
    left: 20%;
    width: 50% !important;
    pointer-events: none;

    .el-form-item__content {
      margin-right: 0;
    }
  }
}

.weixinQrcode {
  margin-left: 12px;
  width: 102px;
  height: 102px;
  border: 1px solid #333;
}
.es-clients-dialog {
  .el-dialog__header {
    background-color: $--color-primary !important;
    border-bottom-color: $--color-primary !important;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__headerbtn .el-icon {
      color: #fff !important;
      &:hover {
        opacity: 0.8;
      }
    }
  }
  .el-dialog__body {
    padding: 0;
  }
}
.es-public-drawer-main {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.es-ai-icon {
  width: 56px;
  height: 56px;
  cursor: move;
  vertical-align: top;
  display: flex;
  align-items: center;
  justify-content: center;
  .es-ai-image {
    width: 56px;
  }
}
