/* -------------------- CRS STYLE GUIDE V.3 -------------------- */



/* ---------- Index ---------- */
/* 
    1. Intro
    2. Imports
    3. Colors
    4. Fonts
    5. Alignment
    6. Borders
    7. Card
    8. Buttons
    9. Sizing
   10. Flex
   11. Overflow
   12. Forms
   13. Page Sections
   14. Bullets
   15. Checkboxes
   16. Chat button
   17. Form Error Messages

 */
/* --------------------------- */



/* ---------- 1 - Intro ---------- */
/*  
 - Bootsrap V. 3.4.1 (Power Pages Default) https://getbootstrap.com/docs/3.4/
 - Media Queries we use (Bootstrap V. 3.4.1 https://getbootstrap.com/docs/3.4/css/#grid-media-queries): {

        Extra small devices (phones, less than 768px)
        No media query since this is the default in Bootstrap

        Small devices (tablets, 768px and up)
        @media (min-width: @screen-sm-min/768px) { ... }

        Medium devices (desktops, 992px and up)
        @media (min-width: @screen-md-min/992px) { ... }

        Large devices (large desktops, 1200px and up)
        @media (min-width: @screen-lg-min/1200px) { ... }

    }

 - For adding new classes {
    1. Styles should be Mobile first (See media Queries, IE. 4. Fonts).
    2. Use BEM Methodology (https://css-tricks.com/bem-101/).
    3. Added classes will be global.
    }

 - YOU CAN ONLY MODIFY THE CSS FILES THAT START WITH CRS.


 */
/* --------------------------------- */



/* ---------- 2 - Imports ---------- */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/* --------------------------------- */



/* ---------- 3 - Colors ---------- */

:root {
    --color_primary: #212844;
    --color_secondary: #1F3249;
    --color_accent: #00bdf2;
    --color_blue: #7C98AC;
    --color_gray: #D2D0CE;
    --color_black: #231F20;
    --color_white: #FFFFFF;
    --color_shade: #DBE2EA;
    --color_tint: #EBF4F8;
    --color_warning: #F2AC57;
    --color_success: #14A38B;
    --color_cyan: #50B6D5;
    --color_cloud: #F9F9F8;
    --color_sky: #80BEDA;
    --color_lightAccent: #FAECED;
    --color_lightWarning: #FDF1E2;
}

.bg--primary {
    background: var(--color_primary) 0% 0% no-repeat padding-box;
}

.bg--secondary {
    background: var(--color_secondary) 0% 0% no-repeat padding-box;
}

.bg--accent {
    background: var(--color_accent) 0% 0% no-repeat padding-box;
}

.bg--blue {
    background: var(--color_blue) 0% 0% no-repeat padding-box;
}

.bg--gray {
    background: var(--color_gray) 0% 0% no-repeat padding-box;
}

.bg--black {
    background: var(--color_black) 0% 0% no-repeat padding-box;
}

.bg--white {
    background: var(--color_white) 0% 0% no-repeat padding-box;
}

.bg--shade {
    background: var(--color_shade) 0% 0% no-repeat padding-box;
}

.bg--tint {
    background: var(--color_tint) 0% 0% no-repeat padding-box;
}

.bg--warning {
    background: var(--color_warning) 0% 0% no-repeat padding-box;
}

.bg--success {
    background: var(--color_success) 0% 0% no-repeat padding-box;
}

.bg--cyan {
    background: var(--color_cyan) 0% 0% no-repeat padding-box;
}

.bg--cloud {
    background: var(--color_cloud) 0% 0% no-repeat padding-box;
}

.bg--sky {
    background: var(--color_sky) 0% 0% no-repeat padding-box;
}

.bg--lightAccent {
    background: var(--color_lightAccent) 0% 0% no-repeat padding-box;
}

.bg--lightWarning {
    background: var(--color_lightWarning) 0% 0% no-repeat padding-box;
}

.color--primary {
    color: var(--color_primary) !important;
}

.color--accent {
    color: var(--color_accent) !important;
}

.color--blue {
    color: var(--color_blue) !important;
}

.color--gray {
    color: var(--color_gray) !important;
}

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

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

.color--shade {
    color: var(--color_shade) !important;
}

.color--tint {
    color: var(--color_tint) !important;
}

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

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

.color--cyan {
    color: var(--color_cyan) !important;
}

.color--cloud {
    color: var(--color_cloud) !important;
}

.color--sky {
    color: var(--color_sky) !important;
}

.color--lightAccent {
    color: var(--color_lightAccent) !important;
}

.color--lightWarning {
    color: var(--color_lightWarning) !important;
}

.icon--primary {
    fill: var(--color_primary);
}

.icon--accent {
    fill: var(--color_accent);
}

.icon--blue {
    fill: var(--color_blue);
}

.icon--gray {
    fill: var(--color_gray);
}

.icon--black {
    fill: var(--color_black);
}

.icon--white {
    fill: var(--color_white);
}

.icon--shade {
    fill: var(--color_shade);
}

.icon--tint {
    fill: var(--color_tint);
}

.icon--warning {
    fill: var(--color_warning);
}

.icon--success {
    fill: var(--color_success);
}

.icon--cyan {
    fill: var(--color_cyan);
}

.icon--cloud {
    fill: var(--color_cloud);
}

.icon--sky {
    fill: var(--color_sky);
}

.icon--lightAccent {
    fill: var(--color_lightAccent);
}

.icon--lightWarning {
    fill: var(--color_lightWarning);
}

.shadow {
    box-shadow: 0px 16px 56px #2C273814;
}

/* ---------------------------------------- */



/* ---------- 4 - Fonts ---------- */

a,
h1,
h2,
h3,
h4,
h5,
h6,
p,
label,
span,
button,
input,
th,
td,
li {
    font-family: 'Work Sans', sans-serif !important;
}

span.fa {
    font-family: 'Glyphicons Halflings' !important;
}

span.glyphicon {
    font-family: 'Glyphicons Halflings' !important;
}

/* Heading X1 */
h1,
.h1 {
    font-size: 26px !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 300;
    margin: 0;
}

/* Heading X2 */
h2,
.h2 {
    font-size: 22px !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 700;
    margin: 0;
}

/* Heading X3 */
h3,
.h3 {
    font-size: 20px !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 600;
    margin: 0;
}

/* Heading X4 */
h4,
.h4 {
    font-size: 18px !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 600;
    margin: 0;
}

/* Heading X5 */
h5,
.h5 {
    font-size: 18px !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    margin: 0;
}

/* Heading X6 */
h6,
.h6 {
    font-size: 17px !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 600;
    margin: 0;
}

/* Paragraph X1 */
p,
.p {
    font-size: 16px !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    margin: 0;
}

/* Paragraph x2 */
p.p-x2,
.p-x2 {
    font-size: 18px !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 600;
    margin: 0;
}

/* Paragraph sm */
p.smallText,
.smallText {
    display: block !important;
    font-size: 14px !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
}

/* Label X1*/
label,
.label-x1 {
    font-size: 14px !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    margin: 0;
}

/* Label X2*/
.label-x2 {
    font-size: 12px !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    margin: 0;
}

/* List Item */
ul li,
li,
.li {
    font-size: 14px !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 24px;
    margin-inline-start: 25px;

}

/* Multi step form list */
.progress.list-group .list-group-item {
    margin-inline-start: 0px;
}

/* Navigation list */
ul.nav.navbar-nav.weblinks li.weblink.dropdown,
ul.nav.navbar-nav.weblinks li.divider-vertical,
ul.dropdown-menu li {
    margin-inline-start: 0px;
}

ul.dropdown-menu li a {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet */
@media (min-width: 768px) {

    /* Heading X1 */
    h1,
    .h1 {
        font-size: 56px !important;
        font-style: normal;
        font-variant: normal;
        font-weight: 300;
    }

    /* Heading X2 */
    h2,
    .h2 {
        font-size: 32px !important;
        font-style: normal;
        font-variant: normal;
        font-weight: 700;
    }

    /* Heading X3 */
    h3,
    .h3 {
        font-size: 24px !important;
        font-style: normal;
        font-variant: normal;
        font-weight: 600;
    }

    /* Heading X4 */
    h4,
    .h4 {
        font-size: 22px !important;
        font-style: normal;
        font-variant: normal;
        font-weight: 600;
    }

    /* Heading X5 */
    h5,
    .h5 {
        font-size: 22px !important;
        font-style: normal;
        font-variant: normal;
        font-weight: 500;
    }

    /* Heading X6 */
    h6,
    .h6 {
        font-size: 20px !important;
        font-style: normal;
        font-variant: normal;
        font-weight: 600;
    }

    /* Paragraph X1 */
    p,
    .p {
        font-size: 16px !important;
        font-style: normal;
        font-variant: normal;
        font-weight: 400;
    }

    /* Paragraph x2 */
    p.p-lg,
    .p-lg {
        font-size: 18px !important;
        font-style: normal;
        font-variant: normal;
        font-weight: 600;
    }

    /* Label X1*/
    label,
    .label-x1 {
        font-size: 14px !important;
        font-style: normal;
        font-variant: normal;
        font-weight: 400;
    }

    /* Label X2*/
    .label-x2 {
        font-style: normal;
        font-variant: normal;
        font-weight: 400;
    }

    /* List Item */
    ul li,
    li,
    .li {
        font-size: 16px !important;
        font-style: normal;
        font-variant: normal;
        font-weight: 400;
        line-height: 24px;
        margin-inline-start: 35px;
    }

    /* Datepicker */
    .bootstrap-datetimepicker-widget li {
        margin-inline-start: 0 !important;
    }
}


/* Weight */

.fw-light {
    font-weight: 300 !important;
}

.fw-normal {
    font-weight: 400 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.fw-extrabold {
    font-weight: 800 !important;
}

/* Style */

.fst-italic {
    font-style: italic !important;
}

/* --------------------------------------- */



/* ---------- 5 - Alignment ---------- */


.text-start {
    text-align: start;
}

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

.text-end {
    text-align: end;
}

/* Tablet */
@media (min-width: 768px) {

    .text-sm-start {
        text-align: start;
    }

    .text-sm-center {
        text-align: center;
    }

    .text-sm-end {
        text-align: end;
    }
}

/* Laptop */
@media (min-width: 992px) {

    .text-md-start {
        text-align: start;
    }

    .text-md-center {
        text-align: center;
    }

    .text-md-end {
        text-align: end;
    }
}

/* Desktop */
@media (min-width: 1200px) {

    .text-lg-start {
        text-align: start;
    }

    .text-lg-center {
        text-align: center;
    }

    .text-lg-end {
        text-align: end;
    }
}

/* ------------------------------------------- */



/* ---------- 6 - Borders ---------- */


.border--primary {
    border: 1px solid var(--color_primary);
}

.border-top--primary {
    border-top: 1px solid var(--color_primary);
}

.border-bottom--primary {
    border-bottom: 1px solid var(--color_primary);
}

.border-inline--primary {
    border-inline: 1px solid var(--color_primary);
}

.border-block--primary {
    border-block: 1px solid var(--color_primary);
}

.border--accent {
    border: 1px solid var(--color_accent);
}

.border-top--accent {
    border-top: 1px solid var(--color_accent);
}

.border-bottom--accent {
    border-bottom: 1px solid var(--color_accent);
}

.border-inline--accent {
    border-inline: 1px solid var(--color_accent);
}

.border-block--accent {
    border-block: 1px solid var(--color_accent);
}

.border--blue {
    border: 1px solid var(--color_blue);
}

.border-top--blue {
    border-top: 1px solid var(--color_blue);
}

.border-bottom--blue {
    border-bottom: 1px solid var(--color_blue);
}

.border-inline--blue {
    border-inline: 1px solid var(--color_blue);
}

.border-block--blue {
    border-block: 1px solid var(--color_blue);
}

.border--gray {
    border: 1px solid var(--color_gray);
}

.border-top--gray {
    border-top: 1px solid var(--color_gray);
}

.border-bottom--gray {
    border-bottom: 1px solid var(--color_gray);
}

.border-inline--gray {
    border-inline: 1px solid var(--color_gray);
}

.border-block--gray {
    border-block: 1px solid var(--color_gray);
}

.border--black {
    border: 1px solid var(--color_black);
}

.border-top--black {
    border-top: 1px solid var(--color_black);
}

.border-bottom--black {
    border-bottom: 1px solid var(--color_black);
}

.border-inline--black {
    border-inline: 1px solid var(--color_black);
}

.border-block--black {
    border-block: 1px solid var(--color_black);
}

.border--white {
    border: 1px solid var(--color_white);
}

.border-top--white {
    border-top: 1px solid var(--color_white);
}

.border-bottom--white {
    border-bottom: 1px solid var(--color_white);
}

.border-inline--white {
    border-inline: 1px solid var(--color_white);
}

.border-block--white {
    border-block: 1px solid var(--color_white);
}

.border--shade {
    border: 1px solid var(--color_shade);
}

.border-top--shade {
    border-top: 1px solid var(--color_shade);
}

.border-bottom--shade {
    border-bottom: 1px solid var(--color_shade);
}

.border-inline--shade {
    border-inline: 1px solid var(--color_shade);
}

.border-block--shade {
    border-block: 1px solid var(--color_shade);
}

.border--tint {
    border: 1px solid var(--color_tint);
}

.border-top--tint {
    border-top: 1px solid var(--color_tint);
}

.border-bottom--tint {
    border-bottom: 1px solid var(--color_tint);
}

.border-inline--tint {
    border-inline: 1px solid var(--color_tint);
}

.border-block--tint {
    border-block: 1px solid var(--color_tint);
}

.border--warning {
    border: 1px solid var(--color_warning);
}

.border-top--warning {
    border-top: 1px solid var(--color_warning);
}

.border-bottom--warning {
    border-bottom: 1px solid var(--color_warning);
}

.border-inline--warning {
    border-inline: 1px solid var(--color_warning);
}

.border-block--warning {
    border-block: 1px solid var(--color_warning);
}

.border--success {
    border: 1px solid var(--color_success);
}

.border-top--success {
    border-top: 1px solid var(--color_success);
}

.border-bottom--success {
    border-bottom: 1px solid var(--color_success);
}

.border-inline--success {
    border-inline: 1px solid var(--color_success);
}

.border-block--success {
    border-block: 1px solid var(--color_success);
}

.border--cyan {
    border: 1px solid var(--color_cyan);
}

.border-top--cyan {
    border-top: 1px solid var(--color_cyan);
}

.border-bottom--cyan {
    border-bottom: 1px solid var(--color_cyan);
}

.border-inline--cyan {
    border-inline: 1px solid var(--color_cyan);
}

.border-block--cyan {
    border-block: 1px solid var(--color_cyan);
}

.border--cloud {
    border: 1px solid var(--color_cloud);
}

.border-top--cloud {
    border-top: 1px solid var(--color_cloud);
}

.border-bottom--cloud {
    border-bottom: 1px solid var(--color_cloud);
}

.border-inline--cloud {
    border-inline: 1px solid var(--color_cloud);
}

.border-block--cloud {
    border-block: 1px solid var(--color_cloud);
}

.border--sky {
    border: 1px solid var(--color_sky);
}

.border-top--sky {
    border-top: 1px solid var(--color_sky);
}

.border-bottom--sky {
    border-bottom: 1px solid var(--color_sky);
}

.border-inline--sky {
    border-inline: 1px solid var(--color_sky);
}

.border-block--sky {
    border-block: 1px solid var(--color_sky);
}

.border--lightAccent {
    border: 1px solid var(--color_lightAccent);
}

.border-top--lightAccent {
    border-top: 1px solid var(--color_lightAccent);
}

.border-bottom--lightAccent {
    border-bottom: 1px solid var(--color_lightAccent);
}

.border-inline--lightAccent {
    border-inline: 1px solid var(--color_lightAccent);
}

.border-block--lightAccent {
    border-block: 1px solid var(--color_lightAccent);
}

.border--lightWarning {
    border: 1px solid var(--color_lightWarning);
}

.border-top--lightWarning {
    border-top: 1px solid var(--color_lightWarning);
}

.border-bottom--lightWarning {
    border-bottom: 1px solid var(--color_lightWarning);
}

.border-inline--lightWarning {
    border-inline: 1px solid var(--color_lightWarning);
}

.border-block--lightWarning {
    border-block: 1px solid var(--color_lightWarning);
}


/* ----------------------------------------- */



/* ---------- 7 - Card ---------- */

.card {
    border: none;
    border-radius: 24px;
    box-shadow: 0px 15px 48px #2C273812;
    padding: 16px;
}


/* -------------------------------------- */


/* ---------- 8 - Buttons ---------- */

.btn--solid,
.btn-primary {
    align-items: center;
    border: unset;
    border-radius: 24px;
    color: var(--color_white);
    display: flex;
    font-size: 16px;
    font-weight: 600;
    height: 48px;
    justify-content: center;
    line-height: 16px;
    margin-inline: 10px;
    min-width: 228px;
    padding-inline: 20px;
    width: fit-content;
    cursor: pointer;
}

.btn-primary {
    border-radius: 24px !important;
    color: var(--color_white) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.btn-secondary--solid {
    align-items: center;
    border: unset;
    border-radius: 24px;
    color: var(--color_white);
    display: flex;
    font-size: 14px;
    font-weight: 500;
    height: 34px;
    justify-content: center;
    line-height: 16px;
    margin-inline: 10px;
    min-width: 165px;
    padding-inline: 24px;
    width: fit-content;
}

/* Default State */
.solid--primary {
    background-color: var(--color_primary);
}

.solid--secondary {
    background-color: var(--color_secondary);
}

.solid--accent {
    background-color: var(--color_accent);
}

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

.solid--gray {
    background-color: var(--color_gray);
    color: var(--color_primary);
}

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

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

.solid--shade {
    background-color: var(--color_shade);
    color: var(--color_primary);
}

.solid--tint {
    background-color: var(--color_tint);
    color: var(--color_primary);
}

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

.solid--success {
    background-color: var(--color_success);
}

.solid--cyan {
    background-color: var(--color_cyan);
}

/* Hover */

.solid--primary:hover,
.solid--primary:active {
    background-color: var(--color_accent);
    box-shadow: none !important;
    color: var(--color_white);
}

.solid--accent:hover,
.solid--accent:active {
    background-color: var(--color_primary);
    box-shadow: 0px 4px 28px #2C27384D;
    color: var(--color_accent);
}

.solid--blue:hover,
.solid--blue:active {
    background-color: var(--color_primary);
    box-shadow: 0px 4px 28px #2C27384D;
    color: var(--color_white);
}

.solid--gray:hover,
.solid--gray:active {
    background-color: var(--color_primary);
    box-shadow: 0px 4px 28px #2C27384D;
    color: var(--color_white);
}

.solid--black:hover,
.solid--black:active {
    background-color: var(--color_black);
    box-shadow: 0px 4px 28px #2C27384D;
    color: var(--color_white);
}

.solid--white:hover,
.solid--white:active {
    background-color: var(--color_primary);
    box-shadow: 0px 4px 28px #2C27384D;
    color: var(--color_white);
}

.solid--shade:hover,
.solid--shade:active {
    background-color: var(--color_primary);
    box-shadow: 0px 4px 28px #2C27384D;
    color: var(--color_shade);
}

.solid--tint:hover,
.solid--tint:active {
    background-color: var(--color_primary);
    box-shadow: 0px 4px 28px #2C27384D;
    color: var(--color_tint);
}


.solid--warning:hover,
.solid--warning:active {
    background-color: var(--color_white);
    box-shadow: 0px 4px 28px #2C27384D;
    color: var(--color_warning);
}

.solid--success:hover,
.solid--success:active {
    background-color: var(--color_white);
    box-shadow: 0px 4px 28px #2C27384D;
    color: var(--color_success);
}


.solid--cyan:hover,
.solid--cyan:active {
    background-color: var(--color_white);
    box-shadow: 0px 4px 28px #2C27384D;
    color: var(--color_cyan);
}

/* Hover Icon Tint */

.btn--solid:hover svg,
.btn-secondary--solid:hover svg {
    fill: var(--color_white);
}

.solid--accent:hover svg {
    fill: var(--color_accent);
}


.solid--shade:hover svg {
    fill: var(--color_shade);
}

.solid--tint:hover svg {
    fill: var(--color_tint);
}

.solid--warning:hover svg {
    fill: var(--color_warning);
}

.solid--success:hover svg {
    fill: var(--color_success);
}

.solid--cyan:hover svg {
    fill: var(--color_cyan);
}

.btn--outline {
    align-items: center;
    background-color: transparent;
    border-radius: 24px;
    color: var(--color_primary);
    display: flex;
    font-size: 16px;
    font-weight: 600;
    height: 48px;
    justify-content: center;
    line-height: 16px;
    margin-inline: 10px;
    min-width: 228px;
    padding-inline: 20px;
    width: fit-content;
}

.btn-secondary--outline {
    align-items: center;
    background-color: transparent;
    border-radius: 24px;
    color: var(--color_primary);
    display: flex;
    font-size: 14px;
    font-weight: 600;
    height: 35px;
    justify-content: center;
    line-height: 16px;
    margin-inline: 10px;
    min-width: 165px;
    padding-inline: 24px;
    width: fit-content;
}

/* Default State */
.outline--primary {
    border: 2px solid var(--color_primary);
    color: var(--color_primary);
}

.outline--accent {
    border: 2px solid var(--color_accent);
    color: var(--color_accent);
}

.outline--accent-colorless {
    border: 2px solid var(--color_accent);
}

.outline--blue {
    border: 2px solid var(--color_blue);
    color: var(--color_blue);
}

.outline--gray {
    border: 2px solid var(--color_gray);
    color: var(--color_gray);
}

.outline--black {
    border: 2px solid var(--color_black);
    color: var(--color_black);
}

.outline--white {
    border: 2px solid var(--color_white);
    color: var(--color_white);
}

.outline--shade {
    border: 2px solid var(--color_shade);
    color: var(--color_shade);
}

.outline--tint {
    border: 2px solid var(--color_tint);
    color: var(--color_tint);
}

.outline--warning {
    border: 2px solid var(--color_warning);
    color: var(--color_warning);
}

.outline--success {
    border: 2px solid var(--color_success);
    color: var(--color_success);
}

.outline--cyan {
    border: 2px solid var(--color_cyan);
    color: var(--color_cyan);
}

/* Hover */
.outline--primary:hover,
.outline--primary:active {
    background-color: var(--color_primary);
    border: 2px solid var(--color_primary);
    color: var(--color_white);
}

.outline--accent:hover,
.outline--accent:active,
.outline--accent-colorless:hover,
.outline--accent-colorless:active {
    background-color: var(--color_accent);
    border: 2px solid var(--color_accent);
    color: var(--color_primary);
}

.outline--accent-colorless:hover svg,
.outline--accent-colorless:active svg {
    fill: var(--color_accent) !important;
}

.outline--blue:hover,
.outline--blue:active {
    background-color: var(--color_blue);
    border: 2px solid var(--color_blue);
    color: var(--color_white);
}

.outline--gray:hover,
.outline--gray:active {
    background-color: var(--color_gray);
    border: 2px solid var(--color_gray);
    color: var(--color_white);
}

.outline--black:hover,
.outline--black:active {
    background-color: var(--color_black);
    border: 2px solid var(--color_black);
    color: var(--color_white);
}

.outline--white:hover,
.outline--white:active {
    background-color: var(--color_white);
    border: 2px solid var(--color_white);
    color: var(--color_black);
}

.outline--shade:hover,
.outline--shade:active {
    background-color: var(--color_shade);
    border: 2px solid var(--color_shade);
    color: var(--color_black);
}

.outline--tint:hover,
.outline--tint:active {
    background-color: var(--color_tint);
    border: 2px solid var(--color_tint);
    color: var(--color_black);
}

.outline--warning:hover,
.outline--warning:active {
    background-color: var(--color_warning);
    border: 2px solid var(--color_warning);
    color: var(--color_white);
}

.outline--success:hover,
.outline--success:active {
    background-color: var(--color_success);
    border: 2px solid var(--color_success);
    color: var(--color_white);
}

.outline--cyan:hover,
.outline--cyan:active {
    background-color: var(--color_cyan);
    border: 2px solid var(--color_cyan);
    color: var(--color_white);
}

/* Hover Icon Tint */

.btn--outline:hover svg,
.btn-secondary--outline:hover svg {
    fill: var(--color_white);
}

.outline--white:hover svg,
.outline--shade:hover svg,
.outline--tint:hover svg {
    fill: var(--color_black);
}

.btn__icon--start {
    margin-inline-end: 10px;
}

.btn__icon--end {
    margin-inline-start: 10px;
}

.btn--solid:disabled {
    background-color: var(--color_gray) !important;
    color: #4A5461 !important;
}

/* -------------------------------------------- */



/* ---------- 9 - Sizing ---------- */


.h-100 {
    height: 100%;
}

.h-75 {
    height: 75%;
}

.h-50 {
    height: 50%;
}

.h-25 {
    height: 25%;
}

.h-auto {
    height: auto;
}

.w-100 {
    width: 100%;
}

.w-75 {
    width: 75%;
}

.w-50 {
    width: 50%;
}

.w-25 {
    width: 25%;
}

.w-auto {
    width: auto;
}

/* Tablet */
@media (min-width: 768px) {

    .h-sm-100 {
        height: 100%;
    }

    .h-sm-75 {
        height: 75%;
    }

    .h-sm-50 {
        height: 50%;
    }

    .h-sm-25 {
        height: 25%;
    }

    .h-sm-auto {
        height: auto;
    }

    .w-sm-100 {
        width: 100%;
    }

    .w-sm-75 {
        width: 75%;
    }

    .w-sm-50 {
        width: 50%;
    }

    .w-sm-25 {
        width: 25%;
    }

    .w-sm-auto {
        width: auto;
    }

}

/* Desktop */
@media (min-width: 992px) {

    .h-md-100 {
        height: 100%;
    }

    .h-md-75 {
        height: 75%;
    }

    .h-md-50 {
        height: 50%;
    }

    .h-md-25 {
        height: 25%;
    }

    .h-md-auto {
        height: auto;
    }

    .w-md-100 {
        width: 100%;
    }

    .w-md-75 {
        width: 75%;
    }

    .w-md-50 {
        width: 50%;
    }

    .w-md-25 {
        width: 25%;
    }

    .w-md-auto {
        width: auto;
    }
}

/* Large Desktop */
@media (min-width: 1200px) {

    .h-lg-100 {
        height: 100%;
    }

    .h-lg-75 {
        height: 75%;
    }

    .h-lg-50 {
        height: 50%;
    }

    .h-lg-25 {
        height: 25%;
    }

    .h-lg-auto {
        height: auto;
    }

    .w-lg-100 {
        width: 100%;
    }

    .w-lg-75 {
        width: 75%;
    }

    .w-lg-50 {
        width: 50%;
    }

    .w-lg-25 {
        width: 25%;
    }

    .w-lg-auto {
        width: auto;
    }
}

/* Min and Max sizes */

.min-width-unset {
    min-width: unset !important;
}

.min-height-unset {
    min-height: unset !important;
}

.max-width-unset {
    max-width: unset !important;
}

.max-height-unset {
    max-height: unset !important;
}


/* ---------------------------------------- */

/* ---------- 10 - Flex ---------- */

.d-flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-column {
    flex-direction: column;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

.align-items-center {
    align-items: center;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.justify-content-start {
    justify-content: start;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-evenly {
    justify-content: space-evenly;
}

.justify-content-around {
    justify-content: space-around;
}

/* Tablet */
@media (min-width: 768px) {

    .flex-sm-row {
        flex-direction: row !important;
    }

    .flex-row-sm-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-sm-column {
        flex-direction: column !important;
    }

    .flex-column-sm-reverse {
        flex-direction: column-reverse !important;
    }

    .align-items-sm-center {
        align-items: center !important;
    }

    .align-items-sm-start {
        align-items: flex-start !important;
    }

    .align-items-sm-end {
        align-items: flex-end !important;
    }

    .justify-content-sm-start {
        justify-content: start !important;
    }

    .justify-content-sm-center {
        justify-content: center !important;
    }

    .justify-content-sm-end {
        justify-content: flex-end !important;
    }

    .justify-content-sm-between {
        justify-content: space-between !important;
    }

    .justify-content-sm-evenly {
        justify-content: space-evenly !important;
    }

    .justify-content-sm-around {
        justify-content: space-around !important;
    }

}

/* Desktop */
@media (min-width: 992px) {

    .flex-md-row {
        flex-direction: row !important;
    }

    .flex-row-md-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-md-column {
        flex-direction: column !important;
    }

    .flex-column-md-reverse {
        flex-direction: column-reverse !important;
    }

    .align-items-md-center {
        align-items: center !important;
    }

    .align-items-md-start {
        align-items: flex-start !important;
    }

    .align-items-md-end {
        align-items: flex-end !important;
    }

    .justify-content-md-start {
        justify-content: start !important;
    }

    .justify-content-md-center {
        justify-content: center !important;
    }

    .justify-content-md-end {
        justify-content: flex-end !important;
    }

    .justify-content-md-between {
        justify-content: space-between !important;
    }

    .justify-content-md-evenly {
        justify-content: space-evenly !important;
    }

    .justify-content-md-around {
        justify-content: space-around !important;
    }

}

/* Large Desktop */
@media (min-width: 1200px) {

    .flex-lg-row {
        flex-direction: row !important;
    }

    .flex-row-lg-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-lg-column {
        flex-direction: column !important;
    }

    .flex-column-lg-reverse {
        flex-direction: column-reverse !important;
    }

    .align-items-lg-center {
        align-items: center !important;
    }

    .align-items-lg-start {
        align-items: flex-start !important;
    }

    .align-items-lg-end {
        align-items: flex-end !important;
    }

    .justify-content-lg-start {
        justify-content: start !important;
    }

    .justify-content-lg-center {
        justify-content: center !important;
    }

    .justify-content-lg-end {
        justify-content: flex-end !important;
    }

    .justify-content-lg-between {
        justify-content: space-between !important;
    }

    .justify-content-lg-evenly {
        justify-content: space-evenly !important;
    }

    .justify-content-lg-around {
        justify-content: space-around !important;
    }

}

/* --------------------------------------- */



/* ---------- 11 - Overflow ---------- */


.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-scroll {
    overflow-x: scroll;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-x-scroll {
    overflow-x: scroll;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.text-overflow-ellipsis {
    text-overflow: ellipsis;
}

/* ------------------------------------------- */



/* ---------- 12 - Forms ---------- */

.crmEntityFormView fieldset {
    margin-bottom: 0px;
}

.crmEntityFormView table.section tr {
    position: relative;
}

/*
.crmEntityFormView table.section tr td div.info.required label.field-label::after,
.crmEntityFormView .cell div.info.required label:after {
    position: absolute;
    right: 45px;
    top: 38px;
}
*/

.crmEntityFormView,
.entitylist {
    background-color: transparent !important;
    color: var(--color_primary) !important;
    border: none !important;
}

label {
    font-size: 16px !important;
    font-weight: 500 !important;
}

.form-control,
input.form-control,
.form-control:focus,
input.form-control:focus,
.control select,
.control select:focus,
textarea.form-control,
textarea.form-control:focus {
    min-height: 46px;
    padding: 6px 12px;
    font-size: 16px;
    color: var(--color_primary);
    background-color: var(--color_white) !important;
    border: 1px solid var(--color_primary);
    border-color: var(--color_primary) !important;
    border-radius: 24px;
    box-shadow: none;
}

.control select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    background-repeat: no-repeat;
    background-position: 96% center;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 512 512'><path d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/></svg>");
}

div.msos-container.msos-container:not(.msos-disabled),
div.msos-container.msos-container:not(.msos-disabled).msos-focused,
div.msos-container.msos-container:not(.msos-disabled).msos-active {
    border: 1px solid var(--color_primary) !important;
    border-radius: 24px !important;
    box-shadow: none !important;
    min-height: 46px;
}

.msos-container:not(.msos-none-selected):not(.msos-disabled) .msos-selecteditems-container {
    min-height: 46px;
}

.msos-selecteditems {
    margin: auto;
}

.msos-input-container>input {
    min-height: 46px;
}

.msos-caret-container {
    border-radius: 0 24px 24px 0;
    margin-block: auto;
    margin-right: 2px;
}

.input-group .input-group-btn .btn-default.launchentitylookup {
    border-color: var(--color_primary) !important;
    border-radius: 0 24px 24px 0 !important;
    color: var(--color_primary) !important;
    font-family: 'Work Sans', sans-serif !important;
    font-size: 16px !important;
    min-height: 46px !important;
}

.input-group .input-group-btn .btn-default.clearlookupfield {
    min-height: 46px !important;
}

.crmEntityFormView .actions {
    border-top: none;
    padding: 0px 28px;
}


/* -------------------------------- */



/* ---------- 13 - Page Sections ---------- */

/* Header */

.header__container .header__breadcrumb {
    display: none !important;
    text-transform: uppercase;
}

.header__breadcrumb .crumb__title,
.header__breadcrumb .sitemap__title {
    text-transform: uppercase;
}

.header__container .header__img {
    display: none !important;
    margin-top: auto;
    object-fit: cover;
}

.header__container .header__img--center {
    display: none !important;
    margin-block: auto;
    object-fit: cover;
}

.header__container .crumb__title {
    text-wrap: nowrap;
}

.header__container .sitemap__title {
    overflow: hidden;
    text-transform: uppercase;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}


/* Mobile */
@media (max-width: 767px) {
    .container-fluid-xs {
        width: 100% !important;
    }
}

/* Tablet */
@media (min-width: 768px) {
    .header__container {
        height: fit-content !important;
        min-height: 149px !important;
        padding: 0px !important;
    }

    .header__container .header__breadcrumb {
        column-gap: 10px;
        display: flex !important;
        margin-bottom: 20px;
    }
}

/* Desktop */
@media (min-width: 992px) {

    .header__container .header__img,
    .header__container .header__img--center {
        display: block !important;
    }

    .header__container .container>div:first-child {
        width: 66.66667% !important;
    }

    .header__container .container>div:last-child {
        width: 33.33333% !important;
    }
}


/* Footer */

footer .footer__container {
    padding: 60px 0px 160px;
}


.sitemap__container {
    display: none;
}

.sitemap__container .sitemap__list a.list__item {
    font-size: 10px;
    font-weight: 400 !important;
    text-decoration: none;
}

.rrc-data__container {
    padding: 0px;
    row-gap: 40px;
}

.rrc-address__container {
    row-gap: 50px;
}

.rrc-address__container .rrc-copyright__container {
    row-gap: 20px;
}

.rrc-media__container {
    row-gap: 60px;
}

.social-media__container {
    column-gap: 21px;
}

.crs-nav__container {
    column-gap: 30px;
}

.crs-nav__container a {
    text-decoration: underline !important;
}

/* Tablet */
@media (min-width: 768px) {
    footer .footer__container {
        padding: 40px 0px 120px !important;
    }

    .rrc-data__container {
        padding: 0px 60px 30px !important;
    }

    .rrc-copyright__container {
        display: none;
    }

    .rrc-media__container {
        column-gap: 60px;
        row-gap: 20px;
    }
}


/* Large Desktop */
@media (min-width: 1200px) {

    footer .footer__container {
        padding: 33px 0px 99px !important;
    }

    .sitemap__container {
        column-gap: 30px;
        display: flex;
    }

    .sitemap__container .sitemap__list {
        row-gap: 18px;
    }

    .sitemap__container .sitemap__list a.list__item-header {
        text-decoration: none;
    }

    .rrc-data__container {
        padding: 100px 0px 30px !important;
    }

    .rrc-address__container {
        column-gap: 67px;
    }

    .rrc-copyright__container {
        display: flex;
    }
}

/* ---------------------------------------- */


/* ---------- 14 - Bullets ---------- */

[class*="dot-bullet--"]::before {
    content: "";
    display: inline-block;
    height: 10px;
    margin-right: 8px;
    width: 10px;
    border-radius: 50%;
}

.dot-bullet--primary::before {
    background-color: var(--color_primary);
}

.dot-bullet--accent::before {
    background-color: var(--color_accent);
}

.dot-bullet--blue::before {
    background-color: var(--color_blue);
}

.dot-bullet--gray::before {
    background-color: var(--color_gray);
}

.dot-bullet--black::before {
    background-color: var(--color_black);
}

.dot-bullet--white::before {
    background-color: var(--color_white);
}

.dot-bullet--shade::before {
    background-color: var(--color_shade);
}

.dot-bullet--tint::before {
    background-color: var(--color_tint);
}

.dot-bullet--warning::before {
    background-color: var(--color_warning);
}

.dot-bullet--success::before {
    background-color: var(--color_success);
}

.dot-bullet--cyan::before {
    background-color: var(--color_cyan);
}

.dot-bullet--cloud::before {
    background-color: var(--color_cloud);
}

.dot-bullet--sky::before {
    background-color: var(--color_sky);
}

.dot-bullet--lightAccent::before {
    background-color: var(--color_lightAccent);
}

.dot-bullet--lightWarning::before {
    background-color: var(--color_lightWarning);
}

/* ---------------------------------------- */

/* ---------- 15 - Checkboxes ---------- */
/* Input -> Checkbox */

input[type="checkbox"].checkbox__input {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid var(--color_primary);
    border-radius: 4px;
    cursor: pointer;
    height: 20px;
    width: 20px;
}

input[type="checkbox"].checkbox__input:disabled {
    border: 1px solid var(--color_shade);
    background-color: var(--color_shade);
}

input[type="checkbox"].checkbox__input:after {
    display: none;
    content: url("https://crs-images.powerappsportals.com/education/education-catalog/Icon-Check--white.png");
}

input[type="checkbox"].checkbox__input:checked {
    border: 1px solid var(--color_primary) !important;
    background-color: var(--color_primary) !important;
}

input[type="checkbox"].checkbox__input:checked:after {
    display: block;
}

input[type="checkbox"].checkbox__input:focus,
input[type="checkbox"].checkbox__input:focus-visible {
    outline: none;
}

/* --------------------------------------------------------- */

/* ---------- 16 - Chat button ---------- */
#Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window {
    bottom: 20px !important;
    right: 20px !important;
    inset: auto;
    z-index: 1040 !important;
}

#Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window:not(.chat__open) {
    left: unset !important;
    top: unset !important;
    min-width: 188px;
    min-height: 66px;
}

/* --------------------------------------------------------- */

/* ---------- 17 - Form Error Messages ---------- */

/* --------------------------------------------------------- */

.validation-summary.alert.alert-error {
    background-color: #FAECED 0% 0% no-repeat padding-box;
    border-color: #FAECED 0% 0% no-repeat padding-box;
    border-radius: 8px;
}

.validation-summary.alert.alert-error h2 {
    color: #F37F8A !important;
    font-size: 24px !important;
    margin-bottom: 1em !important;
}

.validation-summary.alert.alert-error ul li a {
    color: #F37F8A !important;
}

/* --------------------------------------------------------- */

/* ---------- jquery - Pagination  ---------- */

.jquery-bootstrap-pagination .pagination {
    display: flex !important;
    align-items: center;
    max-width: 100%;
}

.jquery-bootstrap-pagination .pagination li {
    margin-inline-start: 0px !important;
}

.jquery-bootstrap-pagination .pagination li a {
    width: fit-content !important;
    min-width: 40px !important;
}

.modal-lg button.btn-hg {
    min-height: 46px;
}

.modal-lg .modal-footer button {
    min-height: 48px;
    min-width: 228px;
}

button.launchentitylookup .fa-search,
button[aria-label="Search Results"] {
    color: var(--color_white) !important;
}

/* --------------------------------------------------------- */