/* assets/css/dark-theme.css */
body {
    background-color: #121212;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    background-image: url(../images/body-bg.jpg);
    background-size: cover;
    background-attachment: fixed;
}

a {
    transition: all .5s !important;
}

a {
    color: #00ff00;
}

a:hover {
    color: #eaab65;
    transition: all .2s !important;
}

.cursor-pointer {
    cursor: pointer;
}

.back-to-top {
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    line-height: 0px;
    text-align: center;
    font-size: 15px;
    color: black !important;
    position: fixed;
    border-radius: 10px;
    bottom: 20px;
    right: 12px;
    background-color: lime !important;
    z-index: 1000;
    opacity: 0.7;
    transform: scale(1);
    transition: all 0.5s ease-in-out;
}

.back-to-top:hover {
    opacity: 1;
    transform: scale(1.2);
    transition: all 0.1s ease-in-out;
}

.pace .pace-progress {
    background: #00ff00 !important;
    height: 3px !important;
}

.bg-dark {
    background-color: #212529;
}

/* Sidebar Wrapper */
.sidebar-wrapper {
    width: 250px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    /* background: #000; */
    border-right: 1px solid #495057;
    z-index: 1000;
    transition: all 0.3s;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    border-bottom: 1px solid #495057;
    width: 250px;
    /* Fixed width to prevent collapsing issues */
    transition: all 0.3s;
}

.logo-text {
    font-size: 20px;
    margin-left: 10px;
    margin-bottom: 0;
    color: #fff;
}

/* MetisMenu Styles */
.metismenu {
    padding: 0;
    margin: 0;
    list-style: none;
    /* background: #000; */
}

.metismenu li {
    display: block;
    width: 100%;
}

.metismenu a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s;
    border-left: 3px solid transparent;
}

.metismenu a.has-arrow .parent-icon {
    border: 2px solid #916f4d !important;
    min-width: 35px;
}

.metismenu a.has-arrow[aria-expanded="true"] .parent-icon {
    border-color: #00ff00 !important;
    color: #0d6efd;
}

.metismenu a.has-arrow[aria-expanded="false"] .parent-icon {
    background-color: transparent;
}


.metismenu a:hover,
.metismenu a.active,
.metismenu a[aria-expanded="true"] {
    color: #fff;
    background: #1e1e1e;
    border-left-color: #0d6efd;
}

/* Prevent FOUC: Hide submenus by default */
.metismenu ul:not(.mm-show):not(.mm-collapsing) {
    display: none;
}

.parent-icon {
    margin-right: 10px;
    text-align: center;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-title {
    font-size: 15px;
    text-transform: uppercase;
}

.menu-label {
    padding: 10px 20px;
    color: #6c757d;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}

/* Content Wrapper */
#page-content-wrapper {
    margin-left: 250px;
    width: calc(100% - 250px);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 
   DESKTOP TOGGLED STATE 
   (Collapsed to icons, expands on hover)
   Only apply on large screens
*/
@media (min-width: 1200px) {
    body.toggled:not(.sidebar-hovered) .sidebar-wrapper {
        width: 70px;
    }

    body.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
        width: 70px;
        padding: 0;
        justify-content: center;
    }

    body.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .logo-text,
    body.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .toggle-icon,
    body.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header #xjmExchangeRate {
        display: none;
    }

    body.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .menu-title,
    body.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .menu-label,
    body.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .has-arrow::after {
        display: none;
    }

    body.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a {
        justify-content: center;
        padding: 10px;
    }

    body.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a .parent-icon {
        margin-right: 0;
    }

    body.toggled:not(.sidebar-hovered) #page-content-wrapper {
        margin-left: 70px;
        width: calc(100% - 70px);
    }

    /* Hover State when Toggled (Expands back to normal) */
    body.toggled.sidebar-hovered .sidebar-wrapper {
        width: 250px;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    }
}

/* Cards & Tables */
.card {
    background-color: #1e1e1e;
    border: 1px solid #333;
    color: #fff;
}

.form-control {
    background-color: #2c2c2c;
    border: 1px solid #444;
    color: #fff;
}

.form-control:focus {
    background-color: #2c0b0e;
    border-color: #666;
    color: #fff;
    box-shadow: none;
}

.table {
    color: #fff;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .05);
}

.table-hover tbody tr:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
}

a {
    text-decoration: none;
}

.card {
    margin-bottom: 1.5rem;
    border: 1px solid #aaaaaa;
}

.card-body {
    flex: 1 1 auto;
    padding: 1rem;
}

.xjmBoxes {
    transition: all 0.5s ease-in-out;
}

.xjmBoxes:hover {
    transform: scale(1.1);
    transition: all 0.1s ease-in-out;
}

.card {
    background-color: rgb(0 0 0 / 30%);
}

.page-content {
    /* min-height: 100vh; */
    flex: 1;
    /* This makes it fill all available remaining space */
}

.xjm-text-shadow-220 {
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
}

.btn-dark {
    color: white;
    margin: 10px 0;
    font-size: 1em;
    min-width: 225px;
    max-width: 500px;
    border-color: white;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
}

.btn:hover {
    border: 1px solid lime;
    box-shadow: 0 0 10px 5px lime;
    transition: all 0.2s ease-in-out;
}

/* Disable the global .btn:hover effect ONLY inside this group */
.xjmButtonGroup .btn:hover,
.xjmButtonGroup .btn:focus,
.xjmButtonGroup .btn:active {
    /* border-color: transparent !important; */
    border-color: #ffffff !important;
    box-shadow: none !important;
}

.xjmButtonGroup .btn {
    transition: transform 140ms cubic-bezier(.2, .8, .2, 1);
    transform-origin: center;
}

.navbar {
    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.7);
}

.nav-link {
    color: #fff !important;
}

.nav-link:focus,
.nav-link:hover {
    color: #00ff00 !important;
}

.xjmCloseButton {
    transform: scale(1);
    transition: all 0.5s ease-in-out;
}

.xjmCloseButton:hover {
    transform: scale(1.2);
    transition: all 0.2s ease-in-out;
}

/* Apply Primary Color to Key Elements */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

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

.bg-primary {
    background-color: var(--bs-primary);
}

.bg-purple {
    background-color: #923eb9 !important;
}

.bg-yellow {
    background-color: #ffff00 !important;
}

.bg-orange {
    background-color: #bd6014 !important;
}

.bg-gray {
    background-color: #707070 !important;
}

.bg-green-dk {
    background-color: #0c4802 !important;
}

.bg-maroon {
    background-color: #800000 !important;
}

.bg-darkred {
    background-color: #8b0000 !important;
}

.bg-lime {
    background-color: #00ff00 !important;
}

.bg-blue {
    background-color: #0000ff !important;
}

.bg-md-blue {
    background-color: #1c47aa !important;
}

.xjmBlink01s {
    animation: blinking-01s .1s infinite;
}

@keyframes blinking-01s {
    50% {
        opacity: 0.9;
    }
}

.xjmBlink02s {
    animation: blinking-02s .2s infinite;
}

@keyframes blinking-02s {
    50% {
        opacity: 0.3;
    }
}

.xjmBlink05s {
    animation: blinking-05s .5s infinite;
}

@keyframes blinking-05s {
    50% {
        opacity: 0.3;
    }
}

.xjmBlink1s {
    animation: blinking-1s 1s infinite;
}

@keyframes blinking-1s {
    50% {
        opacity: 0.5;
    }
}

.xjmBlink2s {
    animation: blinking-2s 2s infinite;
}

@keyframes blinking-2s {
    50% {
        opacity: 0.5;
    }
}

.xjmBlink3s {
    animation: blinking-3s 3s infinite;
}

@keyframes blinking-3s {
    50% {
        opacity: 0.5;
    }
}

#xjmLoginButton {
    background-color: #135298;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
    text-shadow: 0em 0.1em 0.1em rgba(0, 0, 0, 0.4);
    padding-bottom: 3px;
    transition: all .5s ease !important;
}

#xjmLoginButton:hover {
    background-color: #E06648;
    box-shadow: none !important;
    transition: all .2s ease !important;
}

.apexcharts-tooltip-marker {
    border: 1px solid white !important;
}

.xjmFormControl {
    border: 0px solid white;
    /* border: none; */
    background-color: #212529;
    color: white;
}

.border-lime {
    border-color: #00ff00 !important;
}

/* Mobile Responsiveness */
@media (max-width: 1199px) {
    .sidebar-wrapper {
        left: -250px;
    }

    #page-content-wrapper {
        margin-left: 0;
        width: 100%;
    }

    /* Mobile Toggled State (Show Sidebar) */
    body.toggled .sidebar-wrapper {
        left: 0;
        width: 250px;
        /* Ensure full width */
    }

    body.toggled #page-content-wrapper {
        margin-left: 0;
        width: 100%;
    }

    /* Overlay effect for mobile */
    body.toggled #page-content-wrapper::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
}

/* Navbar Sticky Behavior */
.navbar {
    background-color: #1e1e1e;
    border-bottom: 1px solid #333;
    position: sticky;
    top: 0;
    z-index: 999;
    transition: transform 0.3s ease-in-out;
}

.navbar-hidden {
    transform: translateY(-100%);
}

/* Form elements */
/* .form-select {
    border: 1px solid white;
    color: white;
} */
.input-group-text,
.form-control,
.form-select {
    border: 1px solid white;
    color: white;
}

/* xjmBeat Animation */
.xjmBeat:hover {
    animation-name: fa-beat;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 1s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, ease-in-out);
}

@keyframes fa-beat {

    0%,
    90% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.25);
    }
}

/* Ported from original ERP dark-theme-xjm.css */

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.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:before,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_desc_disabled:before,
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>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled: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>td.sorting_asc_disabled:after,
table.dataTable thead>tr>td.sorting_desc_disabled:after {
    color: lime !important;
}

table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:after,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting:after,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_asc:after,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_asc_disabled:after,
table.dataTable thead>tr>td.sorting_desc_disabled:before,
table.dataTable thead>tr>td.sorting_desc_disabled:after {
    position: absolute;
    display: block;
    opacity: .3;
    right: 10px;
    line-height: 12px !important;
    font-size: .8em;
}


table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_desc:after {
    opacity: 1;
    color: lime !important;
}

tbody,
td,
tfoot,
th,
thead,
tr {
    color: #fff !important;
}

table {
    --bs-table-bg: rgb(0 0 0 / 30%);
    background-color: rgb(0 0 0 / 30%);
}

table.dataTable {
    clear: both;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    max-width: none !important;
    border-collapse: separate !important;
    border-spacing: 0;
    --bs-table-bg: rgb(0 0 0 / 20%);
    background-color: rgb(0 0 0 / 20%);
}

table.xjmTableBG {
    --bs-table-bg: rgb(0 0 0 / 0%);
    background-color: rgb(0 0 0 / 0%);
}

table tbody tr.odd {
    background-color: rgb(255 255 255 / 10%);
}

table tbody tr.even {
    background-color: rgb(255 255 255 / 10%);
}

table tbody td {
    border-bottom: 1px solid rgb(255 255 255 / 25%);
    border-bottom-width: 1px !important;
}

table thead tr th {
    border-bottom: 1px solid lime !important;
    background: rgba(255, 255, 255, 0.2) !important;
    text-align: center !important;
}

table tfoot tr th {
    border-top: 1px solid lime !important;
    background: rgba(255, 255, 255, 0.01) !important;
    text-align: center !important;
}

table tfoot tr {
    border-top: 2px solid lime !important;
    background: rgba(255, 255, 255, 0.2) !important;
    text-align: center !important;
}

.btn-outline-secondary {
    color: white;
}

table.dataTable>thead .sorting_asc:before,
table.dataTable>thead .sorting_desc:after {
    color: lime;
}

div.dt-container div.dt-search,
div.dt-container div.dt-length label {
    display: flex !important;
    align-items: center !important;
}

div.dt-container div.dt-search label {
    display: none;
}

div.dt-container div.dt-search input {
    padding: 5px 1rem 5px .5rem !important;
    min-width: 250px !important;
    margin-left: 0 !important;
}

div.dt-container div.dt-length select {
    margin: 0 5px;
}

div.dt-container div.dt-paging .page-link {
    font-size: 14px !important;
}

@media screen and (max-width: 767px) {
    div.dt-container div.dt-paging .page-link {
        font-size: 12px !important;
    }
}

div.dt-container .dt-column-order {
    color: lime !important;
}

div.dt-container .dt-column-order:before,
div.dt-container .dt-column-order:after {
    line-height: 0.8em !important;
    font-size: 1em !important;
}

table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    opacity: 1 !important;
}

table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    opacity: .3;
}

/* FOR PLANILLA DATATABLE */
td.xjmLimeHover {
    cursor: pointer;
}

td.xjmLimeHover:hover {
    box-shadow: inset 0px 0px 0px 2px lime !important;
}

.dt-layout-start,
.dt-layout-end,
.dt-layout-table,
.dt-layout-full {
    padding: 0 !important;
}

#xjmStatus.form-switch .form-check-input:checked,
.xjmStatus.form-switch .form-check-input:checked {
    background-position: left center !important;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

#xjmStatus.form-switch .form-check-input,
.xjmStatus.form-switch .form-check-input {
    background-position: right center !important;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

#xjmStatus.form-switch .form-check-input:not(:checked):not(:focus),
.xjmStatus.form-switch .form-check-input:not(:checked):not(:focus) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* Pace.js Custom Styles */
.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: opacity 0.2s ease-out;
}

.pace-inactive {
    opacity: 0;
}

.pace .pace-progress {
    background: #00ff00 !important;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 3px !important;
}

.pace .pace-progress-inner {
    display: block;
    position: absolute;
    right: 0;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px #00ff00, 0 0 5px #00ff00;
    opacity: 1;
    transform: rotate(3deg) translate(0, -4px);
}

.pace .pace-activity {
    display: block;
    position: fixed;
    z-index: 2000;
    top: 50%;
    right: 50%;
    width: 50px;
    height: 50px;
    border: solid 5px transparent;
    border-top-color: #00ff00;
    border-left-color: #00ff00;
    border-radius: 50%;
    animation: pace-spinner 400ms linear infinite;
}

@keyframes pace-spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

body.pace-running::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1999;
    /* Place it behind the pace bar but in front of content */
}

.lobibox-notify.lobibox-notify-success {
    background-color: #008000 !important;
    border: 1px solid #fff !important;
    -webkit-box-shadow: 0px 0px 10px #000 !important;
    box-shadow: 0px 0px 10px #000 !important;
}

.lobibox-notify.lobibox-notify-info {
    background-color: #094aa9 !important;
    border: 1px solid #fff !important;
    -webkit-box-shadow: 0px 0px 10px #000 !important;
    box-shadow: 0px 0px 10px #000 !important;
}

.lobibox-notify.lobibox-notify-warning {
    background-color: #9b5810 !important;
    border: 1px solid #fff !important;
    -webkit-box-shadow: 0px 0px 10px #000 !important;
    box-shadow: 0px 0px 10px #000 !important;
}

.lobibox-notify.lobibox-notify-error {
    background-color: #CA2121 !important;
    border: 1px solid #fff !important;
    -webkit-box-shadow: 0px 0px 10px #000 !important;
    box-shadow: 0px 0px 10px #000 !important;
}

.xjmAlertBox1 {
    text-align: center;
    border-radius: .375rem;
    padding: 10px;
    margin: 1.3em 0 0;
    border: 1px solid white;
    background: #f00000;
    font-weight: bold;
    color: white;
}

.border-aaa {
    border-color: #aaa !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--bs-primary);
}

.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* --- XJM THEMES (Generated) --- */

[data-theme="blue"] {
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13, 110, 253;
}

[data-theme="red"] {
    --bs-primary: #dc3545;
    --bs-primary-rgb: 220, 53, 69;
}

[data-theme="green"] {
    --bs-primary: #198754;
    --bs-primary-rgb: 25, 135, 84;
}

[data-theme="purple"] {
    --bs-primary: #6f42c1;
    --bs-primary-rgb: 111, 66, 193;
}

[data-theme="brown"] {
    --bs-primary: #795548;
    --bs-primary-rgb: 121, 85, 72;
}

[data-theme="dark"] {
    --bs-primary: #adb5bd;
    --bs-primary-rgb: 173, 181, 189;
}

/* xjmBG1 (Red) */
[data-xjmbg=xjmBG1] .modal-content {
    background-color: #140000;
}

[data-xjmbg=xjmBG1] .sidebar-wrapper .metismenu .mm-active>a .parent-icon,
[data-xjmbg=xjmBG1] .sidebar-wrapper .metismenu a:hover .parent-icon,
[data-xjmbg=xjmBG1] .sidebar-wrapper .metismenu a:active .parent-icon {
    color: #ffffff;
    background: #7c1415;
    border-color: #7c1415;
    transition: ease-out .3s;
}

[data-xjmbg=xjmBG1] .sidebar-wrapper .sidebar-nav,
[data-xjmbg=xjmBG1] .sidebar-wrapper .sidebar-header,
[data-xjmbg=xjmBG1] .sidebar-wrapper .sidebar-bottom,
[data-xjmbg=xjmBG1] .sidebar-wrapper,
[data-xjmbg=xjmBG1] .navbar,
[data-xjmbg=xjmBG1] #xjmFooter.page-footer {
    background: #140000;
}

[data-xjmbg=xjmBG1] .sidebar-wrapper .metismenu .mm-active>a .parent-icon,
[data-xjmbg=xjmBG1] .sidebar-wrapper .metismenu a:hover .parent-icon,
[data-xjmbg=xjmBG1] .sidebar-wrapper .metismenu a.active .parent-icon {
    background-color: #7c1415;
    border-color: #7c1415;
}

[data-xjmbg=xjmBG1] .sidebar-wrapper .metismenu .mm-active>a,
[data-xjmbg=xjmBG1] .sidebar-wrapper .metismenu a:hover {
    color: #fd576d;
}

[data-xjmbg=xjmBG1] .page-content {
    background-size: 200% 200%;
    background-image: linear-gradient(-45deg, #140000 0%, #140000 25%, rgba(68, 2, 2, 0.502) 50%, #140000 75%, #140000 100%);
    -webkit-animation: AnimateBG 20s ease infinite;
    animation: AnimateBG 20s ease infinite;
}

/* xjmBG2 (Blue) */
[data-xjmbg=xjmBG2] .modal-content {
    background-color: #031633;
}

[data-xjmbg=xjmBG2] .sidebar-wrapper .metismenu .mm-active>a .parent-icon,
[data-xjmbg=xjmBG2] .sidebar-wrapper .metismenu a:hover .parent-icon,
[data-xjmbg=xjmBG2] .sidebar-wrapper .metismenu a:active .parent-icon {
    color: #ffffff;
    text-decoration: none;
    background: #0d6efd;
    border-color: #0d6efd;
    transition: ease-out .3s;
}

[data-xjmbg=xjmBG2] .sidebar-wrapper .sidebar-nav,
[data-xjmbg=xjmBG2] .sidebar-wrapper .sidebar-header,
[data-xjmbg=xjmBG2] .sidebar-wrapper .sidebar-bottom,
[data-xjmbg=xjmBG2] .sidebar-wrapper,
[data-xjmbg=xjmBG2] .navbar,
[data-xjmbg=xjmBG2] #xjmFooter.page-footer {
    background: #000914;
}

[data-xjmbg=xjmBG2] .sidebar-wrapper .metismenu .mm-active>a .parent-icon,
[data-xjmbg=xjmBG2] .sidebar-wrapper .metismenu a:hover .parent-icon,
[data-xjmbg=xjmBG2] .sidebar-wrapper .metismenu a.active .parent-icon {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

[data-xjmbg=xjmBG2] .sidebar-wrapper .metismenu .mm-active>a,
[data-xjmbg=xjmBG2] .sidebar-wrapper .metismenu a:hover {
    color: #80c9ff;
}

[data-xjmbg=xjmBG2] .page-content {
    background-size: 200% 200%;
    background-image: linear-gradient(-45deg, #000914 0%, #000914 25%, rgba(2, 40, 68, 0.502) 50%, #000914 75%, #000914 100%);
    -webkit-animation: AnimateBG 20s ease infinite;
    animation: AnimateBG 20s ease infinite;
}

/* xjmBG3 (Green) */
[data-xjmbg=xjmBG3] .modal-content {
    background-color: #001400;
}

[data-xjmbg=xjmBG3] .sidebar-wrapper .metismenu .mm-active>a .parent-icon,
[data-xjmbg=xjmBG3] .sidebar-wrapper .metismenu a:hover .parent-icon,
[data-xjmbg=xjmBG3] .sidebar-wrapper .metismenu a:active .parent-icon {
    color: #ffffff;
    background: #198754;
    border-color: #198754;
    transition: ease-out .3s;
}

[data-xjmbg=xjmBG3] .sidebar-wrapper .sidebar-nav,
[data-xjmbg=xjmBG3] .sidebar-wrapper .sidebar-header,
[data-xjmbg=xjmBG3] .sidebar-wrapper .sidebar-bottom,
[data-xjmbg=xjmBG3] .sidebar-wrapper,
[data-xjmbg=xjmBG3] .navbar,
[data-xjmbg=xjmBG3] #xjmFooter.page-footer {
    background: #001400;
}

[data-xjmbg=xjmBG3] .sidebar-wrapper .metismenu .mm-active>a .parent-icon,
[data-xjmbg=xjmBG3] .sidebar-wrapper .metismenu a:hover .parent-icon,
[data-xjmbg=xjmBG3] .sidebar-wrapper .metismenu a.active .parent-icon {
    background-color: #198754;
    border-color: #198754;
}

[data-xjmbg=xjmBG3] .sidebar-wrapper .metismenu .mm-active>a,
[data-xjmbg=xjmBG3] .sidebar-wrapper .metismenu a:hover {
    color: #a3cfbb;
}

[data-xjmbg=xjmBG3] .page-content {
    background-size: 200% 200%;
    background-image: linear-gradient(-45deg, #001400 0%, #001400 25%, rgba(7, 68, 2, 0.502) 50%, #001400 75%, #001400 100%);
    -webkit-animation: AnimateBG 20s ease infinite;
    animation: AnimateBG 20s ease infinite;
}

/* xjmBG4 (Brown) */
[data-xjmbg=xjmBG4] .modal-content {
    background-color: #141000;
}

[data-xjmbg=xjmBG4] .sidebar-wrapper .metismenu .mm-active>a .parent-icon,
[data-xjmbg=xjmBG4] .sidebar-wrapper .metismenu a:hover .parent-icon,
[data-xjmbg=xjmBG4] .sidebar-wrapper .metismenu a:active .parent-icon {
    color: #ffffff;
    background: #876019;
    border-color: #876019;
    transition: ease-out .3s;
}

[data-xjmbg=xjmBG4] .sidebar-wrapper .sidebar-nav,
[data-xjmbg=xjmBG4] .sidebar-wrapper .sidebar-header,
[data-xjmbg=xjmBG4] .sidebar-wrapper .sidebar-bottom,
[data-xjmbg=xjmBG4] .sidebar-wrapper,
[data-xjmbg=xjmBG4] .navbar,
[data-xjmbg=xjmBG4] #xjmFooter.page-footer {
    background: #141400;
}

[data-xjmbg=xjmBG4] .sidebar-wrapper .metismenu .mm-active>a .parent-icon,
[data-xjmbg=xjmBG4] .sidebar-wrapper .metismenu a:hover .parent-icon,
[data-xjmbg=xjmBG4] .sidebar-wrapper .metismenu a.active .parent-icon {
    background-color: #876019;
    border-color: #876019;
}

[data-xjmbg=xjmBG4] .sidebar-wrapper .metismenu .mm-active>a,
[data-xjmbg=xjmBG4] .sidebar-wrapper .metismenu a:hover {
    color: #cfcea3;
}

[data-xjmbg=xjmBG4] .page-content {
    background-size: 200% 200%;
    background-image: linear-gradient(-45deg, #141000 0%, #141000 25%, rgba(68, 56, 2, 0.502) 50%, #141000 75%, #141000 100%);
    -webkit-animation: AnimateBG 20s ease infinite;
    animation: AnimateBG 20s ease infinite;
}

/* xjmBG5 (Orange) */
[data-xjmbg=xjmBG5] .modal-content {
    background-color: #140800;
}

[data-xjmbg=xjmBG5] .sidebar-wrapper .metismenu .mm-active>a .parent-icon,
[data-xjmbg=xjmBG5] .sidebar-wrapper .metismenu a:hover .parent-icon,
[data-xjmbg=xjmBG5] .sidebar-wrapper .metismenu a:active .parent-icon {
    color: #ffffff;
    background: #874e19;
    border-color: #874e19;
    transition: ease-out .3s;
}

[data-xjmbg=xjmBG5] .sidebar-wrapper .sidebar-nav,
[data-xjmbg=xjmBG5] .sidebar-wrapper .sidebar-header,
[data-xjmbg=xjmBG5] .sidebar-wrapper .sidebar-bottom,
[data-xjmbg=xjmBG5] .sidebar-wrapper,
[data-xjmbg=xjmBG5] .navbar,
[data-xjmbg=xjmBG5] #xjmFooter.page-footer {
    background: #140800;
}

[data-xjmbg=xjmBG5] .sidebar-wrapper .metismenu .mm-active>a .parent-icon,
[data-xjmbg=xjmBG5] .sidebar-wrapper .metismenu a:hover .parent-icon,
[data-xjmbg=xjmBG5] .sidebar-wrapper .metismenu a.active .parent-icon {
    background-color: #874e19;
    border-color: #874e19;
}

[data-xjmbg=xjmBG5] .sidebar-wrapper .metismenu .mm-active>a,
[data-xjmbg=xjmBG5] .sidebar-wrapper .metismenu a:hover {
    color: #a3cfbb;
}

[data-xjmbg=xjmBG5] .page-content {
    background-size: 200% 200%;
    background-image: linear-gradient(-45deg, #140800 0%, #140800 25%, rgba(68, 34, 2, 0.502) 50%, #140800 75%, #140800 100%);
    -webkit-animation: AnimateBG 20s ease infinite;
    animation: AnimateBG 20s ease infinite;
}

/* xjmBG6 (Purple) */
[data-xjmbg=xjmBG6] .modal-content {
    background-color: #140012;
}

[data-xjmbg=xjmBG6] .sidebar-wrapper .metismenu .mm-active>a .parent-icon,
[data-xjmbg=xjmBG6] .sidebar-wrapper .metismenu a:hover .parent-icon,
[data-xjmbg=xjmBG6] .sidebar-wrapper .metismenu a:active .parent-icon {
    color: #ffffff;
    background: #6d1987;
    border-color: #6d1987;
    transition: ease-out .3s;
}

[data-xjmbg=xjmBG6] .sidebar-wrapper .sidebar-nav,
[data-xjmbg=xjmBG6] .sidebar-wrapper .sidebar-header,
[data-xjmbg=xjmBG6] .sidebar-wrapper .sidebar-bottom,
[data-xjmbg=xjmBG6] .sidebar-wrapper,
[data-xjmbg=xjmBG6] .navbar,
[data-xjmbg=xjmBG6] #xjmFooter.page-footer {
    background: #140012;
}

[data-xjmbg=xjmBG6] .sidebar-wrapper .metismenu .mm-active>a .parent-icon,
[data-xjmbg=xjmBG6] .sidebar-wrapper .metismenu a:hover .parent-icon,
[data-xjmbg=xjmBG6] .sidebar-wrapper .metismenu a.active .parent-icon {
    background-color: #6d1987;
    border-color: #6d1987;
}

[data-xjmbg=xjmBG6] .sidebar-wrapper .metismenu .mm-active>a,
[data-xjmbg=xjmBG6] .sidebar-wrapper .metismenu a:hover {
    color: #cfa3c6;
}

[data-xjmbg=xjmBG6] .page-content {
    background-size: 200% 200%;
    background-image: linear-gradient(-45deg, #140012 0%, #140012 25%, rgba(66, 2, 68, 0.502) 50%, #140012 75%, #140012 100%);
    -webkit-animation: AnimateBG 20s ease infinite;
    animation: AnimateBG 20s ease infinite;
}

@-webkit-keyframes AnimateBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes AnimateBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* Mobile Header Menu Styling */
@media (max-width: 991.98px) {

    .mobile-header-menu.show,
    .mobile-header-menu.collapsing {
        background-color: #0c482c !important;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
        border-bottom-left-radius: var(--bs-border-radius) !important;
        border-bottom-right-radius: var(--bs-border-radius) !important;
        border: 1px solid white !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        padding: 0.5rem;
        margin-top: 0.5rem;
        overflow: hidden;
        /* Prevent content spill during animation */
    }

    .mobile-header-menu.show .navbar-nav,
    .mobile-header-menu.collapsing .navbar-nav {
        flex-direction: row !important;
        width: 100%;
        justify-content: space-around;
        margin-top: 0 !important;
        /* Override mt-2 */
    }

    .mobile-header-menu.show .nav-item,
    .mobile-header-menu.collapsing .nav-item {
        margin: 0 5px;
    }
}

/* Hide Quote of Day when sidebar is toggled */
body.toggled #quoteOfDay {
    display: none;
}

/* Show it again when hovered */
body.toggled.sidebar-hovered #quoteOfDay {
    display: block;
}