/* Minification failed. Returning unminified contents.
(2717,14): run-time error CSS1030: Expected identifier, found '.'
(2717,42): run-time error CSS1031: Expected selector, found ')'
(2717,42): run-time error CSS1025: Expected comma or open brace, found ')'
(2991,28): run-time error CSS1039: Token not allowed after unary operator: '-Gray-1'
(3001,17): run-time error CSS1039: Token not allowed after unary operator: '-Primary'
(3013,17): run-time error CSS1039: Token not allowed after unary operator: '-Black'
 */
hr {
    border-top: 1px solid #d6d6d6 !important;
}

/*create new class for html element examples*/
.html {
    color: #007A11;
}

/*forces top alignment of table headers*/
.table thead th {
    vertical-align: top !important;
}

/* CSS Document - Custom styles that overwrite the template CSS code*/
.columnImage {
    width: 100%;
}

.red_text {
    color: #C90000;
}

.new_highlight {
    color: #FF0000;
    font-size: 0.8em;
}

/* begin responsive video */
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* end responsive video */

/* begin jQuery expand/collapse behavior */
.question, .question_nested, .collapseAll, .expandAll {
    cursor: pointer;
}

.question, .question_nested {
    color: #333;
    font-size: 1.6em;
    line-height: 1.5em;
}

.question a, .question a:hover, .question a:visited {
    color: #333;
}

.question_nested a, .question_nested a:hover, .question_nested a:visited {
    color: #333;
}

.answer, .answer_nested {
    padding-left: 2.5%;
}
/* end jQuery expand/collapse behavior */

/* begin custom table color to provide alternative for zebra striped table to have darker header matching default table */
.table.table-striped.alt-table-header > thead > tr > th,
.table.table-striped.alt-table-header > thead > tr > td {
    background: #d9d9d9;
    border: 2px solid #fff;
}
/* end custom table color to provide alternative for zebra striped table to have darker header matching default table */

.red-alert {
    border-color: #C90000;
}

.red-alert .panel-heading {
    border-color: #C90000;
    background-color: #C90000;
    color: #fff;
}

.red-alert .panel-heading h4 span[class^="ca-gov-icon-"] {
    color: #fff;
}

.yellow-alert {
    border-color: #FBAD23;
}

.yellow-alert .panel-heading {
    border-color: #FBAD23;
    background-color: #FBAD23;
}

.green-alert {
    border-color: #178300;
}

.green-alert .panel-heading {
    border-color: #178300;
    background-color: #178300;
    color: #fff;
}

.green-alert .panel-heading h4 span[class^="ca-gov-icon-"] {
    color: #fff;
    }

.home-icon {
    color: #333;
}

.opener {
    cursor: pointer;
}

/*-----------------------------------------------------*/
/* Hiding the search menu from the main menu in mobile */
/*-----------------------------------------------------*/
@media (max-width: 768px) {
    button.toggle-search {
        display: none;
    }
}



/*----------------------------------------------*/
/* Adds top margin to tabs panel(office locator */
/* page, maybe other tab panel pages) */
/*----------------------------------------------*/
.tab-group.responsive {
    margin-top: 20px;
}

/*-------------------------------*/
/* This makes the footer and google 
translate stack better in mobile */
/*-------------------------------*/
@media (max-width: 992px) {
    .section.section-impact.p-b-lg div.container .quarter {
        float: left;
        width: 50%;
    }

    .section.section-impact.p-b-lg div.container .quarter a.opener {
        margin-left: 20px;
    }

    /* this section below is for all page footers and manipulates the view disclaimer text for translate*/
    .section.section-impact.p-b-lg div.container .quarter.p-t-sm a.opener {
        margin-left: 20px;
    }
}

@media (max-width: 768px) {
    .section.section-impact.p-b-lg div.container .quarter {
        float: none;
        width: 100%;
    }
}

ul.m-b-md li {
    margin-bottom: 10px;
}

ul.p-b-md li {
    margin-bottom: 10px;
}

/*The following is the jumplink anchors for the accordions. They should be placed directly above the desired accordion.*/
.accordDivider {
    border-bottom: 1px;
    width: 200px;
}

/*targets twitter color issues*/
.Identity-screenName {
    color: #333 !important;
}

/*creating skip-to-chatbot functionality*/
#skip-to-chat {
    position: relative;
    left: 50% !important;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    z-index: 999;
}

#skip-to-chat a {
    width: 0;
    height: 0;
    text-align: center;
    position: absolute !important;
    left: 50% !important;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    clip: unset;
    background-color: white;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    overflow: hidden;
}

#skip-to-chat a:focus {
    width: 160px;
    height: 27px;
}

i.clickable.reaction_option.si-fb_like, 
i.clickable.reaction_option.si-fb_dislike {
    color: #046B99 !important;
}

/*--Modal overlay formatting--*/
h2.modal-title, 
h3.modal-title, 
h4.modal-title, 
h5.modal-title {
    font-size: 1.5rem !important;
}

div.modal-content {
    color: #000 !important;
}

/* teaser tile corrections. */
.teaser span.title {
    font-size: 1.25rem !important;
}

.teaser h2, .teaser h3, .teaser h4, .teaser h5 {
    font-size: 1.25rem !important;
}

/*creates a gray background for sections*/
.graySectionBg {
    background-color: #eee;
}

/*styling for spanish links on UI redesign pages*/
.spanishLinks {
    float: right;
}

@media (max-width: 768px) {
    .spanishLinks {
        float: none;
    }
}

/*allows for footer text to be smaller, like a subscript would. Use for UI dashboard, etc.*/
.addendum {
    font-size: .9em;
}

/*fixing breadcrumb stack issue */
.breadcrumb li {
    margin: 10px 0px;
    height: 15px !important;
    line-height: 15px !important;
}

/* new yellow border blockquote styling */
.highlight-blockquote {
    padding: 0 1rem;
    margin: 1rem 0;
    border-left: .3rem solid #fdb81e;
    font-weight: 400;
    line-height: 1.7;
}

/* updating button stylings */
button, 
.btn, 
input[type=button], 
input[type=submit], 
input[type=reset] {
    min-width: 80px;
}

.btn-row .btn {
    margin-right: 1rem !important;
}

@media (max-width: 767px) {
    .btn, .btn-row .btn {
        width: 100%;
        margin-left: 0px !important;
        margin-right: 0px !important;
        margin-bottom: 1rem !important;
    }

    .hide {
        display: none;
    }

    .showDashboard {
        display: block;
    }
}

@media (min-width: 768px) {
    .hide {
        display: block;
    }

    .showDashboard {
        display: none;
    }
}

.input-group-addon {
    font-size: 1.5rem !important;
}

.pull-right {
    padding-left: 8px;
}

/*--creating a white background on radio and checkboxes
so that when placed on different color sections, the color
does not bleed through the form controls. --*/
.check-icon-radio, .check-icon-checkbox {
    background-color: #fff;
}

/* capitalize the folders in the dynamic breadcrumbs */
.breadcrumb.dynamic {
    text-transform: capitalize;
}

/* help text icon formatting */
.ca-gov-icon-question-fill {
    color: #046b99;
    margin-left: .5rem;
}

/* creating non-wrapping text for long checkbox labels */
input[type=checkbox], input[type=radio] {
    float: left;
    margin-top: 0.35rem;
    margin-right: 0.5rem;
}

.form-checkbox-item {
    width: 95%;
    display: block;
    float: left;
    margin-left: 0.5rem;
}

form fieldset label.long-label {
    display: block;
    margin-bottom: 5px;
    margin-left: 1.375rem;
}

@media (max-width: 470px) {
    .form-checkbox-item {
        width: 90%;
    }
}

/****Creating text-wrap for numbered items that
are made to look like an ordered list *****/
.col-content, .col-num {
    position: relative;
    width: 100%;
    padding-left: 15px;
}

.col-num {
    flex: 0 0 4.33333%;
    max-width: 4.33333%;
    text-align: right;
}

.col-content {
    flex: 0 0 95.66667%;
    max-width: 95.66667%;
}

.col-content label {
    margin-left: .3rem;
}

@media (max-width: 767px) {
    .col-num {
        flex: 0 0 7.33333%;
        max-width: 7.33333%;
        text-align: right;
    }

    .col-content {
        flex: 0 0 92.66667%;
        max-width: 92.66667%;
    }
}

/*create a consistent font-size for headers */
.h4-font {
    font-size: 1.25rem;
    margin-top: 1.33em;
    margin-bottom: 1em;
}

/******Making the tab headers consistent****/
ul#tabs li a h2, ul#tabs li a h3, ul#tabs li a h4 {
    font-size: 1rem !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    line-height: 1.2 !important;
}

/* create a way to flip an image/icon 180 degrees */
.rotate-180 {
    display: inline-block;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.full-width-title {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

a.contact-logo {
    background-image: none !important;
}

/********Feedback Button Styling*********/
#QSIFeedbackButton-btn {
    min-width: 0;
    padding: 10px;
    padding: 3px 5px 3px 5px !important;
    background-color: #E6E8E8 !important;
    border: 1px solid #046B99 !important;
    border-right: none !important;
}

.QSIFeedbackButton div {
    font-size: 1rem !important;
    background-color: #E6E8E8 !important;
    color: #046b99;
}

#QSIFeedbackButton-close-btn-container {
    background-color: transparent !important;
}

#QSIFeedbackButton-close-btn-background {
    top: -3.2px !important;
    right: 26.8px !important;
}
/*******End of Feedback Button Styling***********/
/**** Chatbot ****/
.lex-web-ui-iframe {
    width: 70vw;
    max-width: 375px;
    max-height: 500px;
    min-width: unset;
}
    .lex-web-ui-iframe.lex-web-ui-iframe--minimize {
        z-index: 100000000;
    }

@media screen and (max-width: 556px) {
    .lex-web-ui-iframe {
        width: 100% !important;
        max-width: unset;
        margin-right: 0;
        bottom: 0;
    }

        .lex-web-ui-iframe.lex-web-ui-iframe--minimize {
            margin-right: 2vw;
        }
}

.fake-class {
    background-color: red;
}
/*---------------------------------------------------------------*/
/*  text accents override to pass accessibility color contrast   */
/*---------------------------------------------------------------*/
.text-accent1 {
    color: #65b1e7 !important;
}

.text-accent6 {
    color: #E381ee !important;
}

/*---------------------------------------------------------------------------*/
/* This is to be able to hide a div that needs to be there for accessibility */
/*---------------------------------------------------------------------------*/
.visuallyHidden {
    display: none;
}

/*--Color Accessibility focus fixes--*/
.alert .alert-severe .alert-dismissible .alert-banner .btn:focus {
    outline: solid 2px #483BB2;
}

.utility-header a:focus,
.utility-header .btn:focus,
#skip-to-content a:focus,
#siteSettings .btn:focus,
#siteSettings .close:focus,
.section-impact a:not(.btn):focus,
.card-impact a:not(.btn):focus,
.icon.MinMaxChat.ClickableADA:focus,
.global-footer a:focus {
    outline: solid 2px #dce2ff !important;
}

.branding a:focus,
#navigation a:focus,
#navigation button:focus,
.nav > li > a:focus,
.nav > li > button:focus,
.mobile-controls .toggle-menu:focus,
.main-primary a:focus,
.main-primary .accordion-list li:focus,
.main-primary div.active:focus,
.tabs [role="tabpanel"]:focus,
div.gsc-cursor-page:focus,
.main-primary button:focus,
#chkSameEarning:focus,
input#txtClaimDate:focus,
input.form-control.money:focus,
.tableFocus:focus,
.main-primary select:focus,
#AstuteBotToggleChatContainer:focus,
i.reaction_option:focus,
input.button:focus,
i.ca-gov-icon-check-mark:focus,
.input-group-addon:focus,
input[type=text]:focus {
    outline: solid 2px #9646ff !important;
}

#Search > input:focus,
#Search > textarea:focus,
#Search > button:focus,
#Search > select:focus,
.close-search-btn > button:focus,
.accordionExpand > button:active,
.accordionExpand > button:focus,
.accordionExpand > [role="button"],
.mobile-controls .toggle-search:focus {
    outline: solid 2px #8331C1 !important;
}

#skip-to-content:focus-within {
    z-index: 9999;
}

.gs-visibleUrl {
    color: #008233 !important;
    /*this darkens the color contrast to pass AA WCAG requirements
	for the link text that is returned in the search page. */
}
/*--end of focus field color accessibility fixes--*/

/*--adds outline to the search box when no focus--*/
.search-container.active .search-textfield {
    border-color: #000 !important;
}

.search-container #Search .close-search .ca-gov-icon-close-mark {
    color: #000 !important;
}

#q.w-100.height-50.p-x-sm {
    border-color: #333;
}

button.pos-abs.gsc-search-button.right-0.top-0.width-50.height-50 {
    border-color: #333;
}

/*adjust color of icons to be accessible for color contrast */
.first-level-link > span[class^="ca-gov-icon"] {
    color: #046B99;
}

.nav-item:hover > a > span[class^="ca-gov-icon"], .nav-item:hover > a {
    color: #B55E00;
}
/*---------------------------------------------*/
/*  benefitCalculator                          */
/*---------------------------------------------*/
.calculatorInput input {
    font-family: Arial, Helvetica, sans-serif;
}

.calculatorResult input {
    font-family: Arial, Helvetica, sans-serif;
    border: 0;
    background: none;
    font-weight: bold;
    font-size: 24px;
}

.calculatorMessage input {
    font-family: Arial, Helvetica, sans-serif;
    border: 0;
    background: none;
    font-weight: bolder;
    color: #F00;
}

.CalcTextResult {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
}

.CalcTextEnter {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
}

.calcLeftColumn {
    margin: 0px;
    float: left;
    width: 65%;
}

.calcRightColumn {
    margin: 0px;
    float: right;
    width: 30%;
}
/*---------------------------------------------*/
/*  end benefitCalculator                      */
/*---------------------------------------------*/

#ArticleLinks {
    list-style: none;
    padding-left: 0px !important;
}

ul#ArticleLinks li {
    padding-left: 0px !important;
}

.width-control {
    width: 90%;
    margin: auto;
}

.article-button-width-control {
    width: 87.75%;
    margin: auto;
}

.blog-image {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    /* box-shadow: -1px 2px 5px 5px lightgray;*/
    box-shadow: -1px 1px 10px 3px lightgray;
}

.article-button-align {
    float: left;
}

.newsletter-article-title {
    position: relative;
    margin-bottom: 25px;
}

.newsletter-article-link {
    position: absolute;
    left: 15;
    bottom: 0;
}

@media (max-width: 768px) {
    .width-control {
        width: 90%;
    }

    .article-button-width-control {
        width: 100%;
    }

    .article-button-align {
        float: none;
    }
}

/*------------------------------------------------------------------------*/
/* --------Fix for the card headers on the office Locator page.---------- */
/* This allows the link to expand the full width and height of the header */
/*------------------------------------------------------------------------*/
.card-header a {
    padding: 12px 20px !important;
    display: block;
}

/* custom card float class */
.cardFloat {
    float: right;
}

@media (max-width: 576px) {
    .cardFloat {
        float: none;
    }

    .cardFloat .third {
        width: 100% !important;
    }
}

/* custom image float class */
.floatImage {
    float: right;
    clear: both;
    width: 33%;
    padding: 20px;
}

figure.floatImage {
    border: 0px !important;
    background-color: #fff;
}

@media (max-width: 767px) {
    .floatImage {
        float: none;
        width: 100% !important;
    }
}

/* remove gap on card decks on mobile */
@media (max-width: 768px) {
    div.card-deck {
        padding-top: 0px !important;
    }
}

/* trying to create equal card height */
.card-body {
    height: 100%;
}

.card-button-text {
    text-align: center;
    font-size: 1.25rem !important;
}


/*remove rounding of card headers*/
.card-header:first-child {
    border-radius: 1px 1px 0 0 !important;
}

/*adjustments to margins in cards*/
.two-thirds h2:first-child,
div.collapse div.card-body h3:first-of-type,
.card h2,
.card h3,
.card h4,
div.card.card-understated div.card-default.border-dark div.card-block h3,
div.card.card-understated div.card-default div.card-block h2,
div.card.card-understated div.card-default div.card-block h3,
div.card.card-understated div.card-default div.card-block h4 {
    margin-top: 0px;
}

.two-thirds h1:first-of-type {
    clear: both;
    margin-top: 0px;
}

/*new custom cards*/
.card-warning-subtle, .card-warning-subtle div.card-header {
    background-color: #ffe7a4;
}

    .card-warning-subtle div.card-block {
        background-color: #fff2cd;
    }

.card-error {
    border-color: #D24532;
}

    .card-error div.card-header {
        background-color: #D24532;
        color: #fff;
    }

    .card-error div.card-block {
        background-color: #fff;
    }

.card-warning-message {
    border-color: #FDB81E;
}

    .card-warning-message div.card-header {
        background-color: #FDB81E;
        color: #333;
    }

    .card-warning-message div.card-block {
        background-color: #fff;
    }

.card-success-message {
    border-color: #16872E;
}

    .card-success-message div.card-header {
        background-color: #16872E;
        color: #fff;
    }

    .card-success-message div.card-block {
        background-color: #fff;
    }
/*end of custom card section*/

/*adjusting font-sizes in card header tags*/
.card-header h2, .card-header h3, .card-header h4 {
    font-size: 1rem !important;
    margin-bottom: 0px !important;
}

.font-header {
    font-size: 1rem !important;
}

h2.card-title.consistant,
h3.card-title.consistant,
h4.card-title.consistant,
h5.card-title.consistant {
    font-size: 1.25rem !important;
}

h2.card-title.consistent-l,
h3.card-title.consistent-l,
h4.card-title.consistent-l,
h5.card-title.consistent-l {
    font-size: 1.54rem !important;
}

.panel-heading h2,
.panel-heading h3,
.panel-heading h4,
.panel-heading h5 {
    font-size: 1.125rem !important;
}

/*new custom cards*/
.card-warning-subtle, .card-warning-subtle div.card-header {
    background-color: #ffe7a4;
}

    .card-warning-subtle div.card-block {
        background-color: #fff2cd;
    }

.card-error {
    border-color: #D24532;
}

    .card-error div.card-header {
        background-color: #D24532;
        color: #fff;
    }

    .card-error div.card-block {
        background-color: #fff;
    }

.card-warning-message {
    border-color: #FDB81E;
}

    .card-warning-message div.card-header {
        background-color: #FDB81E;
        color: #333;
    }

    .card-warning-message div.card-block {
        background-color: #fff;
    }

.card-success-message {
    border-color: #16872E;
}

    .card-success-message div.card-header {
        background-color: #16872E;
        color: #fff;
    }

    .card-success-message div.card-block {
        background-color: #fff;
    }
/*end of custom card section*/

/*Adding styling for the cardFloat HTML Template*/
.cardFloat {
    margin-bottom: 15px;
    margin-left: 15px;
}

    .cardFloat img {
        box-shadow: 6px 5px 5px 5px #d3d3d3;
    }

.cardFloatImages {
    min-height: 300px;
    background-color: #faf4e8;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px
}

@media (max-width:992px) {
    .image-remove {
        display: none;
    }

    .cardFloatImages {
        min-height: 200px;
        padding: 20px;
    }
}

@media (max-width:768px) {
    .cardFloat {
        margin-left: 0;
        float: none;
    }

    .cardFloatImages {
        min-height: 0;
        padding: 0;
        background-color: #fff;
    }
}

div.homepageBannerText .cardFloat img {
    box-shadow: none;
}
/*End of cardFloat styling*/
.reset-text {
    display: none;
}

.event-filters-row {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0;
    grid-gap: 1rem;
    padding: 12px 0 0 0;
}

    .event-filters-row ::placeholder {
        color: #333;
        opacity: 1;
    }

.event-search,
.event-type-form,
.event-language-form,
.event-sort-form,
.event-county-form {
    width: 100%;
    height: 25px;
    border-radius: 2px;
    border: 1px solid #767676;
}

.event-filter-reset {
    width: unset !important;
}

.event-filters-heading {
    color: #333;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.events-list {
    display: grid;
    row-gap: 1rem;
    grid-template-columns: repeat(1, 1fr);
    margin-top: 8px;
    margin-bottom: 3rem;
    list-style-type: none;
    padding: 0;
}

.event-card {
    padding: 32px 20px;
    border: 1px solid rgba(214, 214, 214, 1);
    transition: box-shadow 500ms, border 500ms;
    color: rgba(51, 51, 51, 1);
    margin-left: 16px !important;
    margin-right: 16px !important;
}

    .event-card:focus-within {
        outline: solid 2px #9646ff !important;
        border: 1px solid rgba(214, 214, 214, 1);
    }

.event-card-title-container {
    display: flex;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-bottom: 16px;
}

.event-card-title {
    color: rgba(51, 51, 51, 1);
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 0;
}

.event-card-flag-icon {
    min-width: 24px;
}

.event-card .card-header a {
    padding: 6px 0 !important;
    display: block;
}

.event-card-description-text {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-details-list {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    grid-gap: .5rem;
    row-gap: .5rem;
    margin: 6px 0 0 0;
}

.event-detail-page-details-list {
    margin-bottom: 16px;
}

.event-details-list li {
    background-color: rgba(225, 242, 247, 1);
    border-radius: 2px;
    padding: 2px 4px;
    text-transform: capitalize;
}

.event-card-date-time {
    margin: 16px 0;
}

.filter-container {
    display: flex;
    flex-direction: row;
    gap: 3rem;
}

    .filter-container h3 {
        margin-bottom: 8px;
        margin-top: 0;
    }

.description-container {
    margin-bottom: 24px;
}

.card-text {
    display: inline;
}

.read-more {
    display: inline;
    margin-left: 0;
    cursor: pointer;
    color: #046B99 !important;
    font-size: 14px;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-skip-ink: none;
    text-decoration-thickness: 7.5%;
    text-underline-offset: 10%;
}

.events-list-header {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.event-detail-page-flag-icon {
    margin-top: 5px;
}

.event-details-list li {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.event-share-section {
    margin: 40px 0;
}

.event-share-buttons a {
    margin: 0 10px;
    text-decoration: none;
    display: inline-block;
    background: unset;
}

.event-share-buttons .share-button {
    background-image: none !important;
}

#facebook-share {
    margin-left: 0;
}

.event-share-buttons img {
    vertical-align: middle;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

    .event-share-buttons img:hover {
        transform: scale(1.1);
    }

.event-reset-filter-container-desktop {
    display: none;
}

@media (min-width:768px) {
    .events-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-reset-container {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 1rem;
        margin-bottom: 40px;
    }

    .event-filters-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "event-search-form-container event-search-form-container"
            "virtual-irl-filter-grid event-language-filter-grid"
            "event-county-filter-grid event-sort-grid"
    }

    .event-search-form-container {
        grid-area: event-search-form-container;
    }

    .virtual-irl-filter-grid {
        grid-area: virtual-irl-filter-grid;
    }

    .event-language-filter-grid {
        grid-area: event-language-filter-grid;
    }

    .event-county-filter-grid {
        grid-area: event-county-filter-grid;
    }

    .event-sort-grid {
        grid-area: event-sort-grid;
    }

    .event-reset-filter-container-desktop {
        display: block;
    }

    .event-reset-filter-container-mobile {
        display: none;
    }

    .event-card:hover {
        border: 1px solid rgba(136, 136, 136, 1);
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.9);
        cursor: pointer;
    }

    .event-list-page-card-deck-container .card-deck {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (min-width:992px) {
    .filter-reset-container {
        margin-bottom: 32px;
    }

    .event-filters-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .event-filters-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: unset;
    }

    .event-search-form-container {
        width: 20%;
    }

    .virtual-irl-filter-grid {
        width: 20%;
    }

    .event-language-filter-grid {
        width: 20%;
    }

    .event-county-filter-grid {
        width: 20%;
    }

    .event-sort-grid {
        width: 20%;
    }

    .event-reset-filter-container {
        margin-top: 0;
    }

    .events-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .events-list {
        margin-top: 0;
    }

    .event-list-page-card-deck-container .card-deck {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.featured-card-deck {
    margin: 32px 0;
}

.featured-card-deck-header-container {
    display: flex;
    margin-bottom: 16px;
}

.featured-cards-container {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-gap: 2rem;
}

.featured-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(214, 214, 214, 1);
}

.featured-card-image-container {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.featured-card-text-container {
    padding: 32px 16px;
    flex-grow: 1;
}

.featured-card-title {
    margin-top: 0;
}

.featured-card-link-container {
    padding: 0 16px 32px;
}

.featured-card-deck-item-arrow {
    font-size:1.15rem;

}

.featured-card-arrow {
    background: none !important;
}

@media screen and (min-width: 992px) {
    .featured-cards-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.site-footer {
    color: white;
}

.footer-main {
    background-color: #313A45;
    padding: 2rem 0;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.footer-columns ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}

.footer-columns ul > li {
    position: relative;
    margin-bottom: 13px;
}

.footer-columns ul > li:last-child {
    margin-bottom: 0;
}

.footer-columns ul a {
    color: #fff;
    font-size: 1.25rem;
}

.footer-columns ul a:hover {
    color: #FDB81D;
}

.footer-columns-translation-heading {
    margin-top: 0;
    font-size: 1.25rem;
}

.footer-translation-disclaimer {
    color: #fff;
}

.footer-translation-disclaimer:hover {
    color: #FDB81D;
}

.footer-utility {
    background-color: #212020;
    padding: 1rem 0;
}

.footer-utility-links {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 20px;
    column-gap: 8rem;
}

.footer-utility-links p {
    margin-bottom: 0;
}

.footer-utility-links a {
    color: #FFF;
    font-family: "Roboto Flex";
    font-size: 1rem;
    line-height: 1.4;
}

.footer-utility-links a:hover {
    color: #FDB81D;
}

.utility-footer-social-links-container {
    display: flex;
    grid-gap: 1rem;
    font-size: 2rem;
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    color: #fff;
}

.utility-footer-social-link a,
.utility-footer-social-link a:hover {
    color: #fff;
    text-decoration: none;
}

.utility-footer-social-icon:hover {
    color: #FDB81D;
}

.footer-columns-translation-container {
    margin-top: 2rem;
}

.footer-legal {
    background-color: #D9D9D9;
    color: #000;
    padding: 0.9375rem;
    font-size: 1rem;
}

.footer-legal .container p {
    margin-bottom: 0;
}

/* Google Translate Font Color */
.goog-te-gadget,
.goog-te-gadget > span > a {
    color: white !important;
}

@media (min-width: 768px) {
    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 0 2rem;
    }

    .footer-columns-translation-container {
        margin-top: 0;
    }  
}

@media (min-width: 992px) {
    .footer-columns ul {
        margin-bottom: 0;
    }
    .footer-columns {
        grid-template-columns: repeat(4, 1fr);
        gap: 4rem;
    }

    .utility-footer-social-links-container {
        margin: 0;
        font-size: 1.5rem;
        margin: 0;
    }

    .footer-utility .container {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .footer-utility-links {
        display: grid;
        grid-template-columns: repeat(6, auto);
        grid-template-rows: 1fr;
        column-gap: 1.75rem;
    }
}

@media (min-width: 1200px) {
    .footer-columns {
        gap: 7rem;
    }

    .footer-utility-links {
        column-gap: 3rem;
    }
}

.main-content {
    margin-top: 155px;
}

.alert-banner {
    transition: all 0.4s ease;
}

.alert-banner[style*="max-height: 0"] {
    height: 0 !important;
    border: none !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* UTILITY HEADER */

.site-header {
    position: fixed;
    width: 100%;
    z-index: 999;
    background: white;
}

.site-utility-header {
    height: 50px;
    background-color: #046B98;
    display: flex;
    font-size: 0.875rem;
    transition: height 0.3s ease, padding 0.3s ease;
}

.utility-header-logo {
    height: 25px;
}

.utility-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.utility-header-link-container {
    display: flex;
    grid-gap: 4rem;
    margin: 0;
    padding: 0;
}

.utility-header-link {
    display: none;
}

.utility-header-language-resources-link {
    display: block;
}

.language-resources-link {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.language-resources-link .ca-gov-icon-globe {
    font-size: 1.2rem;
    color: #fff;
    margin-right: 0.625rem;
}

.utility-header-language-resource-icon {
    margin-right: 12px;
}

.utility-header-link-container a,
.utility-header-link-container a:hover {
    color: #fff;
    text-decoration: none;
}

.utility-search {
    display: none;
}

#___gcse_0 {
    width: 302px;
    height: 40px;
}

.utility-search input.gsc-input,
.mobile-search input.gsc-input {
    background: #FFF;
    border-radius: 12px;
    height: 40px !important;
    opacity: unset !important;
    border: 1px solid black !important;
    font-size: 12px !important;
}

.mobile-search input.gsc-input {
    height: 62px !important;
    font-size: 20px !important;
}

.utility-search .gsc-input-box,
.mobile-search .gsc-input-box,
#search-page .gsc-input-box {
    padding: 0 !important;
}

.utility-search td.gsc-search-button::before,
.mobile-search td.gsc-search-button::before {
    display: none;
}

.mobile-search .gsc-clear-button {
    display: none !important;
}

.utility-search button.gsc-search-button,
.mobile-search button.gsc-search-button {
    margin-left: 0 !important;
    height: 40px !important;
    border-radius: 0 12px 12px 0 !important;
    border: 1px solid black !important;
    opacity: 1 !important;
    top: 0 !important;
    right: 0 !important;
    min-width: 40px !important;
    background-color: #D9DEE0 !important;
}

.mobile-search button.gsc-search-button {
    height: 62px !important;
    width: 76px !important;
}

.mobile-search .gsc-search-button .ca-gov-icon-search {
    font-size: 1.78571rem !important;
}

.utility-search .ca-gov-icon-search::before {
    position: absolute;
    top: 0;
    right: 12px;
}

/* Main Nav Search Auto-Complete Results */
.gstl_50 {
    z-index: 10000 !important;
}

/* Mobile Nav Search Auto-Complete Results */
.gstl_51 {
    width: 100% !important;
    left: 0 !important;
}

.utility-header-inner .gsc-clear-button {
    display: none !important;
}

.gsc-completion-container {
    font-family: "Source Sans Pro", sans-serif !important;
}

@media (min-width: 992px) {
    .site-utility-header {
        height: 65px;
    }

    .site-utility-header.shrunk {
        height: 55px;
    }

    .utility-header-link {
        display: flex;
        align-items: center;
    }

    .utility-search {
        display: block;
    }
}

/* MAIN NAV */
.main-header {
    height: 90px;
    border-bottom: 5px solid #323A45;
    transition: height 0.3s ease, padding 0.3s ease;
}

.main-header.shrunk {
    height: 80px;
}

.main-header-inner {
    height: 100%;
}

.main-nav-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-nav-wrapper {
    background: #fff;
}

.main-nav-container {
    height: 100%;
    display: none;
    align-items: center;
    justify-content: space-between;
}

.main-nav-logo img {
    height: 93px;
    max-height: 65px !important;
    transition: height 0.3s ease;
}

.main-header.shrunk .main-nav-logo img {
    height: 50px;
}

.main-nav-menu {
    height: 100%;
}

.main-nav-toggle {
    display: none;
    background: none;
    font-size: 2rem;
    border: none;
    color: #00587C;
}

.main-nav-list {
    height: 100%;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav-item {
    position: relative;
    cursor: pointer;
    min-width: 120px;
}

.main-nav-item button, ul#main-nav-menu li {
    font-size: 1.075rem;
}

.main-nav-link {
    color: #00587C;
    font-family: "Roboto flex";
    font-size: .875rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 1rem;
    border: none;
    background: none;
    text-align: left;
    cursor: inherit;
}

.main-nav-item .submenu {
    position: absolute;
    top: 106%;
    left: 0;
    background: #fff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 200;
    column-count: 1;
    column-gap: 0;
    width: max-content;
    max-width: 50vw;
    min-width: 280px;
    /* calculating the max height of the dropdowns (100vh) with the utility/main nav (155px) and some extra padding (16px) */
    max-height: calc(100vh - 155px - 16px);
    overflow-y: auto;
    overflow-x: hidden;
}

.main-nav-item .submenu.two-column {
    column-count: 2;
    column-fill: auto;
}

@media (min-width: 60em) {
    .main-nav-item .submenu.two-column {
        column-count: 1;
        column-fill: auto;
    }

    .main-nav-item .submenu.two-column li {
        padding: 10px 20px 10px 20px;
    }
}

@media (max-height: 725px) {
    .main-nav-item .submenu.two-column {
        column-count: 2 !important;
    }
}

.main-nav-item .submenu li {
    break-inside: avoid;
    padding: 10px 35px;
}

.main-nav-item .submenu li a {
    display: block;
    white-space: normal;
    color: #00587C;
    text-decoration: none;
}

.main-nav-item.align-submenu-right .submenu {
    left: auto;
    right: 0;
}

.main-nav-item.has-submenu.subnav-open {
    background: #E8E9E9;
}

.main-nav-item.has-submenu.subnav-open .main-nav-link{
    color: #000;
}

.chevron svg {
    transition: transform 0.3s ease;
    transform-origin: center;
}

.chevron svg path {
    transition: fill 0.3s ease;
}

.main-nav-item.subnav-open .chevron svg {
    transform: rotate(180deg);
    fill: pink;
}

.main-nav-item.subnav-open .chevron svg path {
    fill: #000 !important;
}

.submenu li {
    padding: 10px 35px;
    font-size: .875rem;
    font-weight: 400;
}

.submenu li:hover {
    background-color: #E8E9E9;
}

.submenu li a:hover {
    text-decoration: none;
}

/*MOBILE NAV*/
#mobile-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #fff;
    padding-top: 130px;
    margin-bottom: -146px;
}

#mobile-nav.open {
    display: flex;
}

.mobile-nav-toggle {
    border: none;
    background-color: transparent;
}

.hamburger-icon .line {
    stroke: #046B98;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
    transform-box: fill-box;
}

.hamburger-icon.open .line1 {
    transform: translateY(17.34962px) rotate(45deg);
}

.hamburger-icon.open .line2 {
    opacity: 0;
}

.hamburger-icon.open .line3 {
    transform: translateY(-17.3496px) rotate(-45deg);
}

.mobile-nav-list {
    list-style: none;
    padding: 0;
}

.mobile-nav-item {
    border-bottom: 1px solid #b1b6bc !important;
}

.mobile-nav-item:hover {
    background-color: #e9e9e9;
}

.mobile-nav-link {
    font-family: "Roboto flex";
    color: #00587C;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 1.1rem 4rem 1.1rem 2rem;
    background: none;
    border: none;
    font-size: 1.125rem;
}

.mobile-nav-link.active {
    background: rgba(217, 217, 217, 0.40);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    color: #323A45;
    /*offset for headers when auto-scrolling to active nav item*/
    scroll-margin-top: 130px;
}

.mobile-nav-link svg {
    transition: transform 0.3s ease;
    width: 1rem !important;
    height: 1rem !important;
}

.mobile-nav-link.active svg {
    transform: rotate(90deg);
}

.mobile-submenu {
    padding-left: 1.5rem;
    background: #fff;
    margin-top: 5px;
    padding-top: 1.85rem;
    padding-left: 3.5rem;
    padding-bottom: 2rem;
}

.mobile-submenu[hidden] {
    display: none;
}

.mobile-submenu-item {
    list-style: none;
    color: #00587C;
    font-family: "Roboto flex";
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}

.mobile-search {
    background-color: #323A45;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#___gcse_1 {
    width: 100%;
}

@media (max-width: 992px) {
    #main-nav-menu, .main-nav-list {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .main-header {
        height: 80px;
    }
    .main-nav-logo img {
        height: 50px;
        max-height: 70px !important;
    }

    .mobile-nav-toggle svg {
        width: 40px !important;
        height: 45px !important;
    }

    .main-content {
        margin-top: 130px;
    }
}

@media (min-width: 992px) {
    .mobile-nav,
    .mobile-nav-toggle {
        display: none !important;
    }

    .main-nav-container {
        display: flex;
    }
}

@media (min-width: 1280px) {
    .main-nav-link {
        gap: 0.5rem;
        padding: 1rem 1.95rem;
    }
    .main-nav-item:last-child button {
        padding-right: 0;
    }

    .utility-header-link-container {
        grid-gap: 5.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-utility-header.shrunk {
        height: 100px;
    }

    .main-header.shrunk {
        height: 133px;
    }
}

.main-header .main-header-inner .main-nav-wrapper .main-nav-logo img {
    display: block !important;
    border: none !important;
    position: relative !important;
    background: none !important;
}

.thirdNoPad {
    padding-left: 0px !important;
    padding-right: 0px !important;
    height: 241px;
}

.bannerImageFloat {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0px !important;
}

.benefitsPadding {
    padding: 2.5rem;
}

@media (max-width: 800px) {
    .benefitsPadding {
        padding: 2rem;
    }
}

@media (max-width: 767px) {
    .thirdNoPad {
        height: 0px;
    }

    .bannerImageFloat {
        display: none;
    }
}

.branding .header-organization-banner img {
    width: 171px;
}

@media (min-width: 768px) {
    .fixed.compact .header-organization-banner img {
        width: 150px;
        padding-top: 4px;
        padding-bottom: 2px;
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS */
    /*css for ui-benefits section on home page, newsroom, etc. for Internet Explorer*/
    .thirdNoPad {
        height: 0px !important;
        width: 0px !important;
    }

    .bannerImageFloat {
        display: none !important;
    }

    .benefitsPadding {
        padding: 3rem;
    }

    @media (max-width: 1044px) {
        .benefitsPadding {
            padding: 2.5rem;
        }
    }
}

.img-left {
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .homepageBanner {
        height: 400px !important;
    }

    .homepageBannerText p {
        font-size: .9em !important;
    }
}

@media (max-width: 1069px) {
    .heroContent {
        display: block;
    }

    .heroContent p {
        text-align: left !important;
    }

    .homepageBannerText {
        display: none;
    }
}

@media (min-width: 1070px) {
    .heroContent {
        display: none;
    }

    .homepageBannerText {
        display: block;
    }
}

.parentContainer {
    position: relative;
    text-align: center;
    color: white;
}

.homepageBannerText {
    position: absolute;
    top: 16.75%;
    left: 60px;
    padding: .5em 1.5em 1em !important;
}

.section.hero {
    padding-top: 0px;
}

.homepageBannerText h1 {
    font-size: 2.4rem;
    margin-top: 0.2em;
    margin-bottom: 0.55em;
}

.homepageBannerText p {
    font-size: 1.2rem;
}

.homepage-hero-section {
    position: relative;
    min-height: 320px;
    overflow: hidden;
}

.homepage-hero-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1500px;
    height: 100%;
    background-size: cover;
    background-position-x: 75%;
    background-repeat: no-repeat;
    z-index: 0;
}

.homepage-hero-wave {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 1;
}

.homepage-hero-wave svg {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.homepage-hero-section .container {
    position: relative;
    z-index: 1;
    padding: 4rem 1.25rem 0rem 1.25rem;
    min-height: 320px;
}

.homepage-hero-text-container {
    max-width: 75%;
}

.homepage-hero-heading {
    display: none;
    color: white;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
}

.homepage-hero-subheading {
    display: block;
    color: #323A45;
    text-align: left;
    font-family: Montserrat;
    font-size: 2rem;
    font-weight: 700;
    margin-top: 0;
}

.homepage-hero-button-container {
    width: 50%;
    position: absolute;
    bottom: -1rem;
}

.homepage-hero-button-container img {
    width: 100%;
}

@media (min-width: 576px) {
    .homepage-hero-bg {
        background-position-x: 100%;
    }

    .homepage-hero-button-container {
        width: 50%;
        position: relative;
    }
}

@media (min-width: 768px) {
    .homepage-hero-section {
        min-height: 382px;
    }

    .homepage-hero-text-container {
        max-width: 50%;
    }

    .homepage-hero-heading {
        display: block;
        font-size: 2.25rem;
    }

    .homepage-hero-subheading {
        display: none;
    }
}

@media (min-width: 992px) {
    .homepage-hero-text-container {
        max-width: 60%;
        padding-left: 3.125rem;
    }

    .homepage-hero-button-container {
        display: block;
        width:30%;
    }
}

@media (min-width: 1200px) {
    .homepage-hero-text-container {
        max-width: 50%;
    }

    .homepage-hero-heading {
        font-size: 3.75rem;
    }
}

.modern-card-deck-section {
    padding: 4rem 0;
    font-family: "Roboto Flex";
}

.modern-card-deck-section.white {
    background-color: #fff;
}

.modern-card-deck-section.gray {
    background: #EFEFEF;
}

.modern-card-deck-heading {
    color: #000;
    font-family: Montserrat;
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 2rem;
    margin-top: 0;
}

.modern-card-deck-container {
    display: grid;
    grid-gap: 50px;
    justify-items: center;
    list-style: none;
    padding-inline-start: 0;
    align-items: stretch;
}

.modern-card {
    max-width: 400px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 25px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.30);
    transition: box-shadow .2s;
    height: 100%;
    flex: 1;
}

.modern-card:focus {
   outline: 2px solid;
   outline-offset: 4px;
}

.modern-card-deck-container li > article {
    height: 100%;
}

.modern-card-image {
    flex: 1 1 40%;
    background-size: cover;
    background-position: top;
    min-height: 186px;
    max-height: 186px;
}

.modern-card-text-container {
    flex: 1 1 60%;
    color: white;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-family: "Roboto Flex";
    background-color: #323A45;
}

.modern-card-heading {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.modern-card-body-text {
    font-family: "Roboto Flex";
    font-size: 1rem;
    font-weight: 400;
    padding-bottom: .5rem;
}

.modern-card-link-text {
    margin-top: auto;
    font-size: 1.25rem;
    font-weight: 500;
    color: #fff;
    text-align: center;
    padding: 1rem .5rem;
    border-radius: 2rem;
    border: 1px solid #FFF;
    background: #046B99;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    transition: box-shadow, background .2s;
}

.modern-card-link-text:hover {
    background: #035376;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.modern-card-link-text:focus {
    outline: solid 2px #9646ff;
}

@media (min-width: 768px) {
    .modern-card-deck-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .modern-card-deck-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .modern-card-deck-heading {
        font-size: 42px;
    }

    .modern-card:hover {
        box-shadow: 6px 8px 8px 0px rgba(0, 0, 0, 0.65);
    }
}

.modern-card-text-container.gray {
    background-color: #323A45;
}

.modern-card-text-container.darkgray {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), #323A45;
}

.utility-header .flex-row .settings-links {
    min-height: 37px;
}

/********CA Logo styling update***/
.header-cagov-logo img {
    top: 0px;
    height: 25px;
}

/*--lowers the z-index of the EDD Logo in the main nav on mobile
so that it does not interfere with things like the date picker--*/
@media (max-width: 767px) {
    .branding .header-organization-banner a {
        z-index: 5 !important;
    }
}

@media screen and (min-width: 768px) {
    .header-organization-banner-mobile {
        display: none;
    }

    .top-level-nav li:nth-child(1),
    .top-level-nav li:nth-child(2) {
        display: none;
    }

    .settings-links {
        margin-right: 12px;
    }

    .setting-links #LanguageOptions {
        margin-right: 0px;
    }
}

.top-level-nav li:nth-child(1) a span,
.top-level-nav li:nth-child(2) a span {
    display: none;
}

@media screen and (max-width: 767px) {
    .header-organization-banner-desktop {
        display: none;
    }

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

        .settings-links a:nth-child(3),
        .settings-links a:nth-child(4) {
            display: none;
        }

    .utility-header .flex-row .settings-links a {
        margin-right: 12px;
    }

    .top-level-nav li:nth-child(1),
    .top-level-nav li:nth-child(2) {
        background-color: #F2F2F2;
        border-top: 1px solid #CCC;
        min-height: 60px;
    }

    .top-level-nav li:nth-child(2) {
        border-bottom: 1px solid #CCC;
    }

        .top-level-nav li:nth-child(1) a,
        .top-level-nav li:nth-child(2) a {
            color: #555;
            padding: 18px 0px 18px 5px;
        }
}

@media (max-width: 976px) {
    #LanguageOptions {
        margin-left: 3px !important;
    }
}

/*---------------------*/
/* Custom Print Screen */
/*---------------------*/
@media print {
    #main-content {
        padding-top: 0px !important;
    }

    .main-primary {
        margin-top: 0px !important;
        width: 100% !important;
    }

    body {
        font-size: 1rem !important;
    }

    #header {
        display: none;
        height: 0px;
    }

    .section section-impact p-b-lg {
        display: none;
    }

    .section.section-impact.p-b-lg div.container {
        display: none;
    }

    #footer {
        display: none;
    }
}
@media print and (min-width: 576px) {
    .main-content > .section,
    .two-column .main-content > .section {
        max-width: unset !important;
    }
}
.quote-block {
    position: relative;
    background-color: #114A66;
    padding: 4rem 1rem;
    margin-bottom: -2px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 400px;
    overflow: hidden;
    font-family: Montserrat;
}

.quote-block-container {
    display: flex;
    justify-content: center;
    background-color: #114A66;
}

.quote-block-text {
    font-size: 1.5rem;
    font-weight: 600;
    max-width: 800px;
    border-left: none;
    z-index: 50;
}

.quote-block-attribution {
    color: white;
    display: block;
    margin-top: 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: right;
}

.quote-block-attribution::before {
    content: "\2011 \00A0";
}

.quote-block-top-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 0;
    shape-rendering: auto;
    image-rendering: auto;
}

.quote-block-bottom-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: auto;
}

@media (max-width: 576px) {
    .quote-block {
        padding-bottom: 3rem;
    }
}

@media (min-width: 768px) {
    .quote-block-text {
        font-size: 1.75rem;
    }

    .quote-block-attribution {
        font-size: 1.5rem;
    }
}

@media (min-width: 992px) {
    .quote-block {
        padding: 4rem 2rem 4rem;
    }

    .quote-block-text {
        font-size: 1.875rem;
        margin-bottom: 4rem;
    }
}

@media (min-width: 1500px) {
    /*.quote-block {
        background-color: #fff;
        background-image: linear-gradient( to bottom, #ffffff 0%, #ffffff 50%, #EFEFEF 50%, #EFEFEF 100% );
    }

    .quote-block-top-wave {
        display: none;
    }

    .quote-block-bottom-wave {
        display: none;
    }

    .quote-block-container {
        border-radius: 60px;
    }*/

    .quote-block-text {
        /*margin-top: 6rem;*/
        margin-bottom: 6rem;
    }
}

.section:has(.responsive-header-container) {
    padding-top: 0;
}

.responsive-header-translate-container {
    margin-bottom: 24px;
}

.responsive-header-container.white .responsive-header-title,
.responsive-header-container.white .responsive-header-subtitle {
    color: #333333;
}

.responsive-header-container {
    margin-bottom: 24px;
}

.responsive-header {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 112px;
    display: flex;
    flex-direction: row;
}

.responsive-header-text-container {
    display: none;
}

.responsive-header-desktop-language-toggle-container {
    display: none;
}

.responsive-header-title {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 0;
}

.responsive-header-subtitle {
    font-size: 1.625rem;
}

@media screen and (min-width: 768px) {
    .responsive-header {
        min-height: 151px;
    }  
}

@media screen and (min-width: 991px) {
    .responsive-header-container {
        margin-bottom: 24px;
    }

    .responsive-header-mobile-text-container {
        display: none;
    }

    .responsive-header-text-container {
        display: none;
        display: flex;
        grid-gap: .5rem;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding-left: 32px;
        padding-right: 16px;
        max-width: 50%;
        margin-top: 32px;
    }

    .responsive-header-title {
        font-size: 3rem;
    }

    .responsive-header-subtitle {
        font-size: 1.9rem;
        margin-bottom: 3rem;
        margin-top: .5rem;
        line-height: 1.95rem;
    }

    .responsive-header {
        min-height: 280px;
    }

    .responsive-header-container.white .responsive-header-title,
    .responsive-header-container.white .responsive-header-subtitle {
        color: #fff;
    }

    .responsive-header-desktop-language-toggle-container {
        display: block;
    }
}

/*
-------------------
Search Page Styles
-------------------
*/
.custom-search .gsc-results-wrapper-visible,
.custom-search .gsc-table-result {
    font-family: "Source Sans Pro", sans-serif !important;
}

.custom-search .gsc-result {
    font-size: 16px !important;
    padding: 14px 0 !important;
}

.custom-search .gsc-result-info {
    font-size: 16px !important;
}

.custom-search .gsc-table-result {
    font-size: 16px !important;
}

.custom-search .gs-title {
    margin-bottom: 0.2rem;
    font-size: 16px !important;
    font-weight: 600;
    background: none !important;
}

.custom-search .gsc-result .gs-title a {
    text-decoration: underline !important;
}

.custom-search .gs-title > b {
    font-size: 16px !important;
}

.custom-search .gs-title:hover,
.custom-search .gs-title:hover * {
    color: #02374e !important;
}

.custom-search .gsc-cursor {
    font-size: 20px;
}

.custom-search .gsc-cursor-page {
    margin-right: 0.5rem !important;
    padding: 0 0.5rem;
}

.custom-search .gsc-cursor-current-page {
    background-color: #046B99 !important;
    color: white !important;
    font-weight: normal !important;
    border-radius: 2px;
}

.custom-search .gcsc-more-maybe-branding-root {
    display: none;
}


#search-page.custom-search .gsc-clear-button,
#search-page.custom-search .close-search-btn {
    display: none !important;
}

.custom-search .gsc-result-info-container {
    display: none;
}

.custom-search .gsc-orderby-container {
    text-align: left !important;
}

.custom-search .gsc-above-wrapper-area {
    border: none !important;
}

.custom-search .gsc-orderby > div {
    display: block !important;
}

.custom-search .gsc-orderby-label {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: black !important;
}

.custom-search .gsc-option-menu {
    left: 0 !important;
    max-width: 25%;
}

.custom-search .gsc-above-wrapper-area {
    margin-bottom: 1.5em;
}

.custom-search .gsc-selected-option-container {
    display: block !important;
    max-width: 100% !important;
    text-align: left !important;
    background: none !important;
    color: black !important;
    font-weight: normal !important;
    font-size: 16px !important;
    padding: 5px 28px 5px 6px !important;
    line-height: 17px !important;
}

.custom-search .gsc-option-menu {
    max-width: 100% !important;
}

.custom-search .gsc-option {
    font-size: 16px !important;
}

.custom-search input.gsc-input {
    width: 100% !important;
    height: 50px !important;
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
    border-radius: 0.3rem 0 0 0.3rem !important;
    border: 1px solid #343a40 !important;
}

.custom-search .gsc-input-box {
    border: none !important;
}

.custom-search button.gsc-search-button {
    margin-left: 0 !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 0 0.3rem 0.3rem 0 !important;
    background-color: #007bff !important;
    border: none !important;
}

.custom-search td.gsc-search-button::before {
    display: none;
}

.custom-search .ca-gov-icon-search::before {
    position: absolute;
    top: 2px;
    right: 21px;
}

.custom-search .gs-visibleUrl {
    color: #323a45 !important;
}

@media (min-width: 576px) {
    .custom-search .gsc-selected-option-container, .custom-search .gsc-option-menu {
        max-width: 50% !important;
    }
}

/*
-------------------------
Search Callout Styles
-------------------------
*/
.search-engine-callout-container {
    display: none;
    flex-direction: column;
    gap: 2rem;
    margin: 16px 0 32px;
}

.search-engine-callout,
.search-engine-callout-2 {
    border-radius: 8px;
    border: 1px solid var(--Gray-1, #888);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    display: flex;
    padding: 24px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.search-engine-callout-header {
    color: var(--Primary, #056B99);
    font-size: 20px;
    font-weight: 600;
    background-image: none !important;
    margin: 0;
}

.search-engine-callout-header-link {
    background-image: none !important;
}

.search-engine-callout-description {
    color: var(--Black, #333);
    font-family: "Source Sans Pro";
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

@media screen and (min-width: 768px) {
    .search-engine-callout-container {
        flex-direction: row;
        margin: 0;
    }

    .search-engine-callout,
    .search-engine-callout-2 {
        width: 50%;
        margin: 11px 0 18px;
    }
}

/* -----------------------------------------
 SERVICE TILE - No Panel Drop Down
----------------------------------------- */
.service-tile-no-panel {
    float: left;
    width: 100%;
    /* Need to keep the two column longer than bootstrap has .make-*-column for */
    padding-left: 0;
    padding-right: 0;
    position: relative;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: center;
    outline: none;
    min-height: 240px;
    color: #E1F2F7;
    background: #046B99;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

    .service-tile-no-panel .icon-fallback {
        min-width: 100%;
        line-height: 1;
        position: absolute;
        bottom: 0;
        left: 0;
        vertical-align: middle;
        display: inline-block;
        height: 100%;
        -webkit-transition: opacity .3s;
        transition: opacity .3s;
    }

    .service-tile-no-panel .teaser {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #000;
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 30%, #000000 100%);
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 30%, #000000 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc000000', endColorstr='#000000', GradientType=0);
        color: #fff;
        padding: 10px 0;
    }

        .service-tile-no-panel .teaser .title {
            margin: 5px 0 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
            -webkit-transition: all .3s;
            transition: all .3s;
        }

            .service-tile-no-panel .teaser .title:hover {
                color: #FDB81E;
            }

    .service-tile-no-panel:focus .teaser .title {
        color: #FDB81E;
    }

@media (min-width: 450px) {
    .service-tile-no-panel {
        width: 50%;
    }
}

@media (min-width: 768px) {
    .service-tile-no-panel {
        min-height: 280px;
        float: left;
        width: 50%;
    }
}

@media (min-width: 992px) {
    .service-tile-no-panel {
        min-height: 240px;
        float: left;
        width: 25%;
    }
}

@media (min-width: 1280px) {
    .service-tile-no-panel {
        min-height: 320px;
    }
}

.stats-block-divider-desktop {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    width: 100%;
    display: none;
}

.stats-block-divider-mobile {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    width: 100%;
}

.stats-block-section {
    position: relative;
    padding: 0;
}

.stats-block-inner {
    position: relative;
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 15% 0 2rem;
}

    .stats-block-inner::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #046B99;
        opacity: 0.9;
        z-index: 11;
    }

.stats-block-content {
    position: relative;
    z-index: 11;
}

.stats-block-heading {
    font-size: 2rem;
    margin-bottom: 0;
    font-weight: 700;
    color: white;
}

h3.stats-block-heading {
    font-size: 1.5rem;
}

.stats-list-container-mobile {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2rem;
    margin: 2.6875rem 0;
}

.stats-list-container-desktop {
    display: none;
}

.stat-item {
    color: white;
    text-align: center;
}

.stats-list-container-mobile .stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 1.5rem;
    width: 100%;
    flex-wrap: wrap;
}

.stat-circle-container {
    min-width: 160px;
    height: auto;
    aspect-ratio: 1;
    border: 7px solid #FDB81D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #046B99;
}

.stat-content {
    padding: 0 10px;
}

.stat-number {
    font-family: Montserrat;
    font-size: 2rem;
    font-weight: 700;
}

.stat-description-mobile {
    text-align: left;
    font-size: 1.25rem;
    font-weight: 600;
}

.stats-block-sub-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.stats-subheading {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.stats-link {
    font-size: 1.5rem;
    display: inline-block;
    padding: .9rem;
    border-radius: 30px;
    background: #FFF;
    background-image: none !important;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    text-align: center;
    font-weight: 500;
    color: #5E5E6A;
    min-width: 350px;
}

@media (min-width: 370px) {
    .stats-list-container-mobile .stat-item {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
}

@media (min-width: 768px) {
    .stat-circle-container {
        max-width: 308px;
    }

    .stats-block-inner {
        padding-bottom: 3rem;
    }

    .stats-block-heading {
        font-size: 2rem;
        margin-left: 25px;
    }

    h3.stats-block-heading {
        font-size: 1.25rem;
    }

    .stats-list-container-mobile {
        display: none;
    }

    .stat-description-mobile {
        font-size: 1.5rem;
    }

    .stats-list-container-desktop {
        margin: 2.5rem 0 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 3rem;
    }

    .stat-number {
        font-size: 3.75rem;
        font-weight: 700;
    }

    .stats-subheading {
        font-size: 2.25rem;
        margin-left: 25px;
    }

    .stats-link {
        min-width: 75%;
    }

    .stat-description-desktop {
        font-size: 1.25rem;
    }
}

@media (min-width: 992px) {
    .stats-block-divider-desktop {
        display: block;
    }

    .stats-block-divider-mobile {
        display: none;
    }

    .stats-block-heading {
        font-size: 2.5rem;
    }

    h3.stats-block-heading {
        font-size: 1.75rem;
    }

    .stats-list-container-desktop {
        grid-template-columns: repeat(4, 1fr);
    }

    .stat-number {
        font-size: 2.5rem;
    }

    .stat-description {
        font-size: 0.875rem;
    }

    .stats-link {
        min-width: 0;
        font-size: 1rem;
    }

    .stats-block-sub-container {
        flex-direction: row;
        grid-gap: 2rem;
    }

    .stats-subheading {
        font-size: 1.5rem;
        max-width: 50%;
    }
}

/* =============================================================================
   Tables
   ========================================================================== */
/*overriding for new template that moved table caption to bottom of table - 
    moving back to top so caption can be used as title for accessibility purposes */
caption {
    padding-left: 0.75rem;
    color: #212529;
    text-align: left;
    font-weight: bold;
    caption-side: top;
}

.table_column_10 {
    width: 10%;
}

.table_column_15 {
    width: 15%;
}

.table_column_30 {
    width: 30%;
}

.table_column_sm {
    width: 20%;
}

.table_column_med {
    width: 40%;
}

.table_column_lg {
    width: 60%;
}

.table_column_qtr {
    width: 25%;
}

.table_column_half {
    width: 50%;
}

.table_column_3qtr {
    width: 75%;
}

.center-div-80 {
    margin: auto;
    width: 80%;
}

.center-div-50 {
    margin: auto;
    width: 50%;
}