:root {
  /* client variables */
  /* client colors */
  --client-blue: #222c65;
  --grey-primary: #757575;
  --grey-secondary: #a3a1a1;
  --default-control-gap: 24px;

  /* client font */
  --font-size: 14px;
  --font-size-h3: 24px;
  --font-family-pri: "Inter", sans-serif;
  --font-family-alt: "Lato", sans-serif;
  --font-family: var(--font-family-pri);
  --font-color: #393939;

  --fiviInput-width: 100%;
  --input-height: 72px;
  --fiviInput-width-half: calc(50% - calc(var(--column-spacer) / 2));
}

/*
    General Elements/Classes
*/

html,
body {
  font-family: var(--font-family);
}

h1,
.h1 {
  font-size: 42px;
  line-height: 39px;
  margin-bottom: 25px;
  font-weight: 500;
  color: var(--client-blue);
  text-align: left;
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
}

h2,
.h2 {
  font-size: var(--font-size-h2);
  line-height: var(--font-lineheight-h2);
  color: var(--font-color-h2);
  font-weight: var(--font-weight-h2);
  font-family: var(--font-family-h2);
}

h3,
.h3 {
  font-size: var(--font-size-h3);
  line-height: 1.2;
  color: var(--client-blue);
  font-weight: var(--font-weight-h3);
  font-family: var(--font-family-h3);
}

h4,
.h4 {
  font-size: var(--font-size-h4);
  line-height: var(--font-lineheight-h4);
  color: var(--font-color-h4);
  font-weight: var(--font-weight-h4);
  font-family: var(--font-family-h4);
}

a {
  color: var(--client-blue);
  font-weight: 500;
  text-decoration: none;
  &:hover {
    text-decoration: none;
    color: #5a7b8e;
  }
}

.divider::before {
  background-color: var(--color-gray-dark);
}

.horizontal-divider {
  border-color: var(--color-gray-dark);
}

.vertical-divider {
  border-color: var(--color-gray-dark);
}

.page-text {
  line-height: 26px;
  text-align: left;
  font-weight: 500;
}

.page-text-small {
  font-size: 14px;
}

.subtext {
  margin-top: 1rem;
  font-size: 18px;
  font-weight: 400;
}

.blue-line {
  width: 193px;
  height: 3px;
  background: var(--client-blue);
}

.loader {
  border-top-color: var(--client-blue);
}

.page-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  & .header-container {
    padding-top: 5rem;
  }
}

.dual-input-container,
.fiviAddressInputs {
  position: relative;
  & > .fiviInput,
  & > .fiviDateTextBox,
  & > .fiviEmailTextBox,
  & > .fiviMoneyTextBox,
  & > .fiviPhoneControl {
    max-width: calc(50% - calc(var(--column-spacer) / 2));
  }
}

.phone-info__container {
  display: flex;
  width: 100%;
  gap: var(--column-spacer);
  & .fivisionpopover {
    width: fit-content;
  }
  @media (max-device-width: 600px), (max-width: 600px) {
    flex-wrap: wrap;
  }
}

.phone-and-preferred {
  width: 66%;
  & .fiviDropDown {
    max-width: calc(50% - calc(var(--column-spacer) / 2));
  }
  &:has(.fiviPhoneControl > .fiviTextBox + .fiviTextBox) {
    & .fiviDropDown {
      max-width: calc(calc(100% / 2) - calc(var(--column-spacer) / 2));
    }
  }
  & .fiviPhoneControl {
    max-width: calc(50% - calc(var(--column-spacer) / 2));
  }
  & .fiviPhoneControl:has(> .fiviTextBox + .fiviTextBox) {
    max-width: 100%;
    & > .fiviTextBox {
      max-width: calc(calc(100% / 2) - calc(var(--column-spacer) / 2));
    }
  }
  @media (max-device-width: 600px), (max-width: 600px) {
    width: 100%;
  }
}

.individual-list-options-container {
  width: 100%;
  display: flex;
  gap: var(--column-spacer);
  align-items: center;
  & > .flex-column {
    max-width: var(--fiviInput-width-half);
    position: relative;
    gap: var(--gap-vertical);
    & .page-text {
      padding-right: 10px;
    }
    & > .vertical-divider {
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
    }
    &:has(.fiviIndividualButton) {
      align-items: center;
      justify-content: center;
    }
  }
}

.summary-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background-color: #5a7b8e25;
  & .h4 {
    font-size: 16px;
  }
  & label {
    font-size: 16px;
    color: black;
    font-weight: 400;
  }
  & .fiviLabelContainer:has(> span + span) {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  & .fiviProductsAndServicesSelected ul {
    color: black;
  }
}

@media (max-device-width: 600px), (max-width: 600px) {
  .individual-list-options-container {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--gap-horizontal-150);
    & > .flex-column {
      & > .vertical-divider {
        display: none;
      }
      &:has(.fiviIndividualButton) {
        max-width: 100%;
      }
    }
  }
}

@media (max-device-width: 750px), (max-width: 750px) {
  .dual-input-container,
  .fiviAddressInputs {
    & > .fiviInput,
    & > .fiviDateTextBox,
    & > .fiviEmailTextBox {
      max-width: 100%;
    }
  }

  .phone-and-preferred {
    & .fiviDropDown {
      max-width: 100%;
    }
    &:has(.fiviPhoneControl > .fiviTextBox + .fiviTextBox) {
      & .fiviDropDown {
        max-width: 100%;
      }
    }
    & .fiviPhoneControl {
      max-width: 100%;
    }
    .fiviPhoneControl:has(> .fiviTextBox + .fiviTextBox) {
      max-width: 100%;
      & > .fiviTextBox {
        max-width: 100%;
      }
    }
  }
}

/*
    Layout
*/

.layout {
  background-color: white;
  display: flex;
  flex-direction: column;
}

/*
    Header Styling
*/
header {
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  padding: 1rem 3rem !important;
  & .inner-header-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

    & .logo-container {
      display: flex;
      align-items: center;

      & a {
        display: flex;
        align-items: center;
        text-decoration: none;
      }

      & .gefcu-logo {
        height: 50px;
        width: auto;
      }
    }

    & .header-navigation {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 20px;

      & .header-button-container {
        display: flex;
        align-items: center;

        & .button-status-center {
          background-color: transparent;
          color: #db202c;
          border: 1px solid #db202c;
          height: auto;
          font-size: 16px;
          font-weight: 700;
          line-height: 1.2;
          padding: 9px 19px;
          cursor: pointer;
          letter-spacing: 0.02em;
          transition:
            background-color 0.2s,
            color 0.2s;

          &:hover {
            background-color: #db202c;
            color: #ffffff;
          }
        }
      }
    }

    & .header-individual-navigation {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      min-height: 70px;
      position: relative;

      & .individual-navigation-menu-toggle {
        display: flex;
        gap: 10px;
        align-items: center;
        cursor: pointer;

        & .toggle-initials {
          color: var(--client-blue);
          background: white;
          font-size: 16px;
          font-weight: 600;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        & .toggle-name {
          color: var(--client-blue);
          font-size: 16px;
        }

        & .toggle-icon {
          color: var(--client-blue);
          font-size: 16px;

          & i {
            transition: all 0.5s;
          }

          & .rotate-down {
            transform: rotate(90deg);
          }
        }
      }

      & .pnlShowMe {
        position: absolute;
        width: var(--column-width-3);
        padding: var(--gap-horizontal-50);
        background-color: white;
        border: 2px solid var(--client-blue);
        border-radius: 5px;
        top: calc(100% - 10px);
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--gap-horizontal-25);
        z-index: 10;
      }
    }
  }

  & .nav-divider {
    width: 100%;
    height: 1px;
    background-color: var(--client-blue);
    opacity: 0.2;
  }

  @media (max-width: 768px) {
    & .inner-header-container {
      padding: 0 1rem;

      & .gefcu-logo {
        height: 38px;
      }

      & .pnlShowMe {
        width: 220px;
      }
    }
  }
}

/*
    Main
*/

main > .layout-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: calc(var(--column-width-11) + calc(var(--column-spacer) * 2));
  outline: none;
}

@media (max-device-width: 475px), (max-width: 475px) {
  main {
    padding: var(--gap-vertical-50) 0;
  }
}

/*
    Footer Styling
*/

.site-footer {
  background-color: #1a2a5e;
  color: #ffffff;
  font-size: 0.875rem;
  padding: 5rem 18rem 2rem 18rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;

  & .footer-main {
    display: flex;
    flex-wrap: wrap;

    & .footer-brand {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;

      & .footer-logo {
        max-width: 60px;
      }

      & .footer-phone {
        margin: 0;
        color: #ffffff;
        font-size: 0.75rem;
      }

      & .footer-social {
        color: #ffffff;
        font-size: 1.5rem;
        text-decoration: none;

        & img {
          margin: 1rem 0rem;
          height: 20px;
          transition: 0.2s;

          &:hover {
            transform: scale(1.2);
          }
        }
      }
    }

    & .footer-nav {
      flex: 3;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      max-width: 45rem;

      & .footer-col {
        flex: 0 0 auto;
        min-width: 100px;

        & h4 {
          font-size: 1rem;
          font-weight: 700;
          color: #ffffff;
          margin: 0 0 1.5rem;
          letter-spacing: 0.03em;
        }

        & ul {
          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 0.5rem;

          & a {
            color: #ffffff;
            text-decoration: underline;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.075rem;
            font-weight: 700;

            &:hover {
              text-decoration: none;
            }
          }
        }
      }
    }
  }

  & .footer-bottom {
    padding-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    & .footer-bottom-links {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;

      & a {
        color: #ffffff;
        text-decoration: underline;
        font-size: 0.8rem;

        &:hover {
          text-decoration: none;
        }
      }
    }

    & .footer-bottom-badges {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1rem;
      font-size: 0.8rem;
      color: #ffffff;

      & img {
        height: 36px;
        width: auto;
      }

      & .footer-verified {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        font-size: 0.7rem;
        color: #ffffff;
        text-decoration: underline;
      }

      & .ncua-container {
        & img {
          height: 40px;
          transition: 0.2s;
          &:hover {
            transform: scale(1.2);
          }
        }
      }

      & .eho-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;

        & img {
          height: 18px;
          padding-top: 2px;
        }

        & a {
          text-decoration: underline;
          color: white;

          &:hover {
            text-decoration: none;
          }
        }
      }
    }
  }

  & .footer-application-number {
    color: #ffffff;
    text-align: center;
    margin-top: -3rem;
  }

  @media (max-width: 1000px) {
    & .footer-main {
      flex-direction: column;

      & .footer-brand {
        flex: unset;
      }

      & .footer-nav {
        flex: unset;
        flex-direction: column;
        justify-content: flex-start;
        gap: 1.5rem;
      }
    }

    & .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
    }
  }
}

/*
    Page General Containers
*/

.page-navigation-container {
  margin-top: 0;
  border: none;
  flex-direction: column;
  gap: var(--gap-vertical-75);
  & .navigation-forward-container {
    width: 100%;
    justify-content: flex-end;
    padding: 3rem 0 6rem 0;
    &:has(.button-link) {
      justify-content: space-between;
    }
  }
  & .navigation-other-container,
  & .navigation-other-mobile {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-vertical);
  }
  & .navigation-other-mobile {
    display: none;
  }
}

@media (max-device-width: 520px), (max-width: 520px) {
  .page-navigation-container {
    & .navigation-other-mobile {
      display: flex;
      align-items: center;
      gap: var(--gap-vertical-75);
    }
  }
}

.section-header {
  font-size: 28px;
  text-transform: none;
  letter-spacing: unset;
  &:after {
    display: none;
  }
}

/*
    Buttons
*/

.button-primary,
.status-center-page .button-primary {
  background-color: var(--client-blue);
  border: 1px solid var(--client-blue);
  text-transform: none;
  padding: 10px 30px;
  min-width: 150px;
  border-radius: 2px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  height: auto;
  &:hover:not(:disabled),
  &:active:not(:disabled),
  &:focus:not(:disabled) {
    background-color: white;
    color: var(--client-blue);
    font-weight: 700;
  }
}

.button-primary.header-add-button {
  background-color: white;
  color: var(--client-blue);
  &:hover:not(:disabled),
  &:active:not(:disabled),
  &:focus:not(:disabled) {
    background-color: transparent;
    color: white;
    border-color: white;
  }
}

.button-primary.status-center {
  border-color: white;
  background-color: transparent;
  color: white;
}

.button-other,
.status-center-page .button-other,
.status-center-page .btn-primary,
.status-center-page .btn-default {
  background-color: transparent !important;
  border-color: var(--client-blue) !important;
  color: var(--client-blue) !important;
  text-transform: none;
  border-radius: 2px;
  border: 1px solid var(--color-secondary-normal);
  &:hover:not(:disabled),
  &:active:not(:disabled),
  &:focus:not(:disabled) {
    border-color: #334957 !important;
    color: #334957 !important;
    background-color: #5a7b8e20 !important;
  }
}

.status-center-page .btn-primary {
  box-shadow: none;
  text-shadow: none;
}

.button-link,
.status-center-page .button-link {
  color: var(--client-blue);
  &:hover:not(:disabled),
  &:active:not(:disabled),
  &:focus:not(:disabled) {
    color: #334957;
  }
}

/*
    Inputs/Labels
*/

input.DefaultCBControlClassV3,
input.DefaultRBControlClassV3 {
  accent-color: var(--client-blue);
  &:hover {
    accent-color: var(--color-primary-dark);
  }
}

input.form-control,
select.form-control {
  color: var(--font-color-input);
  border: 1px solid var(--grey-secondary);
  font-family: var(--font-family-pri);
  color: #4c4b4b;
  font-weight: 500;
  margin-top: 0;
  padding-top: 12px;
  font-size: 18px;
  &:focus,
  &:active {
    border-color: var(--client-blue);
  }
  &:disabled {
    background-color: #eeecec;
  }
}

.DefaultTooltipClass {
  + span[role="tooltip"] {
    visibility: hidden;
    position: absolute;
    background: black;
    opacity: 0.9;
    color: white;
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: visibility 0.25s;
    z-index: 2;
    max-width: 250px;
    box-shadow:
      rgba(0, 0, 0, 0.19) 0px 10px 20px,
      rgba(0, 0, 0, 0.23) 0px 6px 6px;
    &:hover,
    &:focus {
      visibility: visible;
    }
  }
  &:hover,
  &:focus {
    + span[role="tooltip"] {
      visibility: visible;
    }
  }
}

label.DefaultCBLabelClass,
input.DefaultRBControlClassV3 + label {
  font-size: 16px;
  line-height: 26px;
  text-align: left;
  font-weight: 500;
}

/*
    Components
*/

.fiviMultiInput {
  gap: var(--gap-vertical-75) var(--default-control-gap);
}

.fiviControl.fiviTextBox {
  & label.DefaultLabelClass {
    font-weight: 500;
    top: 0;
  }
  & label.FocusLabelClass {
    font-weight: 600;
    left: var(--gap-horizontal-50);
    top: 12px !important;
    text-transform: none;
  }
  & .fiviWriteOnlyEditButton,
  & .fiviControlActionsContainer .fiviLinkButton {
    font-weight: 600;
    color: #4c4b4b;
    top: calc(50% - 8px);
    right: 10px;
    font-size: 14px;
    &:hover,
    &:active,
    &:focus {
      color: #4c4b4b;
      text-decoration: underline;
      border-color: transparent;
    }
  }
  &:has(> .fiviValueLabelContainer) {
    & > .fiviLabelContainer:has(> .DefaultLabelClass) {
      position: absolute;
      width: 100%;
      height: 100%;
      & > .DefaultLabelClass {
        z-index: 2;
        top: 9px !important;
      }
    }
  }
  & > .fiviValueLabelContainer {
    font-family: var(--font-family-input);
    border-color: #5a7b8e50 !important;
    background: #d4d7df;
    border-radius: 2px;
    & > label {
      color: #5a7b8e;
      font-weight: 500;
      font-size: 18px;
      padding-top: 12px;
    }
  }
}

.fiviControl.fiviDropDown label.DefaultLabelClass,
.fiviControl.fiviDropDown:has(option[value=""]:checked) label.DefaultLabelClass:has(+ select:focus),
.fiviControl.fiviDropDown:has(option[value=""]:checked) label.DefaultLabelClass:has(+ select:active),
.fiviControl.fiviDropDown:has(option[value=""]:checked) label.DefaultLabelClass:has(+ select:hover) {
  font-weight: 600;
  left: var(--gap-horizontal-50);
  top: 12px !important;
  text-transform: none;
  transition: all 0.25s;
}

.fiviControl.fiviDropDown {
  &:has(option[value=""]:checked) {
    & label.DefaultLabelClass {
      font-weight: 500;
      top: 0 !important;
      transition: all 0.25s;
    }
  }
}

.fiviAddressControl {
  position: relative;
  & .fiviBtnContainer {
    & button {
      position: absolute;
      font-weight: 600;
      color: #006f51;
      top: 28px;
      right: 10px;
      font-size: 14px;
      &:active,
      &:hover,
      &:focus {
        color: #5a7b8e;
        text-decoration: underline;
        border-color: transparent;
      }
    }
  }
}

.fiviAddressValidation > label {
  text-align: left;
  margin-top: -20px;
  font-size: 14px;
  margin-left: 2px;
}

.fiviProductServices {
  & > .product-services-default-mode-container {
    & .fiviProdGroup,
    & .fiviServGroup {
      & .fiviProdServ {
        max-width: 100%;
        border: 1px solid var(--grey-secondary);
        gap: var(--gap-vertical-25);
        min-height: 90px;
        transform: scale(1);
        transition:
          transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
          box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        &:hover {
          transform: scale(1.01);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
          cursor: pointer;
        }
        &:has(> .fiviRadioButton input:checked) {
          background-color: #5a7b8e20;
        }
        & .more-info {
          display: inline-block;
          font-size: 14px;
          color: var(--grey-primary);
        }
        & .fiviCheckBox {
          & > input {
            order: unset;
            margin: 0;
          }
        }
        & .fiviProductMoreInfo {
          font-size: 16px;
          line-height: 26px;
        }
        & .fiviProductAdditionalOptions {
          display: none;
          &:has(> *:not([style*="display: none;"])) {
            display: flex;
          }
          &::before {
            display: none;
          }
          & .fiviLabelContainer label.DefaultLabelClass {
            max-height: 39px;
          }
          & .fiviLabelContainer label.DefaultLabelClass.FocusLabelClass.LabelClassFocus {
            /* top: -15px !important;
            left: 0px; */
            display: none;
          }
        }
        & .form-control[robotid="Nickname"] {
          max-height: 39px;
          border: 1px solid var(--grey-secondary);
          padding: 10px;
        }
      }
    }
  }
}

.fiviDisclosureList {
  gap: var(--gap-vertical);
  & .DisclosureItem {
    padding-left: 5px;
    & div:first-of-type {
      display: flex;
      gap: 5px;
      align-items: center;
    }
    & .fa.fa-square {
      outline: 2px solid var(--client-blue);
      border-radius: 2px;
      font-size: 16px;
    }
  }
  & .DisclosureLinkV3 {
    color: var(--client-blue);
  }
}

.fiviIDAuthentication {
  & .fiviIDAuthSubmitAnswerContainer {
    border: none;
  }
}

.fiviCCInfo > span:nth-of-type(2) {
  &:before {
    display: none;
    font-weight: 600;
    left: var(--gap-horizontal-50);
    top: 12px !important;
    text-transform: none;
    color: var(--font-color-label);
  }
  & > label.DefaultLabelClass {
    display: flex !important;
  }
  & > select.form-control {
    color: var(--font-color) !important;
  }
}

.fiviCCInfo > span:nth-of-type(3) {
  & > label.DefaultLabelClass {
    display: flex !important;
  }
  & > select.form-control {
    color: var(--font-color) !important;
  }
}

.fiviCCInfo > span:nth-of-type(4) {
  & label.DefaultLabelClass {
    display: flex !important;
  }
  & input::placeholder {
    color: transparent;
  }
}

.fiviOTP {
  & .fiviOTPDestination:has(select) {
    align-items: flex-start;
    & .fiviPanel {
      width: 100%;
    }
  }
  & .fiviOTPButtonContainer {
    border: none;
  }
}

.fiviOTP {
  & .fiviOTPDestination > div:has(> .fiviBtnContainer),
  & .fiviOTPButtonContainer {
    padding: 0;
    border: none;
  }
  & .fiviOTPCode {
    & .fiviLabelContainer > label.FocusLabelClass {
      font-size: 12px;
    }
  }
}

.fiviDocumentList {
  max-width: 100%;
  & span:has(> table) {
    max-width: 100% !important;
  }
  & span.fiviBtnContainer {
    justify-content: center;
  }
  & .ng-modal {
    & .modal-header {
      position: absolute;
      right: 15px;
      top: 15px;
    }
    & .modal-body-insideItem {
      position: relative;
      & .fiviEmailTextBox {
        & input {
          height: 60px;
          padding-top: 0px;
        }
      }
      & div:has(> .fiviBtnContainer) {
        width: 100%;
        position: absolute;
        bottom: 20px;
        right: 10px;
        & span.fiviBtnContainer {
          justify-content: flex-end;
          margin-bottom: 0;
        }
      }
    }
    & .modal-footer {
      margin-top: var(--column-spacer);
      & span.fiviBtnContainer {
        justify-content: flex-end;
      }
    }
  }
}

.progress-container {
  display: none;
}

.journey-bar {
  & .journey-bar-group.current-group:after {
    background-color: var(--color-primary-normal);
  }
  & .journey-bar-group.future-group:after {
    background-color: color-mix(in srgb, var(--color-primary-normal) 10%, transparent);
  }
  & .journey-bar-group.previous-group:after {
    background-color: color-mix(in srgb, var(--color-primary-normal) 66%, transparent);
  }
}

@media (max-device-width: 875px), (max-width: 875px) {
  .journey-bar-group > span {
    display: inline;
  }
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .journey-bar-group > span {
    display: none;
  }
}

.fiviDocumentList table > tbody > tr,
.fiviDocumentList table > thead > tr {
  border-color: var(--color-gray-dark);
}

.fiviProve,
.fiviProve > div {
  width: 100%;
  & > .prove-direction-buttons {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-horizontal);
  }
}

.fiviEmpHistInputContainer > .fiviMultiInput {
  gap: var(--gap-vertical-75) var(--default-control-gap);
}

.fiviEmpHistInputContainer > .fiviMultiInput > div {
  width: 100%;
}

.fiviIndividualHyperlinkList {
  & .fiviIndividualHyperlinkListNameContainer {
    margin-right: 10px;
  }
  & .fiviLinkButton {
    color: #006f51;
    font-weight: 500;
    text-decoration: underline;
    &:hover {
      text-decoration: none;
      color: #5a7b8e;
    }
  }
}

.fiviProductFunding {
  & .fiviProductFundingItem,
  & .fiviFundingAmount {
    padding: 0;
    max-width: 100%;
    min-height: 60px;
    & .fiviMoneyTextBox {
      max-width: var(--fiviInput-width-half);
      & input {
        padding-top: 0;
        height: 60px;
      }
      & .popover-content {
        text-align: right;
      }
    }
    & label:after {
      display: none;
    }
  }
  & .fiviFundingAmount {
    border-top: 2px solid var(--color-gray-dark);
  }
}

@media (max-device-width: 836px), (max-width: 836px) {
  .fiviFundingInput {
    flex-direction: column;
    align-items: flex-start;
    & > label {
      border-right: 0;
      text-align: left;
    }
  }

  .fiviProductFunding {
    padding-top: var(--gap-horizontal);
    & .fiviProductFundingItem,
    & .fiviFundingAmount {
      & .fiviMoneyTextBox {
        max-width: 100%;
      }
    }
  }
}

.fiviPlaid,
.fiviFinicityFundingAccountVerificationContainer {
  align-items: flex-start;
}

.fiviBenficialOwnership {
  width: 100vw;
  max-width: 100%;
  & > .fiviTable {
    width: 100vw;
    max-width: 100%;
    & input.form-control,
    & select.formcontrol {
      padding-top: 0;
      height: 60px;
    }
    & .fiviTableHead th:first-of-type {
      text-align: left;
    }
    & td:has(> .fiviTextBox) {
      max-width: var(--column-width-3);
    }
  }
  & .fiviBtnContainer {
    align-self: flex-start;
  }
}

.fiviApplicantWithdrawContainer,
.fiviApplicantWithdrawContainer > div {
  width: 100%;
}

/*
    Page Specific
*/

.page-Default-Content {
  flex: 1;
  & .h1 {
    font-weight: 600;
    margin-bottom: 0;
    line-height: 120%;
  }
  & .lets-get-started-container {
    border: none;
    max-width: var(--column-width-11);
    padding: 0;
    flex: 1;
    justify-content: space-between;
    & .what-you-need-header {
      font-size: 18px;
    }
    & .what-you-need {
      margin: 0;
      & > li {
        font-size: 18px;
        font-weight: 400;
      }
    }
    & .navigation-buttons-default-mobile {
      display: none;
    }
    & .default-has-questions {
      margin-top: -1rem;
      font-size: 14px;
    }
    & .navigation-buttons-default-page {
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      flex-direction: row-reverse;
      padding-bottom: 6rem;
      & > .add-accounts-button .button-other {
        height: auto;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
        padding: 9px 19px;
      }
    }
  }
}

@media (max-device-width: 656px), (max-width: 656px) {
  .page-Default-Content {
    & .what-you-need-header,
    & .what-you-need {
      display: block;
    }
  }
}

@media (max-device-width: 520px), (max-width: 520px) {
  .page-Default-Content {
    & .lets-get-started-container {
      & .navigation-buttons-default-page {
        align-items: center;
        justify-content: center;
        & .navigation-buttons-default-mobile {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}

.page-ApplicantInitial {
  & .prove-start-icon {
    display: flex;
    flex-direction: column;
    gap: 15px;
    & img {
      width: 41px;
      height: 48px;
    }
  }
  & .prove-check-phone-image-container {
    & > img {
      max-width: 50%;
    }
  }
}

.page-ApplicantExistingLookup {
  .lookup-start-icon {
    display: flex;
    flex-direction: column;
    gap: 15px;
    & img {
      width: 75px;
    }
  }
}

.page-ApplicantExistingOTP {
  & .lookup-start-icon {
    display: flex;
    flex-direction: column;
    gap: 15px;
    & img {
      width: 75px;
    }
  }
}

@media (max-device-width: 750px), (max-width: 750px) {
  .page-ApplicantInitial {
    & .prove-check-phone-image-container {
      & > img {
        max-width: 75%;
      }
    }
  }
}

.page-eSignAgreement,
.page-BusinessType {
  & #lnkESignAgreement,
  & .fiviCheckBox > label {
    font-size: calc(var(--font-size) + 2px);
    font-weight: 500;
  }
}

.page-SelectAccount {
  & .product-selection {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    & .h1 {
      max-width: var(--column-width-7);
    }
    & .fiviControl.fiviDropDown {
      max-width: calc(var(--column-width-3) + 10px);
      & > label {
        display: none;
      }
      & > select {
        padding-top: 0;
        height: 34px;
        width: 200px;
        &.form-control {
          font-size: 12px;
          border: 1px solid var(--grey-secondary);
        }
        &:has(option[value=""]:checked) {
          color: var(--font-color-input);
        }
      }
    }
  }
  & .product-services-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-vertical-150);
    & > .product-service-container {
      outline: none;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--gap-vertical-75);
      &:hover {
        background-color: transparent;
      }
      & > .product-service-heading {
        font-size: 18px;
        color: var(--font-color-h3);
        padding: 0px;
        height: auto;
        font-weight: 400;
        &:after {
          display: none;
        }
      }
      &:has(.product-service-content.expanded) {
        &:hover {
          background-color: transparent;
        }
      }
    }
  }

  & .cd-container {
    padding: 15px;
    border: 1px solid var(--grey-secondary);
  }

  #psCertificate {
    & .fiviProductServicesFilterBar {
      display: grid !important;
      width: fit-content !important;
      min-width: 400px;
      grid-template-columns: minmax(200px, 400px) auto !important;
      align-items: center;
      column-gap: 3rem;
      row-gap: 0.75rem;

      & > span.fiviControl.fiviInput:not(.fiviDropDown) {
        grid-row: 1 !important;

        & input {
          height: 60px;
          padding: 5px 5px 0 5px;
          border: 1px solid var(--grey-secondary);
        }

        & label {
          height: 60px;

          &.FocusLabelClass {
            top: -18px !important;
          }
        }
      }

      & > span.fiviControl.fiviDropDown {
        & select {
          height: 60px;
          padding: 5px 5px 0 5px;
          border: 1px solid var(--grey-secondary);
        }

        & label {
          max-height: 50px;
          &.FocusLabelClass {
            top: 5px !important;
          }
        }
      }

      & > span.DefaultCBControlClassV3 {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
        padding-left: 2.5rem;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: -100%;
          height: 300%;
          width: 1px;
          background-color: #000000;
        }

        &::after {
          content: "OR";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translate(-50%, -50%);
          font-size: 16px;
          font-weight: 500;
          background-color: white;
          padding: 8px 0;
          letter-spacing: 0.05em;
        }
      }

      & > span.ErrorMessageCentered {
        grid-column: 1 / -1 !important;
      }

      @media (max-width: 600px) {
        grid-template-columns: minmax(200px, 400px) !important;
        width: 100% !important;
        min-width: unset;

        & > span.DefaultCBControlClassV3 {
          grid-column: 1 !important;
          grid-row: 3 !important;
          padding-left: 0;
          white-space: unset;

          &::before,
          &::after {
            display: none;
          }
        }
      }
    }
  }
}

@media (max-device-width: 700px), (max-width: 700px) {
  .page-SelectAccount {
    & .product-selection {
      width: 100%;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--gap-horizontal);
      & .h1 {
        max-width: 100%;
      }
      & .product-type-selection-section {
        width: 100%;
        & .fiviControl.fiviDropDown {
          max-width: 100%;
        }
      }
    }
  }
}

.page-ApplicationSummary {
  .summary-item {
    max-width: var(--fiviInput-width-half);
    gap: var(--gap-vertical);
  }
  & .additional-members__information {
    margin-top: 2rem;
    & .page-text {
      margin-top: -1rem;
    }
  }
}

@media (max-device-width: 750px), (max-width: 750px) {
  .page-ApplicationSummary {
    .summary-item {
      max-width: 100%;
      padding: 0 0 0 20px;
    }
  }
}

.page-ApplicantIDInformation {
  .fiviIdType {
    gap: var(--gap-vertical-75) var(--default-control-gap);
  }
}

.page-ApplicantIDVerification {
  & #qrcode {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }
  & .fiviLinkButton {
    text-align: left;
    background-color: transparent;
    border: none;
    font-size: 16px;
    line-height: 18px;
    font-weight: 600;
    color: var(--client-blue);
    width: fit-content !important;
    padding: 0;
  }
}

.page-ApplicantAdditionalInformation {
  & span.fiviControl.fiviInput.fiviTextBox:nth-child(2) {
    margin-top: -1rem;
  }
}

.page-ApplicantEligibility {
  & h3,
  .h3 {
    color: unset;
  }

  & .horizontal-divider {
    border: none;
    border-top: 1px solid #d1d0d0;
    margin: 2rem 0;
    max-width: 390px;
  }
  & .eligibility-fields {
    & .fiviControl {
      & span.fiviControl {
        max-width: 500px;
        /* & label,
        .form-control {
          max-height: 50px;
          padding: 10px;
        }
        & .FocusLabelClass.LabelClassFocus {
        } */
      }
    }
  }
}

.page-RequiredDocuments,
.page-Pending {
  & .V3StatusCenterTableClass {
    & th,
    & td {
      vertical-align: middle;
      text-align: left;
    }

    & th:last-child,
    & td:last-child {
      text-align: center;

      & div {
        width: 100%;
        & span {
          width: 100%;
        }
      }

      & .button-other {
        width: 100%;
      }
    }

    & .fiviTooltipContainer {
      display: none !important;
    }
  }
}

.page-Disclosures {
  & .navigation-forward-container {
    padding-bottom: 0 !important;
  }
  & .navigation-other-container {
    padding-bottom: 6rem;
  }
}

.page-JointOwner {
  .fiviIdType {
    gap: var(--gap-vertical-75) var(--default-control-gap);
  }
  & .additional-information {
    & span.fiviControl.fiviInput.fiviTextBox:nth-child(3) {
      margin-top: -1rem;
    }
  }
}

.page-FundingMethod {
  & .funding-method-container {
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
    & > .fiviPanel {
      & .fiviRadioButton {
        & input {
          & + label {
            border-color: #5a7b8e50;
            height: auto;
            padding: 10px 0px;
            &:hover,
            &:active,
            &:focus {
              color: #5a7b8e;
              border-color: #5a7b8e;
            }
          }
          &:checked + label {
            color: #5a7b8e;
            border-color: #5a7b8e;
            background-color: #5a7b8e10;
          }
        }
      }
    }
  }
  & .funding-detail {
    outline: none;
    border-top: 2px solid #5a7b8e50;
    padding: 24px 0 0 0;
    & .section-header {
      font-size: 20px;
      &:before {
        display: none;
      }
    }
  }
  & .fiviCCNameAddress {
    gap: var(--gap-vertical-75) var(--default-control-gap);
    & .fiviAddressInputs {
      gap: var(--gap-vertical-75) var(--default-control-gap);
    }
  }
  & .fiviCCInfo {
    gap: var(--gap-vertical-75) 0;
  }
  & .h4 {
    color: unset;
  }
  & .address-info {
    border-left: 1px solid var(--grey-secondary);
    padding: 10px 20px;
    & .page-text {
      font-size: 20px;
      font-weight: 400;
      line-height: 1.2;
    }
  }
}

.page-FundingAmount {
  & .fiviFundingInput {
    align-items: flex-start !important;
    padding: 20px 15px;
    border: 1px solid var(--grey-secondary);
  }
}

.funding-detail .section-header,
.funding-detail .page-text-small,
.funding-detail .page-text,
.funding-detail .page-text-large {
  text-align: left;
}

@media (max-device-width: 800px), (max-width: 800px) {
  .fiviDocumentList table > tbody > tr > td:before {
    font-size: 18px;
    text-decoration: none;
    color: var(--client-blue);
  }
}

/*
    Status Center Overrides
*/

.status-center-page {
  & .section-container > div {
    width: 100%;
  }
  & input.form-control,
  & select.form-control {
    color: var(--font-color-input);
    border-color: #5a7b8e50;
    font-family: var(--font-family-pri);
    color: #5a7b8e;
  }
  & .V3StatusCenterLogin > #pnlShowMFADropdown select.DefaultFormControlClassV3,
  & .V3SummaryControl #pnlShowMFADropdown select.DefaultFormControlClassV3 {
    padding-top: 12px !important;
  }
  & .fiviSCDropDown > label.fiviStaticLabel {
    font-weight: 600 !important;
    left: var(--gap-horizontal-50);
    top: 12px !important;
    text-transform: none;
    font-size: 12px !important;
  }
  & .DefaultLabelClassV3 {
    font-family: var(--font-family-label) !important;
    color: var(--font-color-label) !important;
    margin-left: 0 !important;
    top: 0;
  }
  & .V3SummaryHeader > #topNav > ul > .nav-item > a {
    color: var(--client-blue) !important;
    fill: var(--client-blue) !important;
    text-decoration: none;
  }
  & .V3SummaryHeader > #topNav > ul > .nav-item.active {
    border-color: var(--client-blue);
    & > a {
      color: var(--client-blue) !important;
      fill: var(--client-blue) !important;
    }
  }
  & .V3SummaryHeader > #topNav > ul > .nav-item .badge {
    background-color: var(--client-blue);
  }
  & .h1,
  & .h2,
  & .h3,
  & .h4,
  & h1,
  & h2,
  & h3,
  & h4 {
    font-weight: 500;
    color: black;
    text-align: left;
  }
  & .V3SummaryControl .container-fluid > div > .task {
    border-color: var(--client-blue);
  }
  & article .task:hover {
    background-color: var(--color-gray-light);
  }
  & a.task {
    text-decoration: none;
  }
  & .V3SummaryControl .container-fluid > div > .task .task-title {
    color: var(--client-blue);
    text-decoration: none;
  }
  & .V3SummaryControl .container-fluid > div > .task > .task-icon {
    fill: var(--client-blue);
  }
  .V3StatusCenterLogin > #pnlEnterPassword .DefaultLabelClassV3,
  .V3StatusCenterLogin > #pnlShowCreatePass .DefaultLabelClassV3,
  .V3StatusCenterLogin > #pnlShowMFACode .DefaultLabelClassV3,
  .V3StatusCenterLogin > #pnlShowMFADropdown .DefaultLabelClassV3,
  .V3SummaryControl #pnlShowMFACode .DefaultLabelClassV3,
  .V3SummaryControl #pnlShowMFADropdown .DefaultLabelClassV3,
  .V3SummaryControl .fiviVerifyTrialDeposits .DefaultLabelClassV3,
  .fiviStatusCenterEmail .DefaultLabelClassV3 {
    font-weight: 500;
    top: 0;
    &.FocusLabelClass {
      font-weight: 600;
      left: var(--gap-horizontal-50);
      top: 12px !important;
      text-transform: none;
    }
  }
}

.product-service-content.expanded {
  overflow: visible;
}

.fiviTooltipContainer {
  width: fit-content;
  height: fit-content;
  position: absolute;
  right: 5px;
  top: calc(50% - 8px);
}

.DefaultTooltipClass:has(+ span[role="tooltip"]) {
  position: static;
  + span[role="tooltip"] {
    visibility: hidden;
    position: absolute;
    background: black;
    opacity: 0.9;
    color: white;
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: visibility 0.25s;
    z-index: 2;
    max-width: 250px;
    width: 200px;
    box-shadow:
      rgba(0, 0, 0, 0.19) 0px 10px 20px,
      rgba(0, 0, 0, 0.23) 0px 6px 6px;
    right: 0;
    top: 25px;
    &:hover,
    &:focus {
      visibility: visible;
    }
  }
  &:hover,
  &:focus {
    + span[role="tooltip"] {
      visibility: visible;
    }
  }
}

@media all and (max-device-width: 475px), all and (max-width: 475px) {
  /* .DefaultTooltipClass {
  } */
}

.fiviControl.fiviCheckBox,
.fiviCheckBox,
.fiviControl.fiviRadioButton,
.fiviRadioButton {
  & .fiviTooltipContainer {
    position: relative;
    top: unset;
  }
  & .DefaultTooltipClass {
    position: static;
  }
}

.fiviLinkHistory:has(.fiviTooltipContainer) {
  padding-right: 25px;
  position: relative;
  & > .fiviTooltipContainer {
    position: absolute;
    right: 0;
    top: -2px;
  }
}

/* Utilities */

.pb-6 {
  padding-bottom: 6rem;
}

.pt-1 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 5rem;
}

.flex-row {
  gap: var(--gap-vertical-75) var(--default-control-gap);
}

.w-auto {
  width: auto !important;
}

.neg-m-1 {
  margin-left: -1rem;
}