@charset "utf-8";
/ Â鶹´«Ã½Custom CSS v6.8.9 (/manual-v6.8.8.css) July 2024 /

/**** BEGIN V6 Utility-header ****/
div.utility-header { background: #eef8fb; }

/**** What is the below CSS for? Assuming it's the CA.gov icon in our utility header. ****/
/**** These are WP clsses. We need to create our own classes and place that class in the Divi module's Advanced area that we're trying to target. ****/
.et_font_icon li[class^=ca-gov-icon-]:before,
.et_font_icon li[class*=" ca-gov-icon-"]:before,
[class^=ca-gov-icon-],
[class*=" ca-gov-icon-"] {
    font-family: "CaGov" !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*** BEGIN Google translate text ***/ 
body[class*="6.0"] #google_translate_element .skiptranslate.goog-te-gadget,
body[class*="6.0"] .skiptranslate.goog-te-gadget a { color: #000; }
/*** End Google translate text ****/
/**** END V6 Utility-header ****/

/**** BEGIN Main-nav spacing - Removes padding-left: 15px to align with the untility header above and H1 below. ****/
body[class*="6.0"] header .full-width-nav {
    padding: 0 0px;
}

/**** BEGIN Main-body ****/
body { color: #3b3a48; } /* Our global font-stack is compromised becuase styles are being overridden in-line at the page level. */

/** Is this custom container CSS? If so what for? 
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;*
}*/
/**** END Main-body ****/

/**** BEGIN Landing banner 1 (.lm-banner) - short line of text (1-3 words) ****/
/*** BEGIN Desktop ***/
.lm-banner { 
    background-image: linear-gradient(90deg, #0F3A5D 65%, #006394 100%);
    overflow: hidden;
}

.lm-banner h1 {
    color: #fff !important; /* !important required to override '.gray-900.' */
    margin: 3.25rem auto !important; /* H1 desktop margin-top and '!important' is required to overide native WP styles. */
    padding-bottom: 0rem !important;
} 
.lm-banner-row { padding: 0 15px !important; } /* Removes 27px of native-WP padding-top/bottom but maintains 15px padding-left/right and '!important' is required to overide native WP styles. */

.lm-col { width: 40%; } /* This column is where your image renders and this CSS adjusts it's column's width. */

/** SVG size/placement based on text-line-length. **/
.lm-svg-size {
    /*min-height: 154px;*/
    max-width: 820px;
}
/*** END Desktop ***/

/*** BEGIN Respoinsive banner CSS ***/

/** BEGIN Smaller DTs and tablets **/
@media only screen and (min-width: 1280px) {
    .lm-banner-responsive h1 { padding: 0 !important; }
}

@media only screen and (min-width: 1024px) and (max-width: 1400px){
    .lm-banner-responsive h1 { padding: inherit; }
}

@media only screen and (min-width: 768px) and (max-width: 1023px){
    .lm-banner-responsive h1 {
        margin: 1.5rem 1.25rem !important;
    }
    .lm-col { display: none; } /* Removes Â鶹´«Ã½window panes or your background image of choice. */
}
/** END Smaller DTs and tablets **/

/** BEGIN Phones **/
@media only screen and (max-width: 767px) {
    .lm-banner-responsive { background-image: linear-gradient(16deg, #0F3A5D 65%, #006394 100%); }
    .lm-banner-responsive h1 {
        margin: 1.5rem auto !important;
        padding: 0;
    }
    .lm-col { display: none !important; } /* Removes Â鶹´«Ã½window panes or your background image of choice. */
}
/** END Phones **/
/*** END Respoinsive banner CSS ***/
/**** END Landing banner 1 ****/

/**** BEGIN Landing banner 2 (.lm-banner-lg) - 3-5 words ****/
/*** BEGIN Desktop ***/
.lm-banner-lg { 
    background-image: linear-gradient(90deg, #0F3A5D 65%, #006394 100%);
    overflow: hidden;
}

.lm-banner-lg h1 {
    color: #fff !important; /* !important required to override '.gray-900.' */
    margin: 4.5rem auto !important; /* H1 desktop margin-top and '!important' is required to overide native WP styles. */
    padding-bottom: 0rem !important;
} 
.lm-banner-row-lg { padding: 0 15px !important; } /* Removes 27px of native-WP padding-top/bottom but maintains 15px padding-left/right and '!important' is required to overide native WP styles. */

.lm-col-lg { width: 33%; } /* This column is where your image renders and this CSS adjusts it's column's width. */

/** SVG size/placement based on text-line-length. **/
.lm-svg-size-lg {
    /*min-height: 154px;*/
    max-width: fit-content;
}
/*** END Desktop ***/

/*** BEGIN Respoinsive banner CSS ***/

/** BEGIN Smaller DTs and tablets **/
@media only screen and (min-width: 1280px) {
    .lm-banner-responsive-lg h1 { padding: 0 !important; }
}

@media only screen and (min-width: 1024px) and (max-width: 1400px){
    .lm-banner-responsive-lg h1 { padding: inherit; }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .lm-banner-responsive-lg h1 { margin: 1.5rem 1.25rem !important; }
    .lm-col-lg { display: none; } /* Removes Â鶹´«Ã½window panes or your background image of choice. */
}
/** END Smaller DTs and tablets **/

/** BEGIN Phones **/
@media only screen and (max-width: 767px) {
    .lm-banner-responsive-lg { background-image: linear-gradient(16deg, #0F3A5D 65%, #006394 100%); }
    .lm-banner-responsive-lg h1 {
        margin: 1.5rem auto !important;
        padding: 0;
    }
    .lm-col-lg { display: none !important; } /* Removes Â鶹´«Ã½window panes or your background image of choice. */
}
/** END Phones **/
/*** END Respoinsive banner CSS ***/
/**** END Landing banner 2 ****/

/**** BEGIN Landing banner 3 (.lm-banner-xlg and '-xlg' for all classes related to this banner) - long line of text (3 - 10 words w/ subtitle) ****/

.lm-banner-xlg { 
    background-image: linear-gradient(90deg, #0F3A5D 65%, #006394 100%) !important;
    min-height: auto;
    overflow: hidden;
}

.lm-banner-xlg h1 { 
    color: #fff !important; /* !important required to override '.gray-900.' */
    margin-top: 3rem !important; } /* H1 desktop margin-top and '!important' is required to overide native WP styles. */

.lm-banner-xlg p { color: #fff !important; } /* !important required to override '.gray-900.' */

.lm-banner-row-xlg { padding: 0 15px !important; } /* Removes 27px of native-WP padding-top/bottom but maintains 15px padding-left/right and '!important' is required to overide native WP styles. */

.lm-col-xlg { width: 25%; } /* This column is where your image renders and this CSS adjusts it's column's width. */

/*** Situates SVG properly based on text-line-length. ***/
.lm-svg-size-xlg {
    min-height: 138px;
    max-width: 154px;
    margin: 2rem 8rem;
}

/*** BEGIN Tablet and landscape ***/

/* @media only screen and (max-width: 1368px) and (min-width: 1081px) {
    .lm-banner-row-xlg  { font-size: 2.5vh; } /* This sets a more responsive font-size for your H1 at this breakpoint. 
} */

@media only screen and (max-width: 1080px) and (min-width: 981px) {
    .lm-banner-xlg h1 { 
        color: #fff !important; /* !important required to override '.gray-900.' */
        margin-top: 2.85rem !important; } /* H1 desktop margin-top and '!important' is required to overide native WP styles. */
    .lm-banner-row-xlg { padding: 0 2rem !important; }
    .lm-col-xlg { 
        margin-bottom: 1.5rem;
        width: 25%;
    }
    .lm-svg-size-xlg { margin: 1.5rem 4.3rem 0; }
}

@media only screen and (max-width: 980px) and (min-width: 768px) {
    .lm-banner-responsive-xlg {
        background-image: linear-gradient(16deg, #0F3A5D 65%, #006394 100%) !important;
        min-height: auto !important;
    }
    .lm-banner-responsive-xlg h1 {
        color: #fff !important; /* !important required to override '.gray-900.' */
        margin: 1.75rem auto 0 !important; /* H1 mobile margin. */
        padding-bottom: 0;
    } 
    
    .lm-banner-responsive-xlg p { 
        color: #fff !important; /* !important required to override '.gray-900.' */
        padding-bottom: 1rem;
    }
    .lm-banner-row-xlg { padding: 0 2.5rem !important; }
    .lm-svg-size-xlg {
        max-height: 150px !important;
        max-width: fit-content !important;
        margin: 3.5rem 0 0 1.5rem;
        padding-bottom: 1.48rem;
    }
    /* .lm-col-xlg { width: 25% !important; } You may or may not need to set the width on this column for responsiveness. */
}
/*** END Tablet and landscape ***/

/*** BEGIN Phone ***/
@media only screen and (max-width: 767px) {
    .lm-banner-responsive-xlg { 
        background-image: linear-gradient(16deg, #0F3A5D 65%, #006394 100%) !important;
        min-height: auto;
    }
    .lm-banner-responsive-xlg h1 { 
        color: #fff !important; /* !important required to override '.gray-900.' */
        margin: 1.5rem auto .5rem !important; 
    }
    .lm-banner-responsive-xlg p { 
        color: #fff !important; /* !important required to override '.gray-900.' */
        padding-bottom: 1rem!important; } /* !important was needed to overrride Oceanside <p> spacing. */
    .lm-col-xlg { display: none !important; } /* Removes Â鶹´«Ã½window panes or your background image of choice. */
}
/**** End Land/marketing 3 ****/

/**** BEGIN Marketing banner 1 (.mkt-banner) - short line of text (1-3 words) ****/
/*** BEGIN Desktop ***/
.mkt-banner { 
    background-image: linear-gradient(90deg, #0F3A5D 65%, #006394 100%);
    overflow: hidden;
}

.mkt-banner h1 {
    color: #fff !important; /* !important required to override '.gray-900.' */
    margin: 3.25rem auto !important; /* H1 desktop margin-top and '!important' is required to overide native WP styles. */
    padding-bottom: 0rem !important;
} 
.mkt-banner-row { padding: 0 15px !important; } /* Removes 27px of native-WP padding-top/bottom but maintains 15px padding-left/right and '!important' is required to overide native WP styles. */

.mkt-col { width: 40%; } /* This column is where your image renders and this CSS adjusts it's column's width. */

/** SVG size/placement based on text-line-length. **/
.mkt-svg-size {
    /*min-height: 154px;*/
    max-width: 820px;
}
/*** END Desktop ***/

/*** BEGIN Respoinsive banner CSS ***/

/** BEGIN Smaller DTs and tablets **/
@media only screen and (min-width: 1280px) {
    .mkt-banner-responsive h1 { padding: 0 !important; }
}

@media only screen and (min-width: 1024px) and (max-width: 1400px){
    .mkt-banner-responsive h1 { padding: inherit; }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .mkt-banner-responsive h1 { margin: 1.5rem 1.25rem !important; }
    .mkt-col { display: none; } /* Removes Â鶹´«Ã½window panes or your background image of choice. */
}
/** END Smaller DTs and tablets **/

/** BEGIN Phones **/
@media only screen and (max-width: 767px) {
    .mkt-banner-responsive { background-image: linear-gradient(16deg, #0F3A5D 65%, #006394 100%); }
    .mkt-banner-responsive h1 {
        margin: 1.5rem auto !important;
        padding: 0;
    }
    .mkt-col { display: none !important; } /* Removes Â鶹´«Ã½window panes or your background image of choice. */
}
/** END Phones **/
/*** END Respoinsive banner CSS ***/
/**** END Marketing banner 1 ****/

/**** BEGIN Marketing banner 2 (.mkt-banner-lg and '-lg' for all classes related to this banner) - long line of text (3 - 5 words) w/ possible subtitle (4-8 words) ****/
.mkt-banner-lg { 
    background-image: linear-gradient(90deg, #0F3A5D 70%, #006394 100%) !important;
    min-height: auto;
    overflow: hidden;
}

.mkt-banner-lg h1 { 
    color: #fff !important; /* !important required to override '.gray-900.' */
    margin-top: 3rem !important; } /* H1 desktop margin-top and '!important' is required to overide native WP styles. */

.mkt-banner-lg p { 
    padding-bottom: 1rem !important; 
    color: #fff !important; } /* !important required to override native WP padding and '.gray-900.' */

.mkt-banner-row-lg { padding: 0 15px !important; } /* Removes 27px of native-WP padding-top/bottom but maintains 15px padding-left/right and '!important' is required to overide native WP styles. */

.mkt-col-lg { width: 20%; } /* This column is where your image renders and this CSS adjusts it's column's width. */

/*** Situates SVG properly based on text-line-length. ***/
.mkt-svg-size-lg {
    min-height: 138px;
    max-width: 154px;
    margin: 2rem 3.5rem;
}

/*** BEGIN Tablet and landscape ***/

/* @media only screen and (max-width: 1368px) and (min-width: 1081px) {
    .lm-banner-row-lg  { font-size: 2.5vh; } /* This sets a more responsive font-size for your H1 at this breakpoint. 
} */

@media only screen and (max-width: 1080px) and (min-width: 981px) {
    .mkt-banner-lg h1 { 
        color: #fff !important; /* !important required to override '.gray-900.' */
        margin-top: 2.85rem !important; } /* H1 desktop margin-top and '!important' is required to overide native WP styles. */
    .mkt-banner-row-lg { padding: 0 2rem !important; }
    .mkt-col-lg { 
        margin-bottom: 1.5rem;
        width: 25%;
    }
    .mkt-svg-size-lg { margin: 1.5rem 4.3rem 0; }
}

@media only screen and (max-width: 980px) and (min-width: 768px) {
    .mkt-banner-responsive-lg {
        background-image: linear-gradient(16deg, #0F3A5D 70%, #006394 100%) !important;
        min-height: auto !important;
    }
    .mkt-banner-responsive-lg h1 {
        color: #fff !important; /* !important required to override '.gray-900.' */
        margin: 1.75rem auto 0 !important; /* H1 mobile margin. */
        padding-bottom: 0;
    } 
    
    .mkt-banner-responsive-lg p { 
        color: #fff !important; /* !important required to override '.gray-900.' */
        padding-bottom: 1rem !important; /* !important required to override a WP inline style? */
    }
    .mkt-banner-row-lg { padding: 0 2.5rem !important; }
    .mkt-svg-size-lg {
        max-height: 150px !important;
        max-width: fit-content !important;
        margin: 3.5rem 0 0 1.5rem;
        padding-bottom: 1.48rem;
    }
    /* .mkt-col-lg { width: 25% !important; } You may or may not need to set the width on this column for responsiveness. */
}
/*** END Tablet and landscape ***/

/*** BEGIN Phone ***/
@media only screen and (max-width: 767px) {
    .mkt-banner-responsive-lg { 
        background-image: linear-gradient(16deg, #0F3A5D 65%, #006394 100%) !important;
        min-height: auto;
    }
    .mkt-banner-responsive-lg h1 { 
        color: #fff !important; /* !important required to override '.gray-900.' */
        margin: 1.5rem auto .5rem !important; 
    }
    .mkt-banner-responsive-lg p { 
        color: #fff !important; /* !important required to override '.gray-900.' */
        padding-bottom: 1rem !important;  } /* !important was needed to overrride Oceanside <p> spacing. */
    .mkt-col-lg { display: none !important; } /* Removes Â鶹´«Ã½window panes or your background image of choice. */
}
/*** END Phone ***/
/**** END Marketing banner 2 ****/

/**** BEGIN Marketing banner 3 (.mkt-banner-xlg and '-xlg' for all classes related to this banner) - 5-9 words and 4-8 word subtitle ****/
.mkt-banner-xlg { 
    background-image: linear-gradient(90deg, #0F3A5D 70%, #006394 100%) !important;
    min-height: auto;
    overflow: hidden;
}

.mkt-banner-xlg h1 { 
    color: #fff !important; /* !important required to override '.gray-900.' */
    margin-top: 3rem !important; } /* H1 desktop margin-top and '!important' is required to overide native WP styles. */

.mkt-banner-xlg p { 
    padding-bottom: 1rem !important; 
    color: #fff !important; } /* !important required to override native WP padding and '.gray-900.' */

.mkt-banner-row-xlg { padding: 0 15px !important; } /* Removes 27px of native-WP padding-top/bottom but maintains 15px padding-left/right and '!important' is required to overide native WP styles. */

.mkt-col-xlg { width: 20%; } /* This column is where your image renders and this CSS adjusts it's column's width. */

/*** Situates SVG properly based on text-line-length. ***/
.mkt-svg-size-xlg {
    min-height: 138px;
    max-width: 154px;
    margin: 2rem 3.5rem;
}

/*** BEGIN Tablet and landscape ***/

/* @media only screen and (max-width: 1368px) and (min-width: 1081px) {
    .lm-banner-row-lg  { font-size: 2.5vh; } /* This sets a more responsive font-size for your H1 at this breakpoint. 
} */

@media only screen and (max-width: 1080px) and (min-width: 981px) {
    .mkt-banner-xlg h1 { 
        color: #fff !important; /* !important required to override '.gray-900.' */
        margin-top: 2.85rem !important; } /* H1 desktop margin-top and '!important' is required to overide native WP styles. */
    .mkt-banner-row-xlg { padding: 0 2rem !important; }
    .mkt-col-xlg { 
        margin-bottom: 1.5rem;
        width: 25%;
    }
    .mkt-svg-size-xlg { margin: 1.5rem 4.3rem 0; }
}

@media only screen and (max-width: 980px) and (min-width: 768px) {
    .mkt-banner-responsive-xlg {
        background-image: linear-gradient(16deg, #0F3A5D 70%, #006394 100%) !important;
        min-height: auto !important;
    }
    .mkt-banner-responsive-xlg h1 {
        color: #fff !important; /* !important required to override '.gray-900.' */
        margin: 1.75rem auto 0 !important; /* H1 mobile margin. */
        padding-bottom: 0;
    } 
    
    .mkt-banner-responsive-xlg p { 
        color: #fff !important; /* !important required to override '.gray-900.' */
        padding-bottom: 1rem !important; /* !important required to override a WP inline style? */
    }
    .mkt-banner-row-xlg { padding: 0 2.5rem !important; }
    .mkt-svg-size-xlg {
        max-height: 150px !important;
        max-width: fit-content !important;
        margin: 3.5rem 0 0 1.5rem;
        padding-bottom: 1.48rem;
    }
    /* .mkt-col-xlg { width: 25% !important; } You may or may not need to set the width on this column for responsiveness. */
}
/*** END Tablet and landscape ***/

/*** BEGIN Phone ***/
@media only screen and (max-width: 767px) {
    .mkt-banner-responsive-xlg { 
        background-image: linear-gradient(16deg, #0F3A5D 65%, #006394 100%) !important;
        min-height: auto;
    }
    .mkt-banner-responsive-xlg h1 { 
        color: #fff !important; /* !important required to override '.gray-900.' */
        margin: 1.5rem auto .5rem !important; 
    }
    .mkt-banner-responsive-xlg p { 
        color: #fff !important; /* !important required to override '.gray-900.' */
        padding-bottom: 1rem !important;  } /* !important was needed to overrride Oceanside <p> spacing. */
    .mkt-col-xlg { display: none !important; } /* Removes Â鶹´«Ã½window panes or your background image of choice. */
}
/*** END Phone ***/
/**** END Marketing banner 3 ****/

/**** BEGIN Content page banner ****/

.content-page-banner {
    background-color: #EEF8FB !important;
    color: #01395E !important;
}

.content-page-banner p { margin-bottom: 0rem !important }
/**** END Content page banner ****/

/**** BEGIN Left-nav and mobile-sidenav components ****/

/** Why's this in twice? Also, what's this targeting? **/
.overflow-auto { overflow: auto; }
.overflow-auto { overflow: auto !important; } 

/** Is all the button stuff for the side-nav or is it custom? What are we overriding/targeting? **/

button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) { cursor: pointer; }

button,
[type=button],
[type=reset],
[type=submit] { -webkit-appearance: button; }

button,
select { text-transform: none; }

input,
button,
select,
optgroup,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button { border-radius: 0; } /** Why are we removing the border-radius from core button styles? **/

/**** BEGIN Grid spacing/sizing - Did we alter something or was this never in WP like side-nav? ****/

@media (min-width: 992px) { .pb-lg-5 { padding-bottom: 3rem !important; } }

@media (min-width: 1200px) {
    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}

@media (min-width: 992px) {
    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}


.row>* {
    flex-shrink: 0;
    /*width: 100%;*/
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x)*.5);
    padding-left: calc(var(--bs-gutter-x)*.5);
    margin-top: var(--bs-gutter-y);
}
/**** END Grid sizing ****/

/** Fixes for CAWeb to implement. ** Were the fixes implemnented? **/

/**** These are WP clsses. We need to create our own classes and place that class in the Divi module's Advanced are that we're trying to target.
We're also not using the Full-width header for our banners anymore. If these MQs are for that component, we can remove these MQs. ****/

.et_pb_fullwidth_header .et_pb_fullwidth_header_container {
    width: auto !important;
    padding-left: 15px
}

@media (min-width: 768px) {
    .et_pb_fullwidth_header .et_pb_fullwidth_header_container {
        max-width: 768px !important;
    }
}

@media (min-width: 992px) {
    .et_pb_fullwidth_header .et_pb_fullwidth_header_container {
        max-width: 992px !important;
    }
}

@media (min-width: 1200px) {
    .et_pb_fullwidth_header .et_pb_fullwidth_header_container {
        max-width: 1140px !important;
    }
}

@media (min-width: 1280px) {
    .et_pb_fullwidth_header .et_pb_fullwidth_header_container {
        max-width: 1176px !important;
    }
}

/** Fullwidth header to align with text positioning. **/
.et_pb_fullwidth_header .et_pb_fullwidth_header_container {
    width: auto !important;
    padding-left: 15px;
}

/**** BEGIN Side-navigation: additional classes needed - .cdt_left_nav ****/

/** Text alignment, PART of the side navigation above **/
.entry-content .cdt_left_nav ul { padding: 0 0 23px 0; }

.list-navigation,.side-navigation ul {
    margin-left: 0;
    padding-left: 0
}

.list-navigation li,.side-navigation ul li {
    list-style: none;
    margin: 0;
    font-size: calc(1rem + 0.1vw);
    padding-left: 0
}

.list-navigation li a,.side-navigation ul li a {
    position: relative;
    display: block;
    text-decoration: none !important;
    color: var(--gray-700, #5e5e6a);
    padding-bottom: .7rem;
    padding-top: .7rem;
    padding-left: 1rem;
    border-bottom: 1px solid var(--gray-100, #f3f3f4)
}

.list-navigation li a:hover,.side-navigation ul li a:hover { color: var(--gray-900, #3b3a48) }
.list-navigation li a.landing,.side-navigation ul li a.landing { font-weight: 700 }
.list-navigation li a.landing.active,.side-navigation ul li a.landing.active { background-color: var(--gray-75, #f3f3f4) }
.list-navigation li a.landing.active:hover,.list-navigation li a.landing.active:focus,.side-navigation ul li a.landing.active:hover,.side-navigation ul li a.landing.active:focus { background-color: var(--gray-100, #f3f3f4) }
.list-navigation li a.landing.back,.side-navigation ul li a.landing.back { padding-left: 1.5rem }

.list-navigation li a.landing.back::after,.side-navigation ul li a.landing.back::after {
    content: "";
    position: absolute;
    font-family: CaGov;
    left: 0;
    top: .65rem
}

.list-navigation li a.active,.side-navigation ul li a.active {
    color: var(--gray-800, #4a4958);
    text-decoration: none;
    background-color: var(--gray-75, #f3f3f4)
}

.list-navigation li a.active:hover,.list-navigation li a.active:focus,.side-navigation ul li a.active:hover,.side-navigation ul li a.active:focus {
    color: var(--black, #000);
    text-decoration: none;
    background-color: var(--gray-100, #f3f3f4)
}

.list-navigation li a.active::before,.side-navigation ul li a.active::before {
    content: "";
    border-left: 3px solid;
    border-left-color: var(--color-p1, #fdb81e);
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    border-radius: 0
}

.list-navigation li a:hover,.list-navigation li a:focus,.side-navigation ul li a:hover,.side-navigation ul li a:focus {
    text-decoration: none;
    background-color: var(--gray-50, #fafafa);
    color: var(--gray-900, #3b3a48)
}

.list-navigation li a:focus,.side-navigation ul li a:focus {
    outline: solid 2px #2ea3f2 !important;
    outline-offset: -2px
}

.list-navigation li ul,.side-navigation ul li ul { padding-left: 0 }
.list-navigation li ul li,.side-navigation ul li ul li { margin: 0 }
.list-navigation li ul li a,.side-navigation ul li ul li a { padding-left: 2.5rem }

.list-navigation li ul li a.active,.side-navigation ul li ul li a.active {
    color: var(--gray-800, #4a4958);
    text-decoration: none
}

.list-navigation li ul li a.active:hover,.list-navigation li ul li a.active:focus,.side-navigation ul li ul li a.active:hover,.side-navigation ul li ul li a.active:focus {
    color: var(--black, #000);
    text-decoration: none
}

.list-navigation li ul li a.active ::before,.side-navigation ul li ul li a.active ::before { border-left-color: var(--color-p1, #fdb81e) }

.sidenav-mobile-btn {
    display: block;
    padding: .5rem 0;
    border-bottom: 1px solid var(--gray-200, #d4d4d7);
    background-color: var(--color-s1, #eef8fb)
}

.sidenav-mobile-btn .container {
    display: flex;
    justify-content: flex-end
}

/** What is this color for? It's not in Core. **/
.sidenav-mobile-btn .sidenav-toggle { color: #046b99; }

.sidenav-toggle {
    border: none;
    background: none;
    font-weight: 500;
    position: relative;
    right: 0;
    padding-right: 2.3rem;
    color: var(--color-p2, #046b99)
}

.sidenav-toggle:hover,.sidenav-toggle:focus { color: var(--color-p2-darker, #214a68) }

.sidenav-toggle .ca-gov-icon-caret-down {
    font-size: 2rem;
    position: absolute;
    top: .3rem;
    right: .2rem;
    line-height: 1rem;
    transition: all .3s ease
}

.sidenav-toggle[aria-expanded=true] .ca-gov-icon-caret-down {
    transform: rotate(180deg);
    top: .6rem
}

/**** BEGIN Mobile side-nav media quiries ****/

/** Why is this commented out?
@media (max-width: 991px){
.sidenav-mobile-btn {
    display: none !important;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-200, #d4d4d7);
    background-color: var(--color-s1, #eef8fb);
}
} **/

@media (max-width: 991px) {
    .mobile-sidenav .side-navigation.sticky-6 {
        top: 0;
        position: relative;
    }
}

@media(min-width: 992px) { .sidenav-mobile-btn { display:none } }

@media(max-width: 991px) {
    .mobile-sidenav {
        max-height:0;
        overflow: hidden;
        transition: max-height .15s ease-out;
        background-color: var(--mobile-drawer, #214a68)
    }

    .mobile-sidenav.visible {
        max-height: 1600px;
        transition: max-height .25s ease-in;
        overflow-y: auto
    }

    .mobile-sidenav .side-navigation {
        display: flex;
        flex-direction: column;
        padding: 1rem 0
    }

    .mobile-sidenav .side-navigation.sticky-6 {
        top: 0;
        position: relative
    }

    .mobile-sidenav .side-navigation ul {
        margin-top: 0;
        margin-bottom: 0
    }

    .mobile-sidenav .list-navigation li a,.mobile-sidenav .side-navigation ul li a {
        color: var(--white, #fff);
        border-bottom-color: var(--mobile-drawer, #214a68)
    }

    .mobile-sidenav .list-navigation li a:hover,.mobile-sidenav .list-navigation li a:focus,.mobile-sidenav .side-navigation ul li a:hover,.mobile-sidenav .side-navigation ul li a:focus {
        color: var(--white, #fff);
        background-color: var(--mobile-drawer-active, #046b99)
    }

    .mobile-sidenav .list-navigation li a.active,.mobile-sidenav .side-navigation ul li a.active { background-color: var(--mobile-drawer-active, #046b99) }

    .mobile-sidenav .list-navigation li a.active::before,.mobile-sidenav .side-navigation ul li a.active::before {
        color: var(--white, #fff);
        border-left-color: var(--color-p1, #fdb81e)
    }

    .mobile-sidenav .list-navigation li a.active:hover,.mobile-sidenav .list-navigation li a.active:focus,.mobile-sidenav .side-navigation ul li a.active:hover,.mobile-sidenav .side-navigation ul li a.active:focus {
        color: var(--white, #fff);
        background-color: var(--mobile-drawer, #214a68)
    }

    .mobile-sidenav .list-navigation li a ul li a.active::before,.mobile-sidenav .side-navigation ul li a ul li a.active::before { border-left-color: var(--color-p1, #fdb81e) }
}

a.sidenav {
    font-size: calc(1rem + .1vw);
    margin: 0;
    display: block;
    padding-top: .7rem;
    padding-bottom: .7rem;
    padding-left: 1rem;
    position: relative;
    text-decoration: none !important;
    color: var(--gray-700, #5e5e6a);
    border-bottom: 1px solid var(--gray-100, #f3f3f4);
    background-color: var(--white, #fff)
}

a.sidenav:hover,a.sidenav:focus {
    text-decoration: none;
    background-color: var(--gray-50, #fafafa);
    color: var(--gray-900, #3b3a48)
}

a.sidenav:focus { outline-offset: -2px }

a.sidenav.active {
    color: var(--gray-700, #5e5e6a);
    text-decoration: none;
    background-color: var(--gray-75, #f3f3f4)
}

a.sidenav.active:hover,a.sidenav.active:focus {
    text-decoration: none !important;
    color: var(--black, #000);
    background-color: var(--gray-100, #f3f3f4)
}

a.sidenav.active::before {
    content: "";
    border-left: 3px solid;
    border-left-color: var(--color-p1, #fdb81e);
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    border-radius: 0
}

a.sidenav.landing { font-weight: 700 }
a.sidenav.subnav { padding-left: 2.5rem }
a.sidenav.back { padding-left: 1.5rem }

a.sidenav.back::after {
    content: "";
    position: absolute;
    font-family: CaGov;
    left: 0;
    top: .65rem
}
/**** END Side-navigation component ****/


/**** BEGIN Featured Cards with circle icon component ****/

/** This is for the font-size of the icons. **/
body[class*="6.0"].divi-built #et-main-area div.et_pb_module span.et-pb-icon {
    font-family: "CaGov", "FontAwesome" !important;
    font-size: 70px;
}

.cdt_circle_blurb {
    margin-top: -70px;
}

.cdt_circle_blurb .et_pb_main_blurb_image {
    background-image: radial-gradient(478.02% 478.02% at 50% 50%, #FFF 0%, #0B91CE 100%);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 1px 5px 5px #aaa;
    position: relative;
    top: 50px;
}

.cdt_circle_blurb .et-pb-icon {
    height: 124px;
    width: 124px;
    line-height: 124px;
    background-image: linear-gradient(128deg, #01395E -56.14%, #0B91CE 146.59%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

.cdt_circle_blurb .et_pb_blurb_container {
    border: 1px solid #E1E0E3;
    border-radius: 5px;
    box-shadow: 1px 2px 5px #E1E0E3;
    padding: 30px 24px 24px 24px;
}

/** For the blurb cards/stickers **/
.et_pb_blurb_description { font-size: 16px !important; }

/** .et_pb_blurb_container {height: 190px !important;}  This will all change when we rebuild these cards anyway. **/

@media (min-width: 981px) {
    .et_pb_gutters3 .cdt_circle_blurb .et_pb_column {
        width: 31% !important;
        margin-right: 2% !important;
    }

    /** Why dont we need this?
    div:last-of-type > .et_pb_gutters3 .cdt_circle_blurb .et_pb_column {
		margin-right: 0% !important;
	}*/
    /*div:last-of-type >.et_pb_row_inner.et_pb_row_inner_1.cdt_circle_blurb.et_pb_row_1-4_1-4_1-4{margin-right: 0% !important;}*/
}

/*** BEGIN Circle blurbs's mobile spacing ***/
@media (max-width: 980px) {
    .et_pb_row .et_pb_column.et_pb_column_1_4,
    .et_pb_row .et_pb_column.et_pb_column_1_5,
    .et_pb_row .et_pb_column.et_pb_column_1_6 {
        width: 100%;
        margin: 0px 0px 0px 0px;
    }
}

@media (max-width: 980px) {
    .et_pb_column.et_pb_column_1_4.et_pb_column_inner.et_pb_column_inner_2 {
        padding-top: 0px;
        margin-top: 0px;
    }
}

/**** BEGIN cdt_split_list - Grid-list with links on left, text on right - looks like accordions. Currently only on the Policy landing page. ****/

.cdt_split_list ul {
    list-style-type: none;
    padding-left: 0;
}

.cdt_split_list li {
    text-align: right;
    border: 1px solid #E1E0E3;
    border-radius: 5px;
    padding: 1em;
    margin-bottom: 1em;
}

.cdt_split_list li a {
    float: left;
    font-weight: 700;
}

@media (max-width: 980px) {
    .cdt_split_list li {
        text-align: right;
        border: 1px solid #E1E0E3;
        border-radius: 5px;
        padding: 1em;
        margin-bottom: 1em;
        font-size: 16px;
        word-break: inherit;
    }
}
/**** END cdt_split_list ****/ 

/**** BEGIN cdt_buttons - Row of 3 buttons -- Are these the buttons on the Home page? ****/

.cdt_buttons .et_pb_button {
    border-radius: 5px;
    border: 1px solid #BCBBC1;
    width: 100%;
}

.cdt_buttons .et_pb_module::before {
    font-family: CaGov !important;
    content: "5";
    font-size: 1.5rem;
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translate(0, -50%);
}


/** What are we targeting here? Similar to above...where are these buttons? **/
@media (min-width: 981px) {
    .et_pb_gutters3 .cdt_buttons .et_pb_column {
        width: 31% !important;
        margin-right: 2% !important;
    }
}

/* Override animation */
.cdt_buttons .et_pb_module .et_pb_button:hover {
    border: 1px solid;
}

/** BEGIN cdt_plain_list, list with no markers - We already have a core class of .list-unstyled...this is unnecessary. **/

.cdt_plain_list ul {
    list-style-type: none;
    padding: 0;
}

.cdt_plain_list li { margin-bottom: 1em; }

/**** BEGIN List-inline component - .cdt_row_list - list displayed in a row separated by a pipe '|' ****/

.cdt_row_list ul {
    list-style-type: none;
    display: flex;
    padding-left: 0 !important;
}

.cdt_row_list li {
    padding: 0 1em;
    border-left: 1px solid #035376;
}

.cdt_row_list li:first-of-type {
    padding-left: 0;
    border-left: 0;
}

@media (max-width: 980px) {
    .cdt_row_list ul {
        list-style-type: none;
        display: flex;
        padding-left: 0 !important;
        flex-direction: column;
    }
}

@media (max-width: 980px) {
    .cdt_row_list li {
        padding: 0 0em;
        line-height: 1.7em;
        border-left: 1px solid #fff;
    }
}
/**** END List-inline component - .cdt_row_list - list displayed in a row separated by a pipe '|' ****/

/** Link-grid customization - Removes blue bottom border. **/
.link-grid {
    color: #046b99;
    border-bottom: 1px solid #d4d4d7;
}


/** For the cards - What cards? This is overriding core CSS for our cards. **/
.card-body.bg-gray-50.h-100 {
    border-radius: 5px;
    border: 1px solid #dedede;
    background: var(--v-6-gray-50, #FAFAFA);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    width: 349.728px;
    height: 238.479px;
    padding: 30px 30px 30px 30px;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}

/**** BEGIN CAGOV Accordion Component ****/

cagov-accordion details {
    margin-bottom: 0;
    min-height: 3rem;
    margin-top: 1rem;
    overflow: visible
}

cagov-accordion details summary {
    cursor: pointer;
    padding: .5rem 3rem .5rem 3.75rem;
    background-color: var(--gray-50, #fafafa);
    position: relative;
    line-height: 2rem;
    margin: 0;
    color: var(--gray-800, #4a4958);
    font-size: 1.125rem;
    font-weight: bold;
    border: 1px solid var(--gray-200, #d4d4d7)
}

cagov-accordion details summary::before {
    position: absolute;
    height: 100%;
    width: 2.75rem;
    border-right: 1px solid var(--gray-200, #d4d4d7);
    top: 0;
    left: 0;
    background-color: var(--gray-50, #fafafa);
    border-radius: 3px 0 0 3px;
    content: ""
}

cagov-accordion details summary::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0);
    height: 100%;
    width: 100%;
    border-radius: 3px
}

cagov-accordion details summary .cagov-open-indicator {
    position: absolute;
    left: .5rem;
    top: .4rem;
    width: 0;
    height: 0
}

cagov-accordion details summary .cagov-open-indicator::before {
    font-family: CaGov;
    content: "5";
    position: absolute;
    font-size: 1.6rem;
    transition: transform .2s
}

cagov-accordion details summary:hover {
    color: #000
}

cagov-accordion details summary:hover::before {
    background-color: var(--gray-100, #f3f3f4)
}

cagov-accordion details .accordion-body {
    padding: 1rem;
    border-radius: 0 0 4px 4px;
    border: 1px solid var(--gray-200, #d4d4d7);
    border-top: none
}

cagov-accordion:defined details {
    transition: height .2s;
    height: 3rem;
    overflow: visible
}

cagov-accordion:defined summary::-webkit-details-marker {
    display: none
}

cagov-accordion:defined details summary {
    list-style: none;
    border-radius: 4px
}

cagov-accordion:defined details summary:focus::before {
    background-color: var(--gray-100, #f3f3f4)
}

cagov-accordion:defined details summary:focus::after {
    outline: solid 2px #2ea3f2 !important;
    outline-offset: -2px
}

cagov-accordion:defined details[open] {
    height: auto
}

cagov-accordion:defined details[open] .cagov-open-indicator::before {
    transform: rotate(90deg) translateY(-0.2rem)
}

cagov-accordion:defined details[open] summary {
    border-radius: 4px 4px 0 0
}

cagov-accordion:defined details[open] summary::before {
    border-radius: 3px 0 0;
    background-color: var(--gray-100, #f3f3f4)
}

cagov-accordion:defined details[open] summary:focus::after {
    border-radius: 3px 3px 0 0
}

.accordion {
    list-style: none;
    margin: 0;
    padding: 0
}

.accordion>li {
    margin: 0
}

.accordion>li::before {
    content: "​";
    position: absolute
}

.accordion__heading {
    padding: 0;
    font-size: inherit;
    margin-top: .5rem;
    margin-bottom: .5rem;
    padding-bottom: 0;
    font-family: "Public Sans",system-ui,-apple-system,"Segoe UI","Roboto","Helvetica Neue","Noto Sans",sans-serif
}

.accordion__trigger {
    color: var(--brand-primary);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: from-font;
    font-weight: 700;
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    display: block;
    font-size: inherit;
    margin: 0;
    padding: 0 0 0 1em;
    position: relative;
    text-align: left;
    width: 100%;
    z-index: 2
}

.accordion__trigger:hover {
    color: var(--brand-primary-darkest)
}

.accordion__trigger::before {
    border-left: .3em solid rgba(0,0,0,0);
    border-right: .3em solid rgba(0,0,0,0);
    border-top: .3em solid #222;
    bottom: 0;
    content: "";
    height: 0;
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    transition: transform .2s ease-in-out;
    transform-origin: center center;
    transform: rotate(-90deg);
    width: 0
}

.accordion__trigger[aria-expanded=true]::before {
    transform: rotate(0deg)
}

.accordion__trigger:focus {
    outline: solid 2px #2ea3f2 !important
}

.accordion__panel {
    background-color: inherit;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    visibility: hidden;
    z-index: 1
}

.accordion__panel--transition {
    transition: max-height .2s ease-in-out,padding-top .2s ease-in-out,padding-bottom .2s ease-in-out
}

.accordion__panel>:last-child {
    margin-bottom: 0
}

.accordion__panel[aria-hidden=false] {
    max-height: 1000px;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1.5rem;
    overflow: auto;
    visibility: visible
}

.accordion-list.list-group .list-group-item {
    cursor: pointer
}

.accordion-list.list-group .list-group-item:focus {
    outline: solid 2px #2ea3f2 !important;
    outline-offset: -2px;
    background-color: var(--gray-50, #fafafa)
}

.accordion-list.list-group .list-group-item:hover {
    background-color: var(--gray-50, #fafafa)
}

.accordion-list.list-group .list-group-item.open {
    background-color: var(--gray-50, #fafafa)
}

.accordion-list.list-group .list-group-item.open .rotate {
    transform: rotate(90deg) !important
}

.accordion-list.list-group .list-group-item .rotate {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.3rem;
    line-height: 3rem;
    text-align: center;
    width: 3rem;
    height: 3rem;
    border: none;
    display: block !important;
    transition: all .2s ease !important
}
/**** END CAGOV Accordion Component ****/


/**** BEGIN Mega-footer and global-footer (utility footer): for the text-links - This will/is overriding our core .list-unstyled component. ****/
.list-unstyled {
    margin: 0 !important;
    padding: 0 0 .5em 0 !important;
    list-style: none !important;
}

.list-unstyled li:not(:last-child) { padding-bottom: .5em !important; }
.list-unstyled li a { color: #fff !important; }
.list-unstyled li a:hover { color: #ffaf00 !important; }
a.no-underline.text-white:hover { color: #ffaf00 !important; }
a.no-underline:hover { text-decoration: underline; }

.global-footer {
    border-top: none;
}


/**** END Mega-footer and global-footer ****/




/**** Paddings and spacings for mobile ****/
@media only screen and (max-width: 767px)
.et_pb_section_1.et_pb_section {
padding: 2rem;
}

/**** WP Toggle (accordion) heading margin correction ****/

.et_pb_toggle h1, .et_pb_toggle h2, .et_pb_toggle h3, .et_pb_toggle h4, .et_pb_toggle h5, .et_pb_toggle h6 {
    margin-block: 0 !important;
}  


.tablepress thead .dt-orderable-asc:hover, .tablepress thead .dt-orderable-desc:hover, .tablepress thead .dt-ordering-asc, .tablepress thead .dt-ordering-desc {
    background-color: #EEF8FB;
    color: var(--head-active-text-color);
}