body{

    background-color: #F5F5F5;
}



/* API error message inside error notification */
#network-err-notification {
    margin-top: 8px;
    font-weight: 500;
}
.eligibility-checker {
    width: 100%;
    border-radius: 16px;
    padding: 48px;
    background-color: white;
    margin-top: 28px;
    margin-bottom: 60px;

}
.state-select,
.select-one select {
  width: 100% !important;
  background-color: #f2f8fb !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

.loading-indicator-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;        
}

.eligibility-enter-info{
    margin-top: 24px !important;
    margin-bottom: 34px !important;

}

.ds-loadingindicator {
width: 100%;
max-width: 692px;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
min-height: 234px;
flex-direction: column;
margin-top: 253.5px;
margin-bottom: 314.5px;

}
.select-one select {
    width: 100% !important;
    background-color: #f2f8fb !important;
    font-size: 16px !important;
    font-weight: 350 !important;
}

.formSelectMenu{
    margin-bottom: 12px !important;
}


@media (max-width: 768px) {
    .eligibility-checker {
        padding: 24px 16px;
    }
}

@media (max-width: 480px) {
    .eligibility-checker {
        padding: 48px 16px 48px 16px;
        border-radius: 16px;
        margin-top: 16px;
    }
    .eligibility-checker-form-title h1 {
        font-size: 26px !important;
        line-height: 32px !important;
        font-weight: 500 !important;
        
    }

      .eligibility-checker-form-content p {
        font-size: 14px !important;
        line-height: 20px !important;
        font-weight: 400 !important;
        
    }

    .eligiblity-input{
    margin-bottom : 12px !important
}

    .eligiblity-input-income{
    margin-bottom : 4px !important
}

.input-prefix-symbol {
    top: 45% !important;
}

}


.eligibility-checker-form-title{
    font-weight: 500 !important;
    line-height: 40px !important;
    letter-spacing: 0.04px !important;
}





.ds-datepicker[data-ds-theme=vessel i][data-ds-variant=basic i][data-ds-version="1"i] input.date-picker-field {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.ds-datepicker .calendar-control-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.ds-datepicker {
    width: 343px !important;
    max-width: 343px !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
      .eligibility-checker-form-title {
        line-height: 32px !important;
        letter-spacing: 0.01px !important;
    }

    .ds-datepicker {
        width: 100% !important;
        max-width: 100% !important;
    }


}

.eligiblity-input{
    width: 100% !important;
    margin-bottom : 4px 
}

.eligiblity-input-income{
    width: 100% !important;
    margin-bottom : 4px !important;
}

.hidden-eligibility-check{
    display: none !important;
}



.button.button-submit{
  background-color: #0074AD !important;
  color: #FFFFFF !important;
}

.button.button-cancel{

  color: #0074AD !important;
  border: 1px solid #0074AD !important;
}

.ds-notification{
    margin-bottom: 24px !important;
}

.validation-error-link {
    color: #0074AD !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

.ds-datepicker .datepicker-error {
    display: none !important;
}

/* Fallback red border for error-input if DS lib CSS doesn't cover all cases */
input.error-input,
button.error-input {
    border-color: #D00000 !important;
    

}

.input-with-prefix {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-prefix-symbol {
    position: absolute;
    left: 12px;
    top: 45%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    font-size: inherit;
    color: #0D1C3D;
    line-height: 1;
}

.input-with-prefix .eligiblity-input {
    padding-left: 28px !important;
    color: #0D1C3D !important;
}

.input-with-prefix .eligiblity-input-income {
    padding-left: 24px !important;
    color: #0D1C3D !important;
}


#household-size-input {
    color: #0D1C3D !important;
}

#household-size-input.error-input:focus,
#annual-income-input.error-input:focus,
#single-date-0.error-input:focus {
    border: 2px solid #D00000 !important;
    outline: none !important;
}



.gs-breadcrumb{
    margin-top: 41px !important;
}

.eligibility-checker-form-content{

margin-bottom: 48px;
}

#dob-field .helper-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#dob-field{
    margin-bottom: 28px !important;
}

.dob-helpertext{
  color: #636a78 !important;
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 16px !important;
    letter-spacing: 0 !important;
    margin-top: 4px;
}

.text-input-helper{
    margin-top: 0px !important;
}

.error-description ul {
    margin-top: 4px !important;

}
#annual-income-field .text-input-helper{
    margin-bottom:  24px !important;
}