@charset "utf-8";
/* CSS Document - Custom styles that overwrite the template CSS code*/

/* Social share icons in the utility header only load a social sharing window when they have the
proper .ca-gov-icon-share-* classes, so we are restyling the .ca-gov-icon-share-* classes to look 
like the current .ca-gov-icon-* style on CA.gov (which don't work properly for social sharing 
without inline JS */

.utility-links.social-media-links [class^="ca-gov-icon-share-"] {
  color: #fff !important;
}

.utility-links.social-media-links .ca-gov-icon-share-facebook::before {
  content: "\e616" !important;
}

.utility-links.social-media-links .ca-gov-icon-share-twitter::before {
  content: "\e619" !important;
}

.utility-links.social-media-links .ca-gov-icon-share-email::before {
  content: "\e609" !important;
}

/* Vertically center the links in the utility header */
.utility-header .flex-row .settings-links {
    padding-top: 7px;
}

.utility-header .flex-row .social-media-links .header-cagov-logo {
    padding-left: 0;
}

/* We want the headings in the featured-footer and main-secondary to be one level smaller  */
.featured-footer h2
.main-secondary > h2 {
  font-size: 24.64px;
  font-size: 1.54rem;
  margin-top: 1em;
  margin-bottom: 0.7em;
}

.featured-footer h3
.main-secondary > h3 {
  font-size: 20px;
  font-size: 1.25rem;
  margin-top: 1.33em;
  margin-bottom: 1em;
}

.featured-footer h4
.main-secondary > h4 {
  font-size: 16px;
  font-size: 1rem;
  margin-top: 1.67em;
  margin-bottom: 1.3em;
}

.featured-footer h5
.main-secondary > h5 {
  font-size: 13.92px;
  font-size: 0.87rem;
  margin-top: 1.67em;
  margin-bottom: 1.3em;
}

/* FIX: breadcrumb wrapping doesn't look good on mobile  */

.breadcrumb {
    margin-bottom: 0.5rem;
}

.breadcrumb li {
    margin-bottom: 0.5rem;
    height: auto;
    line-height: 1.45rem;
}

@media (min-width: 768px) {
    .news-item .thumbnail {
        float: left;
        width: 20%;
    }
}

@media (min-width: 992px) {
  .news-item .thumbnail {
    float: left;
    width: 20%;
  }
}

@media (min-width: 1200px) {
    .news-item .thumbnail {
        float: left;
        width: 20%;
    }
}


.utility-header .quarter, .utility-header .three-quarters, .utility-header .third, .utility-header .two-thirds  {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 4px;
  padding-left: 80px;
}


@media (min-width: 768px) {
  .utility-header .quarter {
    float: left;
    width: 25%;
  }
  .utility-header .three-quarters {
    float: left;
    width: 75%;
  }
  .utility-header .third {
    float: left;
    width: 33.33333%;
  }
  .utility-header .two-thirds {
    float: left;
    width: 66.66667%;
  }
}

@media (max-width: 767px) {
  .utility-header .quarter, .utility-header .three-quarters, .utility-header .third, .utility-header .two-thirds  {
    padding-top: 2px;
    float: left;
  }
  .utility-header .quarter {
    padding-left: 70px;
    padding-right: 0 !important;
    width: 25%;
  }
  .utility-header .three-quarters {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 75%;
  }
  .utility-header .third {
    padding-left: 70px;
    padding-right: 0 !important;
    width: 33.33333%;
  }
  .utility-header .two-thirds {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 66.66667%;
  }
  .utility-header .hide-mobile {
    display: none;
  }
}

/* CA.gov doesn't offer wrapping columns for text or lists. I want to have that available.   */

.columns3 {
    column-count: 3;
} 


.columns4 {
    column-count: 4;
} 

@media (max-width: 767px) {
  .columns3 {
    column-count: 1;
  } 

  .columns4 {
    column-count: 2;
  }
} 


/* -----------------------------------------
   SUBSITE BRAND BAR -
----------------------------------------- */
.subsite-bar {
}

.subsite {
    font-size: 1rem;
}

.subsite-bar a:not(.btn) {
  color: whitesmoke;
  text-decoration: none;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.subsite-bar a:not(.btn):hover, .subsite-bar a:not(.btn):focus {
  color: #FDB81E;
  text-decoration: underline;
}

.subsite-bar a:not(.btn):focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.subsite-bar ul {
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.subsite-bar ul::after {
  display: block;
  clear: both;
  content: "";
}

.subsite-bar ul > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}

.subsite-bar ul .list-inline-item {
  display: inline-block;
}

.subsite-bar ul .list-inline-item:not(:last-child) {
  margin-right: 5px;
}

@media (max-width: 767px) {
  .subsite-bar ul li {
    width: 50%;
    float: left;
    margin-right: 0 !important;
  }
  .subsite-bar ul a {
    display: block;
    margin-bottom: 11.5px;
  }
}

@media (max-width: 767px) {
  .subsite-bar .socialsharer-container {
    width: 100%;
    float: inherit !important;
  }
  .subsite-bar .socialsharer-container li {
    width: auto;
    margin-left: 0;
  }
}

.owl-item .scLooseFrameZone {
    height: 100%;
}

/* Pagination on the List pages */
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 22px 0;
    border-radius: 0
}

    .pagination > li {
        display: inline
    }

        .pagination > li > a,
        .pagination > li > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            line-height: 1.42857143;
            text-decoration: none;
            color: #428bca;
            background-color: #fff;
            border: 1px solid #ddd;
            margin-left: -1px
        }

        .pagination > li:first-child > a,
        .pagination > li:first-child > span {
            margin-left: 0;
            border-bottom-left-radius: 0;
            border-top-left-radius: 0
        }

        .pagination > li:last-child > a,
        .pagination > li:last-child > span {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0
        }

        .pagination > li > a:hover,
        .pagination > li > span:hover,
        .pagination > li > a:focus,
        .pagination > li > span:focus {
            color: #2a6496;
            background-color: #d6d6d6;
            border-color: #ddd
        }

    .pagination > .active > a,
    .pagination > .active > span,
    .pagination > .active > a:hover,
    .pagination > .active > span:hover,
    .pagination > .active > a:focus,
    .pagination > .active > span:focus {
        z-index: 2;
        color: #fff;
        background-color: #046B99;
        border-color: #046B99;
        cursor: default
    }

    .pagination > .disabled > span,
    .pagination > .disabled > span:hover,
    .pagination > .disabled > span:focus,
    .pagination > .disabled > a,
    .pagination > .disabled > a:hover,
    .pagination > .disabled > a:focus {
        color: #777;
        background-color: #fff;
        border-color: #ddd;
        cursor: not-allowed
    }

.pagination-lg > li > a,
.pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 20px
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px
}

.pagination-sm > li > a,
.pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 14px
}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px
}

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px
}

/* For Navigation Alignment in Edit Mode */
.top-level-nav > .nav-item > .scEnabledChrome {
    text-align: center;
}

/* Remove extra padding on the 2-column pages */
.two-column .main-content .main-primary {
    padding-left: 0;
}

.two-column .main-content .main-secondary {
    padding-right: 0;
}

/* Remove top margin from all H1's */
h1 {
    margin-top: 0;
}

/* Move the CA logo on the top utility bar to the left */
.header-cagov-logo img {
    left: 16px;
}

/* Page Navigation */
.main-secondary > .list-standout {
    background: #f0f0f0;
    padding: 12px 1.5em;
    margin-bottom: 22px;
}

/* Remove Top margin for H2 in section */
.section > .container > .row > .half > h2 {
    margin-top: 0;
}

/*Featured Links Bar CSS*/
.featured-links-bar {
    padding-top: 23px 0;
    background: #222;
}

.featured-links-bar .featured-links a:not(.btn) {
    color: whitesmoke;
    text-decoration: none;
    display: block;
    margin-top: 11.5px;
    margin-bottom: 11.5px;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    background-image: none;
}

.featured-links-bar a:not(.btn):hover, .featured-links-bar a:not(.btn):focus {
    color: #FDB81E;
    text-decoration: none;
}

.featured-links-bar a:not(.btn):focus {
    outline: none;
    background-repeat: no-repeat;
    outline-offset: -2px;
}

/* Make images and tables responsive in Rich text*/
.rich-text img {
    display: block;    
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.rich-text::after {
    display: block;
    content: "";
    clear: both;
}

.goog-te-gadget-icon {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
}

#google_translate_element {
    color: transparent !important;
    
}

.header-slideshow-banner{
    height:325px !important;
}

/* Moves carousel buttons to top of image on small screens to prevent overlap with text. */
@media (max-width: 767px) {
    .header-slideshow-banner .banner-pager, .header-slideshow-banner .banner-play-pause {
        top: 20px !important;
    }
}

.section-standout .published, .section-inverted .published, .section-primary .published{
    color: white !important;
}

/*Alert Banner*/
.container .alert-level {
    padding-left: 0;
    margin-left: 0;
}

.pagePlaceholder > div {
    padding-bottom: 20px;
}

/* -----------------------------------------
   MAKE LIST ITEMS WRAP FLOATED IMAGES
----------------------------------------- */

.rich-text ol, .rich-text ul {
    margin-left: 1.5em;
    padding-left: 0;
}

.rich-text li {
    position: relative;
    left: 1em;
    padding-right: 1em;
}

.banner-pager, .banner-play-pause {
    top: auto !important;
}

.figure-medium {
    max-width: 400px;
    float: left;
    margin-right: 30px;
}

/* Active button highlight */
.btn-default.toggle-active {
    background-color: #E1F2F7;
}

/*Added form NextGen Siteimprove*/ 
.owl-carousel .owl-stage-outer,
.header-slideshow-banner {
    overflow: visible;
}


.alert-text a {
    background-image: linear-gradient(to right,#046b99 50%,transparent 50%);
    background-repeat: repeat-x;
    background-size: 2px 1px;
    background-position: center bottom 4%;
    background-origin: padding-box;
    text-decoration: none !important;
}

.figure-caption {
    color: #616A70
}

/* Fix Alert Banner Overlap Issue */

.alert-banner-custom {
    overflow: hidden;
}

.global-header.compact .alert-banner{
    overflow:hidden;
}

.section.cleanca-spotlight-banner {
    padding-bottom: 0px!important;
}

/* Fix for new Siteimprove issue - Interactive element does not meet minimum size nor spacing*/
#main-content .breadcrumb a {
    display: block;
    min-width: 25px;
    min-height: 25px;
}
/* CHG0036160 - Fix for new Siteimprove issue - Interactive element does not meet minimum size nor spacing*/
    #main-content .main-primary .breadcrumb li.active { padding-top:10px; } 
    .owl-item .slide a { display:block;min-width:25px;min-height:25px; }
    .main-content a:not(.btn), .main-secondary a:not(.btn), .main-content a:not(.btn):hover, .main-secondary a:not(.btn):hover, .main-primary ul li a, .main-secondary ul li a, .rich-text ul li a, .card-primary .rich-text ul li a:not(.btn), .card-standout a:not(.btn), .section-standout a:not(.btn), .group .section-primary a:not(.btn), .group .section-inverted ul a:not(.btn), .section-impact a:not(.btn) { background-image:none !important;text-decoration:underline !important;text-underline-offset:4px; }
    .main-content a:not(.btn):hover, .main-secondary a:not(.btn):hover { text-decoration-color:#02374e !important; }
    .section-impact .main-content a:not(.btn):hover, .section-impact .main-secondary a:not(.btn):hover { text-decoration-color:#50aee4 !important; }
    a strong, a span { display: contents; }
    .section-impact .container a:not(.btn), .section-standout .container a:not(.btn), .section-primary .container a:not(.btn), .section-inverted .container a:not(.btn) { text-decoration:underline !important;display:inline-block; }
    .main-primary p, .main-secondary p { line-height:26px;margin-bottom:1em; }
    .main-primary a, .main-secondary a, .main-primary p a, .main-secondary p a { line-height: 25px;min-width:25px;display:inline-flex;gap:4px;padding:6px;text-decoration:underline !important; }
    .main-primary p a em, .main-secondary a em { padding:0;margin:0;border:0;outline:0;line-height:25px; }
    .main-primary p em a, .main-secondary em a, .main-primary p em a em, .main-secondary em a em { padding:0;margin:0;border:0;outline:0;line-height:25px; }
    .main-primary h2 a, .main-primary h3 a, .main-primary h4 a, .main-secondary h2 a, .main-secondary h3 a, .main-secondary h4 a { line-height: 1.2;display: inline;text-decoration:underline !important;text-underline-offset:4px; }
    .main-primary ul li a, .main-secondary ul li a, .group a, .rich-text ul li a { padding:3px !important; }
    .group .rich-text ul li :not(a), .group .rich-text ul li ul li :not(a), .rich-text li { padding: 3px; }
    .card-impact ul li a:not(.btn), .section-impact ul li a:not(.btn) { margin: 0px 0px 10px 15px; }
    ul.list-understated a { margin: 0px 0px 14px 18px; }
   .list-overstated li.open:before, .list-overstated li:before, .list-understated li.open:before, .list-understated li:before { top: 10px; }


/* resolve ADA color contrast issues  */


   .main-secondary .panel-overstated .panel-body a:not(.btn), .shadow2 a:not(.btn), .card-standout a:not(.btn) { background-image:none !important;text-decoration:underline !important;text-underline-offset:4px; }

   .pagination li a { color: rgb(4 107 179); }



/* 5-21-2025 CHG0039125 resolve pagination ADA error */
ul.pagination li, ul.pagination li a {
    min-width: 30px;
    min-height: 30px;
}