@use "sass:list";
@use "../utils/variables";

/**=====================
      Tables CSS Start
==========================**/
.table-responsive {
  .progress-loader-wrapper[style="display: block;"] {
    display: none !important;
  }

  .progress-loader-wrapper[style=""] {
    display: none !important;
  }

  &:has(.progress-loader-wrapper[style="display: block;"],
    .progress-loader-wrapper[style=""]) {
    .table {
      tbody {
        position: relative;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: #f6f7f766;
          backdrop-filter: blur(2px);
          z-index: 1;
        }
      }
    }
  }
}

.data-not-found {
  text-align: center;

  span {
    display: block;
    font-size: 20px;
    font-weight: 500;
    color: rgba(variables.$dark-color, 0.7);
    margin-top: 20px;
  }
}

.table-no-data {
  min-height: calc(187px + (275 - 187) * ((100vw - 320px) / (1920 - 320)));
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  gap: 5px;

  img {
    width: calc(53px + (62 - 53) * ((100vw - 320px) / (1920 - 320)));
    filter: invert(82%) sepia(11%) saturate(80%) hue-rotate(131deg) brightness(90%) contrast(87%);
  }

  h6 {
    margin: 0;
  }
}

.avatar {
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
  background-color: #ffffff;
  border: 1px solid #2c303a;

  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.avatar-group {
  display: flex;

  &.rtl {
    direction: rtl;

    .avatar:hover:not(:last-of-type) {
      transform: translate(10px);
    }
  }

  .avatar {
    margin-left: -10px;
    transition: transform 0.3s ease;
    cursor: pointer;

    &:hover:not(:last-of-type) {
      transform: translate(-10px);
    }
  }

  .hidden-avatars {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 3px;
    margin-right: 23px;
    background-color: #2c303a;
    color: #fff;
  }
}

.table-main {
  .user-name {
    &:hover {
      .user-details {
        i {
          opacity: 1;
          visibility: visible;
        }
      }
    }
  }

  .user-details {
    &:has([class*=" ri-"], [class^="ri-"]) {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      white-space: nowrap;

      i {
        font-size: 16px;
        color: #7a8591;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease-in-out;
        cursor: pointer;

        @media (max-width: 767.98px) {
          opacity: 1;
          visibility: visible;
        }
      }
    }

    &:hover {
      .user-name {
        color: var(--primary-color);
      }
    }

    .user-name {
      line-height: 1.3;
      margin-bottom: 1px;
      font-size: 14px;
      font-weight: 500;
    }

    .user-email {
      padding: 0;
      margin: 0;
      border: none;
      font-size: 13px;
      color: #777;
      line-height: 1.3;
    }
  }

  .top-part {
    .top-part-left {
      display: flex;
      align-items: center;
      gap: 0;
      flex-wrap: nowrap;
      overflow: auto;
      margin-top: 10px;
    }
  }

  .bottom-part {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;

    .form-select,
    .form-control {
      padding: 6px 35px 6px 12px;
    }
  }

  .table-responsive {
    overflow-x: auto;
    margin: 20px 0 0;
    border: 1px solid variables.$white-dark;
    border-radius: 6px;

    .table {
      --bs-table-bg: unset;
      margin: 0;
      border-radius: variables.$border-radius;

      .no-data {
        img {
          width: calc(170px + (250 - 170) * ((100vw - 320px) / (1920 - 320)));
        }
      }

      .table-image {
        width: 40px;
        min-width: 40px;
        height: 40px;
        border-radius: 100%;
        object-fit: cover;
      }

      .table-image-detail {
        width: 40px;
        min-width: 40px;
        height: 40px;
        border-radius: 100%;
        object-fit: cover;
      }

      .avatar {
        .initial-letter {
          width: unset;
          height: unset;
          min-width: unset;
          display: flex;
        }
      }

      .initial-letter {
        width: 40px;
        min-width: 40px;
        height: 40px;
        border-radius: 100%;
        display: inline-flex;
        color: rgba(variables.$dark-color, 0.7);
        align-items: center;
        justify-content: center;
        background-color: rgba(variables.$dark-color, 0.08);
        font-size: 20px;
        text-transform: uppercase;
      }

      .bg-light-primary {
        border-radius: 3px;
        font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
        padding: calc(3px + (5 - 3) * ((100vw - 320px) / (1920 - 320))) calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 500;
        text-align: center;
      }

      .user-detail {
        line-height: 1;
        text-transform: capitalize;

        >p {
          color: rgba(variables.$dark-color, 0.8);
          font-size: 14px;
          margin-bottom: 0;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          display: -webkit-box;
          overflow: hidden;
          letter-spacing: 0.3px;
        }

        .user-name {
          font-size: 13px;
          font-weight: 600;
          margin-bottom: 2px;
          display: inline-block;
        }

        .row-actions {
          display: flex;
          align-items: center;
          line-height: 1;
          margin-top: 8px;

          li {
            line-height: 1;
            font-size: 13px;

            +li {
              border-left: 1px solid #ddd;
              padding-left: 6px;
              margin-left: 6px;
            }

            @media (max-width: 767.98px) {
              &.copy {
                a {
                  &::before {
                    content: "\ecd5";
                  }
                }
              }

              &.download {
                a {
                  &::before {
                    content: "\ecd9";
                  }
                }
              }

              &.delete {
                a {
                  &::before {
                    content: "\ec2a";
                  }
                }
              }

              &.edit {
                a {
                  &::before {
                    content: "\ec82";
                  }
                }
              }
            }

            a {
              font-weight: 400;
              color: variables.$grey;
              position: relative;

              @media (max-width: 767.98px) {
                span {
                  display: none;
                }

                &::before {
                  font-size: 15px;
                  font-family: remixicon !important;
                  font-style: normal;
                  -webkit-font-smoothing: antialiased;
                }
              }
            }
          }

          .delete {
            position: static;

            a {
              color: rgba(variables.$notify-color, 0.8) !important;
            }
          }
        }
      }

      thead,
      tfoot {
        tr {
          background-color: variables.$white;
        }

        a {
          display: flex;
          align-items: center;
          gap: 6px;
          color: variables.$dark-font;
        }
      }

      thead {
        tr {
          th {
            border-bottom: 1px solid variables.$white-dark;
            font-weight: 600;
            white-space: nowrap;
          }
        }
      }

      tbody {
        tr {
          &:nth-child(odd) {
            background-color: variables.$bg-gray;
          }

          &:nth-child(even) {
            background-color: variables.$white;
          }

          td {
            border: none;
            color: rgba(variables.$dark-color, 0.8);
            vertical-align: middle;

            &.sortable-handle {
              cursor: move;
              width: 70px;
            }

            .true {
              color: var(--primary-color);
            }

            .false {
              color: variables.$secondary-color;
            }

            &:has(.no-data) {
              padding: calc(13px + (25 - 13) * ((100vw - 320px) / (1920 - 320)));
            }
          }

          .loader-wrapper {
            margin: 0;
            align-items: center;
            justify-content: center;
            padding-block: 20px;
          }
        }
      }

      tfoot {
        tr {
          th {
            border-top: 1px solid variables.$white-dark;
            border-bottom: none;
            font-weight: 600;
          }
        }
      }

      tr {
        &.no-items {
          text-align: center;

          td {
            font-size: calc(15px + (17 - 15) * ((100vw - 320px) / (1920 - 320))) !important;
            font-weight: 500 !important;
          }
        }

        th,
        td {
          font-size: 14px;
        }

        .username {
          >div {
            width: max-content;
          }
        }
      }

      td,
      th {
        padding: variables.$th-padding;
        font-weight: 400;

        &:first-child {
          width: 2rem;
        }
      }

      .form-check {
        padding: 0;
        min-height: unset;

        .form-check-input {
          margin: 0;
        }
      }

      .action-box {
        .modal-icon-box {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        ul {
          display: flex;
          align-items: center;
          gap: 8px;

          li {
            &:has(a i.ri-delete-bin-7-line) {
              background-color: transparent;

              a {
                background-color: rgba(variables.$secondary-color, 0.17);
                color: #ff5443;
              }
            }

            a {
              width: 30px;
              height: 30px;
              border-radius: 4px;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              font-size: 18px;

              i {
                font-size: 16px;
                line-height: 1;
              }
            }

            &.edit {
              a {
                background-color: rgba(variables.$dark-color, 0.1);
                color: #171c26;
              }
            }

            &.delete {
              a {
                background-color: rgba(variables.$secondary-color, 0.17);
                color: #ff5443;
              }
            }
          }
        }
      }
    }
  }

  &.template-table {
    .table-responsive {
      &:has(.report-loader-wrapper[style=""]) {
        position: relative;

        .report-loader-wrapper {
          display: none !important;
        }

        .table {
          tbody {
            position: relative;

            &::before {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background-color: #f6f7f766;
              backdrop-filter: blur(2px);
            }

            &::after {
              content: "";
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 35px;
              aspect-ratio: 1;
              border-radius: 50%;
              border: 4px solid var(--primary-color);
              animation: l20-1 0.9s infinite linear alternate,
                l20-2 1.8s infinite linear;
            }
          }
        }
      }

      &:has(.report-loader-wrapper[style="display: block;"]) {
        position: relative;

        .report-loader-wrapper {
          display: none !important;
        }
      }

      .table {

        td,
        th {
          padding: variables.$th-padding;
          font-weight: 400;

          &:first-child {
            width: 130px;
          }

          &:nth-child(3) {
            text-align: center;

            a {
              justify-content: center;
            }
          }
        }

        thead {
          tr {
            background-color: #f6f7f7;

            th {
              border-bottom: 1px solid variables.$white-dark;
              font-weight: 600;
            }
          }
        }

        tbody {
          tr {
            border-bottom: 1px solid variables.$white-dark;
            background-color: transparent;

            &:last-child {
              border-bottom: unset;
            }

            &:nth-child(even) {
              background-color: #f6f7f7;
            }

            td {
              border: none;
              color: rgba(variables.$dark-color, 0.8);
              vertical-align: middle;

              .ri-star-fill {
                color: #ed8a19;
              }

              &.sortable-handle {
                cursor: move;
                width: 70px;
              }

              .true {
                color: var(--primary-color);
              }

              .false {
                color: variables.$secondary-color;
              }

              .btn-link {
                padding: 0;
                color: var(--primary-color);
                display: inline-block;

                svg {
                  stroke: rgba(0, 22, 46, 0.478);
                  stroke-width: 2px;
                  fill: transparent;
                  height: 20px;
                  width: 20px;
                }
              }
            }

            .loader-wrapper {
              margin: 0;
              align-items: center;
              justify-content: center;
              padding-block: 20px;
            }
          }
        }
      }
    }
  }

  &.table-about {
    .contentbox-title {
      margin-bottom: 0;
    }

    .table-responsive {
      margin: 14px 0 0;

      .table {

        td,
        th {
          &:first-child {
            width: auto;
          }
        }
      }
    }
  }

  .latest-tickets-table {
    .table-responsive {
      .table {

        th,
        td {
          &:first-child {
            width: auto;
          }
        }

        .rate-box {
          margin: 0;
        }
      }
    }
  }

  &.notify-template-table {

    thead,
    tbody {
      tr {

        th,
        td {
          &:first-child {
            width: 420px !important;
          }
        }
      }
    }
  }

  &.database-table {
    .table-responsive {
      .table {

        th,
        td {
          &:first-child {
            width: 40px;
          }
        }
      }
    }
  }

  &.email-template-table {
    .table-responsive {
      .table {

        th,
        td {
          &:first-child {
            width: 240px;
          }
        }
      }
    }
  }
}

.latest-tickets-table {
  .table-responsive {
    overflow-x: auto;
    margin: 20px 0 0;
    border: 1px solid variables.$white-dark;
    border-radius: 6px;

    .table {
      --bs-table-bg: unset;
      margin: 0;
      border-radius: variables.$border-radius;

      thead {
        tr {
          background-color: variables.$bg-gray;

          th {
            border-bottom: 1px solid variables.$white-dark;
            font-weight: 600;
          }
        }
      }

      tbody {
        tr {
          &:nth-child(even) {
            background-color: variables.$bg-gray;
          }

          &:nth-child(odd) {
            background-color: variables.$white;
          }

          td {
            border: none;
            color: rgba(variables.$dark-color, 0.8);
            vertical-align: middle;
          }
        }
      }

      tr {

        th,
        td {
          font-size: 14px;
          padding: variables.$th-padding;
          font-weight: 400;
        }
      }

      .form-check {
        padding: 0;
        min-height: unset;

        .form-check-input {
          margin: 0;
        }
      }
    }
  }
}

.table {
  $badge-name: primary, secondary, success, danger, info, light, dark, warning;
  $badge-color: variables.$primary-color, variables.$secondary-color, variables.$success-color, variables.$danger-color,
    variables.$info-color, variables.$light-color, variables.$dark-color, variables.$warning-color;

  @each $var in $badge-name {
    $i: list.index($badge-name, $var);

    .badge-version-#{$var} {
      background-color: rgba(list.nth($badge-color, $i), 0.1) !important;
      color: list.nth($badge-color, $i);
      border: 1px solid list.nth($badge-color, $i);
    }
  }

  [class*="badge-"] {
    &.badge {
      font-weight: 600;
      border-radius: calc(5px + (6 - 5) * ((100vw - 320px) / (1920 - 320)));
      padding: 5px 10px;
      display: inline-block;
      width: max-content;
      height: auto;
      letter-spacing: 0.75px;
      line-height: 1.3;
      font-size: calc(11px + (12 - 11) * ((100vw - 320px) / (1920 - 320)));
    }
  }
}

.price-detail-table {
  .table {
    margin-bottom: 0;

    tbody {
      tr {
        td {
          border: none;
          font-size: 14px;
          padding: 10px 15px;
          line-height: 1.2;

          &.label {
            font-weight: 400;
            text-align: left;
            padding-right: 15px;
            padding-left: 0;
            width: 100%;
            display: inline-block;
            color: variables.$dark-color;
          }

          &:last-child {
            text-align: right;
            padding-right: 0;
            font-weight: 500;
          }

          &.divider {
            padding: 0;
            position: relative;

            &:after {
              display: none;
            }

            span {
              position: absolute;
              left: 0;
              right: 0;
              margin: auto;
              width: auto;
              top: 2px;
              background: variables.$white;
              z-index: 1;
              padding: 5px 7px;
              text-align: center;
              text-transform: none;
              font-weight: 400;
              font-size: 14px;
              color: variables.$grey;
              display: inline-block;
              max-width: 140px;
            }
          }
        }

        &.final-price {
          td {
            background: var(--primary-color);
            color: variables.$white;
            padding-left: 15px;
            padding-right: 15px;
            margin-bottom: 0;
            font-weight: 700;
          }

          +tr {
            td {
              &.divider {
                padding-top: 12px;

                span {
                  top: 15px;
                }
              }
            }
          }
        }
      }
    }
  }
}

.sorting-indicators {
  .sorting-indicator {
    position: relative;

    &.asc {
      &:before {
        content: " ";
        border: solid 5px variables.$white;
        position: absolute;
        left: 0px;
        top: -8px;
        border-bottom-color: rgba(variables.$dark-color, 0.8);
      }

      &:hover {
        &:before {
          border-bottom-color: variables.$header-hover-bg;
        }
      }
    }

    &.desc {
      &:after {
        content: " ";
        border: solid 5px variables.$white;
        position: absolute;
        left: 0px;
        bottom: -8px;
        border-top-color: rgba(variables.$dark-color, 0.8);
      }

      &:hover {
        &:after {
          border-top-color: variables.$header-hover-bg;
        }
      }
    }

    &.asc {
      &.desc {
        &:before {
          content: " ";
          border: solid 5px variables.$white;
          position: absolute;
          left: 0px;
          top: -8px;
          border-bottom-color: rgba(variables.$dark-color, 0.8);
        }

        &:after {
          content: " ";
          border: solid 5px variables.$white;
          position: absolute;
          left: 0px;
          bottom: -8px;
          border-top-color: rgba(variables.$dark-color, 0.8);
        }
      }
    }
  }
}

.sorting-hover {
  &:hover {
    .sorting-indicators {
      .sorting-indicator {
        &.asc {
          &:before {
            transform: rotate(180deg);
            top: -3px;
          }
        }

        &.desc {
          &:after {
            transform: rotate(180deg);
            bottom: -3px;
          }
        }

        &.asc {
          &.desc {
            &:before {
              top: -12px;
              transform: none;
            }

            &:after {
              bottom: -12px;
              transform: none;
            }
          }
        }
      }
    }
  }
}

.module-table {
  .table-responsive {
    .table {

      thead,
      tbody,
      tfoot {
        tr {

          th,
          td {
            &:last-child {
              text-align: end;
            }
          }
        }
      }

      td {
        p {
          color: variables.$dark-color;
          margin: 0;
        }
      }

      tr {
        th {
          &:nth-child(2) {
            min-width: 300px;
          }

          &:nth-child(3) {
            min-width: 600px;
          }

          &:last-child {
            min-width: 90px;
          }
        }
      }

      .user-detail {
        button {
          border: none;
          background: none;
          padding: 0;
          text-align: left;
          margin-top: 1px;

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

.user-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 220px;
            }

            &:nth-child(4) {
              min-width: 140px;
            }

            &:nth-child(5) {
              min-width: 80px;
            }

            &:nth-child(6) {
              min-width: 200px;
            }
          }
        }
      }
    }
  }
}

.role-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 220px;
            }

            &:nth-child(3) {
              min-width: 200px;
            }
          }
        }
      }
    }
  }
}

.blog-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 220px;
            }

            &:nth-child(3) {
              min-width: 220px;
            }

            &:nth-child(4) {
              min-width: 80px;
            }

            &:nth-child(5) {
              min-width: 220px;
            }
          }
        }
      }
    }
  }
}

.tag-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 220px;
            }

            &:nth-child(3) {
              min-width: 350px;
            }

            &:nth-child(4) {
              min-width: 80px;
            }

            &:nth-child(5) {
              min-width: 180px;
            }
          }
        }
      }
    }
  }
}

.loader-table {
  .table-responsive {
    &:has(.report-loader-wrapper[style="display: block;"]) {
      position: unset;

      .report-loader-wrapper {
        display: none !important;
      }

      .table {
        tbody {
          position: relative;

          &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #f6f7f766;
            backdrop-filter: blur(2px);
          }
        }
      }
    }
  }
}

.ride-report-table {
  .table-responsive {
    position: relative;

    .template-table {
      position: relative;
    }

    .table {
      tr {

        td,
        th {
          white-space: nowrap;
        }
      }
    }
  }
}

.page-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 220px;
            }

            &:nth-child(3) {
              min-width: 80px;
            }

            &:nth-child(4) {
              min-width: 180px;
            }
          }
        }
      }
    }
  }
}

.zone-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 220px;
            }

            &:nth-child(3) {
              min-width: 80px;
            }

            &:nth-child(4) {
              min-width: 180px;
            }
          }
        }
      }
    }
  }
}

.coupon-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 220px;
            }

            &:nth-child(3) {
              min-width: 180px;
            }

            &:nth-child(4) {
              min-width: 80px;
            }

            &:nth-child(5) {
              min-width: 180px;
            }
          }
        }
      }
    }
  }
}

.faq-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 220px;
            }

            &:nth-child(3) {
              min-width: 180px;
            }
          }
        }
      }
    }
  }
}

.sos-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 220px;
            }

            &:nth-child(3) {
              min-width: 90px;
            }

            &:nth-child(4) {
              min-width: 180px;
            }
          }
        }
      }
    }
  }
}

.banner-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 220px;
            }

            &:nth-child(3) {
              min-width: 180px;
            }

            &:nth-child(4) {
              min-width: 80px;
            }

            &:nth-child(5) {
              min-width: 180px;
            }
          }
        }
      }
    }
  }
}

.service-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 220px;
            }

            &:nth-child(3) {
              min-width: 150px;
            }

            &:nth-child(4) {
              min-width: 80px;
            }

            &:nth-child(5) {
              min-width: 80px;
            }

            &:nth-child(6) {
              min-width: 180px;
            }
          }
        }
      }
    }
  }
}

.document-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 220px;
            }

            &:nth-child(3) {
              min-width: 80px;
            }

            &:nth-child(4) {
              min-width: 180px;
            }
          }
        }
      }
    }
  }
}

.driverDocument-table {
  .table-main {
    .table-responsive {
      .table {
        .table-image {
          width: 61px;
          height: 32px;
          border-radius: 5px;
          object-fit: contain;
        }

        .table-image-detail {
          width: 40px;
          min-width: 40px;
          height: 40px;
          border-radius: 100%;
          object-fit: cover;
        }
      }
    }
  }
}

.vehicle-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: calc(150px + (220 - 150) * ((100vw - 320px) / (1920 - 320)));
            }

            &:nth-child(3) {
              min-width: 80px;
            }

            &:nth-child(4) {
              min-width: 180px;
            }
          }
        }
      }
    }
  }
}

.tax-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 220px;
            }

            &:nth-child(3),
            &:nth-child(4) {
              min-width: 80px;
            }

            &:nth-child(5) {
              min-width: 180px;
            }
          }
        }
      }
    }
  }
}

.currency-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 220px;
            }

            &:nth-child(3) {
              min-width: 80px;
            }

            &:nth-child(4) {
              min-width: 180px;
            }
          }
        }
      }
    }
  }
}

.language-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 140px;
            }

            &:nth-child(3) {
              min-width: 100px;
            }

            &:nth-child(4) {
              min-width: 130px;
            }

            &:nth-child(5) {
              min-width: 80px;
            }

            &:nth-child(6) {
              min-width: 80px;
            }

            &:nth-child(7) {
              min-width: 180px;
            }
          }
        }
      }
    }
  }
}

.plugin-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 180px;
            }

            &:nth-child(3) {
              min-width: 200px;
            }
          }
        }
      }
    }
  }
}

.department-table {
  .table-responsive {
    .table {
      tbody {
        tr {
          td {
            .avatar-group {
              align-items: center;

              .avatar {
                margin: 0;
                width: inherit;
                height: inherit;
                overflow: inherit;
                border-radius: inherit;
                position: inherit;
                background-color: inherit;
                border: inherit;

                +.avatar {
                  margin-left: -10px;
                }

                .initial-letter {
                  width: 40px;
                  min-width: 40px;
                  height: 40px;
                }
              }

              .hidden-avatars {
                margin-left: unset;
              }
            }
          }
        }
      }
    }
  }
}

.ticket-table {
  .table-responsive {
    .table {
      tbody {
        tr {
          td {
            .avatar-group {
              align-items: center;

              .avatar {
                margin: 0;
                width: inherit;
                height: inherit;
                overflow: inherit;
                border-radius: inherit;
                position: inherit;
                background-color: inherit;
                border: inherit;

                +.avatar {
                  margin-left: -10px;
                }

                .initial-letter {
                  width: 40px;
                  min-width: 40px;
                  height: 40px;
                }
              }

              .hidden-avatars {
                margin-left: unset;
              }
            }
          }
        }
      }
    }
  }
}

.priority-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 120px;
            }

            &:nth-child(3) {
              min-width: 220px;
            }

            &:nth-child(4) {
              min-width: 90px;
            }

            &:nth-child(5) {
              min-width: 180px;
            }
          }
        }
      }
    }
  }
}

.agent-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 220px;
            }

            &:nth-child(3) {
              min-width: 200px;
            }

            &:nth-child(4) {
              min-width: 120px;
            }

            &:nth-child(5) {
              min-width: 90px;
            }

            &:nth-child(6) {
              min-width: 180px;
            }
          }
        }
      }
    }
  }
}

.status-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            &:nth-child(2) {
              min-width: 170px;
            }

            &:nth-child(3) {
              min-width: 90px;
            }

            &:nth-child(4) {
              min-width: 180px;
            }
          }
        }
      }
    }
  }
}

.driver-report-table {
  .table-responsive {
    .table {
      thead {
        tr {
          th {
            white-space: unset;

            &:nth-child(2),
            &:nth-child(3),
            &:nth-child(4),
            &:nth-child(5),
            &:nth-child(6) {
              min-width: unset;
            }
          }
        }
      }
    }
  }
}

.table-top-panel {
  .bottom-part {
    padding: 10px 17px;
    background-color: variables.$gray-color-1;
    border-radius: 5px;
  }

  &.bg-grey-part {
    padding: 10px 17px;
    background-color: variables.$gray-color-1;
    border-radius: 5px;
  }

  &.mode-select {
    ~.media-wrapper {
      .media {
        label {
          &.opacity-65 {
            opacity: 0.65;
          }
        }

        .form-check-input {
          z-index: 1;

          &:checked {
            ~label {
              opacity: 1;
            }
          }
        }
      }
    }
  }
}

.driverReview-table,
.rideReview-table {
  .table {

    thead,
    tbody {
      tr {

        th,
        td {
          &:nth-child(6) {
            max-width: 480px;

            >div {
              text-overflow: ellipsis;
              overflow: hidden;
              display: -webkit-box !important;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }
  }
}

.total-data {
  span {
    font-size: 15px;
    font-weight: 500;
    color: #232323;
  }
}

.select2-selection__rendered {
  .select2-search--inline {
    &:has(.select2-search__field[style="width: 0px;"]) {
      .select2-search__field {
        width: auto !important;
      }
    }
  }
}

.vehicle-type-zone-table {
  .table-main {
    .table-responsive {
      .table {
        th {
          min-width: 140px;

          &:first-child {
            width: auto;
          }

          &:last-child {
            width: 350px;
          }
        }

        tbody {
          tr {
            td {
              width: auto;
              &:last-child{
                display: flex;
              }
            }
          }
        }
      }
    }
  }
}

/**=====================
      Tables CSS End
==========================**/