@import "src/assets/common/scss/mixin";
@import "src/assets/common/scss/placeholder";

.admin-panel {
  .pages-content-container {
    height: calc(100dvh - 3.8em);
    min-height: 20em;
    margin-right: var(--sidebar-collapsed-width);

    &.expanded {
      margin-right: var(--sidebar-width);
    }

    .pages {
      //padding: 1.5em;
    }
  }

  .menu-bar-container {
    border-left: 1px solid #f1f1f1;
    width: 305px;
    padding-top: 24px;
    padding-right: 24px;
    padding-left: 24px;
    min-height: 100dvh;
    overflow-y: auto;

    &__title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;

      h5 {
        font-size: 14px;
        color: #1b2733;
      }

      .select2 {
        width: 70px;
      }

      .select2-container--default .select2-selection--single {
        border: unset;
        font-size: 14px;
      }
    }

    &__button {
      @extend %simple-btn;
      justify-content: flex-start;
      font-size: 16px;
      max-width: 256px;
      color: var(--color-2);

      &:not(:last-child) {
        margin-bottom: 8px;
      }

      i {
        font-size: 22px;
        width: 55px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      &--more {
        color: var(--color-1) !important;
        justify-content: center;
        font-size: 19px;
        font-weight: 600;
      }
    }

    &__breadcrumb {
      display: none;
    }

    @extend %pastil-color;

    a:hover {
      color: var(--color-2);
    }

    .color-1 {
      border-color: #e8fcff;

      &:hover {
        background-color: #e8fcff;
      }

      i {
        background: -webkit-linear-gradient(#00b6e3 0%, #81e6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .color-2 {
      border-color: #fef3ff;

      &:hover {
        background-color: #fef3ff;
      }

      i {
        background: -webkit-linear-gradient(#b03bd9 0%, #dcbbff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .color-3 {
      border-color: #fffbe1;

      &:hover {
        background-color: #fffbe1;
      }

      i {
        background: -webkit-linear-gradient(#fb0 0%, #ffdd81 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .color-4 {
      border-color: #e7fce7;

      &:hover {
        background-color: #e7fce7;
      }

      i {
        background: -webkit-linear-gradient(#39b778 0%, #88f57c 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .color-5 {
      border-color: #e7fce7;

      &:hover {
        background-color: #e7fce7;
      }

      i {
        background: -webkit-linear-gradient(#c1d4da 0%, #d9e2e9 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .menu-bar-content__edit-mark {
      transition: all 0.3s ease;
      margin-right: auto;
      opacity: 0;

      i {
        background: -webkit-linear-gradient(#8fa4ab 0%, #bdc7d2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 20px;
        width: 30px;
      }
    }

    .menu-bar-content__edit-mark-container {
      margin-right: auto;
      background-color: none;
      background: none;
      border: none;
      width: unset;
      display: flex;
      justify-content: flex-end;
      outline: none;
    }

    &__button:hover {
      .menu-bar-content__edit-mark {
        opacity: 1;
      }

      .menu-bar-content__edit-mark {
        i {
          background: -webkit-linear-gradient(#8fa4ab 0%, #bdc7d2 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }

    &__header {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f1f1f1;

      &--phone {
        display: none;
      }
    }

    &__search {
      a {}

      i {
        font-size: 20px;
        background: -webkit-linear-gradient(#a9bcc2 0%, #ccd2da 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    &__navs {
      ul {}

      li {}

      a {
        font-size: 13px;
        color: #92a2b2;
      }
    }

    &__search {
      a {}

      i {}
    }

    .nav-tabs {
      border-color: transparent;
    }

    .nav-tabs .nav-link {
      border: unset;
      margin-left: 18px;
      padding: 0;
      padding-bottom: 20px;

      &:first-child {
        margin-right: 0;
      }

      &:hover {
        color: var(--color-1);
      }
    }

    .nav-tabs .nav-link.active {
      border-bottom: 1px solid var(--color-1);
      color: var(--color-1);
    }

    .detail-page__filters {
      position: static;
      right: unset;
      z-index: 10;
      top: unset;
      background-color: unset;
      border-left: unset;

      .scrollbar {
        max-width: 300px;
        width: 100%;
        padding-right: 0;
        padding-left: 1em;
        height: calc(100dvh - 6em);
      }
    }
  }

  .detail-page {
    &__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 47px;
      padding-right: 47px;
      border-bottom: 1px solid #f1f1f1;
      padding-bottom: 10px;
      height: 64px;

      .document-list__star {
        opacity: 1 !important;
      }
    }

    &__head {
      display: flex;
      flex-direction: column;
    }

    &__title {
      font-size: 14px;
      display: flex;
      align-items: center;

      i {
        margin-right: 3px;
        font-size: 26px !important;
        background: -webkit-linear-gradient(#c1d4da 0%, #e2e8ef 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    &__breadcrumb {
      ul {
        display: flex;
        align-items: center;
        list-style: none;
      }

      li {
        display: flex;
        align-items: center;

        &:not(:last-child):after {
          content: ">";
          padding-right: 8px;
          padding-left: 8px;
          padding-top: 4px;
          font-size: 10px;
          font-weight: bold;
          color: #bac4ce;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        &:last-child {
          flex: 1;

          a {}
        }
      }

      a {
        display: block;
        font-size: 12px;
        color: #92a2b2;
      }
    }

    &__meta {
      ul {
        display: flex;
        align-items: center;
      }

      li {}
    }

    &__shared-user {}

    &__content {
      max-height: calc(100dvh - 151px);
      padding-right: 40px;
      padding-top: 40px;
      padding-bottom: 40px;
      max-width: 696px;
      margin-right: auto;
      margin-left: auto;

      h1 {
        font-size: 24px;
        color: #444444;
        margin-top: 8px;
        margin-bottom: 8px;
      }

      p {
        font-size: 16px;
        font-weight: lighter;
        line-height: 30px;
        margin-bottom: 8px;
      }
    }

    &__edit-btn {
      position: fixed;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);

      a {
        min-width: 88px;
        height: 40px;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        border-radius: 20px;
        background: #1b2733;

        &:hover {
          color: white;
          opacity: 0.8;
        }
      }
    }
  }

  // .pages-content {
  //   padding: 0;
  // }

  .nav-tabs {
    .nav-link {
      color: #92a2b2;
      border: 0;
      border-bottom: 1px solid transparent;

      &.active {
        color: #00b6e3;
        border-bottom: 1px solid #00b6e3;
      }
    }
  }

  .table-container .table-responsive {
    height: calc(100dvh - 8em);
  }
}

.main {
  .main-page__content {
    .pages {
      .pages-content {
        .my-profile {

          .aks-file-upload {
            .aks-file-upload-content {
              .profile__avatar {
                img {
                  object-fit:cover;
                  border-radius:50%;
                  width:122px;
                  height:122px;
                }
              }
            }
          }
        }
      }
    }
  }
}

@import "./responsive/responsive.scss"