/* formio css style work 03-23-26 v10 */
/* updated the radio to have darker border like the checkbox,
and hide reviewpage elements if they're blank 3-23 */ 
/* added variables from DTC 10-16-25, and updated button colors to use them 02-18-26 */
/* added radio to the checkbox color setting 030926 */

.formio-form {
    font-family: 'Nunito Sans';
    background: #f5f5f6;
  --ani-color-black: #061b2c;
  --ani-black: #000;
  --ani-color-white: #fff;
  --ani-color-dark-gray: #1e1e1e;
  --ani-color-blue-100: #d6e9f7;
  --ani-color-blue-75: #e0eef9;
  --ani-color-blue-50: #ebf4fb;
  --ani-color-blue-25: #f5fafd;
  --ani-color-steps-green: #16914a;
  --ani-color-steps-inactive-gray: #c7c8c9;
  --ani-color-placeholder-text: #96999b;
  --ani-color-golden-yellow: #ffb81c;
  --ani-color-golden-yellow-100: #fffbf2;
  --ani-color-golden-yellow-200: #ffefcb;
  --ani-color-golden-yellow-80: #ffc649;
  --ani-color-golden-yellow-75: #fff3d8;
  --ani-color-golden-yellow-60: #ffd477;
  --ani-color-golden-yellow-50: #fff7e5;
  --ani-color-golden-yellow-40: #ffe3a4;
  --ani-color-golden-yellow-25: #e3e3e3;
  --ani-color-red-200: #ffeee4;
  --ani-color-night-blue: #0f3557;
  --ani-color-mid-blue: #24497a;
  --ani-color-accent-blue: #0080c3;
  --ani-color-light-blue: #75b6e4;
  --ani-color-placeholder-grey: #96999b;
  --ani-color-border-grey: #d5d7d9;
  --ani-color-body-grey: #63666a;
  --ani-color-green-200: #e8f9e9;
  --_box-size: 1.25em;
  --_check-size: 0.6em;
  --_check-shape: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

h1, h2, h3, h4 {
    font-family: 'sculpin-variable';
    font-weight: 500;
    font-variation-settings: 'wght' 500;
}

.formio-form .formio-component .circle-number {
    display: inline-block;
    background-color: var(--ani-color-night-blue);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    font-weight: bold;
}

.formio-form .formio-component .transparent-card>.card {
    /* FNOL life page 2's container had white background. add the custom class transparent-card to the container to use this styling */
    background-color: transparent !important;
    border: none !important;
    padding: none !important;
}

.formio-form .formio-component .transparent-card>.card>.card-body {
    padding-left: 1px !important;
}

/******** section for possible handling of column buttons, to be corrected.  ********/


/* trying to avoid mid-word breaks with this one */
.formio-form button {
    word-break: normal;
}

.custom-button-row {
    display: flex !important;
    justify-content: space-between !important; /* Push items to far left and right */
    flex-wrap: nowrap !important; /* Prevent wrapping */
}

.custom-button-row > div {
    flex: 0 0 auto !important; /* Prevent Bootstrap column sizing */
}

.custom-button-row > .col-md-2 {
    width: inherit !important;
}

@media only screen and (min-width: 768px) and (max-width: 1279px) {
    .custom-button-row {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/**** for automatic wizard navigation buttons ****/
.formio-wizard-nav-container.list-inline {
    display: flex;
    justify-content: space-between; /* Push items to far left and right */
    list-style: none; /* Remove default bullets */
    padding: 0;
    margin: 0;
}

.formio-wizard-nav-container.list-inline > li {
    margin-right: 0px !important;
}

.formio-wizard-nav-container.list-inline>li {
    margin-right: 0px !important;
}


/* consolidating:  */
button.btn-wizard-nav-submit,
button.btn-wizard-nav-next,
button.btn-wizard-nav-cancel,
button.btn-wizard-nav-previous,
.btn-wizard-nav-next>button,
.formio-component-beneficiaries>button,
.btn-wizard-nav-cancel>button,
.btn-wizard-nav-previous>button {
    min-width: 104px;
    border-radius: 0 !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

button.btn-wizard-nav-submit,
button.btn-wizard-nav-next,
.btn-wizard-nav-next>button,
.formio-component-beneficiaries>button,
button.btn-wizard-nav-cancel:hover,
.btn-wizard-nav-cancel>button:hover,
button.btn-wizard-nav-previous:hover,
.btn-wizard-nav-previous>button:hover {
    background-color: var(--ani-color-night-blue);
    color: white !important;
}

button.btn-wizard-nav-submit:hover,
button.btn-wizard-nav-next:hover,
.btn-wizard-nav-next>button:hover,
.formio-component-beneficiaries>button:hover {
    background-color: var(--ani-color-accent-blue);
    border-color: var(--ani-color-accent-blue);

}

button.btn-wizard-nav-cancel,
.btn-wizard-nav-cancel>button,
button.btn-wizard-nav-previous,
.btn-wizard-nav-previous>button {
    border-color: var(--ani-color-night-blue);
    color: var(--ani-color-night-blue);
    background-color: white !important;
}

button.btn-sm.editRow,
button.btn-sm.removeRow {
    font-size: .85em;
    line-height: 1;
    padding: 8px 12px !important;
    margin: 3px;
}

button.btn-danger {
    background-color: #AF241B !important;
    border-color: #AF241B !important;
}
button.btn-danger:hover {
    background-color: #CE4100 !important;
    border-color: #CE4100 !important;
}
/**** end button code ****/


/* breadcrumb navigation specific code  */
/* the text is too much starting at around this size */
@media (max-width: 600px) {
  .pagination .page-item button.page-link {
    font-size: 0 !important; /* Hides the text */
  }
}

.page-item,
.page-link,
.page-link:focus {
    cursor: default !important;
}

.page-link:focus,
.page-link:hover,
.page-link:active {
    box-shadow: none !important;
}


/* formio-form table needs styling::: */

.formio-form table {
    max-width: inherit !important;
    border: 0;
    border-radius: 0;
    border-collapse: collapse;
}

.formio-review-page .panel-body > ul {
    margin: 20px;
}


/* Target the pagination container */
.formio-form>div>nav>ul.pagination[role="tablist"] {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}

/* Style each li.page-item */
ul.pagination[role="tablist"] > li.page-item {
    flex: 1 1 0;
    position: relative;
    text-align: left;
}

/* Add the top color bar */
ul.pagination[role="tablist"]>li.page-item::before {
    content: "";
    display: block;
    height: 6px;
    width: 95%;
    background-color: var(--ani-color-border-grey); /* inactive color */
    border-radius: 6px !important;
    position: absolute;
    top: 0;
    left: 0;
}

/* Override color for active tab */
ul.pagination[role="tablist"] > li.page-item.active::before {
    background-color: var(--ani-color-accent-blue); /* active color */
}

/* Style the button */
ul.pagination[role="tablist"] > li.page-item > button.page-link {
    width: 100%;
    text-align: left;
    padding-top: 12px; /* space below the color bar */
    white-space: normal;
    border: none !important;
    background: transparent !important;
    color: var(--ani-color-night-blue) !important;
}

ul.pagination[role="tablist"]>li.page-item.active>button.page-link {
    color: var(--ani-color-night-blue) !important;
    border: none !important;
}

.pagination .page-item button {
    font-family: 'Nunito Sans';
    font-size: .85rem !important;
    padding: 15px 10px 10px 10px !important;
}



.formio-component-columns>.col-md-6 {
    padding-left: 15px !important;
    padding-right: 15px !important;
}


/* button spinner */
button.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

button.loading::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}


/* slight spacing above and below containers */
.formio-component-container {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* radio button alignment */
/* some new update messed up the alignment 0326, so testing removal */
/* .form-radio label {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
} */

.form-radio .form-check {
    line-height: 1.5rem !important;
}


/* checkbox alignment */
.formio-component-checkbox .form-check-label {
    padding-bottom: 0px !important;
    line-height: 24px !important;
}

/* strong isn't working as expected so set it to behave like b */
.formio-component-htmlelement strong {
    font-variation-settings: 'wght' 700;
}

/* hover links  */
.formio-form .formio-component .formio-component-htmlelement a {
    color: var(--ani-color-mid-blue) !important;
}
.formio-form .formio-component .formio-component-htmlelement a:hover {
    color: white !important;
    background-color: var(--ani-color-mid-blue) ;
    text-decoration: none !important;
}

/* confirmation box needs to stand out more, this only applies to API named 'confirmed' or 'confirmation' */
.formio-component-confirmed, 
.formio-component-confirmation {
  padding-top: 30px; 
  padding-bottom: 30px; 
}

.formio-component-confirmed span,
.formio-component-confirmation span  {
    font-variation-settings: 'wght' 700;
}


/* time picker is weirdly marked as read-only */
.formio-component-datetime .flatpickr-input + input {
  background-color: white !important;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}


/* beneficiaries-specific display  */
@media (max-width: 575px) {
  .formio-component-beneficiaries .list-group-header {
    display: none !important; }

  .formio-component-beneficiaries .list-group-item .col-sm-2:nth-child(1)::before {
    content: "First Name: ";
    font-variation-settings: 'wght' 700;
    padding-right: 10px; }


  .formio-component-beneficiaries .list-group-item .col-sm-2:nth-child(2)::before {
    content: "Last Name: ";
    font-variation-settings: 'wght' 700;
    padding-right: 10px; }

  .formio-component-beneficiaries .list-group-item .col-sm-2:nth-child(3)::before {
    content: "Last 4 of SSN: ";
    font-variation-settings: 'wght' 700;
    padding-right: 10px; }

  .formio-component-beneficiaries .list-group-item .col-sm-2:nth-child(4)::before {
    content: "Email: ";
    font-variation-settings: 'wght' 700;
    padding-right: 10px; }
}

/* bootstrap updates 10-16-25 */

.formio-form .form-control.dropdown {
    height: 38px;
}    

/* hide the second button, which should contain the aria label starting with 'submit form'. 
further submit buttons should be aria-labeled with something slight different 02-18-26 */
button.btn-wizard-nav-submit[aria-label^="Submit Form"] {
  display: none;
}

/* added font-variation-settings to h1-h4 (further above) and strong elements*/
.formio-form strong {
    font-variation-settings: 'wght' 700;
}


/* Custom responsive table styles for .beneficiary-review on the temporary review-page-replacement */
      @media (max-width: 767px) {
        .beneficiary-review table,
        .beneficiary-review thead,
        .beneficiary-review tbody,
        .beneficiary-review th,
        .beneficiary-review td,
        .beneficiary-review tr {
          display: block;
          width: 100%;
        }
        .beneficiary-review thead {
          display: none;
        }
        .beneficiary-review td {
          position: relative;
          padding-left: 50%;
          text-align: left;
          border: 1px solid #ddd;
        }
        .beneficiary-review td::before {
          content: attr(data-label);
          position: absolute;
          left: 10px;
          width: 45%;
          font-weight: bold;
          white-space: nowrap;
        }
        /* Hide labels and cells if empty */
        .beneficiary-review td.empty::before {
          content: '';
        }
        .beneficiary-review td.empty {
          display: none;
        }
      }

/* custom checkbox styling borrowed from unqork for consistency */
.formio-form .formio-component .checkbox input.form-check-input[type="checkbox"] {
    appearance: none;
    font: inherit;
    color: var(--ani-color-white);
    /* min-width: var(--_box-size); */
    aspect-ratio: 1;
    border: 1px solid var(--ani-color-night-blue);
    border-radius: 2px;
    display: grid;
    place-content: center;
    margin-top: 4px;
  }


.formio-form .formio-component .checkbox input.form-check-input[type="checkbox"]::before {
    content: "";
    width: var(--_check-size);
    aspect-ratio: 1;
    clip-path: var(--_check-shape);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--ani-color-placeholder-grey);
  }

.formio-form .formio-component .checkbox input.form-check-input:checked,
.formio-form .formio-component .radio input.form-check-input:checked {
    background: var(--ani-color-night-blue);
    border-color: var(--ani-color-night-blue);
  }

.formio-form .formio-component .checkbox input.form-check-input[type="checkbox"]:checked::before {
    transform: scale(1);
    box-shadow: inset 1em 1em var(--ani-color-white);
  }


  /* radio button tweak 3-23 */
.formio-form .formio-component .radio .form-check-input {
    margin-top: 4px;
    border: 1px solid var(--ani-color-night-blue);
}

.formio-form .formio-component .form-check {
    padding-left: 32px;
}


.formio-form  .formio-component.stop-shouting label.col-form-label {
  text-transform: none ;
  letter-spacing: normal ;
  font-size: 18px ;
}

.formio-form  .formio-component.stop-shouting label.form-check-label, 
.confirmation-well.stop-shouting label,
.confirmation-well.stop-shouting {
  text-transform: none ;
  letter-spacing: normal ;
  font-size: 16px ;
}

/* hide the v2captcha element until the form controller loads it 03-06-2026 */
#v2captcha.captcha-hidden {
  display: none !important;
}

/* update label text style and size. update column spacing for form group elements */

.formio-form .formio-component-relationships .formio-form-group, 
.formio-form .formio-component-policies .formio-form-group {
    padding-top: 0px;
    padding-bottom: 0px;
}
.formio-form .formio-component-relationships .formio-form-group .formio-component-textfield, 
.formio-form .formio-component-policies .formio-form-group .formio-component-textfield {
    padding-left: 32px;
}
.formio-form .formio-component-relationships .formio-form-group .formio-component-textfield label, 
.formio-form .formio-component-policies .formio-form-group .formio-component-textfield label {
    font-size: 14px;
}

.confirmation-well .formio-component-htmlelement {
  padding-left: 32px;
}

/* if reviewPage element is empty, do not display the parent li  */
li.mt-2:has(> span[ref="reviewingData"]:empty) {
  display: none;
}