:root {
 
    --primary: var(--acs-nav);
    --secondary: var(--acs-nav);
}

/* Custom ACS Nav Color */
.acs-nav {
    background-color: var(--acs-nav, #2c4da0) !important;
   /* color: var(--nav-text-color, #ffffff) !important;*/
}

.acs-primary-color {
    color: var(--acs-nav, #ffffff) !important;
}
.acs-secondary-color {
    color: var(--secondary-color, #ffffff) !important;
}

/* Custom Secondary Color */
.secondary-color {
    background-color: var(--secondary-color, #2c4da0) !important;
    color: #ffffff !important;
}

/* Tertiary Color */
.tertiary-color {
    background-color: var(--tertiary-color, #ee1e29) !important;
    color: #ffffff !important;
}

/* Override primary colors with opacity using background-color and opacity */
.bg-primary-light-5 {
    background-color: var(--acs-nav) !important; /* No need to extract RGB manually */
    opacity: 0.95 !important; /* Apply 95% opacity */
}

.bg-primary-light-4 {
    background-color: var(--acs-nav) !important; /* No need to extract RGB manually */
    opacity: 0.85 !important; /* Apply 85% opacity */
}

.bg-primary-light-3 {
    background-color: var(--acs-nav) !important; /* No need to extract RGB manually */
    opacity: 0.75 !important; /* Apply 75% opacity */
}

.bg-primary-light-2 {
    background-color: var(--acs-nav) !important; /* No need to extract RGB manually */
    opacity: 0.65 !important; /* Apply 65% opacity */
}

.bg-primary-light-1 {
    background-color: var(--acs-nav) !important; /* No need to extract RGB manually */
    opacity: 0.55 !important; /* Apply 55% opacity */
}

.bg-primary {
    background-color: var(--acs-nav) !important; /* Full opacity */
    opacity: 1 !important; /* 100% opacity */
}

.bg-primary-dark-5 {
    background-color: var(--acs-nav) !important; /* No need to extract RGB manually */
    opacity: 0.95 !important; /* Apply 95% opacity */
}

.bg-primary-dark-4 {
    background-color: var(--acs-nav) !important; /* No need to extract RGB manually */
    opacity: 0.85 !important; /* Apply 85% opacity */
}

.bg-primary-dark-3 {
    background-color: var(--acs-nav) !important; /* No need to extract RGB manually */
    opacity: 0.75 !important; /* Apply 75% opacity */
}

.bg-primary-dark-2 {
    background-color: var(--acs-nav) !important; /* No need to extract RGB manually */
    opacity: 0.65 !important; /* Apply 65% opacity */
}

.bg-primary-dark-1 {
    background-color: var(--acs-nav) !important; /* No need to extract RGB manually */
    opacity: 0.55 !important; /* Apply 55% opacity */
}

/* Override secondary colors with opacity using background-color and opacity */
.bg-secondary-light-5 {
    background-color: var(--secondary-color) !important; /* No need to extract RGB manually */
    opacity: 0.95 !important; /* Apply 95% opacity */
}

.bg-secondary-light-4 {
    background-color: var(--secondary-color) !important; /* No need to extract RGB manually */
    opacity: 0.85 !important; /* Apply 85% opacity */
}

.bg-secondary-light-3 {
    background-color: var(--secondary-color) !important; /* No need to extract RGB manually */
    opacity: 0.75 !important; /* Apply 75% opacity */
}

.bg-secondary-light-2 {
    background-color: var(--secondary-color) !important; /* No need to extract RGB manually */
    opacity: 0.65 !important; /* Apply 65% opacity */
}

.bg-secondary-light-1 {
    background-color: var(--secondary-color) !important; /* No need to extract RGB manually */
    opacity: 0.55 !important; /* Apply 55% opacity */
}

.bg-secondary {
    background-color: var(--secondary-color) !important; /* Full opacity */
    opacity: 1 !important; /* 100% opacity */
}

.bg-secondary-dark-1 {
    background-color: var(--secondary-color) !important; /* No need to extract RGB manually */
    opacity: 0.95 !important; /* Apply 95% opacity */
}

.bg-secondary-dark-2 {
    background-color: var(--secondary-color) !important; /* No need to extract RGB manually */
    opacity: 0.85 !important; /* Apply 85% opacity */
}

.bg-secondary-dark-3 {
    background-color: var(--secondary-color) !important; /* No need to extract RGB manually */
    opacity: 0.75 !important; /* Apply 75% opacity */
}

.bg-secondary-dark-4 {
    background-color: var(--secondary-color) !important; /* No need to extract RGB manually */
    opacity: 0.65 !important; /* Apply 65% opacity */
}

.bg-secondary-dark-5 {
    background-color: var(--secondary-color) !important; /* No need to extract RGB manually */
    opacity: 0.55 !important; /* Apply 55% opacity */
}

/* Primary color overrides */
.text-primary {
    color: var(--acs-nav) !important;
}
.bg-primary {
    background-color: var(--acs-nav) !important;
}
.border-primary {
    border-color: var(--acs-nav) !important;
}
.badge-primary {
    background: var(--acs-nav) !important;
    color: #fff !important;
}
.avatar-primary > .initial-wrap {
    background-color: var(--acs-nav) !important;
    color: #fff !important;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:active {
    background-color: var(--acs-nav) !important;
    border-color: var(--acs-nav) !important;
    color: #fff !important;
}
.btn-soft-primary,
.btn-soft-primary:focus,
.btn-soft-primary:hover,
.btn-soft-primary:active {
    background-color: var(--acs-nav) !important;
    color: var(--acs-nav) !important;
    border-color: var(--acs-nav) !important;
}
.btn-outline-primary,
.btn-outline-primary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:active {
    color: var(--acs-nav) !important;
    border-color: var(--acs-nav) !important;
}

/* Primary light/dark variants */
.bg-primary-light-5 {
    background-color: var(--acs-nav) !important;
    opacity: 0.95 !important;
}
.bg-primary-light-4 {
    background-color: var(--acs-nav) !important;
    opacity: 0.85 !important;
}
.bg-primary-light-3 {
    background-color: var(--acs-nav) !important;
    opacity: 0.75 !important;
}
.bg-primary-light-2 {
    background-color: var(--acs-nav) !important;
    opacity: 0.65 !important;
}
.bg-primary-light-1 {
    background-color: var(--acs-nav) !important;
    opacity: 0.55 !important;
}
.bg-primary-dark-1 {
    background-color: var(--acs-nav) !important;
    opacity: 0.55 !important;
}
.bg-primary-dark-2 {
    background-color: var(--acs-nav) !important;
    opacity: 0.65 !important;
}
.bg-primary-dark-3 {
    background-color: var(--acs-nav) !important;
    opacity: 0.75 !important;
}
.bg-primary-dark-4 {
    background-color: var(--acs-nav) !important;
    opacity: 0.85 !important;
}
.bg-primary-dark-5 {
    background-color: var(--acs-nav) !important;
    opacity: 0.95 !important;
}

/* Secondary color overrides */
.text-secondary {
    color: var(--secondary-color) !important;
}
.bg-secondary {
    background-color: var(--secondary-color) !important;
}
.border-secondary {
    border-color: var(--secondary-color) !important;
}
.badge-secondary {
    background: var(--secondary-color) !important;
    color: #fff !important;
}
.avatar-secondary > .initial-wrap {
    background-color: var(--secondary-color) !important;
    color: #fff !important;
}

.btn-secondary,
.btn-secondary:focus,
.btn-secondary:hover,
.btn-secondary:active {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #fff !important;
}
.btn-soft-secondary,
.btn-soft-secondary:focus,
.btn-soft-secondary:hover,
.btn-soft-secondary:active {
    background-color: var(--secondary-color) !important;
    color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}
.btn-outline-secondary,
.btn-outline-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:active {
    color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

/* Secondary light/dark variants */
.bg-secondary-light-5 {
    background-color: var(--secondary-color) !important;
    opacity: 0.95 !important;
}
.bg-secondary-light-4 {
    background-color: var(--secondary-color) !important;
    opacity: 0.85 !important;
}
.bg-secondary-light-3 {
    background-color: var(--secondary-color) !important;
    opacity: 0.75 !important;
}
.bg-secondary-light-2 {
    background-color: var(--secondary-color) !important;
    opacity: 0.65 !important;
}
.bg-secondary-light-1 {
    background-color: var(--secondary-color) !important;
    opacity: 0.55 !important;
}
.bg-secondary-dark-1 {
    background-color: var(--secondary-color) !important;
    opacity: 0.95 !important;
}
.bg-secondary-dark-2 {
    background-color: var(--secondary-color) !important;
    opacity: 0.85 !important;
}
.bg-secondary-dark-3 {
    background-color: var(--secondary-color) !important;
    opacity: 0.75 !important;
}
.bg-secondary-dark-4 {
    background-color: var(--secondary-color) !important;
    opacity: 0.65 !important;
}
.bg-secondary-dark-5 {
    background-color: var(--secondary-color) !important;
    opacity: 0.55 !important;
}
.btn-grey {
    background-color: #9e9e9e;
}
/* Gradients */
.bg-gradient-primary {
    background: linear-gradient(45deg, var(--acs-nav), #7429f8) !important;
}
.bg-gradient-secondary {
    background: linear-gradient(45deg, var(--secondary-color), #9e9e9e) !important;
}

/* === FULL PRIMARY COLOR OVERRIDES (ALL STATES) === */
.text-primary,
.text-primary:focus,
.text-primary:hover,
.text-primary:active,
.text-primary.active,
.text-primary.disabled,
.text-primary:disabled {
    color: var(--acs-nav) !important;
}
.border-primary,
.border-primary:focus,
.border-primary:hover,
.border-primary:active,
.border-primary.active,
.border-primary.disabled,
.border-primary:disabled {
    border-color: var(--acs-nav) !important;
}
.badge-primary,
.badge-primary:focus,
.badge-primary:hover,
.badge-primary:active,
.badge-primary.active,
.badge-primary.disabled,
.badge-primary:disabled {
    background: var(--acs-nav) !important;
    color: #fff !important;
}
.avatar-primary > .initial-wrap {
    background-color: var(--acs-nav) !important;
    color: #fff !important;
}
.bg-primary,
.bg-primary:focus,
.bg-primary:hover,
.bg-primary:active,
.bg-primary.active,
.bg-primary.disabled,
.bg-primary:disabled {
    background-color: var(--acs-nav) !important;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--acs-nav) !important;
    border-color: var(--acs-nav) !important;
    color: #fff !important;
}
.btn-soft-primary,
.btn-soft-primary:focus,
.btn-soft-primary:hover,
.btn-soft-primary:active,
.btn-soft-primary.active,
.btn-soft-primary.disabled,
.btn-soft-primary:disabled {
    background-color: var(--acs-nav) !important;
    color: var(--acs-nav) !important;
    border-color: var(--acs-nav) !important;
}
.btn-outline-primary,
.btn-outline-primary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--acs-nav) !important;
    border-color: var(--acs-nav) !important;
    background-color: transparent !important;
}

/* Primary light/dark variants (all states) */
.bg-primary-light-5,
.bg-primary-light-5:focus,
.bg-primary-light-5:hover,
.bg-primary-light-5:active,
.bg-primary-light-5.active,
.bg-primary-light-5.disabled,
.bg-primary-light-5:disabled {
    background-color: var(--acs-nav) !important;
    opacity: 0.95 !important;
}
.bg-primary-light-4,
.bg-primary-light-4:focus,
.bg-primary-light-4:hover,
.bg-primary-light-4:active,
.bg-primary-light-4.active,
.bg-primary-light-4.disabled,
.bg-primary-light-4:disabled {
    background-color: var(--acs-nav) !important;
    opacity: 0.85 !important;
}
.bg-primary-light-3,
.bg-primary-light-3:focus,
.bg-primary-light-3:hover,
.bg-primary-light-3:active,
.bg-primary-light-3.active,
.bg-primary-light-3.disabled,
.bg-primary-light-3:disabled {
    background-color: var(--acs-nav) !important;
    opacity: 0.75 !important;
}
.bg-primary-light-2,
.bg-primary-light-2:focus,
.bg-primary-light-2:hover,
.bg-primary-light-2:active,
.bg-primary-light-2.active,
.bg-primary-light-2.disabled,
.bg-primary-light-2:disabled {
    background-color: var(--acs-nav) !important;
    opacity: 0.65 !important;
}
.bg-primary-light-1,
.bg-primary-light-1:focus,
.bg-primary-light-1:hover,
.bg-primary-light-1:active,
.bg-primary-light-1.active,
.bg-primary-light-1.disabled,
.bg-primary-light-1:disabled {
    background-color: var(--acs-nav) !important;
    opacity: 0.55 !important;
}
.bg-primary-dark-1,
.bg-primary-dark-1:focus,
.bg-primary-dark-1:hover,
.bg-primary-dark-1:active,
.bg-primary-dark-1.active,
.bg-primary-dark-1.disabled,
.bg-primary-dark-1:disabled {
    background-color: var(--acs-nav) !important;
    opacity: 0.55 !important;
}
.bg-primary-dark-2,
.bg-primary-dark-2:focus,
.bg-primary-dark-2:hover,
.bg-primary-dark-2:active,
.bg-primary-dark-2.active,
.bg-primary-dark-2.disabled,
.bg-primary-dark-2:disabled {
    background-color: var(--acs-nav) !important;
    opacity: 0.65 !important;
}
.bg-primary-dark-3,
.bg-primary-dark-3:focus,
.bg-primary-dark-3:hover,
.bg-primary-dark-3:active,
.bg-primary-dark-3.active,
.bg-primary-dark-3.disabled,
.bg-primary-dark-3:disabled {
    background-color: var(--acs-nav) !important;
    opacity: 0.75 !important;
}
.bg-primary-dark-4,
.bg-primary-dark-4:focus,
.bg-primary-dark-4:hover,
.bg-primary-dark-4:active,
.bg-primary-dark-4.active,
.bg-primary-dark-4.disabled,
.bg-primary-dark-4:disabled {
    background-color: var(--acs-nav) !important;
    opacity: 0.85 !important;
}
.bg-primary-dark-5,
.bg-primary-dark-5:focus,
.bg-primary-dark-5:hover,
.bg-primary-dark-5:active,
.bg-primary-dark-5.active,
.bg-primary-dark-5.disabled,
.bg-primary-dark-5:disabled {
    background-color: var(--acs-nav) !important;
    opacity: 0.95 !important;
}
.bg-gradient-primary,
.bg-gradient-primary:focus,
.bg-gradient-primary:hover,
.bg-gradient-primary:active,
.bg-gradient-primary.active,
.bg-gradient-primary.disabled,
.bg-gradient-primary:disabled {
    background: linear-gradient(45deg, var(--acs-nav), #7429f8) !important;
}

/* === FULL SECONDARY COLOR OVERRIDES (ALL STATES) === */
.text-secondary,
.text-secondary:focus,
.text-secondary:hover,
.text-secondary:active,
.text-secondary.active,
.text-secondary.disabled,
.text-secondary:disabled {
    color: var(--secondary-color) !important;
}
.border-secondary,
.border-secondary:focus,
.border-secondary:hover,
.border-secondary:active,
.border-secondary.active,
.border-secondary.disabled,
.border-secondary:disabled {
    border-color: var(--secondary-color) !important;
}
.badge-secondary,
.badge-secondary:focus,
.badge-secondary:hover,
.badge-secondary:active,
.badge-secondary.active,
.badge-secondary.disabled,
.badge-secondary:disabled {
    background: var(--secondary-color) !important;
    color: #fff !important;
}
.avatar-secondary > .initial-wrap {
    background-color: var(--secondary-color) !important;
    color: #fff !important;
}
.bg-secondary,
.bg-secondary:focus,
.bg-secondary:hover,
.bg-secondary:active,
.bg-secondary.active,
.bg-secondary.disabled,
.bg-secondary:disabled {
    background-color: var(--secondary-color) !important;
}

.btn-secondary,
.btn-secondary:focus,
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary.disabled,
.btn-secondary:disabled {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #fff !important;
}
.btn-soft-secondary,
.btn-soft-secondary:focus,
.btn-soft-secondary:hover,
.btn-soft-secondary:active,
.btn-soft-secondary.active,
.btn-soft-secondary.disabled,
.btn-soft-secondary:disabled {
    background-color: var(--secondary-color) !important;
    color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}
.btn-outline-secondary,
.btn-outline-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
    color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    background-color: transparent !important;
}

/* Secondary light/dark variants (all states) */
.bg-secondary-light-5,
.bg-secondary-light-5:focus,
.bg-secondary-light-5:hover,
.bg-secondary-light-5:active,
.bg-secondary-light-5.active,
.bg-secondary-light-5.disabled,
.bg-secondary-light-5:disabled {
    background-color: var(--secondary-color) !important;
    opacity: 0.95 !important;
}
.bg-secondary-light-4,
.bg-secondary-light-4:focus,
.bg-secondary-light-4:hover,
.bg-secondary-light-4:active,
.bg-secondary-light-4.active,
.bg-secondary-light-4.disabled,
.bg-secondary-light-4:disabled {
    background-color: var(--secondary-color) !important;
    opacity: 0.85 !important;
}
.bg-secondary-light-3,
.bg-secondary-light-3:focus,
.bg-secondary-light-3:hover,
.bg-secondary-light-3:active,
.bg-secondary-light-3.active,
.bg-secondary-light-3.disabled,
.bg-secondary-light-3:disabled {
    background-color: var(--secondary-color) !important;
    opacity: 0.75 !important;
}
.bg-secondary-light-2,
.bg-secondary-light-2:focus,
.bg-secondary-light-2:hover,
.bg-secondary-light-2:active,
.bg-secondary-light-2.active,
.bg-secondary-light-2.disabled,
.bg-secondary-light-2:disabled {
    background-color: var(--secondary-color) !important;
    opacity: 0.65 !important;
}
.bg-secondary-light-1,
.bg-secondary-light-1:focus,
.bg-secondary-light-1:hover,
.bg-secondary-light-1:active,
.bg-secondary-light-1.active,
.bg-secondary-light-1.disabled,
.bg-secondary-light-1:disabled {
    background-color: var(--secondary-color) !important;
    opacity: 0.55 !important;
}
.bg-secondary-dark-1,
.bg-secondary-dark-1:focus,
.bg-secondary-dark-1:hover,
.bg-secondary-dark-1:active,
.bg-secondary-dark-1.active,
.bg-secondary-dark-1.disabled,
.bg-secondary-dark-1:disabled {
    background-color: var(--secondary-color) !important;
    opacity: 0.95 !important;
}
.bg-secondary-dark-2,
.bg-secondary-dark-2:focus,
.bg-secondary-dark-2:hover,
.bg-secondary-dark-2:active,
.bg-secondary-dark-2.active,
.bg-secondary-dark-2.disabled,
.bg-secondary-dark-2:disabled {
    background-color: var(--secondary-color) !important;
    opacity: 0.85 !important;
}
.bg-secondary-dark-3,
.bg-secondary-dark-3:focus,
.bg-secondary-dark-3:hover,
.bg-secondary-dark-3:active,
.bg-secondary-dark-3.active,
.bg-secondary-dark-3.disabled,
.bg-secondary-dark-3:disabled {
    background-color: var(--secondary-color) !important;
    opacity: 0.75 !important;
}
.bg-secondary-dark-4,
.bg-secondary-dark-4:focus,
.bg-secondary-dark-4:hover,
.bg-secondary-dark-4:active,
.bg-secondary-dark-4.active,
.bg-secondary-dark-4.disabled,
.bg-secondary-dark-4:disabled {
    background-color: var(--secondary-color) !important;
    opacity: 0.65 !important;
}
.bg-secondary-dark-5,
.bg-secondary-dark-5:focus,
.bg-secondary-dark-5:hover,
.bg-secondary-dark-5:active,
.bg-secondary-dark-5.active,
.bg-secondary-dark-5.disabled,
.bg-secondary-dark-5:disabled {
    background-color: var(--secondary-color) !important;
    opacity: 0.55 !important;
}
.bg-gradient-secondary,
.bg-gradient-secondary:focus,
.bg-gradient-secondary:hover,
.bg-gradient-secondary:active,
.bg-gradient-secondary.active,
.bg-gradient-secondary.disabled,
.bg-gradient-secondary:disabled {
    background: linear-gradient(45deg, var(--secondary-color), #9e9e9e) !important;
}

/* === BUTTON LINK CLASSES (PRIMARY) === */
.btn-link,
.btn-link:focus,
.btn-link:hover,
.btn-link:active,
.btn-link.active,
.btn-link.disabled,
.btn-link:disabled,
.btn-link.text-primary,
.btn-link.text-primary:focus,
.btn-link.text-primary:hover,
.btn-link.text-primary:active,
.btn-link.text-primary.active,
.btn-link.text-primary.disabled,
.btn-link.text-primary:disabled {
    color: var(--acs-nav) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

.btn-link.text-secondary,
.btn-link.text-secondary:focus,
.btn-link.text-secondary:hover,
.btn-link.text-secondary:active,
.btn-link.text-secondary.active,
.btn-link.text-secondary.disabled,
.btn-link.text-secondary:disabled {
    color: var(--secondary-color) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

/* === LINK CLASSES (PRIMARY/SECONDARY) === */
.link-primary,
.link-primary:focus,
.link-primary:hover,
.link-primary:active,
.link-primary.active,
.link-primary.disabled,
.link-primary:disabled {
    color: var(--acs-nav) !important;
}
.link-secondary,
.link-secondary:focus,
.link-secondary:hover,
.link-secondary:active,
.link-secondary.active,
.link-secondary.disabled,
.link-secondary:disabled {
    color: var(--secondary-color) !important;
}

/* === ADDITIONAL PRIMARY/SECONDARY CLASSES === */
.shadow-primary,
.shadow-primary:focus,
.shadow-primary:hover,
.shadow-primary:active,
.shadow-primary.active,
.shadow-primary.disabled,
.shadow-primary:disabled {
    box-shadow: 0 0 0 0.2rem var(--acs-nav) !important;
}
.shadow-secondary,
.shadow-secondary:focus,
.shadow-secondary:hover,
.shadow-secondary:active,
.shadow-secondary.active,
.shadow-secondary.disabled,
.shadow-secondary:disabled {
    box-shadow: 0 0 0 0.2rem var(--secondary-color) !important;
}

/* === BADGE SOFT VARIANTS === */
.badge-soft-primary,
.badge-soft-primary:focus,
.badge-soft-primary:hover,
.badge-soft-primary:active,
.badge-soft-primary.active,
.badge-soft-primary.disabled,
.badge-soft-primary:disabled {
    background: rgba(44, 77, 160, 0.15) !important; /* fallback for --acs-nav */
    color: var(--acs-nav) !important;
}
.badge-soft-secondary,
.badge-soft-secondary:focus,
.badge-soft-secondary:hover,
.badge-soft-secondary:active,
.badge-soft-secondary.active,
.badge-soft-secondary.disabled,
.badge-soft-secondary:disabled {
    background: rgba(44, 77, 160, 0.15) !important; /* fallback for --secondary-color */
    color: var(--secondary-color) !important;
}

/* === AVATAR SOFT VARIANTS === */
.avatar-soft-primary > .initial-wrap {
    background-color: rgba(44, 77, 160, 0.15) !important;
    color: var(--acs-nav) !important;
}
.avatar-soft-secondary > .initial-wrap {
    background-color: rgba(44, 77, 160, 0.15) !important;
    color: var(--secondary-color) !important;
}

/* === OUTLINE BADGES === */
.badge-outline-primary,
.badge-outline-primary:focus,
.badge-outline-primary:hover,
.badge-outline-primary:active,
.badge-outline-primary.active,
.badge-outline-primary.disabled,
.badge-outline-primary:disabled {
    background: transparent !important;
    color: var(--acs-nav) !important;
    border: 1px solid var(--acs-nav) !important;
}
.badge-outline-secondary,
.badge-outline-secondary:focus,
.badge-outline-secondary:hover,
.badge-outline-secondary:active,
.badge-outline-secondary.active,
.badge-outline-secondary.disabled,
.badge-outline-secondary:disabled {
    background: transparent !important;
    color: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
}

/* === HR (Horizontal Rule) === */
.hr-primary,
.hr-primary:focus,
.hr-primary:hover,
.hr-primary:active,
.hr-primary.active,
.hr-primary.disabled,
.hr-primary:disabled {
    border-top: 1px solid var(--acs-nav) !important;
}
.hr-secondary,
.hr-secondary:focus,
.hr-secondary:hover,
.hr-secondary:active,
.hr-secondary.active,
.hr-secondary.disabled,
.hr-secondary:disabled {
    border-top: 1px solid var(--secondary-color) !important;
}
.hr-soft-primary,
.hr-soft-primary:focus,
.hr-soft-primary:hover,
.hr-soft-primary:active,
.hr-soft-primary.active,
.hr-soft-primary.disabled,
.hr-soft-primary:disabled {
    border-top: 1px solid rgba(44, 77, 160, 0.15) !important;
}
.hr-soft-secondary,
.hr-soft-secondary:focus,
.hr-soft-secondary:hover,
.hr-soft-secondary:active,
.hr-soft-secondary.active,
.hr-soft-secondary.disabled,
.hr-soft-secondary:disabled {
    border-top: 1px solid rgba(44, 77, 160, 0.15) !important;
}

/* === Accordion === */
.accordion-primary,
.accordion-primary:focus,
.accordion-primary:hover,
.accordion-primary:active,
.accordion-primary.active,
.accordion-primary.disabled,
.accordion-primary:disabled {
    background: var(--acs-nav) !important;
}
.accordion-secondary,
.accordion-secondary:focus,
.accordion-secondary:hover,
.accordion-secondary:active,
.accordion-secondary.active,
.accordion-secondary.disabled,
.accordion-secondary:disabled {
    background: var(--secondary-color) !important;
}

/* === Table === */
.thead-primary th,
.thead-primary th:focus,
.thead-primary th:hover,
.thead-primary th:active,
.thead-primary th.active,
.thead-primary th.disabled,
.thead-primary th:disabled {
    background-color: var(--acs-nav) !important;
    color: #fff !important;
}
.thead-secondary th,
.thead-secondary th:focus,
.thead-secondary th:hover,
.thead-secondary th:active,
.thead-secondary th.active,
.thead-secondary th.disabled,
.thead-secondary th:disabled {
    background-color: var(--secondary-color) !important;
    color: #fff !important;
}
.table-primary,
.table-primary:focus,
.table-primary:hover,
.table-primary:active,
.table-primary.active,
.table-primary.disabled,
.table-primary:disabled,
.table-primary > td,
.table-primary > th {
    background-color: rgba(44, 77, 160, 0.15) !important;
}
.table-secondary,
.table-secondary:focus,
.table-secondary:hover,
.table-secondary:active,
.table-secondary.active,
.table-secondary.disabled,
.table-secondary:disabled,
.table-secondary > td,
.table-secondary > th {
    background-color: rgba(44, 77, 160, 0.15) !important;
}

/* === Alert === */
.alert-primary,
.alert-primary:focus,
.alert-primary:hover,
.alert-primary:active,
.alert-primary.active,
.alert-primary.disabled,
.alert-primary:disabled {
    background: var(--acs-nav) !important;
    color: #fff !important;
}
.alert-secondary,
.alert-secondary:focus,
.alert-secondary:hover,
.alert-secondary:active,
.alert-secondary.active,
.alert-secondary.disabled,
.alert-secondary:disabled {
    background: var(--secondary-color) !important;
    color: #fff !important;
}
.alert-inv-primary,
.alert-inv-primary:focus,
.alert-inv-primary:hover,
.alert-inv-primary:active,
.alert-inv-primary.active,
.alert-inv-primary.disabled,
.alert-inv-primary:disabled {
    border-color: var(--acs-nav) !important;
    color: var(--acs-nav) !important;
}
.alert-inv-secondary,
.alert-inv-secondary:focus,
.alert-inv-secondary:hover,
.alert-inv-secondary:active,
.alert-inv-secondary.active,
.alert-inv-secondary.disabled,
.alert-inv-secondary:disabled {
    border-color: var(--secondary-color) !important;
    color: var(--secondary-color) !important;
}

/* === Checkbox & Radio === */
.checkbox-primary .custom-control-input:checked ~ .custom-control-label::before,
.checkbox-primary .custom-control-input:checked:focus ~ .custom-control-label::before,
.checkbox-primary .custom-control-input:checked:hover ~ .custom-control-label::before {
    background-color: var(--acs-nav) !important;
}
.checkbox-secondary .custom-control-input:checked ~ .custom-control-label::before,
.checkbox-secondary .custom-control-input:checked:focus ~ .custom-control-label::before,
.checkbox-secondary .custom-control-input:checked:hover ~ .custom-control-label::before {
    background-color: var(--secondary-color) !important;
}
.radio-primary .custom-control-input:checked ~ .custom-control-label::before,
.radio-primary .custom-control-input:checked:focus ~ .custom-control-label::before,
.radio-primary .custom-control-input:checked:hover ~ .custom-control-label::before {
    background-color: var(--acs-nav) !important;
}
.radio-secondary .custom-control-input:checked ~ .custom-control-label::before,
.radio-secondary .custom-control-input:checked:focus ~ .custom-control-label::before,
.radio-secondary .custom-control-input:checked:hover ~ .custom-control-label::before {
    background-color: var(--secondary-color) !important;
}

/* === Ribbons === */
.hk-ribbon-primary,
.hk-ribbon-primary:focus,
.hk-ribbon-primary:hover,
.hk-ribbon-primary:active,
.hk-ribbon-primary.active,
.hk-ribbon-primary.disabled,
.hk-ribbon-primary:disabled {
    background: var(--acs-nav) !important;
}
.hk-ribbon-primary.ribbon-wth-flag:before,
.hk-ribbon-primary.ribbon-wth-flag:after {
    border-color: var(--acs-nav) !important;
}
.hk-ribbon-secondary,
.hk-ribbon-secondary:focus,
.hk-ribbon-secondary:hover,
.hk-ribbon-secondary:active,
.hk-ribbon-secondary.active,
.hk-ribbon-secondary.disabled,
.hk-ribbon-secondary:disabled {
    background: var(--secondary-color) !important;
}
.hk-ribbon-secondary.ribbon-wth-flag:before,
.hk-ribbon-secondary.ribbon-wth-flag:after {
    border-color: var(--secondary-color) !important;
}
.hk-ribbon-type-2,
.hk-ribbon-type-2:focus,
.hk-ribbon-type-2:hover,
.hk-ribbon-type-2:active,
.hk-ribbon-type-2.active,
.hk-ribbon-type-2.disabled,
.hk-ribbon-type-2:disabled {
    background: var(--acs-nav) !important;
    color: #fff !important;
}
.hk-ribbon-type-2:after {
    border-top: 17px solid var(--acs-nav) !important;
    border-right: 17px solid var(--acs-nav) !important;
    border-left: 17px solid var(--acs-nav) !important;
}

/* === List Group === */
.list-group-item-primary:not(.active),
.list-group-item-primary:not(.active):focus,
.list-group-item-primary:not(.active):hover,
.list-group-item-primary:not(.active):active {
    background: var(--acs-nav) !important;
    color: #fff !important;
}
.list-group-item-secondary:not(.active),
.list-group-item-secondary:not(.active):focus,
.list-group-item-secondary:not(.active):hover,
.list-group-item-secondary:not(.active):active {
    background: var(--secondary-color) !important;
    color: #fff !important;
}
.list-group-inv-primary:not(.active),
.list-group-inv-primary:not(.active):focus,
.list-group-inv-primary:not(.active):hover,
.list-group-inv-primary:not(.active):active {
    border-color: var(--acs-nav) !important;
    color: var(--acs-nav) !important;
}
.list-group-inv-secondary:not(.active),
.list-group-inv-secondary:not(.active):focus,
.list-group-inv-secondary:not(.active):hover,
.list-group-inv-secondary:not(.active):active {
    border-color: var(--secondary-color) !important;
    color: var(--secondary-color) !important;
}

/* === jq-toast === */
.jq-toast-primary,
.jq-toast-primary:focus,
.jq-toast-primary:hover,
.jq-toast-primary:active,
.jq-toast-primary.active,
.jq-toast-primary.disabled,
.jq-toast-primary:disabled {
    background: rgba(44, 77, 160, 0.15) !important;
    color: var(--acs-nav) !important;
    border: 1px solid var(--acs-nav) !important;
}
.jq-toast-secondary,
.jq-toast-secondary:focus,
.jq-toast-secondary:hover,
.jq-toast-secondary:active,
.jq-toast-secondary.active,
.jq-toast-secondary.disabled,
.jq-toast-secondary:disabled {
    background: rgba(44, 77, 160, 0.15) !important;
    color: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
}

/* === Avatar Text === */
.avatar-text-primary,
.avatar-text-primary:focus,
.avatar-text-primary:hover,
.avatar-text-primary:active,
.avatar-text-primary.active,
.avatar-text-primary.disabled,
.avatar-text-primary:disabled {
    background: var(--acs-nav) !important;
    color: #fff !important;
}
.avatar-text-secondary,
.avatar-text-secondary:focus,
.avatar-text-secondary:hover,
.avatar-text-secondary:active,
.avatar-text-secondary.active,
.avatar-text-secondary.disabled,
.avatar-text-secondary:disabled {
    background: var(--secondary-color) !important;
    color: #fff !important;
}
.avatar-text-inv-primary,
.avatar-text-inv-primary:focus,
.avatar-text-inv-primary:hover,
.avatar-text-inv-primary:active,
.avatar-text-inv-primary.active,
.avatar-text-inv-primary.disabled,
.avatar-text-inv-primary:disabled {
    border-color: var(--acs-nav) !important;
    color: var(--acs-nav) !important;
}
.avatar-text-inv-secondary,
.avatar-text-inv-secondary:focus,
.avatar-text-inv-secondary:hover,
.avatar-text-inv-secondary:active,
.avatar-text-inv-secondary.active,
.avatar-text-inv-secondary.disabled,
.avatar-text-inv-secondary:disabled {
    border-color: var(--secondary-color) !important;
    color: var(--secondary-color) !important;
}

/* === Active States === */
.active-primary,
.active-primary:focus,
.active-primary:hover,
.active-primary:active,
.active-primary.active,
.active-primary.disabled,
.active-primary:disabled {
    background: var(--acs-nav) !important;
    color: #fff !important;
}
.active-secondary,
.active-secondary:focus,
.active-secondary:hover,
.active-secondary:active,
.active-secondary.active,
.active-secondary.disabled,
.active-secondary:disabled {
    background: var(--secondary-color) !important;
    color: #fff !important;
}

/* === Slider === */
.irs-primary,
.irs-primary:focus,
.irs-primary:hover,
.irs-primary:active,
.irs-primary.active,
.irs-primary.disabled,
.irs-primary:disabled {
    background: var(--acs-nav) !important;
}
.irs-secondary,
.irs-secondary:focus,
.irs-secondary:hover,
.irs-secondary:active,
.irs-secondary.active,
.irs-secondary.disabled,
.irs-secondary:disabled {
    background: var(--secondary-color) !important;
}

/* === Shadows === */
.shadow-sm-primary,
.shadow-sm-primary:focus,
.shadow-sm-primary:hover,
.shadow-sm-primary:active,
.shadow-sm-primary.active,
.shadow-sm-primary.disabled,
.shadow-sm-primary:disabled,
.shadow-hover-sm-primary:hover,
.shadow-primary,
.shadow-primary:focus,
.shadow-primary:hover,
.shadow-primary:active,
.shadow-primary.active,
.shadow-primary.disabled,
.shadow-primary:disabled,
.shadow-hover-primary:hover,
.shadow-lg-primary,
.shadow-lg-primary:focus,
.shadow-lg-primary:hover,
.shadow-lg-primary:active,
.shadow-lg-primary.active,
.shadow-lg-primary.disabled,
.shadow-lg-primary:disabled,
.shadow-hover-lg-primary:hover,
.shadow-xl-primary,
.shadow-xl-primary:focus,
.shadow-xl-primary:hover,
.shadow-xl-primary:active,
.shadow-xl-primary.active,
.shadow-xl-primary.disabled,
.shadow-xl-primary:disabled,
.shadow-hover-xl-primary:hover {
    box-shadow: 0 0 0 0.2rem var(--acs-nav) !important;
}
.shadow-sm-secondary,
.shadow-sm-secondary:focus,
.shadow-sm-secondary:hover,
.shadow-sm-secondary:active,
.shadow-sm-secondary.active,
.shadow-sm-secondary.disabled,
.shadow-sm-secondary:disabled,
.shadow-hover-sm-secondary:hover,
.shadow-secondary,
.shadow-secondary:focus,
.shadow-secondary:hover,
.shadow-secondary:active,
.shadow-secondary.active,
.shadow-secondary.disabled,
.shadow-secondary:disabled,
.shadow-hover-secondary:hover,
.shadow-lg-secondary,
.shadow-lg-secondary:focus,
.shadow-lg-secondary:hover,
.shadow-lg-secondary:active,
.shadow-lg-secondary.active,
.shadow-lg-secondary.disabled,
.shadow-lg-secondary:disabled,
.shadow-hover-lg-secondary:hover,
.shadow-xl-secondary,
.shadow-xl-secondary:focus,
.shadow-xl-secondary:hover,
.shadow-xl-secondary:active,
.shadow-xl-secondary.active,
.shadow-xl-secondary.disabled,
.shadow-xl-secondary:disabled,
.shadow-hover-xl-secondary:hover {
    box-shadow: 0 0 0 0.2rem var(--secondary-color) !important;
}

/* === FORM CONTROLS, SELECTS, WIZARDS, DRAG/DROP HANDLES === */
.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled):not([readonly]),
.wizard > .content > .body input:hover:not(:disabled):not([readonly]),
.dd-handle:hover:not(:disabled):not([readonly]) {
    border-color: var(--acs-nav) !important;
    z-index: 4;
}
.form-control:focus:not(:disabled):not([readonly]),
.form-select:focus:not(:disabled):not([readonly]),
.wizard > .content > .body input:focus:not(:disabled):not([readonly]),
.dd-handle:focus:not(:disabled):not([readonly]) {
    border-color: var(--acs-nav) !important;
    z-index: 4;
}
.form-control:active:not(:disabled):not([readonly]),
.form-select:active:not(:disabled):not([readonly]),
.wizard > .content > .body input:active:not(:disabled):not([readonly]),
.dd-handle:active:not(:disabled):not([readonly]) {
    border-color: var(--acs-nav) !important;
    z-index: 4;
}
/* If there are secondary variants, add them as well: */
.form-control.secondary:hover:not(:disabled):not([readonly]),
.form-select.secondary:hover:not(:disabled):not([readonly]),
.wizard > .content > .body input.secondary:hover:not(:disabled):not([readonly]),
.dd-handle.secondary:hover:not(:disabled):not([readonly]) {
    border-color: var(--secondary-color) !important;
    z-index: 4;
}
.form-control.secondary:focus:not(:disabled):not([readonly]),
.form-select.secondary:focus:not(:disabled):not([readonly]),
.wizard > .content > .body input.secondary:focus:not(:disabled):not([readonly]),
.dd-handle.secondary:focus:not(:disabled):not([readonly]) {
    border-color: var(--secondary-color) !important;
    z-index: 4;
}
.form-control.secondary:active:not(:disabled):not([readonly]),
.form-select.secondary:active:not(:disabled):not([readonly]),
.wizard > .content > .body input.secondary:active:not(:disabled):not([readonly]),
.dd-handle.secondary:active:not(:disabled):not([readonly]) {
    border-color: var(--secondary-color) !important;
    z-index: 4;
}