hadith_ui/assets/hadith/scss/components/search_navigation.scss

.searchNavigation {
  .nav-tabs-container {
    display: flex;
    justify-content: center;
  }
  .filters__delete {
    margin-bottom: 0;
  }
  .filter-items {
    li {
      min-width: 14em;
      max-width: 16em;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 1em;
      button {
        top: -0.4em !important;
        left: -0.9em !important;
      }
    }
  }
  // .sub-header {
  //   div {
  //     width: 5em;
  //   }
  // }
  .float-label {
    position: absolute;
    top: -1.5em;
    right: 0.5em;
    background-color: #fff;
    padding: 0px 0.5em;
    font-size: 0.8rem;
    color: #6f6f6f;
    z-index: 1;
  }
  .tabel-main {
    position: static !important;
    top: unset;
  }

  .dropdown-main {
    position: relative;
    right: 18px;
    top: 5px;

    .dropdown-toggle::after {
      background-image: none;
    }
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10vh !important;
    width: 100%;

    // right: 56px;
    // height: 64px;
    // width: calc(100% - 56px);
    // border-bottom: 1px solid white;
    // background: #fff;
    //padding-top: 15px;
    //padding-bottom: 15px;

    .header-Breadcrumbs {
      position: relative;
      flex: 1;
      margin: auto 5px;
      display: flex;
    }
    .header-button {
      position: relative;

      display: flex;
      top: auto;
      right: 0px;
      flex: 2;

      justify-content: flex-start;
      div {
        margin-left: 8px;
      }
    }
  }

  .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(100vh - 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 {
    width: 100%;

    padding: 0;
  }
  .combo-list {
    position: relative;
    border-bottom: 1px solid #eee;

    .form-control,
    .multiselect {
      // width: 15em;
      font-family: sahel-semi-bold;
    }
  }
  .select-export-container {
    // position: absolute;
    // top: 1rem;
    // left: 0;
    // z-index: 999;

    .select-export-type-label {
      display: flex;
      align-items: center;
      position: absolute;
      top: 0em;
      background-color: #fff;
      right: 0.6em;
      padding: 0 0.4em;
      margin: 0;
      font-size: 0.8rem;
    }

    // .tavasi::before {
    //   font-size: 1.1rem;
    // }

    .form-control {
      font-size: 0.9rem;
      padding-top: 0.3em;
      height: 2.2em;
    }
  }
  .position1 {
    grid-template-columns: 0fr 2fr;
  }
  .position2 {
    grid-template-columns: 23em auto;
  }
  .navigation-filter {
    position: fixed;
    right: 0px;
    top: 103px;
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    box-shadow: 0px 0px 7px 1px #eee;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 575.98px) {
    .nav {
      li {
        .nav-link {
          font-size: 0.8rem;
        }
      }
      li.desktop:nth-child(n + 4) {
        display: none;
      }
      .dropdown-menu {
        a.dropdown-item:nth-child(-n + 3) {
          display: none;
        }
      }
      // .combo-list {
      //   margin-top: 1em;
      // }
    }
    .header-avatar {
      left: 0px;
      position: absolute;
      bottom: 0.25rem;
    }
    .dropdown-main {
      margin-bottom: 10px;
      width: 100%;
      text-align: right;
    }

    #table1 {
      // background-color: red !important;
    }

    #myTabContent {
      position: relative;
    }

    .position1 {
      grid-template-columns: auto;
    }
    .position2 {
      grid-template-columns: auto;
    }
    .tabel {
      display: grid !important;
    }
    .tabel-main {
      position: relative;
      top: 5rem;
      width: 100%;
    }
    .m1 {
      margin-top: 25px;
    }

    .pages-content {
      width: 22em;
      position: fixed !important;
      z-index: 10;
      background-color: #fff;
      top: 0em !important;
      height: 100dvh;
      right: 0px;
      .main-tree {
        .filter-list {
          // height: 10em;
        }
        .main-tree-body {
          overflow: auto;

          overflow-x: hidden;
          width: 100%;
        }
        .min-height-tree {
          height: calc(100vh - 8em) !important;
        }
        .max-height-tree {
          height: calc(100vh - 5em);
        }
      }
    }
    .tab-content {
      margin-top: 2em;
    }
    .navigation-filter {
      position: fixed;
      right: 0px;
      top: 103px;
      border-radius: 50%;
      width: 2.5em;
      height: 2.5em;
      box-shadow: 0px 0px 7px 1px #eee;
      background-color: #eee;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .my-table {
      width: 100%;
      overflow-x: hidden !important;
      // height: calc(100vh - 24em) !important;
      .table-responsive {
        height: calc(100vh - 24em) !important;
        table {
          .thead {
            tr {
              .voices {
                display: none;
              }
              .meet_no {
                display: none;
              }
              .format {
                display: none;
              }
              .subtitle {
                display: none;
              }
            }
          }
          tbody {
            tr {
              .voices {
                display: none;
              }
              .meet_no {
                display: none;
              }
              .format {
                display: none;
              }
              .subtitle {
                display: none;
              }
            }
          }
        }
      }
    }
    .my-list {
      .list-content {
        height: calc(-19em + 100vh) !important;
      }
    }
  }
  @media only screen and (min-width: 576px) and (max-width: 767.98px) {
    .nav {
      li {
        .nav-link {
          font-size: 0.8rem;
        }
      }
      li.desktop:nth-child(n + 4) {
        display: none;
      }
      .dropdown-menu {
        a.dropdown-item:nth-child(-n + 3) {
          display: none;
        }
      }
      // .combo-list {
      //   margin-top: 1em;
      // }
    }
    .dropdown-main {
      position: relative;
      right: 18px;
      width: 90%;
      top: 5px;
      margin-bottom: 10px;

      .dropdown-toggle::after {
        background-image: none;
      }
    }
    .table .table-borderless .table-hover {
      display: inline-block !important;
    }

    #myTabContent {
      position: relative;
    }
    // .dropdown {
    //   top: 10px;
    // }
    .multiselect {
      // width: 11em;
    }
    .tabel {
      display: grid;
    }
    .tabel-main {
      position: relative;
      top: 3rem;
    }
    .position1 {
      grid-template-columns: auto;
    }
    .position2 {
      grid-template-columns: auto;
    }
    .m1 {
      margin-top: 22px;
      width: 100%;
    }
    .multiselect {
      // width: 43rem !important;
      margin-bottom: 5px;
      div {
        width: 100%;
      }
    }

    .pages-content {
      width: 23em;
      position: fixed !important;
      z-index: 9;
      background-color: #fff;
      top: 0em !important;
      height: 100dvh;
      right: 0px;
      .main-tree {
        .filter-list {
          // height: 10em;
        }
        .main-tree-body {
          overflow: auto;

          overflow-x: hidden;
          width: 100%;
        }
        .min-height-tree {
          height: calc(100vh - 8em) !important;
        }
        .max-height-tree {
          height: calc(100vh - 5em);
        }
      }
    }
    .tab-content {
      margin-top: 2em;
    }
    .navigation-filter {
      position: fixed;
      right: 0px;
      top: 103px;
      border-radius: 50%;
      width: 2.5em;
      height: 2.5em;
      box-shadow: 0px 0px 7px 1px #eee;
      background-color: #eee;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .my-table {
      overflow-x: hidden !important;
      .table-responsive {
        height: calc(100dvh - 22em);

        table {
          .thead {
            tr {
              .voices {
                display: none;
              }
              .meet_no {
                display: none;
              }
              .format {
                display: none;
              }
            }
          }
          tbody {
            tr {
              .voices {
                display: none;
              }
              .meet_no {
                display: none;
              }
              .format {
                display: none;
              }
            }
          }
        }
      }
    }
    .my-list {
      .list-content {
        height: calc(-19em + 100vh) !important;
      }
    }
    .main-page__content {
    }
  }
  @media only screen and (min-width: 768px) and (max-width: 991.98px) {
    #myTabContent {
      position: relative;
    }
    .multiselect {
      // width: 11em;
    }
    .tabel {
      display: grid;
    }
    .tabel-main {
      position: relative;
      top: 3rem;
    }
    .smart_phones {
      display: none;
    }
    .pages-content {
      .main-tree {
        .filter-list {
          // height: 10em;
        }
        .main-tree-body {
          overflow: auto;

          overflow-x: hidden;
          width: 100%;
        }
        .min-height-tree {
          height: calc(100vh - 12em) !important;
        }
        .max-height-tree {
          height: calc(100vh - 9em);
        }
      }
    }
    .tab-content {
      margin-top: 2em;
    }
    .position1 {
      grid-template-columns: auto;
    }
    .position2 {
      grid-template-columns: auto;
    }
    .navigation-filter {
      position: fixed;
      right: 0px;
      top: 103px;
      border-radius: 50%;
      width: 2.5em;
      height: 2.5em;
      box-shadow: 0px 0px 7px 1px #eee;
      background-color: #eee;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .my-table {
      overflow-x: hidden !important;
      .table-responsive {
        height: calc(100dvh - 22em);

        table {
          .thead {
            tr {
              .voices {
                display: none;
              }
              .meet_no {
                display: none;
              }
              .format {
                display: none;
              }
            }
          }
          tbody {
            tr {
              .voices {
                display: none;
              }
              .meet_no {
                display: none;
              }
              .format {
                display: none;
              }
            }
          }
        }
      }
    }
    .my-list {
      .list-content {
        height: calc(-19em + 100vh) !important;
      }
    }
  }
  @media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .multiselect {
      // width: 13em;
    }
    #myTabContent {
      position: relative;
    }
    .tabel {
      display: grid;
    }

    .tabel-main {
      position: relative;
      top: 3rem;
    }
    .smart_phones {
      display: none;
    }
    .pages-content {
      .main-tree {
        .filter-list {
          // height: 10em;
        }
        .main-tree-body {
          overflow: auto;

          overflow-x: hidden;
          width: 100%;
        }
        .min-height-tree {
          height: calc(100vh - 12em) !important;
        }
        .max-height-tree {
          height: calc(100vh - 9em);
        }
      }
    }
    .my-table {
      overflow-x: hidden !important;
      .table-responsive {
        height: calc(100dvh - 20em);

        table {
          .thead {
            tr {
              .voices {
                display: none;
              }
              .meet_no {
                display: none;
              }
              .format {
                display: none;
              }
            }
          }
          tbody {
            tr {
              .voices {
                display: none;
              }
              .meet_no {
                display: none;
              }
              .format {
                display: none;
              }
            }
          }
        }
      }
    }
    .my-list {
      .list-content {
        height: calc(-15em + 100vh) !important;
      }
    }
  }
  @media (min-width: 1200px) {
    .multiselect {
      // width: 13em;
    }
    #myTabContent {
      position: relative;
    }
    .tabel {
      display: grid;
    }

    .tabel-main {
      position: relative;
      top: 3rem;
    }
    .smart_phones {
      display: none;
    }
    .pages-content {
      .main-tree {
        .filter-list {
          // height: 10em;
        }
        .main-tree-body {
          overflow: auto;

          overflow-x: hidden;
          width: 100%;
        }

        .max-height-tree {
          height: calc(100vh - 9em);
        }
      }
    }
    .my-table {
      overflow-x: hidden !important;
      .table-responsive {
        height: calc(100dvh - 20em);

        table {
          .thead {
            tr {
              .voices {
                display: none;
              }
              .meet_no {
                display: none;
              }
              .format {
                display: none;
              }
            }
          }
          tbody {
            tr {
              .voices {
                display: none;
              }
              .meet_no {
                display: none;
              }
              .format {
                display: none;
              }
            }
          }
        }
      }
    }
    .my-list {
      .list-content {
        height: calc(-15em + 100vh) !important;
      }
    }
  }
}