/*
Recent Updates: 5/27/25 -CM(NW) - add new  (.button-other-disclosure-print) for disclosure print button, basically just a smaller verison of button-other so that it looks more aligned at the bottom of the disclosure list.
*/
/*
        Table of Contents

    1. Variables
        1.1 Mobile Variables
    2. General Elements & Classes
        2.1 General Elements
        2.2 iCheck
        2.3 Flex Helper Classes
        2.4 Column Helper Classes
        2.5 General Helper Classes
    3. Page Structure
        3.1 Page Structure
		3.2 Header Styling
		3.3 Main Styling
		3.4 Footer Styling
    4. Page General Containers
    5. Buttons
		5.1 Button Containers
	6. Accordions
	7. Inputs and Labels
		7.1 Labels
		7.2 Inputs
		7.3 Fivi Input Containers
		7.4 Fivi Checkbox/Radio Buttons
    7.5 Validator
		7.6 Tool Tips
		7.7 Seperators
		7.8 Loader
	8. fiVISION Controls
        8.1 fiVISION_ErrorSummary
		8.2 fiVISION_Panel
		8.3 fiVISION_ProductsAndServicesV2
		8.4 fiVISION_AddressTextBoxV2
		8.5 fiVISION_PhoneTextBoxV2
		8.6 fiVISION_IDTypeV2
		8.7 fiVISION_HousingDurationHistory
		8.8 fiVISION_EmploymentHistory
		8.9 fiVISION_IndividualIncome
		8.10 fiVISION_IndividualDetails
		8.11 fiVISION_ProductsAndServicesSelected
		8.12 fiVISION_ProductRelationships
		8.13 fiVISION_DocumentListV2
		8.14 fiVISION_DisclosuresList
		8.15 fiVISION_ProductFundingV2
		8.16 fiVISION_ProveIndividualLookup
		8.17 fiVISION_ACH
		8.18 fiVISION_CreditCardV2
		8.19 fiVISION_ApplicantWithdraw
		8.20 fiVISION_ProgressBar
		8.21 fiVISON_IndividualHandler
        8.22 fiVISION_EmailTextBoxV2
        8.23 fiVISION_CollateralHandler
        8.24 fiVISION_IDAuthentication
        8.25 fiVISION_PlaidFundingAccountVerification
        8.26 fiVISION_WorkflowSurvey
		8.27 fiVISION_MoneyTextBoxV2
	9. Page Specific
		9.1 Default Page
        9.2 Applicant Prove
        9.3 Select Accounts
        9.4 Disclosures
        9.5 Funding
        9.6 Pending/Approved/Denied
        9.7 Decline Disclosures
		9.8 One Time Passcode
		9.9 Applicant Additional Information
	10. ControlID Specific
	11. Admin Console

    Mobile Reference Media Queries for stepping down
    Assumes column width 66px and column spacer 24px

    @media all and (max-device-width: 1106px), all and (max-width: 1106px) {

    }

    @media all and (max-device-width: 836px), all and (max-width: 836px) {

    }

    @media all and (max-device-width: 656px), all and (max-width: 656px) {

    }

    @media all and (max-device-width: 452px), all and (max-width: 452px) {

    }

*/
/*
    1. Variables
*/
:root {
  /*colors*/
  /*gray scale*/
  --color-white: #ffffff;
  --color-white-light: #f9fafb;
  --color-white-normal: #f3f4f6;
  --color-white-dark: #e5e7eb;
  --color-gray-light: #8d93b2;
  --color-gray-normal: #696f8c;
  --color-gray-dark: #4e4c55;
  --color-black: #000000;
  --color-black-light: #33374d;
  --color-black-normal: #101325;
  --color-black-dark: #0b0e1e;
  /*client colors*/
  --color-blue-header: #283971;
  --color-blue-footer: #002d7b;
  --color-primary-light: #b6e3f2;
  --color-primary-secondary: #4a7cb9;
  --color-primary-normal: #002d7b;
  --color-primary-dark: #cb5756;
  --color-secondary-light: #3c7ccd;
  --color-secondary-normal: #ffd800;
  --color-secondary-dark: #0b0e1e;
  --color-tertiary-light: #10b981;
  --color-tertiary-normal: #cb6d51;
  --color-tertiary-dark: #047857;
  --color-quaternary-light: #fcd34d;
  --color-quaternary-normal: #fbbf24;
  --color-quaternary-dark: #f59e0b;
  /*font family*/
  --font-family-pri: "Open Sans", sans-serif;
  --font-family-alt: "Open Sans", sans-serif;
  /*fonts*/
  /*default font*/
  --font-size: 16px;
  --font-lineheight: 20px;
  --font-color: var(--color-black-white);
  --font-color-light: var(--color-gray-normal);
  --font-weight: 400;
  --font-family: var(--font-family-alt);
  /*input font*/
  --font-size-input: var(--font-size);
  --font-lineheight-input: var(--font-lineheight);
  --font-color-input: var(--color-black-light);
  --font-weight-input: var(--font-weight);
  --font-family-input: var(--font-family);
  /*label font*/
  --font-size-label: var(--font-size);
  --font-lineheight-label: var(--font-lineheight);
  --font-color-label: var(--color-black-light);
  --font-color-label-focus: var(--font-color);
  --font-weight-label: 500;
  --font-family-label: var(--font-family);
  /*title font*/
  --font-size-title: 32px;
  --font-lineheight-title: 34px;
  --font-color-title: var(--color-primary-normal);
  --font-weight-title: 500;
  --font-family-title: var(--font-family-pri);
  /*h1 font*/
  --font-size-h1: calc(var(--font-size) + 6px);
  --font-lineheight-h1: calc(var(--font-size-h1) + 3px);
  --font-color-h1: var(--color-primary-normal);
  --font-weight-h1: 500;
  --font-family-h1: var(--font-family-pri);
  /*h2 font*/
  --font-size-h2: calc(var(--font-size) + 4px);
  --font-lineheight-h2: calc(var(--font-size-h2) + 3px);
  --font-color-h2: var(--font-color-h1);
  --font-weight-h2: var(--font-weight-h1);
  --font-family-h2: var(--font-family-pri);
  /*h3 font*/
  --font-size-h3: calc(var(--font-size) + 2px);
  --font-lineheight-h3: calc(var(--font-size-h3) + 3px);
  --font-color-h3: var(--font-color-light);
  --font-weight-h3: 600;
  --font-family-h3: var(--font-family);
  /*h4 font*/
  --font-size-h4: 16px;
  --font-lineheight-h4: 18px;
  --font-color-h4: var(--font-color-h3);
  --font-weight-h4: 500;
  --font-family-h4: var(--font-family);
  /*page structure*/
  --column-width: 66px;
  --column-spacer: 24px;
  --column-width-half: calc(var(--column-width) / 2);
  /*33px*/
  --column-width-2: calc(calc(var(--column-width) * 2) + var(--column-spacer));
  /*156px*/
  --column-width-3: calc(
    calc(var(--column-width) * 3) + calc(var(--column-spacer) * 2)
  );
  /*246px*/
  --column-width-4: calc(
    calc(var(--column-width) * 4) + calc(var(--column-spacer) * 3)
  );
  /*336px*/
  --column-width-5: calc(
    calc(var(--column-width) * 5) + calc(var(--column-spacer) * 4)
  );
  /*426px*/
  --column-width-6: calc(
    calc(var(--column-width) * 6) + calc(var(--column-spacer) * 5)
  );
  /*516px*/
  --column-width-7: calc(
    calc(var(--column-width) * 7) + calc(var(--column-spacer) * 6)
  );
  /*606px*/
  --column-width-8: calc(
    calc(var(--column-width) * 8) + calc(var(--column-spacer) * 7)
  );
  /*696px*/
  --column-width-9: calc(
    calc(var(--column-width) * 9) + calc(var(--column-spacer) * 8)
  );
  /*786px*/
  --column-width-10: calc(
    calc(var(--column-width) * 10) + calc(var(--column-spacer) * 9)
  );
  /*876px*/
  --column-width-11: calc(
    calc(var(--column-width) * 11) + calc(var(--column-spacer) * 10)
  );
  /*966px*/
  --column-width-12: calc(
    calc(var(--column-width) * 12) + calc(var(--column-spacer) * 11)
  );
  /*1056px*/
  --column-width-full: 100%;
  /*flex properties*/
  --gap-vertical: var(--column-spacer);
  --gap-vertical-25: calc(var(--gap-vertical) * 0.25);
  --gap-vertical-50: calc(var(--gap-vertical) * 0.5);
  --gap-vertical-75: calc(var(--gap-vertical) * 0.75);
  --gap-vertical-150: calc(var(--gap-vertical) * 1.5);
  --gap-vertical-200: calc(var(--gap-vertical) * 2);
  --gap-horizontal: var(--column-spacer);
  --gap-horizontal-25: calc(var(--gap-horizontal) * 0.25);
  --gap-horizontal-50: calc(var(--gap-horizontal) * 0.5);
  --gap-horizontal-150: calc(var(--gap-horizontal) * 1.5);
  --gap-horizontal-200: calc(var(--gap-horizontal) * 2);
  /*border properties*/
  --border-radius: var(--gap-vertical) var(--gap-horizontal);
  --border-color: var(--color-gray-light);
  --border-color-focus: var(--color-primary-normal);
  /*color properties*/
  --background-input-color: var(--color-white-light);
  --background-color: var(--color-white-normal);
  --background-color-page: var(--color-white-light);
  --background-color-alt: var(--color-white-normal);
  /*input and label structure*/
  --fiviInput-width: var(--column-width-4);
  --fiviInput-width-half: calc(
    calc(var(--fiviInput-width) - var(--column-spacer)) / 2
  );
  --fiviInput-width-double: calc(
    calc(var(--fiviInput-width) * 2) + var(--column-spacer)
  );
  /*the below two should add to the above, sometimes 3+2 or 2+2 or 2+1, main is always >= alt*/
  --fiviInput-width-partial-main: var(--column-width-2);
  --fiviInput-width-partial-alt: var(--column-width-2);
  --input-height: 50px;
  --input-focusLabel-fontSize: calc(var(--font-size-label) - 2px);
  --input-focusLabel-offset: calc(var(--input-height) + var(--gap-vertical-25));
  --input-marginTop-forLabelFocusSpace: calc(
    var(--input-focusLabel-fontSize) + var(--gap-vertical-25)
  );
  /* how much space between each input */
  --fiviInput-vertical-spacing: var(--gap-vertical-75);
  --fiviInput-horizontal-spacing: var(--gap-horizontal);
}

/*
    1.1 Mobile Variables

    We are going to do a step down approach.  We need to account for the
    head/main/foot left/right padding of column width (*2 as there are left and right).
    add a couple pixels for good measure.
*/
@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  /*
        @1056px+48px+2px = 1106px
        -12 columns -> 7 columns
        -fiviInput-width goes to 5 columns
        -should accomidate 2 inputs per row
    */
  :root {
    --column-width-11: 100%;
    --column-width-12: 100%;
    --column-width-10: 100%;
    --fiviInput-width: var(--column-width-5);
    --fiviInput-width-partial-main: var(--column-width-3);
    --fiviInput-width-partial-alt: var(--column-width-2);
    --fiviInput-width-half: calc(
      calc(var(--fiviInput-width) - var(--column-spacer)) / 2
    );
  }
}

@media all and (max-device-width: 988px), all and (max-width: 988px) {
  :root {
    --fiviInput-width: var(--column-width-4);
    --fiviInput-width-partial-main: var(--column-width-2);
    --fiviInput-width-partial-alt: var(--column-width-2);
  }
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  /*
        @786px+48px+2px = 836px
        -9 columns -> 7 columns
        -fiviInput-width goes to 3 columns
        -should accomidate 2 inputs per row
    */
  :root {
    --font-size: 14px;
    /* --font-size-h1: 20px;
        --font-lineheight-h1: 23px; */
    /* --font-size-h2: 16px;
        --font-lineheight-h2: 18px;
        --font-size-h3: 14px;
        --font-lineheight-h3: 16px; */
    --column-width-8: 100%;
    --column-width-9: 100%;
  }
}

@media all and (max-device-width: 808px), all and (max-width: 808px) {
  :root {
    --fiviInput-width: var(--column-width-3);
    --fiviInput-width-partial-main: var(--column-width-3);
    --fiviInput-width-partial-alt: var(--column-width-3);
    --fiviInput-width-half: calc(
      calc(var(--fiviInput-width) - var(--column-spacer)) / 2
    );
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  /*
        @606px+48+2px = 656px
        -7 columns -> 5 columns
        -fiviInput-width goes to 4 columns
        -accomidate 1 input, with an exception or two, inputs go 1 per row
    */
  :root {
    --column-width-6: 100%;
    --column-width-7: 100%;
    --fiviInput-width: var(--column-width-3);
    --fiviInput-width-partial-main: var(--column-width-3);
    --fiviInput-width-partial-alt: var(--column-width-3);
    --fiviInput-width-half: var(--column-width-2);
  }
}

@media all and (max-device-width: 628px), all and (max-width: 628px) {
  /*
        @606px+48+2px = 656px
        -7 columns -> 5 columns
        -fiviInput-width goes to 4 columns
        -accomidate 1 input, with an exception or two, inputs go 1 per row
    */
  :root {
    --fiviInput-width: var(--column-width-5);
    --fiviInput-width-partial-main: var(--column-width-3);
    --fiviInput-width-partial-alt: var(--column-width-2);
    --fiviInput-width-half: calc(
      calc(var(--fiviInput-width) - var(--column-spacer)) / 2
    );
  }
}

@media all and (max-device-width: 540px), all and (max-width: 540px) {
  /*
        @606px+48+2px = 656px
        -7 columns -> 5 columns
        -fiviInput-width goes to 4 columns
        -accomidate 1 input, with an exception or two, inputs go 1 per row
    */
  :root {
    --column-width-3: 100%;
    --column-width-4: 100%;
    --column-width-5: 100%;
    --fiviInput-width: 100%;
    --fiviInput-width: var(--column-width-4);
    --fiviInput-width-half: calc(50% - calc(var(--column-spacer) / 2));
    --fiviInput-width-partial-main: var(--fiviInput-width-half);
    --fiviInput-width-partial-alt: var(--fiviInput-width-half);
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  /*
        @426px+24px+2px = 452px
        - any column width > 2 goes to 100%
    */
  :root {
    --column-width-3: 100%;
    --column-width-4: 100%;
    --column-width-5: 100%;
    --fiviInput-width: 100%;
    --fiviInput-width-half: calc(50% - calc(var(--column-spacer) / 2));
  }
}

/*
    2. General Elements & Classes
*/
/*
    2.1 General Elements
*/
html,
body {
  font-size: var(--font-size);
  line-height: var(--font-size);
  color: var(--font-color);
  font-weight: var(--font-weight);
  font-family: var(--font-family);
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4,
p,
label,
input,
select,
textarea,
form {
  margin: 0;
  margin-block: 0;
  padding: 0;
  padding-block: 0;
  width: 100%;
}

b {
  font-weight: 600;
}

h1,
.h1 {
  font-size: var(--font-size-h1);
  line-height: var(--font-lineheight-h1);
  color: var(--font-color-h1);
  font-weight: var(--font-weight-h1);
  font-family: var(--font-family-h1);
  text-align: left;
  line-height: 150%;
}

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);
  text-align: left;
}

h3,
.h3 {
  font-size: var(--font-size-h3);
  line-height: var(--font-lineheight-h3);
  color: var(--font-color-h3);
  font-weight: var(--font-weight-h3);
  font-family: var(--font-family-h3);
  text-align: left;
}

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);
  text-align: left;
}

legend {
  display: none;
}

a,
a:focus {
  color: var(--color-primary-normal);
  text-decoration: underline;
}

a:hover {
  text-decoration: underline;
  color: var(--color-primary-secondary);
}

a:active,
a:visited {
  color: var(--color-tertiary-normal) !important;
  text-decoration: none;
}

ul,
ol {
  margin-bottom: 0;
  line-height: calc(var(--font-size) * 1.25);
  padding-left: var(--gap-horizontal);
}

ul > li:not(:last-of-type),
ol > li:not(:last-of-type) {
  margin-bottom: var(--gap-vertical-25);
}

/*
    2.2 iCheck
*/
.icheckbox_square-black,
.icheckbox_square-red,
.icheckbox_square-green,
.icheckbox_square-blue,
.icheckbox_square-aero,
.icheckbox_square-grey,
.icheckbox_square-orange,
.icheckbox_square-yellow,
.icheckbox_square-pink,
.icheckbox_square-purple {
  background-color: white;
  margin: 0;
}

.iradio_square-black,
.iradio_square-red,
.iradio_square-green,
.iradio_square-blue,
.iradio_square-aero,
.iradio_square-grey,
.iradio_square-orange,
.iradio_square-yellow,
.iradio_square-pink,
.iradio_square-purple {
  background-color: white;
  border-radius: 50%;
  margin: 0;
}

/*
    2.3 Flex Helper Classes
*/
.flex-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
  flex-wrap: wrap;
  width: 100%;
}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
  width: 100%;
}

.flex-row.flex-align-vertical-center {
  align-items: center;
}

.flex-column.flex-align-vertical-center {
  justify-content: center;
}

.flex-row.flex-align-horizontal-center {
  justify-content: center;
}

.flex-row.flex-space-between {
  justify-content: space-between;
}

.flex-column.flex-space-between {
  align-items: space-between;
}

.flex-column.flex-align-vertical-center {
  align-items: center;
}

.flex-row.flex-align-horizontal-end {
  justify-content: flex-end;
}

.flex-column.flex-align-horizontal-end {
  align-items: flex-end;
}

.flex-row.flex-align-vertical-end {
  align-items: flex-end;
}

.flex-column.flex-align-vertical-end {
  justify-content: flex-end;
}

/*
    gap is almost always going to govern the vertical,
    horizontal should rarely be modified, if ever.  If you
    need to, add/modify a custom class.
*/
.flex-gap-25 {
  gap: var(--gap-vertical-25) var(--gap-horizontal-25);
}

.flex-gap-50 {
  gap: var(--gap-vertical-50) var(--gap-horizontal);
}

.flex-gap-100 {
  gap: var(--gap-vertical) var(--gap-horizontal);
}

.flex-gap-150 {
  gap: var(--gap-vertical-150) var(--gap-horizontal);
}

.flex-gap-200 {
  gap: var(--gap-vertical-200) var(--gap-horizontal);
}

/*
    2.4 Column Helper Classes
*/
.column-width-fiviInput {
  max-width: var(--fiviInput-width);
  width: 100vw;
}

.column-width-1 {
  max-width: var(--column-width);
  width: 100vw;
}

.column-width-2 {
  max-width: var(--column-width-2);
  width: 100vw;
}

.column-width-3 {
  max-width: var(--column-width-3);
  width: 100vw;
}

.column-width-4 {
  max-width: var(--column-width-4);
  width: 100vw;
}

.column-width-5 {
  max-width: var(--column-width-5);
  width: 100vw;
}

.column-width-6 {
  max-width: var(--column-width-6);
  width: 100vw;
}

.column-width-7 {
  max-width: var(--column-width-7);
  width: 100vw;
}

.column-width-8 {
  max-width: var(--column-width-8);
  width: 100vw;
}

.column-width-9 {
  max-width: var(--column-width-9);
  width: 100vw;
}

.column-width-10 {
  max-width: var(--column-width-10);
  width: 100vw;
}

.column-width-11 {
  max-width: var(--column-width-11);
  width: 100vw;
}

.column-width-12 {
  max-width: var(--column-width-12);
  width: 100vw;
}

.column-width-full {
  max-width: 100%;
  width: 100vw;
}

/*
    2.5 General Helper Classes
*/
.title-text {
  font-size: var(--font-size-title);
  line-height: 40px;
  color: var(--font-color-title);
  font-weight: var(--font-weight-title);
  font-family: var(--font-family-title);
  text-align: left;
}

.page-text {
  font-size: var(--font-size);
  line-height: 24px;
  font-weight: var(--font-weight);
  color: var(--font-color);
  width: 100%;
}

.page-text-small {
  font-size: calc(var(--font-size) - 4px);
  width: 100%;
}

.page-text-large {
  font-size: calc(var(--font-size) + 2px);
  line-height: calc(var(--font-lineheight) + 3px);
  width: 100%;
}

.header-container .page-text-large {
  color: var(--color-gray-light);
  font-size: calc(var(--font-size) + 6px);
  font-weight: 500;
  letter-spacing: 1px;
}

.spacer-vertical {
  /*
        no height is required here, gap should handle it,
        will double the space between the previous and next elements
    */
  width: 100%;
}

.indentLeft {
  margin-left: var(--gap-horizontal);
}

.loader-container {
  display: block;
  background-color: transparent;
}

.loader-container .loader {
  position: relative;
  top: 0;
  left: 0;
  border-top-color: var(--color-primary-normal);
  margin: var(--gap-vertical-50) var(--gap-horizontal-50);
}

.alert-container-box {
  background: var(--color-white-dark);
  border-radius: var(--border-radius);
  font-size: var(--font-size-h4);
  align-items: center;
  text-align: center;
  padding: var(--gap-vertical) var(--gap-horizontal);
}

.vertical-divider {
  max-height: 100%;
  border-left: 0.5px solid var(--border-color);
  position: relative;
  flex-grow: 1;
  flex-basis: 0;
}

.horizontal-divider {
  height: 1px;
  width: 100%;
  border-top: 0.5px solid var(--color-gray-light);
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .page-text-small {
    font-size: calc(var(--font-size) - 2px);
  }
}

/*
    3. Page Structure
*/
/*
    3.1 Page Structure
*/
.layout {
  background-color: var(--background-color);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

header,
main,
footer {
  width: 100%;
  display: flex;
  margin: 0;
  text-align: left;
  flex-direction: column;
}

header {
  box-shadow: none;
  background-color: var(--color-white);
}

main {
  position: relative;
  margin-bottom: auto;
  align-items: flex-start;
  padding: var(--gap-vertical-200) 0;
  flex: 1;
  flex-direction: row;
  max-width: var(--column-width-12);
}

footer {
  background-color: var(--color-blue-footer);
  position: relative;
  padding: 0;
  color: #ffffff;
}

header > .layout-container,
main > .layout-container,
footer > .layout-container {
  max-width: var(--column-width-12);
  width: 100%;
  margin: 0 auto;
  min-height: 62px;
  padding: var(--gap-vertical) var(--gap-horizontal);
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  header,
  footer {
    padding: 0;
  }

  main {
    padding: var(--gap-vertical) var(--gap-horizontal-50);
  }

  header > .layout-container {
    min-height: 50px;
    justify-content: center;
  }
}

/*
    3.2 Header Styling
*/
header > .layout-container {
  padding: 0;
}

.header-logo-container {
  background-color: #ffffff;
  padding: 2rem;
}

.header-logo {
  width: 300px;
}

header .top-menu {
  list-style: none;
  padding: 0;
  display: flex;
  font-size: 0.75rem;
  justify-content: flex-end;
}

header .top-menu .menu-item {
  padding-left: 1rem;
}

header a,
header a:visited,
header a:active {
  color: var(--font-color);
  font-weight: 600;
  text-decoration: none !important;
  transition: color 0.3s ease;
  text-decoration: none;
}

header a:hover {
  text-decoration: underline !important;
}

.header-contact-info.page-text {
  color: var(--color-white-light);
  font-size: calc(var(--font-size) - 2px);
}

.header-info-bar {
  width: 100%;
  background-color: var(--color-secondary-normal);
  padding: var(--gap-vertical-25) var(--gap-horizontal-25);
}

.header-info-bar > .flex-row {
  max-width: var(--column-width-12);
  margin: 0 auto;
}

.header-info-bar .page-text {
  flex: 0 1 auto;
  width: fit-content;
  color: var(--color-white-normal);
}

.menu-header {
  margin-bottom: auto;
  padding-top: 0.5rem;
}

@media all and (max-device-width: 1024px), all and (max-width: 1024px) {
  header > .layout-container {
    padding: 0 3rem;
    width: 100%;
  }

  header .menu-header {
    display: none;
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  header .layout-container {
    flex-direction: column;
  }

  .header-contact {
    justify-content: center;
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .header-logo {
    width: 250px;
  }

  .menu-header {
    display: none;
  }
}

/*
    3.3 Main Styling
*/
main > .layout-container {
  position: relative;
  display: flex;
  align-self: stretch;
  padding: 0;
  flex-grow: 1;
  flex-basis: 0;
  flex-direction: column;
  justify-content: stretch;
  gap: var(--gap-vertical);
  border: 1px solid var(--border-color);
  background-color: var(--background-color-page);
  margin: 0 var(--gap-horizontal);
  border-radius: 5px;
}

main > .layout-container > span {
  /*
        this is span that start the fivision_PageContent
    */
  display: flex;
  width: 100%;
  flex-direction: column;
  align-self: stretch;
  justify-content: stretch;
  flex-basis: 0;
  flex-grow: 1;
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  main > .layout-container {
    min-width: 0;
  }

  main > .layout-container > span {
    max-width: var(--column-width-12);
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  main > .layout-container {
    margin: 0;
  }
}

/*
    3.4 Footer Styling
*/
footer > .layout-container {
  font-size: var(--font-size);
}

footer .h1,
footer .h2,
footer .h3,
footer .h4 {
  color: var(--color-white-normal);
  font-weight: 500;
}

footer p {
  color: var(--color-white-normal);
  font-size: 0.79em;
  width: 100%;
  margin-bottom: 1em;
}

footer a,
footer a:visited,
footer a:active {
  color: var(--color-white);
  font-size: 14px !important;
  text-decoration: none !important;
}

footer a:hover {
  color: var(--color-white);
}

footer > .layout-container > .h2 {
  /* max-width: 100%; */
}

footer > .layout-container > .h2 {
  font-family: var(--font-family-alt);
}

footer > .layout-container > .h2:after {
  content: "";
  display: block;
  width: var(--column-width-2);
  height: 2px;
  background-color: var(--color-primary-normal);
  align-self: flex-start;
  margin-top: var(--gap-vertical-50);
}

footer .region {
  display: flex;
}

.footer-logo img {
  width: 100%;
}

.footer-top,
.footer-bottom {
  width: 100%;
}

.footer-top {
  margin: 3rem 0 4rem 0;
  justify-content: flex-start !important;
  gap: 0 !important;
}

.footer-middle {
  padding: 4rem 5rem;
  border-top: 1px solid var(--color-primary-normal);
}

.footer-bottom {
  padding-top: 2em;
  border-top: 1px solid var(--color-primary-normal);
}

.footer-bottom .region,
.footer-bottom .region a {
  font-size: 0.75rem !important;
  width: 100%;
}

.footer-top .region.region-col-1 {
  width: 40%;
}

.footer-top .region.region-col-2 {
  width: 30%;
  margin: 0 2rem;
}

.footer-top .region.region-col-3 {
  width: 20%;
}

.copyright-info {
  justify-content: flex-start;
  width: 45% !important;
}

.privacypolicy-info {
  justify-content: flex-end;
  text-align: right;
  width: 45% !important;
}

footer .top-menu {
  list-style: none;
  padding: 0;
}

.footer-title {
  font-weight: 700;
}

.institution-info {
  padding-right: 5rem;
  border-right: 1px solid var(--color-primary-normal);
}

.menu-footer {
  margin-bottom: 1.5em;
}

.menu-socialmedia {
  margin: 1rem 0 0.5rem 0;
}

.menu-socialmedia ul {
  display: flex;
}

.menu-socialmedia img {
  width: 30px;
  height: 30px;
  margin-right: 0.5em;
  filter: brightness(0) invert(1);
}

.aba-button-container {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  margin: 0.5 0 1rem 0;
}

.aba-button {
  padding: 1rem 1rem;
  background-color: #19295a;
  border-radius: 25px;
}

.field-items {
  display: flex;
  justify-content: flex-start;
}

.routing-links li {
  margin-bottom: var(--gap-vertical-50) !important;
}

.field-item {
  max-width: 100px;
}

.field-item img {
  width: 100px;
}

.ncua-logo {
  width: 100px;
  margin: 0 1rem;
}

.eho-logo {
  width: 40px;
  margin: 0 1rem;
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  .footer-top .region.region-col-1 {
    width: 45%;
  }

  .footer-top .region.region-col-2 {
    width: 20%;
    margin: 0 2rem;
  }
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  footer > .layout-container.flex-row.flex-row.flex-space-between {
    justify-content: flex-start;
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  footer > .layout-container.flex-row.flex-row.flex-space-between {
    flex-direction: column;
  }

  .footer-top,
  .footer-bottom {
    flex-direction: column;
  }

  .footer-top .region.region-col-1 {
    width: 100%;
  }

  .footer-top .region.region-col-2 {
    width: 100%;
    margin: 2rem 0;
  }

  .footer-top .region.region-col-3 {
    width: 100%;
  }

  .institution-info {
    padding-right: 0;
    border-right: none;
  }

  .menu-footer,
  .menu-socialmedia {
    justify-content: center;
  }

  .field-items {
    justify-content: center;
  }

  .footer-top .region,
  .footer-bottom .region {
    max-width: 100%;
    text-align: center !important;
    justify-content: center;
  }

  .institution-info {
    box-shadow: none;
  }

  .copyright-info {
    width: 100% !important;
  }

  .privacypolicy-info {
    width: 100% !important;
  }

  .footer-middle {
    padding: 4rem 1rem;
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
}

/*
    4. Page General Containers
*/
.page-container,
#IndividualHandler01,
main > .layout-container > span:not(:has(> .page-container)) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: var(--gap-vertical-150);
  max-width: var(--column-width-9);
  width: 100vw;
  flex-grow: 1;
  flex-basis: 0;
  align-self: stretch;
}

main > .layout-container > span:not(:has(> .page-container)) {
  padding: var(--column-spacer);
}

.progress-container:not(:has(> span)) + .layout-container .page-container {
  max-width: 100%;
}

.header-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-vertical-50);
  max-width: var(--column-width-12);
  width: 100%;
  padding: 0 var(--gap-horizontal);
}

.section-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-vertical);
  max-width: var(--column-width-12);
  width: 100%;
  padding: 0 var(--gap-horizontal) var(--gap-horizontal) var(--gap-horizontal);
}

.error-container {
  height: fit-content;
}

.section-header:after {
  content: "";
  display: block;
  width: var(--column-width-2);
  height: 2px;
  background-color: var(--color-primary-normal);
  align-self: flex-start;
  margin-top: var(--gap-vertical-25);
}

.page-navigation-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--gap-horizontal);
  /* position: absolute; */
  bottom: 0;
  left: 0;
  padding: var(--gap-vertical) var(--gap-horizontal);
  border-top: 0.5px solid var(--border-color);
  margin-top: auto;
}

.navigation-forward-container,
.navigation-other-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
  align-items: flex-end;
}

.navigation-forward-container {
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
}

.navigation-forward-container .button-link {
  text-align: center;
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  .page-container,
  #IndividualHandler01 {
    max-width: var(--column-width-10);
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .header-container,
  .section-container {
    min-width: 0;
  }

  .page-navigation-container {
    flex-direction: column;
    align-items: center;
    gap: var(--gap-vertical);
  }

  .navigation-other-container {
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--gap-vertical);
  }

  .navigation-other-container .button-link {
    text-align: center;
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .navigation-forward-container {
    flex-direction: column;
    text-align: right;
  }
}

/*
    5. Buttons
*/
.button-primary,
.btn-default,
.fiviBtnLabel {
  min-width: var(--column-width-2);
  width: fit-content !important;
  margin: 0;
  padding: var(--gap-vertical-25) var(--gap-horizontal-200);
  background-color: var(--color-tertiary-normal);
  color: var(--color-white-normal);
  border: 2px solid var(--color-tertiary-normal);
  border-radius: var(--gap-horizontal);
  font-size: 15px;
  line-height: 18px;
  font-weight: 600;
  box-shadow: none;
  transition-duration: 500ms;
  transition-property: border-radius;
  text-transform: uppercase;
  text-shadow: none;
  text-align: center;
  text-decoration: none !important;
}

.button-primary:hover:not(:disabled),
.button-primary:active:not(:disabled),
.button-primary:focus:not(:disabled),
.button-primary:visited:not(:disabled),
.btn-default:hover:not(:disabled),
.btn-default:active:not(:disabled),
.btn-default:focus:not(:disabled),
.btn-default:visited:not(:disabled) {
  background-color: var(--color-white-normal);
  border: 2px solid var(--color-tertiary-normal);
  color: var(--color-tertiary-normal) !important;
  border-radius: var(--gap-horizontal);
  text-decoration: none !important;
}

.button-primary:disabled,
.fiviBtnLabel {
  opacity: 0.5;
}

.button-other,
.MinorButton,
.fiviAddAnotherButton > a,
.fiviPlaid .btn-default,
.section-container div > a[id*="btn"] {
  justify-content: center;
  align-items: center;
  max-width: var(--fiviInput-width);
  min-width: var(--fiviInput-width-half);
  width: fit-content !important;
  margin: 0;
  /* padding: var(--gap-vertical-50) var(--gap-horizontal-200); */
  padding: 1em;
  background-color: var(--background-input-color);
  color: var(--color-primary-normal);
  border: 2px solid var(--color-primary-normal);
  border-radius: var(--gap-horizontal);
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  box-shadow: none;
  /* transition-duration: 500ms; */
  /* transition-property: color, background-color; */
  height: var(--input-height);
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: none;
  white-space: nowrap;
}

.button-other-disclosure-print {
  justify-content: center;
  align-items: center;
  max-width: 20px;
  min-width: 115px;
  width: 15%;
  margin: 0;
  /* padding: var(--gap-vertical-50) var(--gap-horizontal-200); */
  padding: 1em;
  background-color: var(--background-input-color);
  color: var(--color-primary-normal);
  border: 2px solid var(--color-primary-normal);
  border-radius: var(--gap-horizontal);
  font-size: 14px;
  line-height: 2px;
  font-weight: 500;
  box-shadow: none;
  /* transition-duration: 500ms; */
  /* transition-property: color, background-color; */
  height: 30px;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: none;
  white-space: nowrap;
}

.button-other,
.MinorButton {
  display: inline-flex;
}

.fiviAddAnotherButton > a {
  display: inline-flex;
}

.button-other:hover:not(:disabled),
.button-other:active:not(:disabled),
.button-other:focus:not(:disabled),
.button-other-disclosure-print:hover:not(:disabled),
.button-other-disclosure-print:active:not(:disabled),
.button-other-disclosure-print:focus:not(:disabled),
.MinorButton:hover:not(:disabled),
.MinorButton:active:not(:disabled),
.MinorButton:focus:not(:disabled),
.fiviAddAnotherButton > a:hover:not(:disabled),
.fiviAddAnotherButton > a:active:not(:disabled),
.fiviAddAnotherButton > a:focus:not(:disabled),
.fiviPlaid .btn-default:hover:not(:disabled),
.fiviPlaid .btn-default:active:not(:disabled),
.fiviPlaid .btn-default:focus:not(:disabled),
.section-container div > a[id*="btn"]:hover {
  background-color: var(--color-primary-normal);
  color: var(--color-white) !important;
  box-shadow: none;
  text-decoration: none;
  text-shadow: none;
  border-color: var(--color-primary-normal);
  outline: none;
}

.button-other:disabled,
.MinorButton:disabled,
.fiviAddAnotherButton > a:disabled {
  opacity: 0.5;
}

.button-link,
.button-link-alt,
.button-upload {
  min-width: var(--column-width-2);
  text-align: left !important;
  width: fit-content !important;
  margin: 0;
  padding: var(--gap-vertical-25) var(--gap-horizontal-200);
  background-color: transparent;
  border: none;
  font-size: 15px;
  line-height: 18px;
  font-weight: 600;
  color: var(--color-primary-normal);
  width: fit-content !important;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: none;
}

.button-link-alt {
  text-transform: uppercase;
  font-weight: 600;
}

.button-upload {
  cursor: pointer;
}

.button-upload:hover:not(:disabled),
.button-upload:active:not(:disabled),
.button-upload:focus:not(:disabled),
.button-link:hover:not(:disabled),
.button-link:active:not(:disabled),
.button-link:focus:not(:disabled),
.button-link-alt:hover:not(:disabled),
.button-link-alt:active:not(:disabled),
.button-link-alt:focus:not(:disabled) {
  text-decoration: underline !important;
}

.button-other:disabled,
.button-other-alt:disabled {
  opacity: 0.5;
}

.back-button {
  min-width: var(--column-width-2);
  width: fit-content !important;
  text-align: center !important;
  margin: 0;
  padding: var(--gap-vertical-25) var(--gap-horizontal-200);
  background-color: transparent;
  color: var(--color-tertiary-normal);
  border: 2px solid var(--color-tertiary-normal);
  border-radius: var(--gap-horizontal);
  font-size: 15px;
  line-height: 18px;
  font-weight: 600;
  box-shadow: none;
  transition-duration: 500ms;
  transition-property: border-radius;
  text-transform: uppercase;
  text-shadow: none;
  text-align: center;
  text-decoration: none !important;
}

.back-button:hover:not(:disabled),
.back-button:active:not(:disabled),
.back-button:focus:not(:disabled) {
  background-color: var(--color-tertiary-normal);
  border: 2px solid var(--color-tertiary-normal);
  color: var(--color-white) !important;
  border-radius: var(--gap-horizontal);
  text-decoration: none !important;
  color: white;
}

.fiviRemoveBtn {
  position: absolute;
  color: var(--color-primary-normal);
  cursor: pointer;
  left: var(--fiviInput-width);
  background: white;
}

.fiviRemoveBtn:hover:not(:disabled),
.fiviRemoveBtn:active:not(:disabled),
.fiviRemoveBtn:focus:not(:disabled) {
  color: var(--color-primary-secondary);
}

/*
    5.1 Button Containers
*/
.add-another-individual-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--fiviInput-width);
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  .add-another-individual-container {
    width: var(--fiviInput-width-double);
  }
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .add-another-individual-container {
    width: var(--fiviInput-width);
  }
}

/*
    6. Accordions
*/
.panel.panel-default {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  width: 100%;
  padding: var(--gap-vertical) var(--gap-horizontal);
  gap: var(--gap-vertical);
  background-color: var(--background-color-alt);
}

/*
#accordion {
    display: flex;
    flex-direction: column;
    max-width: var(--column-width-12);
    width: 100%;
    gap: var(--gap-vertical);
}

#accordion>.panel {
    outline: none;
    border: none;
    border-radius: var(--border-radius);
    background-color: transparent;
    box-shadow: none;
    margin: 0;
}

#accordion>.panel:has(> .panel-heading.collapsed) {
    outline: 1px solid var(--color-primary-normal);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

#accordion>.panel>.panel-heading {
    display: flex;
    align-items: center;
    background: white;
    border: none;
    border-radius: var(--border-radius);
    padding: var(--gap-vertical-50);
    cursor: pointer;

}

#accordion>.panel>.panel-heading>.panel-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap: wrap;
    position: relative;
}

#accordion>.panel>.panel-heading .panel-title>.panelArrow {
    position: absolute;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#accordion>.panel .panel-body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-vertical);
    border: none;
    border-radius: var(--border-radius);
    padding: var(--gap-vertical) 0;
}*/
.panel-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
}

.panel-default > .panel-heading {
  color: unset;
  background-color: unset;
  border-color: unset;
  background-image: unset;
}

.panel-group .panel + .panel {
  margin-top: unset;
}

.panel-heading {
  display: flex;
  cursor: pointer;
  padding: 0;
}

.panel-title > i:before {
  display: none;
}

.panel-heading > .panel-title > i:before {
  display: unset;
}

.panel-body::before,
.panel-body::after {
  display: none;
}

/*
    this is the accordion open
*/
/*
#accordion>.panel>.panel-heading:has(+ .collapse.in) {
    padding-left: 0;
    background: transparent;
    transition: padding-left .5s ease-in-out;
}

#accordion>.panel>.panel-heading:has(+ .collapse.in)>.panel-title {
    font-size: var(--font-size-h3);
    line-height: var(--font-size-h3);
    transition: font-size .5s ease-in-out;
}
*/
/*
    this is the accordion opening
*/
/*
#accordion>.panel>.panel-heading:has(+ .collapsing) {
    padding-left: 0;
    background: transparent;
    transition: padding-left .5s ease-in-out;
}

#accordion>.panel>.panel-heading:has(+ .collapsing)>.panel-title {
    font-size: var(--font-size-h3);
    line-height: var(--font-size-h3);
    transition: font-size .5s ease-in-out;
}
*/
/*
    this is with the accordion closed
*/
/*
#accordion>.panel>.panel-heading.collapsed:has(+ .collapse:not(.in)) {
    padding-left: var(--gap-horizontal);
    transition: padding-left .5s ease-in-out;
}

#accordion>.panel>.panel-heading.collapsed:has(+ .collapse:not(.in))>.panel-title {
    font-size: var(--font-size-h4);
    line-height: var(--font-size-h4);
    transition: font-size .5s ease-in-out;
}
*/
/*
    this is with the accordion closing
*/
/*
#accordion>.panel>.panel-heading.collapsed:has(+ .collapsing) {
    padding-left: var(--gap-horizontal);
    transition: padding-left .5s ease-in-out;
}

#accordion>.panel>.panel-heading.collapsed:has(+ .collapsing)>.panel-title {
    font-size: var(--font-size-h4);
    line-height: var(--font-size-h4);
    transition: font-size .5s ease-in-out;
}
*/
/*
    7. Inputs and Labels
*/
/*
    7.1 Labels
*/
label {
  font-weight: var(--font-weight-label);
}

.DefaultLabelClass {
  display: flex;
  align-items: center;
  height: var(--input-height);
  position: absolute;
  left: var(--gap-horizontal-50);
  bottom: 0;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  line-height: var(--font-size-label);
  color: var(--font-color-label);
  font-family: var(--font-family-label);
  transition: all 0.2s ease-in-out;
}

.FocusLabelClass {
  height: var(--input-focusLabel-fontSize);
  font-size: var(--input-focusLabel-fontSize);
  bottom: var(--input-focusLabel-offset);
  color: var(--font-color-label-focus);
  left: 0;
  font-weight: 500;
}

.checkbox-label {
  font-weight: var(--font-weight);
  flex: 1;
  line-height: var(--font-lineheight);
}

.DefaultLabelClass:has(+ select) {
  pointer-events: none;
}

/*
    7.2 Inputs
*/
.fiviInput {
  display: inline-flex;
  width: 100vw;
  max-width: var(--fiviInput-width);
  position: relative;
}

.form-control {
  display: flex;
  align-items: center;
  width: 100% !important;
  height: var(--input-height);
  padding: 0px var(--gap-horizontal-50);
  margin-top: var(--input-marginTop-forLabelFocusSpace);
  font-size: var(--font-size-input);
  font-weight: var(--font-weight-input);
  line-height: var(--font-lineheight-input);
  color: var(--font-color-input);
  font-family: var(--font-family-input);
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  background-color: var(--background-input-color) !important;
  flex: 1 1 0;
}

.form-control:focus {
  border: 2px solid var(--border-color-focus) !important;
  box-shadow: none;
  /* -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px color-mix(in srgb, var(--border-color-focus), transparent 40%);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px color-mix(in srgb, var(--border-color-focus), transparent 40%); */
  color: var(--font-color-label-focus);
}

.form-control[disabled] {
  background-color: #eee !important;
}

.fiviTransparent {
  color: transparent;
}

.fiviInput:has(> textarea) {
  max-width: 100%;
  & > textarea {
    margin-top: 0;
    padding: var(--gap-horizontal-50);
    font-weight: 400;
  }
}

/*
    7.3 Fivi Input Containers
*/
.fiviTwoInput,
.fiviLongInput {
  /*
        can container either input elements or fiviInput containers
    */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-horizontal-25) var(--gap-vertical);
  flex-wrap: wrap;
}

.fiviTwoInput > input,
.fiviTwoInput > .fiviInput {
  max-width: var(--fiviInput-width-half);
}

.fiviTwoInput > .DefaultLabelClass {
  height: var(--input-focusLabel-fontSize);
  font-size: var(--input-focusLabel-fontSize);
  bottom: var(--input-focusLabel-offset);
  color: var(--font-color-label-focus);
  left: 0;
  text-transform: none;
}

/*
    these containers normally contain a bunch of .fiviInput containers
*/
.fiviMultiInput {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
  flex-wrap: wrap;
  max-width: 100%;
  width: 100%;
  position: relative;
}

.fiviMultiContainer {
  display: flex;
  flex-direction: column;
  max-width: var(--column-width-full);
  width: 100%;
  gap: var(--gap-vertical) var(--gap-horizontal);
}

.fiviTwoInputContainer {
  /*
        Use this when you want two .fiviInputs to take
        up half the normal width and behave like a standard
        width .fiviInput.
    */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
  flex-wrap: wrap;
  max-width: var(--fiviInput-width);
  width: 100vw;
  position: relative;
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .fiviTwoInput > input {
    max-width: var(--fiviInput-width-half);
  }

  .fiviMultiInput {
    max-width: var(--fiviInput-width);
    width: 100%;
  }
}

/*
    7.4 Fivi Checkbox/Radio Buttons
*/
.fiviCheckBox,
.fiviCheckBox > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-horizontal-50);
  max-width: fit-content;
  flex-direction: row;
}

.fiviCheckBox > label,
.fiviCheckBox > span > label {
  display: flex;
  height: var(--column-spacer);
  align-items: center;
  gap: var(--gap-horizontal-50);
}

.icheckbox_square-blue,
.iradio_square-blue {
  background-image: unset;
  width: 0;
  height: 0;
  appearance: none;
  position: absolute !important;
}

input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  position: absolute;
  width: 0;
  height: 0;
}

.fiviCheckBox {
  /* display: block !important; */
}

.fiviCheckBox label {
  /* display: none; */
}

.fiviCheckBox .CtlValidator {
  top: -4px;
  margin: 0;
  padding: 0;
  left: -20;
  height: 25px;
}

.icheckbox_square-blue + label,
.iradio_square-blue + label,
.iradio_square-blue + span + label {
  position: relative;
  margin-bottom: 0;
  cursor: pointer;
}

.icheckbox_square-blue + label:before,
.iradio_square-blue + label:before,
.iradio_square-blue + span + label:before {
  content: "";
  margin: 0;
  min-width: calc(var(--column-spacer) * 2);
  border-radius: 40px;
  height: var(--column-spacer);
  position: relative;
  cursor: pointer;
  background-color: var(--color-gray-light);
  transition-duration: 500ms;
  max-width: calc(var(--column-spacer) * 2);
}

.icheckbox_square-blue + label:after,
.iradio_square-blue + label:after,
.iradio_square-blue + span + label:after {
  content: "";
  position: absolute;
  background-color: var(--color-black-light);
  cursor: pointer;
  left: 0;
  width: var(--column-spacer);
  height: var(--column-spacer);
  border-radius: 50%;
  border: 0.5px solid var(--border-color);
  transition-duration: 500ms;
}

.icheckbox_square-blue.checked + label:before,
.iradio_square-blue.checked + label:before,
.iradio_square-blue.checked + span + label:before {
  background-color: var(--color-primary-light);
}

.icheckbox_square-blue.checked + label:after,
.iradio_square-blue.checked + label:after,
.iradio_square-blue.checked + span + label:after {
  background-color: var(--color-primary-normal);
  border-color: var(--color-primary-light);
  left: var(--column-spacer);
}

.icheckbox_square-blue.checked.disabled + label:after,
.iradio_square-blue.checked.disabled + label:after,
.iradio_square-blue.checked.disabled + span + label:after {
  cursor: not-allowed;
}

.icheckbox_square-blue.checked.disabled + label:before,
.iradio_square-blue.checked.disabled + label:before,
.iradio_square-blue.checked.disabled + span + label:before {
  display: flex;
  align-items: center;
  padding-left: calc(var(--column-spacer) / 2);
  background-color: var(--color-primary-light);
  color: var(--color-primary-normal);
  content: "\f023";
  font-family: FontAwesome;
  font-size: 14px;
  cursor: not-allowed;
}

/* Button radio style */
.fiviRadioButton {
  display: flex;
  position: relative;
  align-items: center;
  z-index: 0;
}

.fiviRadioButton input + label {
  position: relative;
  padding: 0 var(--gap-horizontal-25);
  margin-bottom: 0;
  width: 100%;
  justify-content: center;
  height: calc(var(--input-height));
  cursor: pointer;
  text-align: center;
  color: var(--color-primary-normal);
  align-content: center;
  pointer-events: all !important;
}

.fiviRadioButton input + label:before {
  display: none;
}

.fiviRadioButton input + label:after {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  min-width: fit-content;
  padding: var(--gap-vertical) var(--gap-horizontal);
  background-color: var(--background-color-alt);
  color: var(--color-primary-normal);
  border: 1px solid var(--color-primary-normal);
  border-radius: 5px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  box-shadow: none;
  transition-duration: 500ms;
  transition-property: color, background-color;
  z-index: -1;
}

.fiviRadioButton input + label:hover,
.fiviRadioButton input + label:focus,
.fiviRadioButton input + label:active,
.fiviRadioButton input:checked + label {
  color: var(--color-white-normal);
}

.fiviRadioButton input + label:hover:after,
.fiviRadioButton input + label:focus:after,
.fiviRadioButton input + label:active:after,
.fiviRadioButton input:checked + label:after {
  background-color: var(--color-primary-normal);
  box-shadow: none;
  text-decoration: none;
  left: 0;
}

.fiviRadioButton input:checked:disabled + label:after {
  cursor: not-allowed;
}

.fiviRadioButton input:checked:disabled + label:before {
  display: none;
}

/*
    7.5 Validator
*/
.CtlValidator {
  position: absolute;
  line-height: var(--input-height);
  bottom: -3px;
  left: 3.5px;
  z-index: 5;
}

/*
    7.6 Tool Tips
*/
.DefaultTooltipClass {
  position: absolute;
  width: fit-content;
}

.fiviInput .DefaultTooltipClass {
  bottom: 0;
  right: var(--gap-horizontal-50);
  height: var(--input-height);
  display: flex;
  align-items: center;
}

.fiviInput select ~ .DefaultTooltipClass {
  right: calc(var(--gap-horizontal) - var(--gap-horizontal-25));
}

.tooltip-arrow {
  display: none;
}

.tooltip-inner {
  width: max-content;
  max-width: 300px !important;
  text-align: left;
}

.popover-content {
  color: var(--color-black-normal);
}

/*
    7.7 Seperators
*/
.fiviMultiSeperator {
  width: 100%;
  height: 2px;
  margin: 14px 0;
}

.fiviMultiSeperator::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  max-width: calc(var(--fiviInput-width) * 2 + var(--column-spacer));
  background-color: var(--border-color);
}

/*
    8. fiVISION Controls
*/
/*
    8.1 fiVISION_ErrorSummary
*/
[id$="ErrorSummary1"] {
  display: none;
}

[id$="ErrorSummary1"]:has(li) {
  display: block;
  padding: 0 var(--gap-horizontal);
}

[id$="ErrorSummary1"] li,
.errorSummary {
  font-size: calc(var(--font-size) - 2px);
  font-weight: 500;
  margin-bottom: 0;
}

/*
    8.2 fiVISION_Panel
*/
.fiviPanel {
  display: inline-flex;
  flex-direction: unset;
  flex-wrap: unset;
  width: unset;
  justify-content: unset;
}

.fiviPanel,
.fiviPanel > .fiviPanelContainer {
  display: block;
  max-width: 100%;
}

/*
    8.3 fiVISION_ProductsAndServicesV2
*/
.fiviProdServControl {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--column-width-12);
  width: 100%;
  gap: var(--gap-vertical);
}

.fiviProdServControl .fiviCheckBox > label,
.fiviProdServControl .fiviCheckBox > span > label {
  text-indent: -3px;
}

.fiviProdServControl .DefaultTooltipClass {
  top: 0;
  position: relative;
}

.fiviProdContainer {
  max-width: 100%;
  width: 100%;
  position: relative;
}

.fiviProdContainer:not(:last-child) {
  padding-bottom: var(--gap-vertical);
  border-bottom: 1px solid var(--border-color);
}

.fiviProdServ {
  display: flex;
  flex-direction: row;
  gap: var(--gap-vertical-50) var(--gap-horizontal-50);
  align-items: center;
}

.fiviProdServ > .fiviCheckBox > .DefaultTooltipClass,
.fiviProdServ > .fiviCheckBox > span > .DefaultTooltipClass {
}

.fiviProdServ > .fiviCheckBox > label,
.fiviProdServ > .fiviCheckBox > span > label {
  font-size: var(--font-size-label);
  font-weight: 400;
}

.fiviProdServ .fiviAddAnotherButton {
  display: flex;
  width: fit-content;
  align-self: center;
  justify-content: flex-start;
}

.fiviProdServ .fiviAddAnotherButton > a,
.section-container div > a[id*="btn"] {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}

.Product_MoreInfo {
  width: 100%;
}

.fiviProdPanel {
  max-width: 100%;
  width: 100%;
}

.fiviProdPanel:not(.fiviProdPanel:has(> *)) {
  display: none !important;
}

.fiviProdPanel > .fiviInput {
  max-width: 100%;
  width: var(--fiviInput-width);
}

.fiviProdPanel > .fiviProdInnerPanel:first-of-type {
  margin-top: var(--gap-vertical-50);
}

.fiviProdPanel > .fiviProdInnerPanel:not(:first-of-type) {
  margin-top: var(--gap-vertical);
}

.fiviProdInnerPanel {
  display: flex;
  flex-direction: row;
  gap: var(--gap-vertical-50);
  flex-wrap: wrap;
  width: 100%;
  padding: 0 var(--gap-horizontal);
  position: relative;
}

.Service_MoreInfo {
  width: 100%;
  font-size: 14px;
}

.fiviCDWizardInfo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: var(--column-width-12);
  min-height: fit-content;
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.fiviCDWizardInfo > .fiviCheckBox {
  height: var(--input-height);
  align-self: flex-end;
  width: 100%;
}

.fiviCDWizardInfo > .fiviInput > input {
  color: inherit !important;
}

/*
    8.4 fiVISION_AddressTextBoxV2
*/
.address-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fiviInput-vertical-spacing);
  width: 100%;
  max-width: var(--fiviInput-width);
}

.fiviAddress {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-25);
  width: 100%;
}

.fiviAddress > .fiviMultiInput {
  display: flex;
  flex-direction: column;
  gap: var(--fiviInput-vertical-spacing);
  width: 100%;
}

.fiviAddress > .fiviSameAs {
  max-width: calc(calc(var(--fiviInput-width) / 2) + var(--gap-horizontal-50));
  position: absolute;
  top: calc(
    calc(var(--font-lineheight-h3) + var(--fiviInput-vertical-spacing)) * -1
  );
  right: 0;
}

.fiviAddress > .fiviSameAs label {
  font-size: calc(var(--font-size-label) - 2px);
}

.fiviAddress > .DefaultAddressVerifyingClass {
  font-size: calc(var(--font-size) - 2px);
  line-height: var(--font-lineheight);
  font-weight: 500;
  text-align: center;
  color: var(--font-color-light) !important;
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .address-container {
    /* max-width: 100%; */
  }

  .address-container > h3 {
    max-width: 100%;
  }

  .fiviAddress .fiviInput {
    /* max-width: var(--column-width-4); */
  }

  .fiviAddress > .fiviSameAs {
    max-width: 100%;
    position: relative;
    top: unset;
    right: unset;
  }
}

/*
    8.5 fiVISION_PhoneTextBoxV2
        --fiviLongInput has the phone field, phone type, and preferred
        --fiviTwoInput has the phone field and either phone type or preferred
        --else its just the phone field
*/
.fiviPhoneControl {
  margin: 0;
  max-width: var(--fiviInput-width);
}

.fiviTwoInput.fiviPhoneControl,
.fiviLongInput.fiviPhoneControl {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-vertical) var(--gap-horizontal);
  flex-wrap: wrap;
}

.fiviLongInput.fiviPhoneControl {
  width: 100%;
}

.fiviPhoneControl.fiviTwoInput > .DefaultLabelClass,
.fiviPhoneControl.fiviLongInput > .DefaultLabelClass {
  height: var(--input-height);
  font-size: var(--font-size-label);
  left: var(--gap-horizontal-50);
  font-weight: var(--font-weight-label);
  text-transform: none;
  color: var(--font-color-label);
}

.fiviPhoneControl.fiviTwoInput > .FocusLabelClass,
.fiviPhoneControl.fiviLongInput > .FocusLabelClass {
  height: var(--input-focusLabel-fontSize);
  font-size: var(--input-focusLabel-fontSize);
  left: 0;
  font-weight: 500;
  color: var(--font-color-label-focus);
}

.fiviPhoneControl.fiviTwoInput > .DefaultLabelClass {
  bottom: 0;
}

.fiviPhoneControl.fiviTwoInput > .FocusLabelClass {
  bottom: var(--input-focusLabel-offset);
}

.fiviPhoneControl.fiviLongInput > .DefaultLabelClass {
  top: var(--input-marginTop-forLabelFocusSpace);
}

.fiviPhoneControl.fiviLongInput > .FocusLabelClass {
  top: 0;
}

.fiviLongInput.fiviPhoneControl > input.form-control,
.fiviTwoInput.fiviPhoneControl > input.form-control {
  max-width: var(--fiviInput-width-partial-main) !important;
  width: 100%;
}

.fiviPhoneControl > .fiviCheckBox,
.fiviPhoneControl > select.form-control {
  max-width: var(--fiviInput-width-partial-alt) !important;
  width: 100%;
}

.fiviPhoneControl > .fiviCheckBox {
  background: transparent;
  border: none !important;
  box-shadow: none;
  padding: 0;
}

.fiviSMSOptInOut {
  width: 100%;
}

.fiviSMSOptions {
  width: 100%;
  background: var(--background-color) !important;
  border: solid 1px var(--border-color);
  border-radius: 5px;
  gap: var(--gap-vertical);
  padding: var(--gap-horizontal) !important;
  min-width: unset !important;
}

.fiviSMSOptionsButtonPanel .fiviInput {
  flex: 1 0 0;
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .fiviTwoInput.fiviPhoneControl {
    max-width: var(--column-width-6);
    width: 100%;
  }

  .fiviTwoInput.fiviPhoneControl > input.form-control,
  .fiviTwoInput.fiviPhoneControl > select.form-control {
    max-width: var(--column-width-3);
  }

  .fiviLongInput.fiviPhoneControl > .fiviCheckBox {
    margin-top: 0;
    max-width: 100%;
  }

  .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass {
    bottom: calc(var(--input-height) + var(--gap-horizontal-25));
  }

  .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass {
    bottom: calc(
      var(--input-focusLabel-offset) +
        calc(var(--input-height) + var(--gap-horizontal-25))
    );
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fiviTwoInput.fiviPhoneControl > input.form-control,
  .fiviTwoInput.fiviPhoneControl > select.form-control {
    max-width: var(--column-width-2);
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .fiviTwoInput.fiviPhoneControl {
    gap: var(--gap-horizontal-25) var(--gap-vertical);
  }

  .fiviTwoInput.fiviPhoneControl > input.form-control,
  .fiviLongInput.fiviPhoneControl > input.form-control,
  .fiviTwoInput.fiviPhoneControl > select.form-control,
  .fiviLongInput.fiviPhoneControl > select.form-control {
    max-width: 100% !important;
  }

  .fiviTwoInput.fiviPhoneControl > select.form-control,
  .fiviLongInput.fiviPhoneControl > select.form-control {
    /*         margin-top: 0px; */
  }

  .fiviPhoneControl > .fiviCheckBox {
    margin-top: 0;
    max-width: 100%;
  }

  .fiviTwoInput.fiviPhoneControl > label.DefaultLabelClass {
    /*! bottom: calc(var(--input-height) + var(--gap-horizontal-25)); */
  }

  .fiviTwoInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass {
    /*         bottom: calc(var(--input-focusLabel-offset) + calc(var(--input-height) + var(--gap-horizontal-25))); */
  }

  .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass {
    bottom: calc(calc(var(--input-height) + var(--gap-horizontal-25)) * 2);
  }

  .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass {
    bottom: calc(
      var(--input-focusLabel-offset) +
        calc(calc(var(--input-height) + var(--gap-horizontal-25)) * 2)
    );
  }
}

/*
    8.6 fiVISION_IDTypeV2
*/
.fiviIDType {
  max-width: calc(calc(var(--fiviInput-width) * 2) + var(--column-spacer));
}

#statesDiv:has(+ #countriesDiv[style="display: none"]) {
  display: block !important;
}

.fiviIDType > div[id*="issueDateDiv"],
.fiviIDType > div[id*="expirationDateDiv"] {
  max-width: var(--fiviInput-width-half);
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .fiviIDType > div[id*="issueDateDiv"],
  .fiviIDType > div[id*="expirationDateDiv"] {
    max-width: var(--fiviInput-width);
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fiviIDType {
    max-width: var(--fiviInput-width);
  }

  .fiviIDType > div[id*="issueDateDiv"],
  .fiviIDType > div[id*="expirationDateDiv"] {
    max-width: var(--fiviInput-width-half);
  }
}

/*
    8.7 fiVISION_HousingDurationHistory
*/
.fiviHousingDurationHistory {
  max-width: var(--column-width-full);
}

.fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"],
.fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] {
  max-width: var(--fiviInput-width-half);
}

.fiviHousingDurationHistory center {
  width: var(--fiviInput-width);
}

.fiviHousingDurationHistory .DefaultAddressVerifyingClass {
  width: var(--fiviInput-width);
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  .fiviHousingDurationHistory center {
    width: var(--fiviInput-width-double);
  }
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"],
  .fiviHousingDurationHistory
    .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] {
    max-width: var(--fiviInput-width);
  }

  .fiviHousingDurationHistory .DefaultAddressVerifyingClass {
    width: var(--column-width-4);
  }

  .fiviHousingDurationHistory center {
    width: var(--fiviInput-width);
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"],
  .fiviHousingDurationHistory
    .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] {
    max-width: var(--fiviInput-width-half);
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"],
  .fiviHousingDurationHistory
    .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] {
    max-width: var(--fiviInput-width-half);
  }
}

/*
    8.8 fiVISION_EmploymentHistory
*/
.fiviEmpHistoryControl {
  max-width: var(--column-width-full);
  width: 100%;
}

.fiviEmpHistoryControl center {
  width: var(--fiviInput-width);
}

.fiviEmpHistoryControl .fiviInput > input {
  color: inherit !important;
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  .fiviEmpHistoryControl center {
    width: var(--fiviInput-width-double);
  }
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .fiviEmpHistoryControl center {
    width: var(--fiviInput-width);
  }
}

/*
    8.9 fiVISION_IndividualIncome
*/
.fiviIncomeControl {
  max-width: var(--column-width-full);
}

.fiviIncomeControl .fiviMultiSeperator {
  display: none;
}

.fiviIncomeControl .fiviMultiInput > .fiviInput {
  max-width: var(--fiviInput-width-half);
}

.fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) {
  width: var(--fiviInput-width);
}

.fiviIncomeControl .fiviRemoveBtn {
  position: relative;
  left: unset;
  align-self: center;
  order: 2;
  margin-top: var(--input-marginTop-forLabelFocusSpace);
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  .fiviIncomeControl .fiviMultiInput > .fiviInput {
    max-width: var(--fiviInput-width);
  }

  .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) {
    width: var(--fiviInput-width-double);
  }
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) {
    width: var(--fiviInput-width);
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fiviIncomeControl .fiviMultiSeperator {
    display: block;
  }

  .fiviIncomeControl .fiviRemoveBtn {
    position: absolute;
    left: var(--fiviInput-width-half);
    align-self: unset;
    order: 0;
    height: unset;
  }
}

/*
    8.10 fiVISION_IndividualDetails
*/
.fiviIndDetails {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
}

.fiviIndDetails > div {
  display: flex;
  gap: var(--gap-horizontal-50);
  padding-left: var(--gap-horizontal-200);
}

.fiviIndDetails
  > div:not(.fiviIndDetailsSection):not(.fiviIndDetailsName):before {
  content: "\f111";
  font-family: "Font Awesome 5 Free";
  font-size: 6px;
}

.fiviIndDetails > .fiviIndDetailsSection {
  padding-left: var(--gap-horizontal);
  font-style: italic;
}

.fiviIndDetailsSection > b {
  font-weight: 500;
}

.fiviIndDetails > .fiviIndDetailsName {
  font-size: var(--font-size);
  font-weight: 500;
  padding-left: var(--gap-horizontal-50);
  border-left: 2px solid var(--color-primary-normal);
}

.fiviIndDetails > .fiviIndDetailsName:not(:first-of-type) {
  margin-top: var(--gap-vertical-75);
}

/*
    8.11 fiVISION_ProductsAndServicesSelected
*/
.fiviProdServiceSelected > div {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-75);
  font-size: calc(var(--font-size) + 2px);
  font-weight: 600;
}

.fiviProdServiceSelected > div > ul {
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--gap-vertical-25) 1px;
  flex-wrap: wrap;
  font-weight: 400;
  font-size: var(--font-size);
  flex-direction: row;
}

.fiviProdServiceSelected > div > ul > i {
  margin-left: var(--gap-horizontal);
}

.fiviProdServiceSelected > div > ul > li {
  margin: var(--gap-vertical-25) 0 0 0;
  font-size: var(--font-size);
  width: 100%;
  border-left: 2px solid var(--color-primary-normal);
  padding-left: var(--gap-horizontal-50);
}

.fiviProdServiceSelected > div > ul > li > b {
  font-weight: 500;
}

.fiviProdServiceSelected > div > ul > li:first-of-type {
  margin-top: 0;
}

.fiviProdServiceSelected > div > ul > ul {
  margin: 0;
  width: 100%;
  margin-left: var(--gap-horizontal);
}

.fiviProdServiceSelected > div > br + ul > li {
  margin-left: var(--gap-horizontal-25);
  font-size: var(--font-size);
  margin-top: 0;
}

.fiviProdServiceSelected > div > br + ul > li > b {
  font-weight: 500;
}

/*
    8.12 fiVISION_ProductRelationships
*/
.fiviProductRelationship {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  border: 1px solid var(--color-secondary-dark);
  border-radius: 5px;
  max-width: 100%;
  width: fit-content;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.fiviProductRelationship table {
  overflow-x: auto;
  white-space: nowrap;
  border: none;
  margin: 0;
}

.fiviProductRelationship tr {
  display: flex;
  flex-wrap: nowrap;
  padding: 0 var(--column-spacer);
  border-bottom: 1px solid var(--color-white-dark);
}

.fiviProductRelationship tr:nth-of-type(odd) {
  background-color: white !important;
}

.fiviProductRelationship tr:nth-of-type(even) {
  background-color: transparent !important;
}

.fiviProductRelationship tr:last-of-type {
  border: none;
}

.fiviProductRelationship td {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--column-width-2);
  height: calc(var(--font-size) * 3);
  text-wrap: wrap;
  padding: 0 !important;
  line-height: var(--font-lineheight);
  background-color: transparent !important;
  border: none !important;
  font-size: var(--font-size);
}

.fiviProductRelationship tr > td:first-of-type {
  justify-content: flex-start;
  font-weight: 600;
  width: var(--column-width-3);
}

.fiviProductRelationship tr[id*="_ServiceRow"] > td:first-of-type {
  padding-left: var(--column-spacer) !important;
  font-weight: 400;
}

.fiviProductRelationship tr:first-of-type > td {
  font-weight: bold;
  text-align: left !important;
  border: none;
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .fiviProductRelationship tr {
    gap: 0 var(--column-spacer);
  }

  .fiviProductRelationship td {
    width: var(--column-width);
  }

  .fiviProductRelationship tr > td:first-of-type {
    width: var(--column-width-2);
  }

  .fiviProductRelationship tr:first-of-type > td {
    text-align: center !important;
  }
}

/*
    8.13 fiVISION_DocumentListV2
*/
.fiviDocumentList {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--gap-vertical-75);
  align-items: center;
}

.fividocumentlist > span {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical);
}

.fiviDocumentList > input:first-of-type {
  align-self: center;
}

.fiviDocumentList > span:has(> table),
.fiviDocumentList > div:has(> table) {
  width: 100%;
}

.fiviDocumentList table {
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  /* box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; */
}

.fiviDocumentList table > thead,
.fiviDocumentList table > tbody {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.fividocumentlist table > thead > tr,
.fiviDocumentList table > tbody > tr {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  padding: 0 var(--column-spacer);
  border: none;
  border-radius: 5px;
  border-bottom: 1px solid var(--color-white-dark);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.fividocumentlist table > thead > tr {
  justify-content: stretch;
  width: 100%;
}

.fiviDocumentList table > thead > tr:nth-of-type(odd),
.fiviDocumentList table > .DocUploadGridClass > tr:nth-of-type(odd) {
  background-color: var(--background-color-alt);
}

.fiviDocumentList table > thead > tr:nth-of-type(even),
.fiviDocumentList table > .DocUploadGridClass > tr:nth-of-type(even) {
  background-color: transparent !important;
}

.fiviDocumentList table > tbody > tr:last-of-type {
  border: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.fiviDocumentList table > thead > tr > th,
.fiviDocumentList table > thead > tr > td,
.fiviDocumentList table > tbody > tr > th,
.fiviDocumentList table > tbody > tr > td {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: var(--column-width-3);
  width: 100% !important;
  padding: calc(var(--gap-horizontal) / 2) 0 !important;
  background-color: transparent !important;
  border-top: none;
  border-bottom: none;
  flex: 1 1 0;
}

.fiviDocumentList table td {
  border: none !important;
}

.fiviDocumentList table th:first-of-type,
.fiviDocumentList table.V3StatusCenterTableClass tr > th:nth-child(2),
.fiviDocumentList table td:first-of-type,
.fiviDocumentList table.V3StatusCenterTableClass tr > td:nth-child(2) {
  justify-content: flex-start;
}

.fiviDocumentList table th:last-of-type,
.fiviDocumentList table td:last-of-type {
  display: flex;
  flex-direction: row;
  max-width: var(--column-width-4);
  width: 100%;
  background-color: transparent !important;
}

.fiviDocumentList table td:last-of-type > br {
  display: none;
}

.fiviDocumentList .button-link,
.fiviDocumentList .button-upload {
  text-align: center;
  min-width: inherit;
}

.fiviDocumentList .DefaultTooltipClass {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--column-spacer);
  /* height: var(--input-height); */
  margin: var(--gap-vertical-50) var(--gap-horizontal-50) !important;
  /* position: absolute; */
  right: 0;
}

#UploadCompleted {
  line-height: 1.5em;
  padding: 1em 0;
  font-size: 18px;
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .fiviDocumentList .DocUploadHeadClass {
    display: none;
  }

  .fiviDocumentList table > thead > tr,
  .fiviDocumentList table > tbody > tr {
    flex-direction: row;
    padding: 0;
    gap: var(--gap-vertical-50);
    flex-wrap: wrap;
  }

  .fiviDocumentList table td:first-of-type {
    justify-content: center;
  }

  .fiviDocumentList table > thead > tr > th,
  .fiviDocumentList table > tbody > tr > td {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: var(--gap-vertical-25) var(--gap-horizontal-50) !important;
    flex: 1 1 0;
  }

  .fiviDocumentList table > tbody > tr > td > label.button-link {
    min-width: 0;
    width: 100% !important;
  }

  .fiviDocumentList table > tbody > tr > td:nth-of-type(4) {
    flex-direction: row;
    justify-content: center;
    padding: var(--gap-vertical-50) 0 !important;
  }

  .fiviDocumentList .DefaultTooltipClass {
    position: relative;
    height: fit-content;
    margin: var(--gap-vertical-25) 0 !important;
  }
}

/*
    8.14 fiVISION_DisclosuresList
*/
.fiviDisclosureList {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: var(--gap-horizontal-50);
  margin-top: calc(var(--input-height) + var(--gap-vertical-50));
  width: 100%;
}

.fivi-disclosure-modal .modal-header {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.fivi-disclosure-modal .modal-content {
  background-color: var(--background-color-alt);
  border-radius: 5px;
}

.fiviDisclosure-modal-button {
  position: absolute;
  top: calc(calc(var(--input-height) + var(--gap-vertical-50)) * -1);
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

.fiviDisclosure-checkbox-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap-horizontal-50);
}

#DisclosuresList01_DisclosureModal .back-button,
#DisclosuresList01_DisclosureModal .button-primary {
  margin: 0 1rem;
}

.fiviDisclosure-checkbox-container .fa-square {
  display: none !important;
}

.fiviDisclosure-checkbox-container > label {
  width: unset;
}

.fiviDisclosure-checkbox-container > i {
  padding-right: unset !important;
}

.fiviDisclosure-checkbox-container .button-link {
  text-align: center;
  min-width: fit-content;
}

.fivi-disclosure-modal .modal-body > div {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

.fivi-disclosure-modal .modal-body .button-link {
  text-align: center;
}

/*
    8.15 fiVISION_ProductFundingV2
*/
.fiviProductFunding {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: var(--gap-vertical);
}

.fiviProductFundingItem,
.fiviFundingAmount {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  position: relative;
  padding: var(--gap-vertical-50);
  margin: 0;
}

.fiviFundingAmount {
  padding: var(--gap-vertical) var(--gap-horizontal-50);
}

.fiviFundingAmount > b > div {
  padding-right: var(--gap-horizontal-50);
  width: var(--column-width-2);
  text-align: end;
}

.fiviFundingAmount {
  display: flex;
  justify-content: space-between;
  width: 100% !important;
}

.fiviProductFundingItem > .fiviInput {
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  gap: var(--gap-horizontal);
}

.fiviProductFundingItem > .fiviInput > label {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  border-right: 1px solid var(--border-color);
  font-weight: normal;
  flex: 1;
  gap: var(--gap-vertical-25);
}

.fiviProductFundingItem > .fiviInput > .form-control {
  width: var(--column-width-2) !important;
  margin-top: 0;
  color: var(--font-color-input) !important;
}

.fiviProductFundingItem > .fiviInput > .form-control:focus {
  color: var(--font-color-label-focus) !important;
}

.fiviProductFundingItem > .fiviInput > label:before {
  content: "* funding required";
  color: var(--color-primary-dark);
  font-size: 10px;
  padding: 0 4px;
  font-weight: bold;
  border-radius: var(--border-radius);
  position: relative;
  bottom: calc(var(--gap-vertical) * 0);
  font-style: italic;
}

.fiviProductFundingItem > .fiviInput:has(> input[min="0"]) > label:before {
  content: "funding optional";
  color: var(--font-color-h3);
  font-style: italic;
}

.ProductTypes_Funding {
  display: none;
}

@media all and (max-device-width: 450px), all and (max-width: 450px) {
  .fiviProductFundingItem > .fiviInput {
    flex-direction: column;
    text-align: center;
    height: calc(var(--input-height) * 2);
  }

  .fiviProductFundingItem > .fiviInput > label {
    border-right: none;
  }

  .fiviProductFunding {
    align-items: flex-end;
  }

  .fiviFundingAmount {
    flex-direction: column;
    text-align: center;
  }

  .fiviFundingAmount > b > div {
    text-align: center;
    padding: 0;
    width: 100%;
  }
}

/*
    8.16 fiVISION_ProveIndividualLookup
*/
.prove-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap-vertical);
  width: 100%;
}

.prove-container > div {
  width: 100%;
}

.fiviProveIndividualLookup {
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
  align-items: stretch;
}

.prove-direction-buttons {
  gap: var(--gap-horizontal);
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  width: 100%;
  margin-top: var(--gap-vertical);
  align-items: center;
}

/*
    8.17 fiVISION_ACH
*/
.fiviACHControl {
  justify-content: center;
}

.fiviACHStatus {
  max-width: var(--fiviInput-width);
  display: block;
}

.fiviACHStatus > span {
  font-weight: normal !important;
  color: var(--font-color) !important;
}

.fiviACHcbCont {
  max-width: var(--fiviInput-width);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.fiviACHControl > .fiviCheckBox {
  width: 100%;
}

/*
    8.18 fiVISION_CreditCardV2
*/
.fiviCreditCardControl {
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer);
  align-items: center;
}

.fiviCreditCardControl,
.fiviCCIndInfo,
.fiviCCIndNameInfo,
.fiviCCIndAddy,
.fiviCCCardInfo {
  justify-content: center;
}

.fiviCCIndAddy {
  flex-direction: row;
}

.fiviCCCardInfo {
  position: relative;
}

.fiviCCCardInfo > .DefaultAddressVerifyingClass {
  position: absolute;
  text-align: right;
  width: calc(50% - var(--fiviInput-horizontal-spacing));
  font-size: var(--input-focusLabel-fontSize);
  height: var(--input-focusLabel-fontSize);
  left: 0;
}

.fiviCCCardInfo .fiviTwoInput {
  gap: 0;
}

.fiviCCCardInfo .TwoControls {
  width: 33% !important;
  padding: 0 0 0 0;
}

.fiviCCCardInfo .form-control.TwoControls {
  padding: 0 10px 0 10px;
}

.fiviCCCardInfo .TwoControls .form-control {
  width: 100% !important;
}

.fiviCCCardInfo .TwoControls .DefaultTooltipClass {
  right: 8px;
  color: var(--font-color-input);
}

#CreditCard_Month {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#CreditCard_Year {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

#CreditCard_CVV {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.fiviCreditCardControl .loading {
  position: absolute;
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .fiviCCCardInfo > .DefaultAddressVerifyingClass {
    right: 0;
    width: 100%;
  }
}

/*
    8.19 fiVISION_FinicityFundingAccountVerification
*/
.fiviFinicity {
  justify-content: center;
}

#RealTimeInput > div {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0 !important;
  width: 100% !important;
}

.fivi-verifyNow-contents {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical);
}

.fivi-verifyNow-btn-contanier {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-vertical);
  text-align: center;
}

/*
    8.19 fiVISION_ApplicantWithdraw
*/
.fiviApplicantWithdraw {
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-75);
  position: relative;
}

.fiviApplicantWithdraw > .CtlValidator {
  top: -3px;
  bottom: unset;
  left: -8px;
}

/*
    8.20 fiVISION_ProgressBar
*/
.progress-container {
  display: flex;
  align-self: stretch;
  width: 100%;
}

.progress-container > span {
  display: flex;
  width: 100%;
  background-color: var(--color-secondary-normal);
  min-width: var(--column-width-3);
}

.progress-container-header > span {
  display: flex;
  width: 100%;
  background-color: var(--background-color-page);
}

.progress-container-header > span:last-child {
  border-bottom: 1px solid var(--border-color);
}

.progress-container-main > span {
  display: flex;
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.journey-bar-icons {
  display: none;
}

.journey-bar {
  margin-bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  padding: var(--gap-horizontal-150);
  background-color: var(--background-color);
  align-self: stretch;
}

.journey-bar > tbody > tr {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-200);
}

.journey-bar > tbody > tr > td {
  border-top: none;
  padding: 0;
}

.journey-bar .journey-bar-group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--gap-vertical-25);
  min-width: var(--column-width);
}

.journey-bar .journey-bar-group > span {
  font-size: calc(var(--font-size) - 2px);
  color: var(--color-gray-light);
}

.journey-bar .journey-bar-group:before {
  content: "";
  font-size: calc(var(--font-size) - 2px);
  font-family: var(--font-family-alt);
}

.journey-bar .current-group:before {
  color: var(--color-primary-normal);
  font-weight: bold;
}

.journey-bar .journey-bar-group:has(img[alt="Start"]):before,
.journey-bar .journey-bar-group:has(img[alt="TrustStart"]):before,
.journey-bar .journey-bar-group:has(img[alt="BusinessStart"]):before {
  content: "1.";
}

.journey-bar .journey-bar-group:has(img[alt="Products"]):before,
.journey-bar .journey-bar-group:has(img[alt="TrustInformation"]):before,
.journey-bar .journey-bar-group:has(img[alt="BusinessInformation"]):before {
  content: "2.";
}

.journey-bar .journey-bar-group:has(img[alt="Details"]):before,
.journey-bar .journey-bar-group:has(img[alt="AdditionalPeople"]):before,
.journey-bar .journey-bar-group:has(img[alt="BusinessIndividuals"]):before {
  content: "3.";
}

.journey-bar .journey-bar-group:has(img[alt="Verification"]):before,
.journey-bar .journey-bar-group:has(img[alt="TrustReview"]):before,
.journey-bar .journey-bar-group:has(img[alt="BusinessReview"]):before {
  content: "4.";
}

.journey-bar .journey-bar-group:has(img[alt="Funding"]):before,
.journey-bar .journey-bar-group:has(img[alt="TrustFunding"]):before,
.journey-bar .journey-bar-group:has(img[alt="BusinessFunding"]):before {
  content: "5.";
}

.journey-bar .journey-bar-group:after {
  display: block;
  content: "";
  width: 100%;
  font-size: calc(var(--font-size) - 2px);
  color: var(--color-gray-light);
}

.journey-bar .journey-bar-group:has(img[alt="Start"]):after {
  content: "Help us try to find your information for the fastest, smoothest experience possible!";
}

.journey-bar .journey-bar-group:has(img[alt="Products"]):after {
  content: "Select or review your choices";
}

.journey-bar .journey-bar-group:has(img[alt="Details"]):after {
  content: "Provide a little more information based on the accounts and services you selected";
}

.journey-bar .journey-bar-group:has(img[alt="Verification"]):after {
  content: "Let's make sure we've dotted our i's and crossed our t's";
}

.journey-bar .journey-bar-group:has(img[alt="Funding"]):after {
  content: "You have many options for your first deposit. Select the one that works for you!";
}

.journey-bar .journey-bar-group:has(img[alt="TrustStart"]):after {
  content: "Help us try to find your information for the fastest, smoothest experience possible!";
}

.journey-bar .journey-bar-group:has(img[alt="TrustInformation"]):after {
  content: "Let's gather Trust information for the accounts and services you selected.";
}

.journey-bar .journey-bar-group:has(img[alt="AdditionalPeople"]):after {
  content: "Let's gather the other individuals; your Trustees and Beneficiaries.";
}

.journey-bar .journey-bar-group:has(img[alt="TrustReview"]):after {
  content: "Let's make sure we've dotted our i's and crossed our t's.";
}

.journey-bar .journey-bar-group:has(img[alt="TrustFunding"]):after {
  content: "You have many options for your first deposit. Select the one that works for you!";
}

.journey-bar .journey-bar-group:has(img[alt="BusinessStart"]):after {
  content: "Help us try to find your information for the fastest, smoothest experience possible!";
}

.journey-bar .journey-bar-group:has(img[alt="BusinessInformation"]):after {
  content: "Let's gather Business information for the accounts and services you selected.";
}

.journey-bar .journey-bar-group:has(img[alt="BusinessIndividuals"]):after {
  content: "Let's gather the other individuals; your Authorized Signers and Beneficial Owners.";
}

.journey-bar .journey-bar-group:has(img[alt="BusinessReview"]):after {
  content: "Let's make sure we've dotted our i's and crossed our t's.";
}

.journey-bar .journey-bar-group:has(img[alt="BusinessFunding"]):after {
  content: "You have many options for your first deposit. Select the one that works for you!";
}

.journey-bar .current-group:after {
  color: var(--font-color);
}

.journey-bar .current-group > span {
  font-weight: bold;
  color: var(--color-primary-normal);
}

.journey-bar .journey-bar-group.previous-group:before,
.journey-bar .journey-bar-group.previous-group span {
  color: var(--color-primary-normal);
  font-weight: 600;
}

.journey-bar .journey-bar-group.previous-group span:hover {
  color: var(--color-primary-secondary);
  font-weight: 600;
  text-decoration: underline;
}

.journey-bar .journey-bar-group.future-group:before {
  color: var(--color-gray-light);
}

.progress-container-header .journey-bar-current,
.progress-bar-outer,
.progress-bar-text {
  display: none;
}

.progress-container-header {
  display: block;
  width: 100%;
  position: relative;
  width: 100%;
}

.progress-container-main {
  width: 100%;
}

#progbar {
  width: 100%;
  display: flex;
}

.progress-bar-outer {
  width: 100%;
  position: absolute;
}

.progress-bar-inner {
  background-color: var(--color-primary-normal);
  font-size: 0;
  height: 3px;
}

.journey-bar-current {
  display: flex;
  justify-content: stretch;
  align-items: flex-start;
  width: 100%;
  padding: var(--gap-vertical) var(--gap-horizontal);
  margin-bottom: 0;
  border-bottom: 1px solid var(--border-color);
}

.journey-bar-current > tbody,
.progress-bar-outer > tbody {
  width: 100%;
  display: flex;
}

.journey-bar-current > tbody > tr,
.progress-bar-outer > tbody > tr {
  display: flex;
  width: 100%;
}

.progress-bar-outer > tbody > tr > td {
  font-size: 0;
}

.journey-bar-current .journey-bar-group:not(.current-group) {
  display: none;
}

.journey-bar-current .current-group {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0;
  border-top: none;
}

.journey-bar-current .current-group > span {
  font-size: calc(var(--font-size-h1) + 2px);
  font-weight: var(--font-weight-h1);
  color: var(--color-primary-normal);
  order: -1;
  width: 100%;
  display: flex !important;
  align-items: center;
}

.journey-bar-current .journey-bar-group.current-group > span:before {
  content: "";
  display: block;
  border: 3px solid var(--color-black-light);
  border-radius: 50%;
  position: absolute;
  /* Size of 3 letters divided by the ratio of circle width to letter width divided by offset ratio from right edge */
  right: calc(var(--gap-horizontal) - calc(var(--font-size-h1) * 3 / 2.25 / 4));
  width: calc(var(--font-size-h1) * 2.25);
  height: calc(var(--font-size-h1) * 2.25);
}

.journey-bar-current .journey-bar-group.current-group:before {
  content: "1";
  font-size: var(--font-size-h1);
  font-weight: 800;
  font-family: var(--font-family-alt);
  color: var(--color-primary-normal);
}

.journey-bar-current .journey-bar-group.current-group:after {
  content: "/5";
  font-size: var(--font-size-h1);
  font-family: var(--font-family-alt);
  color: var(--color-gray-light);
  width: 21px;
  /* Required for Firefox */
}

.journey-bar-current
  .journey-bar-group.current-group:has(> img[alt="Start"]):before,
.journey-bar-group.current-group:has(> img[alt="TrustStart"]):before,
.journey-bar-group.current-group:has(> img[alt="BusinessStart"]):before {
  content: "1";
}

.journey-bar-current
  .journey-bar-group.current-group:has(> img[alt="Products"]):before,
.journey-bar-group.current-group:has(> img[alt="TrustInformation"]):before,
.journey-bar-group.current-group:has(> img[alt="BusinessInformation"]):before {
  content: "2";
}

.journey-bar-current
  .journey-bar-group.current-group:has(> img[alt="Details"]):before,
.journey-bar-group.current-group:has(> img[alt="AdditionalPeople"]):before,
.journey-bar-group.current-group:has(> img[alt="BusinessIndividuals"]):before {
  content: "3";
}

.journey-bar-current
  .journey-bar-group.current-group:has(> img[alt="Verification"]):before,
.journey-bar-group.current-group:has(> img[alt="TrustReview"]):before,
.journey-bar-group.current-group:has(> img[alt="BusinessReview"]):before {
  content: "4";
}

.journey-bar-current
  .journey-bar-group.current-group:has(> img[alt="Funding"]):before,
.journey-bar-group.current-group:has(> img[alt="TrustFunding"]):before,
.journey-bar-group.current-group:has(> img[alt="BusinessFunding"]):before {
  content: "5";
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  .progress-container {
    display: none;
  }

  .progress-container-header .journey-bar-current,
  .progress-bar-outer {
    display: flex;
  }

  .progress-container-main .journey-bar-current {
    display: none;
  }
}

/*
    8.21 fiVISON_IndividualHandler
*/
#IndividualHandler01 {
  width: 100%;
}

#IndividualHandler02 {
  width: 100%;
}

/*
    8.22 fiVISION_EmailTextBoxV2
*/
.email-container {
  /* position: relative; */
  /* display: flex; */
  /* flex-direction: row; */
  /* gap: var(--fiviInput-vertical-spacing); */
  /* width: 100%; */
}

/*
    8.23 fiVISION_CollateralHandler
*/
#CollateralHandler01 {
  flex-grow: 1;
  flex-basis: 0;
  display: flex;
  flex-direction: column;
}

#CollateralHandler01 > .fivipanelcontainer {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

#CollateralHandler01 > .fivipanelcontainer > .flex-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/*
    8.24 fiVISION_IDAuthentication
*/
.fiviIDAuth tbody {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-25);
}

.fiviIDAuth .iradio_square-blue + label {
  display: flex;
  gap: var(--gap-horizontal-25);
  font-weight: 300;
}

/*
    8.25 fiVISION_PlaidFundingAccountVerification
*/
.fiviPlaid br {
  display: none;
}

.fiviPlaid #ACHFundingAccountVerification_results {
  display: flex;
}

.fiviPlaid #RealTimeInput > div > div > div > div:last-of-type {
  display: flex;
  justify-content: center;
}

/*
    8.26 fiVISION_WorkflowSurvey
*/
.fiviWorkflowSurvey {
  width: 100%;
}

.fivi-workflow-survey-item {
  margin-top: var(--gap-horizontal-150);
}

.fivi-workflow-survey-answers {
  display: flex;
  justify-content: space-around;
  margin: 10px;
  padding: 10px;
}

.fivi-workflow-survey-answers {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.fivi-workflow-survey-answers .icheckbox_square-blue + label:before,
.fivi-workflow-survey-answers .iradio_square-blue + label:before,
.fivi-workflow-survey-answers .iradio_square-blue + span + label:before {
  content: "";
  margin: 0;
  width: 20px;
  height: 26px;
  border-radius: 40px;
  position: relative;
  cursor: pointer;
  background-color: var(--color-gray-light);
  transition-duration: 500ms;
  min-width: auto !important;
}

.fivi-workflow-survey-answers input[type="radio"] {
  appearance: auto;
  position: relative !important;
  width: auto !important;
  height: auto !important;
}

.fivi-workflow-survey-answers .iradio_square-blue + label:after {
  content: "";
  position: relative !important;
  background-color: white;
  cursor: pointer;
  left: 0;
  width: var(--column-spacer);
  height: var(--column-spacer);
  border-radius: 50%;
  border: 0.5px solid var(--border-color);
  transition-duration: 500ms;
}

.fivi-workflow-survey-answers .iradio_square-blue.checked + label:after {
  background-color: var(--color-primary-normal);
  left: 0 !important;
}

.fivi-workflow-survey-answers .iradio_square-blue + label:before {
  visibility: hidden;
}

.fivi-workflow-survey-question,
.fiviWorkflowSurvey input {
  text-align: center;
  display: table;
  margin: 0 auto;
}

@media (max-width: 700px) {
  .fivi-workflow-survey-answers {
    flex-direction: column;
  }
}

/*
    8.27 fiVISION_MoneyTextBoxV2
*/
.fiviInput > input[id$="_MoneyTextBox"] {
  color: inherit !important;
}

/*
    9. Page Specific
*/
/*
    9.1 Default Page
*/
.default-thumbnail-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical);
  width: 100%;
}

.page-Default-Content.page-container {
  margin-top: var(--gap-vertical);
  gap: var(--gap-vertical-200);
}

.page-Default-Content .header-container {
  gap: var(--gap-vertical);
}

.page-Default-Content .thumbnail {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  gap: var(--gap-vertical);
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  box-shadow: none;
  position: relative;
  background-color: var(--color-white-light);
  color: var(--color-primary-normal);
}

.page-Default-Content .thumbnail:hover,
.page-Default-Content .thumbnail:active,
.page-Default-Content .thumbnail:focus {
  background-color: var(--color-white-dark);
  cursor: pointer;
}

.page-Default-Content .thumbnail .button-link {
  font-weight: 500;
  height: 100%;
  width: 100% !important;
  padding: var(--gap-vertical) calc(var(--gap-horizontal) * 2.5);
  margin: 0;
  text-decoration: none;
  color: inherit;
  white-space: normal;
}

.page-Default-Content .thumbnail > span {
  width: 100%;
}

.thumbnail-img {
  position: absolute;
  pointer-events: none;
  left: var(--gap-horizontal-50);
  padding: 5px;
  border-radius: 5px;
}

.thumbnail-img svg {
  stroke: var(--color-primary-normal);
}

.thumbnail .fas {
  position: absolute;
  pointer-events: none;
  right: var(--gap-horizontal-50);
  color: var(--color-tertiary-normal);
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  .lets-get-started-container {
    max-width: var(--column-width-5);
  }

  .what-you-need {
    font-size: calc(var(--font-size) - 2px);
  }
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .default-thumbnail-container {
    max-width: 100%;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .page-Default-Content .thumbnail {
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .page-Default-Content .thumbnail {
    max-width: var(--column-width-4);
  }

  .lets-get-started-container {
    align-items: center;
  }

  .lets-get-started-container > #IndividualHandler01 {
    align-items: center;
  }

  .lets-get-started-container > .h2 {
    text-align: center;
    justify-content: center;
  }

  .lets-get-started-container > h2 {
    flex-direction: column;
    gap: var(--gap-vertical-25);
  }
}

/*
    9.2 Applicant Prove/Initial
*/
.prove-start-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical);
  flex-grow: 1;
  flex-basis: 0;
  padding-bottom: calc(var(--gap-vertical) * 3.5);
}

.page-ApplicantNewInitial {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical);
}

.prove-start-container .fiviMultiInput {
  position: unset;
}

.prove-or-existing,
.initial-or-existing {
  padding: 0 var(--gap-horizontal);
  align-items: stretch;
  justify-content: space-between;
  min-width: 0;
  flex-grow: 1;
  flex-basis: 0;
  align-self: stretch;
}

.prove-new,
.initial-new {
  flex-grow: 3;
  flex-basis: 0;
  min-width: 0;
  justify-content: center;
  align-self: stretch;
  gap: var(--gap-vertical-150);
}

.prove-new .fa-user-circle {
  font-size: 60px;
  color: var(--color-primary-normal);
}

.prove-new .fa-user-lock {
  font-size: 60px;
  color: var(--color-primary-normal);
}

.prove-new .fiviInput,
.initial-new .fiviInput {
  max-width: 100%;
  width: 100%;
}

.prove-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  gap: var(--gap-vertical-25);
  align-self: stretch;
}

.prove-existing,
.initial-existing {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gap-horizontal);
  flex-basis: 0;
  flex-grow: 2;
}

.prove-existing > span,
.initial-existing > span {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.prove-disclosure {
}

.prove-direction-buttons {
  border-top: 0.5px solid var(--border-color);
  padding: var(--gap-vertical) var(--gap-horizontal);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  max-width: 100%;
}

#proveWorking,
.loading {
  display: block;
  background-color: transparent;
  width: fit-content;
}

#proveWorking .loader,
.loading .loader {
  position: relative;
  top: 0;
  left: 0;
  border-top-color: var(--color-primary-normal);
  margin: var(--gap-vertical-50) var(--gap-horizontal-50);
}

.prove-check-phone-image-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#proveIndividualErrorMessage {
  color: red;
}

.prove-or-existing.prove-suppress-existing {
  justify-content: center;
  & .prove-divider,
  & .prove-existing {
    display: none;
  }

  & .prove-new {
    max-width: var(--column-width-6);
  }
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .prove-start-container .fiviInput,
  .prove-start-container .button-other {
    max-width: 100%;
  }

  .prove-or-existing,
  .initial-or-existing {
    padding: 0;
    flex-direction: column;
    gap: var(--gap-vertical);
    flex-wrap: nowrap;
  }

  .prove-divider {
    justify-content: center;
    flex-direction: row;
    text-align: center;
    gap: var(--gap-horizontal);
    padding: 0 var(--gap-horizontal);
  }

  .prove-divider .page-text {
    width: fit-content;
  }

  .prove-new,
  .prove-divider,
  .prove-existing,
  .prove-disclosure,
  .initial-new,
  .initial-existing {
    width: 100%;
  }

  .prove-disclosure {
    margin: 0;
  }

  .vertical-divider {
    height: 1px;
    width: 100%;
    border-top: 0.5px solid var(--border-color);
  }

  .initial-new .fiviTwoInput.fiviPhoneControl {
    max-width: 100%;
    & > input,
    & > select {
      max-width: calc(50% - calc(var(--column-spacer) / 2)) !important;
    }
  }

  .prove-or-existing.prove-suppress-existing {
    align-items: center;
    flex-direction: row;
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .prove-direction-buttons {
    /* flex-direction: column; */
  }

  .prove-existing {
    margin-bottom: 5rem;
  }
}

@media all and (max-device-width: 520px), all and (max-width: 520px) {
  .prove-direction-buttons {
    flex-direction: column;
  }

  .prove-start-container {
    padding-bottom: calc(var(--gap-vertical) * 5);
  }
}

.page-ApplicantProveYouth #atbMail > .fiviSameAs {
  right: -45px !important;
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .page-ApplicantProveYouth #atbMail > .fiviSameAs {
    right: 0 !important;
    bottom: 12.5em;
    position: absolute;
    width: 11em;
  }

  .page-ApplicantProveYouth #atbMail > .fiviSameAs:has(.checked) {
    bottom: 14.5px;
  }
}

@media all and (max-device-width: 808px), all and (max-width: 808px) {
  .page-ApplicantProveYouth #atbMail > .fiviSameAs {
    right: -5.1em !important;
    width: 10em;
  }
}

@media all and (max-device-width: 628px), all and (max-width: 628px) {
  .page-ApplicantProveYouth #atbMail > .fiviSameAs {
    right: 0em !important;
    width: 15em;
  }
}

@media all and (max-device-width: 485px), all and (max-width: 485px) {
  .page-ApplicantProveYouth #atbMail > .fiviSameAs {
    right: -3em !important;
    width: 10em;
  }
}

#pnlUSAddressMail .fiviSameAs {
  top: -8em;
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  #pnlUSAddressMail .fiviSameAs {
    top: 0;
  }
}

#pnlInternationalAddressHome,
#pnlInternationalAddressMail {
  input[title="Mail Code"]::placeholder,
  input[title="City"]::placeholder,
  input[title="Province (up to 8 characters)"]::placeholder {
    color: var(--font-color-label) !important;
  }

  #atbMailInt_Country,
  #atbHomeInt_Country {
    color: var(--font-color-label) !important;
  }
}

/* International Address labels */
.input-container {
  position: relative;
  width: 100%;
}

/* Styling for the new floating label */
.floating-label {
  position: absolute;
  top: 38px;
  left: 10px;
  color: var(--font-color-label);
  font-size: var(--font-size-label);
  pointer-events: none;
  transition: all 0.25s ease-out;
  transform-origin: top left;
}

#atbHomeInt.fiviAddress,
#atbMailInt.fiviAddress {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
  width: 100%;
}
/* When input is focused or has a value (via JavaScript classes) */
.input-container.is-focused .floating-label,
.input-container.has-value .floating-label {
  top: -3px;
  height: var(--input-focusLabel-fontSize);
  font-size: var(--input-focusLabel-fontSize);
  bottom: var(--input-focusLabel-offset);
  color: var(--font-color-label-focus);
  left: 0;
  font-weight: 500;
  margin-top: 2px;
}

/* Hide the native placeholder text (if present) when the label is active */
.input-container input:focus::placeholder,
.input-container input.has-value::placeholder {
  color: transparent;
}

/* Resizing International Address inputs */
#atbHomeInt_City,
#atbHomeInt_Province,
#atbHomeInt_Country,
#atbHomeInt_Zip,
#atbMailInt_City,
#atbMailInt_Province,
#atbMailInt_Country,
#atbMailInt_Zip {
  height: var(--input-height);
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/*
    9.3 Select Accounts
*/
.page-SelectAccount .fiviPanel {
  width: 100%;
}

/*
    9.4 Disclosures
*/
.accept-disclosures-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: var(--gap-horizontal-50);
  width: 100%;
}

.accept-disclosures-container .flex-column {
  flex: 1;
}

.accept-disclosures-warning {
  flex-direction: column;
}

.disclosures-warn {
  font-size: inherit;
}

.disclosures-warn span:not([style="display:none"]) {
  padding-bottom: 2rem;
}

.disclosures-check {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  border-radius: 5px;
  width: 100%;
}

.bw-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  text-align: center;
  gap: var(--gap-horizontal);
  width: 100%;
}

.bw-divider .page-text {
  width: fit-content;
}

#pnlBackupWithholding .fiviCheckBox {
  /* width: 100%; */
  max-width: 100%;
  position: relative;
  z-index: 1;
}

#pnlBackupWithholding .iradio_square-blue + label {
  position: relative;
  padding: var(--gap-vertical) var(--gap-horizontal);
  margin-bottom: 0;
  width: 100%;
  justify-content: center;
  height: calc(var(--input-height) + var(--gap-vertical-200));
  cursor: pointer;
  color: var(--color-primary-normal);
}

#pnlBackupWithholding .iradio_square-blue + label:before {
  display: none;
}

#pnlBackupWithholding .iradio_square-blue + label:after {
  content: "";
  left: 0;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: fit-content;
  padding: var(--gap-vertical) var(--gap-horizontal-200);
  background-color: var(--background-input-color);
  color: var(--color-primary-normal);
  border: 1px solid var(--color-primary-normal);
  border-radius: 5px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  box-shadow: none;
  transition-duration: 500ms;
  transition-property: color, background-color;
  z-index: -1;
}

#pnlBackupWithholding .iradio_square-blue + label:hover,
#pnlBackupWithholding .iradio_square-blue.checked + label {
  color: var(--color-white-normal);
}

#pnlBackupWithholding .iradio_square-blue + label:hover:after,
#pnlBackupWithholding .iradio_square-blue.checked + label:after {
  background-color: var(--color-primary-normal);
  box-shadow: none;
  text-decoration: none;
  left: 0;
}

#pnlBackupWithholding .iradio_square-blue.checked.disabled + label:after {
  cursor: not-allowed;
}

#pnlBackupWithholding .iradio_square-blue.checked.disabled + label:before {
  display: none;
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fivi-disclosure-modal .modal-body div {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .fivi-disclosure-modal .modal-body div input {
    margin-bottom: 1rem;
  }
}

/*
    9.5 Funding
*/
#pnlFundingAmount,
#pnlACHDetails,
#pnlCreditCardDetails,
#pnlMailDetails {
  width: 100%;
}

#pnlFundingMethods {
  position: relative;
  max-width: 100%;
  width: 100%;
}

#pnlFundingMethods .fiviPanel {
  /* max-width: 100%; */
}

.funding-method-container {
  max-width: 100%;
  gap: var(--gap-horizontal-50);
}

.funding-method-container > span {
  max-width: 100%;
  /* border-radius: 5px; */
  position: relative;
  flex: 1;
}

.funding-method .fiviCheckBox {
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 1;
  gap: 0;
}

.funding-method-container .iradio_square-blue + label {
  position: relative;
  padding: 0 var(--gap-horizontal-25);
  margin-bottom: 0;
  width: 100%;
  justify-content: center;
  height: calc(var(--input-height));
  cursor: pointer;
  text-align: center;
  color: var(--color-primary-normal);
}

.funding-method-container .iradio_square-blue + label:before {
  display: none;
}

.funding-method-container .iradio_square-blue + label:after {
  content: "";
  left: 0;
  position: absolute;
  width: 100%;
  min-width: fit-content;
  padding: var(--gap-vertical) var(--gap-horizontal-200);
  background-color: var(--background-input-color);
  color: var(--color-primary-normal);
  border: 1px solid var(--color-primary-normal);
  border-radius: 5px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  box-shadow: none;
  transition-duration: 500ms;
  transition-property: color, background-color;
  z-index: -1;
}

.funding-method-container .iradio_square-blue + label:hover,
.funding-method-container .iradio_square-blue.checked + label {
  color: var(--color-white-normal);
}

.funding-method-container .iradio_square-blue + label:hover:after,
.funding-method-container .iradio_square-blue.checked + label:after {
  background-color: var(--color-primary-normal);
  box-shadow: none;
  text-decoration: none;
  left: 0;
}

.funding-method-container .iradio_square-blue.checked.disabled + label:after {
  cursor: not-allowed;
}

.funding-method-container .iradio_square-blue.checked.disabled + label:before {
  display: none;
}

.funding-method-detail .fiviInput {
  width: calc(50% - var(--fiviInput-horizontal-spacing));
  max-width: var(--fiviInput-width);
}

.funding-method-detail .fiviCCCardInfo .form-control.CCCVVClass {
  width: 100%;
}

.funding-method-detail .fiviCCCardInfo .form-control.TwoControls,
.funding-method-detail .fiviCCCardInfo .fiviInput.TwoControls {
  width: 33% !important;
}

.funding-method-detail {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background-color: var(--background-color-alt);
  padding: var(--gap-vertical);
  width: 100%;
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .funding-method-detail .fiviInput {
    max-width: 100%;
    width: 100%;
  }

  .funding-method-detail .fiviCCCardInfo .form-control.TwoControls,
  .funding-method-detail .fiviCCCardInfo .fiviInput.TwoControls {
    width: 33% !important;
    max-width: 100%;
  }
}

/*
    9.6 Pending/Approved/Denied
*/
.page-Approved .header-container,
.page-Pending .header-container,
.page-Denied .header-container {
  flex-direction: row;
}

.page-Approved .header-container .flex-column,
.page-Pending .header-container .flex-column,
.page-Denied .header-container .flex-column {
  flex: 1;
}

.application-info-container {
  text-align: right;
}

.app-status-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: var(--gap-vertical);
  background-color: var(--background-color-alt);
}

.app-status-img svg {
  stroke: var(--color-primary-normal);
}

.app-status-container .page-text {
  letter-spacing: 1px;
  font-weight: 300;
}

.app-status-container .flex-row .page-text {
  flex: 1;
}

.app-status-container .fiviPanel {
  width: 100%;
}

.app-status-account-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical);
  width: 100%;
}

.app-status-account-container .fiviProdServiceSelected {
  background-color: var(--background-color-page);
  padding: var(--gap-vertical);
  border-radius: 5px;
  border: 1px solid var(--border-color);
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .page-Approved .header-container,
  .page-Pending .header-container,
  .page-Denied .header-container {
    flex-direction: column-reverse;
  }

  .application-info-container {
    width: 100%;
  }
}

/*
    9.7 Decline Disclosures
*/
.page-DeclineDisclosures .h1 {
  text-align: center;
}

/*
    9.8 One Time Passcode
*/
.page-ApplicantExistingOTP .section-container {
  height: 100%;
}

[id$="OneTimePasscode"] .fiviPanelContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-horizontal);
}

[id$="OneTimePasscode"] .fiviPanelContainer div:has([id*="btnResendCode"]),
[id$="OneTimePasscode"].fiviPanelContainer div:has([id*="btnBack"]) {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 5rem;
}

[id$="OneTimePasscode"] .button-link {
  text-align: center;
}

.fiviOTPButtonGroup {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 5rem;
  gap: var(--gap-horizontal);
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  [id$="OneTimePasscode"] .fiviPanelContainer div:has([id*="btnResendCode"]),
  [id$="OneTimePasscode"] .fiviPanelContainer div:has([id*="btnBack"]) {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
  }
}

/*
    9.9 Applicant Additional Information
*/
.additional-questions label {
  height: var(--input-focusLabel-fontSize);
  font-size: var(--input-focusLabel-fontSize);
  bottom: var(--input-focusLabel-offset);
  color: var(--font-color-label-focus);
  left: 0;
  text-transform: none;
  padding-bottom: 1rem;
}

.additional-questions select,
.additional-questions input {
  margin-top: calc(var(--input-marginTop-forLabelFocusSpace) + 1rem);
  color: var(--font-color-input);
}

/*
    10. ControlID Specific
*/
[id$="tbCamera"] {
  display: none;
  /* max-width: var(--fiviInput-width); */
}

[id$="tbCamera"] #lblLicenseScan {
  display: block;
  left: 0;
  transform: none;
  margin: 0 auto;
  width: fit-content !important;
  max-width: 100%;
  text-align: center;
  height: auto;
}

@media all and (max-device-width: 834px), all and (max-width: 834px) {
  [id$="tbCamera"] {
    display: block;
    max-width: var(--column-width-full);
  }
}

#pnlBackupWithholding {
  background-color: var(--background-color-alt);
  padding: var(--gap-vertical) var(--gap-horizontal);
  border: 1px solid var(--border-color);
  border-radius: 5px;
}

#LoanStatus {
  display: flex;
  flex-direction: column;
  gap: var(--gap-horizontal);
  width: 100%;
  padding: var(--gap-horizontal);
  background-color: var(--color-white-light);
  border-radius: var(--border-radius);
}

#UploadWrapper .flex-column {
  align-items: center;
  justify-content: center;
  gap: var(--gap-vertical-25);
}

#UploadWrapper h3,
#MoreUploadOptionsModalEmailSent h3 {
  text-align: center;
  padding: var(--gap-vertical-50);
  color: var(--color-gray-normal);
}

#UploadWrapper .text-muted,
#MoreUploadOptionsModalEmailSent .text-muted {
  font-size: var(--font-size);
  color: var(--color-black-light);
  line-height: var(--font-lineheight);
}

#UploadWrapper .modal-body-insideItem {
  align-items: stretch;
}

#UploadWrapper .styledInput {
  font-size: var(--font-size-input);
  color: var(--color-gray-normal);
  width: 100%;
}

#cbColorModeToggle .icheckbox_square-blue + label:before {
  content: "";
  background-color: var(--color-primary-light);
}

#cbColorModeToggle .icheckbox_square-blue + label:after {
  content: "\f0eb";
  font-family: "Font Awesome 5 Free";
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-light);
}

#cbColorModeToggle .icheckbox_square-blue.checked + label:before {
  background-color: var(--color-secondary-light);
}

#cbColorModeToggle .icheckbox_square-blue.checked + label:after {
  content: "\f186";
  font-family: "Font Awesome 5 Free";
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white-normal);
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-light);
}

#__asptrace,
#__asptrace > span {
  display: block;
  max-width: 100vw;
  overflow-x: scroll;
}

#pnlIndividualLists {
  display: none;
}

#pnlIndividualLists:has(.fiviPanel) {
  display: block;
}

/* -----------Account Ownership Maintenance Workflow Styling ----------- */
/* Journey bar */
.journey-bar-current
  .journey-bar-group.current-group:has(> img[alt="Start_OM"]):after,
.journey-bar-current
  .journey-bar-group.current-group:has(> img[alt="Accounts"]):after,
.journey-bar-current
  .journey-bar-group.current-group:has(> img[alt="add_individuals"]):after,
.journey-bar-current
  .journey-bar-group.current-group:has(> img[alt="Submit"]):after {
  content: "/4" !important;
}

.journey-bar-current
  .journey-bar-group.current-group:has(> img[alt="Start_OM"]):before {
  content: "1";
}

.journey-bar-current
  .journey-bar-group.current-group:has(> img[alt="Accounts"]):before {
  content: "2";
}

.journey-bar-current
  .journey-bar-group.current-group:has(> img[alt="add_individuals"]):before {
  content: "3";
}

.journey-bar-current
  .journey-bar-group.current-group:has(> img[alt="Submit"]):before {
  content: "4";
}

.journey-bar .journey-bar-group:has(img[alt="Start_OM"]):before {
  content: "1.";
}

.journey-bar .journey-bar-group:has(img[alt="Accounts"]):before {
  content: "2.";
}

.journey-bar .journey-bar-group:has(img[alt="add_individuals"]):before {
  content: "3.";
}

.journey-bar .journey-bar-group:has(img[alt="Submit"]):before {
  content: "4.";
}

.journey-bar .journey-bar-group:has(img[alt="Start_OM"]):after {
  content: "Verify that your information is correct";
}

.journey-bar .journey-bar-group:has(img[alt="Accounts"]):after {
  content: "Choose your accounts";
}

.journey-bar .journey-bar-group:has(img[alt="add_individuals"]):after {
  content: "Provide information on the Joint Owners and/or Beneficiaries";
}

.journey-bar .journey-bar-group:has(img[alt="Submit"]):after {
  content: "Let's make sure we've dotted our i's and crossed our t's";
}

/* ------- */
/* Choose Accounts Page  */
#AccountSelectionCheckboxList > .fiviInput {
  padding: 1em;
}

.fivi-existing-owner-container {
  padding: 1em;
}

.ExistingAccountsLevelTwo {
  font-weight: 700;
  padding-bottom: 0.5em;
}

.cbButtonGroup > span {
  padding: 1em;
}

.fiviAccountSelection label {
  white-space: nowrap;
}

@media all and (max-device-width: 600px), all and (max-width: 600px) {
  .fiviAccountSelection label {
    white-space: normal;
  }
}

/* icheck styling  */
/* Checked */
.icheckbox_square-blue.checked + label:after,
.iradio_square-blue.checked + label:after,
.iradio_square-blue.checked + span + label:after {
  left: 28px;
}

/* Update Owners */
.fiviExistingAccountOwnerList
  > .fivi-existing-owner-container
  > span
  > .fiVISIONInlineLabel {
  display: none;
}

/* Matches h3 header  */
.fivi-existing-owner-container
  > [id*="existingJointOwners_Individual"]
  > .ListHeaderLabel {
  font-size: var(--font-size-h3);
  line-height: var(--font-lineheight-h3);
  color: var(--font-color-h3);
  font-weight: var(--font-weight-h3);
  font-family: var(--font-family-h3);
  text-align: left;
}

.fivi-existing-owner-container > .ExistingAccountsLevelTwo {
  padding: 1.3em 0;
}

.fivi-existing-owner-container > .ExistingAccountsLevelThree {
  padding-bottom: 0.7em;
  font-style: italic;
}

.ExistingAccountsLevelFour {
  padding: 0.6em 1em;
  font-style: normal;
}

.ExistingAccountsLevelFour > label,
.IndividualProductRelationshipCSS > div > span > label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-horizontal-50);
  max-width: fit-content;
  flex-direction: row;
}

/* Benes & JOs */
.IndividualProductRelationshipCSS > div > label {
  padding: 1em 0;
}

.IndividualProductRelationshipCSS {
}

.IndividualProductRelationshipCSS > div > label {
  font-size: var(--font-size-h3);
  line-height: var(--font-lineheight-h3);
  color: var(--font-color-h3);
  font-weight: var(--font-weight-h3);
  font-family: var(--font-family-h3);
  text-align: left;
}

.fiviAccountSelection .fiviCheckBox {
  display: block;
}

/* W-8BEN Page */
#cbFTINNotReq {
  margin-top: 1.5em;
}

#cbFTINNotReq .DefaultTooltipClass,
#cbTaxTreatyBenefits .DefaultTooltipClass {
  left: 14.5em;
  bottom: -12px;
}

#tbW8BENCitizenshipCtry > .defaulttooltipclass,
#tbW8BENForeignTIN .defaulttooltipclass,
#tbW8BENRefNumbers .defaulttooltipclass {
  right: 6px;
}

#atbForeignResAddr .defaulttooltipclass,
#atbForeignMailAddr .defaulttooltipclass {
  left: 90%;
  top: 1.6em;
}

#atbForeignResAddr,
#atbForeignMailAddr {
  margin-top: 1em;
}

#atbForeignResAddr_pnlAddress label {
  width: 80%;
}

#atbForeignResAddr_pnlAddress label.FocusLabelClass {
  bottom: 4.5em;
}

#tbW8BENAddress label {
  width: 17em;
}

@media all and (max-device-width: 808px), all and (max-width: 808px) {
  #tbW8BENAddress label {
    width: 15em;
  }
}

/*

/*
    Business Type
*/
.page-BusinessType .ineligible-business-list {
  font-size: 14px;
  padding-left: var(--gap-horizontal-150);
}

/*
    Expected Activity
*/
.page-ExpectedActivity .section-container.flex-gap-150 {
  gap: var(--gap-vertical-150) var(--gap-horizontal);
}

/*
    Beneficial Ownership
*/
.fiviBeneOwnership {
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap-horizontal);
  & table {
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    border-collapse: separate;
  }

  & tbody {
    border: none;
  }

  & tr {
    border: none;
    border-radius: 5px;
    &:first-of-type {
      font-weight: 700;
      & > td {
        border-top: none;
      }
    }
  }

  & td {
    border: none;
    border-radius: 5px;
    &:has(> .iradio_square-blue) {
      text-align: center !important;
    }
  }

  & .iradio_square-blue {
    height: var(--column-spacer);
    width: calc(var(--column-spacer) * 2);
    position: relative;
    border-radius: 0;
    background-color: transparent;
    margin-left: calc(var(--column-spacer) * -1);
    & > input,
    & > ins {
      width: 100% !important;
      height: 100% !important;
      top: 0 !important;
      left: 0 !important;
    }

    &:before {
      content: "";
      display: block;
      margin: 0;
      min-width: calc(var(--column-spacer) * 2);
      border-radius: 40px;
      height: var(--column-spacer);
      position: relative;
      cursor: pointer;
      background-color: var(--color-gray-light);
      transition-duration: 500ms;
      max-width: calc(var(--column-spacer) * 2);
    }

    &:after {
      content: "";
      position: absolute;
      background-color: var(--color-black-light);
      cursor: pointer;
      left: 0;
      top: 0;
      width: var(--column-spacer);
      height: var(--column-spacer);
      border-radius: 50%;
      border: 0.5px solid var(--border-color);
      transition-duration: 500ms;
    }
  }

  & .iradio_square-blue.checked {
    &:before {
      background-color: var(--color-primary-light);
    }

    &:after {
      background-color: var(--color-primary-normal);
      border-color: var(--color-primary-light);
      left: var(--column-spacer);
    }
  }
}

/*
    Account Draws
*/
.page-AccountDraws {
  & .fiviProductServices > div div {
    padding: 0 !important;
  }

  & .product-services-productService-mode-container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    max-width: 100%;
    gap: var(--gap-vertical-150);
  }

  & .product-service-product-container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    max-width: var(--fiviInput-width);
    gap: var(--gap-vertical-75);
  }

  & > .product-service-product-header-container {
  }

  & > .product-service-services-container {
    padding: 0 !important;
  }

  & .fiviProductServiceProductModificationsWrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--gap-vertical-50);
    & > div:has(> .fiviDropDown) {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: var(--gap-vertical-25);
      position: relative;
    }

    & .fiviDropDown {
      margin-bottom: 0;
      & > label.FocusLabelClass {
        padding-top: 27px;
        padding-left: 5px;
      }
    }

    & .fiviBtnContainer {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    & .button-link {
      padding: 0px 5px;
      font-weight: 400;
      min-width: fit-content;
    }

    & span.fiviBtnContainer {
      left: unset;
      top: 20px;
      right: 0;
      & button {
        position: relative;
        left: unset;
        border: none;
        display: flex;
        gap: 2px;
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        &:before {
          content: "[";
        }

        &:after {
          content: "]";
        }
      }
    }
  }
}

/* Override default form-control styling  */
.page-W-8BEN .form-control {
  flex: 0 0 auto;
}

#pnlW8BENPart2 .FocusLabelClass {
  padding-top: 0.5em;
}

#pnlW8BENPart2 .page-text {
  line-height: 2 !important;
}

#tbW8BENPart2CitizenshipCtry,
#tbW8BENPart2ArticleParagraph {
  width: 15em;
}

#tbW8BENPart2ArticleParagraph {
  width: 14.5em;
}

#tbW8BENPart2WitholdingPercent {
  width: 9em;
}

#tbW8BENPart2WitholdingPercent .focuslabelclass {
  white-space: nowrap;
}

#tbW8BENPart2IncomeType {
  width: 15em;
}

#tbW8BENPart2ExplainConditions {
  width: 18em;
}

/*
    11. Admin Console
*/
#Content {
  width: 100% !important;
}

.AdminContent {
  width: 100%;
}

.AdminContent > table > tbody > tr > td:nth-child(2) > table > tbody > tr {
  display: flex;
}

.AdminContent > table > tbody > tr > td:nth-child(2) > table > tbody > tr > td {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

.AdminContent
  > table
  > tbody
  > tr
  > td:nth-child(2)
  > table
  > tbody
  > tr
  > td:last-of-type
  .form-control {
  max-width: 200px;
  margin-top: 0;
}

.AdminContent
  > table
  > tbody
  > tr
  > td:nth-child(2)
  > table
  > tbody
  > tr
  > td
  input[type="checkbox"] {
  appearance: auto;
  position: static;
  width: inherit;
  height: inherit;
  margin: 0;
}

.AdminContent .aspNetDisabled > input {
  width: 20px;
}

.layout.AdminConsole {
  min-height: auto;
}

.layout.AdminConsole > header,
.layout.AdminConsole > footer {
  display: none;
}

.layout.AdminConsole > main {
  padding: 40px 10px;
}

.layout.AdminConsole > main > .layout-container {
  width: 100%;
  max-width: calc(980px - 40px);
}

.layout.AdminConsole .page-navigation-container {
  max-width: 100%;
}

.AdminConsole .fiviAccountSelection .fiviCheckBox {
  padding: 1em 0;
}

.AdminContent .progress-container,
.AdminContent .progress-container-main {
  display: none;
}

.AdminContent .layout-container > span {
  justify-content: center;
  align-items: center;
  & > .page-container {
    align-self: unset;
    margin-top: var(--gap-vertical-150);
  }
}

.AdminContent .fiviDisclosureList {
  margin-top: 0;
}

.fiviPersonSearch {
  width: 100%;
  max-width: 100%;
  & div:has(> .form-control) {
    display: flex;
    gap: var(--gap-vertical-25);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-vertical-75);
    width: 100%;
    max-width: 100%;
    & br {
      display: none;
    }

    & span:has(> b) {
      display: none;
    }

    & .form-control {
      min-height: var(--input-height);
      width: var(--column-width-3) !important;
      max-width: var(--column-width-3) !important;
      margin-top: 0;
      display: block;
    }

    & div:has(> .fiviCenterBtn) {
      width: 100%;
    }

    & .form-inline {
      width: 100%;
      display: flex;
      flex-direction: row;
      padding-bottom: var(--gap-vertical-75);
      gap: 0px;
    }
  }

  & td:has(> .iradio_square-blue) {
    padding: 8px 0;
    height: calc(var(--column-spacer) + 16px);
    width: calc(var(--column-spacer) * 2);
  }

  & .iradio_square-blue {
    height: var(--column-spacer);
    width: calc(var(--column-spacer) * 2);
    position: relative;
    border-radius: 0;
    background-color: transparent;
    & > input,
    & > ins {
      width: 100% !important;
      height: 100% !important;
      top: 0 !important;
      left: 0 !important;
    }

    &:before {
      content: "";
      display: block;
      margin: 0;
      min-width: calc(var(--column-spacer) * 2);
      border-radius: 40px;
      height: var(--column-spacer);
      position: relative;
      cursor: pointer;
      background-color: var(--color-gray-light);
      transition-duration: 500ms;
      max-width: calc(var(--column-spacer) * 2);
    }

    &:after {
      content: "";
      position: absolute;
      background-color: var(--color-black-light);
      cursor: pointer;
      left: 0;
      top: 0;
      width: var(--column-spacer);
      height: var(--column-spacer);
      border-radius: 50%;
      border: 0.5px solid var(--border-color);
      transition-duration: 500ms;
    }
  }

  & .iradio_square-blue.checked {
    &:before {
      background-color: var(--color-primary-light);
    }

    &:after {
      background-color: var(--color-primary-normal);
      border-color: var(--color-primary-light);
      left: var(--column-spacer);
    }
  }

  & td > span {
    display: flex;
    width: 100%;
    height: 24px;
    align-items: center;
    font-size: 14px;
  }
}