div.dataTables_processing {
  background: var(--bs-white);
  border: 1px solid var(--bs-light);
  border-radius: 1rem;

  div > div {
    /* color: var(--bs-primary); */
    background: var(--bs-primary-bg) !important;
  }
}

div.data-table-card {
  --bs-card-cap-padding-x: 0rem;
  --bs-card-spacer-x: 0rem;
  border-radius: calc(var(--bs-border-radius) + var(--ion-padding));

  &.bg-none {
    table {
      --table-bg: unset !important;
    }
  }

  div.card-header {
    --bs-card-cap-bg: var(--bs-white);
    --bs-card-border-width: 0px;
    margin-top: 0.5rem;
  }

  div.dataTables_length {
    margin-top: 0.5rem;

    select {
      border-radius: 1rem;
      padding: 0.2rem;
    }
  }

  div.dataTables_filter {
    display: none !important;
    margin: 0.5rem 0px;

    @media (max-width: 767px) {
      text-align: left;
    }

    input {
      border-radius: 1rem;
    }
  }

  table {
    --table-bg: var(--bs-primary-bg);
    --bs-table-color: var(--bs-dark);

    thead {
      th {
        background-color: var(--table-bg);
        &.sorting-disabled {
          &:first-child,
          &:last-child {
            &:before,
            &:after {
              display: none !important;
            }
          }
        }

        &:first-child,
        &.first-col {
          border-top-left-radius: 1rem;
        }
        &:last-child,
        &.last-col {
          border-top-right-radius: 1rem;
        }
      }
    }

    tbody tr {
      &.odd {
        --bs-table-bg: var(--bs-white);

        td {
          box-shadow: none !important;
        }
      }

      &.even {
        --bs-table-bg: var(--table-bg);
        td {
          box-shadow: none !important;
        }
      }

      &:hover {
        cursor: pointer;
        --bs-table-bg: #d4d6e4;
        box-shadow: unset !important;
      }
    }
  }

  div.dataTables_paginate {
    margin: 0.5rem 0px;
    text-decoration: unset;
    color: var(--bs-dark);

    @media (max-width: 767px) {
      text-align: left;
    }

    a {
      margin: 0px 5px;
      cursor: pointer;
      text-decoration: none;
      color: var(--bs-dark);

      &.previous,
      &.current,
      &.next {
        color: var(--bs-primary);
        padding: 5px 10px;
      }

      &.current {
        background-color: var(--bs-primary-bg);
        border-radius: 50%;
      }
    }
  }
}

table.dataTable tbody tr.collapse:hover,
table.dataTable tbody tr.collapse:hover td.dummy,
table.dataTable tbody tr.collapse:hover td.span-col,
table.dataTable.table-hover tbody tr.collapse:hover,
table.dataTable.table-hover tbody tr.collapse:hover td.dummy,
table.dataTable.table-hover tbody tr.collapse:hover td.span-col,
table.dataTable.table-hover tbody tr.collapse:hover > * {
  --bs-table-bg: white !important;
  background-color: white !important;
  cursor: default !important;
  box-shadow: none !important;
}

.select-all-wrapper {
  --ion-padding-vertical: 10px;
  --bs-bg-opacity: 0.06;

  text-align: center;
  color: var(--bs-light);
  border-radius: 5px;
}

.btn-group {
  &.hide-edit {
    .edit-btn {
      display: none;
    }

    .delete-btn {
      border-top-left-radius: var(--bs-border-radius-sm) !important;
      border-bottom-left-radius: var(--bs-border-radius-sm) !important;
    }
  }

  &.hide-delete {
    .edit-btn {
      border-top-right-radius: var(--bs-border-radius-sm) !important;
      border-bottom-right-radius: var(--bs-border-radius-sm) !important;
    }

    .delete-btn {
      display: none;
    }
  }
}