.LoaderDiv {
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
    z-index: 5000;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
}

.LoadingDiv {
    left: 50%;
    display: inline-block;
    position: absolute;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    /*  min-width: 290px;

    padding-top: 200px;

    margin-left: 20px;*/
}


.fa-spin {
    animation: 2s linear 0s normal none infinite running fa-spin;
}

.loader-item {
    background: none;
    border-bottom: 3px solid rgba(0, 0, 0, 0) !important;
    border-left: 3px solid;
    border-radius: 200px;
    border-right: 3px solid;
    border-top: 3px solid;
    height: 40px;
    width: 40px;
}

.colored-border {
    border-color: #3498db;
}

.loaderText {
    font-weight: lighter;
    font-size: 22px;
    color: white;
    margin-top: 5px;
}

.form-control.error,
.was-validated .form-control:invalid {
    margin-bottom: 1rem;
    background-image: none;
    border-color: #f93154;
}

label.error {
    width: auto;
    color: #f93154;
    font-size: .875rem;
    margin-top: -.75rem;
}

.ml-25px {
    margin-left: 25px !important;
}

.aside.card.cus-side {
    left: 0px;
    top: 61px;
    bottom: 0px;
    /*border-top-right-radius: 20px;*/

    box-shadow: 0 0 13px 0 rgb(82 63 105 / 5%);
}

.title-menu-wrap {
    padding-left: 10px;
    color: #9e9e9e;
    font-size: 14px;
    white-space: nowrap;
}

.menu-block-sections {
    position: relative;
}

.menu-item.active .menu-link .menu-title {
    color: black !important;
}

.text-sent {
    color: #fd7e14 !important;
}

.bg-sent {
    background-color: #fd7e14;
}

.Cardloader {
    display: flex;
    position: relative;
    bottom: 6%;
    margin-left: 88%;
    align-items: center;
    height: 20px !important;
    width: 20px !important;
}

.LoadRecent {
    position: absolute;
    bottom: 39%;
    margin-left: 36%;
    display: flex;
    align-items: center;
    height: 40px !important;
}

#test {
    display: flex;
    flex-direction: column;
}

    #test .menu-item.menu-accordion:nth-child(1) {
        order: 6
    }

    #test .menu-item.menu-accordion:nth-child(2) {
        order: 2
    }

    #test .menu-item.menu-accordion:nth-child(3) {
        order: 4
    }

    #test .menu-item.menu-accordion:nth-child(4) {
        order: 3
    }

    #test .menu-item.menu-accordion:nth-child(5) {
        order: 5
    }

    #test .menu-item.menu-accordion:nth-child(6) {
        order: 1
    }

/* =========================================================

   ✅ RES-4: HORIZONTAL MOMENTUM SCROLLING & MIN-WIDTH FLOOR

   ========================================================= */

.table-responsive,
.dataTables_scrollBody,
.table-wrap,
.tbl-wrap,
[class*="table-responsive"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 768px) {

    .table-responsive,
    .dataTables_scrollBody,
    .table-wrap,
    .tbl-wrap,
    [class*="table-responsive"] {
        overflow-x: auto !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch !important;
    }

        .table-responsive table,
        .table-responsive .table,
        .table-responsive table.dataTable,
        .dataTables_scrollBody table,
        .dataTables_scrollBody .table,
        .dataTables_scrollBody table.dataTable,
        .table-wrap table,
        .tbl-wrap table,
        [class*="table-responsive"] table,
        [class*="table-responsive"] .table {
            min-width: 640px !important;
            border-collapse: separate;
            border-spacing: 0;
        }

            .table-responsive table th,
            .table-responsive table td,
            .dataTables_scrollBody table th,
            .dataTables_scrollBody table td,
            .table-wrap table th,
            .table-wrap table td,
            .tbl-wrap table th,
            .tbl-wrap table td,
            [class*="table-responsive"] table th,
            [class*="table-responsive"] table td {
                white-space: nowrap;
            }

                /* Sticky first column */

                .table-responsive table th:first-child,
                .table-responsive table td:first-child,
                .dataTables_scrollBody table th:first-child,
                .dataTables_scrollBody table td:first-child,
                [class*="table-responsive"] table th:first-child,
                [class*="table-responsive"] table td:first-child {
                    position: sticky;
                    left: 0;
                    background: #fff;
                    z-index: 2;
                    /*box-shadow: 2px 0 5px rgba(0, 0, 0, 0.08);*/
                }

            /* Keep header above body cells */

            .table-responsive table thead th:first-child,
            .dataTables_scrollBody table thead th:first-child,
            [class*="table-responsive"] table thead th:first-child {
                z-index: 3;
            }
}

/* =========================================================

   ✅ FIX SELECT2 MULTI-SELECT CLEAR BUTTON (X) HIDING & VISIBILITY

   ========================================================= */

.select2-container .select2-selection--multiple,
.select2-container--bootstrap5 .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
    position: relative !important;
    padding-right: 32px !important;
}

    .select2-container .select2-selection--multiple .select2-selection__clear,
    .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__clear,
    .select2-container--default .select2-selection--multiple .select2-selection__clear {
        position: absolute !important;
        right: 8px !important;
        top: 8px !important;
        transform: none !important;
        margin: 0 !important;
        z-index: 100 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 22px !important;
        height: 22px !important;
        background: #e1e3ea !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        border: none !important;
        outline: none !important;
        transition: all 0.2s ease !important;
        font-size: 0 !important;
        overflow: visible !important;
    }

        .select2-container .select2-selection--multiple .select2-selection__clear::after,
        .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__clear::after,
        .select2-container--default .select2-selection--multiple .select2-selection__clear::after {
            content: "×" !important;
            font-size: 16px !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            color: #3f4254 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin-top: -1px !important;
        }

    /* =========================================================

   🔤 GLOBAL SELECT2 TEXT COLOR - #5e6278

   Ensures all Select2 dropdown selections and options 

   use standard theme text color (#5e6278),

   while keeping placeholders muted (#a1a5b7).

   ========================================================= */

    .select2-container .select2-selection--single,
    .select2-container .select2-selection--single .select2-selection__rendered,
    .select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
    .select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered,
    .select2-container--default .select2-selection--single .select2-selection__rendered,
    .select2-container .select2-selection--multiple,
    .select2-container .select2-selection--multiple .select2-selection__rendered,
    .select2-container .select2-selection--multiple .select2-selection__choice,
    .select2-container .select2-selection--multiple .select2-selection__choice__display,
    .select2-container .select2-search--inline .select2-search__field,
    .select2-dropdown .select2-results__option:not(.select2-results__option--highlighted),
    .select2-dropdown .select2-results__group,
    .select2-container--default .select2-results__option:not(.select2-results__option--highlighted),
    .select2-container--bootstrap .select2-results__option:not(.select2-results__option--highlighted),
    .select2-container--bootstrap5 .select2-results__option:not(.select2-results__option--highlighted) {
        color: #5e6278 !important;
    }

/* Maintain text for search inputs inside dropdown */

.select2-dropdown .select2-search--dropdown .select2-search__field,
.select2-search--dropdown .select2-search__field {
    color: #5e6278 !important;
}

/* Keep placeholders muted / grey so they do not look like selected values */

.select2-container .select2-selection__placeholder,
.select2-container .select2-selection--single .select2-selection__placeholder,
.select2-container--bootstrap .select2-selection--single .select2-selection__placeholder,
.select2-container--bootstrap5 .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #a1a5b7 !important;
    font-weight: normal !important;
}


/* =========================================================

   🧭 RESPONSIVE SIDEBAR & HAMBURGER BREAKPOINT (1024px)

   - Mobile/Tablet (<= 1024px): Hamburger visible, sidebar is off-canvas drawer, wrapper padding 0

   - Desktop (>= 1025px): Hamburger hidden, sidebar pinned, wrapper padding 315px

   ========================================================= */

@media (max-width: 1024px) {

    #kt_aside_toggle {
        display: inline-flex !important;
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .wrapper,
    #kt_wrapper {
        padding-left: 0 !important;
    }

    .aside:not(.drawer) {
        display: none !important;
    }

    body[data-kt-drawer="on"] {
        overflow: hidden !important;
    }
}

@media (min-width: 1025px) {

    #kt_aside_toggle {
        display: none !important;
    }

    .wrapper,
    #kt_wrapper {
        padding-left: 315px !important;
    }
}

/* =========================================================

   📱 BUG-19: TOUCH TARGETS MINIMUM 44px & MOBILE RESPONSIVENESS

   Ensures interactive controls (nav rows, icon buttons, 

   row action links, form controls, pagination, calendars)

   meet or exceed the 44px minimum touch target size.

   ========================================================= */

/* Global rules */

.menu-sub-dropdown:not(.show) {
    display: none !important;
}

.menu-sub-accordion:not(.show),
.menu-item:not(.show) > .menu-sub,
.menu-item:not(.menu-open) > .menu-sub {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Ensure hidden elements and d-none are NEVER forced visible */

.d-none,
.d-none.btn,
.d-none.btn-sm,
.d-none.btn-icon,
.btn.d-none,
button.d-none,
a.d-none,
[hidden],
.hide {
    display: none !important;
}

/* =========================================================

   TOUCH & MOBILE ONLY (max-width: 991px OR touch screens)

   Increases touch radius (hit area) using invisible ::after

   pseudo-elements so buttons & controls stay sleek and compact.

   ========================================================= */

@media (max-width: 991px), (pointer: coarse) {

    /* 1. Touch Target Radius Expansion via Pseudo-Element */

    .btn,
    .btn-sm,
    .btn-icon,
    .btn-close,
    .modal .btn-close,
    [data-bs-dismiss="modal"],
    .table a.btn,
    .table button.btn,
    .dataTable a.btn,
    .dataTable button.btn,
    .dataTable td a.btn,
    .table td > a:not(.btn):not(.no-touch-target),
    .dataTable td > a:not(.btn):not(.no-touch-target),
    .dataTables_paginate .paginate_button,
    .pagination .page-item .page-link,
    .form-check-input {
        position: relative;
        touch-action: manipulation;
    }

        /* Invisible 44x44px touch radius hit area */

        .btn::after,
        .btn-sm::after,
        .btn-icon::after,
        .btn-close::after,
        .modal .btn-close::after,
        [data-bs-dismiss="modal"]::after,
        .table a.btn::after,
        .table button.btn::after,
        .dataTable a.btn::after,
        .dataTable button.btn::after,
        .dataTable td a.btn::after,
        .table td > a:not(.btn):not(.no-touch-target)::after,
        .dataTable td > a:not(.btn):not(.no-touch-target)::after,
        .dataTables_paginate .paginate_button::after,
        .pagination .page-item .page-link::after,
        .form-check-input::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 44px;
            min-height: 44px;
            width: 100%;
            height: 100%;
            pointer-events: auto;
            z-index: 1;
        }

    /* 2. Menu Links Manipulation */

    .menu-item .menu-link,
    .aside-menu .menu-link,
    #kt_aside .menu-link {
        touch-action: manipulation;
    }

    /* 3. Form Controls touch responsiveness */

    .form-control,
    .form-select {
        touch-action: manipulation;
    }
}

/* 7. Flatpickr Calendar Mobile Touch Targets */

.flatpickr-calendar {
    touch-action: manipulation !important;
    font-size: 15px !important;
    z-index: 99999 !important;
}

@media (max-width: 768px) {

    .flatpickr-calendar {
        max-width: 96vw !important;
    }
}

.flatpickr-day {
    height: 40px !important;
    line-height: 40px !important;
    font-size: 13px !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
}

.flatpickr-current-month {
    font-size: 16px !important;
    padding: 8px 0 0 0 !important;
}

    .flatpickr-current-month .flatpickr-monthDropdown-months,
    .flatpickr-current-month input.cur-year {
        font-size: 16px !important;
        font-weight: 600 !important;
        min-height: 36px !important;
    }