#map-canvas {
    height: 100%;
}

.select2-selection__rendered {
    line-height: 40px !important;
}

.select2-selection {
    min-height: 44px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
}

.select2-container .select2-selection--single {
    height: 46px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #d6e8eb !important;
    border-radius: 15px !important;
}

.select2-container .select2-search--inline .select2-search__field {
    margin-top: -2px !important;
    color: #18344b;
    padding-left: 12px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #2B9B47;
    color: #0B1117;
    border-radius: 15px;
}

.select2-container {
    width: 100% !important;
}

.dark .select2-container--default .select2-selection--single {
    background: #0B1117 !important;
    border-color: rgba(43, 155, 71, 0.35) !important;
}

.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
}

.dark .select2-search.select2-search--dropdown {
    background: #123A23 !important;
}

.dark .select2-container--default .select2-search--dropdown .select2-search__field {
    background: #123A23 !important;
    color: #fff !important;
}

.dark .select2-container--open .select2-dropdown--below {
    border-color: rgba(43, 155, 71, 0.35);
}

.dark .select2-dropdown {
    background: #123A23 !important;
    border-color: rgba(43, 155, 71, 0.35) !important;
}

.dark .select2-container--default .select2-results__option {
    color: #F2F2F2 !important;
}

.dark .select2-container--default .select2-results__option[aria-selected=true] {
    background: #0B1117 !important;
    color: #F2F2F2 !important;
}

.dark .select2-container--default .select2-results__option--highlighted[aria-selected],
.dark .select2-container--default .select2-results__option--highlighted[aria-selected=true] {
    background-color: #2B9B47 !important;
    color: #0B1117 !important;
}

.pr-10 {
    padding: 0 0 0 10px;
}

.attachment-image {
    height: 80px;
    width: 80%;
}

.attachment-file {
    height: 80px;
    width: 50%;
}

.remove-file {
    position: absolute;
    /* right: 0; */
    top: 0;
}

.notification_tag {
    background: #e3342f;
    color: #fff;
    font-size: 12px;
    border-radius: 100px;
    line-height: normal;
    /* height: 18px;
    width: 20px; */
    font-weight: bold;
    text-align: center;
    display: inline-block;
}

.nav-item span.count-mail {
    height: 22px !important;
    width: 22px !important;
    font-size: 12px;
    line-height: 20px !important;
    right: 0px;
    top: 10px;
}

h6 .notification_count {
    font-weight: 400;
}

.notification-height {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 325px;
}

.mm-top-navbar .notification-menu {
    min-width: 450px;
}

.notify-list-bg {
    background: #F2F2F2
}

.navbar-list li .mm-sub-dropdown .sub-card {
    font-size: inherit;
    padding: 15px;
    line-height: normal;
    color: var(--mm-default);
    border-bottom: 1px solid #d6e8eb;
    display: inline-block;
    width: 100%;
}

.dark .notify-list-bg {
    background: #0B1117;
}

body:not(.dark) {
    background: #eef7f8;
    color: #18344b;
}

body:not(.dark) .content-page,
body:not(.dark) .container-fluid,
body:not(.dark) .mm-page-content,
body:not(.dark) .mm-content-body {
    background: #eef7f8;
}

body:not(.dark) .card,
body:not(.dark) .navbar,
body:not(.dark) .mm-top-navbar,
body:not(.dark) .iq-top-navbar {
    background: #ffffff !important;
}

body:not(.dark) .mm-sidebar,
body:not(.dark) .sidebar-default,
body:not(.dark) .iq-sidebar {
    background: #f4fcfc !important;
}

body:not(.dark) .card,
body:not(.dark) .card-header,
body:not(.dark) .card-footer,
body:not(.dark) .table,
body:not(.dark) .table-bordered,
body:not(.dark) .mm-sidebar,
body:not(.dark) .iq-sidebar,
body:not(.dark) .iq-top-navbar {
    border-color: #d6e8eb !important;
}

body:not(.dark) .card {
    box-shadow: 0 8px 24px rgba(4, 13, 22, 0.04);
}

body:not(.dark) .mm-top-navbar,
body:not(.dark) .iq-top-navbar,
body:not(.dark) .navbar {
    background: #fbfeff !important;
    box-shadow: 0 1px 0 rgba(24, 52, 75, 0.06);
}

body:not(.dark) .mm-sidebar-menu .iq-menu li a,
body:not(.dark) .iq-sidebar-menu .iq-menu li a,
body:not(.dark) .sidebar-default .nav-link {
    color: #21465e !important;
}

body:not(.dark) .mm-sidebar-menu .iq-menu li a i,
body:not(.dark) .mm-sidebar-menu .iq-menu li a svg,
body:not(.dark) .mm-sidebar-menu .iq-menu li a .fas,
body:not(.dark) .mm-sidebar-menu .iq-menu li a .far,
body:not(.dark) .mm-sidebar-menu .iq-menu li a .fab,
body:not(.dark) .mm-sidebar-menu .iq-menu li a .fa,
body:not(.dark) .mm-sidebar-menu .iq-menu li a .ri,
body:not(.dark) .iq-sidebar-menu .iq-menu li a i,
body:not(.dark) .iq-sidebar-menu .iq-menu li a svg,
body:not(.dark) .iq-sidebar-menu .iq-menu li a .fas,
body:not(.dark) .iq-sidebar-menu .iq-menu li a .far,
body:not(.dark) .iq-sidebar-menu .iq-menu li a .fab,
body:not(.dark) .iq-sidebar-menu .iq-menu li a .fa,
body:not(.dark) .iq-sidebar-menu .iq-menu li a .ri,
body:not(.dark) .sidebar-default .nav-link i,
body:not(.dark) .sidebar-default .nav-link svg,
body:not(.dark) .sidebar-default .nav-link .fas,
body:not(.dark) .sidebar-default .nav-link .far,
body:not(.dark) .sidebar-default .nav-link .fab,
body:not(.dark) .sidebar-default .nav-link .fa,
body:not(.dark) .sidebar-default .nav-link .ri {
    color: #21465e !important;
}

body:not(.dark) .mm-sidebar-menu .iq-menu li.active>a,
body:not(.dark) .iq-sidebar-menu .iq-menu li.active>a,
body:not(.dark) .sidebar-default .nav-link.active {
    background: rgba(43, 155, 71, 0.10) !important;
    color: #2B9B47 !important;
}

body:not(.dark) .mm-sidebar-menu .iq-menu li.active>a i,
body:not(.dark) .mm-sidebar-menu .iq-menu li.active>a svg,
body:not(.dark) .mm-sidebar-menu .iq-menu li.active>a .fas,
body:not(.dark) .mm-sidebar-menu .iq-menu li.active>a .far,
body:not(.dark) .mm-sidebar-menu .iq-menu li.active>a .fab,
body:not(.dark) .mm-sidebar-menu .iq-menu li.active>a .fa,
body:not(.dark) .mm-sidebar-menu .iq-menu li.active>a .ri,
body:not(.dark) .iq-sidebar-menu .iq-menu li.active>a i,
body:not(.dark) .iq-sidebar-menu .iq-menu li.active>a svg,
body:not(.dark) .iq-sidebar-menu .iq-menu li.active>a .fas,
body:not(.dark) .iq-sidebar-menu .iq-menu li.active>a .far,
body:not(.dark) .iq-sidebar-menu .iq-menu li.active>a .fab,
body:not(.dark) .iq-sidebar-menu .iq-menu li.active>a .fa,
body:not(.dark) .iq-sidebar-menu .iq-menu li.active>a .ri,
body:not(.dark) .sidebar-default .nav-link.active i,
body:not(.dark) .sidebar-default .nav-link.active svg,
body:not(.dark) .sidebar-default .nav-link.active .fas,
body:not(.dark) .sidebar-default .nav-link.active .far,
body:not(.dark) .sidebar-default .nav-link.active .fab,
body:not(.dark) .sidebar-default .nav-link.active .fa,
body:not(.dark) .sidebar-default .nav-link.active .ri {
    color: #2B9B47 !important;
}

body:not(.dark) .mm-sidebar-menu .iq-menu li a:hover,
body:not(.dark) .iq-sidebar-menu .iq-menu li a:hover,
body:not(.dark) .sidebar-default .nav-link:hover {
    background: rgba(4, 13, 22, 0.04) !important;
    color: #21465e !important;
}

body:not(.dark) .mm-sidebar-menu .iq-menu li a:hover i,
body:not(.dark) .mm-sidebar-menu .iq-menu li a:hover svg,
body:not(.dark) .mm-sidebar-menu .iq-menu li a:hover .fas,
body:not(.dark) .mm-sidebar-menu .iq-menu li a:hover .far,
body:not(.dark) .mm-sidebar-menu .iq-menu li a:hover .fab,
body:not(.dark) .mm-sidebar-menu .iq-menu li a:hover .fa,
body:not(.dark) .mm-sidebar-menu .iq-menu li a:hover .ri,
body:not(.dark) .iq-sidebar-menu .iq-menu li a:hover i,
body:not(.dark) .iq-sidebar-menu .iq-menu li a:hover svg,
body:not(.dark) .iq-sidebar-menu .iq-menu li a:hover .fas,
body:not(.dark) .iq-sidebar-menu .iq-menu li a:hover .far,
body:not(.dark) .iq-sidebar-menu .iq-menu li a:hover .fab,
body:not(.dark) .iq-sidebar-menu .iq-menu li a:hover .fa,
body:not(.dark) .iq-sidebar-menu .iq-menu li a:hover .ri,
body:not(.dark) .sidebar-default .nav-link:hover i,
body:not(.dark) .sidebar-default .nav-link:hover svg,
body:not(.dark) .sidebar-default .nav-link:hover .fas,
body:not(.dark) .sidebar-default .nav-link:hover .far,
body:not(.dark) .sidebar-default .nav-link:hover .fab,
body:not(.dark) .sidebar-default .nav-link:hover .fa,
body:not(.dark) .sidebar-default .nav-link:hover .ri {
    color: #21465e !important;
}

body:not(.dark) .form-control,
body:not(.dark) .custom-file-label,
body:not(.dark) .select2-container--default .select2-selection--single,
body:not(.dark) .select2-container--default .select2-selection--multiple,
body:not(.dark) .input-group-text {
    background: #ffffff !important;
    color: #18344b !important;
    border-color: #d6e8eb !important;
}

body:not(.dark) .form-control:disabled,
body:not(.dark) .form-control[readonly] {
    background: #eef6f7 !important;
    color: #587286 !important;
}

body:not(.dark) .btn-primary,
body:not(.dark) .badge-primary {
    background-color: #F4E213 !important;
    border-color: #F4E213 !important;
    color: #035823 !important;
}

body:not(.dark) .btn-primary i,
body:not(.dark) .btn-primary svg,
body:not(.dark) .btn-primary .fa,
body:not(.dark) .btn-primary .fas,
body:not(.dark) .btn-primary .far,
body:not(.dark) .btn-primary .fab,
body:not(.dark) .btn-primary .ri,
body:not(.dark) .badge-primary i,
body:not(.dark) .badge-primary svg {
    color: #035823 !important;
}

body:not(.dark) .btn-primary:hover,
body:not(.dark) .btn-primary:focus,
body:not(.dark) .btn-primary:active,
body:not(.dark) .badge-primary:hover,
body:not(.dark) .badge-primary:focus {
    background-color: #E99F04 !important;
    border-color: #E99F04 !important;
    color: #035823 !important;
}

body:not(.dark) .bg-primary {
    background-color: #2B9B47 !important;
    border-color: #2B9B47 !important;
    color: #F2F2F2 !important;
}

body:not(.dark) .text-primary,
body:not(.dark) .mm-sidebar-menu .active>a,
body:not(.dark) .mm-sidebar-menu a:hover {
    color: #1E7A35 !important;
}

body:not(.dark) .badge-light-primary,
body:not(.dark) .bg-primary-light,
body:not(.dark) .table thead th,
body:not(.dark) .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: rgba(43, 155, 71, 0.12) !important;
    color: #18344b !important;
    border-color: rgba(30, 122, 53, 0.25) !important;
}

body:not(.dark) .table tbody tr:hover,
body:not(.dark) .list-group-item:hover {
    background: rgba(43, 155, 71, 0.05) !important;
}

body:not(.dark) a:not(.btn) {
    color: inherit !important;
}

body:not(.dark) .btn.btn-primary,
body:not(.dark) a.btn.btn-primary,
body:not(.dark) button.btn.btn-primary,
body:not(.dark) input.btn.btn-primary,
body:not(.dark) .btn.btn-primary span,
body:not(.dark) .btn.btn-primary small {
    color: #035823 !important;
}

body:not(.dark) .btn.btn-primary:hover,
body:not(.dark) a.btn.btn-primary:hover,
body:not(.dark) button.btn.btn-primary:hover,
body:not(.dark) input.btn.btn-primary:hover,
body:not(.dark) .btn.btn-primary:focus,
body:not(.dark) a.btn.btn-primary:focus,
body:not(.dark) button.btn.btn-primary:focus,
body:not(.dark) input.btn.btn-primary:focus,
body:not(.dark) .btn.btn-primary:active,
body:not(.dark) a.btn.btn-primary:active,
body:not(.dark) button.btn.btn-primary:active,
body:not(.dark) input.btn.btn-primary:active {
    color: #035823 !important;
}

body.dark .btn.btn-primary,
body.dark a.btn.btn-primary,
body.dark button.btn.btn-primary,
body.dark input.btn.btn-primary {
    color: #035823 !important;
}

body.dark .btn.btn-primary i,
body.dark .btn.btn-primary svg,
body.dark .btn.btn-primary .fa,
body.dark .btn.btn-primary .fas,
body.dark .btn.btn-primary .far,
body.dark .btn.btn-primary .fab,
body.dark .btn.btn-primary .ri,
body.dark a.btn.btn-primary i,
body.dark a.btn.btn-primary svg,
body.dark a.btn.btn-primary .fa,
body.dark a.btn.btn-primary .fas,
body.dark a.btn.btn-primary .far,
body.dark a.btn.btn-primary .fab,
body.dark a.btn.btn-primary .ri {
    color: #035823 !important;
}

body.dark .btn.btn-primary:hover,
body.dark a.btn.btn-primary:hover,
body.dark button.btn.btn-primary:hover,
body.dark input.btn.btn-primary:hover,
body.dark .btn.btn-primary:focus,
body.dark a.btn.btn-primary:focus,
body.dark button.btn.btn-primary:focus,
body.dark input.btn.btn-primary:focus,
body.dark .btn.btn-primary:active,
body.dark a.btn.btn-primary:active,
body.dark button.btn.btn-primary:active,
body.dark input.btn.btn-primary:active {
    color: #035823 !important;
}

.card-body.activity-height {
    max-height: 368px !important;
    overflow-x: hidden !important;
}

.text-green-600 {
    color: rgba(5, 150, 105, 1);
}

.language_table tbody {
    display: block;
    max-height: 450px;
    overflow-y: scroll;
}

.language_table thead,
.language_table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.mm-top-navbar .language-menu ul {
    max-height: 350px;
    overflow: scroll;
}

.selected-lang {
    height: 30px !important;
    min-width: 30px !important;
    width: 30px !important;
}

.selected-lang-list {
    width: 20px !important;
    height: auto !important;
    min-width: 15px !important;
}

.iti {
    width: 100% !important;
}

.dark .iti__country-list {
    background-color: #222;
    border: 1px solid #252525;
}

.profile-box {
    /* padding-bottom: 170px !important; */
}


.chat {
    float: left;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;

    width: 100%;
    /* background: #F2F5F8;
    color: #434651; */
}

.chat .chat-history {
    padding: 30px 30px 20px;
    border-bottom: 2px solid white;
    overflow-y: scroll;
    height: 575px;
}

.chat .chat-history .message-data {
    margin-bottom: 15px;
}

.chat .chat-history .message-data-time {
    padding-left: 6px;
}

.chat .chat-history .message {
    padding: 18px 20px;
    line-height: 26px;
    font-size: 16px;
    border-radius: 7px;
    margin-bottom: 30px;
    width: 90%;
    position: relative;
}

.chat .chat-history .message:after {
    bottom: 100%;
    left: 7%;
    border: solid transparent;

    height: 0;
    width: 0;
    position: absolute;

    border-width: 10px;
    margin-left: -10px;
}

.other-message {
    background: var(--info);
}

.my-message {
    background: var(--primary);
}

.my-message:after {
    border-bottom-color: var(--primary);
    left: 93%;
}

.chat-history ul {
    padding: 20px;
    /* height: 770px; */
}

.chat-history ul>li {
    padding-bottom: 20px;
    list-style: none;
}

.li-clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

#maplegend {
    font-family: Arial, sans-serif;
    background: #fff;
    padding: 10px;
    margin: 10px;
    color: #222;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

#maplegend img {
    vertical-align: middle;
}

.map_driver_detail {
    font-family: Arial, sans-serif;
    background: #fff;
    color: #222;
    border-radius: 10px;
    padding: 10px;
}

.dark #maplegend {
    background: #123A23;
    color: #F2F2F2;
    border-color: rgba(43, 155, 71, 0.35);
}

.dark .map_driver_detail {
    background: #123A23;
    color: #F2F2F2;
}

/*
.dark .mode.light-img {
    display: none;
}

.dark .mode.dark-img {
    display: block;
} 
  
.mode {
    display: none;
}

.mode.light-img {
    display: block;
}

.mode.ltr-img {
    display: block;
}
*/

.dark .pac-container {
    background: #222 !important;
    color: #fff !important;
    border-top: 1px solid #d9d9d9;
}

.dark .pac-container .pac-item {
    color: #fff !important;
    ;
}

.dark .pac-container .pac-item-query {
    color: #fff !important;
}

.dark .pac-container .pac-item:hover {
    background-color: var(--primary) !important;
}

.dark .swal2-popup {
    background: #222738 !important;
}

.swal2-styled.swal2-confirm {
    border: 0 !important;
    border-radius: 0.25em !important;
    background: initial !important;
    background-color: #216fff !important;
    color: #fff !important;
    font-size: 1em !important;
}

.swal2-popup.colored-toast.swal2-toast {
    background: #ffffff !important;
    color: #18344b !important;
    border: 1px solid #d6e8eb !important;
    box-shadow: 0 12px 32px rgba(4, 13, 22, 0.2) !important;
}

.swal2-popup.colored-toast.swal2-toast .swal2-title,
.swal2-popup.colored-toast.swal2-toast .swal2-html-container {
    color: #18344b !important;
}

.swal2-popup.colored-toast.swal2-toast .swal2-timer-progress-bar {
    background: rgba(24, 52, 75, 0.2) !important;
}

.swal2-popup.colored-toast .swal2-icon.swal2-error {
    border-color: #f16d6d !important;
}

.swal2-popup.colored-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: #f16d6d !important;
}

.swal2-popup.colored-toast .swal2-icon.swal2-success {
    border-color: #2db783 !important;
}

.swal2-popup.colored-toast .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(45, 183, 131, 0.35) !important;
}

.swal2-popup.colored-toast .swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #2db783 !important;
}

.dark .swal2-popup.colored-toast.swal2-toast {
    background: #081C15 !important;
    color: #F2F2F2 !important;
    border: 1px solid rgba(43, 155, 71, 0.35) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

.dark .swal2-popup.colored-toast.swal2-toast .swal2-title,
.dark .swal2-popup.colored-toast.swal2-toast .swal2-html-container {
    color: #F2F2F2 !important;
}

.dark .swal2-popup.colored-toast.swal2-toast .swal2-timer-progress-bar {
    background: rgba(107, 199, 126, 0.25) !important;
}

.timeline {
    position: relative;
    max-width: 900px;
}

.timeline-item {
    position: relative;
}

.timeline-content {
    display: flex;
    align-items: center;
    position: relative;
}

.timeline-icon {
    flex-shrink: 0;
    font-size: 24px;
    color: #3498db;
    margin-right: 10px;
    margin-bottom: 27px;
}

.timeline-text {
    flex-grow: 1;
}


.timeline-no-location {
    font-size: 0.875rem;
    color: #888;
}

/* START BULK IMPORT DATA */

.is-default-row td {
    color: black;
}

.no-items {
    color: black;
}

.help {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 70px;
    background-color: #e5f0ff;
    color: #397dff !important;
    outline: none !important;
    font-weight: bold;
    border-radius: 10px;
}

.downloadtemplate {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 190px;
    background-color: #e5f0ff;
    color: #397dff !important;
    outline: none !important;
    font-weight: bold;
    border-radius: 10px;
}

/* Drop file */

.blue-text {
    background-color: #2b6eff;
    color: white;
    border: none;
    padding: 11px 11px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 5px;
}

.underline {
    text-decoration: underline;
}

.drop-field {
    position: relative;
    text-align: center;
    vertical-align: middle;
}

.drop-field,
.drop-area {
    height: 210px;
}

.drop-field .browse {
    z-index: 0;
    position: absolute;
    left: 0;
    bottom: 30px;
    right: 0;
    margin: 0 auto;
}

.drop-field .drop-area {
    display: block;
    border: 1px dashed blue;
    position: relative;
    border-radius: 10px;
    background-color: #f7faff;
}

.drop-field,
.drop-area,
.drop-field .browse {
    transition: all 0.3s;
}

.drop-field.loaded .drop-area {
    border: 1px dashed blue;
}

.drop-field .browse {
    opacity: 0;
    transform: translateY(100%);
}

.drop-field.loaded .browse {
    opacity: 1;
    transform: translateY(0);
}

.drop-field.hover .drop-area {
    border: 1px solid black;
}

.drop-field .drop-area input[type="file"] {
    height: 100%;
    width: 100%;
    position: absolute;
    display: block;
    z-index: 3;
    top: 0;
    left: 0;
    opacity: 0.000001;
}

.drop-field .file-list {
    position: absolute;
    z-index: 0;
    top: 80px;
    left: 0;
    right: 44px;
    text-align: center;
}

.drop-field .remove {
    position: absolute;
    left: 20px;
    top: 60px;
    z-index: 4;
    transition: all 0.3s;
    opacity: 0;
    transform: translateY(-100%);
    cursor: pointer;
    right: 20px;
}

.drop-field .remove:hover {
    color: blue;
}

.drop-field.loaded .remove {
    opacity: 1;
    transform: translateY(0);
}

.drop-field ul li {
    padding: 0;
    text-align: center;
    list-style: none;
}

.custom-hover:hover {
    background-color: #8754f6 !important;
    cursor: pointer;
}

.custom-hover:hover .mm-cart-text p,
.custom-hover:hover .mm-cart-text h5 {
    color: white !important;
}

/* END BULK IMPORT DATA */


.text-danger,
.error {
    color: red !important;
}

.has-error .form-control {
    border-color: red !important;
}

.help-block.error {
    color: red !important;
}

.border-radius-20 {
    border-radius: 20px !important;
}

.border-radius-10 {
    border-radius: 10px !important;
}

.text-header-white {
    color: white !important;
}

/* Dark theme normalization */
body.dark {
    background: #0B1117 !important;
    color: #F2F2F2 !important;
}

.dark .content-page,
.dark .container-fluid,
.dark .mm-page-content,
.dark .mm-content-body,
.dark .wrapper,
.dark .mm-main-content {
    background: #0B1117 !important;
}

.dark .mm-top-navbar,
.dark .mm-top-navbar .navbar,
.dark .mm-navbar-custom,
.dark .iq-top-navbar,
.dark .navbar-collapse {
    background: #123A23 !important;
    border-color: rgba(43, 155, 71, 0.35) !important;
    box-shadow: 0 1px 0 rgba(24, 52, 75, 0.55) !important;
}

.dark .mm-top-navbar .mm-sub-dropdown,
.dark .mm-top-navbar .dropdown-menu,
.dark .navbar-list li .mm-sub-dropdown .sub-card,
.dark .navbar-list li .dropdown-menu,
.dark .mm-top-navbar .notification-menu .card,
.dark .mm-top-navbar .language-menu .card {
    background: #123A23 !important;
    border-color: rgba(43, 155, 71, 0.35) !important;
    color: #F2F2F2 !important;
}

.dark .mm-top-navbar .navbar-light .navbar-nav .nav-link,
.dark .mm-top-navbar .navbar-list li>a,
.dark .mm-top-navbar .navbar-list li>a i,
.dark .mm-top-navbar .navbar-list li>a svg,
.dark .mm-top-navbar .wrapper-menu,
.dark .mm-top-navbar .navbar-toggler,
.dark .mm-top-navbar .navbar-toggler i {
    color: #2B9B47 !important;
}

.dark .card,
.dark .card-header,
.dark .card-footer,
.dark .modal-content,
.dark .bg-white {
    background: #123A23 !important;
    border-color: rgba(43, 155, 71, 0.35) !important;
    color: #F2F2F2 !important;
}

.dark .table,
.dark .table td,
.dark .table th,
.dark .table thead th {
    border-color: rgba(43, 155, 71, 0.35) !important;
}

.dark .table-striped tbody tr:nth-of-type(odd),
.dark .table-hover tbody tr:hover,
.dark .reporting_table tbody tr,
.dark .reporting_table tbody td,
.dark .reporting-table.table.table-borderless thead th {
    background: #081C15 !important;
    border-color: rgba(43, 155, 71, 0.35) !important;
    color: #F2F2F2 !important;
}

.dark .table-hover tbody tr:hover {
    background: #0E2E1A !important;
}

.dark .apexcharts-canvas,
.dark .apexcharts-grid,
.dark .highcharts-background,
.dark .jvectormap-container {
    background: transparent !important;
}

/* Sidebar cleanup */
.mm-sidebar-menu a,
.mm-sidebar-menu a:hover,
.mm-sidebar-menu a:focus,
.iq-sidebar-menu a,
.iq-sidebar-menu a:hover,
.iq-sidebar-menu a:focus,
.side-menu a,
.side-menu a:hover,
.side-menu a:focus {
    text-decoration: none !important;
}

.dark .mm-sidebar-menu .side-menu>li>a,
.dark .iq-sidebar-menu .iq-menu li a,
.dark .side-menu li a {
    color: #F2F2F2 !important;
}

.dark .mm-sidebar-menu .side-menu>li.active>a,
.dark .iq-sidebar-menu .iq-menu li.active>a,
.dark .side-menu li.active>a {
    background: rgba(43, 155, 71, 0.12) !important;
    color: #2B9B47 !important;
    box-shadow: inset 3px 0 0 #2B9B47;
}

.dark .mm-sidebar-menu .side-menu>li>a:hover,
.dark .iq-sidebar-menu .iq-menu li a:hover,
.dark .side-menu li a:hover {
    background: rgba(43, 155, 71, 0.06) !important;
    color: #F2F2F2 !important;
}

/* Header theme toggle */
.change-mode .custom-switch-inner {
    display: flex;
    align-items: center;
}

.change-mode .custom-switch.custom-switch-icon {
    padding-left: 0;
    margin-right: 0;
}

.change-mode .custom-switch.custom-switch-icon .custom-control-label {
    width: 74px !important;
    min-width: 74px;
    height: 32px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px !important;
    border: 1px solid #2B9B47 !important;
    background: #2B9B47 !important;
    padding: 0 10px !important;
    position: relative;
}

.change-mode .custom-switch.custom-switch-icon .custom-control-label:before {
    display: none !important;
}

.change-mode .custom-switch.custom-switch-icon .custom-control-label:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px !important;
    width: 34px;
    height: 28px;
    border-radius: 4px 0 0 4px !important;
    background: #123A23 !important;
    transform: none !important;
    transition: left .2s ease;
}

.change-mode .custom-switch.custom-switch-icon input:checked+.custom-control-label:after {
    left: 37px !important;
    border-radius: 0 4px 4px 0 !important;
}

.change-mode .custom-switch.custom-switch-icon .switch-icon-left,
.change-mode .custom-switch.custom-switch-icon .switch-icon-right {
    position: relative;
    z-index: 1;
    line-height: 1;
}

.change-mode .custom-switch.custom-switch-icon .switch-icon-left {
    color: #ffffff !important;
}

.change-mode .custom-switch.custom-switch-icon .switch-icon-right {
    color: #123A23 !important;
}

.dark .change-mode .custom-switch.custom-switch-icon .switch-icon-left {
    color: #ffffff !important;
}

.dark .change-mode .custom-switch.custom-switch-icon .switch-icon-right {
    color: #123A23 !important;
}

/* Login dark mode */
.dark.login-page,
.dark .login-content {
    background: #052B11 !important;
}

.dark .login-content .container,
.dark .login-content .row {
    background: transparent !important;
}

.dark .login-content {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.dark .login-content .card,
.dark .login-content .card-body {
    background: #081C15 !important;
    border-color: rgba(43, 155, 71, 0.35) !important;
    color: #F2F2F2 !important;
}

.dark .login-content .form-control {
    background: #081C15 !important;
    border-color: #2B9B47 !important;
    color: #F2F2F2 !important;
    box-shadow: none !important;
}

.dark .login-content .form-control::placeholder {
    color: #B8C4BE !important;
}

.dark .login-content input:-webkit-autofill,
.dark .login-content input:-webkit-autofill:hover,
.dark .login-content input:-webkit-autofill:focus,
.dark .login-content textarea:-webkit-autofill,
.dark .login-content select:-webkit-autofill {
    -webkit-text-fill-color: #F2F2F2 !important;
    -webkit-box-shadow: 0 0 0 1000px #081C15 inset !important;
    transition: background-color 9999s ease-in-out 0s;
}


.badge {
    font-size: 0.80rem;
    font-weight: 600;
    padding: 0.30em 0.5em;
    border-radius: 0.5rem;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    vertical-align: baseline;
    transition: all 0.2s ease-in-out;
}

.radial-gradient {
    background-image: radial-gradient(circle, #232323 0%, #949494 -1%, #232323 114%) !important;
}

/* Light badges with color variations */
.badge-light-primary {
    background-color: rgba(244, 226, 19, 0.35);
    color: #035823;
    /* Light shade of accent */
}

.badge-light-secondary {
    background-color: #0B1117;
}

.badge-light-success {
    background-color: #70fa904c;
}

.badge-light-danger {
    background-color: #f7415038;
}

.badge-light-warning {
    background-color: #f1c84153;
}

.badge-light-info {
    background-color: #d1ecf1;
}

.badge-light-dark {
    background-color: #d6d8d9;
}

/* Slide from Right to Left */
.modal-dialog.modal-dialog-end {
    position: fixed;
    top: -30px;
    right: -100%;
    /* Initially hidden off-screen */
    height: 100%;
    width: 400px;
    /* Adjust the width as necessary */
    transition: transform .3s ease-in-out
        /* Smooth sliding transition */
}

.modal.show .modal-dialog.modal-dialog-end {
    right: 0;
    /* Slide into view */
}

.modal .modal-dialog-aside {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    /* Ensures the modal is positioned on the right */
    width: 444px;
    max-width: 80%;
    height: 100%;
    margin: 0;
    transform: translateX(100%);
    /* Start off-screen */
    transition: transform .3s ease-in-out;
    /* Smooth transition */
}

.modal .modal-dialog-aside .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
}

.modal .modal-dialog-aside .modal-content .modal-body {
    overflow-y: auto;
}

.modal.fixed-right .modal-dialog-aside {
    transform: translateX(100%);
    /* Start off-screen */
}

.modal.show .modal-dialog-aside {
    transform: translateX(0);
    /* Slide in */
}


/* Optional: Hide the modal backdrop (to give the slider feel) */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
}


.modal.fade.slide-right .modal-dialog {
    transform: translateX(100%) !important;
    transition: transform 0.3s ease-out !important;
}

.modal.show.slide-right .modal-dialog {
    transform: translateX(0) !important;
}

.ride-badge {
    display: inline-block;
    min-width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 10px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    margin-left: 5px;
}

/* Final production-safe dark overrides */
.dark,
.dark .content-page,
.dark .mm-page-content,
.dark .container-fluid {
    background: #0B1117 !important;
}

.dark .mm-top-navbar,
.dark .mm-top-navbar .navbar,
.dark .mm-top-navbar .navbar-expand-lg,
.dark .mm-navbar-custom,
.dark .navbar-collapse,
.dark .mm-top-navbar .wrapper-menu {
    background: #081C15 !important;
    border-color: rgba(43, 155, 71, 0.35) !important;
    color: #2B9B47 !important;
}

.dark .mm-sidebar-menu a,
.dark .mm-sidebar-menu a *,
.dark .mm-sidebar-menu a:hover,
.dark .mm-sidebar-menu a:focus,
.dark .iq-sidebar-menu a,
.dark .iq-sidebar-menu a *,
.dark .iq-sidebar-menu a:hover,
.dark .iq-sidebar-menu a:focus,
.dark .side-menu a,
.dark .side-menu a *,
.dark .side-menu a:hover,
.dark .side-menu a:focus {
    text-decoration: none !important;
}

.dark .change-mode {
    margin-right: 16px !important;
}

.dark .change-mode .custom-switch.custom-switch-icon,
.dark .change-mode .custom-switch.custom-switch-icon .custom-switch-inner {
    align-items: center !important;
    display: flex !important;
    margin: 0 !important;
}

.dark .change-mode .custom-switch.custom-switch-icon {
    padding-left: 0 !important;
}

.dark .change-mode .custom-switch.custom-switch-icon .custom-control-input {
    height: 1px !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

.dark .change-mode .custom-switch.custom-switch-icon .custom-control-label {
    background: #2B9B47 !important;
    border: 1px solid #2B9B47 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    display: inline-block !important;
    height: 32px !important;
    margin: 0 !important;
    min-width: 74px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: relative !important;
    vertical-align: middle !important;
    width: 74px !important;
}

.dark .change-mode .custom-switch.custom-switch-icon .custom-control-label:before {
    background: #123A23 !important;
    border: 0 !important;
    border-radius: 4px 0 0 4px !important;
    box-shadow: none !important;
    content: "" !important;
    height: 28px !important;
    left: 1px !important;
    position: absolute !important;
    top: 1px !important;
    transform: none !important;
    width: 35px !important;
}

.dark .change-mode .custom-switch.custom-switch-icon .custom-control-label:after {
    display: none !important;
}

.dark .change-mode .custom-switch.custom-switch-icon .custom-control-input:not(:checked)~.custom-control-label:before {
    border-radius: 0 4px 4px 0 !important;
    left: 38px !important;
}

.dark .change-mode .custom-switch.custom-switch-icon .switch-icon-left,
.dark .change-mode .custom-switch.custom-switch-icon .switch-icon-right {
    align-items: center !important;
    display: flex !important;
    height: 18px !important;
    justify-content: center !important;
    line-height: 1 !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    z-index: 2 !important;
}

.dark .change-mode .custom-switch.custom-switch-icon .switch-icon-left {
    color: #ffffff !important;
    left: 9px !important;
    stroke: #ffffff !important;
}

.dark .change-mode .custom-switch.custom-switch-icon .switch-icon-right {
    color: #123A23 !important;
    right: 9px !important;
    stroke: #123A23 !important;
}

.dark .change-mode .custom-switch.custom-switch-icon .switch-icon-left svg,
.dark .change-mode .custom-switch.custom-switch-icon .switch-icon-right svg {
    display: block !important;
    fill: none !important;
    height: 16px !important;
    width: 16px !important;
}

.dark .card,
.dark .card-body,
.dark .card-header,
.dark .card-footer,
.dark .modal-content,
.dark .bg-white {
    background: #123A23 !important;
    border-color: rgba(43, 155, 71, 0.35) !important;
    color: #F2F2F2 !important;
}

.dark .form-control,
.dark .custom-file-label,
.dark .custom-select,
.dark .input-group-text,
.dark textarea.form-control,
.dark select.form-control,
.dark .select2-container--default .select2-selection--single,
.dark .select2-container--default .select2-selection--multiple,
.dark .search-menu-options .form-control,
.dark .search-menu-options .mm-search-bar .search-input {
    background: #081C15 !important;
    border-color: rgba(43, 155, 71, 0.35) !important;
    box-shadow: none !important;
    color: #F2F2F2 !important;
}

.dark .form-control:focus,
.dark .custom-select:focus,
.dark textarea.form-control:focus,
.dark select.form-control:focus,
.dark .select2-container--default.select2-container--focus .select2-selection--multiple,
.dark .select2-container--default.select2-container--focus .select2-selection--single {
    background: #081C15 !important;
    border-color: #2B9B47 !important;
    box-shadow: 0 0 0 1px rgba(43, 155, 71, 0.2) !important;
    color: #F2F2F2 !important;
}

.dark .form-control::placeholder,
.dark textarea::placeholder {
    color: #B8C4BE !important;
}

.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark textarea:-webkit-autofill,
.dark textarea:-webkit-autofill:hover,
.dark textarea:-webkit-autofill:focus,
.dark select:-webkit-autofill,
.dark select:-webkit-autofill:hover,
.dark select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #081C15 inset !important;
    -webkit-text-fill-color: #F2F2F2 !important;
    transition: background-color 9999s ease-in-out 0s;
}

.dark .login-content {
    background: #052B11 !important;
}

.dark .login-content .container,
.dark .login-content .row {
    background: transparent !important;
}

.dark .login-content .card,
.dark .login-content .card-body {
    background: #081C15 !important;
    border-color: rgba(43, 155, 71, 0.35) !important;
}

.dark .login-content .form-control {
    background: #081C15 !important;
    border-color: #2B9B47 !important;
    color: #F2F2F2 !important;
}

.dark .login-content .form-control::placeholder {
    color: #B8C4BE !important;
}

.dark .table,
.dark .table thead th,
.dark .table tbody th,
.dark .table tbody td,
.dark table.dataTable,
.dark table.dataTable thead th,
.dark table.dataTable tbody tr,
.dark table.dataTable tbody th,
.dark table.dataTable tbody td,
.dark .dataTables_wrapper .dataTable tbody>tr,
.dark .dataTables_wrapper .dataTable tbody>tr>th,
.dark .dataTables_wrapper .dataTable tbody>tr>td,
.dark .reporting_table tbody tr,
.dark .reporting_table tbody td,
.dark .reporting-table.table.table-borderless thead th {
    background: #081C15 !important;
    border-color: rgba(43, 155, 71, 0.35) !important;
    color: #F2F2F2 !important;
}

.dark .table-hover tbody tr:hover,
.dark .table-hover tbody tr:hover td,
.dark table.dataTable tbody tr:hover>th,
.dark table.dataTable tbody tr:hover>td,
.dark .reporting_table tbody tr:hover>td {
    background: #0E2E1A !important;
}

.dark .dataTables_wrapper .dataTables_filter,
.dark .dataTables_wrapper .dataTables_info,
.dark .dataTables_wrapper .dataTables_length,
.dark .dataTables_wrapper .dataTables_paginate,
.dark .dataTables_wrapper .dataTables_processing {
    color: #F2F2F2 !important;
}

.dark .dataTables_wrapper .dataTables_filter input,
.dark .dataTables_wrapper .dataTables_length select {
    background: #081C15 !important;
    border: 1px solid rgba(43, 155, 71, 0.35) !important;
    color: #F2F2F2 !important;
}

.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: transparent !important;
    border: 1px solid rgba(43, 155, 71, 0.28) !important;
    color: #F2F2F2 !important;
}

.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: rgba(43, 155, 71, 0.18) !important;
    border-color: #2B9B47 !important;
    color: #ffffff !important;
}

.dark .custom-radio .custom-control-label:before,
.dark .custom-checkbox .custom-control-label:before {
    background: #081C15 !important;
    border: 1px solid rgba(43, 155, 71, 0.35) !important;
    box-shadow: none !important;
}

.dark .custom-radio .custom-control-input:checked~.custom-control-label:before,
.dark .custom-checkbox .custom-control-input:checked~.custom-control-label:before {
    background: #2B9B47 !important;
    border-color: #2B9B47 !important;
}

.dark .custom-radio .custom-control-input:checked~.custom-control-label:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%230B1117'/%3E%3C/svg%3E") !important;
}

.dark .custom-checkbox .custom-control-input:checked~.custom-control-label:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%230B1117' d='m6.564.75-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E") !important;
}

.dark hr {
    border-color: rgba(43, 155, 71, 0.35) !important;
}

.dark .mm-footer {
    background: #0B1117 !important;
    border-color: rgba(43, 155, 71, 0.35) !important;
    color: #F2F2F2 !important;
}

.dark .table a,
.dark table.dataTable a,
.dark .dataTables_wrapper table a,
.dark .reporting_table a {
    color: #2B9B47 !important;
    text-decoration: none !important;
}

.dark .table a:hover,
.dark table.dataTable a:hover,
.dark .dataTables_wrapper table a:hover,
.dark .reporting_table a:hover {
    color: #6BC77E !important;
    text-decoration: none !important;
}

.card.border-radius-20,
.border-radius-20.card,
.dark .card.border-radius-20,
.dark .border-radius-20.card {
    border-radius: 20px !important;
    overflow: hidden !important;
}

.card.border-radius-20 .card-header,
.card.border-radius-20 .card-body,
.card.border-radius-20 .card-footer,
.border-radius-20.card .card-header,
.border-radius-20.card .card-body,
.border-radius-20.card .card-footer,
.dark .card.border-radius-20 .card-header,
.dark .card.border-radius-20 .card-body,
.dark .card.border-radius-20 .card-footer,
.dark .border-radius-20.card .card-header,
.dark .border-radius-20.card .card-body,
.dark .border-radius-20.card .card-footer {
    border-radius: inherit !important;
}

.mm-top-navbar .navbar-list,
.mm-top-navbar .navbar-list li,
.mm-top-navbar .navbar-list li>a,
.mm-top-navbar .navbar-list li>a.search-toggle,
.mm-top-navbar .nav-item.nav-icon>a,
.mm-top-navbar .nav-item.nav-icon.dropdown>a {
    align-items: center !important;
    display: flex !important;
    flex-direction: row;
}

.mm-top-navbar .navbar-list li>a,
.mm-top-navbar .navbar-list li>a.search-toggle,
.mm-top-navbar .nav-item.nav-icon>a,
.mm-top-navbar .nav-item.nav-icon.dropdown>a {
    height: 44px !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 10px !important;
}

.mm-top-navbar .navbar-list li>a>img {
    display: block !important;
}

/* WinPass brand final overrides */
.dark .mm-sidebar,
.dark .iq-sidebar,
.dark .sidebar-default,
.dark .mm-sidebar-menu {
    background: #052B11 !important;
    border-color: rgba(43, 155, 71, 0.35) !important;
}

.dark .btn-primary,
.dark .badge-primary,
.dark a.badge-primary,
.dark button.badge-primary {
    background-color: #F4E213 !important;
    border-color: #F4E213 !important;
    color: #035823 !important;
}

.dark .btn-primary:hover,
.dark .btn-primary:focus,
.dark .btn-primary:active,
.dark .btn-primary:not(:disabled):not(.disabled):active,
.dark a.badge-primary:hover,
.dark a.badge-primary:focus {
    background-color: #E99F04 !important;
    border-color: #E99F04 !important;
    color: #035823 !important;
}

.dark .btn-primary i,
.dark .btn-primary svg,
.dark .btn-primary .fa,
.dark .btn-primary .fas,
.dark .btn-primary .far,
.dark .btn-primary .fab,
.dark .btn-primary .ri {
    color: #035823 !important;
}

.dark .bg-primary {
    background-color: #2B9B47 !important;
}

body:not(.dark) .bg-primary {
    background-color: #2B9B47 !important;
    color: #F2F2F2 !important;
}

/* Autocomplete highlight override (dispatch form inline style) */
.ui-menu-item:hover,
.ui-state-active {
    background: #2B9B47 !important;
    color: #0B1117 !important;
}

/* Dashboard SVG/icon color override (old cyan #35f2ff and new green) */
.mm-cart-image svg[fill="#35f2ff"],
.mm-cart-image svg [fill="#35f2ff"],
.mm-cart-image svg[fill="#2B9B47"],
.mm-cart-image svg [fill="#2B9B47"],
.mm-cart-image svg .st0 {
    fill: #2B9B47 !important;
}

.mm-cart-image svg[stroke="#35f2ff"],
.mm-cart-image svg [stroke="#35f2ff"],
.mm-cart-image svg[stroke="#2B9B47"],
.mm-cart-image svg [stroke="#2B9B47"] {
    stroke: #2B9B47 !important;
}

.mm-cart-image i {
    color: #2B9B47 !important;
}

/* =========================================================
   WinPass Premium Login
   ========================================================= */

.login-content {
    position: relative;
    min-height: 100vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 30%, rgba(43, 155, 71, 0.08) 0%, transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(244, 226, 19, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 50% 50%, #071A11 0%, #0B1117 70%, #0B1117 100%) !important;
    overflow: hidden;
}

.login-content::before,
.login-content::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.login-content::before {
    background:
        radial-gradient(circle at 20% 20%, rgba(244, 226, 19, 0.12) 0 2px, transparent 2px),
        radial-gradient(circle at 80% 30%, rgba(244, 226, 19, 0.08) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 70% 80%, rgba(43, 155, 71, 0.12) 0 2.5px, transparent 2.5px),
        radial-gradient(circle at 30% 85%, rgba(43, 155, 71, 0.08) 0 2px, transparent 2px);
    background-size: 220px 220px, 180px 180px, 240px 240px, 200px 200px;
    opacity: 0.7;
}

.login-content::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M420 100 L520 750 L720 300 L920 750 L1020 100' fill='none' stroke='%232B9B47' stroke-width='8' opacity='0.04'/%3E%3Cpath d='M-100 800 C 400 800 600 600 800 600 S 1300 500 1540 700' fill='none' stroke='%23F4E213' stroke-width='3' opacity='0.06'/%3E%3Cpath d='M-100 820 C 400 820 600 620 800 620 S 1300 520 1540 720' fill='none' stroke='%232B9B47' stroke-width='6' opacity='0.05'/%3E%3Ccircle cx='200' cy='200' r='3' fill='%23E99F04' opacity='0.2'/%3E%3Ccircle cx='1200' cy='300' r='2' fill='%23E99F04' opacity='0.15'/%3E%3Ccircle cx='900' cy='150' r='4' fill='%23F4E213' opacity='0.1'/%3E%3Ccircle cx='300' cy='600' r='2' fill='%23E99F04' opacity='0.12'/%3E%3Ccircle cx='1100' cy='700' r='3' fill='%23F4E213' opacity='0.08'/%3E%3C/svg%3E");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.8;
}

.login-content .container {
    position: relative;
    z-index: 1;
}

.login-content .card {
    background: rgba(18, 58, 35, 0.55) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(43, 155, 71, 0.35) !important;
    border-radius: 20px !important;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(43, 155, 71, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    overflow: hidden;
}

.login-content .card-body {
    background: transparent !important;
    padding: 2.5rem !important;
}

.login-logo {
    text-align: center;
    margin-bottom: 1.75rem;
}

.login-logo img {
    max-width: 220px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(43, 155, 71, 0.25));
}

.login-title {
    color: #F2F2F2;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.login-subtitle {
    color: #C9D4CD;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.login-input {
    background-color: #0F2418 !important;
    border: 1px solid #1E7A35 !important;
    border-radius: 12px !important;
    color: #F2F2F2 !important;
    padding: 0.85rem 1rem 0.85rem 2.75rem !important;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background-repeat: no-repeat !important;
    background-position: 1rem center !important;
    background-size: 1.1rem !important;
}

.login-input:focus {
    border-color: #F4E213 !important;
    box-shadow: 0 0 0 3px rgba(244, 226, 19, 0.15) !important;
    background-color: #0F2418 !important;
}

.login-input::placeholder {
    color: #C9D4CD !important;
    opacity: 0.7;
}

.login-input-email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4E213' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E") !important;
}

.login-input-password {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4E213' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
}

.login-btn {
    background: linear-gradient(135deg, #F4E213 0%, #E99F04 100%) !important;
    color: #035823 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 0.85rem 2rem !important;
    font-weight: 700 !important;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(244, 226, 19, 0.35) !important;
    transition: all 0.25s ease !important;
    width: 100%;
}

.login-btn:hover,
.login-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(244, 226, 19, 0.45) !important;
    background: linear-gradient(135deg, #E99F04 0%, #F4E213 100%) !important;
}

.login-btn:active {
    transform: translateY(0);
}

.login-link {
    color: #2B9B47 !important;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-link:hover {
    color: #F4E213 !important;
    text-decoration: none;
}

.dark .login-content .custom-control-label {
    color: #C9D4CD !important;
}

.dark .login-content .custom-control-label::before {
    background-color: #0F2418 !important;
    border-color: #1E7A35 !important;
}

.dark .login-content .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #F4E213 !important;
    border-color: #F4E213 !important;
}

.dark .login-content .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23035823' d='m6.564.75-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E") !important;
}

@media (max-width: 576px) {
    .login-content .card-body {
        padding: 1.75rem !important;
    }
    .login-logo img {
        max-width: 170px;
    }
}

/* =========================================================
   WinPass Admin Dashboard - visual layer only
   ========================================================= */
.winpass-admin-dashboard {
    --wp-page: #0B1117;
    --wp-surface: #0E1D16;
    --wp-card: #102C1C;
    --wp-card-strong: #123A23;
    --wp-green: #2B9B47;
    --wp-green-hover: #1E7A35;
    --wp-yellow: #F4E213;
    --wp-gold: #E99F04;
    --wp-text: #F2F2F2;
    --wp-muted: #C9D4CD;
    position: relative;
    min-height: calc(100vh - 74px);
    padding: 32px 30px 42px !important;
    background:
        radial-gradient(circle at 95% 3%, rgba(43,155,71,.09), transparent 26%),
        radial-gradient(circle at 8% 95%, rgba(5,43,17,.38), transparent 30%),
        var(--wp-page);
}
.winpass-admin-dashboard > .row > .col-lg-12.mb-3:first-child { display: none; }

.winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row {
    margin-right: -10px;
    margin-left: -10px;
}
.winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > [class*="col-"] {
    padding-right: 10px;
    padding-left: 10px;
}
.winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3 > .card {
    min-height: 116px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid rgba(43,155,71,.24) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(135deg, rgba(18,58,35,.92), rgba(9,31,20,.94)) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.025) !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
.winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3 > .card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--wp-green), transparent 88%);
    opacity: .85;
}
.winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3 > .card[role="button"]:hover {
    transform: translateY(-4px);
    border-color: rgba(244,226,19,.34) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.30), 0 0 24px rgba(43,155,71,.10) !important;
}
.winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3 > .card:focus-visible {
    outline: 2px solid var(--wp-yellow);
    outline-offset: 3px;
}
.winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3 > .card .card-body {
    display: flex;
    align-items: center;
    padding: 22px !important;
    background: transparent !important;
}
.winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3 > .card .card-body > .d-flex {
    width: 100%;
    gap: 18px;
}
.winpass-admin-dashboard .mm-cart-image {
    display: inline-flex;
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(43,155,71,.26);
    border-radius: 16px;
    color: var(--wp-green) !important;
    background: rgba(43,155,71,.09);
}
.winpass-admin-dashboard .mm-cart-image svg {
    width: 34px !important;
    height: 34px !important;
    fill: var(--wp-green) !important;
    stroke: var(--wp-green) !important;
}
.winpass-admin-dashboard .mm-cart-image svg *,
.winpass-admin-dashboard .mm-cart-image .st0 {
    fill: var(--wp-green) !important;
    stroke: var(--wp-green) !important;
}
.winpass-admin-dashboard .mm-cart-image i {
    color: var(--wp-green) !important;
    font-size: 34px !important;
}
.winpass-admin-dashboard .mm-cart-text {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}
.winpass-admin-dashboard .mm-cart-text br { display: none; }
.winpass-admin-dashboard .mm-cart-text h5 {
    float: none !important;
    margin: 0 0 7px;
    color: var(--wp-text) !important;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: -.03em;
}
.winpass-admin-dashboard .mm-cart-text p {
    float: none !important;
    color: var(--wp-muted) !important;
    font-size: .88rem;
    line-height: 1.25;
    text-align: right;
}

/* Financial metrics receive the restrained reward accent. */
.winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3:nth-child(n+6):nth-child(-n+10) > .card::before {
    background: linear-gradient(180deg, var(--wp-gold), transparent 88%);
}
.winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3:nth-child(n+6):nth-child(-n+10) .mm-cart-image {
    border-color: rgba(244,226,19,.22);
    color: var(--wp-gold) !important;
    background: rgba(244,226,19,.07);
}
.winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3:nth-child(n+6):nth-child(-n+10) .mm-cart-image i {
    color: var(--wp-gold) !important;
}

/* Recent requests and income panels. */
.winpass-admin-dashboard > .row > .col-lg-6 {
    margin-top: 10px;
}
.winpass-admin-dashboard > .row > .col-lg-6 > .card {
    overflow: hidden;
    border: 1px solid rgba(43,155,71,.24) !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, rgba(14,37,24,.98), rgba(8,24,16,.98)) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.24) !important;
}
.winpass-admin-dashboard > .row > .col-lg-6 > .card > .card-header {
    min-height: 72px;
    padding: 22px 24px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(43,155,71,.18) !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, rgba(18,58,35,.72), rgba(18,58,35,.20)) !important;
}
.winpass-admin-dashboard > .row > .col-lg-6 > .card > .card-header::after {
    content: "";
    position: absolute;
    right: 24px;
    bottom: 0;
    left: 24px;
    height: 1px;
    background: linear-gradient(90deg, var(--wp-green), transparent);
    opacity: .45;
}
.winpass-admin-dashboard .card-title {
    margin: 0;
    color: var(--wp-text) !important;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -.02em;
}
.winpass-admin-dashboard > .row > .col-lg-6 > .card > .card-body {
    padding: 20px 22px 24px !important;
    background: transparent !important;
}
.winpass-admin-dashboard .table-responsive {
    border: 1px solid rgba(43,155,71,.17);
    border-radius: 14px;
    background: rgba(4,17,11,.42);
}
.winpass-admin-dashboard .table {
    margin-bottom: 0;
    color: var(--wp-muted) !important;
    background: transparent !important;
}
.winpass-admin-dashboard .table thead th {
    padding: 14px 12px;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(43,155,71,.34) !important;
    color: var(--wp-text) !important;
    background: rgba(5,43,17,.52) !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}
.winpass-admin-dashboard .table tbody td {
    padding: 14px 12px;
    border-top: 1px solid rgba(43,155,71,.12) !important;
    color: var(--wp-muted) !important;
    font-size: .82rem;
    vertical-align: middle;
    background: transparent !important;
}
.winpass-admin-dashboard .table tbody tr {
    transition: background-color .18s ease;
}
.winpass-admin-dashboard .table tbody tr:hover {
    background: rgba(43,155,71,.07) !important;
}
.winpass-admin-dashboard .badge {
    padding: 7px 10px;
    border: 1px solid rgba(244,226,19,.20);
    border-radius: 999px;
    font-size: .70rem;
    font-weight: 700;
}
.winpass-admin-dashboard #dash-income-chart {
    min-height: 350px;
    padding-top: 4px;
}
.winpass-admin-dashboard .apexcharts-text,
.winpass-admin-dashboard .apexcharts-legend-text {
    fill: var(--wp-muted) !important;
    color: var(--wp-muted) !important;
}
.winpass-admin-dashboard .apexcharts-gridline {
    stroke: rgba(201,212,205,.13) !important;
}
.winpass-admin-dashboard .apexcharts-menu-icon svg {
    fill: var(--wp-muted) !important;
}
@media (max-width: 1199.98px) {
    .winpass-admin-dashboard { padding: 26px 20px 36px !important; }
}
@media (max-width: 767.98px) {
    .winpass-admin-dashboard { padding: 20px 14px 30px !important; }
    .winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3 > .card { min-height: 104px; }
    .winpass-admin-dashboard .mm-cart-image { flex-basis: 54px; width: 54px; height: 54px; border-radius: 14px; }
    .winpass-admin-dashboard .mm-cart-text h5 { font-size: 1.2rem; }
    .winpass-admin-dashboard > .row > .col-lg-6 > .card > .card-header { min-height: 64px; padding: 18px !important; }
    .winpass-admin-dashboard > .row > .col-lg-6 > .card > .card-body { padding: 14px !important; }
}


/* WinPass dashboard background identity refinement. */
.winpass-admin-dashboard {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 86% 8%, rgba(43,155,71,.13) 0%, rgba(7,26,17,.04) 30%, transparent 52%),
        radial-gradient(ellipse at 4% 94%, rgba(30,122,53,.12) 0%, transparent 34%),
        linear-gradient(145deg, #0B1117 0%, #08140F 48%, #071A11 100%) !important;
}
.winpass-admin-dashboard::before {
    content: "W";
    position: absolute;
    z-index: -2;
    right: -2.5rem;
    top: 6%;
    color: rgba(43,155,71,.025);
    font-family: Arial, sans-serif;
    font-size: clamp(24rem, 38vw, 46rem);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.12em;
    pointer-events: none;
    transform: rotate(-2deg);
}
.winpass-admin-dashboard::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .52;
    background:
        radial-gradient(circle at 9% 18%, rgba(233,159,4,.40) 0 1px, transparent 1.8px),
        radial-gradient(circle at 91% 26%, rgba(244,226,19,.30) 0 1px, transparent 1.8px),
        radial-gradient(circle at 76% 84%, rgba(233,159,4,.24) 0 1px, transparent 1.8px),
        radial-gradient(ellipse 68% 23% at -5% 108%, transparent 57%, rgba(43,155,71,.09) 58%, transparent 59.2%),
        radial-gradient(ellipse 65% 20% at -5% 108%, transparent 64%, rgba(244,226,19,.035) 64.5%, transparent 65.2%);
}
.winpass-admin-dashboard > .row {
    position: relative;
    z-index: 1;
}
@media (max-width: 767.98px) {
    .winpass-admin-dashboard::before {
        right: -7rem;
        top: 18%;
        font-size: 25rem;
        opacity: .55;
    }
    .winpass-admin-dashboard::after {
        opacity: .34;
    }
}


/* =========================================================
   WinPass definitive dark shell
   Replaces inherited blue shell borders and surfaces.
   ========================================================= */
html.dark body.dark {
    background: #0B1117 !important;
}
html.dark body.dark .content-page {
    background:
        radial-gradient(ellipse at 88% 2%, rgba(43,155,71,.10), transparent 34%),
        linear-gradient(145deg, #0B1117 0%, #08140F 54%, #071A11 100%) !important;
}
html.dark body.dark .content-page .container-fluid.winpass-admin-dashboard {
    background:
        radial-gradient(ellipse at 86% 8%, rgba(43,155,71,.16) 0%, rgba(7,26,17,.05) 32%, transparent 54%),
        radial-gradient(ellipse at 4% 94%, rgba(30,122,53,.13) 0%, transparent 36%),
        linear-gradient(145deg, #0B1117 0%, #08140F 46%, #071A11 100%) !important;
}

/* Header: remove every inherited blue separator. */
html.dark body.dark .mm-top-navbar,
html.dark body.dark .mm-top-navbar .mm-navbar-custom,
html.dark body.dark .mm-top-navbar .navbar,
html.dark body.dark .mm-top-navbar .navbar-expand-lg,
html.dark body.dark .mm-top-navbar .navbar-collapse {
    border: 0 !important;
    border-color: transparent !important;
    background: linear-gradient(90deg, #071A11 0%, #081C15 55%, #071A11 100%) !important;
    box-shadow: none !important;
}
html.dark body.dark .mm-top-navbar {
    border-bottom: 1px solid rgba(43,155,71,.22) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.18), 0 1px 0 rgba(43,155,71,.07) !important;
}
html.dark body.dark .mm-top-navbar .navbar::before,
html.dark body.dark .mm-top-navbar .navbar::after,
html.dark body.dark .mm-top-navbar .mm-navbar-custom::before,
html.dark body.dark .mm-top-navbar .mm-navbar-custom::after {
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
html.dark body.dark .mm-top-navbar .navbar-list {
    border: 0 !important;
}
html.dark body.dark .mm-top-navbar .navbar-list > li > a {
    border: 1px solid transparent !important;
    border-radius: 10px;
    color: #2B9B47 !important;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
html.dark body.dark .mm-top-navbar .navbar-list > li > a:hover,
html.dark body.dark .mm-top-navbar .navbar-list > li.show > a {
    border-color: rgba(43,155,71,.24) !important;
    color: #F4E213 !important;
    background: rgba(43,155,71,.08) !important;
}
html.dark body.dark .mm-top-navbar .navbar-list > li > a svg,
html.dark body.dark .mm-top-navbar .navbar-list > li > a i {
    color: inherit !important;
    stroke: currentColor !important;
}
html.dark body.dark .mm-top-navbar .avatar-rounded {
    border: 1px solid rgba(43,155,71,.58) !important;
    box-shadow: 0 0 0 3px rgba(43,155,71,.08) !important;
}
html.dark body.dark .mm-top-navbar .dropdown-menu,
html.dark body.dark .mm-top-navbar .mm-sub-dropdown {
    border: 1px solid rgba(43,155,71,.24) !important;
    background: #0D2819 !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.38) !important;
}
html.dark body.dark .mm-top-navbar .dropdown-item,
html.dark body.dark .mm-top-navbar .list-group-item {
    border-color: rgba(43,155,71,.13) !important;
    background: transparent !important;
}

/* Sidebar and main shell now belong to the same WinPass system. */
html.dark body.dark .mm-sidebar,
html.dark body.dark .iq-sidebar,
html.dark body.dark .sidebar-default {
    border: 0 !important;
    border-right: 1px solid rgba(43,155,71,.18) !important;
    background: linear-gradient(180deg, #052B11 0%, #061F0E 100%) !important;
    box-shadow: 14px 0 34px rgba(0,0,0,.16) !important;
}
html.dark body.dark .mm-sidebar::before,
html.dark body.dark .mm-sidebar::after,
html.dark body.dark .iq-sidebar::before,
html.dark body.dark .iq-sidebar::after {
    border-color: transparent !important;
    box-shadow: none !important;
}


/* =========================================================
   WinPass reference dashboard adaptation - CSS only
   ========================================================= */

/* Brand sidebar */
html.dark body.dark .mm-sidebar .mm-sidebar-logo {
    min-height: 92px !important;
    padding: 13px 18px !important;
    border-bottom: 1px solid rgba(43,155,71,.20) !important;
    background: linear-gradient(135deg, rgba(43,155,71,.08), transparent 72%) !important;
}
html.dark body.dark .mm-sidebar .mm-sidebar-logo .header-logo {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}
html.dark body.dark .mm-sidebar .mm-sidebar-logo .header-logo img {
    width: auto !important;
    max-width: 205px !important;
    height: auto !important;
    max-height: 72px !important;
    object-fit: contain;
    filter: drop-shadow(0 7px 14px rgba(0,0,0,.28)) !important;
}
html.dark body.dark .mm-sidebar .data-scrollbar {
    padding-top: 14px;
}
html.dark body.dark .mm-sidebar-menu .side-menu > li {
    position: relative;
    margin: 3px 12px !important;
}
html.dark body.dark .mm-sidebar-menu .side-menu > li > a {
    min-height: 48px;
    padding: 11px 14px !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    color: #E3EBE6 !important;
    background: transparent !important;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease !important;
}
html.dark body.dark .mm-sidebar-menu .side-menu > li > a i {
    width: 24px;
    margin-right: 10px !important;
    color: #F2F2F2 !important;
    font-size: 16px;
    text-align: center;
    transition: color .2s ease, transform .2s ease;
}
html.dark body.dark .mm-sidebar-menu .side-menu > li > a:hover {
    border-color: rgba(43,155,71,.28) !important;
    color: #F4E213 !important;
    background: rgba(43,155,71,.09) !important;
    transform: translateX(2px);
}
html.dark body.dark .mm-sidebar-menu .side-menu > li > a:hover i {
    color: #F4E213 !important;
    transform: scale(1.05);
}
html.dark body.dark .mm-sidebar-menu .side-menu > li.active > a,
html.dark body.dark .mm-sidebar-menu .side-menu > li > a.active {
    border-color: rgba(43,155,71,.46) !important;
    border-left: 4px solid #F4E213 !important;
    color: #F4E213 !important;
    background: linear-gradient(100deg, rgba(30,122,53,.82), rgba(43,155,71,.20)) !important;
    box-shadow: 0 8px 24px rgba(43,155,71,.22), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
html.dark body.dark .mm-sidebar-menu .side-menu > li.active > a i,
html.dark body.dark .mm-sidebar-menu .side-menu > li > a.active i {
    color: #F4E213 !important;
}
/* Reserve now is the first root item. */
html.dark body.dark .mm-sidebar-menu .side-menu > li:first-child {
    margin-top: 6px !important;
    margin-bottom: 12px !important;
}
html.dark body.dark .mm-sidebar-menu .side-menu > li:first-child > a {
    min-height: 54px;
    border-color: rgba(43,155,71,.40) !important;
    color: #F2F2F2 !important;
    background: linear-gradient(110deg, rgba(5,43,17,.92), rgba(7,26,17,.96)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}
html.dark body.dark .mm-sidebar-menu .side-menu > li:first-child > a i {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    margin-right: 10px !important;
    border-radius: 50%;
    color: #052B11 !important;
    background: linear-gradient(135deg, #F4E213, #E99F04) !important;
}
html.dark body.dark .mm-sidebar-menu .side-menu .badge,
html.dark body.dark .mm-sidebar-menu .ride-badge {
    border: 0 !important;
    color: #052B11 !important;
    background: #F4E213 !important;
    box-shadow: 0 0 14px rgba(244,226,19,.16);
}

/* Reference-style top bar */
html.dark body.dark .mm-top-navbar {
    min-height: 75px;
}
html.dark body.dark .mm-top-navbar .navbar {
    min-height: 74px;
    padding-right: 22px !important;
    padding-left: 22px !important;
}
html.dark body.dark .mm-top-navbar .wrapper-menu {
    color: #F4E213 !important;
    font-size: 27px !important;
    text-shadow: 0 0 18px rgba(244,226,19,.12);
}
html.dark body.dark .mm-top-navbar .navbar-list > li > a {
    min-width: 42px;
    min-height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
html.dark body.dark .mm-top-navbar .navbar-list > li:first-child > a,
html.dark body.dark .mm-top-navbar .navbar-list > li.full-screen > a {
    color: #F4E213 !important;
}
html.dark body.dark .mm-top-navbar .notify_count,
html.dark body.dark .mm-top-navbar .badge-primary {
    border: 2px solid #071A11 !important;
    color: #052B11 !important;
    background: #F4E213 !important;
}

/* Dashboard metric cards closer to the supplied concept. */
html.dark body.dark .content-page .winpass-admin-dashboard {
    padding-top: 27px !important;
}
html.dark body.dark .winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3 > .card {
    min-height: 122px;
    border-color: rgba(43,155,71,.42) !important;
    background:
        radial-gradient(circle at 90% 5%, rgba(43,155,71,.13), transparent 38%),
        linear-gradient(135deg, rgba(5,43,17,.96), rgba(7,26,17,.94)) !important;
    box-shadow: 0 13px 30px rgba(0,0,0,.26), inset 0 1px 0 rgba(43,155,71,.08) !important;
}
html.dark body.dark .winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3 > .card::before {
    width: 2px;
    background: linear-gradient(180deg, #2B9B47, transparent 82%);
}
html.dark body.dark .winpass-admin-dashboard .mm-cart-image {
    border: 0 !important;
    background: transparent !important;
}
html.dark body.dark .winpass-admin-dashboard .mm-cart-image svg,
html.dark body.dark .winpass-admin-dashboard .mm-cart-image svg *,
html.dark body.dark .winpass-admin-dashboard .mm-cart-image .st0 {
    fill: #52D765 !important;
    stroke: #52D765 !important;
    filter: drop-shadow(0 0 8px rgba(43,155,71,.20));
}
html.dark body.dark .winpass-admin-dashboard .mm-cart-image i {
    color: #52D765 !important;
    filter: drop-shadow(0 0 8px rgba(43,155,71,.20));
}
html.dark body.dark .winpass-admin-dashboard .mm-cart-text h5 {
    font-size: 1.75rem;
    font-weight: 800 !important;
}
html.dark body.dark .winpass-admin-dashboard .mm-cart-text p {
    color: #F2F2F2 !important;
    font-size: .91rem;
    font-weight: 600;
}
/* Gold reward/status cards, following the supplied visual rhythm. */
html.dark body.dark .winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3:nth-child(3) .mm-cart-image svg,
html.dark body.dark .winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3:nth-child(3) .mm-cart-image svg *,
html.dark body.dark .winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3:nth-child(4) .mm-cart-image svg,
html.dark body.dark .winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3:nth-child(4) .mm-cart-image svg *,
html.dark body.dark .winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3:nth-child(8) .mm-cart-image svg,
html.dark body.dark .winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3:nth-child(8) .mm-cart-image svg * {
    fill: #F4E213 !important;
    stroke: #F4E213 !important;
}
html.dark body.dark .winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3:nth-child(4) .mm-cart-image i,
html.dark body.dark .winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3:nth-child(8) .mm-cart-image i,
html.dark body.dark .winpass-admin-dashboard > .row > .col-lg-12:nth-child(2) > .row > .col-lg-3:nth-child(11) .mm-cart-image i {
    color: #F4E213 !important;
}

/* Lower premium panels */
html.dark body.dark .winpass-admin-dashboard > .row > .col-lg-6 > .card {
    border-color: rgba(43,155,71,.48) !important;
    background:
        radial-gradient(circle at 85% 0%, rgba(43,155,71,.10), transparent 34%),
        linear-gradient(145deg, rgba(5,43,17,.82), rgba(5,20,13,.98)) !important;
    box-shadow: 0 20px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(43,155,71,.08) !important;
}
html.dark body.dark .winpass-admin-dashboard > .row > .col-lg-6 > .card > .card-header {
    padding: 20px 22px !important;
    background: rgba(4,24,14,.56) !important;
}
html.dark body.dark .winpass-admin-dashboard > .row > .col-lg-6:first-of-type .card-title::before {
    content: "◷";
}
html.dark body.dark .winpass-admin-dashboard > .row > .col-lg-6:last-of-type .card-title::before {
    content: "▥";
}
html.dark body.dark .winpass-admin-dashboard .card-title::before {
    display: inline-block;
    margin-right: 10px;
    color: #F4E213;
    font-size: 1.15em;
    vertical-align: -1px;
}
html.dark body.dark .winpass-admin-dashboard .table-responsive {
    border-color: rgba(43,155,71,.28);
    background: rgba(2,15,8,.38);
}
html.dark body.dark .winpass-admin-dashboard .table thead th {
    border-bottom-color: rgba(43,155,71,.38) !important;
    background: rgba(4,32,17,.72) !important;
}
html.dark body.dark .winpass-admin-dashboard .table tbody td {
    border-top-color: rgba(43,155,71,.19) !important;
    color: #E4ECE7 !important;
}
html.dark body.dark .winpass-admin-dashboard .badge {
    border-color: rgba(244,226,19,.30) !important;
    color: #F4E213 !important;
    background: rgba(244,226,19,.12) !important;
}

/* ApexCharts: yellow rewards + green mobility, no inherited blue. */
html.dark body.dark .winpass-admin-dashboard .apexcharts-series:nth-of-type(1) .apexcharts-bar-area {
    fill: #F4E213 !important;
}
html.dark body.dark .winpass-admin-dashboard .apexcharts-series:nth-of-type(2) .apexcharts-bar-area {
    fill: #2B9B47 !important;
}
html.dark body.dark .winpass-admin-dashboard .apexcharts-series:nth-of-type(3) .apexcharts-bar-area {
    fill: #E99F04 !important;
}
html.dark body.dark .winpass-admin-dashboard .apexcharts-xaxis line,
html.dark body.dark .winpass-admin-dashboard .apexcharts-yaxis line {
    stroke: rgba(43,155,71,.30) !important;
}

@media (max-width: 991.98px) {
    html.dark body.dark .mm-sidebar .mm-sidebar-logo {
        min-height: 74px !important;
    }
    html.dark body.dark .mm-sidebar .mm-sidebar-logo .header-logo img {
        max-height: 54px !important;
    }
}


/* =========================================================
   WinPass shell cleanup: overflow, footer, scrollbars, chart
   ========================================================= */
html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}
html.dark body.dark .wrapper,
html.dark body.dark .content-page,
html.dark body.dark .content-page > .container-fluid,
html.dark body.dark .winpass-admin-dashboard {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
html.dark body.dark .winpass-admin-dashboard > .row {
    max-width: calc(100% + 30px);
}

/* Root fix for the horizontal overflow generated by the theme footer. */
html.dark body.dark .mm-footer {
    width: auto !important;
    right: 0;
    margin-left: 260px !important;
    padding: 17px 24px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-top: 1px solid rgba(43,155,71,.20) !important;
    color: #C9D4CD !important;
    background: linear-gradient(90deg, #071A11, #0B1117 54%, #071A11) !important;
    box-shadow: 0 -10px 28px rgba(0,0,0,.15) !important;
}
html.dark body.dark .mm-footer .container-fluid,
html.dark body.dark .mm-footer .row {
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    background: transparent !important;
}
html.dark body.dark .mm-footer a {
    color: #F4E213 !important;
    font-weight: 700;
}
html.dark body.dark .mm-footer a:hover {
    color: #E99F04 !important;
}
@media (min-width: 1300px) {
    html.dark body.dark.sidebar-main .mm-footer {
        width: auto !important;
        margin-left: 80px !important;
    }
}
@media (max-width: 1299.98px) {
    html.dark body.dark .mm-footer,
    html.dark body.dark.sidebar-main .mm-footer {
        width: auto !important;
        margin-left: 0 !important;
    }
}

/* Native browser scrollbars. */
html.dark {
    scrollbar-color: #2B9B47 #071A11;
    scrollbar-width: thin;
}
html.dark * {
    scrollbar-color: #2B9B47 #071A11;
    scrollbar-width: thin;
}
html.dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html.dark ::-webkit-scrollbar-track {
    border-left: 1px solid rgba(43,155,71,.10);
    background: #071A11;
}
html.dark ::-webkit-scrollbar-thumb {
    border: 2px solid #071A11;
    border-radius: 999px;
    background: linear-gradient(180deg, #2B9B47, #1E7A35);
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: #F4E213;
}
html.dark ::-webkit-scrollbar-corner {
    background: #071A11;
}

/* Smooth-scrollbar plugin used by the sidebar. */
html.dark body.dark .scrollbar-track {
    background: rgba(7,26,17,.92) !important;
}
html.dark body.dark .scrollbar-track-x {
    display: none !important;
}
html.dark body.dark .scrollbar-thumb {
    border-radius: 999px !important;
    background: #2B9B47 !important;
    opacity: .72;
}
html.dark body.dark .mm-sidebar .scrollbar-thumb {
    background: linear-gradient(180deg, #2B9B47, #1E7A35) !important;
}

/* Remove inherited ApexCharts blue from markers and controls. */
html.dark body.dark .winpass-admin-dashboard .apexcharts-legend-series:nth-child(1) .apexcharts-legend-marker {
    color: #F4E213 !important;
    background: #F4E213 !important;
}
html.dark body.dark .winpass-admin-dashboard .apexcharts-legend-series:nth-child(2) .apexcharts-legend-marker {
    color: #2B9B47 !important;
    background: #2B9B47 !important;
}
html.dark body.dark .winpass-admin-dashboard .apexcharts-legend-series:nth-child(3) .apexcharts-legend-marker {
    color: #E99F04 !important;
    background: #E99F04 !important;
}
html.dark body.dark .winpass-admin-dashboard .apexcharts-toolbar svg,
html.dark body.dark .winpass-admin-dashboard .apexcharts-menu-icon svg {
    fill: #C9D4CD !important;
}
html.dark body.dark .winpass-admin-dashboard .apexcharts-tooltip,
html.dark body.dark .winpass-admin-dashboard .apexcharts-xaxistooltip {
    border: 1px solid rgba(43,155,71,.28) !important;
    color: #F2F2F2 !important;
    background: #0D2819 !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.34) !important;
}

/* Ensure no old blue remains on generic dashboard separators. */
html.dark body.dark .winpass-admin-dashboard hr,
html.dark body.dark .winpass-admin-dashboard .border,
html.dark body.dark .winpass-admin-dashboard .border-top,
html.dark body.dark .winpass-admin-dashboard .border-bottom,
html.dark body.dark .winpass-admin-dashboard .border-left,
html.dark body.dark .winpass-admin-dashboard .border-right {
    border-color: rgba(43,155,71,.22) !important;
}


/* =========================================================
   WinPass root canvas reset - no inherited navy can leak
   ========================================================= */
html.dark {
    --dark: #071A11;
    --gray-dark: #071A11;
    --mm-dark: rgba(7,26,17,.72);
    --mm-primary: rgba(43,155,71,.12);
    --mm-info: rgba(43,155,71,.12);
    --skyblue: #2B9B47;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #071A11 !important;
    background-image: linear-gradient(145deg, #0B1117, #071A11) !important;
}
html.dark body.dark {
    position: relative;
    width: 100%;
    min-width: 0 !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #071A11 !important;
    background-image: linear-gradient(145deg, #0B1117, #071A11) !important;
}
html.dark body.dark > .wrapper {
    position: relative;
    width: 100%;
    min-width: 0 !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: clip !important;
    background-color: #071A11 !important;
    background-image: linear-gradient(145deg, #0B1117, #071A11) !important;
}
@supports not (overflow: clip) {
    html.dark body.dark > .wrapper {
        overflow-x: hidden !important;
    }
}
html.dark body.dark .content-page,
html.dark body.dark .mm-page-content,
html.dark body.dark .mm-main-content,
html.dark body.dark .mm-content-body {
    min-width: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background-color: #0B1117 !important;
}

/* Use physical edges instead of viewport calculations. */
@media (min-width: 1300px) {
    html.dark body.dark .mm-top-navbar {
        left: 260px !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
    }
    html.dark body.dark.sidebar-main .mm-top-navbar {
        left: 80px !important;
        right: 0 !important;
        width: auto !important;
    }
    html.dark body.dark .mm-footer {
        left: 260px !important;
        right: 0 !important;
        width: auto !important;
        margin-left: 0 !important;
    }
    html.dark body.dark.sidebar-main .mm-footer {
        left: 80px !important;
        right: 0 !important;
        width: auto !important;
        margin-left: 0 !important;
    }
}
@media (max-width: 1299.98px) {
    html.dark body.dark .mm-top-navbar,
    html.dark body.dark.sidebar-main .mm-top-navbar {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
    }
    html.dark body.dark .mm-footer,
    html.dark body.dark.sidebar-main .mm-footer {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        margin-left: 0 !important;
    }
}

/* Every outer shell edge uses the WinPass canvas. */
html.dark body.dark .mm-top-navbar,
html.dark body.dark .mm-sidebar,
html.dark body.dark .content-page,
html.dark body.dark .mm-footer {
    outline: 0 !important;
}
html.dark body.dark .mm-sidebar {
    left: 0 !important;
    margin: 0 !important;
}
html.dark body.dark .bg-dark {
    background-color: #071A11 !important;
}
html.dark body.dark .bg-primary {
    background-color: #2B9B47 !important;
}
html.dark body.dark .border-dark,
html.dark body.dark .border-secondary {
    border-color: rgba(43,155,71,.22) !important;
}

/* Bootstrap rows may not enlarge the viewport. */
html.dark body.dark .content-page > .container-fluid {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
html.dark body.dark .content-page > .container-fluid > .row {
    min-width: 0 !important;
}
html.dark body.dark .winpass-admin-dashboard > .row {
    width: auto !important;
    max-width: none !important;
}


/* =========================================================
   WinPass continuous surfaces - remove nested color blocks
   ========================================================= */

/* Sidebar is one continuous material; nested scrolling/menu layers are transparent. */
html.dark body.dark .mm-sidebar {
    background:
        radial-gradient(ellipse at 35% 4%, rgba(43,155,71,.12), transparent 28%),
        linear-gradient(180deg, #052B11 0%, #061F0E 58%, #041A0B 100%) !important;
}
html.dark body.dark .mm-sidebar .mm-sidebar-logo,
html.dark body.dark .mm-sidebar .data-scrollbar,
html.dark body.dark .mm-sidebar .scroll-content,
html.dark body.dark .mm-sidebar .scroll-content > div,
html.dark body.dark .mm-sidebar .mm-sidebar-menu,
html.dark body.dark .mm-sidebar .side-menu {
    border-color: rgba(43,155,71,.14) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
html.dark body.dark .mm-sidebar .mm-sidebar-logo {
    border-bottom: 1px solid rgba(43,155,71,.14) !important;
}
html.dark body.dark .mm-sidebar .mm-sidebar-menu {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 12px;
    padding-left: 12px;
}
html.dark body.dark .mm-sidebar-menu .side-menu > li {
    margin-right: 0 !important;
    margin-left: 0 !important;
}
/* Only intentional controls may have their own surface. */
html.dark body.dark .mm-sidebar-menu .side-menu > li:not(.active) > a:not(.active) {
    box-shadow: none !important;
}
html.dark body.dark .mm-sidebar-menu .side-menu > li:first-child > a {
    background: rgba(4,24,13,.48) !important;
    backdrop-filter: blur(4px);
}

/* Internal pages: one card surface; header/body/footer are transparent layers. */
html.dark body.dark .content-page .card {
    overflow: hidden;
    border: 1px solid rgba(43,155,71,.25) !important;
    background:
        radial-gradient(circle at 92% 2%, rgba(43,155,71,.08), transparent 32%),
        linear-gradient(145deg, rgba(16,53,32,.96), rgba(10,39,24,.97)) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.025) !important;
}
html.dark body.dark .content-page .card > .card-header,
html.dark body.dark .content-page .card > .card-body,
html.dark body.dark .content-page .card > .card-footer {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
html.dark body.dark .content-page .card > .card-header {
    border: 0 !important;
    border-bottom: 1px solid rgba(43,155,71,.20) !important;
}
html.dark body.dark .content-page .card > .card-footer {
    border: 0 !important;
    border-top: 1px solid rgba(43,155,71,.16) !important;
}

/* Form sections remain readable without creating additional solid rectangles. */
html.dark body.dark .content-page .new-user-info,
html.dark body.dark .content-page .new-user-info > .row,
html.dark body.dark .content-page .form-group,
html.dark body.dark .content-page .table-responsive {
    background-color: transparent !important;
}
html.dark body.dark .content-page .form-control,
html.dark body.dark .content-page .select2-container--default .select2-selection--single,
html.dark body.dark .content-page .select2-container--default .select2-selection--multiple {
    border: 1px solid rgba(43,155,71,.30) !important;
    color: #F2F2F2 !important;
    background: rgba(3,20,12,.78) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.20) !important;
}
html.dark body.dark .content-page .form-control:focus,
html.dark body.dark .content-page .select2-container--focus .select2-selection {
    border-color: #F4E213 !important;
    box-shadow: 0 0 0 3px rgba(244,226,19,.08) !important;
}

/* Footer visually continues the page instead of appearing as another slab. */
html.dark body.dark .mm-footer {
    background: linear-gradient(90deg, rgba(7,26,17,.98), rgba(11,17,23,.98), rgba(7,26,17,.98)) !important;
}


/* =========================================================
   WinPass single continuous content canvas
   The page owns the background; inner layout wrappers do not.
   ========================================================= */
html.dark body.dark .content-page {
    position: relative;
    isolation: isolate;
    background-color: #08140F !important;
    background-image:
        radial-gradient(ellipse at 88% 4%, rgba(43,155,71,.11) 0%, transparent 38%),
        radial-gradient(ellipse at 7% 92%, rgba(30,122,53,.08) 0%, transparent 34%),
        linear-gradient(145deg, #0B1117 0%, #08140F 50%, #071A11 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
html.dark body.dark .content-page > .container-fluid,
html.dark body.dark .content-page > .container,
html.dark body.dark .content-page .container-fluid.winpass-admin-dashboard,
html.dark body.dark .content-page .mm-page-content,
html.dark body.dark .content-page .mm-main-content,
html.dark body.dark .content-page .mm-content-body {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
html.dark body.dark .content-page > .container-fluid::before,
html.dark body.dark .content-page > .container-fluid::after,
html.dark body.dark .content-page .winpass-admin-dashboard::before,
html.dark body.dark .content-page .winpass-admin-dashboard::after {
    display: none !important;
    content: none !important;
    background: none !important;
}
html.dark body.dark .content-page > .container-fluid > .row,
html.dark body.dark .content-page > .container > .row,
html.dark body.dark .content-page > .container-fluid > .row > [class*="col-"],
html.dark body.dark .content-page > .container > .row > [class*="col-"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}
/* Remove accidental full-width color slabs, while preserving real cards. */
html.dark body.dark .content-page .page-wrapper,
html.dark body.dark .content-page .page-content,
html.dark body.dark .content-page .content-body,
html.dark body.dark .content-page .main-content {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}


/* =========================================================
   WinPass unified internal pages - cards, DataTables, forms
   ========================================================= */

/* Cards float softly over the single page canvas instead of becoming solid slabs. */
html.dark body.dark .content-page .card {
    border: 1px solid rgba(43,155,71,.22) !important;
    background:
        linear-gradient(145deg, rgba(13,48,29,.72), rgba(7,30,18,.66)) !important;
    box-shadow:
        0 18px 44px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
html.dark body.dark .content-page .card > .card-header {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html.dark body.dark .content-page .card > .card-header::after {
    content: "";
    position: absolute;
    right: 20px;
    bottom: 0;
    left: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43,155,71,.22), transparent);
}
html.dark body.dark .content-page .card > .card-body,
html.dark body.dark .content-page .card > .card-footer {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* DataTables must not introduce another large rectangular surface. */
html.dark body.dark .content-page .dataTables_wrapper,
html.dark body.dark .content-page .dataTables_wrapper > .row,
html.dark body.dark .content-page .dataTables_wrapper > .row > [class*="col-"],
html.dark body.dark .content-page .table-responsive,
html.dark body.dark .content-page .table-responsive > div,
html.dark body.dark .content-page table.dataTable,
html.dark body.dark .content-page .table {
    border-color: rgba(43,155,71,.18) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
html.dark body.dark .content-page .table-responsive {
    overflow: hidden;
    border: 1px solid rgba(43,155,71,.22) !important;
    border-radius: 16px;
}
html.dark body.dark .content-page table.dataTable thead,
html.dark body.dark .content-page .table thead {
    background: rgba(4,28,16,.66) !important;
}
html.dark body.dark .content-page table.dataTable thead th,
html.dark body.dark .content-page .table thead th {
    border-top: 0 !important;
    border-bottom: 1px solid rgba(43,155,71,.30) !important;
    color: #F2F2F2 !important;
    background: transparent !important;
}
html.dark body.dark .content-page table.dataTable tbody,
html.dark body.dark .content-page table.dataTable tbody tr,
html.dark body.dark .content-page table.dataTable tbody td,
html.dark body.dark .content-page .table tbody,
html.dark body.dark .content-page .table tbody tr,
html.dark body.dark .content-page .table tbody td {
    background: transparent !important;
    background-color: transparent !important;
}
html.dark body.dark .content-page table.dataTable tbody td,
html.dark body.dark .content-page .table tbody td {
    border-top: 1px solid rgba(43,155,71,.15) !important;
}
html.dark body.dark .content-page table.dataTable tbody tr:hover,
html.dark body.dark .content-page .table tbody tr:hover {
    background: rgba(43,155,71,.065) !important;
}

/* DataTable controls blend into the panel. */
html.dark body.dark .content-page .dataTables_length,
html.dark body.dark .content-page .dataTables_filter,
html.dark body.dark .content-page .dataTables_info,
html.dark body.dark .content-page .dataTables_paginate {
    color: #C9D4CD !important;
    background: transparent !important;
}
html.dark body.dark .content-page .dataTables_length select,
html.dark body.dark .content-page .dataTables_filter input {
    border: 1px solid rgba(43,155,71,.30) !important;
    color: #F2F2F2 !important;
    background: rgba(3,20,12,.74) !important;
}
html.dark body.dark .content-page .page-link,
html.dark body.dark .content-page .paginate_button {
    border-color: rgba(43,155,71,.24) !important;
    color: #C9D4CD !important;
    background: rgba(4,24,14,.45) !important;
}
html.dark body.dark .content-page .page-item.active .page-link,
html.dark body.dark .content-page .paginate_button.current {
    border-color: #2B9B47 !important;
    color: #052B11 !important;
    background: #F4E213 !important;
}

/* Form subsections use separators, not new solid blocks. */
html.dark body.dark .content-page .new-user-info,
html.dark body.dark .content-page fieldset,
html.dark body.dark .content-page .form-row,
html.dark body.dark .content-page .form-group {
    background: transparent !important;
}
html.dark body.dark .content-page hr {
    border-top-color: rgba(43,155,71,.18) !important;
}


/* =========================================================
   WinPass branded page loader
   ========================================================= */
html.dark body.dark #loading,
#loading {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 46%, rgba(43,155,71,.16), transparent 28%),
        linear-gradient(145deg, #0B1117 0%, #071A11 100%) !important;
    z-index: 999999 !important;
}
#loading-center {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important;
    background-image: url("../images/logo_winpass.webp") !important;
    background-position: center center !important;
    background-size: 180px auto !important;
    background-repeat: no-repeat !important;
}
#loading-center::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 232px;
    height: 232px;
    margin: -116px 0 0 -116px;
    border: 1px solid rgba(43,155,71,.20);
    border-top-color: #F4E213;
    border-right-color: rgba(244,226,19,.55);
    border-radius: 50%;
    box-shadow: 0 0 34px rgba(43,155,71,.10), inset 0 0 24px rgba(43,155,71,.06);
    animation: winpass-loader-spin 1.7s linear infinite;
}
#loading-center::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 258px;
    height: 258px;
    margin: -129px 0 0 -129px;
    border: 1px solid transparent;
    border-bottom-color: rgba(43,155,71,.48);
    border-left-color: rgba(43,155,71,.16);
    border-radius: 50%;
    animation: winpass-loader-spin-reverse 2.5s linear infinite;
}
@keyframes winpass-loader-spin {
    to { transform: rotate(360deg); }
}
@keyframes winpass-loader-spin-reverse {
    to { transform: rotate(-360deg); }
}
@media (max-width: 575.98px) {
    #loading-center {
        background-size: 140px auto !important;
    }
    #loading-center::before {
        width: 190px;
        height: 190px;
        margin: -95px 0 0 -95px;
    }
    #loading-center::after {
        width: 212px;
        height: 212px;
        margin: -106px 0 0 -106px;
    }
}
@media (prefers-reduced-motion: reduce) {
    #loading-center::before,
    #loading-center::after {
        animation: none !important;
    }
}


/* =========================================================
   WinPass Flatpickr date and time picker
   ========================================================= */
html.dark body.dark .flatpickr-calendar {
    border: 1px solid rgba(43,155,71,.48) !important;
    border-radius: 14px !important;
    color: #F2F2F2 !important;
    background:
        radial-gradient(circle at 90% 0%, rgba(43,155,71,.10), transparent 35%),
        linear-gradient(145deg, #0D2819, #071A11) !important;
    box-shadow: 0 20px 48px rgba(0,0,0,.48), 0 0 24px rgba(43,155,71,.08) !important;
}
html.dark body.dark .flatpickr-calendar::before {
    border-bottom-color: rgba(43,155,71,.48) !important;
}
html.dark body.dark .flatpickr-calendar::after {
    border-bottom-color: #0D2819 !important;
}
html.dark body.dark .flatpickr-calendar.arrowBottom::before {
    border-top-color: rgba(43,155,71,.48) !important;
    border-bottom-color: transparent !important;
}
html.dark body.dark .flatpickr-calendar.arrowBottom::after {
    border-top-color: #071A11 !important;
    border-bottom-color: transparent !important;
}
html.dark body.dark .flatpickr-months,
html.dark body.dark .flatpickr-months .flatpickr-month,
html.dark body.dark .flatpickr-weekdays,
html.dark body.dark .flatpickr-innerContainer,
html.dark body.dark .flatpickr-rContainer,
html.dark body.dark .flatpickr-days,
html.dark body.dark .dayContainer {
    border-color: rgba(43,155,71,.16) !important;
    color: #F2F2F2 !important;
    background: transparent !important;
}
html.dark body.dark .flatpickr-months {
    padding-top: 6px;
}
html.dark body.dark .flatpickr-current-month {
    color: #F2F2F2 !important;
}
html.dark body.dark .flatpickr-current-month .flatpickr-monthDropdown-months,
html.dark body.dark .flatpickr-current-month input.cur-year {
    border: 1px solid rgba(43,155,71,.22) !important;
    border-radius: 6px !important;
    color: #F2F2F2 !important;
    background: rgba(3,20,12,.72) !important;
}
html.dark body.dark .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
html.dark body.dark .flatpickr-current-month input.cur-year:hover,
html.dark body.dark .flatpickr-current-month input.cur-year:focus {
    border-color: rgba(244,226,19,.50) !important;
    background: rgba(43,155,71,.10) !important;
}
html.dark body.dark .flatpickr-current-month .flatpickr-monthDropdown-month {
    color: #F2F2F2 !important;
    background: #0D2819 !important;
}
html.dark body.dark .flatpickr-months .flatpickr-prev-month,
html.dark body.dark .flatpickr-months .flatpickr-next-month {
    color: #C9D4CD !important;
    fill: #C9D4CD !important;
}
html.dark body.dark .flatpickr-months .flatpickr-prev-month svg,
html.dark body.dark .flatpickr-months .flatpickr-next-month svg {
    fill: currentColor !important;
}
html.dark body.dark .flatpickr-months .flatpickr-prev-month:hover,
html.dark body.dark .flatpickr-months .flatpickr-next-month:hover {
    color: #F4E213 !important;
    fill: #F4E213 !important;
}
html.dark body.dark span.flatpickr-weekday {
    color: #C9D4CD !important;
    background: transparent !important;
    font-weight: 700;
}
html.dark body.dark .flatpickr-day {
    border-color: transparent !important;
    border-radius: 9px !important;
    color: #F2F2F2 !important;
    background: transparent !important;
}
html.dark body.dark .flatpickr-day.prevMonthDay,
html.dark body.dark .flatpickr-day.nextMonthDay {
    color: rgba(201,212,205,.32) !important;
}
html.dark body.dark .flatpickr-day:hover,
html.dark body.dark .flatpickr-day:focus,
html.dark body.dark .flatpickr-day.inRange {
    border-color: rgba(43,155,71,.32) !important;
    color: #F2F2F2 !important;
    background: rgba(43,155,71,.18) !important;
}
html.dark body.dark .flatpickr-day.today {
    border-color: #F4E213 !important;
    color: #F4E213 !important;
    background: rgba(244,226,19,.055) !important;
    box-shadow: 0 0 12px rgba(244,226,19,.08);
}
html.dark body.dark .flatpickr-day.today:hover,
html.dark body.dark .flatpickr-day.today:focus {
    color: #052B11 !important;
    background: #F4E213 !important;
}
html.dark body.dark .flatpickr-day.selected,
html.dark body.dark .flatpickr-day.startRange,
html.dark body.dark .flatpickr-day.endRange,
html.dark body.dark .flatpickr-day.selected:hover,
html.dark body.dark .flatpickr-day.startRange:hover,
html.dark body.dark .flatpickr-day.endRange:hover {
    border-color: #2B9B47 !important;
    color: #F2F2F2 !important;
    background: linear-gradient(135deg, #2B9B47, #1E7A35) !important;
    box-shadow: 0 5px 14px rgba(43,155,71,.22) !important;
}
html.dark body.dark .flatpickr-day.flatpickr-disabled,
html.dark body.dark .flatpickr-day.flatpickr-disabled:hover {
    color: rgba(201,212,205,.18) !important;
    background: transparent !important;
}
html.dark body.dark .flatpickr-time {
    border-top: 1px solid rgba(43,155,71,.28) !important;
    background: rgba(3,20,12,.34) !important;
}
html.dark body.dark .flatpickr-time input,
html.dark body.dark .flatpickr-time .flatpickr-am-pm {
    border-radius: 6px;
    color: #F2F2F2 !important;
    background: transparent !important;
}
html.dark body.dark .flatpickr-time input:hover,
html.dark body.dark .flatpickr-time input:focus,
html.dark body.dark .flatpickr-time .flatpickr-am-pm:hover,
html.dark body.dark .flatpickr-time .flatpickr-am-pm:focus {
    color: #F4E213 !important;
    background: rgba(43,155,71,.14) !important;
}
html.dark body.dark .flatpickr-time .numInputWrapper span.arrowUp::after {
    border-bottom-color: #2B9B47 !important;
}
html.dark body.dark .flatpickr-time .numInputWrapper span.arrowDown::after {
    border-top-color: #2B9B47 !important;
}
html.dark body.dark .flatpickr-time .flatpickr-time-separator {
    color: #2B9B47 !important;
}