/*
    PURPOSE: To provide general css that BAMS uses as the basis for all projects to start with 
    naming conventions based off bootstrap naming conventions when possible.

    CONTENTS:
        -Variables
        -General
        -Header & Footer
        -Typography
            -Headings (h1-h6)
            -Font Sizes
            -Fonts Families
            -Letter Spacing
            -Lists
        -Colors
        -Background Colors
        -Border Colors
        -Badges/Pills
        -Buttons & Links
            -Default/Solid
            -Outlined
            -Icons
            -Links
            -Fill Effect
            -Popovers
        -Accordions & Collapse
        -Banners/Alerts/Validation
        -Cards
        -Images
        -Tables
        -Forms
        -Template Region (for easy copy & paste of more regions)

    Toggle all outlining: CTRL M + L
*/

/*#region --------------Variables---------------*/
:root {
    --primary: #CA4F00;
    --primary-hover: #B64700;
    --primary-disabled: #DF9566;
    --primary-extra-light: #FAEFE9;
    --secondary: #727679;
    --secondary-hover: #5E6062;
    --secondary-disabled: #B0B6BA;
    --secondary-light: #E3E4E5;
    --extra-light: #FAF9FA;
    --light: #F2F0F2;
    --medium: #E5E1E6;
    --body: #343A40;
    --info-light: #D7E2E5;
    --info: #4A7D87;
    --info-disabled: #96B6BC;
    --info-hover: #406A73;
    --warning-light: #FCF7B6;
    --warning: #FBF4A3;
    --warning-dark: #635E1D;
    --success-extra-light: #D1E7DD;
    --success-light: #BADBCC;
    --success: #3F8367;
    --success-dark: #0F5132;
    --error-extra-light: #F8D7DA;
    --error-light: #EE9AA2;
    --error: #DC3545;
    --error-dark: #9A2530;
    --black: #000000;
    --white: #FFFFFF;

    /*Virginia Tech Branded Colors*/
    --vt-maroon: #861F41;
    --vt-maroon-dark: #431021;
    --vt-yellow: #F7EA48;
    --vt-yellow-dark: #C6BB3A;
    --vt-pink: #CE0058;
    --vt-pink-light: #E2669B;
    --vt-pink-dark: #A50046;
    /*Project Specific Colors*/

    /*Bootstrap Overrides*/
    --bs-border-color: var(--medium);
    /*Utility Variables*/
    --focus-outline-width: 0.125rem; /*2px*/
    --focus-outline-offset: 0.125rem; /*2px*/
}
/*#endregion*/

/*#region --------------General---------------*/
html, body {
    font-family: "proxima-nova", sans-serif;
    letter-spacing: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--body);
}

html {
    position: relative;
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container, main {
    flex-grow: 1;
}

/*#endregion*/

/*#region --------------Header & Footer Layout Styles (#main-nav)---------------*/
.logo-container {
    width: 275px;
    height: auto;
}

.navbar {
    padding: 0;
    flex-flow: wrap;
}

#main-nav .nav-link {
    color: var(--body);
    text-decoration: none !important;
}

    #main-nav .nav-link.active,
    #main-nav .dropdown-item.active {
        font-weight: 600;
    }

    #main-nav .nav-link:hover {
        text-decoration: underline !important;
    }

    #main-nav .nav-link:focus-visible {
        outline: transparent;
        box-shadow: inset 0 0 0 var(--focus-outline-width) var(--black);
    }

button.navbar-toggler {
    box-shadow: none !important;
    border: none;
}

    button.navbar-toggler:focus,
    button.navbar-toggler:focus-visible {
        outline: var(--focus-outline-width) solid var(--black);
    }

.dropdown-item {
    --bs-dropdown-link-hover-color: var(--white);
    --bs-dropdown-link-hover-bg: var(--primary);
    --bs-dropdown-active-color: inherit;
    --bs-dropdown-active-bg: transparent;
    --bs-dropdown-link-active-bg: var(--primary);
}

/*Under medium*/
@media (max-width: 768px) {
    .navbar-expand-md > .container, .navbar-expand-md > .container-fluid {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    /*Desktop Dropdowns in nav*/
    .navbar-nav .dropdown-menu {
        --bs-dropdown-bg: inherit;
        --bs-dropdown-border-color: none;
    }

    .navbar-nav .dropdown-item {
        --bs-dropdown-link-hover-color: inherit;
        --bs-dropdown-link-hover-bg: transparent;
        --bs-dropdown-active-color: inherit;
        --bs-dropdown-active-bg: transparent;
        --bs-dropdown-link-active-bg: transparent;
        --bs-dropdown-link-active-color: var(--body);
    }

        .navbar-nav.dropdown-item:hover {
            text-decoration: underline !important;
        }

    .navbar-nav .nav-link.dropdown-toggle {
        display: flex;
        align-items: center;
        width: 100%;
    }

        .navbar-nav .nav-link.dropdown-toggle::after {
            flex-shrink: 0;
            width: 1.25rem;
            height: 1.25rem;
            margin-left: auto;
            content: "";
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23727679'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-size: 1.25rem;
            transition: transform .2s ease-in-out;
            border: none;
            display: flex;
            align-items: center;
        }

        .navbar-nav .nav-link.dropdown-toggle[aria-expanded="true"]::after {
            transform: rotate(-180deg);
        }
}

/*#endregion*/

/*#region -------------Typography---------------*/
/*#region -------------Headings---------------*/
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
    font-family: "Acherus", sans-serif;
}

h1, .h1 {
    font-size: 2.5rem;
}

h2, .h2 {
    font-size: 1.75rem;
}

h3, .h3 {
    font-size: 1.5rem;
}

h4, .h4 {
    font-size: 1.25rem;
}

h5, .h5 {
    font-size: 1rem;
    font-weight: bold;
    font-family: "proxima-nova", sans-serif;
}

h6, .h6 {
    font-size: 0.9rem;
    font-weight: normal;
    font-family: "proxima-nova", sans-serif;
}
/*#endregion*/
/*#region --------------Font Sizes---------------*/
/*WCAG 2.1 - Requires normal fonts to be no smaller than .75rem or 12px with a legible font family.*/
/*.small = .875rem and is already a default boostrap class*/
.extra-small {
    font-size: .75rem;
}

/*Sizing customized to match heading sizes for consistency*/
.fs-2 {
    font-size: 1.75rem;
}

.fs-3 {
    font-size: 1.5rem;
}

.fs-4 {
    font-size: 1.25rem;
}

.fs-5 {
    font-size: 1rem;
}

.fs-6 {
    font-size: 0.9rem;
}
/*#endregion*/
/*#region -------------Font Families---------------*/
.font-acherus {
    font-family: "Acherus", sans-serif !important;
}

.font-proxima {
    font-family: "proxima-nova", sans-serif;
}
/*#endregion*/
/*#region -------------Letter Spacing---------------*/
.ls-normal {
    letter-spacing: normal;
}

.ls-loose-small {
    letter-spacing: 0.0125rem; /*.5px*/
}

.ls-loose {
    letter-spacing: 0.0625rem; /*1px*/
}

.ls-loose-large {
    letter-spacing: 0.125rem; /*2px*/
}

.ls-loose-extra-large {
    letter-spacing: 0.25rem; /*4px*/
}
/*#endregion*/
/*#region --------------Lists---------------*/
/*.list-inline is a boostrap class that is updated to not use .list-inline-item*/
dl.list-inline dt,
ul.list-inline li,
ol.list-inline li {
    display: inline-block;
}

dl.list-inline dd {
    display: inline;
    margin: 0;
}

    dl.list-inline dd:after {
        display: block;
        content: '';
    }
/*#endregion*/
/*#endregion*/

/*#region ---------------Colors-----------------*/
.text-primary {
    color: var(--primary) !important;
}

.text-primary-hover {
    color: var(--primary-hover);
}

.text-primary-disabled {
    color: var(--primary-disabled);
}

.text-muted,
.text-secondary {
    color: var(--secondary) !important;
}

.text-secondary-hover {
    color: var(--secondary-hover);
}

.text-secondary-disabled {
    color: var(--secondary-disabled);
}

.text-secondary-light {
    color: var(--secondary-light);
}

.text-extra-light {
    color: var(--extra-light);
}

.text-light {
    color: var(--light) !important;
}

.text-medium {
    color: var(--medium);
}

.text-body {
    color: var(--body) !important;
}

.text-info-light {
    color: var(--info-light);
}

.text-info-disabled {
    color: var(--info-disabled);
}

.text-info {
    color: var(--info) !important;
}

.text-info-hover {
    color: var(--info-hover);
}

.text-warning-light {
    color: var(--warning-light);
}

.text-warning {
    color: var(--warning) !important;
}

.text-warning-dark {
    color: var(--warning-dark);
}

.text-success-extra-light {
    color: var(--success-extra-light);
}

.text-success-light {
    color: var(--success-light);
}

.text-success {
    color: var(--success) !important;
}

.text-success-dark {
    color: var(--success-dark);
}

.text-error-extra-light {
    color: var(--error-extra-light);
}

.text-error-light {
    color: var(--error-light);
}

.text-error {
    color: var(--error) !important;
}

.text-error-dark {
    color: var(--error-dark);
}

.text-white {
    color: var(--white) !important;
}

.text-black {
    color: var(--black) !important;
}

.text-vt-maroon {
    color: var(--vt-maroon);
}

.text-vt-maroon-dark {
    color: var(--vt-maroon-dark);
}

.text-vt-yellow {
    color: var(--vt-yellow);
}

.text-vt-yellow-dark {
    color: var(--vt-yellow-dark);
}

.text-vt-pink {
    color: var(--vt-pink);
}

.text-vt-pink-light {
    color: var(--vt-pink-light);
}

.text-vt-pink-dark {
    color: var(--vt-pink-dark);
}
/*#endregion*/

/*#region ---------------Background Colors-----------------*/
.bg-primary {
    background-color: var(--primary) !important;
}

.bg-primary-hover {
    background-color: var(--primary-hover);
}

.bg-primary-disabled {
    background-color: var(--primary-disabled);
}

.bg-primary-extra-light {
    background-color: var(--primary-extra-light);
}

.bg-secondary {
    background-color: var(--secondary) !important;
}

.bg-secondary-hover {
    background-color: var(--secondary-hover);
}

.bg-secondary-disabled {
    background-color: var(--secondary-disabled);
}

.bg-secondary-light {
    background-color: var(--secondary-light);
}

.bg-extra-light {
    background-color: var(--extra-light);
}

.bg-light {
    background-color: var(--light) !important;
}

.bg-medium {
    background-color: var(--medium);
}

.bg-body {
    background-color: var(--body) !important;
}

.bg-info-light {
    background-color: var(--info-light);
}

.bg-info-disabled {
    background-color: var(--info-disabled) !important;
}

.bg-info {
    background-color: var(--info) !important;
}

.bg-info-hover {
    background-color: var(--info-hover);
}

.bg-warning-light {
    background-color: var(--warning-light);
}

.bg-warning {
    background-color: var(--warning) !important;
}

.bg-warning-dark {
    background-color: var(--warning-dark);
}

.bg-success-extra-light {
    background-color: var(--success-extra-light);
}

.bg-success-light {
    background-color: var(--success-light);
}

.bg-success {
    background-color: var(--success) !important;
}

.bg-success-dark {
    background-color: var(--success-dark);
}

.bg-error-extra-light {
    background-color: var(--error-extra-light);
}

.bg-error-light {
    background-color: var(--error-light);
}

.bg-error {
    background-color: var(--error) !important;
}

.bg-error-dark {
    background-color: var(--error-dark);
}

.bg-white {
    background-color: var(--white);
}

.bg-black {
    background-color: var(--white);
}

.bg-vt-maroon {
    background-color: var(--vt-maroon);
}

.bg-vt-maroon-dark {
    background-color: var(--vt-maroon-dark);
}

.bg-vt-yellow {
    background-color: var(--vt-yellow);
}

.bg-vt-yellow-dark {
    background-color: var(--vt-yellow-dark);
}

.bg-vt-pink {
    background-color: var(--vt-pink);
}

.bg-vt-pink-light {
    background-color: var(--vt-pink-light);
}

.bg-vt-pink-dark {
    background-color: var(--vt-pink-dark);
}

/*#region Medium breakpoint*/
@media (min-width: 768px) {
    .bg-md-light {
        background-color: var(--light) !important;
    }

    .bg-md-white {
        background-color: var(--white) !important;
    }
}
/*#endregion*/

/*#region Large breakpoint*/
@media (min-width: 992px) {
    .bg-lg-light {
        background-color: var(--light) !important;
    }

    .bg-lg-white {
        background-color: var(--white) !important;
    }
}
/*#endregion*/
/*#endregion*/

/*#region --------------Border Colors---------------*/
/*Border Colors*/
.border-primary {
    border-color: var(--primary) !important;
}

.border-primary-hover {
    border-color: var(--primary-hover);
}

.border-primary-disabled {
    border-color: var(--primary-disabled);
}

.border-secondary {
    border-color: var(--secondary) !important;
}

.border-secondary-hover {
    border-color: var(--secondary-hover);
}

.border-secondary-disabled {
    border-color: var(--secondary-disabled);
}

.border-secondary-light {
    border-color: var(--secondary-light);
}

.border-extra-light {
    border-color: var(--extra-light);
}

.border-light {
    border-color: var(--light) !important;
}

.border-medium {
    border-color: var(--medium);
}

.border-body {
    border-color: var(--body) !important;
}

.border-info-light {
    border-color: var(--info-light);
}

.border-disabled {
    border-color: var(--info-disabled);
}

.border-info {
    border-color: var(--info) !important;
}

.border-info-hover {
    border-color: var(--info-hover);
}

.border-warning-light {
    border-color: var(--warning-light);
}

.border-warning {
    border-color: var(--warning) !important;
}

.border-warning-dark {
    border-color: var(--warning-dark);
}

.border-success-extra-light {
    border-color: var(--success-extra-light);
}

.border-success-light {
    border-color: var(--success-light);
}

.border-success {
    border-color: var(--success) !important;
}

.border-success-dark {
    border-color: var(--success-dark);
}

.border-error-extra-light {
    border-color: var(--error-extra-light);
}

.border-error-light {
    border-color: var(--error-light);
}

.border-error {
    border-color: var(--error) !important;
}

.border-error-dark {
    border-color: var(--error-dark);
}

.border-white {
    border-color: var(--white) !important;
}

.border-black {
    border-color: var(--black) !important;
}

.border-vt-maroon {
    border-color: var(--vt-maroon);
}

.border-vt-maroon-dark {
    border-color: var(--vt-maroon-dark);
}

.border-vt-yellow {
    border-color: var(--vt-yellow);
}

.border-vt-yellow-dark {
    border-color: var(--vt-yellow-dark);
}

.border-vt-pink {
    border-color: var(--vt-pink);
}

.border-vt-pink-light {
    border-color: var(--vt-pink-light);
}

.border-vt-pink-dark {
    border-color: var(--vt-pink-dark);
}

/*#endregion*/

/*#region --------------Badges/Pills---------------*/
.badge {
    --bs-badge-font-size: 0.875rem; /*14px*/
    --bs-badge-font-weight: 400;
}
/*#endregion*/

/*#region --------------Buttons & Links---------------*/
.btn {
    --bs-btn-color: var(--body);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    /*Hover*/
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--bs-btn-bg);
    --bs-btn-hover-border-color: var(--bs-btn-border-color);
    /*Focus*/
    --btn-focus-outline-color: var(--bs-btn-color);
    --btn-focus-outline-offset: var(--focus-outline-offset);
    --bs-btn-focus-box-shadow: none;
    /*Active*/
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-active-bg: var(--bs-btn-bg);
    --bs-btn-active-border-color: var(--bs-btn-border-color);
    --bs-active-shadow: none;
    /*Disabled*/
    --bs-btn-disabled-opacity: 1;
}

    .btn:focus-visible {
        z-index: 3;
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
        box-shadow: 0 0 0 var(--focus-outline-width) var(--white) !important;
        outline: var(--focus-outline-width) solid var(--btn-focus-outline-color);
        outline-offset: var(--btn-focus-outline-offset);
    }

.btn.text-reset:focus-visible {
    outline: 0.125rem solid;
}

    /*#region --------------Default---------------*/
    .btn.btn-primary {
        --bs-btn-color: var(--white);
        --bs-btn-bg: var(--primary);
        --bs-btn-border-color: var(--primary);
        /*Hover*/
        --bs-btn-hover-color: var(--white);
        --bs-btn-hover-bg: var(--primary-hover);
        --bs-btn-hover-border-color: var(--primary-hover);
        /*Focus*/
        --btn-focus-outline-color: var(--bs-btn-hover-border-color);
        /*Active*/
        --bs-btn-active-color: var(--white);
        --bs-btn-active-bg: var(--primary-hover);
        --bs-btn-active-border-color: var(--primary-hover);
        --bs-active-shadow: none;
        /*Disabled*/
        --bs-btn-disabled-color: var(--white);
        --bs-btn-disabled-bg: var(--primary-disabled);
        --bs-btn-disabled-border-color: var(--primary-disabled);
    }

    .btn.btn-secondary {
        --bs-btn-color: var(--white);
        --bs-btn-bg: var(--secondary);
        --bs-btn-border-color: var(--secondary);
        /*Hover*/
        --bs-btn-hover-color: var(--white);
        --bs-btn-hover-bg: var(--secondary-hover);
        --bs-btn-hover-border-color: var(--secondary-hover);
        /*Focus*/
        --btn-focus-outline-color: var(--bs-btn-hover-border-color);
        /*Active*/
        --bs-btn-active-color: var(--white);
        --bs-btn-active-bg: var(--secondary-hover);
        --bs-btn-active-border-color: var(--secondary-hover);
        --bs-active-shadow: none;
        /*Disabled*/
        --bs-btn-disabled-color: var(--white);
        --bs-btn-disabled-bg: var(--secondary-disabled);
        --bs-btn-disabled-border-color: var(--secondary-disabled);
    }

    .btn.btn-search {
        --bs-btn-color: var(--body);
        --bs-btn-bg: var(--light);
        --bs-btn-border-color: var(--secondary);
        /*Hover*/
        --bs-btn-hover-color: var(--body);
        --bs-btn-hover-bg: var(--medium);
        --bs-btn-hover-border-color: var(--secondary);
        /*Focus*/
        --btn-focus-outline-color: var(--body);
        /*Active*/
        --bs-btn-active-color: var(--body);
        --bs-btn-active-bg: var(--medium);
        --bs-btn-active-border-color: var(--secondary);
        --bs-active-shadow: none;
    }
    /*#endregion*/
    /*#region --------------Outline---------------*/
    .btn.btn-outline-primary {
        --bs-btn-color: var(--primary);
        --bs-btn-bg: transparent;
        --bs-btn-border-color: var(--primary);
        /*Hover*/
        --bs-btn-hover-color: var(--primary-hover);
        --bs-btn-hover-bg: var(--primary-extra-light);
        --bs-btn-hover-border-color: var(--primary-hover);
        /*Focus*/
        --btn-focus-outline-color: var(--bs-btn-hover-border-color);
        /*Active*/
        --bs-btn-active-color: var(--primary-hover);
        --bs-btn-active-bg: var(--primary-extra-light);
        --bs-btn-active-border-color: var(--primary-hover);
        --bs-active-shadow: none;
        /*Disabled*/
        --bs-btn-disabled-color: var(--primary-disabled);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--primary-disabled);
    }

    .btn.btn-outline-secondary {
        --bs-btn-color: var(--secondary);
        --bs-btn-bg: transparent;
        --bs-btn-border-color: var(--secondary);
        /*Hover*/
        --bs-btn-hover-color: var(--secondary-hover);
        --bs-btn-hover-bg: var(--secondary-light);
        --bs-btn-hover-border-color: var(--secondary-hover);
        /*Focus*/
        --btn-focus-outline-color: var(--bs-btn-hover-border-color);
        /*Active*/
        --bs-btn-active-color: var(--secondary-hover);
        --bs-btn-active-bg: var(--secondary-extra-light);
        --bs-btn-active-border-color: var(--secondary-hover);
        --bs-active-shadow: none;
        /*Disabled*/
        --bs-btn-disabled-color: var(--secondary-disabled);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--secondary-disabled);
    }
    /*#endregion*/
    /*#region --------------Icon---------------*/
    .btn.btn-icon-primary {
        --bs-btn-color: var(--primary);
        --bs-btn-bg: transparent;
        --bs-btn-border-color: transparent;
        /*Hover*/
        --bs-btn-hover-color: var(--primary-hover);
        --bs-btn-hover-bg: transparent;
        --bs-btn-hover-border-color: transparent;
        /*Focus*/
        --btn-focus-outline-color: var(--bs-btn-hover-color);
        /*Active*/
        --bs-btn-active-color: var(--primary-hover);
        --bs-btn-active-bg: transparent;
        --bs-btn-active-border-color: transparent;
        --bs-active-shadow: none;
        /*Disabled*/
        --bs-btn-disabled-color: var(--primary-disabled);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: transparent;
    }

    .btn.btn-icon-secondary {
        --bs-btn-color: var(--secondary);
        --bs-btn-bg: transparent;
        --bs-btn-border-color: transparent;
        /*Hover*/
        --bs-btn-hover-color: var(--secondary-hover);
        --bs-btn-hover-bg: transparent;
        --bs-btn-hover-border-color: transparent;
        /*Focus*/
        --btn-focus-outline-color: var(--bs-btn-hover-color);
        /*Active*/
        --bs-btn-active-color: var(--secondary-hover);
        --bs-btn-active-bg: transparent;
        --bs-btn-active-border-color: transparent;
        --bs-active-shadow: none;
        /*Disabled*/
        --bs-btn-disabled-color: var(--secondary-disabled);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: transparent;
    }

/*#region Medium breakpoint*/
@media (min-width: 768px) {
    .btn.btn-icon-primary .btn-icon-md-label,
    .btn.btn-icon-secondary .btn-icon-md-label {
        visibility: hidden;
    }

    .btn.btn-icon-primary:hover .btn-icon-md-label,
    .btn.btn-icon-primary:focus-visible .btn-icon-md-label,
    .btn.btn-icon-secondary:hover .btn-icon-md-label,
    .btn.btn-icon-secondary:focus-visible .btn-icon-md-label {
        visibility: visible;
    }
}
/*#endregion*/

/*#region Large breakpoint*/
@media (min-width: 992px) {
    .btn.btn-icon-primary .btn-icon-lg-label,
    .btn.btn-icon-secondary .btn-icon-lg-label {
        visibility: hidden;
    }

    .btn.btn-icon-primary:hover .btn-icon-lg-label,
    .btn.btn-icon-primary:focus-visible .btn-icon-lg-label,
    .btn.btn-icon-secondary:hover .btn-icon-lg-label,
    .btn.btn-icon-secondary:focus-visible .btn-icon-lg-label {
        visibility: visible;
    }
}
/*#endregion*/

/*#region Extra Large breakpoint*/
@media (min-width: 1200px) {
    .btn.btn-icon-primary .btn-icon-xl-label,
    .btn.btn-icon-secondary .btn-icon-xl-label {
        visibility: hidden;
    }

    .btn.btn-icon-primary:hover .btn-icon-xl-label,
    .btn.btn-icon-primary:focus-visible .btn-icon-xl-label,
    .btn.btn-icon-secondary:hover .btn-icon-xl-label,
    .btn.btn-icon-secondary:focus-visible .btn-icon-xl-label {
        visibility: visible;
    }
}
/*#endregion*/

/*#endregion*/
/*#region --------------Links---------------*/
/*NOTE: Links MUST have the underline one by default as our colors fail text/link contrast*/
a {
    color: var(--primary);
}

a,
.btn.btn-link {
    text-underline-offset: 0.125em !important;
}

    a:hover {
        color: var(--primary-hover);
        text-decoration: none;
    }

    /*Links need spacing for focus*/
    a:not(.btn, .nav-link):focus-visible {
        outline: var(--focus-outline-width) solid currentColor !important;
        outline-offset: var(--focus-outline-offset);
    }

    a span.fa-solid,
    a span.fa-regular,
    .btn.btn-link span.fa-regular,
    .btn.btn-link span.fa-solid {
        text-decoration: none !important;
    }

/*Button Link Focus State*/
.btn.btn-link:hover {
    text-decoration: none !important;
}

/*Button Link*/
.btn.btn-link {
    --bs-btn-color: var(--primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    /*Hover*/
    --bs-btn-hover-color: var(--primary-hover);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    /*Focus*/
    --btn-focus-outline-color: var(--bs-btn-hover-color);
    /*Active*/
    --bs-btn-active-color: var(--primary-hover);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-active-shadow: none;
    /*Disabled*/
    --bs-btn-disabled-color: var(--primary-disabled);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

/*#region --------------Link Colors---------------*/
.link-primary {
    color: var(--primary) !important;
}

    .link-primary:hover {
        color: var(--primary-hover) !important;
        text-decoration: none;
    }

.link-secondary {
    color: var(--secondary) !important;
}

    .link-secondary:hover {
        color: var(--secondary-hover) !important;
        text-decoration: none;
    }
/*#endregion*/
/*#endregion*/
/*#region --------------Fill Effect---------------*/
.btn.btn-fill-effect {
    --bs-btn-color: inherit;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
}
/*#endregion*/
/*#region --------------Popovers---------------*/
.popover {
    --bs-popover-zindex: 1070;
    --bs-popover-max-width: 276px;
    --bs-popover-font-size: 0.875rem;
    --bs-popover-bg: var(--white);
    --bs-popover-border-width: var(--bs-border-width);
    --bs-popover-border-color: var(--medium);
    --bs-popover-border-radius: var(--bs-border-radius-lg);
    --bs-popover-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
    --bs-popover-box-shadow: var(--bs-box-shadow);
    --bs-popover-header-padding-x: 1rem;
    --bs-popover-header-padding-y: 0.5rem;
    --bs-popover-header-font-size: 1rem;
    --bs-popover-header-color: inherit;
    --bs-popover-header-bg: var(--light);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: 1rem;
    --bs-popover-body-color: var(--body);
    --bs-popover-arrow-width: 1rem;
    --bs-popover-arrow-height: 0.5rem;
    --bs-popover-arrow-border: var(--bs-popover-border-color);
}
/*#endregion*/
/*#endregion*/

/*#region --------------Accordions & Collapse Buttons---------------*/

/*ALL COLLAPSE & ACCORDIONS MUST BE BUTTONS NOT LINKS SEMANTICALLY*/
.collapsing {
    height: 0;
    overflow: hidden;
    transition: height .35s ease;
}

/*Expand/Collapse Text*/
button[aria-expanded="true"] span.collapsed-text {
    display: none;
}

button[aria-expanded="false"] span.expanded-text {
    display: none;
}

/*Bootstrap has variables at .accordion level but changed this to work with both collapse & accordions*/
button[aria-expanded].accordion-button {
    --bs-accordion-btn-color: currentColor;
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-focus-box-shadow: none;
    --accordion-btn-margin-left: auto;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23727679'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --accordion-btn-shape-height: 1rem;
    --accordion-btn-shape-width: 0.125rem;
    --accordion-btn-icon-color: var(--bs-accordion-btn-color);
    --accordion-btn-icon-active-color: var(--accordion-btn-icon-color);
    --bs-accordion-active-color: currentColor;
    --bs-accordion-active-bg: transparent;
    --accordion-btn-hover-bg: var(--extra-light);
}

    button[aria-expanded].accordion-button:hover {
        background: var(--accordion-btn-hover-bg);
    }

    button[aria-expanded].accordion-button:not(.collapsed) {
        box-shadow: none !important;
    }

    button[aria-expanded].accordion-button:focus-visible {
        z-index: 3;
        outline: 0.125rem solid currentColor;
        outline-offset: var(--focus-outline-offset);
    }

    /*Change default active color to primary*/
    button[aria-expanded].accordion-button.expand-primary {
        --bs-accordion-active-color: var(--primary) !important;
        --accordion-btn-icon-active-color: var(--primary) !important;
    }

/*Change default font to bold*/
button[aria-expanded="true"].accordion-button.expand-bold {
    font-weight: 700;
}

/*Change icon default icon color */
button[aria-expanded].accordion-button.accordion-icon-secondary {
    --accordion-btn-icon-color: var(--secondary);
    --accordion-btn-icon-active-color: var(--secondary);
}

/*Make accordion only as wide as it's content*/
button[aria-expanded].accordion-button.w-auto,
button[aria-expanded].accordion-button.w-sm-auto,
button[aria-expanded].accordion-button.w-md-auto,
button[aria-expanded].accordion-button.w-lg-auto,
button[aria-expanded].accordion-button.w-xl-auto,
button[aria-expanded].accordion-button.accordion-justify-center {
    --bs-accordion-btn-icon-width: 1em;
    --accordion-btn-shape-height: 0.75rem;
    --accordion-btn-margin-left: 0.5rem;
}

button[aria-expanded].accordion-button.accordion-justify-center {
    justify-content: center;
}

.accordion-body {
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
}

/*#region --------------Icons & Shape Options---------------*/

/*Chevron*/
button[aria-expanded].accordion-button:not(:has(.accordion-plus))::after {
    margin-left: var(--accordion-btn-margin-left);
    background-image: none;
    mask-image: var(--bs-accordion-btn-icon);
    -webkit-mask-image: var(--bs-accordion-btn-icon);
    background: var(--accordion-btn-icon-color);
    transition: var(--bs-accordion-btn-icon-transition);
}

button[aria-expanded="true"].accordion-button:not(:has(.accordion-plus), .collapsed)::after {
    background-image: none;
    background: var(--accordion-btn-icon-active-color);
    transform: var(--bs-accordion-btn-icon-transform);
}

/*Plus/Minus*/
button[aria-expanded].accordion-button:has(.accordion-plus)::after {
    width: 0;
    height: 0;
    background-image: none;
    background-size: 0;
    margin-left: 0;
    content: none;
}

button[aria-expanded].accordion-button .accordion-plus {
    display: block;
    position: relative;
    width: var(--bs-accordion-btn-icon-width);
    height: var(--bs-accordion-btn-icon-width);
    margin-left: var(--accordion-btn-margin-left);
}

    button[aria-expanded].accordion-button .accordion-plus::after,
    button[aria-expanded].accordion-button .accordion-plus::before {
        display: block;
        content: "";
        position: absolute;
        height: var(--accordion-btn-shape-height);
        width: var(--accordion-btn-shape-width);
        border-radius: var(--accordion-btn-shape-width);
        background: var(--accordion-btn-icon-color);
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        transition: var(--bs-accordion-btn-icon-transition);
    }

    button[aria-expanded].accordion-button .accordion-plus::after {
        height: var(--accordion-btn-shape-width);
        width: var(--accordion-btn-shape-height);
    }

button[aria-expanded="true"].accordion-button .accordion-plus::before {
    transform: rotate(-90deg);
    background: var(--bs-accordion-active-color);
}

button[aria-expanded="true"].accordion-button .accordion-plus::after {
    transform: var(--bs-accordion-btn-icon-transform);
    background: var(--accordion-btn-icon-active-color);
    opacity: 0;
}
/*#endregion*/
/*#region --------------Accordion on Breakpoint---------------*/
/*#region Small breakpoint*/
@media (min-width: 576px) {
    .collapse.show-sm:not(.show) {
        display: block;
    }
}
/*#endregion*/
/*#region Medium breakpoint*/
@media (min-width: 768px) {
    .collapse.show-md:not(.show) {
        display: block;
    }
}
/*#endregion*/
/*#region Large breakpoint*/
@media (min-width: 992px) {
    .collapse.show-lg:not(.show) {
        display: block;
    }
}
/*#endregion*/
/*#endregion*/
/*#endregion*/

/*#region --------------Banners/Alerts/Validation---------------*/
.alert {
    --bs-alert-margin-bottom: 0;
}

    .alert.alert-bar {
        /*Makes the border go under the bar*/
        --bs-alert-border: none;
        box-shadow: inset 0 0 0 1px var(--bs-alert-border-color);
    }

        .alert.alert-bar::before {
            content: '';
            position: absolute;
            background-color: var(--alert-bar-bg);
            width: .35rem;
            height: 100%;
            bottom: 0;
            left: 0;
            border-top-left-radius: var(--bs-alert-border-radius);
            border-bottom-left-radius: var(--bs-alert-border-radius);
        }

    /*Success Banner*/
    .alert.alert-success {
        --bs-alert-color: var(--success-dark);
        --bs-alert-bg: var(--success-extra-light);
        --bs-alert-border-color: var(--success-light);
        --bs-alert-link-color: var(--success-dark);
        --alert-bar-bg: var(--success);
    }

    /*Info Banner*/
    .alert.alert-primary {
        --bs-alert-color: var(--info-hover);
        --bs-alert-bg: var(--info-light);
        --bs-alert-border-color: var(--info-disabled);
        --bs-alert-link-color: var(--info-hover);
        --alert-bar-bg: var(--info);
    }

    /*Warning Banner*/
    .alert.alert-warning {
        --bs-alert-color: var(--warning-dark);
        --bs-alert-bg: var(--warning-light);
        --bs-alert-border-color: var(--warning);
        --bs-alert-link-color: var(--warning-dark);
        --alert-bar-bg: var(--warning-dark);
    }

    /*Danger Banner*/
    .alert.alert-danger {
        --bs-alert-color: var(--error-dark);
        --bs-alert-bg: var(--error-extra-light);
        --bs-alert-border-color: var(--error-light);
        --bs-alert-link-color: var(--error-dark);
        --alert-bar-bg: var(--error);
    }

    /*Validation Banner*/
    .alert.alert-validation {
        --bs-alert-color: var(--error-dark);
        --bs-alert-bg: var(--error-extra-light);
        --bs-alert-border-color: var(--error-light);
        --bs-alert-link-color: var(--error-dark);
        --alert-bar-bg: var(--error);
    }

        .alert.alert-validation > ul {
            margin-left: 1.75rem;
            margin-bottom: 0;
        }
/*#endregion*/

/*#region --------------Cards---------------*/
.card {
    --bs-card-color: var(--body);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-bg: var(--white);
    --bs-card-subtitle-color: var(--secondary);
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-cap-color: var(--bs-card-color);
    --bs-card-cap-bg: var(--bs-card-bg);
    --bs-card-box-shadow: 0 4px 8px var(--secondary-disabled);
}

    a.card,
    .card.clickable-card {
        text-decoration: none;
        color: var(--bs-card-color) !important;
        /*Border must be 3:1 */
        --bs-card-border-color: var(--secondary);
        cursor: pointer;
    }

        a.card:hover,
        .card.clickable-card:has(.stretched-link):hover {
            box-shadow: var(--bs-card-box-shadow);
            transition: all 0.2s ease-out;
            top: -1px;
        }

        a.card:focus-visible,
        .card.clickable-card:focus-within {
            outline: var(--focus-outline-width) solid var(--body) !important;
            box-shadow: 0 0 0 var(--focus-outline-width) var(--white) !important;
            outline-offset: var(--focus-outline-offset) !important;
        }

    /*Fits bg/images better in card without 1px gap between it and border at corner*/
    .card .rounded,
    .card .rounded-top,
    .card .rounded-bottom,
    .card .rounded-start,
    .card .rounded-end {
        --bs-border-radius: var(--bs-card-inner-border-radius);
    }
/*#endregion*/

/*#region --------------Images---------------*/
img.fit-cover {
    object-fit: cover;
}

img.fit-contain {
    object-fit: contain;
}
/*#endregion*/

/*#region --------------Tables---------------*/
table.table {
    --bs-table-color: var(--body);
    --bs-table-bg: transparent;
    --table-header-bg: var(--light);
    font-size: 0.9rem;
    background-color: var(--white);
}

table.table {
    caption-side: top;
}

    table.table thead tr {
        background-color: var(--table-header-bg) !important;
        border-color: var(--bs-table-color) !important;
    }

    table.table tbody tr td,
    table.table tbody tr th {
        vertical-align: middle;
    }

    /*Clickable Table*/
    table.table.clickable-table tbody tr:hover {
        cursor: pointer;
        background-color: var(--light);
    }

    table.table.clickable-table tbody tr:focus-within {
        outline: var(--focus-outline-width) solid transparent;
        box-shadow: inset 0.25rem 0 0 0 var(--secondary);
    }

    /*No clickable row icon*/
    table.table.clickable-table tr td.clickable-row-link:has(:not(span.clickable-row-icon)) {
        width: 0% !important;
        white-space: nowrap !important;
        padding: 0;
    }

    /*Clickable row icon*/
    table.table.clickable-table tr td.clickable-row-link:has(span.clickable-row-icon) {
        width: 1% !important;
        white-space: nowrap !important;
    }

table.clickable-table tbody tr td.clickable-row-link span.clickable-row-icon::after {
    width: 1rem;
    height: 1rem;
    content: '';
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1rem;
}

table.clickable-table tbody tr td.clickable-row-link a {
    overflow: hidden;
    height: 0;
    width: 0;
    display: block;
}

    table.clickable-table tbody tr td.clickable-row-link a:focus {
        outline: var(--focus-outline-width) solid transparent !important;
    }

/*Clickable List Table*/
a.list-table-link {
    --link-table-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23727679'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    --link-table-img-bg: currentColor;
    --link-table-img-size: 1rem;
    text-decoration: none;
    color: inherit !important;
    display: flex;
    align-items: center;
}

    a.list-table-link:hover {
        background-color: var(--light);
    }

    a.list-table-link::after {
        flex-shrink: 0;
        width: var(--link-table-img-size);
        height: var(--link-table-img-size);
        margin-left: auto;
        content: "";
        mask-image: var(--link-table-img);
        -webkit-mask-image: var(--link-table-img);
        background: var(--link-table-img-bg);
        background-repeat: no-repeat;
        mask-repeat: no-repeat;
        background-size: var(--link-table-img-size);
    }
/*#endregion*/

/*#region --------------Focus Rings---------------*/
.double-focus-ring:focus-visible {
    outline: var(--focus-outline-width) solid var(--body) !important;
    box-shadow: 0 0 0 var(--focus-outline-width) var(--white) !important;
    outline-offset: var(--focus-outline-offset) !important;
}
/*#endregion*/

/*#region --------------Forms---------------*/

/*General Form Control Styles*/
.form-control, .form-select, .form-switch, .form-check {
    /*WCAG: Must have a 3:1 color contrast*/
    --bs-border-color: var(--secondary);
}
    .form-control:focus, .form-select:focus {
        border-color: var(--body);
        outline: var(--focus-outline-width) solid var(--body);
        box-shadow: 0 0 0 var(--focus-outline-width) var(--white);
        outline-offset: var(--focus-outline-offset);
    }

/*Fieldsets*/
legend {
    font-size: 1rem;
}

/*Checks*/
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    border-color: inherit;
    outline: var(--focus-outline-width) solid var(--body);
    box-shadow: 0 0 0 var(--focus-outline-width) var(--white);
    outline-offset: var(--focus-outline-offset);
}

/*Switches*/
.form-switch .form-check-input:not(:checked):focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23CA4F00'/%3e%3c/svg%3e")
}

.form-switch.form-switch-lg .form-check-input {
    font-size: 1.25em;
    margin-top: 0.125em;
}

.form-switch.form-switch-lg {
    padding-left: 3.125em;
}

/*File Upload*/
.custom-file input.form-control[type="file"]::file-selector-button, .custom-file input.form-control[type="file"]::-webkit-file-upload-button {
    display: none;
}

.custom-file:focus-within {
    border-color: inherit;
    outline: var(--focus-outline-width) solid var(--body);
    box-shadow: 0 0 0 var(--focus-outline-width) var(--white);
    outline-offset: var(--focus-outline-offset);
    border-radius: var(--bs-border-radius);
}

    .custom-file:focus-within .form-control, .custom-file:focus-within label {
        border-color: inherit !important;
        outline: var(--focus-outline-width) solid transparent !important;
        box-shadow: none !important;
        outline-offset: 0 !important;
    }

.custom-file label {
    background-color: var(--light);
    border-color: var(--secondary);
}

.custom-file:hover label {
    background-color: var(--medium);
}

/*Rich Text Editors*/
.ck-editor__editable_inline {
    min-height: 15rem !important;
}

    .ck-editor__editable_inline:focus {
        border-color: var(--body) !important;
        outline: var(--focus-outline-width) solid var(--body) !important;
        box-shadow: 0 0 0 var(--focus-outline-width) var(--white) !important;
        outline-offset: var(--focus-outline-offset);
    }

.ck.ck-editor__main > .ck-editor__editable.ck-focused {
    border-color: var(--body) !important;
}

.ck .ck-powered-by {
    display: none !important;
    font-size: 0.75rem !important;
}

.ck-editor {
    /*Color*/
    --ck-color-base-text: var(--body);
    /*Border*/
    --ck-color-base-border: var(--secondary);
    --ck-border-radius: var(--bs-border-radius);
    --ck-color-toolbar-border: var(--ck-color-base-border);
    --ck-color-input-border: var(--ck-color-base-border);
    /*Hover*/
    --ck-color-button-default-hover-background: var(--extra-light);
    /*Button is On*/
    --ck-color-button-on-background: var(--light);
    --ck-color-button-on-color: var(--body);
    /*Hover - Button is On*/
    --ck-color-button-on-hover-background: var(--extra-light);
    /*Active - Button is On*/
    --ck-color-button-on-active-background: var(--extra-light);
    /*Heading Dropdown is On*/
    --ck-color-list-button-on-background: var(--light);
    --ck-color-list-button-on-text: var(--body);
    /*OHover - Heading Dropdown is On*/
    --ck-color-list-button-on-background-focus: var(--extra-light);
}

/*Link input focus*/
.ck.ck-input:focus {
    border-color: var(--body) !important;
    outline: var(--focus-outline-width) solid var(--body) !important;
    box-shadow: 0 0 0 var(--focus-outline-width) var(--white) !important;
    outline-offset: var(--focus-outline-offset) !important;
}
/*Toolbar Focus*/
.ck.ck-button:active, .ck.ck-button:focus, a.ck.ck-button:active, a.ck.ck-button:focus {
    border: 1px solid transparent !important;
    box-shadow: none !important;
    outline: var(--focus-outline-width) solid var(--body) !important;
}
/*On button*/
.ck.ck-button.ck-on, a.ck.ck-button.ck-on {
    border-color: var(--body) !important;
}

.ck-editor .ck-button__label, 
.ck-editor .ck-button:not([aria-disabled="true"]) {
    cursor: pointer !important;
}
/*#endregion*/

/*#region --------------Validation---------------*/
/*Hide ASP Validation Summary when valid*/
.validation-summary-valid {
    display: none !important;
}

/*Default styles error messages*/
.field-validation-error {
    display: block;
    color: var(--error);
}

/*Icon with error message*/
    .field-validation-error .error-icon::before {
        content: '';
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: calc(.75em + .375rem) calc(.75em + .375rem);
        padding-left: 1.25rem;
    }
/*#endregion*/

/*#region --------------Template Region---------------*/
/*#endregion*/