/*
 * eBiz MNC dark mode overrides.
 * Loaded after the legacy theme and shell files so dark mode wins consistently.
 */

html[data-bank-color-mode="dark"] {
  color-scheme: dark;
  --bank-dark-bg: #07111f;
  --bank-dark-shell: #0b1628;
  --bank-dark-surface: #101d31;
  --bank-dark-surface-2: #14243b;
  --bank-dark-surface-3: #1a2d49;
  --bank-dark-border: #2a3e5b;
  --bank-dark-text: #edf4ff;
  --bank-dark-muted: #a9b8cc;
  --bank-dark-link: #8fb9ff;
  --bank-dark-accent: #f0b84f;
  --bank-dark-primary: #102d50;
  --bank-dark-table-head: #89b4f8;
}

html[data-bank-color-mode="dark"] body,
html[data-bank-color-mode="dark"] body#capture {
  background: var(--bank-dark-bg) !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] body#capture > #capture2,
html[data-bank-color-mode="dark"] body#capture > #capture2 > main.container-fluid,
html[data-bank-color-mode="dark"] #capture2,
html[data-bank-color-mode="dark"] main.container-fluid {
  background: var(--bank-dark-bg) !important;
}

html[data-bank-color-mode="dark"] body#capture > #capture2 > .navbar.headerNew,
html[data-bank-color-mode="dark"] .headerNew,
html[data-bank-color-mode="dark"] .fixed-top,
html[data-bank-color-mode="dark"] .navbar.fixed-top {
  border-bottom: 1px solid var(--bank-dark-border) !important;
  background: rgba(9, 20, 36, .98) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45) !important;
}

html[data-bank-color-mode="dark"] .headerNew .navbar-all-text > .nav-item:first-child .btn,
html[data-bank-color-mode="dark"] .headerNew .navbar-toggler,
html[data-bank-color-mode="dark"] .headerNew .username-drop > .nav-link,
html[data-bank-color-mode="dark"] .headerNew .btn-group[aria-label="Basic example"],
html[data-bank-color-mode="dark"] .bank-theme-toggle {
  border-color: var(--bank-dark-border) !important;
  background: var(--bank-dark-surface-2) !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] .bank-theme-toggle {
  min-width: 42px;
  width: 42px;
  height: 42px;
  padding: 0 !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px rgba(240, 184, 79, .22), 0 8px 20px rgba(0, 0, 0, .26) !important;
}

html[data-bank-color-mode="dark"] .bank-theme-toggle:hover,
html[data-bank-color-mode="dark"] .bank-theme-toggle:focus,
html[data-bank-color-mode="dark"] .headerNew .username-drop > .nav-link:hover,
html[data-bank-color-mode="dark"] .headerNew .username-drop.show > .nav-link,
html[data-bank-color-mode="dark"] .headerNew .nav-item > .nav-link:hover {
  border-color: rgba(240, 184, 79, .55) !important;
  background: var(--bank-dark-surface-3) !important;
  color: #ffffff !important;
}

html[data-bank-color-mode="dark"] .headerNew #search-box,
html[data-bank-color-mode="dark"] .headerNew #search_box_icon,
html[data-bank-color-mode="dark"] #search-box,
html[data-bank-color-mode="dark"] #search_box_icon {
  border-color: var(--bank-dark-border) !important;
  background: #091426 !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] #search-box::placeholder {
  color: #8291a8 !important;
}

html[data-bank-color-mode="dark"] #leftpanel,
html[data-bank-color-mode="dark"] #centerpanel,
html[data-bank-color-mode="dark"] #rightpanel,
html[data-bank-color-mode="dark"] .leftpanel,
html[data-bank-color-mode="dark"] .rightpanel,
html[data-bank-color-mode="dark"] .center-panel-scroll {
  background: var(--bank-dark-bg) !important;
  color: var(--bank-dark-text) !important;
  border-color: var(--bank-dark-border) !important;
}

html[data-bank-color-mode="dark"] #leftpanel {
  background: #081323 !important;
  border-right: 1px solid var(--bank-dark-border) !important;
}

html[data-bank-color-mode="dark"] #rightpanel {
  background: #081323 !important;
  border-left: 1px solid var(--bank-dark-border) !important;
}

html[data-bank-color-mode="dark"] .dropdown-menu,
html[data-bank-color-mode="dark"] .card,
html[data-bank-color-mode="dark"] .panel,
html[data-bank-color-mode="dark"] .modal-content,
html[data-bank-color-mode="dark"] .list-group-item,
html[data-bank-color-mode="dark"] .table-responsive,
html[data-bank-color-mode="dark"] .grid,
html[data-bank-color-mode="dark"] .item-content,
html[data-bank-color-mode="dark"] .bg-white,
html[data-bank-color-mode="dark"] .bg-light,
html[data-bank-color-mode="dark"] .bg-bsi-white {
  border-color: var(--bank-dark-border) !important;
  background: var(--bank-dark-surface) !important;
  color: var(--bank-dark-text) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28) !important;
}

html[data-bank-color-mode="dark"] .card-header,
html[data-bank-color-mode="dark"] .panel-heading,
html[data-bank-color-mode="dark"] .panel-header,
html[data-bank-color-mode="dark"] .modal-body,
html[data-bank-color-mode="dark"] .modal-footer {
  border-color: var(--bank-dark-border) !important;
  background: var(--bank-dark-surface-2) !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] #menuDropdown > .btn,
html[data-bank-color-mode="dark"] .extra-menu-item,
html[data-bank-color-mode="dark"] .main-drop,
html[data-bank-color-mode="dark"] .dropdown-menu.main-drop .dropdown-item {
  border-color: #244263 !important;
  background: #0e223d !important;
  color: #d8e8ff !important;
}

html[data-bank-color-mode="dark"] #menuDropdown > .btn,
html[data-bank-color-mode="dark"] .bg-teal-600,
html[data-bank-color-mode="dark"] .bg-theme-bsi-green,
html[data-bank-color-mode="dark"] .btn-primary,
html[data-bank-color-mode="dark"] button[type="submit"]:not(.btn-link) {
  border-color: #315176 !important;
  background: linear-gradient(180deg, #12345b 0%, #0c243f 100%) !important;
  color: #ffffff !important;
}

html[data-bank-color-mode="dark"] #menuDropdown > .btn:hover,
html[data-bank-color-mode="dark"] .dropdown-menu.main-drop .dropdown-item:hover,
html[data-bank-color-mode="dark"] .hov-bg-teal-700:hover,
html[data-bank-color-mode="dark"] .hov-bg-gray-200:hover,
html[data-bank-color-mode="dark"] .dropdown-item:hover,
html[data-bank-color-mode="dark"] .dropdown-item:focus {
  background: #183456 !important;
  color: #ffffff !important;
}

html[data-bank-color-mode="dark"] h1,
html[data-bank-color-mode="dark"] h2,
html[data-bank-color-mode="dark"] h3,
html[data-bank-color-mode="dark"] h4,
html[data-bank-color-mode="dark"] h5,
html[data-bank-color-mode="dark"] h6,
html[data-bank-color-mode="dark"] .h1,
html[data-bank-color-mode="dark"] .h2,
html[data-bank-color-mode="dark"] .h3,
html[data-bank-color-mode="dark"] .h4,
html[data-bank-color-mode="dark"] .h5,
html[data-bank-color-mode="dark"] .h6,
html[data-bank-color-mode="dark"] label,
html[data-bank-color-mode="dark"] .control-label,
html[data-bank-color-mode="dark"] .form-label,
html[data-bank-color-mode="dark"] .left-section-text {
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] p,
html[data-bank-color-mode="dark"] span,
html[data-bank-color-mode="dark"] td,
html[data-bank-color-mode="dark"] th,
html[data-bank-color-mode="dark"] li,
html[data-bank-color-mode="dark"] div {
  border-color: inherit;
}

html[data-bank-color-mode="dark"] a,
html[data-bank-color-mode="dark"] .custom-link,
html[data-bank-color-mode="dark"] .text-primary,
html[data-bank-color-mode="dark"] .text-teal-600,
html[data-bank-color-mode="dark"] .headerNew .username-drop .text-teal-600,
html[data-bank-color-mode="dark"] #centerpanel a[href]:not(.btn):not(.nav-link):not(.dropdown-item):not(.custom-link):not(.page-link):not([role="button"]) {
  color: var(--bank-dark-link) !important;
}

html[data-bank-color-mode="dark"] .frontend-login .bank-promotion p {
  color: #c5d6ed !important;
}

html[data-bank-color-mode="dark"] .text-theme-bsi-yellow {
  color: var(--bank-dark-accent) !important;
}

html[data-bank-color-mode="dark"] .text-theme-bsi-grey,
html[data-bank-color-mode="dark"] .text-gray-400,
html[data-bank-color-mode="dark"] .text-gray-500,
html[data-bank-color-mode="dark"] .headerNew .username-drop .text-theme-bsi-yellow {
  color: var(--bank-dark-muted) !important;
}

html[data-bank-color-mode="dark"] input[type="text"],
html[data-bank-color-mode="dark"] input[type="password"],
html[data-bank-color-mode="dark"] input[type="email"],
html[data-bank-color-mode="dark"] input[type="number"],
html[data-bank-color-mode="dark"] input[type="search"],
html[data-bank-color-mode="dark"] input[type="date"],
html[data-bank-color-mode="dark"] select,
html[data-bank-color-mode="dark"] textarea,
html[data-bank-color-mode="dark"] .form-control,
html[data-bank-color-mode="dark"] .input-group-text,
html[data-bank-color-mode="dark"] .bootstrap-select > .dropdown-toggle {
  border-color: var(--bank-dark-border) !important;
  background-color: #091426 !important;
  color: var(--bank-dark-text) !important;
  box-shadow: none !important;
}

html[data-bank-color-mode="dark"] input:focus,
html[data-bank-color-mode="dark"] select:focus,
html[data-bank-color-mode="dark"] textarea:focus,
html[data-bank-color-mode="dark"] .form-control:focus {
  border-color: var(--bank-dark-accent) !important;
  background-color: #0d1a2e !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(240, 184, 79, .18) !important;
}

html[data-bank-color-mode="dark"] input::placeholder,
html[data-bank-color-mode="dark"] textarea::placeholder,
html[data-bank-color-mode="dark"] .form-control::placeholder {
  color: #8190a8 !important;
}

html[data-bank-color-mode="dark"] input[readonly],
html[data-bank-color-mode="dark"] input:disabled,
html[data-bank-color-mode="dark"] select:disabled,
html[data-bank-color-mode="dark"] textarea:disabled,
html[data-bank-color-mode="dark"] .form-control:disabled {
  background-color: #17243a !important;
  color: #aebbd0 !important;
  opacity: 1 !important;
}

html[data-bank-color-mode="dark"] table,
html[data-bank-color-mode="dark"] .table,
html[data-bank-color-mode="dark"] table.dataTable {
  border-color: var(--bank-dark-border) !important;
  background: var(--bank-dark-surface) !important;
  color: var(--bank-dark-text) !important;
  box-shadow: none !important;
}

html[data-bank-color-mode="dark"] table thead th,
html[data-bank-color-mode="dark"] .table thead th,
html[data-bank-color-mode="dark"] table.dataTable thead th,
html[data-bank-color-mode="dark"] .table-header,
html[data-bank-color-mode="dark"] tr.header-list {
  border-color: #2f5282 !important;
  background: #84aff2 !important;
  color: #07111f !important;
}

html[data-bank-color-mode="dark"] table tbody td,
html[data-bank-color-mode="dark"] .table tbody td,
html[data-bank-color-mode="dark"] table.dataTable tbody td {
  border-color: var(--bank-dark-border) !important;
  background: var(--bank-dark-surface) !important;
  color: #e7effc !important;
}

html[data-bank-color-mode="dark"] table tbody tr:hover td,
html[data-bank-color-mode="dark"] .table tbody tr:hover td,
html[data-bank-color-mode="dark"] table.table-striped tbody tr:nth-child(even) td,
html[data-bank-color-mode="dark"] .table-striped tbody tr:nth-child(even) td {
  background: var(--bank-dark-surface-2) !important;
}

html[data-bank-color-mode="dark"] .select2-container--default .select2-selection--single,
html[data-bank-color-mode="dark"] .select2-container--default .select2-selection--multiple,
html[data-bank-color-mode="dark"] .select2-dropdown,
html[data-bank-color-mode="dark"] .select2-search--dropdown .select2-search__field {
  border-color: var(--bank-dark-border) !important;
  background: #091426 !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-bank-color-mode="dark"] .select2-container--default .select2-results__option {
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #315f96 !important;
  color: #ffffff !important;
}

html[data-bank-color-mode="dark"] .alert,
html[data-bank-color-mode="dark"] .well,
html[data-bank-color-mode="dark"] mark,
html[data-bank-color-mode="dark"] #running_text,
html[data-bank-color-mode="dark"] #running_text marquee,
html[data-bank-color-mode="dark"] body#capture #running_text,
html[data-bank-color-mode="dark"] body#capture #running_text marquee {
  border-color: rgba(240, 184, 79, .35) !important;
  background: linear-gradient(180deg, #172844 0%, #101d31 100%) !important;
  color: #f6d27c !important;
  box-shadow: none !important;
}

html[data-bank-color-mode="dark"] .footer,
html[data-bank-color-mode="dark"] footer.footer {
  border-color: var(--bank-dark-border) !important;
  background: #091426 !important;
  color: var(--bank-dark-muted) !important;
}

html[data-bank-color-mode="dark"] .quick-guide-trigger,
html[data-bank-color-mode="dark"] .mobile-bottom-nav {
  border-color: var(--bank-dark-border) !important;
  background: var(--bank-dark-surface-2) !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] .badge,
html[data-bank-color-mode="dark"] .pagination .page-link {
  border-color: var(--bank-dark-border) !important;
  background: var(--bank-dark-surface-2) !important;
  color: var(--bank-dark-text) !important;
}

/* Dashboard widgets */
html[data-bank-color-mode="dark"] #centerpanel .content-box,
html[data-bank-color-mode="dark"] #centerpanel .item,
html[data-bank-color-mode="dark"] #centerpanel .item-content {
  border: 1px solid var(--bank-dark-border) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #111f34 0%, #0d192b 100%) !important;
  color: var(--bank-dark-text) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .32) !important;
}

html[data-bank-color-mode="dark"] #centerpanel .content-box {
  padding: 14px;
}

html[data-bank-color-mode="dark"] #centerpanel .content-box h4,
html[data-bank-color-mode="dark"] #centerpanel .content-box h5,
html[data-bank-color-mode="dark"] #centerpanel .content-box .card-title {
  color: #f4f8ff !important;
  text-shadow: none !important;
}

html[data-bank-color-mode="dark"] #centerpanel .content-box .content-body,
html[data-bank-color-mode="dark"] #centerpanel .content-box .infos,
html[data-bank-color-mode="dark"] #centerpanel .content-box .form-group {
  background: transparent !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] #centerpanel .content-box .btn.bg-white,
html[data-bank-color-mode="dark"] #centerpanel .content-box button.bg-white {
  border: 1px solid var(--bank-dark-border) !important;
  background: #172844 !important;
  color: #dbeafe !important;
}

html[data-bank-color-mode="dark"] #centerpanel .content-box .btn.bg-white:hover,
html[data-bank-color-mode="dark"] #centerpanel .content-box button.bg-white:hover {
  border-color: rgba(240, 184, 79, .5) !important;
  background: #203554 !important;
  color: #ffffff !important;
}

html[data-bank-color-mode="dark"] #centerpanel .content-box table,
html[data-bank-color-mode="dark"] #centerpanel .content-box .table {
  overflow: hidden;
  border: 1px solid var(--bank-dark-border) !important;
  border-radius: 11px !important;
  background: #0b1628 !important;
}

html[data-bank-color-mode="dark"] #centerpanel .content-box table thead th,
html[data-bank-color-mode="dark"] #centerpanel .content-box .table thead th,
html[data-bank-color-mode="dark"] #centerpanel .content-box table thead td,
html[data-bank-color-mode="dark"] #centerpanel .content-box .table thead td {
  border-color: #355b8e !important;
  background: #7fb0f7 !important;
  color: #061225 !important;
}

html[data-bank-color-mode="dark"] #centerpanel .content-box table tbody td,
html[data-bank-color-mode="dark"] #centerpanel .content-box .table tbody td,
html[data-bank-color-mode="dark"] #centerpanel .content-box table tfoot td,
html[data-bank-color-mode="dark"] #centerpanel .content-box .table tfoot td {
  border-color: #2b405e !important;
  background: #111f34 !important;
  color: #e7effc !important;
}

html[data-bank-color-mode="dark"] #centerpanel .content-box table tbody tr:hover td,
html[data-bank-color-mode="dark"] #centerpanel .content-box .table tbody tr:hover td {
  background: #172844 !important;
}

html[data-bank-color-mode="dark"] #centerpanel .content-box .labelkurs,
html[data-bank-color-mode="dark"] #centerpanel .content-box .labelrate,
html[data-bank-color-mode="dark"] #centerpanel .content-box .col-form-label,
html[data-bank-color-mode="dark"] #centerpanel .content-box label,
html[data-bank-color-mode="dark"] #centerpanel .content-box small,
html[data-bank-color-mode="dark"] #centerpanel .content-box .text-muted {
  color: #c7d5ea !important;
}

html[data-bank-color-mode="dark"] #centerpanel .content-box .labelup {
  color: #77e5b2 !important;
}

html[data-bank-color-mode="dark"] #centerpanel .content-box .infos,
html[data-bank-color-mode="dark"] #centerpanel .content-box .infos * {
  color: #d9e7fb !important;
}

html[data-bank-color-mode="dark"] #rightpanel .gridleft > .widget-greeting {
  border: 1px solid #27486c !important;
  background: linear-gradient(150deg, #123862 0%, #0d2747 100%) !important;
  color: #ffffff !important;
}

html[data-bank-color-mode="dark"] #rightpanel .gridleft > .widget-greeting h6,
html[data-bank-color-mode="dark"] #rightpanel .gridleft > .widget-greeting span,
html[data-bank-color-mode="dark"] #rightpanel .gridleft > .widget-greeting div {
  color: #f4f8ff !important;
}

html[data-bank-color-mode="dark"] #rightpanel .gridleft > .widget-activity {
  border: 1px solid var(--bank-dark-border) !important;
  background: #101d31 !important;
  color: var(--bank-dark-text) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .3) !important;
}

html[data-bank-color-mode="dark"] #rightpanel .gridleft > .widget-activity .panel-header,
html[data-bank-color-mode="dark"] #rightpanel .gridleft > .widget-activity .panel-footer,
html[data-bank-color-mode="dark"] #rightpanel .gridleft > .widget-activity .panel-body {
  background: transparent !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] #rightpanel .gridleft > .widget-activity .panel-header h6 {
  color: #f4f8ff !important;
}

html[data-bank-color-mode="dark"] #rightpanel .gridleft > .widget-activity .list-group-item {
  border: 1px solid #2a4566 !important;
  background: #13243a !important;
  color: #e7effc !important;
  box-shadow: none !important;
}

html[data-bank-color-mode="dark"] #rightpanel .gridleft > .widget-activity .list-group-item p,
html[data-bank-color-mode="dark"] #rightpanel .gridleft > .widget-activity .list-group-item span,
html[data-bank-color-mode="dark"] #rightpanel .gridleft > .widget-activity .list-group-item strong {
  color: #e7effc !important;
}

html[data-bank-color-mode="dark"] #rightpanel .gridleft > .widget-activity .list-group-item a,
html[data-bank-color-mode="dark"] #rightpanel .gridleft > .widget-activity .panel-footer a {
  color: var(--bank-dark-accent) !important;
}

html[data-bank-color-mode="dark"] #activeAccess .btn.bg-teal-600 {
  border-color: #315f96 !important;
  background: linear-gradient(180deg, #173f69 0%, #102d50 100%) !important;
  color: #ffffff !important;
}

/* Sidebar menu readability */
html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper > .list-group-item {
  background: #0f223a !important;
}

html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper > .list-group-item:hover {
  background: #183456 !important;
}

html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper > .list-group-item > a,
html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper > .list-group-item > a > i,
html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .main-drop,
html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .main-drop > .fa-angle-down {
  color: #dbeafe !important;
}

html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .sidebar-menu-active,
html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .sidebar-menu-active:hover,
html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .sidebar-parent-active > a.main-drop,
html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .sidebar-parent-active > a.main-drop:hover,
html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .sidebar-parent-active > a.main-drop:focus {
  background: linear-gradient(180deg, #173f69 0%, #102d50 100%) !important;
  color: #ffffff !important;
}

html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .list-group.collapse,
html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .list-group.collapsing {
  border: 1px solid #203854 !important;
  background: #0b1628 !important;
}

html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .list-group .submenu,
html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .list-group .main-drop {
  border-color: #203854 !important;
  color: #dbeafe !important;
  background: #111f34 !important;
}

html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .list-group .submenu:hover,
html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .list-group .submenu:focus,
html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .list-group .main-drop:hover,
html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .list-group .main-drop:focus,
html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .sidebar-submenu-active > a {
  color: #ffffff !important;
  background: #183456 !important;
}

html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .sidebar-submenu-active > a,
html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .sidebar-submenu-active > a.submenu,
html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .list-group .sidebar-submenu-active > a {
  border-left: 4px solid var(--bank-dark-accent) !important;
  background: linear-gradient(180deg, #21476f 0%, #18385f 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px rgba(240, 184, 79, .16) !important;
}

html[data-bank-color-mode="dark"] #collapsible_menu_list_wrapper .list-group .main-drop > .fa-angle-down {
  color: #dbeafe !important;
}

html[data-bank-color-mode="dark"] #rightpanel #btn_collapse_widget,
html[data-bank-color-mode="dark"] body#capture #rightpanel #btn_collapse_widget {
  border: 1px solid #315176 !important;
  background: linear-gradient(180deg, #12345b 0%, #0c243f 100%) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html[data-bank-color-mode="dark"] #rightpanel #btn_collapse_widget:hover,
html[data-bank-color-mode="dark"] body#capture #rightpanel #btn_collapse_widget:hover {
  border-color: rgba(240, 184, 79, .55) !important;
  background: #183456 !important;
  color: #ffffff !important;
}

.bank-theme-toggle-symbol svg {
  width: 23px;
  height: 23px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bank-theme-toggle-symbol svg circle {
  fill: currentColor;
  stroke: currentColor;
}

/* Login, logout, popup, and modal dark mode */
html[data-bank-color-mode="dark"] body.frontend-login,
html[data-bank-color-mode="dark"] body.frontend-login .bank-shell,
html[data-bank-color-mode="dark"] .logout-shell {
  background: radial-gradient(circle at 18% 12%, rgba(36, 91, 143, .2), transparent 30%),
              radial-gradient(circle at 84% 32%, rgba(240, 184, 79, .08), transparent 26%),
              linear-gradient(135deg, #07111f 0%, #0b1728 52%, #07111f 100%) !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .bank-main {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .bank-nav,
html[data-bank-color-mode="dark"] .logout-shell .bank-nav {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .secure-label,
html[data-bank-color-mode="dark"] .logout-shell .secure-label {
  color: #dbeafe !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .bank-form-panel {
  background: transparent !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .bank-form-panel::before {
  display: none !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .layer-login,
html[data-bank-color-mode="dark"] body.frontend-login #login,
html[data-bank-color-mode="dark"] body.frontend-login #loginForm,
html[data-bank-color-mode="dark"] body.frontend-login #loginForm .card-body {
  background: transparent !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .layer-login {
  border: 1px solid var(--bank-dark-border) !important;
  background: linear-gradient(180deg, rgba(16, 29, 49, .98) 0%, rgba(10, 22, 38, .98) 100%) !important;
  box-shadow: 0 24px 58px rgba(0, 0, 0, .38) !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .login-heading-badge,
html[data-bank-color-mode="dark"] .logout-shell .eyebrow {
  color: var(--bank-dark-accent) !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .login-title,
html[data-bank-color-mode="dark"] body.frontend-login .login-label,
html[data-bank-color-mode="dark"] .logout-shell .logout-title {
  color: #f4f8ff !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .login-subtitle,
html[data-bank-color-mode="dark"] body.frontend-login .login-divider,
html[data-bank-color-mode="dark"] .logout-shell .logout-subtitle,
html[data-bank-color-mode="dark"] .logout-shell .security-note {
  color: var(--bank-dark-muted) !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .login-input-icon input,
html[data-bank-color-mode="dark"] body.frontend-login input.form-control {
  border-color: var(--bank-dark-border) !important;
  background: #091426 !important;
  color: var(--bank-dark-text) !important;
  box-shadow: none !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .login-input-icon input::placeholder,
html[data-bank-color-mode="dark"] body.frontend-login input.form-control::placeholder {
  color: #8190a8 !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .login-input-icon .fa-icon-left,
html[data-bank-color-mode="dark"] body.frontend-login .login-input-icon .field-icon {
  color: var(--bank-dark-muted) !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .language-switch {
  display: inline-grid !important;
  grid-template-columns: repeat(2, 44px);
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid var(--bank-dark-border) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .language-switch .btn {
  width: 44px !important;
  height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  opacity: .72 !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .language-switch .btn img {
  width: 28px !important;
  height: 20px !important;
  margin: 0 !important;
  object-fit: cover;
  transform: none !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .language-switch .btn.is-active {
  opacity: 1 !important;
  background: #173f69 !important;
  box-shadow: inset 0 0 0 1px rgba(143, 185, 255, .12) !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .language-switch .btn.is-active::after {
  display: none !important;
}

html[data-bank-color-mode="dark"] body.frontend-login #captcha,
html[data-bank-color-mode="dark"] body.frontend-login .captcha-display-row {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .captcha-display-row {
  display: block !important;
  background: transparent !important;
}

html[data-bank-color-mode="dark"] body.frontend-login #captcha {
  width: 210px !important;
  min-height: 74px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-bank-color-mode="dark"] body.frontend-login #captcha img {
  height: 54px !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .captcha-refresh,
html[data-bank-color-mode="dark"] body.frontend-login .login-support a {
  color: var(--bank-dark-link) !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .login-security-logos {
  border-color: var(--bank-dark-border) !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #061225 !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .bank-assurance,
html[data-bank-color-mode="dark"] body.frontend-login .bank-lps-note {
  border-color: var(--bank-dark-border) !important;
  background: rgba(9, 20, 36, .72) !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] body.frontend-login .bank-lps-note a {
  color: var(--bank-dark-link) !important;
}

html[data-bank-color-mode="dark"] .logout-shell::before,
html[data-bank-color-mode="dark"] .logout-shell::after {
  border-color: rgba(143, 185, 255, .08) !important;
}

html[data-bank-color-mode="dark"] .logout-shell .logout-card {
  max-width: 780px !important;
  border-color: var(--bank-dark-border) !important;
  background: linear-gradient(180deg, rgba(16, 29, 49, .98) 0%, rgba(10, 22, 38, .98) 100%) !important;
  box-shadow: 0 24px 58px rgba(0, 0, 0, .38) !important;
}

html[data-bank-color-mode="dark"] .logout-shell .status-icon {
  border-color: rgba(240, 184, 79, .38) !important;
  background: rgba(240, 184, 79, .12) !important;
  color: var(--bank-dark-accent) !important;
}

html[data-bank-color-mode="dark"] .logout-shell .session-summary {
  display: grid !important;
  gap: 12px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

html[data-bank-color-mode="dark"] .logout-shell .session-item {
  border: 1px solid var(--bank-dark-border) !important;
  border-radius: 10px !important;
  background: rgba(9, 20, 36, .72) !important;
}

html[data-bank-color-mode="dark"] .logout-shell .session-label,
html[data-bank-color-mode="dark"] .logout-shell .session-value {
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] .logout-shell .relogin-button,
html[data-bank-color-mode="dark"] body.frontend-login .button-login {
  border: 1px solid #315f96 !important;
  background: linear-gradient(180deg, #173f69 0%, #102d50 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(6, 18, 37, .42) !important;
}

html[data-bank-color-mode="dark"] .logout-shell .bank-footer {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-bank-color-mode="dark"] .logout-shell .footer-address,
html[data-bank-color-mode="dark"] .logout-shell .contact-list {
  color: var(--bank-dark-muted) !important;
}

html[data-bank-color-mode="dark"] body > main.container-fluid,
html[data-bank-color-mode="dark"] body > main.container-fluid > .row,
html[data-bank-color-mode="dark"] body > main.container-fluid .screencontent,
html[data-bank-color-mode="dark"] body > main.container,
html[data-bank-color-mode="dark"] body > main.container .screencontent,
html[data-bank-color-mode="dark"] body > main.container-fluid .row > [style*="background-color: white"],
html[data-bank-color-mode="dark"] body > main.container-fluid .row > [style*="background-color:white"] {
  background: var(--bank-dark-bg) !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] body > main .screencontent .content-box,
html[data-bank-color-mode="dark"] body > main .screencontent .card,
html[data-bank-color-mode="dark"] body > main .screencontent .panel,
html[data-bank-color-mode="dark"] body > main .screencontent .item,
html[data-bank-color-mode="dark"] body > main .screencontent .item-content,
html[data-bank-color-mode="dark"] body > main .screencontent [style*="background: #fff"],
html[data-bank-color-mode="dark"] body > main .screencontent [style*="background:#fff"],
html[data-bank-color-mode="dark"] body > main .screencontent [style*="background-color: #fff"],
html[data-bank-color-mode="dark"] body > main .screencontent [style*="background-color:#fff"],
html[data-bank-color-mode="dark"] body > main .screencontent [style*="background: white"],
html[data-bank-color-mode="dark"] body > main .screencontent [style*="background:white"],
html[data-bank-color-mode="dark"] body > main .screencontent [style*="background-color: white"],
html[data-bank-color-mode="dark"] body > main .screencontent [style*="background-color:white"] {
  border-color: var(--bank-dark-border) !important;
  background: var(--bank-dark-surface) !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] .modal-backdrop {
  background: #020817 !important;
}

html[data-bank-color-mode="dark"] .modal-content {
  border: 1px solid var(--bank-dark-border) !important;
  background: var(--bank-dark-surface) !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] .modal-header,
html[data-bank-color-mode="dark"] .modal-body,
html[data-bank-color-mode="dark"] .modal-footer {
  border-color: var(--bank-dark-border) !important;
  background: transparent !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] .modal-title,
html[data-bank-color-mode="dark"] .modal-content h1,
html[data-bank-color-mode="dark"] .modal-content h2,
html[data-bank-color-mode="dark"] .modal-content h3,
html[data-bank-color-mode="dark"] .modal-content h4,
html[data-bank-color-mode="dark"] .modal-content h5,
html[data-bank-color-mode="dark"] .modal-content p,
html[data-bank-color-mode="dark"] .modal-content label,
html[data-bank-color-mode="dark"] .modal-content span:not(.bank-theme-toggle-symbol) {
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] .modal-content .close {
  color: #ffffff !important;
  opacity: .88;
}

html[data-bank-color-mode="dark"] .modal-content .btn.bg-white,
html[data-bank-color-mode="dark"] .modal-content .btnwhite,
html[data-bank-color-mode="dark"] .modal-content button[style*="background: #fff"],
html[data-bank-color-mode="dark"] .modal-content button[style*="background-color: #ffffff"] {
  border: 1px solid var(--bank-dark-border) !important;
  background: #172844 !important;
  color: #dbeafe !important;
}

html[data-bank-color-mode="dark"] body#capture .modal-content,
html[data-bank-color-mode="dark"] body#capture #modalLogout .modal-content {
  border: 1px solid var(--bank-dark-border) !important;
  background: var(--bank-dark-surface) !important;
  color: var(--bank-dark-text) !important;
  box-shadow: 0 24px 58px rgba(0, 0, 0, .44) !important;
}

html[data-bank-color-mode="dark"] body#capture .modal-header,
html[data-bank-color-mode="dark"] body#capture .modal-body,
html[data-bank-color-mode="dark"] body#capture .modal-footer,
html[data-bank-color-mode="dark"] body#capture #modalLogout .modal-header,
html[data-bank-color-mode="dark"] body#capture #modalLogout .modal-body,
html[data-bank-color-mode="dark"] body#capture #modalLogout .modal-footer {
  border-color: var(--bank-dark-border) !important;
  background: transparent !important;
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] body#capture #modalLogout .modal-title,
html[data-bank-color-mode="dark"] body#capture #modalLogout .modal-body h5,
html[data-bank-color-mode="dark"] body#capture #modalLogout .modal-body p,
html[data-bank-color-mode="dark"] body#capture .modal-content h1,
html[data-bank-color-mode="dark"] body#capture .modal-content h2,
html[data-bank-color-mode="dark"] body#capture .modal-content h3,
html[data-bank-color-mode="dark"] body#capture .modal-content h4,
html[data-bank-color-mode="dark"] body#capture .modal-content h5,
html[data-bank-color-mode="dark"] body#capture .modal-content p,
html[data-bank-color-mode="dark"] body#capture .modal-content label,
html[data-bank-color-mode="dark"] body#capture .modal-content span:not(.bank-theme-toggle-symbol) {
  color: var(--bank-dark-text) !important;
}

html[data-bank-color-mode="dark"] body#capture #modalLogout .modal-body > div:first-child {
  border: 1px solid rgba(240, 184, 79, .28) !important;
  background: rgba(240, 184, 79, .12) !important;
  box-shadow: 0 0 0 8px rgba(240, 184, 79, .05) !important;
}

html[data-bank-color-mode="dark"] body#capture #modalLogout .modal-footer .btn,
html[data-bank-color-mode="dark"] body#capture .modal-footer .btn:not([type="submit"]),
html[data-bank-color-mode="dark"] body#capture .modal-body .bg-white,
html[data-bank-color-mode="dark"] body#capture .modal-footer .bg-white {
  border: 1px solid var(--bank-dark-border) !important;
  background: #172844 !important;
  color: #dbeafe !important;
}

html[data-bank-color-mode="dark"] body#capture #modalLogout .modal-footer button[type="submit"],
html[data-bank-color-mode="dark"] body#capture .modal-footer button[type="submit"],
html[data-bank-color-mode="dark"] body#capture .modal-footer input[type="submit"] {
  border: 1px solid #315f96 !important;
  background: linear-gradient(180deg, #173f69 0%, #102d50 100%) !important;
  color: #ffffff !important;
}

html[data-bank-color-mode="dark"] body#capture .modal-header .close,
html[data-bank-color-mode="dark"] body#capture #modalLogout .close {
  color: #ffffff !important;
  opacity: .9 !important;
}