body {
    font-family: 'Inter', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif !important;
}

[data-bs-theme=light] {
--bs-blue-50: #f1f9fc !important;
--bs-blue-100: #d4edf7 !important;
--bs-blue-200: #bfe4f3 !important;
--bs-blue-300: #a2d8ed !important;
--bs-blue-400: #90d1e9 !important;
--bs-blue-500: #74c5e4 !important;
--bs-blue-600: #6ab3cf !important;
--bs-blue-700: #528ca2 !important;
--bs-blue-800: #406c7d !important;
--bs-blue-900: #315360 !important;

--bs-green-50: #f4f9ec !important;
--bs-green-100: #dbedc4 !important;
--bs-green-200: #cae4a7 !important;
--bs-green-300: #b2d87f !important;
--bs-green-400: #a3d166 !important;
--bs-green-500: #8cc540 !important;
--bs-green-600: #7fb33a !important;
--bs-green-700: #638c2d !important;
--bs-green-800: #4d6c23 !important;
--bs-green-900: #3b531b !important;

--bs-purple-50: #f6f4f9 !important;
--bs-purple-100: #e2dcec !important;
--bs-purple-200: #d5cbe3 !important;
--bs-purple-300: #c1b3d6 !important;
--bs-purple-400: #b5a5ce !important;
--bs-purple-500: #9481b1 !important;
--bs-purple-600: #9481b1 !important;
--bs-purple-700: #74658a !important;
--bs-purple-800: #5a4e6b !important;
--bs-purple-900: #443c51 !important;

--bs-yellow-50: #FFFDE7 !important;
--bs-yellow-100: #FFF9C4 !important;
--bs-yellow-200: #FFF59D !important;
--bs-yellow-300: #FFF176 !important;
--bs-yellow-400: #FFEE58 !important;
--bs-yellow-500: #FFEB3B !important;
--bs-yellow-600: #FDD835 !important;
--bs-yellow-700: #FBC02D !important;
--bs-yellow-800: #F9A825 !important;
--bs-yellow-900: #F57F17 !important;

--bs-pastel-green-50: #F1F8E9 !important;
--bs-pastel-green-100: #DCEDC8 !important;
--bs-pastel-green-200: #C5E1A5 !important;
--bs-pastel-green-300: #AED581 !important;
--bs-pastel-green-400: #9CCC65 !important;
--bs-pastel-green-500: #8BC34A !important;
--bs-pastel-green-600: #7CB342 !important;
--bs-pastel-green-700: #689F38 !important;
--bs-pastel-green-800: #558B2F !important;
--bs-pastel-green-900: #33691E !important;

--bs-violet-50: #F3E5F5 !important;
--bs-violet-100: #E1BEE7 !important;
--bs-violet-200: #CE93D8 !important;
--bs-violet-300: #BA68C8 !important;
--bs-violet-400: #AB47BC !important;
--bs-violet-500: #9C27B0 !important;
--bs-violet-600: #8E24AA !important;
--bs-violet-700: #7B1FA2 !important;
--bs-violet-800: #6A1B9A !important;
--bs-violet-900: #4A148C !important;

--bs-orange-50: #FFF3E0 !important;
--bs-orange-100: #FFE0B2 !important;
--bs-orange-200: #FFCC80 !important;
--bs-orange-300: #FFB74D !important;
--bs-orange-400: #FFA726 !important;
--bs-orange-500: #E2714D !important;
--bs-orange-600: #FB8C00 !important;
--bs-orange-700: #F57C00 !important;
--bs-orange-800: #EF6C00 !important;
--bs-orange-900: #E65100 !important;

--bs-error-50: #ffe7e7 !important;
--bs-error-100: #ffb5b5 !important;
--bs-error-200: #ff9191 !important;
--bs-error-300: #ff5f5f !important;
--bs-error-400: #ff4040 !important;
--bs-error-500: #ff1010 !important;
--bs-error-600: #e80f0f !important;
--bs-error-700: #b50b0b !important;
--bs-error-800: #8c0909 !important;
--bs-error-900: #6b0707 !important;

--bs-warning-50: #FFF5E7 !important;
--bs-warning-100: #FFECB3 !important;
--bs-warning-200: #FFD291 !important;
--bs-warning-300: #FFD54F !important;
--bs-warning-400: #FFCA28 !important;
--bs-warning-500: #FFC107 !important;
--bs-warning-600: #FFB300 !important;
--bs-warning-700: #FFA000 !important;
--bs-warning-800: #8C5709 !important;
--bs-warning-900: #FF6F00 !important;

--bs-success-50: #EDF7EE !important;
--bs-success-100: #c8e6c9 !important;
--bs-success-200: #addaaf !important;
--bs-success-300: #87c98a !important;
--bs-success-400: #70bf73 !important;
--bs-success-500: #4caf50 !important;
--bs-success-600: #459f49 !important;
--bs-success-700: #367c39 !important;
--bs-success-800: #2a602c !important;
--bs-success-900: #204a22 !important;

--bs-info-50: #e9f1fe !important;
--bs-info-100: #bad4fb !important;
--bs-info-200: #99c0f9 !important;
--bs-info-300: #6ba3f6 !important;
--bs-info-400: #4E91F5 !important;
--bs-info-500: #2275f2 !important;
--bs-info-600: #1f6adc !important;
--bs-info-700: #1853ac !important;
--bs-info-800: #134085 !important;
--bs-info-900: #0e3166 !important;

--bs-neutral-10: #F5F7FA !important;
--bs-neutral-50: #E8E8E8 !important;
--bs-neutral-100: #b8b8b8 !important;
--bs-neutral-200: #969696 !important;
--bs-neutral-300: #666666 !important;
--bs-neutral-400: #484848 !important;
--bs-neutral-500: #1a1a1a !important;
--bs-neutral-600: #181818 !important;
--bs-neutral-700: #121212 !important;
--bs-neutral-800: #0e0e0e !important;
--bs-neutral-900: #0b0b0b !important;
--bs-neutral-950: #231F20 !important;
--bs-neutral-1000: #333333 !important;

/* metronic */
--bs-text-primary: #9481B1 !important;
--bs-primary: #9481B1 !important;
--bs-primary-inverse: #FFFFFF !important;
--bs-primary-light: #F6F4F9 !important;
--bs-primary-50: #F6F4F9 !important;
--bs-primary-700: #74658A !important;
--bs-primary-hover: #74658A !important;
--bs-primary-active: #74658A !important;
--bs-primary-green-300: #B2D87F !important;
--bs-primary-rgb: 148, 129, 177 !important;
--bs-black-400: #1D1D1D !important;
--gris-oscuro: #6B6B6B !important;
--bs-neutral-separator: #B8B8B8 !important;
--bs-table-striped-bg: var(--bs-primary-50) !important;
}

[data-bs-theme=dark] {
    --bs-purple-600: #9481B1 !important;
}

.separator.separator-content::after, .separator.separator-content::before {
    content: " ";
    width: 50%;
    border-bottom: 1px solid var(--bs-neutral-separator);
}

@media (min-width: 992px) {
    .app-sidebar-logo {
        justify-content: center !important;
    }
}

.border-blue-light-50 {
    border: 1px solid var(--bs-blue-50) !important;
}

.bg-blue-50 {
    background-color: var(--bs-blue-50) !important;
}

.bg-blue {
    background-color: var(--bs-blue-600) !important;
}

.bg-blue-100 {
    background-color: var(--bs-blue-100) !important;
}

.bg-blue-600 {
    background-color: var(--bs-blue-600) !important;
}

.bg-green-50 {
    background-color: var(--bs-green-50) !important;
}

.bg-green {
    background-color: var(--bs-green-600) !important;
}

.bg-green-100 {
    background-color: var(--bs-green-100) !important;
}

.bg-green-300 {
    background-color: var(--bs-green-300) !important;
}

.bg-green-500 {
    background-color: var(--bs-green-500) !important;
}

.bg-primary {
    background-color: var(--bs-purple-600) !important;
}

.bg-outline-primary {

    background-color: var(--bs-purple-600) !important;
}

.bg-primary-50 {
    background-color: var(--bs-purple-50) !important;
}

.bg-primary-100 {
    background-color: var(--bs-purple-100) !important;
}

.bg-primary-500 {
    background-color: var(--bs-purple-500) !important;
}

.bg-info-500 {
    background-color: var(--bs-info-500) !important;
}

.bg-success-50 {
    background-color: var(--bs-success-50) !important;
}

.bg-success-500 {
    background-color: var(--bs-success-500) !important;
}

.bg-neutral-50 {
    background-color: var(--bs-neutral-50) !important;
}

.bg-neutral-10 {
    background-color: var(--bs-neutral-10) !important;
}

.text-primary {
    color: var(--bs-purple-600) !important;
}

.text-purple-800 {
    color: var(--bs-purple-600) !important;
}

.text-primary:hover {
    color: var(--bs-purple-700) !important;
}

.text-blue-600 {
    color: var(--bs-blue-600) !important;
}

.text-blue-800 {
    color: var(--bs-blue-800) !important;
}

.text-green-300 {
    color: var(--bs-green-300) !important;
}

.text-green-200 {
    color: var(--bs-green-200) !important;
}

.text-green-600 {
    color: var(--bs-green-600) !important;
}

.text-green-800 {
    color: var(--bs-green-800) !important;
}

.text-primary-green-300 {
    color: var(--bs-primary-green-300) !important;
}

.text-neutral-300 {
    color: var(--bs-neutral-300) !important;
}

.text-neutral-400 {
    color: var(--bs-neutral-400) !important;
}

.text-neutral-500 {
    color: var(--bs-neutral-500) !important;
}

.text-neutral-800 {
    color: var(--bs-neutral-800) !important;
}

.text-neutral-950 {
    color: var(--bs-neutral-950) !important;
}

.text-neutral-1000 {
    color: var(--bs-neutral-1000) !important;
}

.text-black-400 {
    color: var(--bs-black-400) !important;
}

.text-orange-500 {
    color: var(--bs-orange-500) !important;
}

.text-info-400 {
    color: var(--bs-info-400) !important;
}

.text-info-500 {
    color: var(--bs-info-500) !important;
}

.text-gris-oscuro {
    color: var(--gris-oscuro) !important;
}

.btn-outline-primary {
    color: var(--bs-purple-600) !important;
    border: 1px solid !important;
    border-color: var(--bs-purple-600) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    color: var(--bs-primary-inverse) !important;
    border: 1px solid !important;
    border-color: var(--bs-purple-600) !important;
    background-color: var(--bs-purple-600) !important;
}

.btn-outline-danger-gray {
    color: var(--bs-error-400) !important;
    border: 1px solid !important;
    border-color: var(--bs-neutral-50) !important;
    background-color: white !important;
}


.btn-outline-danger-gray:hover {
    color: var(--bs-primary-inverse) !important;
    border: 1px solid !important;
    border-color: var(--bs-error-400) !important;
    background-color: var(--bs-error-400) !important;
}

.btn-outline-neutral-gray {
    color: var(--bs-neutral-800) !important;
    border: 1px solid !important;
    border-color: var(--bs-neutral-50) !important;
    background-color: white !important;
}

.btn-outline-neutral-gray:hover {
    color: var(--bs-neutral-800) !important;
    border: 1px solid !important;
    border-color: var(--bs-neutral-50) !important;
    background-color: var(--bs-purple-100) !important;
}

.btn-outline-neutral-gray-active {
    color: var(--bs-neutral-800) !important;
    border: 1px solid !important;
    border-color: var(--bs-neutral-50) !important;
    background-color: var(--bs-purple-100) !important;
}

.btn-primary-inverse {
    color: var(--bs-purple-600) !important;
    border: 1px solid !important;
    border: none !important;
    background-color: var(--bs-primary-inverse) !important;
}

.btn-primary-inverse:hover {
    color: var(--bs-primary-inverse) !important;
    border: 1px solid !important;
    border: none !important;
    background-color: var(--bs-purple-700) !important;
}

.btn-blue-info {
    color: var(--bs-primary-inverse) !important;
    border: 1px solid !important;
    border: none !important;
    background-color: var(--bs-info-400) !important;
}

.btn-blue-info:hover {
    color: var(--bs-primary-inverse) !important;
    border: 1px solid !important;
    border: none !important;
    background-color: var(--bs-info-600) !important;
}

.btn-red-error {
    color: var(--bs-primary-inverse) !important;
    border: 1px solid !important;
    border: none !important;
    background-color: var(--bs-error-400) !important;
}

.btn-red-error:hover {
    color: var(--bs-primary-inverse) !important;
    border: 1px solid !important;
    border: none !important;
    background-color: var(--bs-error-600) !important;
}


.btn-success-green {
    color: var(--bs-primary-inverse) !important;
    border: 1px solid !important;
    border: none !important;
    background-color: var(--bs-success-400) !important;
}

.btn-success-green:hover {
    color: var(--bs-primary-inverse) !important;
    border: 1px solid !important;
    border: none !important;
    background-color: var(--bs-success-600) !important;
}

.btn-blue {
    color: var(--bs-primary-inverse) !important;
    border: 1px solid !important;
    border: none !important;
    background-color: var(--bs-blue-600) !important;
}

.btn-blue:hover {
    color: var(--bs-primary-inverse) !important;
    border: 1px solid !important;
    border: none !important;
    background-color: var(--bs-blue-700) !important;
}

.btn-outline-blue {
    color: var(--bs-blue-600) !important;
    border: 1px solid !important;
    border-color: var(--bs-blue-600) !important;
    background-color: transparent !important;
}

.btn-outline-blue:hover {
    color: var(--bs-primary-inverse) !important;
    border: 1px solid !important;
    border-color: var(--bs-blue-600) !important;
    background-color: var(--bs-blue-600) !important;
}

.btn-outline-light-primary {
    color: var(--bs-purple-600) !important;
    border: 1px solid !important;
    border-color: var(--bs-purple-600) !important;
    background-color: var(--bs-purple-50) !important;
}

.btn-outline-light-blue {
    color: var(--bs-blue-600) !important;
    border: 2px solid !important;
    border-color: var(--bs-blue-600) !important;
    background-color: var(--bs-blue-50) !important;
}

.btn-outline-light-blue:hover {
    color: #FFFFFF !important;
    border: 2px solid !important;
    border-color: var(--bs-blue-600) !important;
    background-color: var(--bs-blue-600) !important;
}

.btn.btn-danger {
    color: var(--bs-primary-inverse) !important;
    border-color: var(--bs-error-500) !important;
    background-color: var(--bs-error-500) !important;
}

.btn.btn-danger:hover {
    color: var(--bs-primary-inverse) !important;
    border-color: var(--bs-error-600) !important;
    background-color: var(--bs-error-600) !important;
}

.form-control:focus {
    border: 1px solid var(--bs-purple-600) !important;
    transition: ease-in-out 0.2s;
}

.link-primary:focus, .link-primary:hover {
    color: var(--bs-purple-700) !important;
}
.menu-state-bg .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here),
.menu-state-bg .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    transition: color .2s ease;
    background-color: var(--bs-primary-light);
    color: var(--bs-primary)
}
.menu-state-color .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here),
.menu-state-color .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    transition: color .2s ease;
    color: var(--bs-primary)
}

.form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.accordion-flush .accordion-item {
    border-bottom: 1px solid var(--bs-neutral-50) !important;
}

.accordion-flush .accordion-item:last-child {
    border-bottom: 0 !important; 
}

.accordion-flush .accordion-button:not(.collapsed) {
    box-shadow: none !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--bs-neutral-50) !important; 
}

.accordion-flush .accordion-button {
    background-color: transparent !important;
    box-shadow: none !important;
}

.swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: var(--bs-purple-600) !important;
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title {
    color: var(--bs-neutral-300);
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon .svg-icon,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
    color: var(--bs-neutral-300);
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here),
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    transition: color .2s ease;
    color: var(--bs-purple-600)
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-title,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title {
    color: var(--bs-purple-600)
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon i,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i {
    color: var(--bs-purple-600)
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-bullet .bullet,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-bullet .bullet {
    background-color: var(--bs-purple-600)
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted {
    background-color: var(--bs-purple-50);
    color: var(--bs-purple-600);
    transition: color .2s ease;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected {
    background-color: var(--bs-purple-50);
    color: var(--bs-purple-600);
    transition: color .2s ease;
    position: relative;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected:after {
    top: 50%;
    display: block;
    position: absolute;
    transform: translateY(-50%);
    height: .75rem;
    width: .75rem;
    content: "";
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    background-color: var(--bs-purple-600);
    -webkit-mask-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3e%3cpath fill='var%28--bs-component-hover-color%29' d='M4.89557 6.49823L2.79487 4.26513C2.26967 3.70683 1.38251 3.70683 0.857309 4.26513C0.375593 4.77721 0.375593 5.57574 0.857309 6.08781L4.74989 10.2257C5.14476 10.6455 5.81176 10.6455 6.20663 10.2257L13.1427 2.85252C13.6244 2.34044 13.6244 1.54191 13.1427 1.02984C12.6175 0.471537 11.7303 0.471536 11.2051 1.02984L6.06096 6.49823C5.74506 6.83403 5.21146 6.83403 4.89557 6.49823Z'/%3e%3c/svg%3e);
    mask-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3e%3cpath fill='var%28--bs-component-hover-color%29' d='M4.89557 6.49823L2.79487 4.26513C2.26967 3.70683 1.38251 3.70683 0.857309 4.26513C0.375593 4.77721 0.375593 5.57574 0.857309 6.08781L4.74989 10.2257C5.14476 10.6455 5.81176 10.6455 6.20663 10.2257L13.1427 2.85252C13.6244 2.34044 13.6244 1.54191 13.1427 1.02984C12.6175 0.471537 11.7303 0.471536 11.2051 1.02984L6.06096 6.49823C5.74506 6.83403 5.21146 6.83403 4.89557 6.49823Z'/%3e%3c/svg%3e);
    mask-position: center;
    -webkit-mask-position: center;
    right: 1.25rem;
}

.toast {
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 400;
    width: auto;
    min-width: 300px;
    max-width: 100%;
}

.toast.toast-success {
    border: 1px solid var(--bs-success-500) !important;
    background-color: var(--bs-success-50) !important;
}

.toast.toast-error {
    border: 1px solid var(--bs-error-500) !important;
    background-color: var(--bs-error-50) !important;
}

#kt_docs_toast_toggle {
    z-index: 10000 !important;
}

.toast-header {
    border-top-left-radius: 50px !important;
    border-top-right-radius: 50px !important;
    border-bottom-left-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    align-items: center;
    background-color: transparent !important;
    padding: 12px 20px;
}

.toast-body {
    display: none; 
    padding: 0 20px 12px 20px;
}


.toast-header .btn-close {
    margin-right: 0;
    margin-left: auto;
}

.badge-light-blue {
    background-color: var(--bs-blue-50) !important;
    color: var(--bs-blue-600) !important;
}

.badge-light-blue-border {
    background-color: var(--bs-blue-50) !important;
    border: 1px solid var(--bs-blue-600) !important;
    color: var(--bs-blue-600) !important;
}

.badge-outline-primary {
    background-color: var(--bs-primary-inverse) !important;
    border: 1px solid var(--bs-purple-600) !important;
    color: var(--bs-purple-600) !important;
}

.badge-outline-blue {
    background-color: var(--bs-primary-inverse) !important;
    border: 1px solid var(--bs-blue-600) !important;
    color: var(--bs-blue-600) !important;
}

.badge-light-success {
    background-color: var(--bs-success-50) !important;
    color: var(--bs-success-800) !important;
}

.badge-light-warning {
    background-color: var(--bs-warning-50) !important;
    color: var(--bs-warning-800) !important;
}

.badge-outline-primary-gray {
    background-color: var(--bs-primary-inverse) !important;
    font-size: 12px;
    color: var(--bs-purple-600);
    padding: 4px 10px;
    border: 1px solid var(--bs-purple-50);
}

.border-blue-50 {
    border: 1px solid var(--bs-blue-600) !important
}

/* Pagination Customization */
.page-item .page-link {
    border-radius: 50% !important;
    margin: 0 4px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray-700);
    background-color: transparent;
}

/* Number buttons border */
.page-item:not(.previous):not(.next) .page-link {
    border: 1px solid #EBEDF0 !important;
}

/* Prev/Next buttons border */
.page-item.previous .page-link,
.page-item.next .page-link {
    border: 1px solid #CFD1D4 !important;
}

.page-item.active .page-link {
    background-color: var(--bs-purple-500) !important;
    color: #ffffff !important;
    border-color: var(--bs-purple-500) !important;
}

.page-item.disabled .page-link {
    opacity: 0.6;
}

.page-item:not(.active) .page-link:hover,
.page-item.previous .page-link:hover,
.page-item.next .page-link:hover {
    background-color: var(--bs-purple-50) !important;
    color: var(--bs-purple-500) !important;
}

.page-item.active .page-link:hover {
    background-color: var(--bs-purple-700) !important;
    color: #ffffff !important;
    border-color: var(--bs-purple-700) !important;
}

table.dataTable thead tr>.dtfc-fixed-left, table.dataTable thead tr>.dtfc-fixed-right {
    background-color: var(--bs-purple-100);
}

/* Styling for Action Column Border - Target DataTables Fixed Columns */
table.dataTable tr th.dtfc-fixed-right,
table.dataTable tr td.dtfc-fixed-right,
table.dataTable thead tr > th.dtfc-fixed-right,
table.dataTable tbody tr > td.dtfc-fixed-right {
    border-left: 1px solid #0E0F0C1F !important;
}

/* Fix z-index for KTMenu dropdowns - Override Popper.js inline styles */
.menu.menu-sub.menu-sub-dropdown[style*="position: fixed"],
.menu-sub-dropdown[data-popper-placement],
div.menu.menu-sub-dropdown.show {
    z-index: 9999 !important;
}

/* CRITICAL: Reset z-index on tbody fixed columns to break stacking context.
   This allows dropdowns inside these cells to escape and layer properly. */
table.dataTable tbody tr > td.dtfc-fixed-left,
table.dataTable tbody tr > td.dtfc-fixed-right,
table.dataTable tbody tr > .dtfc-fixed-end,
table.dataTable tbody tr > .dtfc-fixed-start {
    z-index: auto !important;
    overflow: visible !important;
}

/* Allow dropdowns to escape scroll containers */
div.dt-scroll-body {
    overflow: visible !important;
    overflow-x: auto !important;
}

/* Ensure table rows don't clip content */
table.dataTable tbody tr {
    overflow: visible !important;
}

/* Ensure the action column itself allows overflow */
#kt_courses_table td:last-child,
#kt_courses_table .dtfc-fixed-right {
    overflow: visible !important;
}
/* Hide disabled swiper buttons */
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
    display: none !important;
}

/* GLOBAL DATATABLES SORT ICONS - COMPREHENSIVE OVERRIDE */

/* 1. Base Setup for Headers (Old .sorting and New .dt-orderable) */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > td.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > th.dt-orderable-asc,
table.dataTable thead > tr > th.dt-orderable-desc,
table.dataTable thead > tr > td.dt-orderable-asc,
table.dataTable thead > tr > td.dt-orderable-desc {
    padding-right: 25px !important;
    position: relative !important; /* Ensure parent is relative for absolute positioning */
    cursor: pointer;
    background-image: none !important; /* Remove Metronic legacy BG */
}

/* 2. Hide conflicting :before elements (Metronic often uses distinct before/after) */
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.dt-orderable-asc:before,
table.dataTable thead > tr > th.dt-orderable-desc:before,
table.dataTable thead > tr > th.dt-ordering-asc:before,
table.dataTable thead > tr > th.dt-ordering-desc:before {
    display: none !important;
}

/* 3. Define the Icon Container (User :after) */
table.dataTable thead > tr > th.sorting::after,
table.dataTable thead > tr > th.sorting_asc::after,
table.dataTable thead > tr > th.sorting_desc::after,
table.dataTable thead > tr > td.sorting::after,
table.dataTable thead > tr > td.sorting_asc::after,
table.dataTable thead > tr > td.sorting_desc::after,
table.dataTable thead > tr > th.dt-orderable-asc::after,
table.dataTable thead > tr > th.dt-orderable-desc::after,
table.dataTable thead > tr > th.dt-ordering-asc::after,
table.dataTable thead > tr > th.dt-ordering-desc::after {
    content: "" !important;
    position: absolute !important; /* FORCE absolute positioning */
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    width: 14px !important;
    height: 14px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    display: block !important; /* Force display for unsorted columns */
    
    /* Reset Metronic Mask Styles */
    mask-image: none !important;
    -webkit-mask-image: none !important;
    background-color: transparent !important;
    margin: 0 !important; /* Reset any margins */
    left: auto !important; /* Prevent left positioning interference */
    bottom: auto !important;
}

/* 4. Default / Unsorted State: Both Arrows (Gray) */
table.dataTable thead > tr > th.sorting::after,
table.dataTable thead > tr > td.sorting::after,
table.dataTable thead > tr > th.dt-orderable-asc::after, /* New DT Unsorted Class */
table.dataTable thead > tr > th.dt-orderable-desc::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23999' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z'/%3E%3C/svg%3E") !important;
    opacity: 0.4 !important;
}

/* 5. Active Ascending: Up Arrow Dark, Down Arrow Gray */
table.dataTable thead > tr > th.sorting_asc::after,
table.dataTable thead > tr > td.sorting_asc::after,
table.dataTable thead > tr > th.dt-ordering-asc::after {
    /* Multi-path SVG: Top arrow #333 (Dark), Bottom arrow #ccc (Light) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23333' d='M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z'/%3E%3Cpath fill='%23cccccc' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z'/%3E%3C/svg%3E") !important;
    opacity: 1 !important;
}

/* 6. Active Descending: Up Arrow Gray, Down Arrow Dark */
table.dataTable thead > tr > th.sorting_desc::after,
table.dataTable thead > tr > td.sorting_desc::after,
table.dataTable thead > tr > th.dt-ordering-desc::after {
    /* Multi-path SVG: Top arrow #ccc (Light), Bottom arrow #333 (Dark) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23cccccc' d='M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z'/%3E%3Cpath fill='%23333' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z'/%3E%3C/svg%3E") !important;
    opacity: 1 !important;
}