/*------------- RTL ---------------------------------------*/
html[dir=rtl] div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
    margin-left: unset;
    margin-right: auto;
}

html[dir=rtl] div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start {
    margin-right: unset;
    margin-left: auto;
}

html[dir=rtl] table.dataTable thead th,
html[dir=rtl] table.dataTable thead td,
html[dir=rtl] table.dataTable tfoot th,
html[dir=rtl] table.dataTable tfoot td {
    text-align: right;
}

html[dir=rtl] table.dataTable > thead .sorting:before,
html[dir=rtl] table.dataTable > thead .sorting_asc:before,
html[dir=rtl] table.dataTable > thead .sorting_desc:before,
html[dir=rtl] table.dataTable > thead .sorting_asc_disabled:before,
html[dir=rtl] table.dataTable > thead .sorting_desc_disabled:before {
    right: 0.75em;
    content: "\f176";
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    line-height: 0.2;
}

html[dir=rtl] table.dataTable > thead .sorting:after,
html[dir=rtl] table.dataTable > thead .sorting_asc:after,
html[dir=rtl] table.dataTable > thead .sorting_desc:after,
html[dir=rtl] table.dataTable > thead .sorting_asc_disabled:after,
html[dir=rtl] table.dataTable > thead .sorting_desc_disabled:after {
    right: 0.25em;
    content: "\f175";
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    line-height: 0.2;
}


/*------------- Override Default DataTables Styles ---------------------------------------*/
div.dt-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    div.dt-container div.dt-layout-row {
        margin: 0;
    }

        div.dt-container div.dt-layout-row div.dt-layout-cell {
            gap: 0.5rem;
        }

        div.dt-container div.dt-layout-row div.dt-layout-end > *:not(:first-child) {
            margin-left: unset;
        }

    div.dt-container .dt-search {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        background-color: #fff;
        overflow: hidden;
        border-radius: 10px;
        padding: 0.5rem 1rem;
    }

        div.dt-container .dt-search input[type=search] {
            border-width: 0;
            padding: 0;
            margin: 0;
            border-radius: 0;
            width: 100%;
        }

.dt-container .dt-scroll-body {
    position: relative;
    min-height: 100px;
}

div.dt-container.dt-empty-footer .dt-scroll-body {
    border-width: 0;
}

div.dt-container table.dataTable.table-html > tbody > tr > th,
div.dt-container table.dataTable.table-html > tbody > tr > td {
    padding: 0;
}

div.dt-container .dt-processing {
    position: absolute;
    align-content: center;
    width: calc(100% + 2px);
    height: 100%;
    inset: 0;
    z-index: 3;
    padding: 0;
    margin: 0;
    background-color: rgba(248, 248, 248, 0.5);
    border-radius: 10px;
    overflow: hidden;
}

    div.dt-container .dt-processing > div {
        position: relative;
        display: inline-block;
        background-color: rgba(255, 255, 255, 0.95);
        padding: 0.5rem 3rem;
        margin-top: -10px;
        border-radius: 10px;
        height: 75px;
        text-align: center;
    }

        div.dt-container .dt-processing > div > .processing-animation {
            position: relative;
            width: 80px;
            height: 15px;
            margin: 1rem auto 0 auto;
        }

            div.dt-container .dt-processing > div > .processing-animation > div {
                position: absolute;
                top: 0;
                width: 13px;
                height: 13px;
                border-radius: 50%;
                background: rgb(13, 110, 253);
                background: rgb(var(--dt-row-selected));
                animation-timing-function: cubic-bezier(0, 1, 1, 0);
            }

                div.dt-container .dt-processing > div > .processing-animation > div:nth-child(1) {
                    left: 8px;
                    animation: datatables-loader-1 .6s infinite;
                }

                div.dt-container .dt-processing > div > .processing-animation > div:nth-child(2) {
                    left: 8px;
                    animation: datatables-loader-2 .6s infinite;
                }

                div.dt-container .dt-processing > div > .processing-animation > div:nth-child(3) {
                    left: 32px;
                    animation: datatables-loader-2 .6s infinite;
                }

                div.dt-container .dt-processing > div > .processing-animation > div:nth-child(4) {
                    left: 56px;
                    animation: datatables-loader-3 .6s infinite;
                }

        div.dt-container .dt-processing > div:last-child {
            display: none;
        }

div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
    display: flex;
    width: 100%;
}

div.dt-container .dt-paging {
    display: none;
}

    div.dt-container .dt-paging:has([data-dt-idx="1"]) {
        display: flex;
        font-size: 0.875rem;
        width: 100%;
    }

        div.dt-container .dt-paging:has([data-dt-idx="1"]) > nav {
            display: flex;
            justify-content: end;
            width: 100%;
        }

            div .dt-container .dt-paging:has([data-dt-idx="1"]) > nav > .dt-paging-button,
            div .dt-container .dt-paging:has([data-dt-idx="1"]) > nav > .ellipsis {
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--default-200);
                border-inline-end-width: 0;
                border-radius: 0;
                background-color: #fff;
                color: var(--default-600) !important;
                line-height: 1.25rem;
                padding: 0.25rem 0.75rem;
                margin: 0;
            }

                div.dt-container .dt-paging:has([data-dt-idx="1"]) > nav > .dt-paging-button:hover:not(.disabled),
                div.dt-container .dt-paging:has([data-dt-idx="1"]) > nav > .dt-paging-button:active:not(.disabled) {
                    background: var(--default-100);
                    border: 1px solid var(--default-200);
                    border-inline-end-width: 0;
                    color: var(--default-600) !important;
                    box-shadow: none !important;
                }

                div.dt-container .dt-paging:has([data-dt-idx="1"]) > nav > .dt-paging-button.current {
                    border-inline-end-width: 0;
                    color: #fff !important;
                    background-color: var(--primary-400) !important;
                    border-color: var(--primary-400) !important;
                }

                    div.dt-container .dt-paging:has([data-dt-idx="1"]) > nav > .dt-paging-button.current:hover,
                    div.dt-container .dt-paging:has([data-dt-idx="1"]) > nav > .dt-paging-button.current:active {
                        cursor: default !important;
                        border-inline-end-width: 0;
                        color: #fff !important;
                        background-color: var(--primary-400) !important;
                        border-color: var(--primary-400) !important;
                        padding: 0.25rem 0.75rem;
                        margin: 0;
                        box-shadow: none !important;
                    }

                div.dt-container .dt-paging:has([data-dt-idx="1"]) > nav > .dt-paging-button.previous {
                    border-start-start-radius: 0.375rem;
                    border-end-start-radius: 0.375rem;
                }

                div.dt-container .dt-paging:has([data-dt-idx="1"]) > nav > .dt-paging-button.next {
                    border-start-end-radius: 0.375rem;
                    border-end-end-radius: 0.375rem;
                    border-inline-end-width: 1px !important;
                }

                div.dt-container .dt-paging:has([data-dt-idx="1"]) > nav > .dt-paging-button.disabled {
                    border: 1px solid var(--default-200);
                    background-color: #fff;
                    color: var(--default-200) !important;
                }

                    div.dt-container .dt-paging:has([data-dt-idx="1"]) > nav > .dt-paging-button.disabled:hover,
                    div.dt-container .dt-paging:has([data-dt-idx="1"]) > nav > .dt-paging-button.disabled:active {
                        border: 1px solid var(--default-200);
                        background-color: #fff;
                        color: var(--default-200) !important;
                    }



@media (max-width: 1023.98px) {

    div.dt-container .dt-paging > nav {
        justify-content: center;
    }
}