/* =============================================
   MantisBT Dark Theme — "Obsidian" v4
   Properly overrides ace-skins.css, ace.css,
   ace-mantis.css and default.css hardcodes.
   
   Save as: mantisbt/css/dark.css
   In config_inc.php:
     $g_css_include_file = 'dark.css';
   ============================================= */

:root {
  --bg0:  #0d1117;
  --bg1:  #161b22;
  --bg2:  #1c2230;
  --bg3:  #212940;
  --bd:   #2d3748;
  --bd2:  #3d4f6e;
  --tx0:  #e2e8f0;
  --tx1:  #8b9ab5;
  --tx2:  #4a5568;

--ac:  #3aabcc;
--ac2: #4dc4e8;
--acd: rgba(58, 171, 204, 0.18);

  --grn:  #34d399;
  --grnd: rgba(52,211,153,0.14);
  --yel:  #fbbf24;
  --yeld: rgba(251,191,36,0.14);
  --red:  #f87171;
  --redd: rgba(248,113,113,0.14);
  --org:  #fb923c;
  --orgd: rgba(251,146,60,0.14);
}

/* ══════════════════════════════════════════
   1. BASE
══════════════════════════════════════════ */
html,
body,
.skin-3 {
  background-color: var(--bg0) !important;
  color: var(--tx0) !important;
}

/* ace-mantis.css: .page-content { background-color: #fff } */
.page-content {
  background-color: var(--bg0) !important;
  color: var(--tx0) !important;
}

/* ace-skins.css: .skin-3 .main-container:before { background: #FFF / gradient #EEF5FA } */
.skin-3 .main-container:before,
.main-container,
.main-content {
  background: var(--bg0) !important;
}

/* ace-mantis.css: .light-login { background: #ffffff !important } */
.light-login {
  background-color: var(--bg1) !important;
}

/* ══════════════════════════════════════════
   2. NAVBAR
   ace-skins.css: .skin-3 .navbar { background: #404040 }
   ace-mantis.css: .skin-3 .navbar.navbar-collapse { background-color: #404040 }
══════════════════════════════════════════ */
.navbar,
.navbar-default,
.navbar-container,
.skin-3 .navbar,
.skin-3 .navbar.navbar-collapse,
.skin-3 .navbar.navbar-collapse:before,
.skin-3 .navbar.navbar-collapse .navbar-container {
  background: var(--bg1) !important;
  background-color: var(--bg1) !important;
  border-color: var(--bd) !important;
  border-bottom: 1px solid var(--bd2) !important;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover {
  color: var(--ac) !important;
}

.navbar-default .navbar-nav > li > a {
  color: var(--tx1) !important;
  background-color: transparent !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover {
  color: var(--ac) !important;
  background-color: var(--acd) !important;
}

.navbar-default .navbar-nav .open .dropdown-menu,
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  background-color: var(--bg1) !important;
  color: var(--tx1) !important;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
  background-color: var(--acd) !important;
  color: var(--ac) !important;
}

.ace-nav > li > a,
.ace-nav > li > .dropdown-toggle {
  background-color: var(--bg1) !important;
  color: var(--tx1) !important;
}
.ace-nav > li > a:hover,
.ace-nav > li.open > a {
  background-color: var(--bg2) !important;
  color: var(--tx0) !important;
}

/* ══════════════════════════════════════════
   3. SIDEBAR
   ace-skins.css skin-3 hardcodes:
     .sidebar { background-color: #DBDBDB }
     .nav-list > li > a { background-color: #E3E3E3; color: #5A5A5A }
     .nav-list > li:hover > a { background-color: #FFF; color: #337dbb }
     .nav-list > li.open > a { background-color: #F8F8F8 }
     .nav-list > li.active > a { background-color: #f3faff !important }
     .sidebar > .nav-search { background-color: #DBDBDB }
     .sidebar-toggle { background-color: #D0D0D0 }
     .sidebar-shortcuts { background-color: #DBDBDB }
     .sidebar.menu-min .nav-list > li > a > .menu-text { background-color: #f1f5f9 }
     .sidebar.menu-min .nav-list > li.active > a > .menu-text { background-color: #EDF3F7 }
══════════════════════════════════════════ */
.sidebar,
.sidebar-wrapper,
.skin-3 .sidebar {
  background-color: var(--bg1) !important;
  border-color: var(--bd) !important;
}

/* All nav-list item states */
.skin-3 .nav-list > li,
.nav-list > li {
  border-color: var(--bd) !important;
}

.skin-3 .nav-list > li > a,
.nav-list > li > a {
  background-color: var(--bg1) !important;
  color: var(--tx1) !important;
}

.skin-3 .nav-list > li > a:focus,
.nav-list > li > a:focus {
  background-color: var(--bg1) !important;
  color: var(--tx1) !important;
}

.skin-3 .nav-list > li:hover > a,
.nav-list > li:hover > a {
  background-color: var(--acd) !important;
  color: var(--ac) !important;
}

.skin-3 .nav-list > li.open > a,
.skin-3 .nav-list > li.open:hover > a,
.nav-list > li.open > a,
.nav-list > li.open:hover > a {
  background-color: var(--bg2) !important;
  color: var(--ac) !important;
}

.skin-3 .nav-list > li.active > a,
.skin-3 .nav-list > li.active.highlight > a,
.nav-list > li.active > a,
.nav-list > li.active > a:hover,
.nav-list > li.active > a:focus {
  background-color: var(--acd) !important;
  color: var(--ac) !important;
}

/* Hover border indicators */
.skin-3 .nav-list > li:hover,
.skin-3 .nav-list > li.open,
.skin-3 .nav-list > li.active {
  border-color: var(--bd2) !important;
}

/* Active arrow indicator (the right-edge coloured bar) */
.skin-3 .nav-list > li:hover:before,
.skin-3 .nav-list > li.open:before,
.skin-3 .nav-list > li.active:before {
  background-color: var(--ac) !important;
}

/* Active arrow pointer (the triangle pointing right into content) */
.skin-3 .nav-list li.active > a:after {
  border-right-color: var(--bg0) !important;
}
.skin-3 .nav-list li.active > a:before {
  border-right-color: var(--bd2) !important;
}

/* Submenu */
.skin-3 .nav-list > li .submenu,
.nav-list > li .submenu,
.nav-list > li > ul {
  background-color: var(--bg2) !important;
  border-color: var(--bd) !important;
}

.skin-3 .nav-list > li .submenu > li.active:not(.open) > a,
.nav-list > li .submenu > li > a {
  background-color: var(--bg2) !important;
  color: var(--tx1) !important;
}

.nav-list > li .submenu > li > a:hover,
.nav-list > li .submenu > li.active > a {
  background-color: var(--acd) !important;
  color: var(--ac) !important;
}

/* Collapsed/mini sidebar menu-text popouts */
.skin-3 .sidebar.menu-min .nav-list > li > a > .menu-text,
.skin-3 .sidebar.menu-min .nav-list > li.active > a > .menu-text,
.skin-3 .sidebar.responsive-min .nav-list > li > a > .menu-text,
.skin-3 .sidebar.responsive-min .nav-list > li.active > a > .menu-text {
  background-color: var(--bg2) !important;
  border-color: var(--bd) !important;
  color: var(--tx0) !important;
}

/* Collapsed sidebar submenu popouts */
.skin-3 .sidebar.menu-min .nav-list > li > .submenu,
.skin-3 .sidebar.responsive-min .nav-list > li > .submenu {
  background-color: var(--bg2) !important;
  border-color: var(--bd) !important;
}

/* Sidebar search */
.skin-3 .sidebar > .nav-search,
.sidebar .nav-search,
.sidebar .nav-search-input {
  background-color: var(--bg2) !important;
  border-color: var(--bd) !important;
  color: var(--tx0) !important;
}

/* Sidebar toggle button */
.skin-3 .sidebar-toggle,
.sidebar-toggle {
  background-color: var(--bg2) !important;
  border-color: var(--bd) !important;
}
.skin-3 .sidebar-toggle:before {
  border-color: var(--bd) !important;
}
.skin-3 .sidebar-toggle > .ace-icon {
  background-color: var(--bg3) !important;
  border-color: var(--bd2) !important;
  color: var(--tx1) !important;
}

/* Sidebar shortcuts */
.skin-3 .sidebar-shortcuts,
.skin-3 .sidebar-shortcuts-mini,
.skin-3 .sidebar.menu-min .sidebar-shortcuts-large,
.skin-3 .sidebar.responsive-min .sidebar-shortcuts-large {
  background-color: var(--bg1) !important;
}

/* .list > li > a — project dropdown in sidebar */
.list > li > a {
  color: var(--tx1) !important;
  background-color: transparent !important;
}
.list > li > a:hover,
.list > li > a:focus {
  color: var(--ac) !important;
  background-color: var(--acd) !important;
}

/* ══════════════════════════════════════════
   4. BREADCRUMBS
   ace-skins.css: .skin-3 .breadcrumbs {
     background-color: #E7F2F8;
     border-radius: 4px;
   }
   ace.css: .breadcrumbs { border: 1px solid #E5E5E5 }
══════════════════════════════════════════ */
.breadcrumbs,
.skin-3 .breadcrumbs,
.breadcrumb {
  background-color: var(--bg1) !important;
  border: 1px solid var(--bd) !important;
  color: var(--tx1) !important;
}
.breadcrumbs .breadcrumb,
.breadcrumb {
  background-color: transparent !important;
  border: none !important;
}
.breadcrumb > li,
.breadcrumb > li + li::before,
.breadcrumbs li,
.breadcrumbs li + li::before {
  color: var(--tx1) !important;
}
.breadcrumb > .active,
.breadcrumbs .active {
  color: var(--tx0) !important;
}
.breadcrumbs a,
.breadcrumb a {
  color: var(--ac) !important;
}

/* ══════════════════════════════════════════
   5. WIDGET TOOLBOX / TOOLBAR / HEADER
   ace.css: .widget-toolbox { background-color: #EEE }
   (also .widget-header has a gradient in ace.css)
══════════════════════════════════════════ */
.widget-toolbox,
.widget-toolbar,
.widget-header,
.widget-title,
.btn-toolbar {
  background-color: var(--bg2) !important;
  background-image: none !important;
  border-color: var(--bd) !important;
  color: var(--tx0) !important;
}

.widget-box {
  background-color: var(--bg1) !important;
  border: 1px solid var(--bd) !important;
}

.widget-body,
.widget-main {
  background-color: var(--bg1) !important;
  color: var(--tx0) !important;
}

/* ══════════════════════════════════════════
   6. FOOTER
   ace.css: .footer { background-color: #fff } (or similar)
══════════════════════════════════════════ */
.footer,
.footer-inner,
.footer .footer-inner {
  background-color: var(--bg1) !important;
  border-top: 1px solid var(--bd) !important;
  color: var(--tx1) !important;
}
.footer a {
  color: var(--ac) !important;
}

/* ══════════════════════════════════════════
   7. TABLES
   ace-mantis.css: table { background-color: #ffffff !important }
   default.css: td.category { background-color: #edf3f4 !important }
   default.css: tr.spacer { background-color: #ffffff !important }
══════════════════════════════════════════ */
table {
  background-color: var(--bg1) !important;
  color: var(--tx0) !important;
}

.table,
.table > thead > tr > th,
.table > thead > tr > td {
  background-color: var(--bg2) !important;
  color: var(--tx1) !important;
  border-color: var(--bd) !important;
}

.table > thead > tr > th {
  border-bottom: 2px solid var(--bd2) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
  background-color: var(--bg1) !important;
  color: var(--tx0) !important;
  border-color: var(--bd) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: var(--bg1) !important;
}
.table-striped > tbody > tr:nth-of-type(even) > td,
.table-striped > tbody > tr:nth-of-type(even) > th {
  background-color: var(--bg2) !important;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: var(--bg3) !important;
}

/* default.css: td.category { background-color: #edf3f4 !important } */
td.category,
th.category,
td.category label,
th.category label {
  background-color: var(--bg2) !important;
  color: var(--tx1) !important;
  border-right: 1px solid var(--bd2) !important;
}

/* default.css: tr.spacer { background-color: #ffffff !important } */
tr.spacer {
  background-color: var(--bg0) !important;
  color: transparent !important;
}

/* default.css: tr.bugnote .bugnote-note { background-color: #e8e8e8 } */
tr.bugnote .bugnote-note {
  background-color: var(--bg2) !important;
  color: var(--tx0) !important;
}

/* default.css: .bugnote-private { background-color: #fcf8e3 !important } */
.bugnote-private {
  background-color: rgba(251,191,36,0.08) !important;
}

/* default.css: .sticky-separator { background-color: lightgrey } */
.sticky-separator {
  background-color: var(--bg3) !important;
  color: var(--tx1) !important;
}

table.filters td.category {
  color: var(--ac) !important;
}

/* ══════════════════════════════════════════
   8. PANELS
══════════════════════════════════════════ */
.panel,
.panel-default {
  background-color: var(--bg1) !important;
  border-color: var(--bd) !important;
}
.panel-heading,
.panel-default > .panel-heading {
  background-color: var(--bg2) !important;
  background-image: none !important;
  border-color: var(--bd) !important;
  color: var(--tx0) !important;
}
.panel-body { background-color: var(--bg1) !important; color: var(--tx0) !important; }
.panel-footer { background-color: var(--bg2) !important; border-color: var(--bd) !important; color: var(--tx1) !important; }

/* ══════════════════════════════════════════
   9. BUTTONS
   ace.css: .btn-white { background-color: #fff; color: #888 }
   ace.css: .btn-default { background-color: #e8e8e8 }
══════════════════════════════════════════ */
.btn-white,
.btn.btn-white {
  background-color: var(--bg3) !important;
  background-image: none !important;
  border-color: var(--bd2) !important;
  color: var(--tx0) !important;
  text-shadow: none !important;
}
.btn-white:hover,
.btn.btn-white:hover,
.btn-white:focus,
.btn.btn-white:focus {
  background-color: var(--bg2) !important;
  border-color: var(--ac) !important;
  color: var(--tx0) !important;
}

.btn-default {
  background-color: var(--bg3) !important;
  background-image: none !important;
  border-color: var(--bd2) !important;
  color: var(--tx0) !important;
  text-shadow: none !important;
}
.btn-default:hover,
.btn-default:focus {
  background-color: var(--bg2) !important;
  border-color: var(--ac) !important;
  color: var(--tx0) !important;
}

.btn-primary {
  background-color: var(--ac) !important;
  background-image: none !important;
  border-color: var(--ac) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--ac2) !important;
  border-color: var(--ac2) !important;
}

.btn-success { background-color: #1a7a52 !important; background-image: none !important; border-color: #1a7a52 !important; color: #fff !important; }
.btn-danger  { background-color: #8b2020 !important; background-image: none !important; border-color: #8b2020 !important; color: #fff !important; }
.btn-warning { background-color: #8b6000 !important; background-image: none !important; border-color: #8b6000 !important; color: #fff !important; }
.btn-info    { background-color: #1a5a8b !important; background-image: none !important; border-color: #1a5a8b !important; color: #fff !important; }

/* ace-part2.css: .inbox-folders .btn-lighter */
.inbox-folders .btn-lighter,
.inbox-folders .btn-lighter.active {
  background-color: var(--bg3) !important;
  color: var(--tx1) !important;
  border-color: var(--bd) !important;
}
.inbox-folders .btn-lighter:hover {
  background-color: var(--acd) !important;
  color: var(--ac) !important;
}

/* ══════════════════════════════════════════
   10. FORMS & INPUTS
══════════════════════════════════════════ */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="url"],
textarea,
select {
  background-color: var(--bg2) !important;
  border: 1px solid var(--bd) !important;
  color: var(--tx0) !important;
  border-radius: 4px !important;
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--ac) !important;
  box-shadow: 0 0 0 3px var(--acd) !important;
  outline: none !important;
}

/* ace-mantis.css: select[disabled] { background-color: #eee !important } */
select[disabled],
input[disabled],
textarea[disabled] {
  background-color: var(--bg0) !important;
  color: var(--tx2) !important;
  border-color: var(--bd) !important;
}

/* ace-mantis.css: input.tt-hint { background-color: #fff !important } */
input.tt-hint {
  background-color: var(--bg2) !important;
  color: var(--tx2) !important;
}

.tt-menu {
  background-color: var(--bg1) !important;
  border-color: var(--bd) !important;
  color: var(--tx0) !important;
}
.tt-suggestion:hover,
.tt-suggestion.tt-cursor {
  background-color: var(--ac) !important;
  color: #fff !important;
}

::placeholder { color: var(--tx2) !important; }
select option { background-color: var(--bg2) !important; color: var(--tx0) !important; }

.input-group-addon {
  background-color: var(--bg3) !important;
  border-color: var(--bd) !important;
  color: var(--tx1) !important;
}

/* ace-mantis.css: .well.search-area / .search-filter-element */
.well,
.well.search-area {
  background-color: var(--bg2) !important;
  border-color: var(--bd) !important;
  color: var(--tx0) !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════
   11. DROPDOWNS
══════════════════════════════════════════ */
.dropdown-menu {
  background-color: var(--bg1) !important;
  border: 1px solid var(--bd2) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}
.dropdown-menu > li > a {
  color: var(--tx0) !important;
  background-color: transparent !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > .active > a {
  background-color: var(--acd) !important;
  color: var(--ac) !important;
}
.dropdown-menu .divider {
  background-color: var(--bd) !important;
}

/* ace-mantis.css: .bootstrap-datetimepicker-widget { color: #333333 } */
.bootstrap-datetimepicker-widget.dropdown-menu {
  color: var(--tx0) !important;
  background-color: var(--bg1) !important;
}

/* ══════════════════════════════════════════
   12. LINKS
══════════════════════════════════════════ */
a { color: var(--ac) !important; }
a:hover, a:focus { color: var(--ac2) !important; }

/* ══════════════════════════════════════════
   13. ALERTS
══════════════════════════════════════════ */
.alert-success { background-color: var(--grnd) !important; border-color: var(--grn) !important; color: var(--grn) !important; }
.alert-warning { background-color: var(--yeld) !important; border-color: var(--yel) !important; color: var(--yel) !important; }
.alert-danger  { background-color: var(--redd) !important; border-color: var(--red) !important; color: var(--red) !important; }
.alert-info    { background-color: var(--acd)  !important; border-color: var(--ac)  !important; color: var(--ac)  !important; }

/* ══════════════════════════════════════════
   14. TABS
══════════════════════════════════════════ */
.nav-tabs { border-color: var(--bd) !important; }
.nav-tabs > li > a {
  color: var(--tx1) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}
.nav-tabs > li > a:hover {
  color: var(--ac) !important;
  background-color: var(--acd) !important;
  border-color: var(--bd) var(--bd) transparent !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--tx0) !important;
  background-color: var(--bg1) !important;
  border: 1px solid var(--bd) !important;
  border-bottom-color: var(--bg1) !important;
  cursor: pointer !important;
}

/* ══════════════════════════════════════════
   15. PAGINATION
══════════════════════════════════════════ */
.pagination > li > a,
.pagination > li > span {
  background-color: var(--bg2) !important;
  border-color: var(--bd) !important;
  color: var(--ac) !important;
}
.pagination > li > a:hover { background-color: var(--bg3) !important; }
.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--ac) !important;
  border-color: var(--ac) !important;
  color: #fff !important;
}
.pagination > .disabled > a,
.pagination > .disabled > span {
  background-color: var(--bg1) !important;
  border-color: var(--bd) !important;
  color: var(--tx2) !important;
}

/* ══════════════════════════════════════════
   16. MODALS
══════════════════════════════════════════ */
.modal-content {
  background-color: var(--bg1) !important;
  border-color: var(--bd2) !important;
  color: var(--tx0) !important;
}
.modal-header { background-color: var(--bg2) !important; border-color: var(--bd) !important; }
.modal-footer { background-color: var(--bg2) !important; border-color: var(--bd) !important; }

/* ══════════════════════════════════════════
   17. LIST GROUP / MISC
══════════════════════════════════════════ */
.list-group-item {
  background-color: var(--bg1) !important;
  border-color: var(--bd) !important;
  color: var(--tx0) !important;
}
.list-group-item:hover,
.list-group-item.active {
  background-color: var(--acd) !important;
  color: var(--ac) !important;
}

hr { border-color: var(--bd) !important; }

/* default.css: .color-global / .color-project */
.color-global  { background-color: rgba(74,124,220,0.2) !important; color: var(--ac)  !important; }
.color-project { background-color: rgba(52,211,153,0.2) !important; color: var(--grn) !important; }

/* default.css: due date cells */
td.due-0, td.overdue { background-color: var(--redd) !important; color: var(--red) !important; font-weight: bold; }
td.due-1 { background-color: var(--orgd) !important; color: var(--org) !important; font-weight: bold; }
td.due-2 { background-color: var(--grnd) !important; color: var(--grn) !important; font-weight: bold; }

/* ace-part2.css: .timeline-item .widget-box { background-color: #F2F6F9 } */
.timeline-item .widget-box,
.timeline-item:nth-child(even) .widget-box {
  background-color: var(--bg2) !important;
  color: var(--tx0) !important;
  border-color: var(--bd) !important;
}
.timeline-item .transparent .widget-header,
.timeline-item:nth-child(even) .widget-box.transparent .widget-header {
  background-color: var(--bg1) !important;
}
.timeline-container:before {
  background-color: var(--bd) !important;
  border-color: var(--bd2) !important;
}

/* Dropzone */
.dropzone {
  background-color: var(--bg2) !important;
  border-color: var(--bd) !important;
}
.dropzone .dz-preview,
.dropzone-previews .dz-preview {
  background-color: var(--bg1) !important;
  border-color: var(--bd) !important;
  color: var(--tx0) !important;
}

/* Code */
code, pre, kbd {
  background-color: var(--bg2) !important;
  border: 1px solid var(--bd) !important;
  color: var(--grn) !important;
  border-radius: 4px !important;
}
pre { color: var(--tx0) !important; }

/* Dependency indicators */
span.dependency_met    { color: var(--grn) !important; }
span.dependency_unmet  { color: var(--red) !important; }
span.dependency_dated  { color: var(--org) !important; }
span.dependency_upgrade{ color: var(--yel) !important; }

/* Scrollbars */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg0); }
::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #4a5a7a; }


body .btn.btn-white[class],
body .btn.btn-white.no-hover:hover[class],
body .btn.btn-white.no-hover:active[class] {
  background-color: var(--bg3) !important;
  border-color: var(--bd2) !important;
  color: var(--tx0) !important;
  text-shadow: none !important;
}

.badge,
.label {
  background-color: var(--ac) !important;
  color: var(--tx0) !important;
  text-shadow: none !important;
}

body.skin-3 .nav-list > li.active.highlight > a,
body.skin-3 .nav-list > li.active > a {
  background-color: var(--acd) !important;
  color: var(--ac2) !important;
}

body .markItUpContainer {
  background: var(--bg3) !important;
  border-color: var(--bd2) !important;
}