.basic-table-component table,
.basic-table-component thead,
.basic-table-component tbody,
.basic-table-component tr,
.basic-table-component th,
.basic-table-component td {
    margin: 0;
    padding: 0;
    border: none !important;
    border-spacing: 0;
    border-collapse: separate;
    vertical-align: middle;
    font-weight: normal;
    text-align: left;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    box-sizing: border-box;
}
.basic-table-component {
    display: flex;
    gap: 10px;
    background-color: #FFF;
    padding: var(--spacing-7xl) var(--spacing-xl);
    @media (min-width: 768px) {
        padding: var(--spacing-9xl) var(--spacing-4xl);
    }
    @media (min-width: 1024px) {
        padding: var(--spacing-9xl) var(--spacing-8xl);
    }
    .basic-table-container {
        display: flex;
        flex-direction: column;
        max-width: var(--container-max-width-desktop);
        gap: var(--spacing-5xl);
        margin: 0 auto;
        width: 100%;
        border: none;
        box-shadow: none;
        @media (min-width: 1024px) {
            max-width: 1280px;
            padding: var(--spacing-none) var(--spacing-4xl);
        }
    }
    .first-row {
        height: 88px;
    }
    .main-row {
    }
    .basic-table-search {
        display: flex;
        align-items: center;
        height: 50px;
        border-radius: 6px;
        border: 1px solid #EAECF0;
        background-color: #FCFCFD;
        .dark & {
            border: 1px solid #1F242F;
            background-color: #161B26;
        }
        padding: 8px 12px;
        margin: 0 auto 16px;

        position: absolute;
        left: 16px;
        right: 16px;
        @media (min-width: 768px) {
            left: 32px;
            right: 32px;
            margin-bottom: var(--spacing-5xl);
        }
        @media (min-width: 1024px) {
            left: 80px;
            right: 80px;
            max-width: 1216px;
            margin: 0 30px var(--spacing-5xl);
        }
        @media (min-width: 1440px) {
            margin: 0 auto 16px;
        }
        .dataTables_filter input {
            height: 36px;
            background: transparent;
            color: #344054;
            .dark & {color: #CECFD2;}
            padding: 4px 4px 4px 24px;
            font-size: 16px;
            [lang="ar"] & {padding: 4px 24px 4px 4px;}
        }
        input::placeholder {
            color: #D0D5DD;
        }
        .dataTables_filter::before {
            content: "";
            position: absolute;
            top: 8px;
            left: 0;
            width: 20px;
            height: 20px;
            background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='search-md'%3E%3Cpath id='Icon' d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
        input {
            border: none;
            background: transparent;
            flex-grow: 1;
            color: #344054;
            font-size: 16px;
            font-weight: 400;
            padding: 0 8px;
        }
        .print-container {
            width: 36px;
            height: 36px;
            padding: 0;
        }
        .buttons-print::after {
            display: none;
        }
        .buttons-print span {
            width: 20px;
            height: 20px;
            background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='printer'%3E%3Cpath id='Icon' d='M18 7V5.2C18 4.0799 18 3.51984 17.782 3.09202C17.5903 2.71569 17.2843 2.40973 16.908 2.21799C16.4802 2 15.9201 2 14.8 2H9.2C8.0799 2 7.51984 2 7.09202 2.21799C6.71569 2.40973 6.40973 2.71569 6.21799 3.09202C6 3.51984 6 4.0799 6 5.2V7M6 18C5.07003 18 4.60504 18 4.22354 17.8978C3.18827 17.6204 2.37962 16.8117 2.10222 15.7765C2 15.395 2 14.93 2 14V11.8C2 10.1198 2 9.27976 2.32698 8.63803C2.6146 8.07354 3.07354 7.6146 3.63803 7.32698C4.27976 7 5.11984 7 6.8 7H17.2C18.8802 7 19.7202 7 20.362 7.32698C20.9265 7.6146 21.3854 8.07354 21.673 8.63803C22 9.27976 22 10.1198 22 11.8V14C22 14.93 22 15.395 21.8978 15.7765C21.6204 16.8117 20.8117 17.6204 19.7765 17.8978C19.395 18 18.93 18 18 18M15 10.5H18M9.2 22H14.8C15.9201 22 16.4802 22 16.908 21.782C17.2843 21.5903 17.5903 21.2843 17.782 20.908C18 20.4802 18 19.9201 18 18.8V17.2C18 16.0799 18 15.5198 17.782 15.092C17.5903 14.7157 17.2843 14.4097 16.908 14.218C16.4802 14 15.9201 14 14.8 14H9.2C8.0799 14 7.51984 14 7.09202 14.218C6.71569 14.4097 6.40973 14.7157 6.21799 15.092C6 15.5198 6 16.0799 6 17.2V18.8C6 19.9201 6 20.4802 6.21799 20.908C6.40973 21.2843 6.71569 21.5903 7.09202 21.782C7.51984 22 8.07989 22 9.2 22Z' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            display: block;
        }
    }
    .print-icon {
        width: 24px;
        height: 24px;
        cursor: pointer;
    }
    table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        display: table;
    }
    thead th {
        position: sticky;
        top: 0;
        padding: 0 45px 6px 16px !important;
        text-align: left;
        background-color: #F9FAFB !important;
        border: none !important;
        box-shadow: none !important;
        color: #344054 !important;
        .dark & {
            background-color: #161B26 !important;
            color: #CECFD2 !important;
        }
        font-size: 18px !important;
        font-weight: 500 !important;
        line-height: 28px !important;
        font-family: var(--font-text);
        [lang="ar"] & {
            font-family: var(--font-text);
            padding: 0 16px 6px 45px !important;
        }
        vertical-align: middle;
        /*min-width: 85px;*/
        white-space: normal;

        @media (min-width: 768px) {
            padding: 0 50px 6px 20px !important;
            [lang="ar"] & {padding: 0 20px 6px 50px !important;}
        }
    }
    thead th .subtitle {
        display: block;
        color: #667085 !important;
        .dark & {color: #94969C !important;}
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 18px !important;
        font-family: var(--font-text);

    }
    table.dataTable thead th,
    table.dataTable thead td {
        position: relative !important;
        [lang="ar"] & {text-align: right;}
    }
    thead th::before {
        content: "";
        display: inline-block;
        position: absolute;
        top: -5px !important;
        right: 20px !important;
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='chevron-up'%3E%3Cpath id='Icon' d='M7.2002 15L12.2002 10L17.2002 15' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") !important;
        background-repeat: no-repeat;
        background-position: center !important;
        vertical-align: middle;
        opacity: 0.7;
    }
    .with-subtitle {
      thead th::before {
        top: 5px !important;
        @media (min-width: 768px) {
            top: 0px !important;
        }
      }
    }
    .no-search-bar {
        .first-row {
            display: none;
        }
    }
    thead th::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 5px !important;
        right: 20px !important;
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat;
        background-position: center !important;
        background-color: transparent !important;
        vertical-align: middle;
        opacity: 0.7;
    }
    .with-subtitle {
      thead th::after {
        top: 15px !important;
        @media (min-width: 768px) {
            top: 10px !important;
        }
      }
    }
    table.dataTable thead th.sorting::before,
    table.dataTable thead td.sorting::before,
    table.dataTable thead th.sorting::after,
    table.dataTable thead td.sorting::after {
        opacity: 0.3 !important;
    }
    table.dataTable thead th.sorting_asc::before,
    table.dataTable thead td.sorting_asc::before {
        opacity: 1 !important;
    }
    table.dataTable thead th.sorting_asc::after,
    table.dataTable thead td.sorting_asc::after {
        opacity: 0.3 !important;
        top: -10px !important;
        left: -21px !important;
    }
    .with-subtitle {
      table.dataTable thead th.sorting_asc::after,
      table.dataTable thead td.sorting_asc::after {
        top: 0px !important;
        @media (min-width: 768px) {
            top: -5px !important;
        }
      }
    }
    table.dataTable thead th.sorting_desc::before,
    table.dataTable thead td.sorting_desc::before {
        opacity: 0.3 !important;
    }
    table.dataTable thead th.sorting_desc::after,
    table.dataTable thead td.sorting_desc::after {
        opacity: 1 !important;
        top: -10px !important;
        left: -21px !important;
    }
    .with-subtitle {
      table.dataTable thead th.sorting_desc::after,
        table.dataTable thead td.sorting_desc::after {
        top: 0px !important;
        @media (min-width: 768px) {
            top: -5px !important;
        }
      }
    }
    tbody tr {
        background-color: #fff !important;
        border-radius: 12px !important;
        .dark & {background-color: #0C111D !important;}
    }
    .show-first-row-icon {
      thead th:first-child {
          min-width: 120px;
      }
      td:first-child::before {
            content: '';
            display: inline-block;
            width: 24px;
            height: 24px;
            vertical-align: middle;
            background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='placeholder'%3E%3Cpath id='Icon' d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%23344054' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            flex-shrink: 0;
            margin: auto 12px auto 16px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
        }
    }
    tbody tr.selected {
        background-color: #CCF7F3 !important;
        border-radius: 12px !important;
    }
    tbody tr:nth-child(even) {
        background-color: #fff !important;
        .dark & {background-color: #0C111D !important;}
        border-radius: 12px !important;
    }
    tbody tr:nth-child(odd) {
        background-color: #f8f9fa !important;
        .dark & {background-color: #0C111D !important;}
        border-radius: 12px !important;
    }
    .table-striped tbody tr:nth-of-type(odd) * {
        --bs-table-accent-bg: #FFF;
        .dark & {--bs-table-accent-bg: #0C111D}
    }
    .table-striped tbody tr:nth-of-type(even) * {
        --bs-table-accent-bg: #F9FAFB;
        .dark & {--bs-table-accent-bg: #1F242F}
    }
    .table-striped.table-hover tbody tr:hover * {
        background-color: #CCF7F3 !important;
        --bs-table-accent-bg: #CCF7F3 !important;
        .dark & {
            background-color: #008D89 !important;
            --bs-table-accent-bg: #008D89 !important;
        }
    }
    .table-striped.table-hover {
        border-collapse: separate !important;
        border-spacing: 0;
    }
    .table-striped.table-hover tbody tr td:first-child {
        border-radius: 12px 0 0 12px !important;
        position: relative;
    }
    .show-first-row-icon {
        .table-striped.table-hover tbody tr td:first-child {
            padding-left: 52px;
            padding-right: 16px;
        }
    }
    .table-striped.table-hover tbody tr td:last-child {
        border-radius: 0 12px 12px 0 !important;
    }
    tbody tr:hover {
        background-color: #CCF7F3 !important;
        border-radius: 12px !important;
    }
    tbody td {
        padding: 16px;
        border: none !important;
        color: #101828 !important;
        .dark & {color: #F5F5F6 !important;}
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 24px !important;
        font-family: var(--font-text);
        [lang="ar"] & {
            text-align: right;
            font-family: var(--font-text);
        }
        @media (min-width: 768px) {
            padding: 24px 16px;
            font-size: 16px !important;
        }
    }
    .table-icon {
        width: 24px;
        height: 24px;
        margin-right: 12px;
        vertical-align: middle;
    }
    .dataTables_wrapper {
        box-shadow: none !important;
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 15px;
        scrollbar-color: lightgrey white;
        .dark & {scrollbar-color: #1F242F #0C111D;}
    }
    .dataTables_wrapper::-webkit-scrollbar {
      display: none;
    }
    .dataTables_wrapper .bottom-radius {
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        @media (min-width: 768px) {
            margin-top: 24px;
        }
    }
    .basic-table-footer {
        height: 24px;
        .dark & {
            background-color: #0C111D !important;
            color: #F5F5F6 !important;
        }
    }
    .dropdown {
        .dark & {background-color: #0C111D};
    }
    .lengthMenu {
        display: flex;
        align-items: center;
        position: absolute;
        z-index: 9999;
        padding: 0 !important;
        border: none !important;
    }
    .lengthMenu select {
        margin: 0 4px;
        padding: 4px 30px 4px 8px;
        border-radius: 4px;
        border: none !important;
        background-color: #fff;
        color: var(--text-primary, #212529);
        font-size: 14px;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat;
        background-position: right 4px center;
        background-size: 24px;
        @media (min-width: 768px) {
            font-size: 16px;
        }
    }
    .basic-table-pagination {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        justify-items: center !important;
        @media (min-width: 768px) {
            padding: var(--spacing-none) var(--spacing-4xl);
        }
        @media (min-width: 1024px) {
            padding: var(--spacing-none) var(--spacing-8xl);
        }
        @media (min-width: 1440px) {
            padding: var(--spacing-none) var(--spacing-none);
            max-width: 1216px;
        }
    }
    .dataTables_paginate {
        display: flex;
        align-items: center;
    }
    .dataTables_paginate .paginate_button {
        padding: 4px 8px;
        margin: 0 2px;
        cursor: pointer;
        font-size: 14px;
        filter: invert(42%) sepia(9%) saturate(207%) hue-rotate(182deg) brightness(88%) contrast(85%) !important;
        .dark & {filter: invert() !important;}
        @media (min-width: 768px) {
            font-size: 16px;
        }
        [lang="ar"] & {
            right: auto !important;
            left: 16px !important;
        }
    }
    .dataTables_paginate .current {
        font-weight: bold;
    }
    .paginate_of {
        padding: 0 !important;
        margin: 0 !important;
    }
    .dataTables_paginate .previous,
    .dataTables_paginate .next {
        color: var(--fg-secondary, #495057);
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        border: none !important;
    }
    .paginationDropdown {
        display: flex;
        align-items: center;
        margin: 0 12px;
    }
    .paginationDropdown select {
        margin: 0 4px;
        padding: 4px 30px 4px 8px;
        border-radius: 4px;
        border: none !important;
        background-color: #fff;
        color: var(--text-primary, #212529);
        font-size: 14px;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat;
        background-position: right 4px center;
        background-size: 24px;
        @media (min-width: 768px) {
            font-size: 16px;
        }
    }
    .skeleton-table-loader {
        position: relative;
    }
    .skeleton-table-loader::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        z-index: 1;
    }
    .column-title-with-icon {
        display: flex;
        align-items: center;
        margin-bottom: 32px;
    }
    .dataTables_paginate {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 100%;
    }
    .eq-select-datatable.paginate-select,
    .paginate_page,
    select,
    .paginate_of {
        margin: 0 !important;
    }
    .paginate_button.previous,
    .paginate_button.next {
      position: absolute;
        right: 16px;
        @media (min-width: 768px) {
            right: 0;
        }
    }
    .paginate_button.previous {
        margin: 0 24px 0 0;
        [lang="ar"] & {
            margin: 0 0 0 24px;
        }
    }
}
.basic-table-caption {
    color: var(--text-primary);
    .dark & {color: var(--color-gray-900-dark);}
    margin-bottom: 0;
    font: var(--english-display-sm-semibold);
    [lang="ar"] & {font: var(--arabic-display-sm-semibold);}
    font-size: 24px;
    line-height: 32px;
    @media (min-width: 768px) {
        font: var(--english-display-sm-semibold);
        [lang="ar"] & {font: var(--arabic-display-sm-semibold);}
        letter-spacing: 0.02em;
    }
}
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
[dir="rtl"] .basic-table-component {
    thead th,
    tbody td {
        text-align: right;
    }
    .table-icon {
        margin-right: 0;
        margin-left: 12px;
    }
    thead th::after {
        margin-left: 0;
        margin-right: 4px;
    }
    .dataTables_paginate .previous::before {
        transform: rotate(180deg);
    }
    .dataTables_paginate .next::before {
        transform: rotate(180deg);
    }
}
.basic-table-component table thead,
.basic-table-component table tbody {
    display: table-header-group !important;
}
.basic-table-component .dataTables_wrapper {
    display: block !important;
}
.basic-table-component .dataTables_wrapper .bottom-radius {
    order: initial !important;
}
.basic-table-component.dark {
    background-color: #0C111D !important;
}
.basic-table-component.dark input::placeholder {
    color: #333741;
}
.basic-table-component.dark table.dataTable thead th.sorting::before,
.basic-table-component.dark table.dataTable thead td.sorting::before,
.basic-table-component.dark table.dataTable thead th.sorting::after,
.basic-table-component.dark table.dataTable thead td.sorting::after {
    opacity: 1 !important;
}
.basic-table-component.dark table.dataTable thead th.sorting_asc::after,
.basic-table-component.dark table.dataTable thead td.sorting_asc::after {
    filter: brightness(2);
}
.basic-table-component.dark table.dataTable thead th.sorting_desc::before,
.basic-table-component.dark table.dataTable thead td.sorting_desc::before {
    filter: invert(1) brightness(2);
}
.basic-table-component.dark .dropdown-toggle::after {
  filter: invert();
}
.basic-table-component.dark .dataTables_length label::before {
    color: #F5F5F6;
}
.basic-table-component.dark tbody tr td:first-child::before,
.basic-table-component.dark tbody tr td:first-child .d-flex::before,
[lang="ar"] .basic-table-component .dataTables_filter::before {
    left: auto !important;
    right: 0 !important;
}
[lang="ar"] .basic-table-component tbody tr td:first-child::before {
    margin: auto 16px auto 12px;
    right: 0;
}
[lang="ar"] .basic-table-component .table-striped.table-hover tbody tr td:first-child {
    border-radius: 0 12px 12px 0 !important;
    position: relative;
}
[lang="ar"] .basic-table-component .show-first-row-icon .table-striped.table-hover tbody tr td:first-child {
    padding-right: 52px;
    padding-left: 16px;
}
[lang="ar"] .basic-table-component .table-striped.table-hover tbody tr td:last-child {
    border-radius: 12px 0 0 12px !important;
}
[lang="ar"] .basic-table-component table.dataTable thead th::before,
[lang="ar"] .basic-table-component table.dataTable thead td::before,
[lang="ar"] .basic-table-component table.dataTable thead th::after,
[lang="ar"] .basic-table-component table.dataTable thead td::after {
  right: auto !important;
  left: 20px !important;
}