/*
* Custom css
******************************************************************************/

/* Fateel brand typeface — Frutiger LT Arabic */
@font-face {
    font-family: 'Frutiger LT Arabic';
    src: url('/fonts/seu/FrutigerLTArabic45Light.woff2') format('woff2'), url('/fonts/seu/FrutigerLTArabic45Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Frutiger LT Arabic';
    src: url('/fonts/seu/FrutigerLTArabic55Roman.woff2') format('woff2'), url('/fonts/seu/FrutigerLTArabic55Roman.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Frutiger LT Arabic';
    src: url('/fonts/seu/FrutigerLTArabic65Bold.woff2') format('woff2'), url('/fonts/seu/FrutigerLTArabic65Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bs-font-sans-serif: 'Frutiger LT Arabic', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !important;
    --bs-body-font-family: 'Frutiger LT Arabic', 'Tajawal', sans-serif !important;
}

html,
body,
.menu,
.menu-item,
.menu-link,
.btn,
input,
select,
textarea,
.form-control,
h1, h2, h3, h4, h5, h6,
.card,
.table,
.dropdown-menu,
.modal,
.tooltip,
.popover {
    font-family: 'Frutiger LT Arabic', 'Tajawal', sans-serif !important;
}

.tag__container {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;       /* 4px 8px */
    border-radius: 0.75rem;       /* 12px */
    font-size: 0.875rem;          /* 14px */
    font-weight: 500;
    line-height: 1;
}

.tag-yellow {
    background-color: #FFF9C4;   /* light yellow */
    color: #FBC02D;              /* dark yellow text/icon */
}

.tag-red {
    background-color: #FFCDD2;  /* light red */
    color:            #C62828;  /* dark red text/icon */
}

.tag-green {
    background-color: #C8E6C9;  /* light green */
    color:            #2E7D32;  /* dark green text/icon */
}

.tag-blue {
    background-color: #BBDEFB;  /* light blue */
    color:            #1565C0;  /* dark blue text/icon */
}

.tag-gray {
    background-color: #ECEFF1;  /* light gray */
    color:            #455A64;  /* dark gray text/icon */
}

.tag-orange {
    background-color: #FFE0B2;  /* light orange */
    color:            #EF6C00;  /* dark orange text/icon */
}

.tag-purple {
    background-color: #E1BEE7;  /* light purple */
    color:            #6A1B9A;  /* dark purple text/icon */
}

.tag__container .size-24 {
    font-size: 1.5rem;           /* 24px */
    width: 1.5rem;
    height: 1.5rem;
}

.tag__text {
    margin-left: 0.25rem;         /* 4px spacing between icon & text */
}

/* Table headers, rows, row buttons, tabs and the "Add" button are styled in fateel-pages.css. */

/* Fateel shell surfaces: page/card headers, sidebar states, modals, and primary actions */
:root {
    --bs-gradient-main: var(--fx-glow);
    --fateel-gradient-main: var(--fx-glow);
    --fateel-shell-shadow: var(--fx-glow-shadow);
    --fateel-shell-tint: var(--fx-tint);
    --fateel-shell-tint-strong: var(--fx-tint-strong);
}

.bg-gradient-main,
.card-header.bg-gradient-main,
.card-header.bg-primary {
    background-color: var(--fx-primary) !important;
    background-image: var(--bs-gradient-main) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .18) !important;
    box-shadow: var(--fateel-shell-shadow);
}

.bg-gradient-main a,
.card-header.bg-gradient-main a,
.card-header.bg-primary a,
.bg-gradient-main .btn,
.card-header.bg-gradient-main .btn,
.card-header.bg-primary .btn {
    color: #ffffff !important;
}

.bg-gradient-main .btn-white,
.bg-gradient-main .btn-white:hover,
.bg-gradient-main .btn-white:focus,
.bg-gradient-main .btn-white.focus,
.bg-gradient-main .btn-white:active,
.bg-gradient-main .btn-white.active,
.bg-gradient-main .btn-white:disabled,
.bg-gradient-main .btn-white.disabled,
.card-header.bg-gradient-main .btn-white,
.card-header.bg-gradient-main .btn-white:hover,
.card-header.bg-gradient-main .btn-white:focus,
.card-header.bg-gradient-main .btn-white.focus,
.card-header.bg-gradient-main .btn-white:active,
.card-header.bg-gradient-main .btn-white.active,
.card-header.bg-gradient-main .btn-white:disabled,
.card-header.bg-gradient-main .btn-white.disabled,
.card-header.bg-primary .btn-white,
.card-header.bg-primary .btn-white:hover,
.card-header.bg-primary .btn-white:focus,
.card-header.bg-primary .btn-white.focus,
.card-header.bg-primary .btn-white:active,
.card-header.bg-primary .btn-white.active,
.card-header.bg-primary .btn-white:disabled,
.card-header.bg-primary .btn-white.disabled {
    background: #ffffff !important;
    background-image: none !important;
    border-color: var(--fx-table-head-border) !important;
    color: var(--fx-primary) !important;
    box-shadow: none !important;
}

.bg-gradient-main .btn-white:hover,
.bg-gradient-main .btn-white:focus,
.card-header.bg-gradient-main .btn-white:hover,
.card-header.bg-gradient-main .btn-white:focus,
.card-header.bg-primary .btn-white:hover,
.card-header.bg-primary .btn-white:focus {
    background: var(--fx-table-head-bg) !important;
    border-color: var(--fx-table-head-border) !important;
}

.bg-gradient-main .btn-white *,
.card-header.bg-gradient-main .btn-white *,
.card-header.bg-primary .btn-white * {
    color: var(--fx-primary) !important;
}

.bg-menu-theme .menu-inner > .menu-item.active::before {
    background-color: var(--fx-primary) !important;
}

.bg-menu-theme .menu-link.active,
.bg-menu-theme .menu-horizontal-prev.active,
.bg-menu-theme .menu-horizontal-next.active,
.bg-menu-theme .menu-item.active > .menu-link,
.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
.bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle {
    background: var(--bs-gradient-main) !important;
    color: #ffffff !important;
    box-shadow: var(--fateel-shell-shadow) !important;
}

[dir=rtl] .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
[dir=rtl] .bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle {
    background: var(--fateel-gradient-main) !important;
}

.bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle,
.bg-menu-theme .menu-inner .menu-item.active > .menu-link.menu-toggle,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item.active > .menu-link.menu-toggle,
html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item:not(.active) .menu-link:hover,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item:not(.active) .menu-link:hover {
    background-color: var(--fateel-shell-tint) !important;
    color: var(--fx-primary) !important;
}

.bg-menu-theme .menu-inner .menu-item.active.open > .menu-link.menu-toggle,
.bg-menu-theme .menu-inner .menu-item.active.open > .menu-link.menu-toggle .menu-icon,
.bg-menu-theme .menu-inner .menu-item.active.open > .menu-link.menu-toggle div,
.bg-menu-theme .menu-inner .menu-item.active > .menu-link:not(.menu-toggle),
.bg-menu-theme .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon,
.bg-menu-theme .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) div {
    color: #ffffff !important;
}

.bg-menu-theme .menu-inner .menu-item.active.open > .menu-link.menu-toggle {
    background: var(--fateel-gradient-main) !important;
    box-shadow: var(--fateel-shell-shadow) !important;
}

html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item:not(.active) > .menu-link:hover,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item:not(.active) > .menu-link:hover {
    background-color: var(--fateel-shell-tint) !important;
    color: var(--fx-primary) !important;
}

.bg-menu-theme .menu-inner .menu-sub .menu-item:not(.active) > .menu-link::before,
.bg-menu-theme .menu-inner .menu-sub .menu-item:not(.active) > .menu-link:hover::before,
.bg-menu-theme .menu-inner .menu-sub .menu-item:not(.active).open > .menu-link::before {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.modal-header,
.modal-header.bg-light,
.modal-header.bg-primary,
.modal-header.bg-gradient-main,
.modal-content .card-header.bg-gradient-main {
    background-color: var(--fx-primary) !important;
    background-image: var(--bs-gradient-main) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .18) !important;
}

.modal-header .modal-title,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6,
.modal-header .btn-close,
.modal-header a {
    color: #ffffff !important;
}

.modal .btn-close {
    background-color: rgba(255, 255, 255, .18) !important;
    border-radius: .5rem;
    opacity: 1;
}

.modal .btn-close:hover,
.modal .btn-close:focus {
    background-color: rgba(255, 255, 255, .28) !important;
    box-shadow: 0 0 0 .1875rem rgba(var(--fx-primary-rgb), .16) !important;
}

.btn-primary {
    --bs-btn-bg: var(--fx-primary);
    --bs-btn-border-color: var(--fx-primary);
    --bs-btn-hover-bg: var(--fx-primary-hover);
    --bs-btn-hover-border-color: var(--fx-primary-hover);
    --bs-btn-active-bg: var(--fx-navy);
    --bs-btn-active-border-color: var(--fx-navy);
    --bs-btn-focus-shadow-rgb: 111, 15, 61;
    background-color: var(--fx-primary) !important;
    border-color: var(--fx-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-label-primary:hover,
.btn-outline-primary:hover {
    background-color: var(--fx-primary-hover) !important;
    border-color: var(--fx-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 .1875rem rgba(var(--fx-primary-rgb), .16) !important;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--fx-navy) !important;
    border-color: var(--fx-navy) !important;
    color: #ffffff !important;
}

.btn-label-primary {
    color: var(--fx-primary) !important;
    background-color: var(--fateel-shell-tint) !important;
}

.btn-outline-primary {
    color: var(--fx-primary) !important;
    border-color: var(--fx-primary) !important;
}

.btn-primary-default,
.btn-primary-default:hover,
.btn-primary-default:focus,
.btn-primary-default.focus,
.btn-primary-default:active,
.btn-primary-default.active,
.btn-primary-default.show.dropdown-toggle,
.show > .btn-primary-default.dropdown-toggle {
    color: #ffffff !important;
    background: var(--fateel-gradient-main) !important;
    border-color: var(--fx-primary) !important;
    box-shadow: var(--fateel-shell-shadow) !important;
}

.btn-primary-default:hover {
    transform: none;
}

.btn-fateel-primary,
.btn-fateel-primary:hover,
.btn-fateel-primary:focus,
.btn-fateel-primary:active,
.btn-fateel-primary.active {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--fx-primary);
    --bs-btn-border-color: var(--fx-primary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--fx-primary-hover);
    --bs-btn-hover-border-color: var(--fx-primary-hover);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--fx-navy);
    --bs-btn-active-border-color: var(--fx-navy);
    --bs-btn-focus-shadow-rgb: 111, 15, 61;
    background-color: var(--fx-primary) !important;
    border-color: var(--fx-primary) !important;
    color: #ffffff !important;
}

.btn-fateel-primary:hover,
.btn-fateel-primary:focus {
    background-color: var(--fx-primary-hover) !important;
    border-color: var(--fx-primary-hover) !important;
    box-shadow: 0 0 0 .1875rem rgba(var(--fx-primary-rgb), .16) !important;
}

.btn-fateel-accent,
.btn-fateel-accent:hover,
.btn-fateel-accent:focus,
.btn-fateel-accent:active,
.btn-fateel-accent.active {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--fx-crimson);
    --bs-btn-border-color: var(--fx-crimson);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--fx-crimson-hover);
    --bs-btn-hover-border-color: var(--fx-crimson-hover);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--fx-primary);
    --bs-btn-active-border-color: var(--fx-primary);
    --bs-btn-focus-shadow-rgb: 168, 29, 62;
    background-color: var(--fx-crimson) !important;
    border-color: var(--fx-crimson) !important;
    color: #ffffff !important;
}

.btn-fateel-accent:hover,
.btn-fateel-accent:focus {
    background-color: var(--fx-crimson-hover) !important;
    border-color: var(--fx-crimson-hover) !important;
    box-shadow: 0 0 0 .1875rem rgba(168, 29, 62, .18) !important;
}

.btn-fateel-info,
.btn-fateel-info:hover,
.btn-fateel-info:focus,
.btn-fateel-info:active,
.btn-fateel-info.active {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--fx-navy);
    --bs-btn-border-color: var(--fx-navy);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--fx-navy-hover);
    --bs-btn-hover-border-color: var(--fx-navy-hover);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--fx-navy-active);
    --bs-btn-active-border-color: var(--fx-navy-active);
    --bs-btn-focus-shadow-rgb: 13, 18, 58;
    background-color: var(--fx-navy) !important;
    border-color: var(--fx-navy) !important;
    color: #ffffff !important;
}

.btn-fateel-info:hover,
.btn-fateel-info:focus {
    background-color: var(--fx-navy-hover) !important;
    border-color: var(--fx-navy-hover) !important;
    box-shadow: 0 0 0 .1875rem rgba(13, 18, 58, .18) !important;
}

.btn-fateel-light,
.btn-fateel-light:hover,
.btn-fateel-light:focus,
.btn-fateel-light:active,
.btn-fateel-light.active,
.bg-gradient-main .btn-fateel-light,
.bg-gradient-main .btn-fateel-light:hover,
.bg-gradient-main .btn-fateel-light:focus,
.card-header.bg-gradient-main .btn-fateel-light,
.card-header.bg-gradient-main .btn-fateel-light:hover,
.card-header.bg-gradient-main .btn-fateel-light:focus {
    --bs-btn-color: var(--fx-primary);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: var(--fx-table-head-border);
    --bs-btn-hover-color: var(--fx-primary);
    --bs-btn-hover-bg: var(--fx-table-head-bg);
    --bs-btn-hover-border-color: var(--fx-table-head-border);
    --bs-btn-active-color: var(--fx-primary);
    --bs-btn-active-bg: var(--fx-table-head-bg);
    --bs-btn-active-border-color: var(--fx-table-head-border);
    --bs-btn-focus-shadow-rgb: 111, 15, 61;
    background: #ffffff !important;
    background-image: none !important;
    border-color: var(--fx-table-head-border) !important;
    color: var(--fx-primary) !important;
    box-shadow: none !important;
}

.btn-fateel-light:hover,
.btn-fateel-light:focus,
.bg-gradient-main .btn-fateel-light:hover,
.bg-gradient-main .btn-fateel-light:focus,
.card-header.bg-gradient-main .btn-fateel-light:hover,
.card-header.bg-gradient-main .btn-fateel-light:focus {
    background: var(--fx-table-head-bg) !important;
    background-image: none !important;
    border-color: var(--fx-table-head-border) !important;
}

.btn-fateel-primary *,
.btn-fateel-accent *,
.btn-fateel-info * {
    color: #ffffff !important;
}

.btn-fateel-light * {
    color: var(--fx-primary) !important;
}

.bg-footer-theme .footer-link,
.bg-footer-theme .footer-link:hover,
.bg-footer-theme .footer-link:focus,
.content-footer .footer-link,
.content-footer .footer-link:hover,
.content-footer .footer-link:focus {
    color: var(--fx-primary) !important;
}

/* Keep functional feedback colors distinct from the Fateel brand palette (tokens work in light and dark). */
.alert-success { background-color: var(--fx-success-soft) !important; border-color: transparent !important; color: var(--fx-success-ink) !important; }
.alert-info { background-color: var(--fx-info-soft) !important; border-color: transparent !important; color: var(--fx-info-ink) !important; }
.alert-warning { background-color: var(--fx-warning-soft) !important; border-color: transparent !important; color: var(--fx-warning-ink) !important; }
.alert-danger { background-color: var(--fx-danger-soft) !important; border-color: transparent !important; color: var(--fx-danger-ink) !important; }

.bg-label-success { background-color: var(--fx-success-soft) !important; color: var(--fx-success-ink) !important; }
.bg-label-info { background-color: var(--fx-info-soft) !important; color: var(--fx-info-ink) !important; }
.bg-label-warning { background-color: var(--fx-warning-soft) !important; color: var(--fx-warning-ink) !important; }
.bg-label-danger { background-color: var(--fx-danger-soft) !important; color: var(--fx-danger-ink) !important; }

.toast-success { background-color: var(--fx-success) !important; }
.toast-error { background-color: var(--fx-danger) !important; }
.toast-info { background-color: var(--fx-info) !important; }
.toast-warning { background-color: var(--fx-warning) !important; }

.swal2-popup .swal2-icon.swal2-success {
    border-color: var(--fx-success) !important;
}

.swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--fx-success-soft) !important;
}

.swal2-popup .swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: var(--fx-success) !important;
}

.swal2-popup .swal2-icon.swal2-info {
    border-color: var(--fx-info) !important;
    color: var(--fx-info) !important;
}

.swal2-popup .swal2-icon.swal2-warning {
    border-color: var(--fx-warning) !important;
    color: var(--fx-warning) !important;
}

.swal2-popup .swal2-icon.swal2-error {
    border-color: var(--fx-danger) !important;
}

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

/* Fateel vendor overrides */
.select2-results__option[role=option][aria-selected=true] {
    background-color: var(--fx-primary) !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option--highlighted:not([aria-selected=true]),
.light-style .daterangepicker .ranges li:hover,
.dark-style .daterangepicker .ranges li:hover,
.light-style .twitter-typeahead .tt-suggestion:hover,
.light-style .twitter-typeahead .tt-suggestion:focus,
.dark-style .twitter-typeahead .tt-menu .tt-suggestion:hover,
.dark-style .twitter-typeahead .tt-menu .tt-suggestion:focus {
    background-color: rgba(var(--fx-primary-rgb), .08) !important;
    color: var(--fx-primary) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(var(--fx-primary-rgb), .16) !important;
    color: var(--fx-primary) !important;
}

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection,
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.light-style .bootstrap-select .dropdown-toggle:focus,
.dark-style .bootstrap-select .dropdown-toggle:focus {
    border-color: var(--fx-crimson) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--fx-primary-rgb), .18) !important;
}

.toast-message a {
    color: var(--fx-primary) !important;
}

.toast-message a:hover {
    color: rgba(var(--fx-primary-rgb), .6) !important;
}

.light-style .jstree .jstree-container-ul .jstree-icon.ti-file,
.dark-style .jstree .jstree-container-ul .jstree-icon.ti-file {
    color: var(--fx-primary) !important;
}

.light-style .fc-event-primary:not(.fc-list-event),
.dark-style .fc-event-primary:not(.fc-list-event) {
    color: var(--fx-primary) !important;
}

.light-style .fc-event-primary.fc-list-event .fc-list-event-dot,
.dark-style .fc-event-primary.fc-list-event .fc-list-event-dot {
    border-color: var(--fx-primary) !important;
}

.fc .fc-button-primary,
.fc .fc-button-primary:disabled {
    background-color: var(--fx-primary) !important;
    border-color: var(--fx-primary) !important;
}

.fc .fc-button-primary:hover,
.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: var(--fx-primary-hover) !important;
    border-color: var(--fx-primary-hover) !important;
    box-shadow: 0 0 0 .1875rem rgba(var(--fx-primary-rgb), .16) !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--fx-primary) !important;
    color: #ffffff !important;
}

.swal2-popup .swal2-styled.swal2-confirm,
.dark-style .swal2-popup .swal2-styled.swal2-confirm {
    background-color: var(--fx-primary) !important;
    border-color: var(--fx-primary) !important;
}

.fateel-sidebar-brand {
    gap: .65rem;
    min-width: 0;
}

.fateel-sidebar-logo {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px;
}

.fateel-sidebar-logo img {
    width: 48px;
    max-width: 48px;
    height: auto;
}

.fateel-sidebar-brand-text {
    color: var(--fx-primary);
    font-size: 0.7rem !important;
    line-height: 1.2;
    white-space: nowrap;
}

.fateel-auth-brand {
    gap: .5rem;
    line-height: 1.35;
    text-align: center;
}

.fateel-auth-logo {
    width: 132px !important;
    height: auto !important;
    margin-bottom: .75rem !important;
}

.fateel-auth-logo img {
    width: 100% !important;
    max-width: 132px;
    height: auto;
}

.fateel-auth-title {
    display: block;
    max-width: 100%;
    line-height: 1.5;
    padding-bottom: .15rem;
    white-space: normal;
}

/* Fateel financial account table headers */
.table > thead.bordered-orange.background-orange {
    --bs-table-color: #ffffff;
    --bs-table-bg: var(--fx-primary);
    --bs-table-border-color: rgba(255, 255, 255, .28);
    --bs-table-striped-bg: var(--fx-primary);
    --bs-table-striped-color: #ffffff;
    --bs-table-active-bg: var(--fx-primary-hover);
    --bs-table-active-color: #ffffff;
    --bs-table-hover-bg: var(--fx-primary-hover);
    --bs-table-hover-color: #ffffff;
    background-color: var(--fx-primary) !important;
    color: #ffffff !important;
}

.table > thead.bordered-orange.background-orange > tr > th,
.table > thead.bordered-orange.background-orange > tr > td,
.table > thead.bordered-orange.background-orange > tr > th:hover,
.table > thead.bordered-orange.background-orange > tr > td:hover,
.table > thead.bordered-orange.background-orange > tr > th.sorting,
.table > thead.bordered-orange.background-orange > tr > th.sorting_asc,
.table > thead.bordered-orange.background-orange > tr > th.sorting_desc {
    background-color: var(--fx-primary) !important;
    border-color: rgba(255, 255, 255, .28) !important;
    color: #ffffff !important;
}

.table > thead.bordered-orange.background-orange > tr > th *,
.table > thead.bordered-orange.background-orange > tr > td *,
.table > thead.bordered-orange.background-orange .dt-column-order::before,
.table > thead.bordered-orange.background-orange .dt-column-order::after {
    color: #ffffff !important;
}

/* Logo variants: the negative logo is shown on dark surfaces */
.fx-logo-on-dark { display: none; }
.dark-style .fx-logo-on-light { display: none; }
.dark-style .fx-logo-on-dark { display: inline-block; }