@import url("variables.1eeefd183871.css");

@font-face {
  font-family: "Public Sans";
  font-weight: var(--bold-font-weight);
  font-style: normal;
  src: local("PublicSans"), url("../fonts/PublicSans-Bold.5f167bcf9f71.woff") format("woff");
}

html {
  overflow-y: auto;
  scroll-padding-top: 101px; /* Header Height (80px) + Skip Nav Height (21px) = 101px */
}

/* reCAPTCHA: Do not display badge */
.grecaptcha-badge {
  display: none;
}

body {
  font-size: 100%;
  color: var(--text-primary-color);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
h5,
h6,
p,
a,
label,
span,
button,
input,
small,
li {
  font-family: var(--bs-body-font-family);
}

/* Paragraph: Body Text */
/* Same sizes for all screen widths */
p,
.p,
span,
.span,
li {
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5));
  line-height: var(--bs-body-line-height);
  margin: 0;
}

/* Utility Classes */

@media (min-width: 992px) {
  /* Utility Class: Padding bottom 64px on Desktop */
  /* Pair with pb-4 on Form pages to get 24px on Mobile, 64px on Desktop */
  .pb-lg-8 {
    padding-bottom: 64px !important;
  }

  .pt-lg-8 {
    padding-top: 64px !important;
  }
}

.pt-8 {
  padding-top: 64px;
}

.fs-base {
  font-size: var(--bs-body-font-size);
}

.ls-base {
  letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5));
}

.list-disc {
  list-style-type: disc;
}

/* Links */
/* Same sizes for all screen widths: 18px */
a:not(.btn):not(.card) {
  color: var(--primary-color);
  text-decoration: underline;
  text-decoration-style: solid;
  font-weight: var(--bold-font-weight);
  border-radius: var(--focus-border-radius);
}

a:hover:not(.btn) {
  color: var(--hover-color);
  text-decoration: underline;
}

a:focus:not(.btn):not(.card):not(.footer-link):not(#skip-to-content),
a:focus-visible:not(.btn):not(.card):not(.footer-link):not(#skip-to-content) {
  outline: var(--focus-style) !important;
  outline-offset: var(--focus-outline-offset) !important;
}

a:visited:not(.btn) {
  color: var(--selected-color);
}

:root {
  --external-link-icon-size: var(--font-size-24px);
  --external-link-icon-size-small: var(--font-size-18px);
}

a[target="_blank"]::after {
  content: " ";
  background-color: currentColor;

  mask-image: url("/static/img/external-link.e1a205707354.svg"),
    linear-gradient(transparent, transparent);
  mask-position: center center;
  -webkit-mask-image: url("/static/img/external-link.e1a205707354.svg"),
    linear-gradient(transparent, transparent);
  -webkit-mask-position: center center;

  display: inline-block;
  position: relative;
  width: var(--external-link-icon-size);
  height: var(--external-link-icon-size);
  margin-left: 2px;
  vertical-align: text-bottom;
}

.form-text a[target="_blank"]::after {
  width: var(--external-link-icon-size-small);
  height: var(--external-link-icon-size-small);
  mask-size: contain;
  -webkit-mask-size: contain;
}

/* Headlines */
/* All headlines */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
  font-weight: var(--bold-font-weight);
  margin: 0;
}

/* H1 */
/* Mobile first: Screen width up to 992px - 24px (24rem/16 = 1.5rem) and left */
/* Screen width above 992px - 35px (35rem/16 = 2.1875rem) and centered */
:root {
  --h1-font-size: var(--font-size-24px);
  --h1-letter-spacing-percent: var(--letter-spacing-3);
}

@media (min-width: 992px) {
  :root {
    --h1-font-size: var(--font-size-35px);
    --h1-letter-spacing-percent: var(--letter-spacing-5);
    --font-size-35px: 2.1875rem;
  }
}

h1,
.h1 {
  font-size: var(--h1-font-size);
  padding-top: calc(72rem / 16);
  line-height: var(--heading-line-height);
  letter-spacing: calc(var(--h1-font-size) * var(--h1-letter-spacing-percent));
}

/* H2 */
/* Same sizes for all screen widths: 24px (24rem/16 = 1.5rem) */
/* Also has a class which can be applied to non-headline elements */
h2,
.h2 {
  font-size: var(--font-size-24px);
  line-height: var(--heading-line-height);
  letter-spacing: calc(var(--font-size-24px) * var(--letter-spacing-3));
}

@media (max-width: 992px) {
  /* H2: 20px, up to Small width */
  /* Only used on Help Pages */
  .h2-sm {
    font-size: var(--font-size-20px);
    line-height: var(--heading-line-height);
    letter-spacing: calc(var(--font-size-20px) * var(--letter-spacing-5));
  }

  /* H2: 18px, up to Small width */
  /* Only used on Landing Page */
  .h2-sm-p {
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--heading-line-height);
    letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5));
    margin: 0;
  }
}

/* H3 */
/* Same sizes for all screen widths: 20px (20rem/16 = 1.25rem) */
/* Also has a class which can be applied to non-headline elements */
h3,
.h3 {
  font-size: var(--h3-font-size);
  line-height: var(--heading-line-height);
  letter-spacing: calc(var(--h3-font-size) * var(--letter-spacing-5));
}

/* H4 */
/* Used for Agency Selector card, agency name */
:root {
  --h4-font-size: var(--font-size-18px);
  --h4-letter-spacing-percent: var(--letter-spacing-3);
}

@media (min-width: 992px) {
  :root {
    --h4-font-size: var(--font-size-20px);
    --h4-letter-spacing-percent: var(--letter-spacing-5);
  }
}

h4,
.h4 {
  font-size: var(--h4-font-size) !important; /* override Bootstrap class */
  letter-spacing: calc(
    var(--h4-font-size) * var(--h4-letter-spacing-percent)
  ) !important;
  line-height: var(--h4-line-height) !important;
}

/* Header */
#header-container {
  height: 80px;
}

/* Language button */
#header-container .btn-outline-light {
  --bs-btn-font-size: var(--bs-body-font-size);
  --bs-btn-padding-y: 3.5px;
  --bs-btn-padding-x: 29.01px;
}

/* Main */
/* The minimum height is calculated by 100 viewport height minus Header and Footer height */
main {
  min-height: var(--main-content-min-height);
}

#skip-to-content {
  left: unset !important;
  transform: none;
  overflow: hidden;
  height: 0;
}

#skip-to-content:focus {
  height: auto;
  outline: none !important;
  box-shadow: none;
  padding: 1rem 0;
  background: var(--bs-white);
}

#skip-to-content:focus span {
  outline: var(--focus-style) !important;
  outline-offset: var(--focus-outline-offset) !important;
  font-weight: var(--bold-font-weight);
  border-radius: var(--focus-border-radius);
}

/* Footer */
:root {
  --footer-background-color: var(--dark-color);
  --footer-link-color: #73b3e7;
  --footer-link-hover-color: #0062ff;
  --footer-link-visited-color: #9b74d7;
  --footer-link-font-weight: var(--bold-font-weight);
  --main-content-min-height: calc(100vh - 246px);
  /* 246px = Header Height (80px) + (Footer Link (50px) * Number of Links (2)) + Underline Height (2px) + Footer Margin Top (64px) */
}

@media (min-width: 992px) {
  :root {
    --main-content-min-height: calc(100vh - 194px);
    /* 194px = Header Height (80px) + Footer Height (50px) + Footer Margin Top (64px) */
  }
}

footer {
  background: var(--footer-background-color);
  margin-top: 64px;
}

footer .footer-links li a.footer-link {
  color: var(--footer-link-color);
  font-weight: var(--footer-link-font-weight);
  font-size: var(--bs-body-font-size);
  text-decoration: underline;
  letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5));
  line-height: 50px;
}

footer .footer-links li a.footer-link:hover {
  color: var(--footer-link-hover-color);
}

footer .footer-links li a.footer-link:focus,
footer .footer-links li a.footer-link:focus-visible {
  outline: 3px solid var(--secondary-bg-color) !important;
  outline-offset: 2px !important;
}

footer .footer-links li a.footer-link:active,
footer .footer-links li a.footer-link:visited {
  color: var(--footer-link-visited-color);
}

/* Buttons */
/* Primary Button: Use all three classes: btn btn-lg btn-primary */
/* Set button width in parent with Bootstrap column */
/* Height: 60px on Desktop; 72 on mobile*/

:root {
  --primary-button-padding: 19px 0;
}

@media (min-width: 992px) {
  :root {
    --primary-button-padding: 13px 0;
  }
}

.btn,
.btn-lg {
  --bs-btn-border-radius: var(--border-radius);
  --bs-btn-hover-bg: #ffffff;
}

.btn.btn-lg.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  border-width: 2px;
  font-weight: var(--medium-font-weight);
  font-size: var(--font-size-20px);
  letter-spacing: calc(var(--font-size-20px) * var(--letter-spacing-2));
  width: 100%;
  padding: var(--primary-button-padding);
}

.btn.btn-lg.btn-primary:hover {
  background-color: var(--hover-color);
  border-color: var(--hover-color);
}

.btn.btn-lg.btn-primary:focus,
.btn.btn-lg.btn-primary:focus-visible,
.btn.btn-lg:focus,
.btn.btn-lg:focus-visible,
.btn-outline-dark:focus,
.btn-outline-dark:focus-visible,
.btn-outline-light:focus,
.btn-ouline-light:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-text {
  font-weight: var(--medium-font-weight);
  font-size: var(--font-size-20px);
  letter-spacing: calc(var(--font-size-20px) * var(--letter-spacing-2));
}

/* Previous Button, Language Button */
.btn-outline-dark,
.btn-outline-light {
  --bs-btn-border-width: 2px;
}

/* Custom button: Loading spinner */

.spinner-hidden .spinner-border {
  display: none;
}

.spinner-border {
  border-width: 3px;
  margin-left: 15px;
}

/* Custom button: Login.gov Button with text and SVG */
/* Used on Eligibility Start */

:root {
  --login-gov-button-font-size: var(--font-size-20px);
  --login-gov-button-padding: 0.5rem;
  --login-gov-button-line-height: 1;
}

@media (min-width: 992px) {
  :root {
    --login-gov-button-font-size: var(--font-size-16px);
    --login-gov-button-padding: 1rem;
    --login-gov-button-line-height: 1.5;
  }
}

.login {
  cursor: pointer;
  font-size: var(--login-gov-button-font-size) !important;
  font-family: "Public Sans", Roboto, system-ui;
  line-height: var(--login-gov-button-line-height);
  text-transform: none;
  text-decoration: none;
}

/* Sets the text `Login.gov` as transparent */
/* With an Login.gov logo image over it */
/* So screenreaders can read out `Login.gov` */
.login .fallback-text {
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  margin: 11px auto 0 auto;
  position: relative;
  padding-top: 1px;
  color: transparent;
  font-size: var(--font-size-16px);
  font-weight: var(--bold-font-weight);
  line-height: 1;
}

/* Sign in with Login.gov (white logo) on System Enrollment Error, Eligibility Start */

.btn.btn-lg.btn-primary.login {
  border-width: calc(4rem / 16);
  padding: var(--login-gov-button-padding);
}

@media (min-width: 992px) {
  .login .fallback-text {
    margin: 0 0 0 5px;
    display: inline-block;
    vertical-align: baseline;
  }
}

.login .fallback-text.white-logo {
  background-image: url("/static/img/login-gov-logo-rev.840831f95971.svg");
  width: 130.9887px;
  height: 17px;
}

/* Login.gov modal button (color logo) on Eligibility Index */

.login .fallback-text.color-logo {
  background-image: url("/static/img/login-gov-logo.71349fe0fdf7.svg");
  width: 120px;
  height: 16px;
}

.eligibility-index .login .fallback-text {
  display: inline-block;
}

/* Custom button: Sign Out */
/* Nav Buttons: Previous Page, Sign Out */

.nav-button-row {
  height: calc(70rem / 16);
}

/* Custom button: Sign Out */

.signout-link,
.signout-link:visited {
  font-size: var(--bs-body-font-size);
  color: var(--primary-color) !important;
  padding: 2px 4px;
  border-radius: var(--border-radius);
  border: var(--border-width) solid var(--primary-color);
  letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-2));
  font-weight: 500 !important;
  text-decoration: none !important;
}

@media (min-width: 992px) {
  .signout-link,
  .signout-link:visited {
    font-size: var(--font-size-12px);
    text-decoration: underline !important;
    letter-spacing: calc(var(--font-size-12px) * var(--letter-spacing-5));
    border: none;
  }
}

/* Custom button: Previous Page */

#previous-page-button {
  border-color: var(--text-primary-color);
  color: var(--text-primary-color);
  font-weight: var(--medium-font-weight);
  font-size: var(--font-size-14px);
  letter-spacing: calc(var(--font-size-14px) * var(--letter-spacing-5));
  padding: 3.5px 2.35px; /* button dimensions are 130 x 32 */
}

#previous-page-button:hover {
  background: none;
  color: var(--hover-color);
  border-color: var(--hover-color);
}

@media (min-width: 992px) {
  #previous-page-button,
  #previous-page-button:hover {
    border: none;
  }
}

.small-text {
  font-size: var(--font-size-14px);
  font-weight: unset;
  line-height: var(--form-field-text-line-height);
  letter-spacing: calc(var(--font-size-14px) * var(--letter-spacing-5));
}

/* Forms: Text Inputs */
/* Form Field Container: Must use .form-field-container parent to use these styles */

.form-field-container .form-control-label,
.form-field-container .required-label {
  font-size: var(--font-size-16px);
  font-weight: var(--medium-font-weight);
  line-height: var(--form-field-text-line-height);
  letter-spacing: calc(var(--font-size-16px) * var(--letter-spacing-5));
  padding-bottom: calc(12rem / 16);
}

.form-field-container .form-control {
  border-width: var(--border-width);
  border-radius: var(--border-radius);
  border-color: var(--primary-color);
  color: var(--text-primary-color);
  font-size: var(--font-size-24px);
  padding: 0.625rem 0.75rem;
  /* Input height should be 60px */
}

.form-field-container .form-control:focus,
.form-field-container .form-control:focus-visible {
  outline: 3px solid var(--focus-color) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

.form-field-container.eligibility-verification-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Forms: Select Inputs */
/* Styles specific to the agency chooser on the landing page */

/* override a few bootstrap defaults */
#form-agency-selection .form-select {
  border-color: var(--primary-color);
  border-radius: var(--border-radius);
  border-width: var(--border-width);
  line-height: var(--form-field-text-line-height);
  padding: calc(var(--grid-spacer) * 1.5);
}

#form-agency-selection label {
  font-size: var(--font-size-20px);
  line-height: var(--bs-body-line-height);
  letter-spacing: calc(var(--font-size-20px) * var(--letter-spacing-2));
}

@media (min-width: 992px) {
  #form-agency-selection {
    max-width: 424px;
  }
}

/* Forms: Radio Buttons */

:root {
  --radio-button-size: calc(24rem / 16);
  --radio-input-color: var(--standout-color);
}

.radio-label {
  cursor: pointer;
}

.radio-input {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--radio-button-size);
  height: var(--radio-button-size);
  border: var(--border-width) solid var(--radio-input-color);
  margin: calc(3rem / 16) 0;
}

.radio-input:checked {
  background-color: var(--radio-input-color);
  box-shadow: inset 0 0 0 var(--border-width) var(--bs-white);
}

.radio-input:focus,
.radio-input:focus-visible {
  outline: 2px solid var(--focus-color) !important;
  outline-offset: 1px !important;
}

/* Modal Dialogs */

:root {
  --modal-border-radius: calc(8rem / 16);
  --modal-body-top: -36px;
}

@media (min-width: 768px) {
  :root {
    --modal-body-top: 0;
  }
}

@media (min-width: 992px) {
  :root {
    --modal-border-radius: calc(4rem / 16);
  }
}

.modal-header .btn-close {
  width: 20px;
  height: 20px;
  opacity: 1;
  padding: 0;
  margin: -1px -1px -1px auto;
  border-radius: calc(2rem / 16);
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 2.01429L17.9857 0L10 7.98571L2.01429 0L0 2.01429L7.98571 10L0 17.9857L2.01429 20L10 12.0143L17.9857 20L20 17.9857L12.0143 10L20 2.01429Z" fill="%23323A45"/></svg>');
}

.modal-header .btn-close:focus,
.modal-header .btn-close:focus-visible {
  filter: none;
  outline: 2px solid var(--focus-color) !important;
  outline-offset: 1px !important;
  box-shadow: none !important; /* override CA State Web Template */
}

.modal-header .btn-close:hover {
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 2.01429L17.9857 0L10 7.98571L2.01429 0L0 2.01429L7.98571 10L0 17.9857L2.01429 20L10 12.0143L17.9857 20L20 17.9857L12.0143 10L20 2.01429Z" fill="%23045B86"/></svg>') !important;
}

.modal-content {
  border-radius: var(--modal-border-radius);
}

/* This is to stop Bootstrap from shifting the page behind the modal - see https://stackoverflow.com/q/32862394 */
.modal-open {
  padding-right: 0 !important;
}

.modal-dialog * {
  color: var(--text-primary-color);
}

.modal-header {
  z-index: 1057;
}

.modal-body.absolute-top {
  top: var(--modal-body-top);
  z-index: 1056;
}

/* Modal Trigger */
/* All links/image buttons that open modals have a question mark icon after them */
/* Buttons that open modals (like the Agency Selector) do not have the icon */

[data-bs-toggle="modal"]:not(.btn)::after {
  content: " ";
  background-image: url("/static/img/modal-trigger.ab9e435e099c.svg");
  background-size: contain;
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: text-bottom;
}

[data-bs-toggle="modal"]:not(.btn):hover::after {
  background-image: url("/static/img/modal-trigger--hover.f01aa086ef7e.svg");
}

[data-bs-toggle="modal"]:not(.btn):visited::after {
  background-image: url("/static/img/modal-trigger--selected.5d26a847adf1.svg");
}

:root {
  --alert-box-border-width: calc(8rem / 16);
  --alert-box-background-color--warning: #fff1d0;
  --alert-box-border-color--warning: #fdb714;
}

.alert-box {
  border-left-width: var(--alert-box-border-width) !important;
}

.alert-box a:focus:not(.btn):not(.card):not(.footer-link):not(#skip-to-content),
.alert-box
  a:focus-visible:not(.btn):not(.card):not(.footer-link):not(#skip-to-content) {
  outline-color: var(--primary-color) !important;
}

.alert-box--warning {
  background-color: var(--alert-box-background-color--warning);
  border-left-color: var(--alert-box-border-color--warning) !important;
}

.alert-box--heading {
  font-size: var(--font-size-18px);
}

/* Enrollment Success */
/* Custom in-line log out button for Enrollment Success, in paragraph */

:root {
  --success-illo-width: 180px;
  --success-illo-height: 155.1px;
}

@media (min-width: 992px) {
  :root {
    --success-illo-width: 345px;
    --success-illo-height: 297px;
  }
}

.enrollment-success .illo {
  width: var(--success-illo-width);
  height: var(--success-illo-height);
}

/* Index and Agency Index (Landing pages) */
/* These pages have a full-width and full-height background image, creating the need to re-set the Footer margin top to 0 */

:root {
  --landing-main-height: calc(100vh - 80px); /* Header Height (80px) */
  --landing-background: url("/static/img/benefits-bg-mobile.59a5dcdc0682.webp") no-repeat
    var(--primary-color);
  --landing-background-fallback-color: #1a1b16; /* same color the left side of the background image */
  --landing-box-border: none;
  --landing-text-color: var(--bs-white);
  --landing-page-x-margin: auto;
}

@media (min-width: 992px) {
  :root {
    --landing-main-height: calc(
      100vh - 210px
    ); /* 210px = Header Height (80px) + Footer Link (50px) + Logo strip (80px) */
    --landing-background: url("/static/img/benefits-bg-desktop.8771dd3826ca.webp") no-repeat;
    --landing-page-x-margin: 0;
  }
}

.landing main#main-content {
  background: var(--landing-background);
  background-size: cover;
  background-color: var(--landing-background-fallback-color);
  box-shadow: inset 0 0 0 1000px rgba(36, 47, 66, 0.6);
  color: var(--landing-text-color);
}

@media (min-width: 992px) {
  .landing main#main-content {
    box-shadow: none;
  }
}

.landing main#main-content .container .row:first-child {
  min-height: var(--landing-main-height);
}

.landing .box {
  border-top: var(--landing-box-border);
  border-radius: calc(8rem / 16);
  margin-bottom: calc(32rem / 16);
}

.landing .box .btn.btn-lg.btn-primary {
  font-size: var(--font-size-18px);
  font-weight: unset;
  padding: var(--grid-spacer) 0;
}

.landing footer {
  margin-top: 0;
}

/* column-gap-lg-5 doesnt provide enough breathing room */
@media (min-width: 992px) {
  .logo-strip {
    column-gap: 80px !important;
  }
}