/* assets/css/dark-theme.css */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}
html:has(body.modal-open), html.modal-open {
    overflow-y: hidden !important;
}
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-image: url(../images/erp-bg-grayscale.jpg); */
    background-size: cover;
    background-attachment: fixed;
}

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

a {
    color: #00ff00;
}

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

a {
    text-decoration: none;
    color: #00ff00;
    transition: all .5s;
}
a:hover {
    /* text-decoration: underline; */
    color: #eaab65;
    transition: all .2s;
}
.xjmLevels a:hover {
    text-decoration: underline;
    color: #eaab65;
    transition: all .2s;
}

#studentsTable a, #registrationsTable a, #xjmTable a {
    color: #00ff00;
}

#studentsTable a:hover, #registrationsTable a:hover, #xjmTable a:hover {
    color: #eaab65;
}

.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: rgb(0 0 0 / 70%) !important;
    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 .xjmSubMenuItem li a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px;
    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.05);
    transition: all 0.1s ease-in-out;
}

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

.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 white;
    box-shadow: 0 0 10px 5px rgba(0, 255, 0, .9);
    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-md-purple {
    background-color: #74008b !important;
}

.bg-dk-purple {
    background-color: #34008b !important;
}

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

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

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

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

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

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

.bg-darkred {
    background-color: #4a0101 !important;
}

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

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

.bg-green {
    background-color: #008000 !important;
}

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

.bg-dk-purple {
	background-color: #440144;
}

.bg-teal {
    background-color: teal !important;
}

.bg-pink {
    background-color: pink !important;
}

.bg-gold {
    background-color: #db9c1d !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;
}
.apexcharts-menu {
    background: #ffffff !important;
    border: 1px solid #ccc !important;
}

.apexcharts-menu-item {
    color: #000000 !important;
}

.apexcharts-menu-item:hover {
    background: #f2f2f2 !important;
    color: #000000 !important;
}
.apexcharts-menu-item.exportSVG::before {
    content: "\f1c5"; /* fa-file-image */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
}

.apexcharts-menu-item.exportPNG::before {
    content: "\f1c5";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
}

.apexcharts-menu-item.exportCSV::before {
    content: "\f6dd"; /* fa-file-csv */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
}

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

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

.xjmDividerBlue {
    border-top-color: #0c71c3;
    border-top-style: dashed;
    border-top-width: 2px;
    margin: 20px 0;
}
.xjmDividerGreen {
    border-top-color: green;
    border-top-style: dashed;
    border-top-width: 2px;
	margin: 20px 0;
}
.xjmDividerLtGreen {
    border-top-color: #09e1c0;
    border-top-style: dashed;
    border-top-width: 2px;
	margin: 20px 0;
}
.xjmDividerRed {
    border-top-color: #800000;
    border-top-style: dashed;
    border-top-width: 2px;
	margin: 20px 0;
}
.xjmDividerPurple {
    border-top-color: purple;
    border-top-style: dashed;
    border-top-width: 2px;
	margin: 20px 0;
}
.xjmDividerGold {
    border-top-color: #db9c1d;
    border-top-style: dashed;
    border-top-width: 2px;
	margin: 20px 0;
}
.xjmDividerWhite {
    border-top-color: #ffffff;
    border-top-style: dashed;
    border-top-width: 2px;
	margin: 20px 0;
}

.module-purple1 {
    background-image: url(../level-images/coding-background-texture.jpg),linear-gradient(180deg,#26264a 0%,#57478c 100%)!important;
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-blend-mode: overlay;
    color: white;
}
.module-purple2 {
    background-image: url(../level-images/coding-background-texture.jpg),linear-gradient(180deg,#5b2a49 0%,#a54c76 100%)!important;
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-blend-mode: overlay;
    color: white;
}
.module-green {
    background-image: url(../level-images/coding-background-texture.jpg),linear-gradient(180deg,#163300 0%,#275b00 100%)!important;
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-blend-mode: overlay;
    color: white;
}
.module-maroon {
    background-image: url(../level-images/coding-background-texture.jpg),linear-gradient(180deg,#340101 0%,#600101 100%)!important;
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-blend-mode: overlay;
    color: white;
}
.module-teal {
    background-image: url(../level-images/coding-background-texture.jpg), linear-gradient(180deg, #063d50 0%, #07516a 100%) !important;
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-blend-mode: overlay;
    color: white;
}
.module-gold {
    background-image: url(../level-images/coding-background-texture.jpg),linear-gradient(180deg,#997409 0%,#c1930b 100%)!important;
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-blend-mode: overlay;
    color: white;
}
.border-light-1 {
    border-color: rgb(255 255 255 / 24%)!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;
    }
}

/* Fixed Navbar Behavior matching old BCE ERP static behavior */
#xjmNavbar {
    position: fixed;
    top: 0;
    left: 250px;
    right: 0;
    height: 65px;
    z-index: 999;
    transition: top 0.3s ease-in-out, left 0.3s ease-in-out;
    background-color: #1e1e1e;
    border-bottom: 1px solid #333;
}

body.toggled:not(.sidebar-hovered) #xjmNavbar {
    left: 70px;
}

@media (max-width: 1199px) {
    #xjmNavbar {
        left: 0 !important;
    }
}

/* Offset for fixed navbar inside content area */
#page-content-wrapper .page-content {
    margin-top: 65px;
}

.navbar-hidden {
    top: -65px !important;
}

/* 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;
}


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

td.xjmLimeHover:hover {
    box-shadow: inset 0px 0px 0px 2px lime !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, rgba(20, 0, 0, 0.1) 0%, rgba(20, 0, 0, 0.1) 25%, rgba(68, 2, 2, 0.1) 50%, rgba(20, 0, 0, 0.1) 75%, rgba(20, 0, 0, 0.1) 100%);
    -webkit-animation: AnimateBG 20s ease infinite;
    animation: AnimateBG 20s ease infinite; */ */
}
[data-xjmbg=xjmBG1] .xjmBoxes {
    background: linear-gradient(to top right, #e6cece 0%, #ffffff 50%, #ffffff 100%);
}
[data-xjmbg=xjmBG1] .sidebar-wrapper,
[data-xjmbg=xjmBG1] .navbar,
[data-xjmbg=xjmBG1] #xjmFooter {
    /* background: rgb(55 0 0 / 85%) !important; */
    background: radial-gradient(ellipse 180% 110% at top center, 
    rgba(168, 33, 33, 0.42) 0%, 
    rgba(145, 14, 14, 0.20) 28%, 
    rgba(133, 9, 9, 0.04) 55%, 
    rgba(0, 0, 0, 0) 75%), 
    linear-gradient(180deg, #831717 0%, #540808 45%, #370000 100%) !important;
}

/* 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: rgb(0, 9, 20);
}

[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, rgba(2, 5, 23, 0.1) 0%, rgba(2, 5, 23, 0.1) 25%, rgb(6 25 58 / 0.1) 50%, rgba(2, 5, 23, 0.1) 75%, rgba(2, 5, 23, 0.1) 100%);
    -webkit-animation: AnimateBG 20s ease infinite;
    animation: AnimateBG 20s ease infinite; */
}
[data-xjmbg=xjmBG2] .xjmBoxes {
    background: linear-gradient(to top right, #c3d0db 0%, #ffffff 50%, #ffffff 100%);
}
[data-xjmbg=xjmBG2] .sidebar-wrapper,
[data-xjmbg=xjmBG2] .navbar,
[data-xjmbg=xjmBG2] #xjmFooter {
    /* background: rgb(2 19 40 / 85%) !important; */
    background: 
    radial-gradient(ellipse 180% 110% at top center, rgba(85, 120, 255, 0.42) 0%, 
    rgba(50, 80, 200, 0.20) 28%, rgba(20, 35, 90, 0.04) 55%, rgba(0, 0, 0, 0) 75%), 
    linear-gradient(180deg, #14395f 0%, #0c3048 45%, #081a2f 100%) !important;
}

/* 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: rgb(0, 20, 0);
}

[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, rgba(0, 20, 0, 0.1) 0%, rgba(0, 20, 0, 0.1) 25%, rgba(7, 68, 2, 0.1) 50%, rgba(0, 20, 0, 0.1) 75%, rgba(0, 20, 0, 0.1) 100%);
    -webkit-animation: AnimateBG 20s ease infinite;
    animation: AnimateBG 20s ease infinite; */
}
[data-xjmbg=xjmBG3] .xjmBoxes {
    background: linear-gradient(to top right, #c7ddc7 0%, #ffffff 50%, #ffffff 100%);
}
[data-xjmbg=xjmBG3] .sidebar-wrapper,
[data-xjmbg=xjmBG3] .navbar,
[data-xjmbg=xjmBG3] #xjmFooter {
    /* background: rgb(2 44 2 / 85%) !important; */
    background: radial-gradient(ellipse 180% 110% at top center, 
    rgba(85, 255, 85, 0.42) 0%, 
    rgba(50, 200, 57, 0.2) 28%, 
    rgba(31, 124, 28, 0.04) 55%, 
    rgba(19, 94, 31, 0) 75%), 
    linear-gradient(180deg, #285f23 0%, #144717 45%, #022c02 100%) !important;
}

/* 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, rgba(20, 16, 0, 0.72) 0%, rgba(20, 16, 0, 0.72) 25%, rgba(68, 56, 2, 0.3) 50%, rgba(20, 16, 0, 0.72) 75%, rgba(20, 16, 0, 0.72) 100%);
    background-image: linear-gradient(-45deg, rgba(20, 16, 0, 0.1) 0%, rgba(20, 16, 0, 0.1) 25%, rgba(68, 56, 2, 0.1) 50%, rgba(20, 16, 0, 0.1) 75%, rgba(20, 16, 0, 0.1) 100%); */
    /* -webkit-animation: AnimateBG 20s ease infinite;
    animation: AnimateBG 20s ease infinite; */
}
[data-xjmbg=xjmBG4] .xjmBoxes {
    background: linear-gradient(to top right, #e7d9bc 0%, #ffffff 50%, #ffffff 100%);
}
[data-xjmbg=xjmBG4] .sidebar-wrapper, [data-xjmbg=xjmBG4] .navbar, [data-xjmbg=xjmBG4] #xjmFooter {
    background: rgb(42 30 0 / 85%) !important;
}
[data-xjmbg=xjmBG4] .sidebar-wrapper,
[data-xjmbg=xjmBG4] .navbar,
[data-xjmbg=xjmBG4] #xjmFooter {
    /* background: rgb(2 19 40 / 85%) !important; */
    background: 
    radial-gradient(ellipse 180% 110% at top center, 
    rgb(177 118 10 / 42%) 0%, 
    rgb(124 78 9 / 20%) 28%, 
    rgba(35, 20, 2, 0.04) 55%, rgba(0, 0, 0, 0) 75%), 
    linear-gradient(180deg, #3e2805 0%, #2a1e00 45%, #221a01 100%) !important;
}

/* 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: rgb(20, 8, 0);
}

[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, rgba(20, 8, 0, 0.72) 0%, rgba(20, 8, 0, 0.72) 25%, rgba(68, 34, 2, 0.3) 50%, rgba(20, 8, 0, 0.72) 75%, rgba(20, 8, 0, 0.72) 100%);
    -webkit-animation: AnimateBG 20s ease infinite;
    animation: AnimateBG 20s ease infinite; */
}
[data-xjmbg=xjmBG5] .xjmBoxes {
    background: linear-gradient(to top right, #f1d5bf 0%, #ffffff 50%, #ffffff 100%);
}
[data-xjmbg=xjmBG5] .sidebar-wrapper,
[data-xjmbg=xjmBG5] .navbar,
[data-xjmbg=xjmBG5] #xjmFooter {
    /* background: rgb(60 20 0 / 85%) !important; */
    background: 
    radial-gradient(ellipse 180% 110% at top center, rgba(135, 96, 25, 0.42) 0%, 
    rgba(80, 56, 20, 0.20) 28%, rgba(35, 20, 2, 0.04) 55%, rgba(0, 0, 0, 0) 75%), 
    linear-gradient(180deg, #794a03 0%, #5e2e01 45%, #3c2001 100%) !important;
}

/* 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, rgba(20, 0, 18, 0.72) 0%, rgba(20, 0, 18, 0.72) 25%, rgba(66, 2, 68, 0.3) 50%, rgba(20, 0, 18, 0.72) 75%, rgba(20, 0, 18, 0.72) 100%);
    -webkit-animation: AnimateBG 20s ease infinite;
    animation: AnimateBG 20s ease infinite; */
}
[data-xjmbg=xjmBG6] .xjmBoxes {
    background: linear-gradient(to top right, #ebd5ec 0%, #ffffff 50%, #ffffff 100%);
}
[data-xjmbg=xjmBG6] .sidebar-wrapper,
[data-xjmbg=xjmBG6] .navbar,
[data-xjmbg=xjmBG6] #xjmFooter {
    /* background: rgb(52 1 34 / 85%) !important; */
    background: 
    radial-gradient(ellipse 180% 110% at top center, rgba(122, 25, 135, 0.42) 0%, 
    rgba(80, 20, 80, 0.2) 28%, rgba(35, 2, 32, 0.04) 55%, rgba(0, 0, 0, 0) 75%), 
    linear-gradient(180deg, #6e0349 0%, #4e0234 45%, #340122 100%) !important;
}

@-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;
}

.xjmClientCardLink, .xjmClientCardLink a {
    color: rgba(0, 0, 0, .7);
}

.xjmClientCardLink:hover, .xjmClientCardLink a:hover {
    color: #880000 !important;
    transition: all .2s !important;
}

.xjmCard {
    /* background: linear-gradient(to top right, #c3d0db 0%, #ffffff 50%, #ffffff 100%); */
    color: #212529;
    border: 1px solid #aaaaaa;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    overflow: hidden !important;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1) !important;
}
.xjmCardBody {
    color: #212529;
    padding: 1rem;
    /* border: 1px solid #aaaaaa;
    border-radius: 0.375rem; */
}

/* =========================================================
   xjmBG1 = RED
========================================================= */
[data-xjmbg=xjmBG1] .xjmCard, [data-xjmbg=xjmBG1] .xjmCardBody {
    background: linear-gradient(to top right, #e6cece 0%, #ffffff 50%, #ffffff 100%);
}
/* [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: #240202;
} */
[data-xjmbg=xjmBG1] .sidebar-wrapper,
[data-xjmbg=xjmBG1] .navbar {
    background: #240202;
    background:
        radial-gradient(
            ellipse 180% 110% at top center,
            rgba(255, 120, 120, 0.40) 0%,
            rgba(180, 60, 60, 0.20) 28%,
            rgba(90, 20, 20, 0.04) 55%,
            rgba(0,0,0,0) 75%
        ),
        linear-gradient(
            180deg,
            #5f1414 0%,
            #482020 45%,
            #2f0808 100%
        );
}
/* [data-xjmbg=xjmBG1] #xjmFooter {
    background: #240202;
} */

/* =========================================================
   xjmBG2 = BLUE
========================================================= */
[data-xjmbg=xjmBG2] .xjmCard, [data-xjmbg=xjmBG2] .xjmCardBody {
    background: linear-gradient(to top right, #c3d0db 0%, #ffffff 50%, #ffffff 100%);
}
/* [data-xjmbg=xjmBG2] .sidebar-wrapper, [data-xjmbg=xjmBG2] .navbar {
    background: #081b30;
    background: radial-gradient(ellipse 180% 110% at top center, rgba(85, 120, 255, 0.42) 0%, rgba(50, 80, 200, 0.20) 28%, rgba(20, 35, 90, 0.04) 55%, rgba(0, 0, 0, 0) 75%), linear-gradient(180deg, #14395f 0%, #0c3048 45%, #081a2f 100%);
}
[data-xjmbg=xjmBG2] #xjmFooter {
    background: rgb(8, 27, 48);
} */

/* =========================================================
   xjmBG3 = GREEN
========================================================= */
[data-xjmbg=xjmBG3] .xjmCard {
    background: linear-gradient(to top right, #c7ddc7 0%, #ffffff 50%, #ffffff 100%);
}
[data-xjmbg=xjmBG3] .sidebar-wrapper,
[data-xjmbg=xjmBG3] .navbar {
    background: #102818;
    background:
        radial-gradient(
            ellipse 180% 110% at top center,
            rgba(120, 255, 170, 0.35) 0%,
            rgba(50, 170, 90, 0.18) 28%,
            rgba(20, 70, 35, 0.04) 55%,
            rgba(0,0,0,0) 75%
        ),
        linear-gradient(
            180deg,
            #145f38 0%,
            #10482c 45%,
            #081f16 100%
        );
}
[data-xjmbg=xjmBG3] #xjmFooter {
    background: #102818;
}

/* =========================================================
   xjmBG4 = BROWN
========================================================= */
[data-xjmbg=xjmBG4] .xjmCard {
    background: linear-gradient(to top right, #e7d9bc 0%, #ffffff 50%, #ffffff 100%);
}
[data-xjmbg=xjmBG4] .sidebar-wrapper,
[data-xjmbg=xjmBG4] .navbar {
    background: #2d2416;
    background:
        radial-gradient(
            ellipse 180% 110% at top center,
            rgba(255, 210, 120, 0.35) 0%,
            rgba(190, 140, 50, 0.18) 28%,
            rgba(90, 65, 20, 0.04) 55%,
            rgba(0,0,0,0) 75%
        ),
        linear-gradient(
            180deg,
            #6a5120 0%,
            #4d3918 45%,
            #24180a 100%
        );
}
[data-xjmbg=xjmBG4] #xjmFooter {
    background: #2d2416;
}

/* =========================================================
   xjmBG5 = ORANGE / PEACH
========================================================= */
[data-xjmbg=xjmBG5] .xjmCard {
    background: linear-gradient(to top right, #f1d5bf 0%, #ffffff 50%, #ffffff 100%);
}
[data-xjmbg=xjmBG5] .sidebar-wrapper,
[data-xjmbg=xjmBG5] .navbar {
    background: #2f1d10;
    background:
        radial-gradient(
            ellipse 180% 110% at top center,
            rgba(255, 180, 120, 0.38) 0%,
            rgba(210, 110, 50, 0.20) 28%,
            rgba(90, 45, 15, 0.04) 55%,
            rgba(0,0,0,0) 75%
        ),
        linear-gradient(
            180deg,
            #6a3418 0%,
            #4d2714 45%,
            #241208 100%
        );
}
[data-xjmbg=xjmBG5] #xjmFooter {
    background: #2f1d10;
}

/* =========================================================
   xjmBG6 = PURPLE
========================================================= */
[data-xjmbg=xjmBG6] .xjmCard {
    background: linear-gradient(to top right, #ebd5ec 0%, #ffffff 50%, #ffffff 100%);
}
[data-xjmbg=xjmBG6] .sidebar-wrapper,
[data-xjmbg=xjmBG6] .navbar {
    background: #241028;
    background:
        radial-gradient(
            ellipse 180% 110% at top center,
            rgba(220, 140, 255, 0.38) 0%,
            rgba(140, 70, 200, 0.20) 28%,
            rgba(60, 20, 90, 0.04) 55%,
            rgba(0,0,0,0) 75%
        ),
        linear-gradient(
            180deg,
            #4a1c68 0%,
            #35164d 45%,
            #180824 100%
        );
}
[data-xjmbg=xjmBG6] #xjmFooter {
    background: #241028;
}

/* LETTER SPACING CSS */
.ls-1 { letter-spacing: 0.5px; }
.ls-2 { letter-spacing: 1px; }
.ls-3 { letter-spacing: 1.5px; }
.ls-4 { letter-spacing: 2px; }

#xjmClientHero,
#xjmContainer {
    will-change: opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}
#xjmContainer {
    transition: opacity .25s ease, transform .25s ease;
}

#xjmClientActivityTabs .nav-link, #accountingTabs .nav-link {
    color: #212529 !important;
    padding: 0px;
    background-color: rgba(108, 117, 125, 0.1) !important;
}
#xjmClientActivityTabs .nav-link.active *, #accountingTabs .nav-link.active * {
    color: #ffffff !important;
}
#xjmClientActivityTabs .nav-link:focus,
#xjmClientActivityTabs .nav-link:hover,
#xjmClientActivityTabs .nav-pills .nav-link.active, 
#xjmClientActivityTabs .nav-pills .show>.nav-link, 
#accountingTabs .nav-link:hover,
#accountingTabs .nav-link.active, 
#accountingTabs .show>.nav-link {
    color: #ffffff !important;
    background-color: #1c47aa !important;
}

.xjm-activity-card {
    background: rgba(255,255,255,1);
    border-radius: var(--bs-border-radius) !important;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    position: relative !important;
}
.badge {
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3)!important;
    min-width: 85px;
}


/* FULL CALENDAR STYLING */
.fc table {
    background-color: #dfdfdf !important;
}
.fc .fc-list-event td {
    background-color: #dfdfdf !important;
    color: #000 !important;
}
.fc .fc-list-event:hover td {
    background-color: #f5f5f5 !important;
}
.fc-list-day-cushion.fc-theme-bootstrap5-shaded {
    background-color: #0c4802 !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !important;
}
.fc-list.fc-list-sticky.fc-listMonth-view.fc-view {
    border-radius: var(--bs-border-radius) !important;
    overflow: hidden !important;
}

.xjmActivityPopover {
    width: 300px !important;
    --bs-popover-max-width: 300px;
    --bs-popover-border-color: #444;
    --bs-popover-bg: #222;
    --bs-popover-header-bg: transparent; /* Set dynamically via JS */
    --bs-popover-header-color: #fff;
    --bs-popover-body-color: #eee;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    border: 1px solid #444 !important;
}
.xjmActivityPopover .popover-header {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.xjmActivityPopover .popover-body {
    background-color: transparent !important;
    color: #eee !important;
}
.xjmLegendChevron.rotated,
.xjmClientTechInfoChevron.rotated {
    transform: rotate(180deg);
}

.tox-tinymce {
    border-radius: 5px !important;
}

#shadowbox-loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Slightly lighter backdrop */
    backdrop-filter: blur(5px); /* Premium blur effect */
    -webkit-backdrop-filter: blur(5px);
    z-index: 10000; /* Ensure it stays above modals (BS modals use 1050+) */
}

/* Hide default Pace.js UI elements */
.pace, .pace-progress, .pace-activity {
    display: none !important;
}
#shadowbox-loader { /* Infinity Loader Graphic */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center horizontally & vertically */
}
/* Icon Loader Container */


.xjm-rounded-table {
    border: 1px solid #aaa;
    border-radius: 7px;
    overflow: hidden;
    background-color: #212529; /* matches dark invoice row */
}

.xjm-rounded-table .table {
    border: 0;
    margin-bottom: 0 !important;
    border-collapse: collapse;
}

.xjm-rounded-table .table thead tr:first-child th {
    border-top: 0;
}

.xjm-rounded-table .table tr th:first-child,
.xjm-rounded-table .table tr td:first-child {
    border-left: 0;
}

.xjm-rounded-table .table tr th:last-child,
.xjm-rounded-table .table tr td:last-child {
    border-right: 0;
}

.xjm-rounded-table .table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.xjm-rounded-table thead th {
    border-bottom-color: #aaa !important;
}


.table-maroon {
    --bs-table-color: #000;
    --bs-table-bg: #800000;
    --bs-table-border-color: #dfc2c4;
    --bs-table-striped-bg: #eccccf;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #800000;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #800000;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* Background Video Styling */
.video-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1 !important; /* Kept behind content on internal pages */
    overflow: hidden;
    background: #0e0900; /* Base dark background */
}

.video-bg-media {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
    opacity: 1;
}

.video-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(135deg, 
        #000312 0%,
        #000e30 40%,
        #002159 75%,
        #000312 100%
    );
    mix-blend-mode: hard-light;
    pointer-events: none;
}

/* Theme overrides for active dynamic themes */
[data-xjmbg=xjmBG1] .video-bg-overlay {
    background: linear-gradient(135deg, 
        #120000 0%,
        #1a0202 40%,
        #1a0202 75%,
        #120000 100%
    );
}

[data-xjmbg=xjmBG2] .video-bg-overlay {
    background: linear-gradient(135deg, 
        #000312 0%,
        #081222 40%,
        #081222 75%,
        #000312 100%
    );
}

[data-xjmbg=xjmBG3] .video-bg-overlay {
    background: linear-gradient(135deg, 
        #001203 0%,
        #010a03 40%,
        #010a03 75%,
        #001203 100%
    );
}

[data-xjmbg=xjmBG4] .video-bg-overlay {
    /* background: linear-gradient(135deg, 
        #120c00 0%, 
        #181102 40%, 
        #261a01 75%, 
        #120c00 100%
    ); */
    background: #120c00;
}

[data-xjmbg=xjmBG5] .video-bg-overlay {
    background: linear-gradient(135deg, 
        #120800 0%,
        #1e0e01 40%,
        #1e0e01 75%,
        #120800 100%
    );
}

[data-xjmbg=xjmBG6] .video-bg-overlay {
    background: linear-gradient(135deg, 
        #0e0012 0%,
        #15011a 40%,
        #15011a 75%,
        #0e0012 100%
    );
}

/* CSS FROM OLD ERP /////////////////////////////////////////////////////////////////////////////////////////////////////// */
.xjmPlay:before {
    -webkit-transition: all 0s ease-in-out;
    -moz-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f144";
}

.border-lt-gray {
    border-opacity: 1;
    border-color: #eeeeee!important;
}
.border-red {
    border-opacity: 1;
    border-color: #f00000!important;
}
.border-green {
    border-opacity: 1;
    border-color: #008000!important;
}
.border-gold {
    border-opacity: 1;
    border-color: #db9c1d!important;
}
.border-orangered {
    border-opacity: 1;
    border-color: #ff4500!important;
}
.border-blue {
    border-opacity: 1;
    border-color: #0000ff!important;
}
.border-yellow {
    border-opacity: 1;
    border-color: #ffff00!important;
}
.border-purple {
    border-opacity: 1;
    border-color: #800080!important;
}
.border-teal {
    border-opacity: 1;
    border-color: #08c5c2!important;
}

.xjmAnimButton.green {
	background-color: #035c11;
    background-image: linear-gradient(#035c11,#0b2812);
}
.xjmAnimButton.green2 {
	background-color: #035c11;
    background-image: linear-gradient(#035c11,#0b2812);
}
.xjmAnimButton.green.xjmAnimate {
    background-color: #1A5B29;
}
.xjmAnimButton.green2.xjmAnimate {
    padding: 0 5px;
    text-align: center;
    min-width: 150px;
    width: 150px;
    max-width: 100%;
    font-size: 0.8em;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid white;
	
	opacity: 1;
    background: linear-gradient(45deg, #1A5B29, #32ae44, #1A5B29);
	content: '';
    background-size: 400%;
    z-index: -1;
    height: 100%;
    animation: xjmAnim2 5s linear infinite;
    transition: opacity .3s ease-in-out;
    /*-webkit-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);*/
}
.xjmAnimButton.green.xjmAnimate:before {
	opacity: 1;
    background: linear-gradient(45deg, #1A5B29, #32ae44, #1A5B29);
	content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: 400%;
    z-index: -1;
    width: 100%;
    height: 100%;
    animation: xjmAnim2 5s linear infinite;
    transition: opacity .3s ease-in-out;
    /*border-radius: 10px;*/
    /*-webkit-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);*/
}
.xjmAnimButton.green2.xjmAnimate:before {
	opacity: 1;
    background: linear-gradient(45deg, #1A5B29, #32ae44, #1A5B29);
	content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: 400%;
    z-index: -1;
    width: 100%;
    height: 100%;
    animation: xjmAnim2 5s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 0px;
    /*-webkit-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);*/
}
.xjmAnimButton.cyan {
	background-color: #09e1c0;
    background-image: linear-gradient(#09e1c0,#035c11);
}
.xjmAnimButton.green:before {
    background: linear-gradient(45deg, #1A5B29, #32ae44, #1A5B29);
}
.xjmAnimButton.cyan:before {
    background: linear-gradient(45deg, #09e1c0, #32ae44, #09e1c0);
}
.xjmAnimButton.blue {
    background-color: #113450;
}
.xjmAnimButton.blue:before {
    background: linear-gradient(45deg, #002e55, #005fab, #002e55);
}
.xjmAnimButton.blue.xjmAnimate {
    background-color: #233480;
}
.xjmAnimButton.blue.xjmAnimate:before {
	opacity: 1;
    background: linear-gradient(45deg, #002e55, #005fab, #002e55);
	content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: 400%;
    z-index: -1;
    width: 100%;
    height: 100%;
    animation: xjmAnim2 5s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
    /*-webkit-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);*/
}
.xjmAnimButton.teal {
    background-color: #11504f;
}
.xjmAnimButton.teal:before {
    background: linear-gradient(45deg, #11504f, #26adab, #11504f);
}
.xjmAnimButton.teal.xjmAnimate {
    background-color: #11504f;
}
.xjmAnimButton.teal.xjmAnimate:before {
	opacity: 1;
    background: linear-gradient(45deg, #11504f, #26adab, #11504f);
	content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: 400%;
    z-index: -1;
    width: 100%;
    height: 100%;
    animation: xjmAnim2 5s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 0px;
    /*-webkit-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);*/
}
.xjmAnimButton.gold {
    background-color: #b8860b;
}
.xjmAnimButton.gold:before {
    background: linear-gradient(45deg, #b8860b, #F6CF6E, #b8860b);
}
.xjmAnimButton.gold.xjmAnimate {
    background-color: #b8860b;
}
.xjmAnimButton.gold.xjmAnimate:before {
	opacity: 1;
    background: linear-gradient(45deg, #b8860b, #F6CF6E, #b8860b);
	content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: 400%;
    z-index: -1;
    width: 100%;
    height: 100%;
    animation: xjmAnim2 5s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
    /*-webkit-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);*/
}
.xjmAnimButton.red {
    background-color: #800000;
}
.xjmAnimButton.red:before {
    background: linear-gradient(45deg, #800000, #FF5D5D, #800000);
}
.xjmAnimButton.grey {
    background-color: #5F5F5F;
}
.xjmAnimButton.grey:before {
    background: linear-gradient(45deg, #5F5F5F, #A5A5A5, #5F5F5F);
}
.xjmAnimButton.brown {
    background-color: #8b4513;
}
.xjmAnimButton.brown:before {
    background: linear-gradient(45deg, #8b4513, #D56A1D, #8b4513);
}
.xjmAnimButton.purple {
    background-color: #75128B;
}
.xjmAnimButton.purple:before {
    background: linear-gradient(45deg, #75128B, #C73CE5, #75128B);
}
.xjmAnimButton.purple.xjmAnimate {
    background-color: #75128B;
}
.xjmAnimButton.purple.xjmAnimate:before {
	opacity: 1;
    background: linear-gradient(45deg, #75128B, #C73CE5, #75128B);
	content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: 400%;
    z-index: -1;
    width: 100%;
    height: 100%;
    animation: xjmAnim2 5s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
    /*-webkit-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);*/
}
.xjmAnimButton {
	font-weight:initial;
	color:white!important;
	font-size: 1em;
	/*font-size: 0.8em;*/
	width: 600px;
	min-width: 200px;
	max-width: 100%;
	text-transform: uppercase;
    border: 1px solid #000000;
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    padding: 15px;
	/*margin:0 3%;*/
	margin: 0;
    /*text-shadow: 2px 2px #2d2d2d;*/
    text-shadow: 2px 2px 1px #2d2d2d;
    /*-webkit-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);*/
	/*font-family: 'ABeeZee';*/
	letter-spacing: 1px;
	overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out !important;
    -moz-transition: all 0.5s ease-in-out !important;
    transition: all 0.5s ease-in-out !important;
}
.xjmAnimButton:hover {
	box-shadow: 0 0 15px white;
    -webkit-transition: all 0.1s ease-in-out !important;
    -moz-transition: all 0.1s ease-in-out !important;
    transition: all 0.1s ease-in-out !important;
}
.xjmAnimButton:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100% - 0px);
    height: 40%;
    /*background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.0));*/
    background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.3), rgba(255,255,255,0.01));
    /*border-radius: 5px 5px 0 0;*/
    -webkit-transition: all 0.5s ease-in-out !important;
    -moz-transition: all 0.5s ease-in-out !important;
    transition: all 0.5s ease-in-out !important;
}
.xjmAnimButton.green:before, .xjmAnimButton.cyan:before, .xjmAnimButton.blue:before, .xjmAnimButton.teal:before, .xjmAnimButton.gold:before, .xjmAnimButton.red:before, .xjmAnimButton.grey:before, .xjmAnimButton.brown:before, .xjmAnimButton.purple:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: 400%;
    z-index: -1;
    width: 100%;
    height: 100%;
    animation: xjmAnim 10s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 7px;
    /*-webkit-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);
    box-shadow: inset 0 0 3px 1px rgba(0,0,0,.5);*/
}
.xjmAnimButton:active:after {
    background: transparent;
}
.xjmAnimButton:hover:before {
    opacity: 1;
}
.xjmAnimButton.green.xjmAnimate:hover:before, .xjmAnimButton.purple.xjmAnimate:hover:before, .xjmAnimButton.blue.xjmAnimate:hover:before, .xjmAnimButton.gold.xjmAnimate:hover:before, .xjmAnimButton.teal.xjmAnimate:hover:before {
	animation: xjmAnim 5s linear infinite;
}
@keyframes xjmAnim {
    0% { background-position: 0 0; }
    50% { background-position: 200% 0; }
    100% { background-position: 0 0; }
}
@keyframes xjmAnim2 {
    0% { background-position: 0 0; }
    50% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* Custom FilePond Overrides - Hide list and items to prevent duplicate rendering in homework views */
[class*="hw_file_outer"] .filepond--list-wrapper,
[class*="hw_file_outer"] .filepond--list,
[class*="hw_file_outer"] .filepond--item,
[class*="hw_file_outer"] .filepond--file {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
}

/* Select2 Dark Theme Custom Overrides */
.select2-container--bootstrap4 .select2-selection--single {
    background-color: #000000 !important;
    border: 1px solid #ffc107 !important;
    height: calc(1.5em + .75rem + 2px) !important;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    line-height: calc(1.5em + .75rem) !important;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color: #adb5bd !important;
}
.select2-container--bootstrap4 .select2-dropdown {
    background-color: #000000 !important;
    border: 1px solid #ffc107 !important;
}
.select2-container--bootstrap4 .select2-results__option {
    background-color: #000000 !important;
    color: #ffffff !important;
}
.select2-container--bootstrap4 .select2-results__option--highlighted, 
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: #ffc107 !important;
    color: #000000 !important;
}
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #ffc107 !important;
}

/* Modal backdrop premium blur override */
.modal-backdrop {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    background-color: rgba(0, 0, 0, 0) !important;
    transition: backdrop-filter 0.15s linear, -webkit-backdrop-filter 0.15s linear, background-color 0.15s linear !important;
}
.modal-backdrop.show {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !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;
}