/*
    Layout v2.5 Mark 3

        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_IDAuthenticationQuestions
		8.16 fiVISION_ProductFundingV2
		8.17 fiVISION_ACH
		8.18 fiVISION_CreditCardV2
		8.19 fiVISION_ApplicantWithdraw
		8.20 fiVISION_ProgressBar
	9. Page Specific
		9.1 Default Page
		9.2 Select Account
		9.3 Disclosures
		9.4 Applicant New Initial
		9.5 Applicant New Contact
		9.6 Application Summary 
		9.7 Funding Method
		9.8 Applicant Information
		9.9 CD Maintenance - Make Changes
	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-light: #f9fafb;
  --color-white-normal: #f3f4f6;
  --color-white-dark: #e5e7eb;
  --color-gray-light: #9ca3af;
  --color-gray-normal: #6b7280;
  --color-gray-dark: #4b5563;
  --color-black-light: #585858;
  --color-black-normal: #425463;
  --color-black-dark: #030712;

  /*client colors*/
  --color-primary-light: #c1aa91;
  --color-primary-normal: #b68651;
  --color-secondary-light: #4c698c;
  --color-secondary-normal: #222f3f;
  --color-tertiary-lighter: #10b981;
  --color-tertiary-light: #10b981;
  --color-tertiary-normal: #86a995;
  --color-tertiary-dark: #047857;
  --color-tertiary-darker: #047857;
  --color-quaternary-lighter: #fcd34d;
  --color-quaternary-light: #fcd34d;
  --color-quaternary-normal: #fbbf24;
  --color-quaternary-dark: #f59e0b;
  --color-quaternary-darker: #f59e0b;
  --color-body-link: #5778a2;
  --color-body-link-focus: #4c698c;
  --color-social-link: #2e7fb7;

  /*font family*/
  --font-family-pri: "Roboto", sans-serif;
  --font-family-alt: "Roboto", sans-serif;

  /*fonts*/
  /*default font*/
  --font-size: 16px;
  --font-lineheight: 20px;
  --font-color: var(--color-black-normal);
  --font-weight: 400;
  --font-family: var(--font-family-pri);

  /*input font*/
  --font-size-input: var(--font-size);
  --font-lineheight-input: var(--font-lineheight);
  --font-color-input: var(--font-color);
  --font-weight-input: 400;
  --font-family-input: var(--font-family);

  /*label font*/
  --font-size-label: var(--font-size);
  --font-lineheight-label: var(--font-lineheight);
  --font-color-label: var(--font-color);
  --font-weight-label: 500;
  --font-family-label: var(--font-family-alt);

  /*h1 font*/
  --font-size-h1: 32px;
  --font-lineheight-h1: 34px;
  --font-color-h1: var(--color-primary-darker);
  --font-weight-h1: 600;
  --font-family-h1: var(--font-family-alt);

  /*h2 font*/
  --font-size-h2: 24px;
  --font-lineheight-h2: 26px;
  --font-color-h2: var(--color-black-light);
  --font-weight-h2: 600;
  --font-family-h2: var(--font-family);

  /*h3 font*/
  --font-size-h3: 22px;
  --font-lineheight-h3: 24px;
  --font-color-h3: var(--color-secondary-dark);
  --font-weight-h3: 600;
  --font-family-h3: var(--font-family);

  /*h4 font*/
  --font-size-h4: 16px;
  --font-lineheight-h4: 18px;
  --font-color-h4: var(--color-black-light);
  --font-weight-h4: 500;
  --font-family-h4: var(--font-family);

  /*page structure*/
  --column-width: 75px;
  --column-spacer: 30px;
  --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);
  /*input and label structure*/
  --fiviInput-width: var(--column-width-5);
  --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-3);
  --fiviInput-width-partial-alt: var(--column-width-2);
  --input-height: 69px;
  --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);
}

/*
    mobile root values.
    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 -> 9 columns 
        -fiviInput-width goes to 4 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-4);
    --fiviInput-width-partial-main: var(--column-width-2);
    --fiviInput-width-partial-alt: var(--column-width-2);
    --fiviInput-width-half: 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: 30px;
    --font-lineheight-h1: 32px;
    --font-size-h2: 22px;
    --font-lineheight-h2: 24px;
    --font-size-h3: 18px;
    --font-lineheight-h3: 20px;
    /* --column-width-8: 100%; */
    /* --column-width-9: 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: calc(
      calc(var(--fiviInput-width) - var(--column-spacer)) / 2
    );
  }

  .layout {
    background-color: #ffffff;
  }
}

@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-4);
    --fiviInput-width-partial-main: var(--column-width-2);
    --fiviInput-width-partial-alt: var(--column-width-2);
    --fiviInput-width-half: var(--column-width-2);
  }
}

@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-half: calc(50% - calc(var(--column-spacer) / 2));
  }

  .page-SelectAccount .product-type-selection {
    flex-direction: column !important;
    justify-content: center !important;
  }
}

/*
    2. General Elements & Classes
*/
/*
    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);
  background-color: #ffffff;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

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;
}

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);
  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;
}

hr {
  width: 100%;
  border: 0;
  border-top: 1px solid #eeeeee;
}

legend {
  display: none;
}

a,
a:visited {
  color: var(--color-body-link) !important;
  text-decoration: underline;
}

a:hover {
  color: var(--color-body-link-focus) !important;
  text-decoration: underline;
}

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);
}

/*
    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;
}

/*
    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;
}

/*
    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);
}

.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);
}

/*
    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;
}

/*
    general helper classes
*/
.page-text {
  font-size: var(--font-size);
  line-height: var(--font-lineheight);
  font-weight: var(--font-weight);
  color: var(--font-color);
  width: 100%;
}

.page-text-small {
  font-size: calc(var(--font-size) - 2px);
  width: 100%;
}

.page-text-large {
  font-size: calc(var(--font-size) + 2px);
  line-height: calc(var(--font-lineheight) + 3px);
  width: 100%;
}

.spacer-vertical {
  /*
        no height is required here, gap should handle it,
        will double the space between the previous and next elements
    */
  width: 100%;
}

/*
    3. Page Structure
*/
/*
    Page Structure
*/
.layout {
  background-color: #ffffff;
  width: var(--column-width-full);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  /* gap: var(--gap-vertical-150); */
}

@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
    */
  .layout {
    background-color: #ffffff;
  }
}

header,
main,
footer {
  width: var(--column-width-full);
  display: flex;
  margin: 0;
  padding: var(--gap-vertical) var(--gap-horizontal);
  text-align: left;
}

header > .layout-container,
main > .layout-container,
footer > .layout-container {
  max-width: var(--column-width-12);
  margin: 0 auto;
  min-height: 62px;
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  header,
  main,
  footer {
    padding: var(--gap-vertical-50) var(--gap-horizontal-50);
  }

  header > .layout-container {
    min-height: 50px;
    justify-content: center;
  }
}

/*
    Header Styling
*/
.header-logo {
  width: 200px;
}

header {
  background-color: #ffffff;
  box-shadow: none;
  position: fixed;
  z-index: 3;
  /* padding: 1rem 0; */
  height: 156px;
}

header > .layout-container {
  justify-content: space-between;
  gap: unset;
}

header .nav-options {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  text-decoration: none;
}

header .nav-options a {
  color: var(--color-black-normal);
  cursor: pointer;
}

header .nav-options a:hover {
  text-decoration: none;
}

header .ind-options .ind-initials {
  background-color: var(--color-secondary-normal);
  border-radius: 50%;
  font-size: calc(var(--font-size) - 4px);
  font-weight: 600;
  color: #ffffff;
  line-height: calc(var(--font-size) - 4px);
  padding: 4px;
}

header .ind-options ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  gap: var(--gap-vertical-25);
  list-style: none;
  padding: 0;
  width: 100%;
}

.header-logo-container {
  width: 25%;
}

.header-nav-container {
  display: flex;
  justify-content: flex-end;
  text-align: right;
  width: 75%;
}

.top-nav {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.top-nav ul,
.top-nav-small ul {
  display: flex;
  list-style: none;
  padding: 0;
}

.top-nav ul li,
.top-nav-small ul li {
  display: flex;
  align-items: center;
  padding: 5px;
  margin-bottom: 0;
}

.top-nav ul li i,
.top-nav-small ul li i {
  padding: 5px;
}

.top-nav-small {
  width: 100%;
  background-color: var(--color-secondary-normal);
  display: none;
}

.top-nav-small ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.top-nav-small ul li {
  width: 50%;
  text-align: center;
  padding: 0;
  min-width: 150px;
}

.top-nav-small ul li a {
  color: #ffffff !important;
  text-decoration: none;
  height: 100%;
  width: 100%;
  padding: 10px;
}

.top-nav-small ul li a:active {
  background-color: var(--color-secondary-light);
}

.header-nav-container .fiviPanelContainer {
  justify-content: flex-end;
}

.ind-nav-menu {
  background-color: #ffffff;
  border-radius: 0.5rem;
  width: 250px !important;
  right: -2px !important;
  top: 15px !important;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  display: block;
  width: 100%;
  text-align: right;
  z-index: 5;
  border: 2px solid var(--color-primary-normal);
}

.ind-nav-menu li {
  padding: 0.5rem 1rem;
  margin: 0 !important;
}

.ind-nav-menu li hr {
  margin: 0;
  border-color: var(--color-primary-normal);
}

.ind-nav-menu li a {
  color: #ffffff;
  text-decoration: none;
}

.ind-nav-menu li a:hover {
  font-weight: 500;
}

.nav-link {
  width: auto !important;
  background-color: transparent;
  border: none;
  color: var(--color-primary-darker);
  margin: 0;
  padding: 0;
  font-weight: 600;
}

.nav-link:hover {
  font-weight: 600;
  color: var(--color-primary-darker);
}

.progress-container {
  width: var(--column-width-full);
  background-color: lightgray;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 156;
  z-index: 1;
  display: flex;
  justify-content: center;
  height: 0.5rem;
}

#pnlIndNavOptions .fiviMultiInput {
  width: auto !important;
}

@media all and (max-device-width: 1270px), all and (max-width: 1270px) {
  header {
    position: fixed;
    width: -webkit-fill-available;
  }

  .progress-container {
    top: 156;
  }

  .ind-nav-menu {
    right: -2px !important;
  }

  .routing-number {
    display: none !important;
  }
}
@media all and (max-device-width: 656px), all and (max-width: 656px) {
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  header {
    padding: 0;
    height: auto;
  }

  header .layout-container {
    flex-direction: row;
  }

  .header-nav-container {
    width: var(--column-width-full);
    flex-direction: column;
  }

  .header-logo-container {
    width: 100%;
    padding: var(--gap-vertical-50) var(--gap-horizontal-50) 1em
      var(--gap-horizontal-50);
  }

  .progress-container {
    top: 169px;
  }

  .header-nav-container {
    align-self: flex-end;
    padding: 0 var(--gap-horizontal-50) var(--gap-vertical-50)
      var(--gap-horizontal-50);
  }

  header .nav-options {
    width: var(--column-width-full);
    flex-direction: column;
  }

  header .nav-options .button-primary,
  header .nav-options .button-secondary {
    width: 25rem !important;
    min-width: unset;
  }

  #pnlHeaderNavOptions {
    padding-top: 1rem;
  }

  .ind-nav-menu {
    left: 113 !important;
  }

  .top-nav {
    display: none;
  }

  .top-nav-small {
    display: flex;
  }
}

/*
    Main Styling
*/
main {
  flex-grow: 1;
  align-items: flex-start;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 165;
  background-color: #ffffff;
}

main > .layout-container > span {
  /*
        this is span that start the fivision_PageContent
    */
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-bottom: 2rem;
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  main {
    margin-top: 156;
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  main {
    margin-top: 190;
  }
}

/*
    Footer Styling
*/
footer {
  background: linear-gradient(#f8f8f8, #fff);
  margin-top: auto;
  position: relative;
  color: var(--color-black-normal);
  padding: 3rem 0;
}

footer > .layout-container {
  font-size: var(--font-size);
  background-color: transparent;
  padding: 0 15px;
}

footer .h1,
footer .h2,
footer .h3,
footer .h4 {
  font-weight: 500;
}

footer .page-text {
  color: var(--font-color);
}

footer > .layout-container > div {
  width: 100%;
  font-size: 13px;
  display: flex;
}

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: #ffffff;
  align-self: flex-start;
  margin-top: var(--gap-vertical-50);
}

footer ul {
  display: flex;
  list-style: none;
  padding: 0;
  align-items: center;
}

footer li {
  display: flex;
  margin-bottom: 0 !important;
  justify-content: center;
  align-items: center;
}

.social-info,
.bottom-nav,
.ehl-info,
.copyright-info {
  justify-content: center;
}

.social-info li {
  padding: 0 2px;
}

.social-info .social-info-text {
  padding: 0 10px;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-body-link);
}

.social-info a {
  display: flex;
  height: 38px;
  width: 38px;
  color: var(--color-social-link) !important;
  border: 1px solid var(--color-social-link);
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  text-decoration: none !important;
}

.social-info a:hover {
  background-color: var(--color-social-link);
  color: #ffffff !important;
  border: 1px solid var(--color-social-link);
}

.social-info i {
  font-size: 24px;
}

.bottom-nav a {
  color: var(--color-social-link);
  text-decoration: none;
  padding: 10px 15px;
}

.bottom-nav ul {
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

.bottom-nav li {
  text-wrap: nowrap;
}

.ncua-info {
  justify-content: flex-start;
  align-items: center;
}

.ncua-logo img {
  width: 150px;
}

.ncua-text {
  padding-left: 1rem;
}

.ncua-text-large {
  font-size: 16px;
}

.bottom-nav a:hover {
  background-color: #eee;
  color: var(--color-body-link);
  border-radius: 4px;
  text-decoration: none;
}

.bottom-nav i {
  padding: 0 5px;
}

.ehl-info {
  justify-content: center;
  align-items: center;
}

.ehl-img img {
  width: 20px;
}

.ehl-text {
  padding: 0 5px;
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
}

@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;
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .ncua-info {
    flex-direction: column;
    gap: var(--gap-horizontal-50);
  }

  .ncua-logo {
    justify-content: center;
  }
}

/*
    4. Page General Containers
*/
.page-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-vertical-75);
  width: var(--column-width-8);
  max-width: 100%;
  align-self: center;
  margin-top: 2rem;
  background-color: #ffffff;
}

.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%;
}

.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: 1rem;
}

.section-header:before {
  content: "";
  display: block;
  width: var(--column-width-2);
  height: 2px;
  background-color: var(--color-secondary-normal);
  align-self: flex-start;
  margin-bottom: 0.5rem;
}

.page-navigation-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  width: var(--column-width-8);
  max-width: 100%;
}

.navigation-forward-container,
.navigation-other-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .page-navigation-container {
    flex-direction: column;
    align-items: center;
    gap: var(--gap-vertical);
  }

  .navigation-other-container {
    align-items: center;
  }

  .navigation-other-container .button-link {
    text-align: center;
  }
}

/*
    5. Buttons
*/
.button-primary {
  min-width: var(--column-width-2);
  width: fit-content !important;
  margin: 0;
  padding: 12px 24px;
  background-color: var(--color-primary-normal);
  color: #ffffff !important;
  border: 2px solid var(--color-primary-normal);
  border-radius: 2px;
  font-size: 18px;
  line-height: 18px;
  font-weight: 500;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  text-align: center;
  text-decoration: none;
}

.button-primary:hover:not(:disabled),
.button-primary:active:not(:disabled),
.button-primary:focus:not(:disabled) {
  background-color: var(--color-primary-light);
  color: #ffffff !important;
  border: 2px solid var(--color-primary-light);
  font-weight: 500;
  box-shadow: none;
  text-decoration: none;
}

.button-primary:disabled {
  opacity: 0.5;
}

.button-primary:visited {
  color: white !important;
}

.button-secondary {
  min-width: var(--column-width-2);
  width: fit-content !important;
  margin: 0;
  padding: 12px 24px;
  background-color: var(--color-secondary-normal);
  color: white;
  border: 2px solid var(--color-secondary-normal);
  border-radius: 2px;
  font-size: 18px;
  line-height: 18px;
  font-weight: 500;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  text-align: center;
}

.button-secondary:hover:not(:disabled),
.button-secondary:active:not(:disabled),
.button-secondary:focus:not(:disabled) {
  background-color: var(--color-secondary-light);
  color: white;
  border: 2px solid var(--color-secondary-light);
  font-weight: 500;
  box-shadow: none;
  text-decoration: none;
}

.button-secondary:disabled {
  opacity: 0.5;
}

.button-secondary:visited {
  color: white;
}

#pnlHeaderNavOptions a,
.nav-options a {
  text-decoration: none !important;
}

.button-other,
.MinorButton {
  min-width: var(--column-width-2);
  width: fit-content !important;
  margin: 0;
  padding: 12px 24px;
  background-color: var(--color-secondary-normal);
  color: white;
  border: 2px solid var(--color-secondary-normal);
  border-radius: 2px;
  font-size: 18px;
  line-height: 18px;
  font-weight: 500;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  text-align: center;
}

.button-other:hover:not(:disabled),
.button-other:active:not(:disabled),
.button-other.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) {
  background-color: var(--color-secondary-light);
  color: white;
  border: 2px solid var(--color-secondary-light);
  font-weight: 500;
  box-shadow: none;
  text-decoration: none;
}

.button-other:disabled,
.MinorButton:disabled,
.fiviAddAnotherButton > a:disabled {
  opacity: 0.5;
}

.button-link,
.button-link-alt {
  /* min-width: var(--column-width-2); */
  text-align: left;
  background-color: transparent;
  border: 2px solid transparent;
  font-size: 18px;
  line-height: 18px;
  font-weight: 600;
  color: var(--color-black-normal);
  width: auto !important;
}

.button-link {
  color: var(--color-primary-darker);
}

.button-link:hover:not(:disabled),
.button-link:active:not(:disabled),
.button-link:focus:not(:disabled) {
  border-bottom: 2px solid var(--color-primary-normal);
  color: var(--color-black-normal);
  font-weight: 600;
}

.button-link-alt {
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-black-normal);
}

.button-link-alt:hover:not(:disabled),
.button-link-alt:active:not(:disabled),
.button-link-alt:focus:not(:disabled) {
  border-bottom: 2px solid var(--color-primary-normal);
  color: var(--color-black-normal);
  font-weight: 600;
}

.button-other:disabled,
.button-other-alt:disabled {
  opacity: 0.5;
}

.fiviRemoveBtn {
  position: absolute;
  color: var(--color-secondary-normal);
  cursor: pointer;
  left: 45%;
}

.fiviRemoveBtn:hover:not(:disabled),
.fiviRemoveBtn:active:not(:disabled),
.fiviRemoveBtn.focus:not(:disabled) {
  color: var(--color-secondary-dark);
}

/*
    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
*/
#accordion,
#pnlLoans {
  display: flex;
  flex-direction: column;
  max-width: var(--column-width-12);
  width: 100%;
  border: none;
  border-radius: 0.5rem;
  background-color: transparent;
}

#pnlRequiredProducts .panel,
.input-section {
  outline: none;
  border: none;
  border-radius: 5px;
  background-color: transparent;
  box-shadow: none;
  margin: 0;
  padding: 1rem;
}

#accordion .panel {
  outline: none;
  border-radius: 5px;
  background-color: transparent;
  box-shadow: none;
  margin: 0;
  padding: 1rem;
  background-color: transparent;
}

.panel-body,
.panel {
  background-color: transparent;
  border-radius: 5px;
  margin: 1rem 0;
  padding: 0;
}

#accordion > .panel:has(> .panel-heading.collapsed) {
  outline: 1px solid var(--color-white-dark);
  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: 5px;
}

#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-75);
  border: none;
  border-radius: 0.5rem;
  padding: 0;
}

.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 0.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 0.5s ease-in-out;
}

/*
    this is the accordion opening
*/
#accordion > .panel > .panel-heading {
  padding-left: 0;
  background: transparent;
  transition: padding-left 0.5s ease-in-out;
}

#accordion > .panel > .panel-heading > .panel-title {
  font-size: var(--font-size-h3);
  line-height: var(--font-size-h3);
  transition: font-size 0.5s ease-in-out;
}

/*
    this is with the accordion closed
*/
#accordion > .panel > .panel-heading.collapsed {
  padding-left: var(--gap-horizontal);
  transition: padding-left 0.5s ease-in-out;
}

#accordion > .panel > .panel-heading.collapsed > .panel-title {
  font-size: var(--font-size-h4);
  line-height: var(--font-size-h4);
  transition: font-size 0.5s ease-in-out;
}

/*
    this is with the accordion closing
*/
#accordion > .panel > .panel-heading.collapsed {
  padding-left: var(--gap-horizontal);
  transition: padding-left 0.5s ease-in-out;
}

#accordion > .panel > .panel-heading.collapsed > .panel-title {
  font-size: var(--font-size-h4);
  line-height: var(--font-size-h4);
  transition: font-size 0.5s ease-in-out;
}

/*
    7. Inputs and Labels
*/
/*
    label
*/
label {
  font-weight: var(--font-weight-label);
}

.DefaultLabelClass {
  display: flex;
  align-items: center;
  height: var(--input-height);
  position: absolute;
  left: var(--gap-horizontal-50);
  font-size: 16px;
  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 150ms ease-out 0s;
}

.FocusLabelClass {
  position: absolute;
  height: var(--input-focusLabel-fontSize);
  font-size: 14px;
  top: 10px;
  left: var(--gap-horizontal-50);
}

/*
    input
*/
.fiviInput {
  display: inline-flex;
  width: 100%;
  /*oh my vw actually worked*/
  /* max-width: var(--fiviInput-width); */
  position: relative;
  flex-grow: 1;
}

.form-control {
  display: flex;
  align-items: center;
  width: 100% !important;
  height: var(--input-height);
  padding: 24px var(--gap-horizontal-50) 10px;
  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 lightgray;
  box-shadow: none;
}

.form-control:focus {
  box-shadow: 1px 1px 6px -1px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--color-primary-normal) !important;
  border-left: 10px solid var(--color-primary-normal) !important;
}

.fiviTransparent {
  color: transparent;
}

/*
    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);
}

/*
    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%;
  }
}

/*
    Checkbox/Radio Buttons
*/
.fiviCheckBox,
.fiviCheckBox > span {
  display: flex;
  align-items: center;
  gap: var(--gap-horizontal-50);
  max-width: fit-content;
}

.fiviCheckBox > label,
.fiviCheckBox > span > label {
  text-indent: -3px;
  align-items: center;
}

/*
    Validator
*/
.CtlValidator {
  position: absolute;
  line-height: var(--input-height);
  bottom: -3px;
  left: 3.5px;
}

/*
    Tool Tips
*/
.DefaultTooltipClass {
  /* position: absolute; */
  width: fit-content;
}

.tooltip-arrow {
  display: none;
}

.tooltip-inner {
  width: max-content;
  max-width: 300px !important;
  text-align: left;
}

/*
    seperators
*/
.fiviMultiSeperator {
  width: 100%;
  height: 2px;
  margin: 14px 0;
}

.fiviMultiSeperator::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-secondary-normal);
}

/*
    8. fiVISION Controls
*/
/*
    fiVISION_ErrorSummary
*/
#ErrorSummary1 {
  display: none;
}

#ErrorSummary1:has(li) {
  display: block;
}

#ErrorSummary1 li {
  font-size: calc(var(--font-size) - 2px);
  font-weight: 500;
  margin-bottom: 0;
}

/*
    fiVISION_Panel
*/
.fiviPanel {
  display: inline-flex;
  flex-direction: unset;
  flex-wrap: unset;
  width: unset;
  justify-content: unset;
}

.fiviPanel,
.fiviPanel > .fiviPanelContainer {
  /* display: block; */
  width: 100% !important;
  max-width: 100%;
  /* max-width: max-content; */
}

/*
    fiVISION_ProductsAndServicesV2
*/
.fiviProdServControl {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--column-width-12);
  width: 100%;
  gap: var(--gap-vertical-75);
}

.fiviProdServControl .DefaultTooltipClass {
  top: 0;
  right: 0;
}

.fiviProdContainer {
  /* max-width: var(--column-width-6); */
  width: 100%;
  min-height: 100px;
  padding: var(--gap-horizontal-50);
  position: relative;
  /* background-color: var(--color-secondary-lighter); */
  border: 1px solid var(--color-secondary-normal);
  box-shadow: none;
  border-radius: 0.5rem;
  box-shadow: none;
}

.fiviProdContainer:has(
    .fiviProdServ > .fiviCheckBox > .icheckbox_square-blue.hover
  ) {
  background-color: #e1e1e1;
}

.fiviProdContainer:has(
    .fiviProdServ > .fiviCheckBox .icheckbox_square-blue.checked
  ) {
  background-color: #eeeeee;
}

.fiviProdServ {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50) var(--gap-horizontal-50);
  height: 100%;
}

.Product_MoreInfo {
  border-left: 1px solid var(--font-color);
  padding-left: 1rem;
}

.fiviProdServ > .fiviCheckBox > .DefaultTooltipClass,
.fiviProdServ > .fiviCheckBox > span > .DefaultTooltipClass {
  width: 22px;
  position: relative;
}

.fiviProdServ > .fiviCheckBox > label,
.fiviProdServ > .fiviCheckBox > span > label {
  font-size: calc(var(--font-size-label) + 4px);
  width: max-content;
  justify-content: space-between;
  display: flex;
}

.fiviProdServ > .fiviCheckBox {
  width: 98%;
  max-width: 98%;
  justify-content: flex-start;
}

.fiviProdServ > .fiviCheckBox div {
  order: 3;
  position: absolute !important;
  width: 100%;
}

.fiviProdServ > .fiviCheckBox .icheckbox_square-blue {
  background-image: none;
  background-color: transparent;
  height: 50px;
  top: 0;
  left: 0;
}

.fiviProdServ > .fiviCheckBox div [id*="_ProductCheckbox_"],
.fiviProdServ > .fiviCheckBox div .icheck-helper {
  position: absolute !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
}

.fiviProdServ > .fiviCheckBox span {
  width: 98%;
  max-width: 98%;
  justify-content: flex-start;
}

.fiviProdServ .fiviAddAnotherButton {
  display: flex;
  width: 100%;
  align-self: flex-start;
  justify-content: center;
}

.fiviProdServ .fiviAddAnotherButton > a:after {
  content: "+";
  font-size: 24px;
  padding-left: 0.5rem;
}

.fiviProdServ .fiviAddAnotherButton > a {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  float: unset !important;
  color: var(--font-color);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid var(--color-body-link);
  font-size: 18px;
}

.fiviProdServ .fiviAddAnotherButton > a:hover {
  border-color: var(--color-primary-normal);
}

.fiviProdPanel {
  max-width: 100%;
  width: 100%;
  border-top: 1px solid var(--color-secondary-normal);
}

.fiviProdPanel:not(.fiviProdPanel:has(div)) {
  display: none !important;
}

.fiviProdPanel > .fiviInput {
  max-width: 100%;
  width: 100%;
}

.fiviProdPanel > .fiviInput:first-of-type {
  margin-top: var(--gap-vertical-50);
}

.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: column;
  gap: var(--gap-vertical-50) 0;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 var(--gap-horizontal-50);
  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 .fiviInput {
  width: 100vw !important;
  max-width: var(--fiviInput-width);
}

.fiviCDWizardInfo > .fiviCheckBox {
  height: var(--input-height);
  align-self: flex-end;
  width: 100%;
}

.Product_MoreInfo a,
.Service_MoreInfo a {
  color: var(--color-body-link) !important;
}

.Product_MoreInfo a:hover,
.Service_MoreInfo a:hover {
  color: var(--color-body-link-focus) !important;
  text-decoration: underline;
}

/*
    fiVISION_AddressTextBoxV2
*/
.address-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fiviInput-vertical-spacing);
  width: 100%;
  /* max-width: var(--fiviInput-width); */
}

/* .address-container > h3 {
    max-width: calc(var(--fiviInput-width) / 2);
} */

.fiviAddress {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-25);
  width: 100%;
}

.fiviAddress > .fiviMultiInput {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
  width: 100%;
}

.fiviAddress > .fiviSameAs {
  max-width: calc(calc(var(--fiviInput-width) / 2) - var(--column-spacer));
  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;
}

@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;
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
}

/*
    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: space-between;
  flex-wrap: wrap;
  max-width: var(--column-width-full);
}

.fiviLongInput.fiviPhoneControl {
  max-width: 100%;
  width: 100%;
}

.fiviLongInput.fiviPhoneControl > input.form-control,
.fiviTwoInput.fiviPhoneControl > input.form-control {
  max-width: 70%;
  width: 70%;
}

.fiviPhoneControl > .fiviCheckBox,
.fiviPhoneControl > select.form-control {
  max-width: 25%;
  width: 2%;
}

.fiviPhoneControl > .fiviCheckBox {
  background: transparent;
  border: none !important;
  box-shadow: none;
  padding: 0;
}

[id$="ddPhoneNumberType"] {
  padding: 1rem;
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .fiviTwoInput.fiviPhoneControl {
    max-width: var(--column-width-6);
    width: 100%;
    justify-content: flex-start;
  }

  .fiviTwoInput.fiviPhoneControl > input.form-control,
  .fiviTwoInput.fiviPhoneControl > select.form-control {
    max-width: var(--column-width-2);
  }

  .fiviLongInput.fiviPhoneControl > .fiviCheckBox {
    margin-top: 0;
    max-width: 100%;
  }
}

@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: 524px), all and (max-width: 524px) {
  .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)
    );
  }
}

/*
    fiVISION_IDTypeV2
*/
/* .fiviIDType {
    max-width: calc(calc(var(--fiviInput-width) * 2) + var(--column-spacer));
} */

.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);
  }
}

/*
    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);
}

[id$="_YearsMonthsDurationInput"] label {
  position: absolute;
  height: var(--input-focusLabel-fontSize);
  font-size: 14px;
  top: 10;
  left: var(--gap-horizontal-50);
}

@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);
  }
}

/*
    fiVISION_EmploymentHistory
*/
.fiviEmpHistoryControl {
  /* max-width: var(--column-width-full); */
  width: 100%;
}

.fiviEmpHistoryControl center {
  width: var(--fiviInput-width);
}

.fiviEmpHistoryControl .fiviTwoInput label {
  position: absolute;
  height: var(--input-focusLabel-fontSize);
  font-size: 14px;
  top: 10;
  left: var(--gap-horizontal-50);
}

@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);
  }
}

/*
    fiVISION_IndividualIncome
*/
.fiviIncomeControl {
  max-width: var(--column-width-full);
  width: var(--column-width-full);
  display: flex;
  justify-content: center;
  align-items: center;
}

.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: flex-end;
  order: 2;
  height: var(--input-height);
}

@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;
  }
}

/*
    fiVISION_IndividualDetails
*/
.fiviIndDetails {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-25);
}

.fiviIndDetails > div {
  margin-left: var(--gap-horizontal-25);
}

.fiviIndDetails > .fiviIndDetailsSection {
  margin-left: 0;
}

.fiviIndDetailsSection > b {
  font-weight: 500;
}

.fiviIndDetails > .fiviIndDetailsName {
  font-size: calc(var(--font-size) + 2px);
  font-weight: 600;
  margin-bottom: var(--gap-vertical-25);
  margin-left: 0;
}

.fiviIndDetails > .fiviIndDetailsName:not(:first-of-type) {
  margin-top: var(--gap-vertical-75);
}

/*
    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);
}

.fiviProdServiceSelected > div > ul > i {
  margin-left: var(--gap-horizontal-25);
}

.fiviProdServiceSelected > div > ul > li {
  margin: var(--gap-vertical-25) 0 0 0;
  width: 100%;
  font-size: calc(var(--font-size) + 2px);
}

.fiviProdServiceSelected > div > ul > li:first-of-type {
  margin-top: 0;
}

.fiviProdServiceSelected > div > ul > ul {
  margin: 0;
  width: 100%;
}

.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;
}

/*
    fiVISION_ProductRelationships
*/
.fiviProductRelationship {
  max-width: var(--column-width-10);
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--gap-vertical-75);
}

.fiviProductRelationship > input:first-of-type {
  align-self: center;
}

.fiviProductRelationship table {
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid var(--color-black-normal);
  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;
}

.fiviProductRelationship table > tbody {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.fiviProductRelationship 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-gray-light);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.fiviProductRelationship table > tbody > tr:nth-of-type(odd) {
  background-color: white !important;
}

.fiviProductRelationship table > tbody > tr:nth-of-type(even) {
  background-color: transparent !important;
}

.fiviProductRelationship table > tbody > tr:last-of-type {
  border: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.fiviProductRelationship table th,
.fiviProductRelationship table td {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--column-width-3);
  width: 100%;
  padding: calc(var(--gap-horizontal) / 2) 0 !important;
  background-color: transparent !important;
}

.fiviProductRelationship table td {
  border: none !important;
}

.fiviProductRelationship table th:first-of-type,
.fiviProductRelationship table td:first-of-type {
  justify-content: flex-start;
}

.fiviProductRelationship table th:last-of-type,
.table td:last-of-type {
  display: flex;
  flex-direction: column;
  max-width: var(--column-width-4);
  width: 100%;
  background-color: transparent !important;
}

.fiviProductRelationship table td:last-of-type > br {
  display: 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;
  }
}

/*
	fiVISION_DocumentListV2
*/
.fiviDocumentList {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--gap-vertical-75);
}

.fiviDocumentList .DefaultTooltipClass {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--column-spacer);
  height: var(--input-height);
  margin: calc(var(--gap-horizontal) * 0.5) 0 !important;
  position: absolute;
  top: 0;
  right: 0;
}

.fiviDocumentList table {
  display: block;
  max-width: var(--column-width-10);
  width: 100%;
  margin: 0;
  border: 1px solid var(--color-white-dark);
  border-radius: 5px;
  box-shadow: none;
}

.fiviDocumentList table > tbody {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.fiviDocumentList table > tbody > tr {
  display: flex;
  flex-wrap: nowrap;
  padding: 0 var(--column-spacer);
  border: none;
  border-radius: 5px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.fiviDocumentList table > tbody > tr:nth-of-type(odd) {
  background-color: white !important;
}

.fiviDocumentList table > tbody > 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 th {
  border-top: none !important;
}

.fiviDocumentList table th,
.fiviDocumentList table td {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--column-width-3);
  width: 100%;
  background-color: transparent !important;
}

.fiviDocumentList table th:first-of-type,
.fiviDocumentList table td:first-of-type {
  justify-content: flex-start;
}

.fiviDocumentList table th:last-of-type,
.fiviDocumentList table td:last-of-type {
  display: flex;
  flex-direction: column;
  max-width: var(--column-width-4);
  width: 100%;
  background-color: transparent !important;
}

.fiviDocumentList table td:last-of-type > br {
  display: none;
}

/*
.fiviDocListBtn {
	display: flex;
	justify-content: center;
}

.fiviDocumentList .fiviCenterBtn {
	margin-bottom: 0;
}

.fiviDocumentList td {
	vertical-align: middle !important;
}

.fiviDocumentList tr:nth-of-type(1) > td {
	font-weight: bold;
	text-align: left !important;
	border: none;
}

.fiviDocumentList td,
.fiviDocumentList tr {
	border: none;
}

.fiviDocumentList .DefaultTooltipClass {
	position: relative;
	right: unset;
	top: 0.4rem;
}

.fiviDocumentList td br {
	display: none;
}
*/
/*
    9. Page Specific
*/
/*
    9.1 Default Page
*/
.page-Default-Content {
  width: var(--column-width-12);
}

.cd-maintenance-default {
  width: var(--column-width-8);
}

.lets-get-started-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical);
  max-width: var(--column-width-10);
  width: 100%;
  flex-grow: 1;
}

.lets-get-started-container > h2 {
  display: flex;
  align-items: center;
  gap: var(--gap-horizontal-50);
}

.lets-get-started-container > h2 > .DefaultTooltipClass {
  position: relative;
  display: none;
}

.page-Default-Content #IndividualHandler01 {
  display: flex;
  justify-content: flex-end;
}

.default-thumbnail-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical);
}

.page-Default-Content .thumbnail {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-vertical);
  max-width: var(--column-width-4);
  width: 100%;
  min-height: 210px;
  margin: 0;
  padding: var(--gap-horizontal-50);
  border: 1px solid var(--color-secondary-light);
  border-radius: 5px;
}

.page-Default-Content .thumbnail > .h3 {
  text-align: center;
}

.page-Default-Content .thumbnail > .thumbnail-call-to-action {
  margin-top: auto;
}

.lets-get-started-container #IndividualHandler01 {
  justify-content: center;
}

.nav-options-mobile {
  display: none;
}

@media all and (max-device-width: 1255px), all and (max-width: 1255px) {
  .lets-get-started-container,
  .page-Default-Content {
    max-width: var(--column-width-8);
  }

  .page-Default-Content > .flex-row {
    justify-content: left;
  }
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  .header-nav-container {
    display: none;
  }

  .nav-options-mobile {
    display: flex;
    .header-container.nav-options {
      display: flex !important;
      flex-direction: row !important;
      display: inline;
    }
  }

  .lets-get-started-container {
    max-width: var(--column-width-5);
  }

  .what-you-need {
    font-size: calc(var(--font-size) - 2px);
  }

  .page-Default-Content > .flex-row {
    justify-content: center;
  }
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .lets-get-started-container {
    max-width: 100%;
  }

  .default-thumbnail-container {
    max-width: 100%;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .page-Default-Content .thumbnail {
    max-width: calc(var(--column-width-3) + var(--column-width-half));
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .what-you-need {
    font-size: var(--font-size);
  }

  .what-you-need-header,
  .what-you-need {
    display: none;
  }

  .lets-get-started-container > h2 > .DefaultTooltipClass {
    display: inline;
  }

  .nav-options #btnMember2,
  .nav-options a .button-secondary,
  #btnNonMember {
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .page-Default-Content #IndividualHandler01 {
    justify-content: center;
  }
}

@media all and (max-device-width: 400px), all and (max-width: 400px) {
  .nav-options-mobile {
    .header-container.nav-options {
      flex-direction: column !important;
    }
  }
}

/*
	9.2 Select Account
*/
.page-SelectAccount,
.page-SelectAccount .page-navigation-container {
  width: var(--column-width-8);
}

.page-SelectAccount .product-type-selection {
  flex-direction: row;
  justify-content: space-between;
}

.product-type-selection-section {
  gap: var(--gap-vertical-50);
  display: flex;
  flex-direction: column;
}

.page-SelectAccount .product-type-selection-section select {
  flex-direction: row;
  justify-content: space-between;
  padding: 16px var(--gap-horizontal-50);
  height: auto;
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .page-SelectAccount .product-type-selection-section select {
    width: var(--column-width-full);
  }

  .product-type-selection-section {
    width: var(--column-width-full);
  }
}

/*
	9.3 Disclosures
*/
#cbDisclosures {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.DisabledDisclosuresCheckBox {
  align-items: flex-start !important;
}

/*
	9.4 Applicant New Intitial
*/
.page-ApplicantProve {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-vertical-75);
  width: var(--column-width-8);
  max-width: 100%;
  align-self: center;
  margin-top: 2rem;
  background-color: #ffffff;
}

.page-ApplicantProve .fiviPhoneControl,
.page-ApplicantProve .TwoControls {
  width: var(--column-width-full) !important;
  max-width: var(--column-width-full) !important;
}

.prove-check-phone-image-container > img {
    max-width: 100%;
}

.sms-opt-panel {
  width: var(--column-width-full);
  display: flex;
  justify-content: center;
}

.prove-direction-buttons {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  gap: var(--gap-horizontal-25);
  justify-content: space-between;
}

.sms-button {
  padding: 1rem;
}

.sms-button .form-element {
  max-width: var(--column-width-full);
  display: unset;
}

.sms-button .form-element label {
  text-indent: 0;
  align-items: center;
  font-weight: 500;
  font-size: 18px;
  text-transform: uppercase;
  border-radius: 5px;
}

.form-element input:checked + label {
  background: var(--color-primary-normal);
  border: 2px solid var(--color-primary-normal);
  text-shadow: none;
  color: #ffffff;
}

.form-element label:hover {
  border: 2px solid var(--color-primary-normal);
  color: var(--color-primary-normal);
}
[id*="_smsOptionsDiv"] {
  width: var(--column-width-full) !important;
  min-width: var(--column-width-full) !important;
  background-color: transparent !important;
  display: flex !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

[id*="_smsOptionsOuterDiv"] {
  width: var(--column-width-full);
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .page-ApplicantNewInitial .fiviPhoneControl label,
  .page-ApplicantNewInitial .TwoControls label {
    bottom: unset !important;
  }
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  #pnlProveContainer {
    width: 100vw;
    padding: 0 1em;
  }
}

/*
	9.5 Applicant New Contact
*/
.page-ApplicantNewContact #tbPhone1.fiviPhoneControl {
  width: var(--column-width-full) !important;
  max-width: var(--column-width-full) !important;
}

.page-ApplicantNewContact #tbPhone1 input {
  width: var(--column-width-full) !important;
  max-width: var(--column-width-full) !important;
}

.page-ApplicantNewContact #tbPhone2 input {
  /* width: 70% !important; */
  /* max-width: 70% !important; */
}

.page-ApplicantNewContact #tbPhone2 select {
  /* width: 25% !important; */
  /* max-width: 25% !important; */
}

.page-ApplicantNewContact #tbPhone2 select option[value="3"] {
  display: none;
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .page-ApplicantNewContact #tbPhone2 input {
    width: var(--column-width-full) !important;
    max-width: var(--column-width-full) !important;
  }

  .page-ApplicantNewContact #tbPhone2 select {
    width: var(--column-width-full) !important;
    max-width: var(--column-width-full) !important;
  }
}

/*
	9.6 Application Summary
*/

.page-ApplicationSummary {
  width: var(--column-width-8);
}

.page-ApplicationSummary .flex-row {
  flex-wrap: nowrap;
}

#pnlApplicationSummaryHasJointOwners .fiviMultiInput,
#pnlApplicationSummaryHasBeneficiaries .fiviMultiInput,
#pnlApplicationSummaryNoJointOwners .fiviMultiInput,
#pnlApplicationSummaryNoBeneficiaries .fiviMultiInput {
  flex-direction: column;
}

@media all and (max-device-width: 834px), all and (max-width: 834px) {
  .page-ApplicationSummary .flex-row {
    flex-wrap: wrap;
  }
}

/*
	9.7 Funding Method
*/

#pnlSelectFundingMethodOptions .section-container {
  padding: 0 !important;
}

#rbACHFunding_RadioButton,
#rbCCFunding_RadioButton,
#rbCashFunding_RadioButton,
#rbTransFunding_RadioButton {
  opacity: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 400px !important;
  height: 70px !important;
}

#pnlACHTransfer,
#pnlCreditCard,
#pnlMail,
#pnlTransferFunds,
#pnlACHTransfer .iradio_square-blue,
#pnlACHTransfer .iCheck-helper,
#pnlCreditCard .iradio_square-blue,
#pnlCreditCard .iCheck-helper,
#pnlTransferFunds .iradio_square-blue,
#pnlTransferFunds .iCheck-helper,
#pnlMail .iradio_square-blue,
#pnlMail .iCheck-helper {
  top: 0 !important;
  left: 0 !important;
  width: 400px !important;
  height: 70px !important;
  display: flex !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  max-width: 400px !important;
}

#FundACH,
#FundCC,
#FundTransfer,
#FundCash {
  position: absolute !important;
  display: flex !important;
  width: 400px !important;
  height: 70px !important;
  border: 1px solid var(--color-secondary-normal) !important;
  border-radius: 4px !important;
  background-color: white;
}

.fund-left {
  width: 50px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 1rem !important;
}

.fund-left img {
  width: 40px !important;
  height: 40px !important;
}

.fund-right {
  width: 100%;
  margin: 0 1rem !important;
  display: flex !important;
  align-items: center !important;
}

.fund-right div {
  width: 100%;
}

/*
	9.7 Survey - Pending/Approval
*/

[id$="answerpanel"] span {
  display: flex;
}

[id$="answerpanel"] label {
  padding-left: 2rem;
}
/*
	Pending Page / Approved Page
*/

.page-Pending .flex-row {
  flex-wrap: nowrap;
}

@media all and (max-device-width: 834px), all and (max-width: 834px) {
  .page-Pending .flex-row {
    flex-wrap: wrap;
  }
}

/*
	9.8 Applicant Information
*/

.page-ApplicantInformation #tbPhone1.fiviPhoneControl {
  width: var(--column-width-full) !important;
  max-width: var(--column-width-full) !important;
}

.page-ApplicantInformation #tbPhone1 input {
  width: var(--column-width-full) !important;
  max-width: var(--column-width-full) !important;
}

.page-ApplicantInformation #tbPhone1.fiviPhoneControl {
  width: var(--column-width-full) !important;
  max-width: var(--column-width-full) !important;
}

.page-ApplicantInformation #tbPhone1 input {
  width: var(--column-width-full) !important;
  max-width: var(--column-width-full) !important;
}

.page-ApplicantInformation #tbPhone2 input {
  width: 70% !important;
  max-width: 70% !important;
}

.page-ApplicantInformation #tbPhone2 select {
  width: 25% !important;
  max-width: 25% !important;
}

.page-ApplicantInformation #tbPhone2 select option[value="3"] {
  display: none;
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .page-ApplicantInformation #tbPhone2 input {
    width: var(--column-width-full) !important;
    max-width: var(--column-width-full) !important;
  }

  .page-ApplicantInformation #tbPhone2 select {
    width: var(--column-width-full) !important;
    max-width: var(--column-width-full) !important;
  }
}

/*
	9.9 CD Maintenance - Make Changes
*/
[id^="existingAccountUpdate_"] span {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding-top: 20px;
  align-items: center;
}

[id^="existingAccountUpdate_"] span span:last-of-type {
  width: 10%;
}

[id^="existingAccountUpdate_"] span label {
  width: 75%;
  padding-left: 10px;
}

div [id$="_TermDiv"] {
  display: none !important;
}

.UpdateAccountSecondLevel {
  margin-top: 20px;
}

/*
    10. ControlID Specific
*/
#tbCamera {
  display: none;
  max-width: var(--fiviInput-width);
  width: 100%;
}

#tbCamera #lblLicenseScan {
  display: block;
  left: 0;
  transform: none;
  margin: 0 auto;
}

@media all and (max-device-width: 834px), all and (max-width: 834px) {
  #tbCamera {
    display: block;
    max-width: var(--column-width-full);
    width: fit-content !important;
  }
}

/*
	Progress Bar
*/
#progBar {
  width: var(--column-width-12);
  display: flex;
  height: 0.5rem;
}

.progress-bar-outer {
  width: var(--column-width-full);
  height: 0.5rem;
}

.progress-bar-inner {
  background-color: var(--color-secondary-normal);
}

#progBar td {
  font-size: 0;
}

/*
	8.13 fiVISION_DocumentListV2
*/
.fiviDocumentList {
  max-width: var(--column-width-10);
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--gap-vertical-75);
}

.fiviDocumentList > input:first-of-type {
  align-self: center;
}

.fiviDocumentList table {
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid var(--color-black-normal);
  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 > tbody {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.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-gray-light);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.fiviDocumentList table > tbody > tr:nth-of-type(odd) {
  background-color: white !important;
}

.fiviDocumentList table > tbody > 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 th,
.fiviDocumentList table td {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--column-width-3);
  width: 100%;
  padding: calc(var(--gap-horizontal) / 2) 0 !important;
  background-color: transparent !important;
}

.fiviDocumentList table td {
  border: none !important;
}

.fiviDocumentList table th:first-of-type,
.fiviDocumentList table td:first-of-type {
  justify-content: flex-start;
}

.fiviDocumentList table th:last-of-type,
.fiviDocumentList table td:last-of-type {
  display: flex;
  flex-direction: column;
  max-width: var(--column-width-4);
  width: 100%;
  background-color: transparent !important;
}

.fiviDocumentList table td:last-of-type > br {
  display: none;
}

.fiviDocumentList .DefaultTooltipClass {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--column-spacer);
  height: var(--input-height);
  margin: calc(var(--gap-horizontal) * 0.5) 0 !important;
  position: absolute;
  top: 0;
  right: 0;
}

.fiviDocumentList .ng-modal-dialog {
  left: 0;
  width: var(--column-width-6) !important;
}

.fiviDocumentList .ng-modal-dialog-content {
  padding: var(--column-spacer);
}

.fiviDocumentList .ModalContent > div {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
}

.fiviDocumentList .ModalContent br {
  display: none;
}

.fiviDocumentList .ModalContent > div > .modal-header {
  padding: 0;
}

.fiviDocumentList .ModalContent > div > .modal-header .close {
  font-size: var(--font-size-h1);
  color: var(--color-black-dark);
  opacity: 1;
}

.fiviDocumentList .ModalContent > div > .modal-header .close:hover {
  opacity: 0.5;
}

.fiviDocumentList .ModalContent > div .modal-body-insideItem {
  text-align: left;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--gap-horizontal-50);
}

.fiviDocumentList .ModalContent > div .text-muted {
  font-size: var(--font-size);
  color: var(--font-color);
  line-height: var(--font-lineheight);
}

.fiviDocumentList .ModalContent > div .text-muted > br {
  display: inline-block;
}

.fiviDocumentList .ModalContent #qrcode {
  margin: 0 !important;
}

.fiviDocumentList .ModalContent #UploadWrapper > div:nth-of-type(2) {
  margin: 0 !important;
  height: auto !important;
  border: none !important;
  text-align: left !important;
}

.fiviDocumentList .ModalContent #UploadWrapper > div:nth-of-type(2) > span {
  font-size: var(--font-size-h2) !important;
  color: var(--font-color-h2) !important;
  line-height: var(--font-lineheight-h2) !important;
  font-weight: var(--font-weight-h2);
  padding: 0 !important;
  text-align: left !important;
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fiviDocumentList table.V3StatusCenterTableClass thead {
    display: none;
  }

  .fiviDocumentList table > tbody > tr.DocUploadHeadClass {
    display: none;
  }

  .fiviDocumentList table > tbody > tr {
    flex-direction: column;
    padding: calc(var(--column-spacer) / 2);
    gap: calc(var(--column-spacer) / 2);
  }

  .fiviDocumentList table > tbody > tr > td {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    padding: 0 !important;
  }

  .fiviDocumentList table > tbody > tr > td::before {
    font-size: var(--font-size-h3);
    line-height: var(--font-lineheight-h4);
    color: var(--font-color-h4);
    font-weight: var(--font-weight-h4);
    font-family: var(--font-family-h4);
  }

  .fiviDocumentList table > tbody > tr > td:nth-of-type(1):before {
    content: "Applicant Name";
  }

  .fiviDocumentList table > tbody > tr > td:nth-of-type(2):before {
    content: "Document Type";
  }

  .fiviDocumentList table > tbody > tr > td:nth-of-type(3) {
    max-width: 100%;
  }

  .fiviDocumentList .DefaultTooltipClass {
    position: relative;
    height: fit-content;
    margin: var(--gap-vertical-25) 0 !important;
  }

  .fiviDocumentList > input:first-of-type {
    display: none !important;
  }
}

/*
	Disclosures List
*/
.fiviDisclosureList {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
}

.fivi-disclosure-modal > .fiviDisclosure-checkbox-container {
  display: flex;
  gap: var(--gap-horizontal-50);
  align-items: center;
}

.fivi-disclosure-modal > .fiviDisclosure-modal-button {
  margin-bottom: var(--gap-vertical-50);
}

.fivi-disclosure-modal > .fiviDisclosure-checkbox-container > i {
  padding: 0 !important;
  color: var(--color-secondary-dark) !important;
}

.fivi-disclosure-modal .modal-dialog {
  width: 70% !important;
}

.fivi-disclosure-modal .modal-body > div:last-of-type {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: 0 var(--gap-horizontal);
}

.fivi-disclosure-modal .modal-header {
  font-size: var(--font-size-h3);
  line-height: var(--font-lineheight-h4);
  color: var(--font-color-h4);
  font-weight: var(--font-weight-h4);
  font-family: var(--font-family-h4);
}

/*
    8.15 fiVISION_IDAuthenticationQuestions
*/
.fiviIDAuth {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap-vertical-75) var(--gap-horizontal-25);
  width: 100%;
}

.fiviIDAuth br {
  display: none;
}

.fiviIDAuth > span:has(label) {
  display: flex;
  gap: var(--gap-horizontal-25);
  max-width: 95%;
  width: fit-content;
  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;
}

.fiviIDAuth > span:has(b) {
  width: fit-content;
}

.fiviIDAuth > div:has(table) {
  width: 100%;
}

.fiviIDAuth tbody {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-25);
}

.fiviIDAuth tbody td {
  display: flex;
  align-items: center;
  gap: var(--gap-horizontal-25);
}

.fiviIDAuth tbody td > label {
  font-size: var(--font-size-label);
  font-weight: 400;
  line-height: var(--font-size-label);
  color: var(--font-color-label);
  font-family: var(--font-family-label);
}

/*
	8.16 fiVISION_ProductFundingV2
*/
.fiviProductFunding {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-75);
  max-width: var(--column-width-6);
  width: 100%;
}

.fiviProductFunding > .fiviProductFundingItem,
.fiviProductFunding > .fiviFundingAmount {
  margin: 0;
  padding: 0;
  width: 100%;
}

.fiviProductFunding > .fiviProductFundingItem > .fiviInput {
  max-width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--column-spacer);
}

.fiviProductFunding > .fiviProductFundingItem > .fiviInput > input,
.fiviProductFunding > .fiviProductFundingItem > .fiviInput > label {
  margin-top: 0;
  max-width: var(--column-width-3);
}

.fiviProductFunding > .fiviProductFundingItem > .fiviInput > label {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-25);
}

.fiviProductFundingItem > .fiviInput > label:after {
  content: "funding required";
  color: var(--color-secondary-dark);
  font-size: calc(var(--font-size) - 4px);
  font-style: italic;
  padding-left: var(--gap-horizontal-50);
}

.fiviProductFundingItem > .fiviInput:has(> input[min="0"]) > label:after {
  content: "funding optional";
  color: var(--color-primary-dark);
}

.fiviProductFunding > .fiviProductFundingItem > .fiviInput > .CtlValidator {
  left: -5px;
}

.fiviProductFunding > .fiviFundingAmount {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--color-primary-dark);
  padding-top: var(--gap-vertical-50);
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .fiviProductFunding > .fiviProductFundingItem > .fiviInput {
    flex-direction: column;
    gap: var(--gap-vertical-50);
  }
}

/*
    8.17 fiVISION_ACH
*/
.fiviACHControl > span[id*="_Consent"] {
  max-width: 100%;
  width: 100%;
  order: 7;
}

.fiviACHControl > span[id*="_tbFirstName"] {
  order: 1;
}

.fiviACHControl > span[id*="_tbLastName"] {
  order: 2;
}

.fiviACHControl > span[id*="_tbRoutingNumber"] {
  order: 3;
}

.fiviACHControl > span[id*="_tbAccountNumber"] {
  order: 4;
}

.fiviACHControl > .fiviACHStatus {
  order: 5;
}

.fiviACHControl > .fiviACHcbCont {
  order: 6;
}

.fiviACHControl > .fiviACHStatus,
.fiviACHControl > .fiviACHcbCont {
  max-width: var(--fiviInput-width);
  width: 100%;
}

.fiviACHControl > .fiviACHStatus > span {
  font-size: calc(var(--font-size) - 2px);
  line-height: var(--font-lineheight);
  font-weight: 400 !important;
  font-style: italic;
}

.fiviACHControl > .fiviACHcbCont {
  display: flex;
  flex-direction: row;
  gap: var(--column-spacer);
}

.fiviACHControl > .CtlValidator {
  top: var(--input-marginTop-forLabelFocusSpace);
  bottom: unset;
  z-index: 5;
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fiviACHControl > span[id*="_tbAccountNumber"] {
    order: 5;
  }

  .fiviACHControl > .fiviACHStatus {
    order: 4;
  }

  .fiviACHControl > .fiviACHcbCont {
    order: 6;
  }
}

/*
    8.18 fiVISION_CreditCardV2
*/
.fiviCreditCardControl > .fiviCCCardInfo > .DefaultAddressVerifyingClass {
  position: absolute;
  left: var(--fiviInput-width);
  transform: translateX(-100%);
  font-size: calc(var(--font-size) - 2px);
  display: none;
}

.fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput {
  gap: var(--gap-vertical-25) 0;
}

.fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > label {
  position: relative;
  bottom: unset;
}

.fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > select,
.fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > .TwoControls {
  width: calc(var(--fiviInput-width) / 3) !important;
  margin: 0 1rem 0 0;
}

.fiviCreditCardControl
  > .fiviCCCardInfo
  > .fiviTwoInput
  > .TwoControls
  > .DefaultTooltipClass {
  right: var(--gap-horizontal-25);
  height: var(--input-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fiviCreditCardControl
  > .fiviCCCardInfo
  > .fiviTwoInput
  > select:nth-of-type(1) {
  border-radius: 4px;
}

.fiviCreditCardControl
  > .fiviCCCardInfo
  > .fiviTwoInput
  > select:nth-of-type(2) {
  border-radius: 4px;
}

.fiviCreditCardControl
  > .fiviCCCardInfo
  > .fiviTwoInput
  > .TwoControls
  > input {
  margin: 0 1rem;
  border-radius: 4px;
}

/*
	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;
}

/*
	11. Admin Console
*/

.layout.AdminConsole {
  min-height: auto;
}

.layout.AdminConsole > header,
.layout.AdminConsole > footer {
  display: none;
}

/*
    11. Admin Console
*/

.layout.AdminConsole {
  min-height: auto;
}

.layout.AdminConsole > header,
.layout.AdminConsole > footer,
.layout.AdminConsole .progress-container {
  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%;
}

/* Branch Workflow */

/*
    fiVISION_PersonSearch
*/

.fiviPersonSearch {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  width: 100%;
}

.fiviPersonSearch .fiviInput.fiviTextBox:nth-of-type(1),
.fiviPersonSearch .fiviInput.fiviTextBox:nth-of-type(2) {
  display: block;
  width: 100%;
  margin-bottom: 12px;
}
.fiviPersonSearch .fiviInput.fiviTextBox input.form-control {
  width: 100%;
}

.fiviPersonSearch .form-inline {
  display: flex;
  flex-direction: row !important;
  gap: 1em;
}

.fiviPersonSearch .form-inline .fiviInput,
.fiviPersonSearch .form-inline .fiviTextBox {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}

.fiviPersonSearch .fiviCenterBtn .defaultnextbutton {
  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-primary-normal);
	color: white;
	border: 2px solid var(--color-primary-normal); */
  /* border-radius: 5px; */
  font-size: 15px;
  line-height: 18px;
  font-weight: 400;
  box-shadow: none;
  transition-duration: 500ms;
  transition-property: border-radius, color, background-color;
  text-decoration: none;
}

.AdminConsole .column-width-10 {
  word-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
  display: block !important;
  overflow-wrap: break-word !important;
}

.cbVerify {
  display: flex;
  gap: 10px;
  font-size: 18px;
}