/* ─── v5 brand color overrides (driven by BrandedTheme) ─────────────────────
   portal.css is loaded before v5.css in head_css.html, and many bootstrap components locally resolve their own classes at build time.  These root variables mainly serve as a backup */
:root {
    --bs-primary: #056159 !important;
    /* --bs-secondary-color: color-mix(in srgb, #056159 80%, #000) !important; */
    --portal-secondary: #CF4064 !important;
    /* --cb-row-selected drives our own selected-row background in
       _tables.scss. DataTables' own --dt-row-selected is an "R, G, B"
       triple (see _tables.scss); assigning a color to it would break its
       own rules. */
    --cb-row-selected: color-mix(in srgb, #CF4064 70%, transparent) !important;
    --bs-link-color: #056159 !important;
    --bs-link-hover-color: #056159 !important;
    --primary-800: #056159 !important;
    --primary-100: #dae7e6 !important;
    --cb-accent: #CF4064 !important;
    --cb-tooltip: rgba(255,255,255,1) !important;
    --cb-tooltip-bg: rgba(16,22,42,1) !important;

    /* Surface = card/panel/tab-pane background.
       Page-bg = the body behind cards. */
    --surface: #FFFFFF !important;
    --page-bg: rgba(216,240,209,1) !important;
    /* Drive Bootstrap's body color from the theme so dark themes don't
       leave dark text on a dark background. Overrides the BS5 default
       (--bs-body-color: #212529) declared later in v5.css. */
    --bs-body-color: rgba(2,96,0,1) !important;
    --fg-1: rgba(2,96,0,1) !important;
    /* Derive neutral hover/border tones from the surface so .btn-light,
       .pagination, list hovers, etc. scale with the theme. In a light
       theme this lands close to the original #F1F1F1; in a dark theme
       it becomes a slight lift from the dark surface instead of a
       jarring near-white. color-mix() is supported in all modern
       evergreen browsers. */
    --neutral-100: color-mix(in srgb, #FFFFFF 92%, rgba(2,96,0,1)) !important;
    --neutral-250: color-mix(in srgb, #FFFFFF 80%, rgba(2,96,0,1)) !important;
    --neutral-400: color-mix(in srgb, #FFFFFF 60%, rgba(2,96,0,1)) !important;
    /* Secondary/muted text (dashboard subtitles, form labels, chart axis text).
       Derived from the theme text color so it keeps contrast on dark themes
       instead of the static slate that vanished on a dark surface. */
    --fg-2: color-mix(in srgb, rgba(2,96,0,1) 62%, #FFFFFF) !important;
    --bs-light-text-emphasis: color-mix(in srgb, rgba(2,96,0,1) 70%, #FFFFFF) !important;
    /* Semantic status colors used mainly by vue components (dashboard charts, status text, badges all read from these).  */
    
    --success: color-mix(in srgb, #056159 72%, rgba(2,96,0,1)) !important;
    --danger: color-mix(in srgb, #D64545 80%, rgba(2,96,0,1)) !important;
    --warning: color-mix(in srgb, #D9A406 82%, rgba(2,96,0,1)) !important;
    --info: color-mix(in srgb, #0A6ED1 80%, rgba(2,96,0,1)) !important;
    
}

/* Card + table per-component vars.
   Bootstrap 5 declares --bs-card-bg / --bs-table-bg on the .card and .table selectors
   themselves (not :root), so a :root override is shadowed once Bootstrap's rule matches.
   We re-override at the component-class level so dark themes flow through to:
   - Plain .card wrappers
   - DataTables (c2.dataTables.init wraps the dt-container in .card.card-body and adds
     .table to the table — both relied on var(--bs-body-bg) / var(--bs-emphasis-color)
     which are hardcoded at SCSS build time and stayed light). */
.card {
    --bs-card-bg: #FFFFFF !important;
    --bs-card-color: rgba(2,96,0,1) !important;
    --bs-card-border-color: color-mix(in srgb, #FFFFFF 70%, rgba(2,96,0,1)) !important;
    /* $card-cap-bg is a hardcoded #FFFFFF at SCSS build time, so .card-header
       stays white on a dark theme. Re-point it at the surface so headers flow
       through with the card body. */
    --bs-card-cap-bg: #FFFFFF !important;
    --bs-card-cap-color: rgba(2,96,0,1) !important;
}
/* Scope --bs-tertiary-bg override to just form-control so it doesn't leak
   into .input-group-text or --bs-pagination-hover-bg (Bootstrap uses the same
   token there in light mode too, which turned addons into 60% primary while
   keeping content_text_color). */
.form-control, .form-control::file-selector-button {
    --bs-tertiary-bg: color-mix(in srgb, #056159 60%, transparent) !important;
}
.table {
    --bs-table-bg: transparent !important;
    --bs-table-color: rgba(2,96,0,1) !important;
    --bs-table-striped-color: rgba(2,96,0,1) !important;
    --bs-table-hover-color: rgba(2,96,0,1) !important;
    --bs-table-hover-bg: color-mix(in srgb, #FFFFFF 88%, rgba(2,96,0,1)) !important;
    --bs-table-border-color: color-mix(in srgb, #FFFFFF 80%, rgba(2,96,0,1)) !important;
    /* See :root above for the --dt-row-selected/--cb-row-selected split. */
    --cb-row-selected: color-mix(in srgb, #056159 60%, transparent) !important;
}
.dropdown-menu {
    --bs-dropdown-bg: #FFFFFF !important;
    --bs-dropdown-color: rgba(2,96,0,1) !important;
    --bs-dropdown-border-color: color-mix(in srgb, #FFFFFF 80%, rgba(2,96,0,1)) !important;
    --bs-dropdown-divider-bg: color-mix(in srgb, #FFFFFF 80%, rgba(2,96,0,1)) !important;
    --bs-dropdown-link-color: rgba(2,96,0,1) !important;
    --bs-dropdown-link-hover-color: rgba(2,96,0,1) !important;
    --bs-dropdown-link-hover-bg: color-mix(in srgb, #FFFFFF 88%, rgba(2,96,0,1)) !important;
    --bs-dropdown-link-active-color: #FFFFFF !important;
    --bs-dropdown-link-active-bg: #056159 !important;
}
.list-group {
    --bs-list-group-bg: #FFFFFF !important;
    --bs-list-group-color: rgba(2,96,0,1) !important;
    --bs-list-group-border-color: color-mix(in srgb, #FFFFFF 80%, rgba(2,96,0,1)) !important;
    --bs-list-group-action-color: rgba(2,96,0,1) !important;
    --bs-list-group-action-hover-color: rgba(2,96,0,1) !important;
    --bs-list-group-action-hover-bg: color-mix(in srgb, #FFFFFF 88%, rgba(2,96,0,1)) !important;
    --bs-list-group-action-active-color: rgba(2,96,0,1) !important;
    --bs-list-group-action-active-bg: color-mix(in srgb, #FFFFFF 80%, rgba(2,96,0,1)) !important;
}
.modal-content {
    --bs-modal-bg: #FFFFFF !important;
    --bs-modal-color: rgba(2,96,0,1) !important;
    --bs-modal-border-color: color-mix(in srgb, #FFFFFF 80%, rgba(2,96,0,1)) !important;
    --bs-modal-header-border-color: color-mix(in srgb, #FFFFFF 80%, rgba(2,96,0,1)) !important;
    --bs-modal-footer-border-color: color-mix(in srgb, #FFFFFF 80%, rgba(2,96,0,1)) !important;
}
/* Global-alert toasts (c2.alerts) */
.toast {
    --bs-toast-bg: #FFFFFF !important;
    --bs-toast-color: rgba(2,96,0,1) !important;
    --bs-toast-border-color: color-mix(in srgb, #FFFFFF 80%, rgba(2,96,0,1)) !important;
    --bs-toast-header-bg: #FFFFFF !important;
    --bs-toast-header-color: rgba(2,96,0,1) !important;
    --bs-toast-header-border-color: color-mix(in srgb, #FFFFFF 80%, rgba(2,96,0,1)) !important;
}
.alert {
    --bs-card-bg: #FFFFFF !important;
    --bs-card-color: rgba(2,96,0,1) !important;
    box-shadow: 0.5px 1px 2px 1px rgba(0, 0, 0, 0.4);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.misc-settings .settings-section-title {
    color: rgba(2,96,0,1) !important;
}

#main-nav.navbar,
#main-nav.side_navbar,
.navbar .nav-link,
.navbar .dropdown-menu ,
.side_navbar__menu .nav-link,
.side_navbar__menu .dropdown-menu {
    --bs-dropdown-link-color: rgba(231,175,47,1) !important;
    --bs-navbar-color: rgba(231,175,47,1) !important;
    --bs-nav-link-color: rgba(231,175,47,1) !important;
    --bs-dropdown-bg: #FFFFFF !important;
    --bs-dropdown-header-color: color-mix(in srgb, rgba(2,96,0,1) 75%, transparent) !important;
    --bs-navbar-active-color: rgba(2,96,0,1) !important;
    --bs-dropdown-border-color: color-mix(in srgb, #FFFFFF 50%, #000) !important;
    --bs-nav-link-hover-color: rgba(2,96,0,1) !important;
}
#main-nav .nav-item.active > .nav-link {
    color: rgba(2,96,0,1) !important;
}

/* Form controls. Bootstrap 5 hardcodes input bg/color/border to
   --bs-body-bg / --bs-body-color / --bs-border-color at SCSS build time, so
   inputs render as white islands on dark themes (and labels/help text default
   to the static --bs-secondary-color). Override at the :root level so every
   .form-control / .form-select / textarea / .form-label / .form-text in a
   branded portal picks up surface-derived backgrounds and theme-appropriate
   foreground. Inputs sit slightly recessed from the surface so they read as
   editable fields against a card background; readonly/plaintext inherits
   the surface so it visually merges with surrounding card content. */
.form-control,
.form-select,
textarea.form-control,
select.form-control,
select {
	background-color: color-mix(in srgb, #FFFFFF 92%, #FFFFFF) !important;
	color: rgba(2,96,0,1) !important;
	border-color: color-mix(in srgb, #FFFFFF 70%, rgba(2,96,0,1)) !important;
}
.selectize-input,
.selectize-dropdown {
  border-color: color-mix(in srgb, #FFFFFF 70%, rgba(2,96,0,1)) !important;
	background-color: color-mix(in srgb, #FFFFFF 92%, #FFFFFF) !important;
	color: rgba(2,96,0,1) !important;
}
.input-daterange .input-group-addon {
	border-color: color-mix(in srgb, #FFFFFF 70%, rgba(2,96,0,1)) !important;

}
.form-control:focus,
.form-select:focus,
select:focus {
    background-color: color-mix(in srgb, #FFFFFF 92%, #FFFFFF ) !important;
    color: rgba(2,96,0,1) !important;
}
/* <option> rendering inside a <select> dropdown is partially browser-painted
   (Chrome/Firefox honor background-color, Safari ignores it). Set the bg here
   so the dropdown panel matches the field on browsers that allow it. */
select option,
.form-select option {
    background-color: #FFFFFF !important;
    color: rgba(2,96,0,1) !important;
}
/* Checkboxes & radios. .form-check-input is shared with the BS5 form-switch
   so we set the unchecked state to a recessed surface (visible against the
   card on both light and dark themes) and the checked state to the brand
   primary. The form-switch SVG dot rides on top of background-color so this
   does not affect switch appearance beyond the track color. */
.form-check-input {
    background-color: color-mix(in srgb, #FFFFFF 88%, rgba(2,96,0,1)) !important;
    border-color: color-mix(in srgb, #FFFFFF 70%, rgba(2,96,0,1)) !important;
}
.form-check-input:checked {
    background-color: #056159 !important;
    border-color: #056159 !important;
}
.form-control[readonly],
.form-control-plaintext {
    /* Slightly darker than the surface so a readonly field still reads as
       recessed/non-interactive rather than fully merging with the card. */
    background-color: color-mix(in srgb, #FFFFFF 92%, #000000) !important;
    /* Muted relative to normal field text so a readonly field still reads as
       non-interactive regardless of the chosen content text color -- full
       opacity here made readonly fields visually indistinguishable from
       editable ones against some surface colors. */
    color: color-mix(in srgb, rgba(2,96,0,1) 65%, transparent) !important;
}
.form-control::placeholder {
    color: color-mix(in srgb, rgba(2,96,0,1) 55%, transparent) !important;
}
/* Inside a .form-floating the floating label IS the placeholder, so Bootstrap
   makes the native placeholder transparent. The themed rule above (with
   !important) would otherwise re-show it, stacking the label and placeholder
   on top of each other. Restore transparency for floating-label inputs. */
.form-floating > .form-control::placeholder {
    color: transparent !important;
}
.form-label,
.col-form-label,
.form-check-label,
legend,
.server-powered-text,
.nav-boxed-tabs .nav-link {
    color: rgba(2,96,0,1) !important;
}

.form-text,
.help-block,
#search-footer .text-muted,
small.text-muted,
.text-secondary.portal-secondary,
.card .text-muted,
.catalog-card__type,
dl dt,
.dt-style,
.settings-toggle__help,
.colors-section-title,
.settings-section-title {
    color: color-mix(in srgb, rgba(2,96,0,1) 70%, #FFFFFF) !important;
}
.catalog-card__count,
.catalog-toolbar__search-icon,
.admin-launcher .accordion-button::after {
   color: #056159 !important;
}

/* -------------------------- Dark theme overrides  --------------------------  */
html[data-bs-theme="dark"] {
    .dropdown-header {
        color: color-mix(in srgb, rgba(231,175,47,1) 75%, transparent);
    }
    kbd {
        color: rgba(231,175,47,1);
        background-color: color-mix(in srgb, rgba(231,175,47,1) 30%, transparent);
    }
    /* Selectize Dark Mode Changes */
    .selectize-control.single .selectize-input.dropdown-active:after,
    .selectize-control.multi .selectize-input.dropdown-active:after {
        border-color: transparent transparent color-mix(in srgb, rgba(2,96,0,1) 70%, #FFFFFF) transparent !important;
    }
    .selectize-control.single .selectize-input:after,
    .selectize-control.multi .selectize-input:after {
         border-color: color-mix(in srgb, rgba(2,96,0,1) 70%, #FFFFFF) transparent transparent transparent !important;
    }
    .selectize-control.multi .selectize-input > div.item {
        color: rgba(2,96,0,1) !important;
        background: #FFFFFF !important;
        border: 1px solid color-mix(in srgb, #FFFFFF 70%, #000) !important;
    }
    .selectize-control.multi .selectize-input {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
    /* End Selectize Dark Mode Changes */
    .blocker-fade {
        background-color: color-mix(in srgb, #FFFFFF 50%, transparent) !important;
    }
    .alert {
        box-shadow: 0.5px 1px 2px 1px rgba(0, 0, 0, 0.4);
    }
    input::placeholder {
        color: color-mix(in srgb, rgba(2,96,0,1) 70%, #FFFFFF) !important;
    }
    /* .btn-group .btn.active — light + dark rules both live in
       static_src/v5/scss/_buttons.scss to prevent load-order drift. */
    .cb-tag {
        background: color-mix(in srgb, #FFFFFF 65%, #000) !important;
        color: rgba(2,96,0,1) !important;
        border-color: color-mix(in srgb, #FFFFFF 70%, #000) !important;
    }
    #server-locked-display, #server-power-display {
        color: rgba(2,96,0,1) !important;
    }
    .table {
    --cb-row-selected: color-mix(in srgb, #056159 50%, transparent) !important;
    }
    .toast {
        /* Toast text-* colors read from the :root --bs-<status> tokens
           above; keeping the values in one place so the two blocks can't
           drift. */
        .text-success { color: var(--bs-success) !important; }
        .text-info    { color: var(--bs-info) !important; }
        .text-danger  { color: var(--bs-danger) !important; }
        .text-warning { color: var(--bs-warning) !important; }
    }
    pre {
        color: rgba(2,96,0,1) !important;
        border-color: #000;
        background-color: #0E1620;
        /* Background color copied from the code well on the job details page */
    }
    /* Native file select uploader */
    input#id_zip_file::file-selector-button {
        color: rgba(2,96,0,1) !important;
    }
}
/* Bootstrap 5.3 .btn-primary uses per-component --bs-btn-* vars set at SCSS
   build time, so we have to override them per-class to retheme at runtime. */
.btn-primary {
    --bs-btn-bg: #056159 !important;
    --bs-btn-border-color: #056159 !important;
    --bs-btn-hover-bg: #056159 !important;
    --bs-btn-hover-border-color: #056159 !important;
    --bs-btn-active-bg: #056159 !important;
    --bs-btn-active-border-color: #056159 !important;
    --bs-btn-disabled-bg: #056159 !important;
    --bs-btn-disabled-border-color: #056159 !important;
    filter: none;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: color-mix(in srgb, #056159 80%, #000)  !important;
}

.pagination {
    --bs-pagination-active-bg: #056159 !important;
    --bs-pagination-active-border-color: #056159 !important;
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: #056159 !important;
    --bs-nav-tabs-link-active-border-color: transparent transparent #056159 !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border-bottom-color: #056159 !important;
}
.nav-boxed-tabs .nav-link.active {
    color: #056159 !important;
}

/* No !important here on purpose: links already pick up the brand color via
   --bs-link-color above, and forcing it would override the higher-specificity
   navbar link rules later in this file (turning nav text brand-colored). */
a:not(.btn):not(.stretched-link):not(.navbar-brand):not([role="button"]),
.link-primary {
    color: #056159;
}

a:not(.btn):not(.stretched-link):not(.navbar-brand):not([role="button"]):hover,
.link-primary:hover {
    color: color-mix(in srgb, #056159 85%, #FFF)  !important;
}

/* Onboarding wizard pill — required uses highlight, optional uses primary. */
.setup-pill--required { background: #CF4064 !important; }
.setup-pill--optional { background: #056159 !important; }
/* Bootstrap-toggle ON tracks brand primary. */
.toggle.btn-primary { background-color: #056159 !important; border-color: #056159 !important; }
/* ──────────────────────────────────────────────────────────────────────── */

body, html {
    background: none repeat scroll 0 0 rgba(216,240,209,1);
}
body {
    background-color: rgba(216,240,209,1)!important;
    color: rgba(2,96,0,1) !important;
}

    h1, h2, h3, h4, h5, h6 {
        color: rgba(2,96,0,1);
    }
    :root {
        
        --portal-heading: rgba(2,96,0,1);
    }


/* Modal/Dropdown Menu Content Text Color */
.modal-body, .dropdown-menu {
    color: rgba(2,96,0,1) !important;
}

/* Catalog Filters */
.catalog-filters--inner {
    background-color: rgba(216,240,209,1);
    color: rgba(2,96,0,1);
}

/* Security Message */
.security-message {
    color: rgba(36,74,93,1);
    background-color: rgba(216,240,209,1);
    font-size: 0.9em;
    /* override default 1em padding */
    padding: 0.5em;
}

/* Login */
.login-text {
    color: rgba(255,255,255,1) !important;
}
.hrdivider span {
    background-color: rgba(216,240,209,1) !important;
}

/* Centered Login Layout */
.login-background,
.login-header,
.login-tagline,
.login-mobile-footer {
    color: rgba(255,255,255,1);
}


.login-background {
    background-position: center !important;
}


.login-background {
    background-image: url(/static/uploads/branding/CB_splash_image.jpg) !important;
}



/* Splash Image (Legacy two-column layout) */

.bg-login-splash {
    background-position: center !important;
}

.bg-login-splash {
    background-color: rgba(216,240,209,1);
}

    .bg-login-splash {
        background-image: url(/static/uploads/branding/CB_splash_image.jpg) !important;
    }

/* Login Splash Background Image Overlay */


    .loginout #banner {
        

        top: 100px;
    }


/* Custom Banner */


/* Loading image */
/* TODO: [v5] Delete .spinner{...}
 * block below after complete v5 conversion
 */

    .spinner {
        animation: pulse 1.3s infinite;
        background: url(/static/uploads/branding/G_with_Globe.png) no-repeat 0 0;
        background-size: contain;
    }


/* Content styles */
#tooltip-container .tooltip-inner,
.tooltip > .tooltip-inner {
    color: rgba(255,255,255,1);
    background-color: rgba(16,22,42,1);
    word-wrap: break-word;
}
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: rgba(16,22,42,1) !important;
}
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: rgba(16,22,42,1) !important;
}
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: rgba(16,22,42,1) !important;
}
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: rgba(16,22,42,1) !important;
}

/* Dashboard Actions Menu style */
.dashboard-actions__menu > button.dropdown-toggle {
    background-color: rgba(3,61,0,1) !important;
}
.dashboard-actions__menu > button.dropdown-toggle > svg {
    fill: rgba(231,175,47,1) !important;
    color: rgba(231,175,47,1) !important;
}

/* TODO: [v5] Delete Spinner blocks below after complete v5 conversion */
/* Spinner */
.spinner-inline div {
    display: inline-block;
    background-color: rgba(3,61,0,1);
    width: 10px;
    height: 10px;
    border-radius: 4px;
    -webkit-animation: spinner-inline 1s ease-in-out infinite;
       -moz-animation: spinner-inline 1s ease-in-out infinite;
         -o-animation: spinner-inline 1s ease-in-out infinite;
            animation: spinner-inline 1s ease-in-out infinite;

}

.spinner-inline div:nth-child(2) {
  animation-delay: 0.09s;
}
.spinner-inline div:nth-child(3) {
  animation-delay: 0.18s;
}
.spinner-inline div:nth-child(4) {
  animation-delay: 0.27s;
}
.spinner-inline div:nth-child(5) {
  animation-delay: 0.36s;
}

@-webkit-keyframes spinner-inline {
    0% { opacity:1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes spinner-inline {
    0% { opacity:1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@-o-keyframes spinner-inline {
    0% { opacity:1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes spinner-inline {
    0% { opacity:1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* Navbar */
#main-nav.navbar-portal {
    background-color: rgba(3,61,0,1);
    /* Scrollbar on top nav collapse contents */
    scrollbar-color: color-mix(in srgb, rgba(3,61,0,1) 85%, rgba(231,175,47,1) ) rgba(3,61,0,1);
    ::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, rgba(3,61,0,1) 85%, rgba(231,175,47,1) );
    }
    ::-webkit-scrollbar-track {
        background: rgba(3,61,0,1);
    }
    ::-webkit-scrollbar {
        width: 16px;
    }

    .dropdown-menu .dropdown-item {
        color: rgba(2,96,0,1) !important;
    }
    .navbar-toggler {
        color: rgba(231,175,47,1) !important;
        &:hover,
        &:focus {
            color: rgba(2,96,0,1) !important;
        }
    }
    .nav-shrink-btn:hover,
    .nav-shrink-btn:focus {
        color: rgba(2,96,0,1) !important;
    }
}

#top-navbar > ul.navbar-nav > li.active > a {
    font-weight: 400;
}

/* Order form's per-service-item tab list. Tinted row + left accent bar on the
   selected item, driven by the theme's Basic Colors (not the derived/Advanced
   topnav_active_bg_color) -- a soft primary-tinted background stays legible
   next to the ready/error status icons without competing with their red/green
   semantics the way a solid fill would. */
#service-item-nav.nav-pills .nav-link {
    background-color: #FFFFFF !important;
    border-left: 3px solid transparent;
    border-radius: 4px;
}
#service-item-nav.nav-pills .nav-link:hover {
    background-color: color-mix(in srgb, #056159 6%, #FFFFFF) !important;
}
#service-item-nav.nav-pills .nav-link.active {
    background-color: color-mix(in srgb, #056159 12%, #FFFFFF) !important;
    border-left: 3px solid #056159 !important;
    color: #056159 !important;
    font-weight: 650;
}
@media (min-width: 768px) {
    #top-navbar > ul.navbar-nav > li.active > a,
    #top-navbar > ul.navbar-nav > li.active > a:focus,
    #main-nav > div.navbar-header > a.active {
        border-bottom: 2px solid rgba(2,96,0,1) !important;
    }
}

#main-nav .nav-item .nav-link:hover,
#main-nav .nav-item .nav-link:focus {
    color: rgba(2,96,0,1) !important;
}


.spotlight-results {
    border: 1px solid color-mix(in srgb, #FFFFFF 80%, black) !important;
}