:root {
    /* Type */
    --default-font-color: #000000;
    /* Theme Colors */
    --skyward-blue: #00539F;
    --primary-color: #00539F;
    --secondary-color: var(--alert-success);
    --text-highlight: var(--pink-200);
    /* Semantic Colors */
    --alert-success: #026400;
    --alert-success-bg: #E1FADF;
    --alert-success-border: #A7DBC7;
    --alert-success-link: #006633;
    --alert-danger: #B30000;
    --alert-danger-bg: #FDE8EB;
    --alert-danger-border: #EDBCC4;
    --alert-danger-link: #9B2541;
    --alert-warning: #FFCC00;
    --alert-warning-bg: #FFF4C7;
    --alert-warning-border: #EAC267;
    --alert-warning-link: #6B541B;
    --alert-info: #33BBFF;
    --alert-info-bg: #CFF2FC;
    --alert-info-border: #85C8E6;
    --alert-info-link: #003942;
    --alert-light: #CCCCCC;
    --alert-light-bg: #F8F8F8;
    --alert-light-border: #CCCCCC;
    --alert-light-link: #000;
    --alert-dark: #555555;
    --alert-dark-bg: #000;
    --alert-dark-border: #444444;
    --alert-dark-link: #ffffff;
    --white: #fff;
    --black: #000;
    /* Colors */
    --red-100: #F9F4F4;
    --red-200: #F0DDE0;
    --red-300: #D9AAB1;
    --red-400: #C8403E;
    --red-500: #9B2541;
    --red-600: #650B24;
    --orange-100: #F9F7F4;
    --orange-200: #FBE7D9;
    --orange-300: #F6C29F;
    --orange-400: #EA7432;
    --orange-500: #B14822;
    --orange-600: #7D3111;
    --yellow-100: #FFFCF4;
    --yellow-200: #FEF9DC;
    --yellow-300: #FEF0A9;
    --yellow-400: #F3B21F;
    --yellow-500: #8E6E29;
    --yellow-600: #6B541B;
    --green-100: #F4F9F6;
    --green-200: #E3F0E8;
    --green-300: #B8DAC5;
    --green-400: #128758;
    --green-500: #006633;
    --green-600: #00461F;
    --teal-100: #F4F8F9;
    --teal-200: #E1ECED;
    --teal-300: #B3CFD3;
    --teal-400: #17838C;
    --teal-500: #08535F;
    --teal-600: #003942;
    --blue-100: #F4F5F9;
    --blue-200: #DFEBFE;
    --blue-300: #B0CDFD;
    --blue-400: #138CFF;
    --blue-500: #0A4680;
    --blue-600: #022B56;
    --purple-100: #F7F4F9;
    --purple-200: #EBDDF1;
    --purple-300: #CEABDD;
    --purple-400: #7D3D93;
    --purple-500: #3F1F4A;
    --purple-600: #26032E;
    --pink-100: #F9F4F6;
    --pink-200: #F2DFE7;
    --pink-300: #DFAFC2;
    --pink-400: #DF2080;
    --pink-500: #A8205F;
    --pink-600: #7C0D45;
    --brown-100: #F9F6F4;
    --brown-200: #DDD9D0;
    --brown-300: #AA9F8A;
    --brown-400: #7A5E3A;
    --brown-500: #48371B;
    --brown-600: #342509;
    --grey-100: #F8F8F8;
    --grey-200: #F2F2F2;
    --grey-300: #CCCCCC;
    --grey-400: #555555;
    --grey-500: #2A2A2A;
    --grey-600: #121212;
    /* Filter Color for forcing SVG Icons */
    --skyward-blue-f: invert(23%) sepia(45%) saturate(2972%) hue-rotate(191deg) brightness(96%) contrast(103%);
    --primary-color-f: invert(23%) sepia(45%) saturate(2972%) hue-rotate(191deg) brightness(96%) contrast(103%);
    --alert-success-f: invert(24%) sepia(90%) saturate(882%) hue-rotate(82deg) brightness(98%) contrast(106%);
    --alert-danger-f: invert(10%) sepia(75%) saturate(7456%) hue-rotate(18deg) brightness(84%) contrast(122%);
    --alert-warning-f: invert(86%) sepia(34%) saturate(4716%) hue-rotate(360deg) brightness(105%) contrast(104%);
    ;
    --alert-info-f: invert(59%) sepia(88%) saturate(1283%) hue-rotate(171deg) brightness(100%) contrast(103%);
    --alert-light-f: invert(89%) sepia(0%) saturate(1%) hue-rotate(150deg) brightness(93%) contrast(90%);
    --alert-dark-f: invert(34%) sepia(1%) saturate(0%) hue-rotate(336deg) brightness(97%) contrast(96%);
    --white-f: invert(100%) sepia(100%) saturate(0%) hue-rotate(88deg) brightness(100%) contrast(102%);
    --black-f: filter: invert(0%) sepia(97%) saturate(15%) hue-rotate(55deg) brightness(89%) contrast(100%);
    --red-100-f: invert(75%) sepia(95%) saturate(7%) hue-rotate(313deg) brightness(109%) contrast(96%);
    --red-200-f: invert(86%) sepia(5%) saturate(611%) hue-rotate(303deg) brightness(109%) contrast(88%);
    --red-300-f: invert(81%) sepia(5%) saturate(1630%) hue-rotate(303deg) brightness(94%) contrast(81%);
    --red-400-f: invert(39%) sepia(86%) saturate(612%) hue-rotate(316deg) brightness(78%) contrast(102%);
    --red-500-f: invert(17%) sepia(55%) saturate(2881%) hue-rotate(324deg) brightness(97%) contrast(91%);
    --red-600-f: invert(9%) sepia(71%) saturate(3655%) hue-rotate(329deg) brightness(85%) contrast(100%);
    --orange-100-f: invert(93%) sepia(4%) saturate(440%) hue-rotate(324deg) brightness(107%) contrast(95%);
    --orange-200-f: invert(91%) sepia(5%) saturate(1079%) hue-rotate(331deg) brightness(102%) contrast(97%);
    --orange-300-f: invert(78%) sepia(50%) saturate(375%) hue-rotate(324deg) brightness(102%) contrast(93%);
    --orange-400-f: invert(51%) sepia(57%) saturate(673%) hue-rotate(336deg) brightness(95%) contrast(93%);
    --orange-500-f: invert(29%) sepia(53%) saturate(1859%) hue-rotate(349deg) brightness(94%) contrast(86%);
    --orange-600-f: invert(19%) sepia(89%) saturate(1021%) hue-rotate(348deg) brightness(97%) contrast(96%);
    --yellow-100-f: invert(93%) sepia(4%) saturate(647%) hue-rotate(332deg) brightness(106%) contrast(101%);
    --yellow-200-f: invert(88%) sepia(38%) saturate(238%) hue-rotate(328deg) brightness(108%) contrast(99%);
    --yellow-300-f: invert(93%) sepia(11%) saturate(1220%) hue-rotate(343deg) brightness(104%) contrast(99%);
    --yellow-400-f: invert(81%) sepia(18%) saturate(4272%) hue-rotate(346deg) brightness(102%) contrast(91%);
    --yellow-500-f: invert(36%) sepia(95%) saturate(331%) hue-rotate(3deg) brightness(99%) contrast(87%);
    --yellow-600-f: invert(28%) sepia(55%) saturate(545%) hue-rotate(5deg) brightness(100%) contrast(92%);
    --green-100-f: invert(94%) sepia(7%) saturate(400%) hue-rotate(75deg) brightness(109%) contrast(95%);
    --green-200-f: invert(96%) sepia(6%) saturate(239%) hue-rotate(90deg) brightness(97%) contrast(97%);
    --green-300-f: invert(88%) sepia(37%) saturate(142%) hue-rotate(86deg) brightness(90%) contrast(91%);
    --green-400-f: invert(24%) sepia(79%) saturate(5571%) hue-rotate(155deg) brightness(98%) contrast(86%);
    --green-500-f: invert(23%) sepia(69%) saturate(1280%) hue-rotate(120deg) brightness(98%) contrast(103%);
    --green-600-f: invert(20%) sepia(15%) saturate(3990%) hue-rotate(111deg) brightness(94%) contrast(106%);
    --teal-100-f: invert(100%) sepia(23%) saturate(320%) hue-rotate(165deg) brightness(100%) contrast(96%);
    --teal-200-f: invert(95%) sepia(8%) saturate(169%) hue-rotate(137deg) brightness(99%) contrast(91%);
    --teal-300-f: invert(85%) sepia(21%) saturate(200%) hue-rotate(139deg) brightness(91%) contrast(94%);
    --teal-400-f: invert(39%) sepia(32%) saturate(1011%) hue-rotate(136deg) brightness(101%) contrast(92%);
    --teal-500-f: invert(23%) sepia(54%) saturate(1003%) hue-rotate(146deg) brightness(94%) contrast(94%);
    --teal-600-f: invert(17%) sepia(13%) saturate(4970%) hue-rotate(150deg) brightness(94%) contrast(101%);
    --blue-100-f: invert(92%) sepia(4%) saturate(132%) hue-rotate(191deg) brightness(106%) contrast(97%);
    --blue-200-f: invert(100%) sepia(84%) saturate(1559%) hue-rotate(177deg) brightness(103%) contrast(99%);
    --blue-300-f: invert(76%) sepia(14%) saturate(858%) hue-rotate(184deg) brightness(102%) contrast(98%);
    --blue-400-f: invert(39%) sepia(85%) saturate(1952%) hue-rotate(192deg) brightness(101%) contrast(102%);
    --blue-500-f: invert(17%) sepia(90%) saturate(1895%) hue-rotate(195deg) brightness(87%) contrast(92%);
    --blue-600-f: invert(10%) sepia(25%) saturate(6900%) hue-rotate(199deg) brightness(102%) contrast(98%);
    --purple-100-f: invert(90%) sepia(15%) saturate(41%) hue-rotate(232deg) brightness(104%) contrast(97%);
    --purple-200-f: invert(84%) sepia(8%) saturate(330%) hue-rotate(238deg) brightness(107%) contrast(92%);
    --purple-300-f: invert(75%) sepia(22%) saturate(416%) hue-rotate(238deg) brightness(94%) contrast(92%);
    --purple-400-f: invert(27%) sepia(33%) saturate(2684%) hue-rotate(257deg) brightness(86%) contrast(82%);
    --purple-500-f: invert(11%) sepia(53%) saturate(1595%) hue-rotate(255deg) brightness(95%) contrast(91%);
    --purple-600-f: invert(3%) sepia(89%) saturate(7442%) hue-rotate(290deg) brightness(68%) contrast(99%);
    --pink-100-f: invert(89%) sepia(9%) saturate(61%) hue-rotate(285deg) brightness(108%) contrast(97%);
    --pink-200-f: invert(93%) sepia(5%) saturate(546%) hue-rotate(288deg) brightness(98%) contrast(93%);
    --pink-300-f: invert(78%) sepia(36%) saturate(228%) hue-rotate(288deg) brightness(90%) contrast(93%);
    --pink-400-f: invert(24%) sepia(42%) saturate(6300%) hue-rotate(315deg) brightness(90%) contrast(94%);
    --pink-500-f: invert(21%) sepia(84%) saturate(1710%) hue-rotate(305deg) brightness(89%) contrast(101%);
    --pink-600-f: invert(13%) sepia(76%) saturate(2660%) hue-rotate(310deg) brightness(91%) contrast(104%);
    --brown-100-f: invert(99%) sepia(23%) saturate(218%) hue-rotate(300deg) brightness(99%) contrast(96%);
    --brown-200-f: invert(94%) sepia(11%) saturate(142%) hue-rotate(4deg) brightness(91%) contrast(94%);
    --brown-300-f: invert(73%) sepia(12%) saturate(432%) hue-rotate(1deg) brightness(85%) contrast(92%);
    --brown-400-f: invert(36%) sepia(35%) saturate(530%) hue-rotate(354deg) brightness(96%) contrast(92%);
    --brown-500-f: invert(17%) sepia(66%) saturate(503%) hue-rotate(359deg) brightness(91%) contrast(85%);
    --brown-600-f: invert(12%) sepia(57%) saturate(642%) hue-rotate(1deg) brightness(99%) contrast(95%);
    --grey-100-f: invert(100%) sepia(62%) saturate(427%) hue-rotate(269deg) brightness(116%) contrast(95%);
    --grey-200-f: invert(98%) sepia(7%) saturate(90%) hue-rotate(243deg) brightness(116%) contrast(90%);
    --grey-300-f: invert(92%) sepia(0%) saturate(77%) hue-rotate(235deg) brightness(92%) contrast(86%);
    --grey-400-f: invert(33%) sepia(0%) saturate(1%) hue-rotate(192deg) brightness(93%) contrast(88%);
    --grey-500-f: invert(14%) sepia(0%) saturate(0%) hue-rotate(187deg) brightness(90%) contrast(91%);
    --grey-600-f: invert(0%) sepia(3%) saturate(4381%) hue-rotate(323deg) brightness(86%) contrast(86%);
    /* Font sizes */
    --font-size-p-sm: .88rem; /* 14.08 px */
    --font-p-sm-lh: 1.25rem; /* 20px */
    --fs-17: 1.1rem;
    --fs-20: 1.3rem;
    --fs-24: 1.5rem;
    --fs-30: 2rem;
    --fs-40: 2.5rem;
    --fs-50: 3rem;
    --fs-60: 4rem;
    --fs-70: 4.5rem;
}

/* Apply to all elements */
/* Scrolling Offset */
* {
    scroll-margin-top: 5em;
}

/* BOOTSTRAP COMPONENT OVERRIDE */

/* Main Header Navigation */
.navbar-nav .nav-item a {
    color: #000;
    font-size: var(--fs-14);
    line-height: 1.5rem;
    font-weight: 500; /* light: 300, reg: 400, med: 500, semi: 600, bold: 700, extrabold: 800 */
    text-underline-offset: 6px;
    transition: 0;
}

    .navbar-nav .nav-item a:hover {
        text-decoration: underline;
        font-weight: 500;
        text-underline-offset: 6px;
        text-decoration-color: #000;
        text-decoration-thickness: 2px;
        color: #000;
        transition: 0;
    }

.navbar-nav .nav-item .active {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-color: #000;
    text-decoration-thickness: 2px;
    color: #000;
    transition: 0;
}

/* Mega Menu adjustments */
.nav-item.dropdown.dropdown-mega {
    position: static;
}

    .nav-item.dropdown.dropdown-mega .dropdown-menu {
        width: 100%;
        /* top: auto; /* Offset mega menu to overlap bar
        left: 5%; /* If width is less than 100% */
    }


/* Modals */
.modal {
    z-index: 5000;
    ;
}

/* Bootstrap Modals Customization */
.modal-header {
    border-bottom: 0px;
}

.modal-content {
    border-radius: 15px;
    border: 0px;
}

.modal-title {
    text-align: center;
}



/* Tabs */
.nav-link {
    color: #00539F;
}

    .nav-link.sw {
        color: #00539F;
    }

        .nav-link.sw.active {
            background: #00539F;
            color: #fff !important;
        }

            .nav-link.sw.active::before {
                content: "";
            }

.nav-item button {
    padding: 10px 20px;
}

/* Breadcrumb */

.breadcrumb {
    margin: 0px;
}

li.breadcrumb-item {
    font-size: var(--font-size-p-sm); /* 14.08 px */
    line-height: var(--font-p-sm-lh); /* 20px */
}

    li.breadcrumb-item a {
        color: var(--grey-500);
        text-decoration: none;
        font-weight: 400 !important;
    }

        li.breadcrumb-item a:hover {
            text-decoration: underline;
            text-decoration-color: var(--grey-400);
        }

    li.breadcrumb-item.active a {
        font-weight: 500 !important;
    }

/* Custom divider
         li.breadcrumb-item+.breadcrumb-item::before {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.11' height='12' viewBox='0 0 4.11 26.61'%3E%3Cline id='Line_328' data-name='Line 328' x1='3' y2='25.5' transform='translate(0.555 0.555)' fill='none' stroke='%23ccc' stroke-linecap='round' stroke-width='1'/%3E%3C/svg%3E%0A") !important;
        }
        */


/* Alerts */
.alert-success {
    --bs-alert-color: var(--black);
    --bs-alert-bg: var(--alert-success-bg);
    --bs-alert-border-color: var(--alert-success-border);
    --bs-alert-link-color: var(--alert-success-link);
}

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

.alert-danger {
    --bs-alert-color: var(--black);
    --bs-alert-bg: var(--alert-danger-bg);
    --bs-alert-border-color: var(--alert-danger-border);
    --bs-alert-link-color: var(--alert-danger-link);
}

    .alert-danger .alert-link:hover {
        color: var(--alert-danger-link);
        text-decoration-color: var(--alert-danger-link);
    }

.alert-warning {
    --bs-alert-color: var(--black);
    --bs-alert-bg: var(--alert-warning-bg);
    --bs-alert-border-color: var(--alert-warning-border);
    --bs-alert-link-color: var(--alert-warning-link);
}

    .alert-warning .alert-link:hover {
        color: var(--alert-warning-link);
        text-decoration-color: var(--alert-warning-link);
    }

.alert-info {
    --bs-alert-color: var(--black);
    --bs-alert-bg: var(--alert-info-bg);
    --bs-alert-border-color: var(--alert-info-border);
    --bs-alert-link-color: var(--alert-info-link);
}

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

.alert-light {
    --bs-alert-color: var(--black);
    --bs-alert-bg: var(--alert-light-bg);
    --bs-alert-border-color: var(--alert-light-border);
    --bs-alert-link-color: var(--alert-light-link);
}

    .alert-light .alert-link:hover {
        color: var(--alert-light-link);
        text-decoration-color: var(--alert-light-link);
    }

.alert-dark {
    --bs-alert-color: var(--white);
    --bs-alert-bg: var(--alert-dark-bg);
    --bs-alert-border-color: var(--alert-dark-border);
    --bs-alert-link-color: var(--alert-dark-link);
}

    .alert-dark .alert-link:hover {
        color: var(--alert-dark-link);
        text-decoration-color: var(--alert-dark-link);
    }

/* END OF BOOTSTRAP COMPONENT OVERRIDE */


/* VIDEO */

/* SVG play and pause button for video GIF */
.pause-button, .play-button {
    margin-top: 10px;
    margin-left: 10px;
    width: 35px;
    height: 34px;
    border: 0;
    background-color: #fff;
}

    .pause-button svg, .play-button svg {
        margin-top: -2px;
    }


/* LINKS */

a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--blue-300);
    text-decoration-thickness: 1px;
    color: #00539F;
    transition: .2s ease-out;
}

    a:hover {
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-color: #00539F;
        text-decoration-thickness: 2px;
        color: #00539F;
        transition: .1s ease-in;
    }

    /*
    a:visited {
        font-weight: 600;
        text-decoration: dashed;
        text-underline-offset: 4px;
        text-decoration-color: var(--pink-300);
        text-decoration-thickness: 1px;
        color: var(--pink-500);
        transition: .2s ease-out;
    }
    */

    /* Button styled anchor links */
    a.btn {
        font-weight: unset;
        text-decoration: none;
    }

    a.ul-dark {
        text-decoration-color: var(--grey-300);
    }

        a.ul-dark:hover {
            text-decoration-color: var(--grey-600);
        }

    a.ul-light {
        text-decoration-color: var(--grey-300);
    }

        a.ul-light:hover {
            text-decoration-color: var(--grey-100);
        }

    a.no-ul {
        text-decoration: unset !important;
    }

        a.no-ul:hover {
            text-decoration: underline;
        }


/* Button with icon that fills on hover */
.fill-toggle .material-symbols-rounded {
    font-variation-settings: 'FILL' 0 !important;
}

.fill-toggle:hover .material-symbols-rounded {
    font-variation-settings: 'FILL' 1 !important;
}


/* Navigation Cards */
a .nav-card {
    color: #000;
    text-decoration: none;
    border: 1px solid #ccc;
    outline: 1px solid transparent;
    border-radius: 30px;
    padding: 30px 20px 40px 20px;
    transition: .2s all;
}

a.nav-item {
    text-decoration: none;
}

a .nav-card:hover {
    background: var(--blue-200);
    cursor: pointer;
    border: 1px solid #00539F;
    outline: 1px solid #00539F;
    text-decoration: none;
    margin-top: 0px;
    transition: .1s all;
}

.nav-card .material-symbols-rounded {
    color: #00539F;
}

.nav-card:hover .material-symbols-rounded, .material-symbols-rounded.fill {
    font-variation-settings: 'FILL' 1 !important;
}

/* Option and settings button type UI */
.btn-select {
    /* placeholder */
}

    .btn-select:hover {
        background-color: #f2f2f2;
        border: 1px solid #cccccc;
    }

    .btn-select.active {
        background-color: #f2f2f2;
        border: 1px solid #555555;
        font-weight: 600;
    }

    .btn-select:disabled {
        background-color: #f2f2f2 !important;
        border: 1px solid #555555 !important;
        font-weight: 600 !important;
        opacity: 1 !important;
    }


/* Zoom in image on hover */
.article-image {
    transform: scale(2) !important;
}


/* Custom colored theme buttons */

.btn-primary {
    color: #FFFFFF;
    background-color: #00539F;
    border-color: #00539F;
    font-size: var(--fs-17);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        color: #FFFFFF;
        background-color: #022B56;
        border-color: #00539F;
    }

    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        background-image: none;
    }

    .btn-primary.disabled,
    .btn-primary[disabled],
    fieldset[disabled] .btn-primary,
    .btn-primary.disabled:hover,
    .btn-primary[disabled]:hover,
    fieldset[disabled] .btn-primary:hover,
    .btn-primary.disabled:focus,
    .btn-primary[disabled]:focus,
    fieldset[disabled] .btn-primary:focus,
    .btn-primary.disabled:active,
    .btn-primary[disabled]:active,
    fieldset[disabled] .btn-primary:active,
    .btn-primary.disabled.active,
    .btn-primary[disabled].active,
    fieldset[disabled] .btn-primary.active {
        background-color: #00539F;
        border-color: #00539F;
    }

    .btn-primary .badge {
        color: #00539F;
        background-color: #FFFFFF;
    }


.btn-secondary {
    color: #FFFFFF;
    background-color: #555555;
    border-color: #555555;
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active,
    .btn-secondary.active,
    .open .dropdown-toggle.btn-secondary {
        color: #FFFFFF;
        background-color: #2A2A2A;
        border-color: #555555;
    }

    .btn-secondary:active,
    .btn-secondary.active,
    .open .dropdown-toggle.btn-secondary {
        background-image: none;
    }

    .btn-secondary.disabled,
    .btn-secondary[disabled],
    fieldset[disabled] .btn-secondary,
    .btn-secondary.disabled:hover,
    .btn-secondary[disabled]:hover,
    fieldset[disabled] .btn-secondary:hover,
    .btn-secondary.disabled:focus,
    .btn-secondary[disabled]:focus,
    fieldset[disabled] .btn-secondary:focus,
    .btn-secondary.disabled:active,
    .btn-secondary[disabled]:active,
    fieldset[disabled] .btn-secondary:active,
    .btn-secondary.disabled.active,
    .btn-secondary[disabled].active,
    fieldset[disabled] .btn-secondary.active {
        background-color: #555555;
        border-color: #555555;
    }

    .btn-secondary .badge {
        color: #555555;
        background-color: #FFFFFF;
    }



.btn-success {
    color: #FFFFFF;
    background-color: #006633;
    border-color: #006633;
}

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active,
    .btn-success.active,
    .open .dropdown-toggle.btn-success {
        color: #FFFFFF;
        background-color: #00461F;
        border-color: #006633;
    }

    .btn-success:active,
    .btn-success.active,
    .open .dropdown-toggle.btn-success {
        background-image: none;
    }

    .btn-success.disabled,
    .btn-success[disabled],
    fieldset[disabled] .btn-success,
    .btn-success.disabled:hover,
    .btn-success[disabled]:hover,
    fieldset[disabled] .btn-success:hover,
    .btn-success.disabled:focus,
    .btn-success[disabled]:focus,
    fieldset[disabled] .btn-success:focus,
    .btn-success.disabled:active,
    .btn-success[disabled]:active,
    fieldset[disabled] .btn-success:active,
    .btn-success.disabled.active,
    .btn-success[disabled].active,
    fieldset[disabled] .btn-success.active {
        background-color: #006633;
        border-color: #006633;
    }

    .btn-success .badge {
        color: #006633;
        background-color: #FFFFFF;
    }

.btn-danger {
    color: #FFFFFF;
    background-color: #B30000;
    border-color: #B30000;
}

    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:active,
    .btn-danger.active,
    .open .dropdown-toggle.btn-danger {
        color: #FFFFFF;
        background-color: #650B24;
        border-color: #B30000;
    }

    .btn-danger:active,
    .btn-danger.active,
    .open .dropdown-toggle.btn-danger {
        background-image: none;
    }

    .btn-danger.disabled,
    .btn-danger[disabled],
    fieldset[disabled] .btn-danger,
    .btn-danger.disabled:hover,
    .btn-danger[disabled]:hover,
    fieldset[disabled] .btn-danger:hover,
    .btn-danger.disabled:focus,
    .btn-danger[disabled]:focus,
    fieldset[disabled] .btn-danger:focus,
    .btn-danger.disabled:active,
    .btn-danger[disabled]:active,
    fieldset[disabled] .btn-danger:active,
    .btn-danger.disabled.active,
    .btn-danger[disabled].active,
    fieldset[disabled] .btn-danger.active {
        background-color: #B30000;
        border-color: #B30000;
    }

    .btn-danger .badge {
        color: #B30000;
        background-color: #FFFFFF;
    }


.btn-warning {
    color: #000000;
    background-color: #FECC01;
    border-color: #FECC01;
}

    .btn-warning:hover,
    .btn-warning:focus,
    .btn-warning:active,
    .btn-warning.active,
    .open .dropdown-toggle.btn-warning {
        color: #000000;
        background-color: #F3B21F;
        border-color: #FECC01;
    }

    .btn-warning:active,
    .btn-warning.active,
    .open .dropdown-toggle.btn-warning {
        background-image: none;
    }

    .btn-warning.disabled,
    .btn-warning[disabled],
    fieldset[disabled] .btn-warning,
    .btn-warning.disabled:hover,
    .btn-warning[disabled]:hover,
    fieldset[disabled] .btn-warning:hover,
    .btn-warning.disabled:focus,
    .btn-warning[disabled]:focus,
    fieldset[disabled] .btn-warning:focus,
    .btn-warning.disabled:active,
    .btn-warning[disabled]:active,
    fieldset[disabled] .btn-warning:active,
    .btn-warning.disabled.active,
    .btn-warning[disabled].active,
    fieldset[disabled] .btn-warning.active {
        background-color: #FECC01;
        border-color: #FECC01;
    }

    .btn-warning .badge {
        color: #FECC01;
        background-color: #000000;
    }

.btn-info {
    color: #000000;
    background-color: #33BBFF;
    border-color: #33BBFF;
}

    .btn-info:hover,
    .btn-info:focus,
    .btn-info:active,
    .btn-info.active,
    .open .dropdown-toggle.btn-info {
        color: #000000;
        background-color: #138CFF;
        border-color: #33BBFF;
    }

    .btn-info:active,
    .btn-info.active,
    .open .dropdown-toggle.btn-info {
        background-image: none;
    }

    .btn-info.disabled,
    .btn-info[disabled],
    fieldset[disabled] .btn-info,
    .btn-info.disabled:hover,
    .btn-info[disabled]:hover,
    fieldset[disabled] .btn-info:hover,
    .btn-info.disabled:focus,
    .btn-info[disabled]:focus,
    fieldset[disabled] .btn-info:focus,
    .btn-info.disabled:active,
    .btn-info[disabled]:active,
    fieldset[disabled] .btn-info:active,
    .btn-info.disabled.active,
    .btn-info[disabled].active,
    fieldset[disabled] .btn-info.active {
        background-color: #33BBFF;
        border-color: #33BBFF;
    }

    .btn-info .badge {
        color: #33BBFF;
        background-color: #000000;
    }


.btn-light {
    color: #000000;
    background-color: #F2F2F2;
    border-color: #F2F2F2;
}

    .btn-light:hover,
    .btn-light:focus,
    .btn-light:active,
    .btn-light.active,
    .open .dropdown-toggle.btn-light {
        color: #000000;
        background-color: #ccc;
        border-color: #F2F2F2;
    }

    .btn-light:active,
    .btn-light.active,
    .open .dropdown-toggle.btn-light {
        background-image: none;
    }

    .btn-light.disabled,
    .btn-light[disabled],
    fieldset[disabled] .btn-light,
    .btn-light.disabled:hover,
    .btn-light[disabled]:hover,
    fieldset[disabled] .btn-light:hover,
    .btn-light.disabled:focus,
    .btn-light[disabled]:focus,
    fieldset[disabled] .btn-light:focus,
    .btn-light.disabled:active,
    .btn-light[disabled]:active,
    fieldset[disabled] .btn-light:active,
    .btn-light.disabled.active,
    .btn-light[disabled].active,
    fieldset[disabled] .btn-light.active {
        background-color: #F2F2F2;
        border-color: #F2F2F2;
    }

    .btn-light .badge {
        color: #F2F2F2;
        background-color: #000000;
    }

.btn-link {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--skyward-blue);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--blue-500);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--blue-500);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: 0 0 0 #000;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--blue-300);
    text-decoration-thickness: 1px;
}

    .btn-link:hover {
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-color: #00539F;
        text-decoration-thickness: 2px;
        transition: .1s ease-in;
    }



/* ICONS*/
.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    vertical-align: middle;
}

    .material-symbols-rounded.fill {
        font-variation-settings: 'FILL' 1;
    }

.icon-center {
    display: inline-flex !important;
    align-items: center !important;
}

.icon-circle-36 {
    width: 36px;
    height: 36px;
}

button.hoverToWhite:hover img, a.hoverToWhite:hover img, button.hoverToWhite:focus img, a.hoverToWhite:focus img {
    filter: var(--white-f) !important;
}

.btn-icon-sm {
    width: 1.5em;
    height: 1.5em;
    padding: .25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon {
    width: 2.25em;
    height: 2.25em;
    padding: .25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-lg {
    width: 3em;
    height: 3em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-xl {
    width: 3.5em;
    height: 3.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-xxl {
    width: 4.5em;
    height: 4.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Qmlativ Icons */
.icon-q-sm {
    height: 1em;
    width: 1em;
    fill: currentColor;
}

.icon-q-md {
    height: 1.5em;
    width: 1.5em;
    fill: currentColor;
}

.icon-q-lg, .icon-q {
    height: 2em;
    width: 2em;
    fill: currentColor;
}

.icon-q-xl {
    height: 2.5em;
    width: 2.5em;
    fill: currentColor;
}

.icon-q-xxl {
    width: 3em;
    height: 3em;
    fill: currentColor;
}

.icon-q-p-sm, .icon-q-fs-14 {
    width: .9rem;
    height: .9rem;
    fill: currentColor;
    padding-bottom: .05rem;
}

.icon-q-p, .icon-q-fs-17 {
    width: 1.3rem;
    height: 1.3rem;
    fill: currentColor;
    padding-bottom: .1rem;
}

.icon-q-p-lg, .icon-q-fs-20 {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    padding-bottom: .2rem;
}

.icon-q-h-sm, .icon-q-fs-30 {
    width: 2.4rem;
    height: 2.4rem;
    fill: currentColor;
    padding-bottom: .5rem;
}

.icon-q-h, .icon-q-fs-40 {
    width: 2.8rem;
    height: 2.8rem;
    fill: currentColor;
    padding-bottom: .6rem;
}

.icon-q-h-lg, .icon-q-fs-50 {
    width: 3.2rem;
    height: 3.2rem;
    fill: currentColor;
    padding-bottom: .6rem;
}

.icon-q-h-xl, .icon-q-fs-60 {
    width: 3.8rem;
    height: 3.8rem;
    fill: currentColor;
    padding-bottom: .6rem;
}

.icon-q-h-xxl, .icon-q-fs-70 {
    width: 4.8rem;
    height: 4.8rem;
    fill: currentColor;
    padding-bottom: .6rem;
}


/* TYPOGRAPHY */

/* Unset all margins to <H*> tags */
h1, h2, h3, h4, h5 {
    margin: unset;
}

/* Font styles */
.fs-h-xxl {
    font-size: 4.5rem; /* 72 px */
    line-height: 4.8rem; /* 77px */
}

.fs-h-xl {
    font-size: 4rem; /* 64 px */
    line-height: 4.375rem; /* 70 px */
}

.fs-h-lg {
    font-size: 3rem; /* 48 px */
    line-height: 3.4rem; /* 55px */
}

.fs-h {
    font-size: 2.5rem; /* 40 px */
    line-height: 2.8rem; /* 45px */
}

.fs-h-sm {
    font-size: 2rem; /* 32 px */
    line-height: 2.4rem; /* 40px */
}

.fs-p-xl {
    font-size: 1.5rem; /* 24px */
    line-height: 2rem; /* 32px */
}

.fs-p-lg {
    font-size: 1.3rem; /* 20.8 px */
    line-height: 1.75rem; /* 28px */
}

.fs-p {
    font-size: 1.1rem; /* 17.6 px */
    line-height: 1.65rem; /* 26.4px */
}

.fs-p-sm {
    font-size: .88rem; /* 14.08 px */
    line-height: 1.25rem; /* 20px */
}

/* Font sizes */
.fs-14 {
    font-size: .88rem; /* 14.08 px */
    line-height: 1.25rem; /* 20px */
}

.fs-17 {
    font-size: 1.1rem; /* 17.6 px */
    line-height: 1.5rem; /* 24 px */
}

.fs-a {
    font-size: 1.1rem; /* 17.6 px */
    line-height: 1.8rem; /* 24 px */
}

.fs-24 {
    font-size: 1.5rem; /* 24px */
    line-height: 1.875rem; /* 30px */
}

.fs-20 {
    font-size: 1.3rem; /* 20.8 px */
    line-height: 1.5rem; /* 24 px */
}

.fs-30 {
    font-size: 2rem; /* 32 px */
    line-height: 2.4rem; /* 34 px */
}

.fs-40 {
    font-size: 2.5rem; /* 40 px */
    line-height: 2.8rem; /* 45 px */
}

.fs-50 {
    font-size: 3rem; /* 48 px */
    line-height: 3.4rem; /* 55 px */
}

.fs-60 {
    font-size: 4rem; /* 64 px */
    line-height: 4.375rem; /* 70 px */
}

.fs-70 {
    font-size: 4.5rem; /* 72 px */
    line-height: 4.8rem; /* 77 px */
}


/* SPACINGS */

.spacer-xl {
    margin-top: 9.375rem; /* 150px height */
}

.spacer-lg {
    margin-top: 5rem; /* 80px height */
}

.spacer {
    margin-top: 2.5rem; /* 40px height  */
}

.spacer-sm {
    margin-top: 1.875rem; /* 30px height */
}

.spacer-xs {
    margin-top: 0.938rem; /* 15px height */
}

/* Padding spacers */

.spacer-p-xl {
    padding-top: 9.375rem; /* 150px height */
    padding-bottom: 0;
}

.spacer-p-lg {
    padding-top: 5rem; /* 80px height */
    padding-bottom: 0;
}

.spacer-p {
    padding-top: 2.5rem; /* 40px height  */
    padding-bottom: 0;
}

.spacer-p-sm {
    padding-top: 1.875rem; /* 30px height */
    padding-bottom: 0;
}

.spacer-p-xs {
    padding-top: 0.938rem; /* 15px height */
    padding-bottom: 0;
}


/* COLORS */


/* Background Color */

.skyward-blue {
    background-color: #00539F;
}

.qmlativ-blue {
    background-color: #5575B4;
}

.success {
    background-color: #026400;
}

.red-100 {
    background-color: var(--red-100);
}

.red-200 {
    background-color: var(--red-200);
}

.red-300 {
    background-color: var(--red-300);
}

.red-400 {
    background-color: var(--red-400);
}

.red-500 {
    background-color: var(--red-500);
}

.red-600 {
    background-color: var(--red-600);
}

.orange-100 {
    background-color: var(--orange-100);
}

.orange-200 {
    background-color: var(--orange-200);
}

.orange-300 {
    background-color: var(--orange-300);
}

.orange-400 {
    background-color: var(--orange-400);
}

.orange-500 {
    background-color: var(--orange-500);
}

.orange-600 {
    background-color: var(--orange-600);
}

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

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

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

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

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

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

.green-100 {
    background-color: var(--green-100);
}

.green-200 {
    background-color: var(--green-200);
}

.green-300 {
    background-color: var(--green-300);
}

.green-400 {
    background-color: var(--green-400);
}

.green-500 {
    background-color: var(--green-500);
}

.green-600 {
    background-color: var(--teal-600);
}

.teal-100 {
    background-color: var(--teal-100);
}

.teal-200 {
    background-color: var(--teal-200);
}

.teal-300 {
    background-color: var(--teal-300);
}

.teal-400 {
    background-color: var(--teal-400);
}

.teal-500 {
    background-color: var(--teal-500);
}

.teal-600 {
    background-color: var(--teal-600);
}

.blue-100 {
    background-color: var(--blue-100);
}

.blue-200 {
    background-color: var(--blue-200);
}

.blue-300 {
    background-color: var(--blue-300);
}

.blue-400 {
    background-color: var(--blue-400);
}

.blue-500 {
    background-color: var(--blue-500);
}

.blue-600 {
    background-color: var(--blue-600);
}

.purple-100 {
    background-color: var(--purple-100);
}

.purple-200 {
    background-color: var(--purple-200);
}

.purple-300 {
    background-color: var(--purple-300);
}

.purple-400 {
    background-color: var(--purple-400);
}

.purple-500 {
    background-color: var(--purple-500);
}

.purple-600 {
    background-color: var(--purple-600);
}

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

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

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

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

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

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

.brown-100 {
    background-color: var(--brown-100);
}

.brown-200 {
    background-color: var(--brown-200);
}

.brown-300 {
    background-color: var(--brown-300);
}

.brown-400 {
    background-color: var(--brown-400);
}

.brown-500 {
    background-color: var(--brown-500);
}

.brown-600 {
    background-color: var(--brown-600);
}

.grey-100 {
    background-color: var(--grey-100);
}

.grey-200 {
    background-color: var(--grey-200);
}

.grey-300 {
    background-color: var(--grey-300);
}

.grey-400 {
    background-color: var(--grey-400);
}

.grey-500 {
    background-color: var(--grey-500);
}

.grey-600 {
    background-color: var(--grey-600);
}

/* Semantic Colors */
.success {
    background-color: var(--alert-success);
}

.danger {
    background-color: var(--alert-danger);
}

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

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

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

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

/* Gradients */
.bg-gradient-red {
    background: #9FB9FF;
    background: linear-gradient(45deg, rgba(217,170,177, 1) 30%, rgba(240,221,224, 1) 100%);
}

.bg-gradient-orange {
    background: #9FB9FF;
    background: linear-gradient(45deg, rgba(246,194,159, 1) 30%, rgba(251,231,217, 1) 100%);
}

.bg-gradient-blue {
    background: #9FB9FF;
    background: linear-gradient(45deg, rgba(159, 185, 255, 1) 30%, rgba(244,245,249, 1) 100%);
}

.bg-gradient-green {
    background: #B2D8C7;
    background: linear-gradient(45deg, rgba(184,218,197, 1) 30%, rgba(244,245,249, 1) 100%);
}

.bg-gradient-yellow {
    background: #EDCFAC;
    background: linear-gradient(45deg, rgba(254,240,169, 1) 30%, rgba(254,249,220, 1) 100%);
}

.bg-gradient-purple {
    background: #EDCFAC;
    background: linear-gradient(45deg, rgba(206,171,221, 1) 30%, rgba(235,221,241, 1) 100%);
}

.bg-gradient-purple {
    background: #EDCFAC;
    background: linear-gradient(45deg, rgba(206,171,221, 1) 30%, rgba(235,221,241, 1) 100%);
}

.bg-gradient-pink {
    background: #EDCFAC;
    background: linear-gradient(45deg, rgba(223,175,194, 1) 30%, rgba(242,223,231, 1) 100%);
}

.bg-gradient-brown {
    background: #EDCFAC;
    background: linear-gradient(45deg, rgba(170,159,138, 1) 30%, rgba(221,217,208, 1) 100%);
}

.bg-gradient-black {
    background: #EDCFAC;
    background: linear-gradient(45deg, rgba(42,42,42, 1) 30%, rgba(85,85,85, 1) 100%);
}

.bg-gradient-grey {
    background: #EDCFAC;
    background: linear-gradient(45deg, rgba(204,204,204, 1) 30%, rgba(242,242,242, 1) 100%);
}




/* Text */

/* Semantics */
.text-skyward-blue {
    color: var(--skyward-blue);
}

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

.text-danger {
    color: var(--alert-danger);
}

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

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

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

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

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

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


.text-red-100 {
    color: var(--red-100);
}

.text-red-200 {
    color: var(--red-200);
}

.text-red-300 {
    color: var(--red-300);
}

.text-red-400 {
    color: var(--red-400);
}

.text-red-500, .text-red {
    color: var(--red-500);
}

.text-red-600 {
    color: var(--red-600);
}

.text-orange-100 {
    color: var(--orange-100);
}

.text-orange-200 {
    color: var(--orange-200);
}

.text-orange-300 {
    color: var(--orange-300);
}

.text-orange-400 {
    color: var(--orange-400);
}

.text-orange-500, .text-orange {
    color: var(--orange-500);
}

.text-orange-600 {
    color: var(--orange-600);
}

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

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

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

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

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

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

.text-green-100 {
    color: var(--green-100);
}

.text-green-200 {
    color: var(--green-200);
}

.text-green-300 {
    color: var(--green-300);
}

.text-green-400 {
    color: var(--green-400);
}

.text-green-500, .text-green {
    color: var(--green-500);
}

.text-green-600 {
    color: var(--green-600);
}

.text-teal-100 {
    color: var(--teal-100);
}

.text-teal-200 {
    color: var(--teal-200);
}

.text-teal-300 {
    color: var(--teal-300);
}

.text-teal-400 {
    color: var(--teal-400);
}

.text-teal-500, .text-teal {
    color: var(--teal-500);
}

.text-teal-600 {
    color: var(--teal-600);
}

.text-blue-100 {
    color: var(--blue-100);
}

.text-blue-200 {
    color: var(--blue-200);
}

.text-blue-300 {
    color: var(--blue-300);
}

.text-blue-400 {
    color: var(--blue-400);
}

.text-blue-500, .text-blue {
    color: var(--blue-500);
}

.text-blue-600 {
    color: var(--blue-600);
}

.text-purple-100 {
    color: var(--purple-100);
}

.text-purple-200 {
    color: var(--purple-200);
}

.text-purple-300 {
    color: var(--purple-300);
}

.text-purple-400 {
    color: var(--purple-400);
}

.text-purple-500, .text-purple {
    color: var(--purple-500);
}

.text-purple-600 {
    color: var(--purple-600);
}

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

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

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

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

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

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

.text-brown-100 {
    color: var(--brown-100);
}

.text-brown-200 {
    color: var(--brown-200);
}

.text-brown-300 {
    color: var(--brown-300);
}

.text-brown-400 {
    color: var(--brown-400);
}

.text-brown-500, .text-brown {
    color: var(--brown-500);
}

.text-brown-600 {
    color: var(--brown-600);
}

.text-grey-100 {
    color: var(--grey-100);
}

.text-grey-200 {
    color: var(--grey-200);
}

.text-grey-300 {
    color: var(--grey-300);
}

.text-grey-400 {
    color: var(--grey-400);
}

.text-grey-500, .text-grey {
    color: var(--grey-500);
}

.text-grey-600 {
    color: var(--grey-600);
}


/* Force text colors with CSS Filter */
.skyward-blue-f {
    filter: var(--skyward-blue-f);
}

.success-f {
    filter: var(--alert-success-f);
}

.danger-f {
    filter: var(--alert-danger-f);
}

.warning-f {
    filter: var(--alert-warning-f);
}

.info-f {
    filter: var(--alert-info-f);
}

.light-f {
    filter: var(--green-300-f);
}

.dark-f {
    filter: var(--grey-600-f);
}

.white-f {
    filter: var(--white-f);
}

.black-f {
    filter: var(--black-f);
}


.red-100-f {
    filter: var(--red-100-f);
}

.red-200-f {
    filter: var(--red-200-f);
}

.red-300-f {
    filter: var(--red-300-f);
}

.red-400-f {
    filter: var(--red-400-f);
}

.red-500-f, .red-f {
    filter: var(--red-500-f);
}

.red-600-f {
    filter: var(--red-600-f);
}

.orange-100-f {
    filter: var(--orange-100-f);
}

.orange-200-f {
    filter: var(--orange-200-f);
}

.orange-300-f {
    filter: var(--orange-300-f);
}

.orange-400-f {
    filter: var(--orange-400-f);
}

.orange-500-f, .orange-f {
    filter: var(--orange-500-f);
}

.orange-600-f {
    filter: var(--orange-600-f);
}

.yellow-100-f {
    filter: var(--yellow-100-f);
}

.yellow-200-f {
    filter: var(--yellow-200-f);
}

.yellow-300-f {
    filter: var(--yellow-300-f);
}

.yellow-400-f {
    filter: var(--yellow-400-f);
}

.yellow-500-f, .yellow-f {
    filter: var(--yellow-500-f);
}

.yellow-600-f {
    filter: var(--yellow-600-f);
}

.green-100-f {
    filter: var(--green-100-f);
}

.green-200-f {
    filter: var(--green-200-f);
}

.green-300-f {
    filter: var(--green-300-f);
}

.green-400-f {
    filter: var(--green-400-f);
}

.green-500-f, .green-f {
    filter: var(--green-500-f);
}

.green-600-f {
    filter: var(--green-600-f);
}

.teal-100-f {
    filter: var(--teal-100-f);
}

.teal-200-f {
    filter: var(--teal-200-f);
}

.teal-300-f {
    filter: var(--teal-300-f);
}

.teal-400-f {
    filter: var(--teal-400-f);
}

.teal-500-f, .teal-f {
    filter: var(--teal-500-f);
}

.teal-600-f {
    filter: var(--teal-600-f);
}

.blue-100-f {
    filter: var(--blue-100-f);
}

.blue-200-f {
    filter: var(--blue-200-f);
}

.blue-300-f {
    filter: var(--blue-300-f);
}

.blue-400-f {
    filter: var(--blue-400-f);
}

.blue-500-f, .blue-f {
    filter: var(--blue-500-f);
}

.blue-600-f {
    filter: var(--blue-600-f);
}

.purple-100-f {
    filter: var(--purple-100-f);
}

.purple-200-f {
    filter: var(--purple-200-f);
}

.purple-300-f {
    filter: var(--purple-300-f);
}

.purple-400-f {
    filter: var(--purple-400-f);
}

.purple-500-f, .purple-f {
    filter: var(--purple-500-f);
}

.purple-600-f {
    filter: var(--purple-600-f);
}

.pink-100-f {
    filter: var(--pink-100-f);
}

.pink-200-f {
    filter: var(--pink-200-f);
}

.pink-300-f {
    filter: var(--pink300-f);
}

.pink-400-f {
    filter: var(--pink-400-f);
}

.pink-500-f, .pink-f {
    filter: var(--pink-500-f);
}

.pink-600-f {
    filter: var(--pink-600-f);
}

.brown-100-f {
    filter: var(--brown-100-f);
}

.brown-200-f {
    filter: var(--brown-200-f);
}

.brown-300-f {
    filter: var(--brown-300-f);
}

.brown-400-f {
    filter: var(--brown-400-f);
}

.brown-500-f, .brown-f {
    filter: var(--brown-500-f);
}

.brown-600-f {
    filter: var(--brown-600-f);
}

.grey-100-f {
    filter: var(--grey-100-f);
}

.grey-200-f {
    filter: var(--grey-200-f);
}

.grey-300-f {
    filter: var(--grey-300-f);
}

.grey-400-f {
    filter: var(--grey-400-f);
}

.grey-500-f, .grey-f {
    filter: var(--grey-500-f);
}

.grey-600-f {
    filter: var(--grey-600-f);
}



@media (max-width: 575.98px) { /* MOBILE VIEW */

    /* TYPOGRAPHY */

    /* Font styles */
    .fs-h-xxl {
        font-size: 3.25rem; /* 52 px */
        line-height: 3.4rem; /* 55 px */
    }

    .fs-h-xl {
        font-size: 3rem; /* 48 px */
        line-height: 3.4rem; /* 55 px */
    }

    .fs-h-lg {
        font-size: 2.5rem; /* 40 px */
        line-height: 2.8rem; /* 45 px */
    }

    .fs-h {
        font-size: 2.25rem; /* 36 px */
        line-height: 2.5rem; /* 40 px */
    }


    /* NAVIGATION */
    /* Expand Mega Menu to 100% */
    .nav-item.dropdown.dropdown-mega .dropdown-menu {
        width: 100%;
        top: auto;
        /* left: 5%; */ /* If width is less than 100% */
    }
}


@media (max-width: 991.98px) { /* TABLIE VIEW */

    /* NAVIGATION */
    /* Expand Mega Menu to 100% */
    .nav-item.dropdown.dropdown-mega .dropdown-menu {
        width: 100%;
        top: auto;
        /* left: 5%;*/ /* If width is less than 100% */
    }

    /* Breadcrumb */

    /* Only show the last two items of the breadcrumb on mobile */
    li.breadcrumb-item:nth-last-child(n + 3) {
        display: none;
    }

    /* Show dots at the start of breadcrumb on mobile */
    li.breadcrumb-item:nth-last-child(n + 2)::before {
        content: "... /" !important;
    }
}


/** COMPONENTS **/

/* Callouts */
/* Extend & requires Boostrap's alert component */
.callout {
    border-radius: 0 !important;
    border: 0 !important;
    border-left: .25rem solid !important;
}

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

    .callout.alert-danger {
        border-color: var(--alert-danger) !important;
    }

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

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

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

    .callout.alert-dark {
        border-color: var(--alert-dark) !important;
    }

/* Profile Color Badges */
.profile-sm img {
    width: 50px;
    height: 50px;
}

.profile img {
    width: 100px;
    height: 100px;
}

.profile-lg img {
    width: 150px;
    height: 150px;
}

.profile div, .profile-sm div, .profile-lg div {
    display: inline-block;
}

.overlap div {
    margin-left: -1.5rem;
}

.profile-sm.overlap div {
    margin-left: -1rem;
}

.profile-lg.overlap div {
    margin-left: -2rem;
}


/** MISC UI **/

/* Horizontal Rules */
hr {
    margin: 0;
}

    hr.thick {
        border-top: 2px solid;
    }

    hr.black {
        border-color: #000;
        opacity: 1;
    }

    hr.dashed {
        border-style: dashed;
    }

/* Grid */
.container-max-width {
    max-width: 1592px;
}

/* Simple list */
ul.clean {
    list-style-type: none;
}

.list-group-clean .list-group-item {
    border: 0;
    padding-left: 0;
    padding-top: .15rem;
    border-radius: 0;
    background-color: transparent;
}