@import './common/var.scss';
@import './base.scss';

@keyframes open-submenu {
  0% {
    padding-left: 0;
  }

  100% {
    padding-left: $--main-simplicity-menu-width;
  }
}

@keyframes close-submenu {
  0% {
    padding-left: $--main-simplicity-menu-width;
  }

  100% {
    padding-left: 48px;
  }
}

.es-simplicitytop-top-logo {
  height: 266px;
  width: 58px;
  margin-left: 10px;
}

.es-simplicity-portrait-image {
  width: 100%;
  border-radius: 50%;
  vertical-align: top;
  background: transparent;

  & > img {
    width: 100%;
  }
}

.es-simplicity-main {
  height: 100%;
  margin-left: $--main-simplicity-side-width;
  overflow: hidden;
  position: relative;

  .es-simplicity-apps,
  .es-simplicity-message,
  .es-simplicity-message-modal,
  .es-simplicity-apps-modal,
  .es-simplicity-public-drawer {
    position: absolute;
    top: $--main-simplicity-header-height;
    height: calc(100% - #{$--main-simplicity-header-height});
  }

  .es-simplicity-apps {
    .el-drawer__body {
      background-color: #f4f4f4;
      padding: 20px;

      @media screen and (max-width: 1600px) and (max-height: 900px) {
        padding: 14px;
      }

      @media screen and (max-width: 1280px) and (max-height: 720px) {
        padding: 10px;
      }

      @media screen and (max-width: 1024px) and (max-height: 768px) {
        padding: 6px;
      }
    }
  }

  .es-simplicity-public-drawer {
    .el-drawer__header {
      padding: 10px 0 0;
      margin: 0;
    }
  }

  .es-simplicity-subMenus,
  .es-simplicity-public-drawer {
    .el-drawer__body {
      padding: 0;
      position: relative;
    }
  }

  .es-simplicity-subMenus {
    width: auto;
    height: 100%;
    overflow: visible;
    right: auto;
    position: absolute;
    z-index: 999 !important;

    .el-drawer {
      box-shadow: none;
      overflow: visible;
      border-right: 1px solid #dfebf6;
    }
  }

  .es-simplicity-message {
    .el-drawer {
      background-color: #f4f4f4;
    }
  }
}

.es-simplicity_apps {
  height: 100%;
  display: flex;

  .es-simplicity_apps-all {
    flex: 1;
    @extend .es-flex-vertical;
    margin-right: 20px;

    .es-simplicity_apps-box {
      flex: 1;
    }

    .es-simplicity_apps-list {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      display: flex;
      align-content: flex-start;
      flex-wrap: wrap;

      .es-simplicity_apps-list-item {
        width: 20%;
        height: 25%;
        padding: 12px;

        @media screen and (max-width: 1600px) and (max-height: 900px) {
          padding: 8px;
        }

        @media screen and (max-width: 1280px) and (max-height: 720px) {
          padding: 4px;
        }

        @media screen and (max-width: 1024px) and (max-height: 768px) {
          padding: 2px;
        }
      }
    }

    .es-simplicity_apps-list-content {
      @extend .es-flex-vertical;
      height: 100%;
      justify-content: center;
      align-items: center;
    }

    .es-simplicity_apps-icon {
      margin-bottom: 16px;
      color: $--color-primary;

      @media screen and (max-width: 1600px) and (max-height: 900px) {
        margin-bottom: 12px;
      }

      @media screen and (max-width: 1280px) and (max-height: 720px) {
        margin-bottom: 8px;
      }

      @media screen and (max-width: 1024px) and (max-height: 768px) {
        margin-bottom: 4px;
      }
    }

    .es-simplicity_apps-search {
      width: 200px;

      .el-input__inner {
        border-radius: 16px;

        @media screen and (max-width: 1600px) and (max-height: 900px) {
          height: 28px;
          line-height: 28px;
          font-size: 14px;
        }

        @media screen and (max-width: 1280px) and (max-height: 720px) {
          height: 24px;
          line-height: 24px;
          font-size: 12px;
        }

        @media screen and (max-width: 1024px) and (max-height: 768px) {
          height: 20px;
          line-height: 20px;
          font-size: 12px;
        }

        &::placeholder {
          @media screen and (max-width: 1600px) and (max-height: 900px) {
            font-size: 14px;
          }

          @media screen and (max-width: 1280px) and (max-height: 720px) {
            font-size: 12px;
          }
        }
      }

      .el-input__icon {
        @media screen and (max-width: 1600px) and (max-height: 900px) {
          line-height: 28px;
          font-size: 14px;
        }

        @media screen and (max-width: 1280px) and (max-height: 720px) {
          line-height: 24px;
          font-size: 12px;
        }

        @media screen and (max-width: 1024px) and (max-height: 768px) {
          line-height: 20px;
          font-size: 12px;
        }
      }
    }
  }

  .es-simplicity_apps-title {
    font-weight: 500;
    font-size: 20px;
    color: #15224c;
    line-height: 32px;
    padding: 6px 12px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    @media screen and (max-width: 1600px) and (max-height: 900px) {
      font-size: 17px;
      line-height: 26px;
      padding: 6px 10px 10px;
    }

    @media screen and (max-width: 1280px) and (max-height: 720px) {
      font-size: 14px;
      line-height: 20px;
      padding: 4px 8px 8px;
    }

    @media screen and (max-width: 1024px) and (max-height: 768px) {
      font-size: 12px;
      line-height: 16px;
      padding: 4px 6px 6px;
    }
  }

  .es-simplicity_apps-box {
    position: relative;
  }

  .es-simplicity_apps-list-content {
    background: #ffffff;
    border-radius: 9px;
    padding: 4px;
    cursor: pointer;
    overflow: hidden;
    position: relative;

    &:hover {
      .es-simplicity_apps-hover {
        opacity: 1;
        z-index: 1;

        .es-simplicity_apps-icon {
          color: rgba(255, 255, 255, 0.5);
        }
      }
    }

    &.es-simplicity_apps-disabled {
      cursor: not-allowed;

      .es-simplicity_apps-hover {
        background-color: rgba(115, 122, 148, 0.9);
      }
    }
  }

  .es-simplicity_apps-icon {
    font-size: 34px;
    width: 34px;
    height: 34px;
    line-height: 34px;

    @media screen and (max-width: 1600px) and (max-height: 900px) {
      font-size: 30px;
      width: 30px;
      height: 30px;
      line-height: 30px;
    }

    @media screen and (max-width: 1280px) and (max-height: 720px) {
      font-size: 26px;
      width: 26px;
      height: 26px;
      line-height: 26px;
    }

    @media screen and (max-width: 1024px) and (max-height: 768px) {
      font-size: 22px;
      width: 22px;
      height: 22px;
      line-height: 22px;
    }
  }

  .es-simplicity_apps-text {
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    line-height: 19px;

    @media screen and (max-width: 1600px) and (max-height: 900px) {
      font-size: 14px;
      line-height: 17px;
    }

    @media screen and (max-width: 1280px) and (max-height: 720px) {
      font-size: 12px;
      line-height: 15px;
    }
  }

  .es-simplicity_apps-hover {
    opacity: 0;
    display: flex;
    flex-direction: column;
    box-orient: vertical;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: $--color-primary-light-5;
    color: #fff;
  }

  .es-simplicity_apps-pagination {
    text-align: right;
    padding: 18px 20px;

    @media screen and (max-width: 1600px) and (max-height: 900px) {
      padding: 14px 16px;
    }

    @media screen and (max-width: 1280px) and (max-height: 720px) {
      padding: 10px 12px;
    }

    @media screen and (max-width: 1024px) and (max-height: 768px) {
      padding: 7px 8px;
    }

    .el-pagination__total {
      float: left;

      @media screen and (max-width: 1600px) and (max-height: 900px) {
        height: 24px;
        line-height: 24px;
      }

      @media screen and (max-width: 1280px) and (max-height: 720px) {
        font-size: 12px;
        height: 20px;
        line-height: 20px;
      }

      @media screen and (max-width: 1024px) and (max-height: 768px) {
        font-size: 12px;
        height: 16px;
        line-height: 16px;
      }
    }

    & > button {
      @media screen and (max-width: 1600px) and (max-height: 900px) {
        height: 24px;
        line-height: 24px;
      }

      @media screen and (max-width: 1280px) and (max-height: 720px) {
        font-size: 12px;
        height: 20px;
        line-height: 20px;
      }

      @media screen and (max-width: 1024px) and (max-height: 768px) {
        font-size: 12px;
        height: 16px;
        line-height: 16px;
      }
    }

    .el-pager li {
      background-color: #fff;

      @media screen and (max-width: 1600px) and (max-height: 900px) {
        min-width: 26px;
        height: 24px;
        line-height: 24px;
      }

      @media screen and (max-width: 1280px) and (max-height: 720px) {
        min-width: 22px;
        height: 20px;
        line-height: 20px;
      }

      @media screen and (max-width: 1024px) and (max-height: 768px) {
        min-width: 18px;
        height: 16px;
        line-height: 16px;
      }
    }
  }

  .es-simplicity_apps-other {
    width: 34%;
    padding-left: 20px;
    border-left: 1px solid #cdd9e4;

    @media screen and (max-width: 1600px) and (max-height: 900px) {
      padding-left: 14px;
    }

    @media screen and (max-width: 1280px) and (max-height: 720px) {
      padding-left: 8px;
    }

    .es-simplicity_apps-list {
      display: flex;
      align-content: flex-start;
      flex-wrap: wrap;

      .es-simplicity_apps-list-item {
        width: 50%;
        padding: 12px;

        @media screen and (max-width: 1600px) and (max-height: 900px) {
          padding: 8px;
        }

        @media screen and (max-width: 1280px) and (max-height: 720px) {
          padding: 4px;
        }

        @media screen and (max-width: 1024px) and (max-height: 768px) {
          padding: 2px;
        }
      }

      .es-simplicity_app-icon {
        display: block;
        width: 34px;
        height: 34px;
        font-size: 18px;
        line-height: 34px;
        text-align: center;
        border-radius: 9px;
      }

      .es-simplicity_apps-text {
        margin-left: 12px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        line-clamp: 3;
        -webkit-line-clamp: 3;
        word-wrap: break-word;

        @media screen and (max-width: 1600px) and (max-height: 900px) {
          margin-left: 8px;
        }

        @media screen and (max-width: 1280px) and (max-height: 720px) {
          margin-left: 4px;
        }
      }
    }

    .es-simplicity_apps-list-content {
      display: flex;
      align-items: center;
      padding: 16px;

      @media screen and (max-width: 1600px) and (max-height: 900px) {
        padding: 12px;
      }

      @media screen and (max-width: 1280px) and (max-height: 720px) {
        padding: 8px;
      }

      @media screen and (max-width: 1024px) and (max-height: 768px) {
        padding: 4px;
      }

      .es-simplicity_apps-texts {
        min-height: 36px;
        display: flex;
        align-items: center;
      }

      .es-simplicity_apps-hover {
        flex-direction: row;
      }
    }

    .es-simplicity_apps-systems {
      padding-top: 20px;
      border-top: 1px solid #cdd9e4;
    }
  }
}

.es-simplicity-userinfo {
  padding: 20px;

  .es-simplicity-user {
    border-bottom: 1px solid #dfebf6;
    position: relative;
    padding-bottom: 16px;

    .es-simplicity-user-name {
      font-weight: 500;
      font-size: 20px;
      color: #15224c;
      line-height: 23px;
      margin-bottom: 12px;
      margin-right: 80px;
    }

    .es-simplicity-org-name,
    .es-simplicity-dep-post {
      margin-right: 80px;
      font-weight: 400;
      font-size: 14px;
      color: #737a94;
      line-height: 16px;
      margin-bottom: 8px;
    }

    .es-icon-qiehuangangwei {
      font-size: 20px;
      color: #2591f7;
      cursor: pointer;
      margin-left: 16px;
    }

    .es-simplicity-portrait {
      position: absolute;
      top: 0;
      right: 0;
      width: 64px;
      padding: 0 8px 8px;

      .es-upload {
        margin-top: 12px;
        margin-left: -8px;
        margin-right: -8px;
      }
    }

    .el-upload--handle {
      width: 100%;
    }

    .el-upload--text {
      width: 100%;
      text-align: center;
      font-size: 14px;
      color: #2591f7;
    }
  }

  .es-simplicity-notice-type {
    padding: 24px 0;
    border-bottom: 1px solid #dfebf6;
  }

  .es-simplicity-notice-title {
    font-size: 14px;
    color: #15224c;
    line-height: 16px;
    margin-bottom: 12px;
  }

  .es-simplicity-notice-list {
    .el-checkbox {
      min-width: 115px;
    }
  }

  .es-simplicity-password {
    padding-top: 24px;
    font-size: 14px;
    color: #2591f7;
    line-height: 16px;
    cursor: pointer;

    .es-icon-arrow-right {
      position: relative;
      top: 1px;
      margin-left: 8px;
    }
  }

  .es-simplicity-qrcode {
    width: 100px;
    height: 100px;
  }
}

.es-simplicity-unfold {
  position: fixed;
  left: $--main-simplicity-side-width;
  top: $--main-simplicity-header-height;
  z-index: 9999;

  .el-icon-s-unfold {
    font-size: 32px;
    cursor: move;
    background-color: #fff;
    border-radius: 10px;
  }
}

.es-simplicity-menus {
  height: 100%;
  display: flex;

  .es-simplicity-menus-box {
    width: 220px;
    height: 100%;
    position: relative;

    .es-simplicity-menus-title {
      font-weight: bold;
      line-height: 30px;
      padding: 7px 7px 7px 14px;
      border-bottom: 1px solid #dfebf6;
      display: flex;
      justify-content: center;
      align-items: center;

      .es-simplicity-menus-title-text {
        flex: 1;
        font-size: 20px;
        color: #15224c;
      }

      .es-simplicity-menus-title-icon {
        font-size: 24px;
        color: #b9bdc9;
        cursor: pointer;
      }
    }

    .es-simplicity-menus-scrollbar {
      position: absolute;
      top: 45px;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }

  .es-simplicity-menus-view {
    border-left: 1px solid #dfebf6;
    display: flex;

    .es-simplicity-menus-box + .es-simplicity-menus-box {
      border-left: 1px solid #dfebf6;
    }
  }

  &.es-simplicity-menus-plus {
    .es-simplicity-menus-box {
      .es-simplicity-menus-title {
        padding: 13px 7px 13px 14px;
      }

      .es-simplicity-menus-scrollbar {
        top: 57px;
      }
    }
  }
}

.es-simplicity-menus-lists {
  padding: 8px 0;

  &.is-fold {
    padding: 4px 0;
  }
}

.es-simplicity-menus-item {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 8px 24px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  color: #15224c;

  &.is-fold {
    height: 40px;
    padding: 4px 12px;

    .es-simplicity_apps-icon {
      margin-right: 0;
    }

    .es-simplicity-menus-tips {
      top: 0;
      right: 0;
      color: #ff0000;
      font-size: 12px;
    }

    .es-icon-pointer-right {
      display: none;
    }

    &:hover {
      &::before {
        inset: 0 4px;
      }
    }

    &.is-active {
      &::before {
        inset: 0 4px;
      }
    }
  }

  .es-simplicity_apps-icon {
    height: 24px;
    padding: 4px;
    border-radius: 3px;
    margin-right: 12px;
    color: $--color-primary;
    z-index: 1;
  }

  .es-simplicity-menus-tips {
    font-size: 14px;
    color: #737a94;
    position: absolute;
    right: 16px;

    & + .es-simplicity_apps-text {
      width: 118px;
    }
  }

  .es-simplicity_apps-text {
    width: 200px;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
  }

  &:hover {
    color: $--color-primary;

    &::before {
      content: '';
      display: block;
      position: absolute;
      inset: 0 12px;
      background-color: $--color-primary-light-2;
      border-radius: 6px;
      z-index: 0;
    }
  }

  &.is-active {
    color: $--color-primary;

    &::before {
      content: '';
      display: block;
      position: absolute;
      inset: 0 12px;
      background-color: $--color-primary-light-2;
      border-radius: 6px;
      z-index: 0;
    }
  }

  .es-icon-pointer-right {
    color: #737a94;
    position: absolute;
    right: 0;
  }
}

.es-simplicity-iframe {
  height: 100%;

  & > .el-tabs__header {
    height: $--main-simplicity-header-height;
    padding: ($--main-simplicity-header-height - 36px)/2 0;
    margin: 0;
    border-bottom: 1px solid #dfebf6;
    background-color: #fff;

    & > .el-tabs__nav-main {
      margin: 0 10px;
    }

    .el-tabs__nav-next,
    .el-tabs__nav-prev {
      height: 36px;
      font-size: 16px;
      padding: 0 6px;
    }

    .el-tabs__nav-wrap {
      padding: 0 10px;

      &.is-scrollable {
        padding: 0 28px;
      }

      &::after {
        content: none;
      }

      .el-tabs__item {
        height: 36px;
        line-height: 36px;
        padding: 0 12px !important;
        background: #f2f2f2;
        border-radius: 6px;
        color: #737a94;

        & + .el-tabs__item {
          margin-left: 12px;
        }

        &.is-active {
          color: $--color-primary;
          background-color: $--color-primary-light-1;
        }
      }
    }
  }

  & > .el-tabs__content {
    height: calc(100% - #{$--main-simplicity-header-height});
    background-color: $--background-color-base;

    .el-tab-pane {
      height: 100%;
    }
  }

  &.is-open {
    & > .el-tabs__content {
      animation: open-submenu 0.3s 1ms forwards;
    }

    &.is-fold {
      & > .el-tabs__content {
        animation: close-submenu 0.1s 0ms forwards;
      }
    }
  }
}

.es-simplicitytop-handler {
  height: 36px;
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 24px;
  padding: 0 10px;

  .es-simplicitytop-online-num {
    color: #ffd272;
    font-size: 16px;
  }

  .es-simplicitytop-handler-item {
    color: #fff;
    font-size: 16px;
    position: relative;

    .el-select {
      width: 160px;
      margin-left: 8px;
    }

    .el-input__inner {
      border-radius: 6px;
      height: 32px;
      line-height: 32px;
    }

    .el-input__icon {
      line-height: 32px;
    }

    &:hover {
      opacity: 0.75;
    }

    &:not(:last-child) {
      &:after {
        content: '';
        display: inline-block;
        height: 20px;
        border-right: 1px solid #cdd9e4;
        opacity: 0.2;
        vertical-align: middle;
        margin-left: 16px;
      }
    }

    & + .es-simplicitytop-handler-item {
      margin-left: 16px;
    }
  }

  .es-simplicitytop-handler-icon {
    font-size: 16px;
    padding-right: 5px;
    cursor: pointer;

    &.es-simplicitytop {
      font-size: 16px;
    }

    &.es-icon_image {
      width: 20px;
      height: 20px;
      padding: 0;
    }
  }
  .es-simplicitytop-handler-badge {
    position: absolute;
    top: -5px;
    right: -2px;
    background-color: #ff0000;
    border-radius: 10px;
    color: #fff;
    font-size: 10px;
    height: 14px;
    line-height: 14px;
    padding: 0 4px;
  }

  .es-simplicitytop-handler-text {
    cursor: pointer;
  }
}

.es-simplicity-tabs-handler-mask {
  position: absolute;
  z-index: 99999;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.es-simplicity-tabs-handler {
  width: 120px;
  position: fixed;

  .el-card__body {
    padding: 4px 0;
  }

  .es-simplicity-tabs-handler-item {
    height: 32px;
    line-height: 32px;
    padding: 0 20px;
    color: $--button-disabled-font-color;
    user-select: none;

    &:not(.is-disabled) {
      color: rgba(0, 0, 0, 0.75);

      &:hover {
        background-color: rgba(144, 147, 153, 0.2);
      }
    }
  }
}

.es-simplicity-drawer-close {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  color: #6e7c98;
  z-index: 9999;
}

.es-simplicity-message {
  .el-drawer__body {
    @extend .es-flex-vertical;
    padding: 20px;
  }

  .es-simplicity-message-header {
    padding-bottom: 20px;

    .es-simplicity-message-title {
      font-weight: bold;
      font-size: 20px;
      color: #15224c;
      line-height: 24px;
    }
  }

  .es-simplicity-message-overlook,
  .es-simplicity-message-handler {
    margin-left: 12px;
  }

  .es-simplicity-message-lists-box {
    flex: 1;
    position: relative;

    .es-simplicity-message-lists {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }

  .es-simplicity-message-total {
    padding-top: 20px;
    font-size: 14px;
    color: #6e7c98;
    line-height: 14px;
  }
}

.es-simplicity-message-overlook,
.es-simplicity-message-handler {
  font-size: 14px;
  color: #737a94;
  float: right;
  cursor: pointer;
}

.es-simplicity-message-handler {
  color: #2591f7;
}

.es-simplicity-message-lists {
  .es-simplicity-message-item {
    background: #ffffff;
    box-shadow: 0px 12px 24px 0px rgba(33, 70, 141, 0.1);
    border-radius: 9px;
    padding: 16px 24px;

    & + .es-simplicity-message-item {
      margin-top: 20px;
    }

    .es-simplicity-message-item-title {
      font-weight: bold;
      font-size: 14px;
      color: #15224c;
      line-height: 16px;
      margin-bottom: 8px;
    }

    .es-simplicity-message-item-time {
      font-size: 12px;
      color: #737a94;
      line-height: 14px;
    }
  }

  .es-simplicity-message-tips {
    font-size: 14px;
    color: #6e7c98;
    text-align: center;
    padding-top: 20px;
  }
}

.es-simplicity-notice-box {
  width: 420px;
  padding: 80px 24px 54px 24px;
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 9999;
  background-color: #f5fbff;
  border-radius: 9px;
  //animation: ltr-drawer-out 0.3s;
  animation: rtl-drawer-out 0.3s;
  overflow: hidden;

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

  .es-simplicity-message-overlook,
  .es-simplicity-message-handler {
    margin-left: 12px;
  }

  .es-simplicity-notice-header {
    height: 56px;
    font-size: 16px;
    color: #ffffff;
    padding: 16px 24px;
    background-color: #2591f7;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
  }

  .es-simplicity-notice-lists {
    height: 304px;
  }

  .es-notice-footer {
    border-top: 1px solid #dfebf6;
    padding: 20px 44px 16px;
    font-size: 14px;
    color: #737a94;
    line-height: 17px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
  }
}

.el-popover.es-simplicity-menus-hide {
  display: none !important;
  opacity: 0;
  z-index: -999;
}

.es-public-search-dialog > .el-dialog {
  & > .el-dialog__header,
  & > .el-dialog__body {
    background-color: #fff;
  }
}

.es-public-search-box {
  padding-top: 53px;
  height: 100%;

  .es-public-search-input {
    width: 90%;
    display: block;
    margin: 0 auto 20px auto;
  }

  .es-public-search-tabs {
    height: calc(100% - 60px);

    .el-tabs__header {
      height: 40px;
      margin: 0;
    }

    .el-tabs__nav-wrap {
      padding: 0 24px;
    }

    .el-tabs__content {
      height: calc(100% - 40px);
      padding: 10px 0;
    }

    .el-tab-pane {
      height: 100%;
      overflow: hidden;
    }
  }

  .es-public-search-content {
    padding: 10px 20px;
    position: relative;

    &::after {
      content: '';
      display: block;
    }
  }

  .es-public-search-title {
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
    color: #262626;
    margin-bottom: 23px;
  }

  .es-public-search-list-item {
    padding: 16px 8px 16px 60px;
    position: relative;
    cursor: pointer;

    &:hover {
      background: rgba(37, 145, 247, 0.08);
      border-radius: 9px 9px 9px 9px;
    }
  }

  .es-public-search-item-icon {
    width: 40px;
    height: 40px;
    font-size: 14px;
    position: absolute;
    left: 8px;
    top: 50%;
    margin-top: -20px;
    border-radius: 6px;
    color: #fff;
    text-align: center;
    line-height: 40px;

    &.es-public-search-item-icons {
      font-size: 18px;
    }

    &.es-icon-ppt,
    &.es-icon-pdf {
      font-size: 40px;
      color: #ff7878;
    }

    &.es-icon-picture,
    &.es-icon-video,
    &.es-icon-audioo {
      font-size: 36px;
      color: #909399;
      margin-top: -18px;
    }

    &.es-icon-excel {
      font-size: 40px;
      color: #199051;
    }

    &.es-icon-word {
      font-size: 40px;
      color: #1d60f5;
    }

    &.es-icon-zip {
      font-size: 36px;
      color: #5dc7f7;
      margin-top: -18px;
    }

    &.es-icon-txt {
      font-size: 40px;
      color: #909399;
    }

    &.es-icon-ios {
      font-size: 36px;
      margin-top: -18px;
    }

    &.es-icon-android {
      font-size: 36px;
      margin-top: -18px;
      color: #81bd24;
    }

    &.es-public-search-item-icon-text {
      background-color: #2778e5;
    }
  }

  .es-public-search-item-name {
    font-size: 14px;
    font-weight: 500;
    color: #262626;
    line-height: 22px;
  }

  .es-public-search-item-texts {
    font-size: 12px;
    font-weight: 400;
    color: #8c8c8c;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    .es-public-search-item-text + .es-public-search-item-text {
      margin-left: 20px;
    }
  }

  .es-public-search-more {
    text-align: center;
    color: #8c8c8c;
    font-weight: 500;
    font-size: 14px;
    margin-top: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #dce3e7;

    .es-public-search-more-text {
      cursor: pointer;
    }
  }

  .es-public-search-more-quote {
    color: #2778e5;
    padding: 0 4px;
  }

  .es-public-search-info {
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #262626;
  }

  .es-public-search-lists {
    padding: 0 20px;

    .es-public-search-list-item {
      border-bottom: 1px solid #f0f0f0;
    }
  }

  .es-public-search-no-more {
    text-align: center;
    padding: 20px;
  }

  .es-public-search-scrollbar {
    .el-scrollbar__view {
      min-height: 100%;
    }
  }
}

.es-menu-vertical.es-simplicity_menus,
.es-menu-popper-vertical.es-simplicity_menus {
  background-color: #fff;
  padding: 8px 0;

  .el-menu-item:not(.is-disabled),
  .el-submenu__title,
  & > .el-menu .el-menu-item:not(.is-disabled),
  & > .el-menu .el-submenu__title {
    padding: 8px 24px;
    height: 48px;
    line-height: 32px;
    color: #15224c;

    i {
      color: #15224c;
      z-index: 1;
    }

    .es-menu-item-icon {
      color: #15224c;
      z-index: 1;
      height: 24px;
      line-height: 16px;
      padding: 4px;
      border-radius: 3px;
      margin-right: 12px;
      font-size: 16px;
    }

    &:hover,
    &:focus,
    &.is-active {
      background-color: #fff;
      color: $--color-primary;

      i {
        color: $--color-primary;
      }

      &::before {
        content: '';
        display: block;
        position: absolute;
        inset: 0 8px;
        background-color: $--color-primary-light-2;
        border-radius: 6px;
        z-index: 0;
      }
    }
  }

  .el-menu-item.is-disabled {
    .es-menu-item-icon {
      color: #15224c;
      z-index: 1;
      height: 24px;
      line-height: 16px;
      padding: 4px;
      border-radius: 3px;
      margin-right: 12px;
      font-size: 16px;
      cursor: not-allowed;
    }
  }

  .el-menu--popup .el-menu-item:not(.is-disabled),
  .el-menu--popup .el-submenu__title {
    &:hover,
    &:focus,
    &.is-active {
      background-color: transparent;
    }
  }

  &.es-simplicity_menus-fold {
    padding: 4px 0;

    .el-menu-item:not(.is-disabled),
    .el-submenu__title,
    > .el-menu .el-menu-item:not(.is-disabled),
    > .el-menu .el-submenu__title {
      width: 48px;
      height: 40px !important;
      padding: 4px 12px !important;
      min-height: unset !important;
      line-height: 32px;
      justify-content: center;

      .es-menu-item-icon {
        margin-right: 0;
      }

      &:hover,
      &:focus,
      &.is-active {
        .es-menu-item-icon {
          position: relative;
          z-index: 1;
        }

        &::before {
          inset: 0 4px;
        }
      }
    }
  }
}

.es-simplicitytop-nav {
  height: $--main-simplicitytop-header-height;
  background-color: $--color-primary-light-7;
  background-position: left -20px;
  background-size: auto 100px;
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
}

.es-simplicitytop-main {
  .es-simplicity-apps,
  .es-simplicity-message,
  .es-simplicity-message-modal,
  .es-simplicity-apps-modal,
  .es-simplicity-public-drawer {
    position: absolute;
    top: $--main-simplicity-header-height;
    height: calc(100% - #{$--main-simplicity-header-height});
  }

  .es-simplicity-apps {
    .el-drawer__body {
      background-color: #f4f4f4;
      padding: 20px;

      @media screen and (max-width: 1600px) and (max-height: 900px) {
        padding: 14px;
      }

      @media screen and (max-width: 1280px) and (max-height: 720px) {
        padding: 10px;
      }

      @media screen and (max-width: 1024px) and (max-height: 768px) {
        padding: 6px;
      }
    }
  }

  .es-simplicity-public-drawer {
    .el-drawer__header {
      padding: 10px 0 0;
      margin: 0;
    }
  }

  .es-simplicity-subMenus,
  .es-simplicity-public-drawer {
    .el-drawer__body {
      padding: 0;
      position: relative;
    }
  }

  .es-simplicity-subMenus {
    width: auto;
    height: 100%;
    overflow: visible;
    right: auto;
    position: absolute;
    z-index: 999 !important;

    .el-drawer {
      box-shadow: none;
      overflow: visible;
      border-right: 1px solid #dfebf6;
    }
  }

  .es-simplicity-message {
    .el-drawer {
      background-color: #f4f4f4;
    }
  }
}

.es-simplicitytop {
  &-org {
    display: flex;
    align-items: center;
    color: #fff;

    &-text {
      margin-left: 4px;
    }

    .el-input__inner {
      height: 32px;
      line-height: 32px;
      border-radius: 6px;
    }

    .el-input__icon {
      line-height: 32px;
    }
  }

  &-greeting {
    color: #fff;
    text-align: center;
    line-height: 44px;
  }

  &-main {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;

    &-left {
      height: 100%;
      background-color: $--color-primary-light-7;
      width: 160px;
      float: left;
      padding-bottom: 16px;
      display: flex;
      flex-direction: column;

      &-user {
        text-align: center;
        line-height: 44px;
        font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
        font-size: 16px;
      }

      &-menu {
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        grid-gap: 20px;
        padding-right: 16px;
      }
    }

    &-content {
      height: 100%;
      margin-left: 160px;
      overflow: hidden;
      position: relative;
    }

    &-router {
      height: calc(100% - 45px);
    }
  }

  &-menu {
    &-title {
      color: #fff;
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid rgba(223, 235, 246, 0.2);
    }

    &-name {
      display: flex;
      align-items: center;

      &::before {
        content: '';
        height: 12px;
        border-left: 2px solid #fff;
        margin-right: 8px;
      }
    }

    &-reload {
      cursor: pointer;
    }

    &-item {
      padding: 0 16px;
      margin-bottom: 10px;

      .el-scrollbar__wrap {
        overflow-x: hidden;
      }

      &:last-child {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-right: 0;
      }
    }

    &-children {
      display: flex;
      flex-direction: column;

      &-item {
        display: flex;
        grid-gap: 8px;
        align-items: center;
        cursor: pointer;
        height: 44px;
        line-height: 44px;

        &:hover {
          opacity: 0.75;
        }
      }

      &-icon {
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #fff;
        background: #ffffff2b;
        padding: 0 6px;
        border-radius: 3px;

        [class^='es-icon-'] {
          font-size: 12px;
        }
      }

      &-name {
        color: #fff;
      }

      &-badge {
        background-color: #ff0000;
        border-radius: 10px;
        color: #fff;
        display: inline-block;
        font-size: 10px;
        height: 14px;
        line-height: 14px;
        padding: 0 4px;
        text-align: center;
        white-space: nowrap;
      }
    }
  }

  &-org-name {
    color: #fff;
  }
}

.es-main .es-simplicitytop-main-menu .es-fourth-tabs {
  border: 0;
  background-color: $--color-primary-light-7;

  .el-menu {
    border-bottom: 0;
  }

  .el-menu-item,
  .es-submenu,
  .el-submenu__title {
    line-height: 1 !important;
    color: #fff !important;

    &:not(.is-disabled) {
      &:focus,
      &:hover,
      &.is-active,
      &.es-menu-item-focus {
        background-color: $--color-primary-light-9;
        border: 0;

        & > .el-submenu__title {
          border: 0;
        }
      }
    }

    .es-menu-item-icon {
      color: #fff;
      display: none;
    }

    .el-submenu__icon-arrow {
      color: rgba(255, 255, 255, 0.85);
    }
  }

  .el-menu-item {
    @extend .es-flex-vertical, .es-align-middle, .es-align-center;
  }
}

.el-menu--popup-simplicitytop {
  .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-icon-shuaxin-rotate {
  animation: rotate 1s linear infinite;
  display: inline-block;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.es-simplicitytop-main-fourth-tabs {
  .el-tabs__nav-main.is-top {
    padding: 0 16px;
  }
}
.remind-tree {
  background: transparent;
  color: #fff;
  .el-tree-node__content {
    height: 32px;
    line-height: 32px;
  }
  .el-tree-node__expand-icon {
    color: #fff;
    &.is-leaf {
      color: transparent;
    }
  }
}
