@layer components {
    .daterangepicker td.week {
        color: #2EA2FA !important;
    }
    .daterangepicker .week {
        color: #2EA2FA !important;
    }
    table td,
    table thead th {
        font-size: 0.813rem;
    }

    table thead th {
        font-weight: 600;
    }

    table td {
        font-weight: 400;
    }

    table thead th.text-white {
        color: white;
    }

    .table-custom-striped>tbody>tr:nth-child(odd) {
        @apply bg-custom-grey-50;
    }

    .table-custom-striped td,
    .table-custom-striped th {
        @apply text-left align-middle;
    }

    .table-custom-striped td {
        @apply border-y border-y-custom-grey-200;
    }

    .table-custom-striped td a i {
        @apply text-base;
    }

    .table-custom-striped th {
        @apply text-custom-grey-600 font-medium text-[12px] leading-[18px] px-[13px] py-[13px];
    }

    .table-custom-striped td {
      @apply text-custom-grey-500 font-normal text-sm px-[13px] py-[13px];
    }

    table.basic_personal_table {
        @apply w-full border-collapse;
    }

    table.basic_personal_table>tbody {
        @apply first:border-t-0;
    }

    table.basic_personal_table>tbody>tr {
        @apply border-t flex flex-wrap first:border-t-0;
    }

    table.basic_personal_table>tbody>tr>th {
        @apply pt-4 pb-0 sm:pb-4 font-semibold text-sm text-custom-grey-700 text-left w-full sm:w-1/3;
    }

    table.basic_personal_table>tbody>tr>td {
        @apply py-4 font-medium text-sm text-custom-grey-600 text-left w-full sm:w-2/3;
    }

    .dataTables_wrapper .dataTables_processing {
        @apply z-[100] !fixed;
    }

    .table.schedule-table .bg-info {
        @apply hover:bg-custom-grey-600;
    }

    .table.schedule-table>tbody>tr:nth-child(odd) {
        @apply bg-custom-grey-100;
    }

    .table.schedule-table>tbody>tr:nth-child(even) {
        background-color: white;
    }

    .table.schedule-table>tbody>tr:nth-child(odd) td:first-child {
        position: sticky;
        left: 0;
        @apply bg-custom-grey-100;
        z-index: 1;
    }

    .table.schedule-table>tbody>tr:nth-child(even) td:first-child {
        position: sticky;
        left: 0;
        background-color: white;
        z-index: 1;
    }

    .table.schedule-table thead tr td:first-child {
        position: sticky;
        left: 0;
        background-color: white;
        z-index: 1;
    }

    .table.schedule-table td img {
        flex: 0 0 40px;
        min-height: 30px;
        min-width: 30px;
    }
    .non-detuctable-text{
        color: #959595;
    }
    /* DataTables STARTS*/
    .table-border-container,
    .dataTables_wrapper .table-border-container {
        @apply border border-custom-grey-200 rounded-lg my-4 pt-1;
        /*never remove pt, it will allow the th to overlap border.*/
    }

    .dataTables_scrollHead {
        @apply !sticky !overflow-x-scroll no-scrollbar top-[60px] z-10 bg-white;
        /*never remove pt. Else, it will leave a gap between thead and content head */
        /* pt-1 */
    }

    .dataTables_wrapper .table-border-container .dataTable {
        @apply m-0;
    }

    .dataTables_scrollHead .dataTables_scrollHeadInner {
        @apply border border-solid border-transparent shadow-none;
        transition: border-color 1s ease-in-out, box-shadow 500ms ease-in-out;
    }

    .dataTables_scrollHead.scrolled .dataTables_scrollHeadInner {
        @apply border-custom-grey-300 shadow-sm;
    }

    .dataTables_scrollBody thead .form-check-label {
        display: none;
    }

    .pagination-btn {
        @apply px-[14px] py-[8px] hover:bg-custom-grey-50 text-custom-grey-700 hover:text-custom-grey-700 focus:border-custom-grey-300 border border-custom-grey-300 rounded-lg flex gap-2 cursor-pointer w-max;
    }

    .pagination-btn.disabled {
        @apply bg-custom-grey-50;
    }

    .pagination_btn.disabled {
        @apply bg-custom-grey-50 text-custom-grey-700;
    }

    .pagination-row {
        @apply w-full flex flex-wrap lg:flex-nowrap justify-center lg:justify-between  gap-3 items-center px-6 py-0;
    }
    .pagination {
        @apply relative p-4 flex items-center justify-end list-none rounded-sm whitespace-nowrap space-x-0 overflow-x-auto w-full gap-2;
    }

    .paginate_button.page-item {
        @apply hidden lg:inline-block;
    }

    .paginate_button.page-item.previous {
        @apply relative !inline-block;
    }

    .paginate_button.page-item.next {
        @apply relative !inline-block;
    }

    .paginate_button.disabled .pagination-btn {
        @apply cursor-default;
    }

    .paginate_button#datatable_ellipsis {
        @apply bg-transparent;
    }

    .page-item .page-link {
        @apply px-4 py-2.5 text-center align-middle bg-white hover:bg-custom-grey-50 text-custom-grey-600 rounded-lg border-none focus:shadow-none cursor-pointer;
    }

    .page-item.active .page-link {
        @apply bg-custom-orange-25 text-custom-orange-600 cursor-default select-none;
    }

    .home .pagination .page-item .page-link {
        @apply px-2 py-0.5 bg-custom-orange-500 text-white hover:bg-custom-orange-600 hover:text-white flex flex-row items-center;
    }

    .home .pagination .page-item.disabled .page-link {
        @apply bg-custom-orange-300 text-white hover:bg-custom-orange-300 hover:text-white;
    }

    .simple-pagination .pagination .page-item .page-link {
        @apply px-[14px] py-[8px] bg-custom-grey-200 hover:bg-custom-grey-100 text-custom-grey-700 hover:text-custom-grey-700 border border-custom-grey-300 rounded-lg flex gap-2 cursor-pointer w-max;
    }

    .simple-pagination .pagination .page-item.disabled .page-link {
        @apply bg-custom-grey-100 hover:bg-custom-grey-50 text-custom-grey-600 hover:text-custom-grey-600;
    }



    .dataTables_length {
        label {
            select[name='datatable_length'], select[name='per_page_visual'] {
                @apply appearance-none h-[40px] w-full lg:w-auto text-custom-grey-900 border border-custom-grey-300 pl-[14px] pr-[42px] py-[8px] rounded-lg text-base font-medium;
            }

            @apply p-4 flex gap-4 mb-0 leading-9 align-middle;


        }


    }

    .schedule-td {
        @apply min-w-max px-3 py-2 rounded-bl-lg border-r border-custom-grey-200;
    }
    .schedule-td-bold {
        @apply min-w-max px-3 py-2 text-xs-semibold text-custom-grey-600 border-r border-custom-grey-200;
    }

    /* DataTables ENDS*/
}