.nxl-header .header-wrapper .user-avtar {
    background: #f7f7f7;
    padding: 5px;
    transition: filter .2s ease, background-color .2s ease;
}

.no-data-chart {
    height: 350px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Keep scrollbars visible even before hover. */
html {
    scrollbar-color: #91a1b6 #f1f3f5;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 5px;
    height: 4px !important;
}

::-webkit-scrollbar-track {
    background: #f1f3f5;
}

::-webkit-scrollbar-thumb {
    background-color: #91a1b6;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #001327 !important;
}

html.minimenu .nxl-navigation:not(:hover) .nxl-submenu {
    display: none !important;
}

/* Shared statistics cards */
.module-stat-card {
    position: relative;
    overflow: hidden;
    border-width: 1px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.module-stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
}

.module-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 42, 67, .08);
}

.module-stat-card .avatar-text,
.reconciliation-stat-card .avatar-text {
    border-radius: 4px !important;
    border: 1px solid rgba(15, 42, 67, .12);
    box-shadow: none;
    flex: 0 0 auto;
}

.module-stat-primary {
    background: linear-gradient(135deg, #f7f9ff, #eef3ff);
    border-color: #dce4fb;
}

.module-stat-primary::before {
    background: #3454d1;
}

.module-stat-info {
    background: linear-gradient(135deg, #f4fcfc, #e8f8f8);
    border-color: #d1eeee;
}

.module-stat-info::before {
    background: #17a2b8;
}

.module-stat-success {
    background: linear-gradient(135deg, #f4fdf8, #e7f9ef);
    border-color: #cfefdc;
}

.module-stat-success::before {
    background: #12b76a;
}

.module-stat-danger {
    background: linear-gradient(135deg, #fff8f8, #ffeded);
    border-color: #f8d7da;
}

.module-stat-danger::before {
    background: #ef5350;
}

.module-stat-warning {
    background: linear-gradient(135deg, #fffaf3, #fff0dc);
    border-color: #f8dfbd;
}

.module-stat-warning::before {
    background: #f79009;
}

/* =========================================================
   ELPL LIGHT / DARK MODE
   ========================================================= */

.theme-mode-toggle {
    border: 0;
    background: transparent;
    color: #283043;
    cursor: pointer;
    transition:
        color .2s ease,
        border-color .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}

.theme-mode-toggle i,
.theme-mode-toggle svg {
    color: inherit !important;
    stroke: currentColor !important;
}

.nxl-header .theme-mode-toggle {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e9f0;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: none;
}

.nxl-header .theme-mode-toggle:hover,
.nxl-header .theme-mode-toggle:focus-visible {
    border-color: #cdd5df;
    background: #f3f6fa;
    color: #002b47;
    outline: none;
}

.auth-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1100;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: #ffffff;
    color: #283043;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}

.auth-theme-toggle:hover,
.auth-theme-toggle:focus-visible {
    border-color: #ccd5e1;
    background: #f8fafc;
    color: #002b47;
    outline: none;
}

/* Dark theme variables used by custom and third-party components. */
html.app-skin-dark {
    --elpl-dark-page: #0f172a;
    --elpl-dark-surface: #121a2d;
    --elpl-dark-surface-soft: #172136;
    --elpl-dark-surface-hover: #1b2740;
    --elpl-dark-border: #26334d;
    --elpl-dark-border-soft: #202c43;
    --elpl-dark-text: #e5eaf3;
    --elpl-dark-muted: #8f9bb0;
    --elpl-dark-primary: #6f8cff;
    --elpl-dark-primary-soft: rgba(111, 140, 255, .14);
    color-scheme: dark;
    scrollbar-color: #3c4d6b #0f172a;
}

html.app-skin-dark ::-webkit-scrollbar-track {
    background: #0f172a;
}

html.app-skin-dark ::-webkit-scrollbar-thumb {
    background-color: #3c4d6b;
}

html.app-skin-dark ::-webkit-scrollbar-thumb:hover {
    background-color: #586a8a !important;
}

html.app-skin-dark body,
html.app-skin-dark .nxl-container,
html.app-skin-dark .nxl-content,
html.app-skin-dark .main-content,
html.app-skin-dark .page-wrapper {
    background-color: var(--elpl-dark-page);
    color: var(--elpl-dark-text);
}

html.app-skin-dark .theme-mode-toggle {
    color: #f8fafc;
}

html.app-skin-dark .nxl-header .theme-mode-toggle {
    border-color: #2a3853;
    background: #182238;
}

html.app-skin-dark .nxl-header .theme-mode-toggle:hover,
html.app-skin-dark .nxl-header .theme-mode-toggle:focus-visible {
    border-color: #405273;
    background: #202c45;
    color: #ffffff;
}

html.app-skin-dark .auth-theme-toggle {
    border-color: #2a3853;
    background: #121a2d;
    color: #f8fafc;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}

html.app-skin-dark .auth-theme-toggle:hover,
html.app-skin-dark .auth-theme-toggle:focus-visible {
    border-color: #405273;
    background: #1a253b;
    color: #ffffff;
}

/* The supplied user.svg is black. Invert it only in dark mode. */
html.app-skin-dark .nxl-header .header-wrapper .user-avtar,
html.app-skin-dark .nxl-header img.user-avtar,
html.app-skin-dark .nxl-header img[src$="user.svg"] {
    filter: invert(1);
}

/* Navigation and header custom surfaces. */
html.app-skin-dark .nxl-navigation,
html.app-skin-dark .nxl-header,
html.app-skin-dark .nxl-header .header-wrapper {
    border-color: var(--elpl-dark-border-soft);
}

html.app-skin-dark .nxl-navigation {
    background: #10182a;
}

html.app-skin-dark .nxl-header,
html.app-skin-dark .nxl-header .header-wrapper {
    background: #121a2d;
}

html.app-skin-dark .nxl-header .nxl-head-link,
html.app-skin-dark .nxl-header .nxl-head-link i,
html.app-skin-dark .nxl-header .nxl-head-link svg {
    color: #dbe2ee;
    stroke: currentColor;
}

html.app-skin-dark .nxl-header .nxl-head-link:hover {
    background: #1a253b;
    color: #ffffff;
}

html.app-skin-dark .nxl-navigation .navbar-content,
html.app-skin-dark .nxl-navigation .m-header {
    border-color: var(--elpl-dark-border-soft);
    background: #10182a;
}

html.app-skin-dark .nxl-navigation .nxl-link {
    color: #aeb8ca;
}

html.app-skin-dark .nxl-navigation .nxl-link:hover,
html.app-skin-dark .nxl-navigation .nxl-item.active > .nxl-link,
html.app-skin-dark .nxl-navigation .nxl-item.nxl-trigger > .nxl-link {
    background: #19243a;
    color: #ffffff;
}

html.app-skin-dark .nxl-navigation .nxl-micon,
html.app-skin-dark .nxl-navigation .nxl-arrow {
    color: inherit;
}

html.app-skin-dark .nxl-navigation .nxl-submenu {
    background: transparent;
}

/* Typography and helper colors. */
html.app-skin-dark h1,
html.app-skin-dark h2,
html.app-skin-dark h3,
html.app-skin-dark h4,
html.app-skin-dark h5,
html.app-skin-dark h6,
html.app-skin-dark .card-title,
html.app-skin-dark .modal-title,
html.app-skin-dark .text-dark,
html.app-skin-dark .fw-bold,
html.app-skin-dark .fw-bolder {
    color: var(--elpl-dark-text) !important;
}

html.app-skin-dark .text-muted,
html.app-skin-dark .text-secondary,
html.app-skin-dark small,
html.app-skin-dark .form-text {
    color: var(--elpl-dark-muted) !important;
}

html.app-skin-dark a:not(.btn):not(.dropdown-item):not(.page-link):not(.nxl-link) {
    color: #91a7ff;
}

html.app-skin-dark hr,
html.app-skin-dark .border,
html.app-skin-dark .border-top,
html.app-skin-dark .border-end,
html.app-skin-dark .border-bottom,
html.app-skin-dark .border-start {
    border-color: var(--elpl-dark-border-soft) !important;
}

html.app-skin-dark .bg-white,
html.app-skin-dark .bg-light {
    background-color: var(--elpl-dark-surface) !important;
}

/* Cards, panels, dropdowns and overlays. */
html.app-skin-dark .card,
html.app-skin-dark .modal-content,
html.app-skin-dark .offcanvas,
html.app-skin-dark .dropdown-menu,
html.app-skin-dark .list-group-item,
html.app-skin-dark .toast,
html.app-skin-dark .popover,
html.app-skin-dark .datatable-shell {
    border-color: var(--elpl-dark-border-soft);
    background: var(--elpl-dark-surface);
    color: var(--elpl-dark-text);
}

html.app-skin-dark .card-header,
html.app-skin-dark .card-footer,
html.app-skin-dark .modal-header,
html.app-skin-dark .modal-footer,
html.app-skin-dark .offcanvas-header {
    border-color: var(--elpl-dark-border-soft);
    background: var(--elpl-dark-surface);
}

html.app-skin-dark .dropdown-divider,
html.app-skin-dark .list-group-item {
    border-color: var(--elpl-dark-border-soft);
}

html.app-skin-dark .dropdown-item {
    color: #cbd4e3;
}

html.app-skin-dark .dropdown-item:hover,
html.app-skin-dark .dropdown-item:focus,
html.app-skin-dark .dropdown-item.active,
html.app-skin-dark .dropdown-item:active {
    background: var(--elpl-dark-surface-hover);
    color: #ffffff;
}

html.app-skin-dark .dropdown-header {
    color: var(--elpl-dark-muted);
}

html.app-skin-dark .btn-close {
    filter: invert(1) grayscale(1) brightness(1.8);
}

/* Forms and input groups. */
html.app-skin-dark label,
html.app-skin-dark .form-label,
html.app-skin-dark .form-check-label {
    color: #cbd4e3;
}

html.app-skin-dark .form-control,
html.app-skin-dark .form-select,
html.app-skin-dark .input-group-text,
html.app-skin-dark .form-control-plaintext {
    border-color: var(--elpl-dark-border);
    background-color: #0f172a;
    color: var(--elpl-dark-text);
}

html.app-skin-dark .form-control::placeholder,
html.app-skin-dark textarea::placeholder {
    color: #6f7c93;
    opacity: 1;
}

html.app-skin-dark .form-control:focus,
html.app-skin-dark .form-select:focus {
    border-color: var(--elpl-dark-primary);
    background-color: #111b30;
    color: #ffffff;
    box-shadow: 0 0 0 .2rem rgba(111, 140, 255, .15);
}

html.app-skin-dark .form-control:disabled,
html.app-skin-dark .form-control[readonly],
html.app-skin-dark .form-select:disabled {
    border-color: #26334d;
    background-color: #182238;
    color: #8995a9;
    opacity: 1;
}

html.app-skin-dark .form-check-input {
    border-color: #445470;
    background-color: #10182a;
}

html.app-skin-dark .form-check-input:checked {
    border-color: #5d7cf2;
    background-color: #5d7cf2;
}

html.app-skin-dark input[type="date"],
html.app-skin-dark input[type="datetime-local"],
html.app-skin-dark input[type="time"] {
    color-scheme: dark;
}

/* Bootstrap tables and custom table wrappers. */
html.app-skin-dark .table {
    --bs-table-color: #cbd4e3;
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--elpl-dark-border-soft);
    --bs-table-striped-color: #dbe2ee;
    --bs-table-striped-bg: #151f33;
    --bs-table-hover-color: #ffffff;
    --bs-table-hover-bg: #19243a;
    color: #cbd4e3;
    border-color: var(--elpl-dark-border-soft);
}

html.app-skin-dark .table > :not(caption) > * > * {
    border-bottom-color: var(--elpl-dark-border-soft);
    background-color: transparent;
    color: inherit;
}

html.app-skin-dark .table thead th,
html.app-skin-dark .table-light,
html.app-skin-dark .table-light > th,
html.app-skin-dark .table-light > td {
    --bs-table-bg: #172136;
    --bs-table-color: #eef2f8;
    border-color: var(--elpl-dark-border);
    background: #172136 !important;
    color: #eef2f8 !important;
}

html.app-skin-dark .module-table-scroll,
html.app-skin-dark .table-responsive {
    scrollbar-color: #3c4d6b #121a2d;
}

/* DataTables controls and processing loader. */
html.app-skin-dark .dataTables_wrapper,
html.app-skin-dark .dataTables_wrapper .dataTables_info,
html.app-skin-dark .dataTables_wrapper .dataTables_length label,
html.app-skin-dark .dataTables_wrapper .dataTables_filter label {
    color: var(--elpl-dark-muted) !important;
}

html.app-skin-dark .dataTables_wrapper .dataTables_length select,
html.app-skin-dark .dataTables_wrapper .dataTables_filter input {
    border-color: var(--elpl-dark-border) !important;
    background: #0f172a !important;
    color: var(--elpl-dark-text) !important;
}

html.app-skin-dark .dataTables_wrapper .dataTables_paginate .paginate_button,
html.app-skin-dark .dataTables_wrapper .pagination .page-link,
html.app-skin-dark .dataTable-pagination a {
    border-color: var(--elpl-dark-border) !important;
    background: #121a2d !important;
    color: #aeb8ca !important;
}

html.app-skin-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
html.app-skin-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.app-skin-dark .dataTables_wrapper .pagination .page-item.active .page-link,
html.app-skin-dark .dataTable-pagination .active a {
    border-color: #5d7cf2 !important;
    background: #5d7cf2 !important;
    color: #ffffff !important;
}

html.app-skin-dark div.dataTables_processing,
html.app-skin-dark .dataTables_processing {
    border-color: var(--elpl-dark-border) !important;
    background: rgba(18, 26, 45, .96) !important;
    color: #dbe2ee !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

html.app-skin-dark div.dataTables_processing > div:last-child > div,
html.app-skin-dark .dataTables_processing > div:last-child > div {
    background: #8ca7ff !important;
}

/* Select2. */
html.app-skin-dark .select2-container--default .select2-selection--single,
html.app-skin-dark .select2-container--default .select2-selection--multiple,
html.app-skin-dark .select2-dropdown,
html.app-skin-dark .select2-search--dropdown .select2-search__field {
    border-color: var(--elpl-dark-border) !important;
    background: #0f172a !important;
    color: var(--elpl-dark-text) !important;
}

html.app-skin-dark .select2-container--default .select2-selection--single .select2-selection__rendered,
html.app-skin-dark .select2-container--default .select2-selection--multiple .select2-selection__choice,
html.app-skin-dark .select2-container--default .select2-search--inline .select2-search__field {
    color: var(--elpl-dark-text) !important;
}

html.app-skin-dark .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #6f7c93 !important;
}

html.app-skin-dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-color: #354563 !important;
    background: #1a2740 !important;
}

html.app-skin-dark .select2-container--default .select2-results__option {
    background: #121a2d;
    color: #cbd4e3;
}

html.app-skin-dark .select2-container--default .select2-results__option--highlighted[aria-selected],
html.app-skin-dark .select2-container--default .select2-results__option--selected {
    background: #243452 !important;
    color: #ffffff !important;
}

html.app-skin-dark .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: #aeb8ca;
}

/* Date range picker. */
html.app-skin-dark .daterangepicker {
    border-color: var(--elpl-dark-border);
    background: var(--elpl-dark-surface);
    color: var(--elpl-dark-text);
}

html.app-skin-dark .daterangepicker::before {
    border-bottom-color: var(--elpl-dark-border);
}

html.app-skin-dark .daterangepicker::after {
    border-bottom-color: var(--elpl-dark-surface);
}

html.app-skin-dark .daterangepicker .calendar-table,
html.app-skin-dark .daterangepicker td.off,
html.app-skin-dark .daterangepicker td.off.in-range,
html.app-skin-dark .daterangepicker td.off.start-date,
html.app-skin-dark .daterangepicker td.off.end-date {
    border-color: var(--elpl-dark-border-soft);
    background: var(--elpl-dark-surface);
    color: #657189;
}

html.app-skin-dark .daterangepicker td.available:hover,
html.app-skin-dark .daterangepicker th.available:hover,
html.app-skin-dark .daterangepicker .ranges li:hover {
    background: var(--elpl-dark-surface-hover);
    color: #ffffff;
}

html.app-skin-dark .daterangepicker .ranges li.active,
html.app-skin-dark .daterangepicker td.active,
html.app-skin-dark .daterangepicker td.active:hover {
    background: #5d7cf2;
    color: #ffffff;
}

html.app-skin-dark .daterangepicker select.monthselect,
html.app-skin-dark .daterangepicker select.yearselect {
    border-color: var(--elpl-dark-border);
    background: #0f172a;
    color: var(--elpl-dark-text);
}

/* ApexCharts. */
html.app-skin-dark .apexcharts-canvas text,
html.app-skin-dark .apexcharts-text,
html.app-skin-dark .apexcharts-legend-text,
html.app-skin-dark .apexcharts-datalabel-label,
html.app-skin-dark .apexcharts-datalabel-value {
    fill: #aeb8ca !important;
    color: #aeb8ca !important;
}

html.app-skin-dark .apexcharts-gridline,
html.app-skin-dark .apexcharts-xaxis-tick,
html.app-skin-dark .apexcharts-yaxis-tick {
    stroke: #2a3853 !important;
}

html.app-skin-dark .apexcharts-tooltip,
html.app-skin-dark .apexcharts-xaxistooltip,
html.app-skin-dark .apexcharts-yaxistooltip {
    border-color: var(--elpl-dark-border) !important;
    background: #121a2d !important;
    color: var(--elpl-dark-text) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35) !important;
}

html.app-skin-dark .apexcharts-tooltip-title {
    border-bottom-color: var(--elpl-dark-border) !important;
    background: #172136 !important;
}

html.app-skin-dark .apexcharts-menu {
    border-color: var(--elpl-dark-border) !important;
    background: #121a2d !important;
}

html.app-skin-dark .apexcharts-menu-item:hover {
    background: #1b2740 !important;
}

/* SweetAlert2. */
html.app-skin-dark .swal2-popup {
    border: 1px solid var(--elpl-dark-border);
    background: #121a2d;
    color: var(--elpl-dark-text);
}

html.app-skin-dark .swal2-title,
html.app-skin-dark .swal2-html-container,
html.app-skin-dark .swal2-content {
    color: var(--elpl-dark-text) !important;
}

html.app-skin-dark .swal2-input,
html.app-skin-dark .swal2-textarea,
html.app-skin-dark .swal2-select {
    border-color: var(--elpl-dark-border) !important;
    background: #0f172a !important;
    color: var(--elpl-dark-text) !important;
}

html.app-skin-dark .swal2-close {
    color: #aeb8ca;
}

/* Alerts, badges and pagination surfaces. */
html.app-skin-dark .alert-light {
    border-color: var(--elpl-dark-border);
    background: #172136;
    color: #cbd4e3;
}

html.app-skin-dark .breadcrumb {
    color: var(--elpl-dark-muted);
}

html.app-skin-dark .breadcrumb-item,
html.app-skin-dark .breadcrumb-item a {
    color: #9aa7bd;
}

html.app-skin-dark .breadcrumb-item.active {
    color: #e5eaf3;
}

html.app-skin-dark .page-link {
    border-color: var(--elpl-dark-border);
    background: var(--elpl-dark-surface);
    color: #aeb8ca;
}

html.app-skin-dark .page-link:hover,
html.app-skin-dark .page-item.active .page-link {
    border-color: #5d7cf2;
    background: #5d7cf2;
    color: #ffffff;
}

html.app-skin-dark .page-item.disabled .page-link {
    border-color: var(--elpl-dark-border-soft);
    background: #151f33;
    color: #657189;
}

/* Shared statistic cards in dark mode. */
html.app-skin-dark .module-stat-card,
html.app-skin-dark .reconciliation-stat-card {
    border-color: #283650 !important;
    background: linear-gradient(135deg, #172136, #121a2d) !important;
    color: var(--elpl-dark-text);
    box-shadow: none;
}

html.app-skin-dark .module-stat-card:hover,
html.app-skin-dark .reconciliation-stat-card:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
}

html.app-skin-dark .module-stat-card .avatar-text,
html.app-skin-dark .reconciliation-stat-card .avatar-text {
    border-color: #34435f;
    background: #202c45 !important;
}

html.app-skin-dark .module-stat-card .text-muted,
html.app-skin-dark .reconciliation-stat-card .text-muted {
    color: #8f9bb0 !important;
}

html.app-skin-dark .module-stat-primary,
html.app-skin-dark .reconciliation-stat-primary {
    background: linear-gradient(135deg, #18213c, #141c31) !important;
}

html.app-skin-dark .module-stat-info,
html.app-skin-dark .reconciliation-stat-info {
    background: linear-gradient(135deg, #112a33, #121f2d) !important;
}

html.app-skin-dark .module-stat-success,
html.app-skin-dark .reconciliation-stat-success {
    background: linear-gradient(135deg, #122b25, #121f28) !important;
}

html.app-skin-dark .module-stat-danger,
html.app-skin-dark .reconciliation-stat-danger {
    background: linear-gradient(135deg, #321d28, #201a28) !important;
}

html.app-skin-dark .module-stat-warning,
html.app-skin-dark .reconciliation-stat-warning {
    background: linear-gradient(135deg, #33281b, #211f27) !important;
}

html.app-skin-dark .reconciliation-stat-secondary {
    border-color: #3b3158 !important;
    background: linear-gradient(135deg, #261f3d, #191a2d) !important;
}

/* File dropzone overrides. The component has page-level styles, so these
   rules intentionally use !important to keep dark mode consistent. */
html.app-skin-dark .elpl-dropzone {
    border-color: #34435f !important;
    background:
        radial-gradient(circle at top right, rgba(23, 198, 102, .08), transparent 34%),
        linear-gradient(135deg, #141e32 0%, #10182a 58%, #12251f 100%) !important;
}

html.app-skin-dark .elpl-dropzone::before {
    background-image: radial-gradient(#34435f 1px, transparent 1px) !important;
    opacity: .28;
}

html.app-skin-dark .elpl-dropzone:hover,
html.app-skin-dark .elpl-dropzone.is-dragging {
    border-color: #17c666 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .28) !important;
}

html.app-skin-dark .elpl-dropzone-icon {
    color: #dbe7f5 !important;
    background: linear-gradient(145deg, #23314c, #172136) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25) !important;
}

html.app-skin-dark .elpl-dropzone-icon-badge {
    border-color: #172136 !important;
}

html.app-skin-dark .elpl-dropzone-copy h6,
html.app-skin-dark .elpl-selected-copy strong {
    color: var(--elpl-dark-text) !important;
}

html.app-skin-dark .elpl-dropzone-copy p,
html.app-skin-dark .elpl-dropzone-copy span,
html.app-skin-dark .elpl-selected-copy span {
    color: var(--elpl-dark-muted) !important;
}

html.app-skin-dark .elpl-selected-icon {
    background: linear-gradient(145deg, #2d4770, #1d3150) !important;
}

html.app-skin-dark .elpl-selected-status {
    color: #72d99e !important;
    background: rgba(23, 198, 102, .13) !important;
}

html.app-skin-dark .elpl-remove-file {
    border-color: #3a2d40 !important;
    background: #281c2a !important;
}

/* Login page. */
html.app-skin-dark .auth-creative-wrapper,
html.app-skin-dark .auth-creative-inner {
    background: #0f172a;
}

html.app-skin-dark .creative-card-wrapper .card,
html.app-skin-dark .creative-card-body {
    border-color: var(--elpl-dark-border-soft);
    background: #121a2d;
    color: var(--elpl-dark-text);
}

html.app-skin-dark .creative-card-wrapper .bg-white.rounded-circle {
    background: #182238 !important;
}

html.app-skin-dark .creative-card-body .form-control {
    border-color: #2a3853;
    background: #0f172a;
    color: #e5eaf3;
}

html.app-skin-dark .creative-card-body .form-control:focus {
    border-color: #6f8cff;
    box-shadow: 0 0 0 .2rem rgba(111, 140, 255, .15);
}

/* Keep brand, product and uploaded content images unchanged. */
html.app-skin-dark .right_side_logo_image,
html.app-skin-dark .middle-img,
html.app-skin-dark .nxl-navigation .m-header img,
html.app-skin-dark .card img:not(.user-avtar) {
    filter: none;
}

@media (max-width: 575.98px) {
    .auth-theme-toggle {
        top: 14px;
        right: 14px;
        width: 40px;
        height: 40px;
    }

    .nxl-header .theme-mode-toggle {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }
}