/*
        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
	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: #8d93b2;
  --color-gray-normal: #696f8c;
  --color-gray-dark: #4e4c55;
  --color-black-light: #33374d;
  --color-black-normal: #101325;
  --color-black-dark: #0b0e1e;
  /*client colors*/
  --color-primary-light: #ff9d85;
  --color-primary-normal: #ff7552;
  --color-primary-dark: #cb5756;
  --color-secondary-light: #3c7ccd;
  --color-secondary-normal: #21253d;
  --color-secondary-dark: #0b0e1e;
  --color-tertiary-light: #10b981;
  --color-tertiary-normal: #059669;
  --color-tertiary-dark: #047857;
  --color-quaternary-light: #fcd34d;
  --color-quaternary-normal: #fbbf24;
  --color-quaternary-dark: #f59e0b;
  /*font family*/
  --font-family-pri: "IBM Plex Sans", sans-serif;
  --font-family-alt: "Lato", 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-pri);
  /*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-alt);
  /*title font*/
  --font-size-title: 32px;
  --font-lineheight-title: 34px;
  --font-color-title: var(--color-gray-dark);
  --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(--font-color-light);
  --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-input);
  /*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-75: calc(var(--gap-horizontal) * 0.75);
  --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;
    --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
*/
* {
  box-sizing: border-box;
}

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);
  margin: 0;
  padding: 0;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

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-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 {
  color: var(--color-primary-light);
}

a:hover {
  text-decoration: underline;
  color: var(--color-primary-normal);
  cursor: pointer;
}

a:visited,
a:focus {
  color: var(--color-primary-normal);
}

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

label {
  font-weight: var(--font-weight-label);
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  --webkit-appearance: button;
  cursor: pointer;
}

fieldset {
  margin: 0;
  min-inline-size: unset;
  margin-inline: 0;
  border: none;
  padding-block: unset;
  padding-inline: unset;
}

:focus-visible {
  outline: none;
}

.glyph {
  font-family: Arial, Helvetica, sans-serif;
}

/*
    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-no-wrap {
  flex-wrap: nowrap;
}

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

.flex-gap-25 {
  gap: var(--gap-vertical-25) var(--gap-horizontal) !important;
}

.flex-gap-50 {
  gap: var(--gap-vertical-50) var(--gap-horizontal) !important;
}

.flex-gap-75 {
  gap: var(--gap-vertical-75) var(--gap-horizontal) !important;
}

.flex-gap-100 {
  gap: var(--gap-vertical) var(--gap-horizontal) !important;
}

.flex-gap-150 {
  gap: var(--gap-vertical-150) var(--gap-horizontal) !important;
}

.flex-gap-200 {
  gap: var(--gap-vertical-200) var(--gap-horizontal) !important;
}

/*
    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: var(--font-lineheight-title);
  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: var(--font-lineheight);
  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%;
}

.page-text,
.page-text-small,
.page-text-large {
  & > b,
  & > strong {
    font-weight: 500;
  }
}

.header-container .page-text-large {
  color: var(--color-gray-light);
  font-size: calc(var(--font-size) + 6px);
  font-weight: 500;
  letter-spacing: 1px;
}

.no-wrap {
  white-space: nowrap;
  text-wrap: nowrap;
  width: fit-content;
}

.spacer-vertical {
  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: 1px solid var(--border-color);
}

.mobile-visible-only,
.hidden {
  display: none;
}

.fiviNewLine {
  display: none !important;
}

.fiviHide {
  display: none !important;
}

.fiviTransparent {
  color: transparent;
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .page-text-small {
    font-size: calc(var(--font-size) - 2px);
  }

  .mobile-visible-only {
    display: flex;
  }
}

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

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

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
*/
/*
    3.3 Main Styling
*/
main:has(.hide-all-progress-bars) {
  justify-content: center;
}

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);
  padding-bottom: var(--gap-vertical);
  margin: 0 var(--gap-horizontal);
  &:has(.hide-all-progress-bars) {
    max-width: var(--column-width-9);
  }
}

main > .layout-container > div:not(.progress-container-main) {
  /*
        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;
}

main > .layout-container > div:has(> .hide-all-progress-bars) {
  padding-top: var(--gap-vertical);
}

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

/*
    4. Page General Containers
*/
.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;
}

.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);
  flex-grow: 1;
}

.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: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: var(--gap-horizontal);
  /* position: absolute; */
  bottom: 0;
  left: 0;
  padding: var(--gap-vertical) var(--gap-horizontal) 0 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-25);
  align-items: flex-start;
}

.navigation-forward-container {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

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

.fivi-input-width {
  max-width: var(--fiviInput-width);
}

.fivi-two-input-container {
  max-width: var(--fiviInput-width);
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  .page-container {
    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;
  }

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

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

@media all and (max-device-width: 420px), all and (max-width: 420px) {
  .navigation-forward-container {
    flex-direction: column;
    flex-direction: column-reverse;
  }
}

/*
    5.1 Button Containers
*/
.add-another-list-container {
  display: flex;
  max-width: 100%;
  width: 100%;
  gap: var(--gap-horizontal-25);
  justify-content: space-between;
  & > .vertical-divider {
    flex-grow: 0;
  }
}

.add-another-list-container > div:has(> .fiviIndividualButton) {
  justify-content: center;
  align-items: center;
}

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

@media (max-device-width: 836px), (max-width: 836px) {
  .add-another-list-container {
    & > .vertical-divider {
      height: 100%;
      width: auto;
      border-top: 0.5px solid var(--border-color);
    }
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .add-another-list-container {
    flex-direction: column;
    gap: var(--gap-horizontal-200);
    & > .vertical-divider {
      display: none;
    }
  }

  .add-another-list-container > div {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    & > * {
      text-align: center;
    }

    & .fiviIndividualHyperlinkList > ul {
      align-items: center;
    }
  }
}

/*
    6. Accordions
*/
#accordion {
  display: flex;
  flex-direction: column;
  max-width: var(--column-width-12);
  width: 100%;
  gap: var(--gap-vertical);
}

.product-service-container {
  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);
}

.product-service-heading {
  display: flex;
  justify-content: flex-start;
  gap: var(--gap-horizontal-25);
  padding: var(--gap-vertical) var(--gap-horizontal) 0 var(--gap-horizontal);
  align-items: center;
  width: 100vw;
  max-width: 100%;
  font-size: var(--font-size-h3);
  line-height: var(--font-size-h3);
  cursor: pointer;
  transition: padding-left 0.35s ease-in-out;
}

.product-service-container > .page-text {
  padding: 0 var(--gap-horizontal);
}

.product-service-heading:not(.force-accordion-expand):before {
  content: "\f061";
  transition: transform 0.35s ease-in-out;
  font-family: FontAwesome;
  font-weight: 400;
}

.product-service-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-75);
  border: none;
  border-radius: 5px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 var(--gap-horizontal);
  transition: all 0.35s ease-in-out;
}

.product-service-container:has(> .force-accordion-expand)
  > .product-service-content {
  height: auto;
  opacity: 1;
}

.product-service-container-expanded {
  outline: none;
  & > .product-service-heading:before {
    transform: rotate(90deg);
  }

  & > .product-service-content {
    opacity: 1;
    padding-bottom: var(--gap-vertical);
  }
}

/*
    7. Inputs and Labels
*/
/*
    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;
}

.tooltip-arrow {
  display: none;
}

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

/*
    7.7 Seperators
*/
.fiviMultiSeperator {
  width: 100%;
  height: 2px;
  margin: var(--gap-vertical-50) 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);
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1px;
}

.divider::before {
  content: "";
  display: block;
  width: var(--column-width-3);
  height: 1px;
  background-color: var(--color-gray-dark);
}

/*
    7.8 Loader
*/
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.loader {
  position: relative;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border: 16px solid #d3d3d3;
  border-radius: 50%;
  border-top: 16px solid #2f80ed;
  width: 100px;
  height: 100px;
  animation: spin 2s linear infinite;
}

.section-container > .loader {
  position: relative;
  left: unset;
  right: unset;
  top: unset;
  margin: 0 auto;
}

/*
	7.9 Popover
*/
.fivisionpopover > .arrow {
  display: none;
}

.fivisionpopover .popover-content {
  font-size: calc(var(--font-size) - 2px);
  font-weight: 500;
  color: red;
  padding: 0;
}

.fivisionpopover {
  position: relative !important;
  top: unset;
  bottom: unset !important;
  box-shadow: none;
  border: none;
  background-color: transparent;
  width: 100vw;
  max-width: var(--fiviInput-width);
  left: 0;
  margin: 0;
  margin-top: var(--gap-vertical-25);
}

/*
    8. fiVISION Controls
*/
/*
    8. fiVISION Controls
*/
/*
	global unsets
*/
.fiviControl:not(.fiviPanel) {
  padding: 0;
  width: auto;
  margin: 0;
}

/*
	fiVISION_Label
*/
.fiviLabelContainer {
  display: inline-flex;
  width: fit-content;
}

.fiviLabelContainer > label {
  font-weight: inherit;
}

.fivilabelcontainer:has(.variable-inline) {
  display: inline !important;
}

/*
	fiVISION_Panel
*/
.fiviHeaderPanelClass {
  display: inherit;
  flex-direction: inherit;
  align-items: inherit;
  justify-content: inherit;
  gap: inherit;
  max-width: inherit;
  width: inherit;
  flex-wrap: inherit;
}

/*
	fiVISION_ButtonV2
*/
.fiviBtnContainer {
}

.fiviBtnContainer .fiviBtnLabel {
  font-size: 18px;
  line-height: 18px;
  font-weight: 500;
}

.button-primary {
  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;
  &:visited {
    color: white;
  }

  &:hover:not(:disabled),
  &:active:not(:disabled),
  &:focus:not(:disabled) {
    border-radius: var(--gap-horizontal);
    text-decoration: none;
    color: white;
  }

  &:disabled {
    opacity: 0.5;
  }
}

.button-other,
.fiviLinkBtn {
  display: inline-flex;
  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-150);
  background-color: var(--background-input-color);
  color: var(--color-primary-normal);
  border: 1px solid var(--color-primary-normal);
  border-radius: 5px;
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  box-shadow: none;
  transition-duration: 500ms;
  transition-property: color, background-color;
  height: var(--input-height);
  cursor: pointer;
  text-shadow: none;
  &:hover:not(:disabled),
  &:active:not(:disabled),
  &:focus:not(:disabled) {
    background-color: var(--color-primary-normal);
    color: var(--color-white-normal);
    box-shadow: none;
    text-decoration: none;
    text-shadow: none;
    border-color: var(--color-primary-normal);
    outline: none;
  }

  &: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: 15px;
  line-height: 18px;
  font-weight: 400;
  height: 34px;
  color: var(--color-primary-normal);
  width: fit-content !important;
  cursor: pointer;
  transition-duration: 500ms;
  transition-property: color, background-color;
  &:hover:not(:disabled),
  &:active:not(:disabled),
  &:focus:not(:disabled) {
    text-decoration: underline;
  }

  &:disabled {
    opacity: 0.5;
  }
}

.button-primary + .fiviBtnLabel,
.button-other + .fiviBtnLabel,
.button-link + .fiviBtnLabel,
.button-link-alt + .fiviBtnLabel {
  cursor: none;
  opacity: 0.5;
}

.fiviLinkButton {
  color: var(--color-primary-normal);
  background: none;
}

/*
	fiVISION_IndividualCommandButtonV2
*/
.fiviIndividualButton > label {
  font-size: 18px;
  line-height: 18px;
  font-weight: 500;
}

/*
	fiVISION_CheckBox
*/
.fiviControl.fiviCheckBox,
.fiviCheckBox {
  display: flex;
  position: relative;
  gap: var(--gap-horizontal-50);
  align-items: center;
  width: 100%;
  max-width: fit-content;
  padding: 0;
  margin: 0;
}

input.DefaultCBControlClassV3 {
  display: none;
}

label.DefaultCBLabelClass {
  display: flex;
  height: auto;
  min-height: var(--column-spacer);
  align-items: center;
  gap: var(--gap-horizontal-50);
  font-weight: 500;
  font-size: var(--font-size-label);
  line-height: var(--font-lineheight-input);
  cursor: pointer;
  position: relative;
  &: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);
  }

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

input.DefaultCBControlClassV3:checked + label.DefaultCBLabelClass:before {
  background-color: var(--color-primary-light);
}

input.DefaultCBControlClassV3:checked + label.DefaultCBLabelClass:after {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-light);
  left: var(--column-spacer);
}

input.DefaultCBControlClassV3:disabled + label.DefaultCBLabelClass {
  cursor: not-allowed;
  &:before {
    cursor: not-allowed;
  }

  &:after {
    cursor: not-allowed;
  }
}

label.checkbox-label {
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
}

/*
	fiVISION_RadioButton
*/
.fiviControl.fiviRadioButton {
  width: 100%;
  max-width: fit-content;
  padding: 0;
  margin: 0;
}

.fiviControl.fiviRadioButton > .fiviRadioButtonContainer,
.fiviControl.fiviRadioButton > .fiviCheckboxContainer {
  width: 100%;
  max-width: fit-content;
  padding: 0;
  margin: 0;
}

.fiviControl.fiviRadioButton > .fiviRadioButtonContainer {
  display: flex;
  gap: var(--gap-horizontal-50);
  align-items: center;
  width: 100%;
  max-width: fit-content;
  padding: 0;
  margin: 0;
}

input.DefaultRBControlClassV3 {
  display: none;
}

input.DefaultRBControlClassV3 + label {
  display: flex;
  height: auto;
  align-items: center;
  gap: var(--gap-horizontal-50);
  font-weight: 500;
  font-size: var(--font-size-label);
  line-height: var(--font-lineheight-input);
  cursor: pointer;
  position: relative;
  &:before {
    content: " ";
    margin: 0;
    min-width: 15px;
    border-radius: 40px;
    height: calc(var(--column-spacer) - 4px);
    position: relative;
    cursor: pointer;
    background-color: var(--color-gray-light);
    transition-duration: 500ms;
    max-width: 15px;
    display: block;
    padding: 4px 25px 0px 8px;
  }

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

input.DefaultRBControlClassV3:checked + label:before,
input.DefaultRBControlClassV3:checked + label:before {
  background-color: var(--color-primary-light);
}

input.DefaultRBControlClassV3:checked + label:after {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-light);
  left: var(--column-spacer);
}

input.DefaultRBControlClassV3:disabled + label {
  cursor: not-allowed;
  &:before {
    cursor: not-allowed;
    content: url("/_assets/layoutcontent/25001/default/lock-closed.svg");
  }

  &:after {
    cursor: not-allowed;
  }
}

/*
	fiVISION_TextBoxV2
*/
.fiviControl.fiviTextBox {
  display: inline-flex;
  width: 100vw;
  max-width: var(--fiviInput-width);
  position: relative;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.fivi-two-input-container .fiviControl.fiviTextBox {
  max-width: var(--fiviInput-width-half);
}

input.form-control,
textarea.form-control,
select.form-control {
  display: flex;
  align-items: center;
  width: 100%;
  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);
  border-radius: 8px;
  background-color: white;
  &:focus,
  &:active,
  &:hover {
    border: 2px solid var(--border-color-focus);
    box-shadow: none;
    color: var(--font-color-label-focus);
  }

  &:disabled {
    cursor: not-allowed;
    background-color: #eee;
  }
}

textarea.form-control {
  padding: var(--gap-horizontal-25) var(--gap-horizontal-25);
}

.fiviControl.fiviTextBox .fiviLabelContainer {
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

.fiviControl.fiviTextBox label.DefaultLabelClass {
  display: flex;
  align-items: center;
  height: var(--input-height);
  position: absolute;
  left: var(--gap-horizontal-50);
  top: var(--input-marginTop-forLabelFocusSpace);
  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;
  pointer-events: none;
}

.fiviControl.fiviTextBox label.FocusLabelClass {
  height: var(--input-focusLabel-fontSize);
  font-size: var(--input-focusLabel-fontSize);
  top: 0 !important;
  /* global.css conflict */
  left: 0;
  font-weight: 500;
}

.fiviTextBox:has(> .fiviValueLabelContainer) {
  flex-direction: column;
  gap: var(--gap-vertical-25);
  & > .fiviLabelContainer {
    position: relative;
    display: block;
    width: auto;
    height: auto;
  }

  & label.DefaultLabelClass {
    position: relative;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
    font-size: var(--input-focusLabel-fontSize);
  }

  & > .fiviValueLabelContainer {
    display: flex;
    align-items: center;
    width: 100% !important;
    height: var(--input-height);
    padding: 0px var(--gap-horizontal-50);
    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(--color-gray-light) !important;
    border-radius: 8px;
    background-color: var(--background-input-color) !important;
    cursor: not-allowed;
    pointer-events: all;
  }

  & .fiviValueLabel {
    cursor: not-allowed;
    pointer-events: all;
  }
}

.fiviControl.fiviTextBox .autocomplete-items:has(> div) {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px 0px;
  border: 1px solid var(--color-gray-dark);
  border-top: none;
  position: absolute;
  left: 0;
  z-index: 2;
  background-color: white;
  & > div {
    font-size: calc(var(--font-size) + 1px);
    line-height: 1.5;
    font-weight: 300;
    padding: 0px 10px;
    cursor: pointer;
    &.autocomplete-active {
      background-color: var(--color-gray-dark);
    }
  }
}

.fiviControl.fiviTextBox .fiviWriteOnlyEditButton {
  position: absolute;
  top: -2px;
  right: 0px;
  font-size: calc(var(--font-size) - 2px);
  font-weight: 600;
  color: var(--color-secondary-dark);
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  background-color: transparent;
  &:active,
  &:hover,
  &:focus {
    text-decoration: underline;
    border-color: transparent;
  }
}

.fiviControl.fiviTextBox .DefaultTooltipClass {
  right: var(--gap-horizontal-25);
  top: calc(var(--input-marginTop-forLabelFocusSpace) + 14px);
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fivi-two-input-container .fiviControl.fiviTextBox {
    max-width: var(--fiviInput-width);
  }
}

/*
	textbox as camera
*/
.fiviTextBox:has(label.MobileScanButton) {
  width: fit-content !important;
}

.fiviTextBox label.MobileScanButton {
  min-height: var(--gap-vertical-200);
  height: 100%;
}

/*
	fiVISION_DropDownV2
*/
.fiviControl.fiviDropDown {
  display: inline-flex;
  width: 100vw !important;
  /* global.css conflict */
  max-width: var(--fiviInput-width);
  position: relative;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.fivi-two-input-container .fiviControl.fiviDropDown {
  max-width: var(--fiviInput-width-half);
}

.fiviControl.fiviDropDown:has(option[value=""]:checked)
  label.DefaultLabelClass {
  display: flex;
  align-items: center;
  height: var(--input-height);
  position: absolute;
  left: var(--gap-horizontal-50);
  top: var(--input-marginTop-forLabelFocusSpace) !important;
  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: top 0.25s ease-in-out, left 0.25s ease-in-out,
    font-size 0.25s ease-in-out, font-weight 0.25s ease-in-out;
  pointer-events: none;
  text-transform: none;
}

.fiviControl.fiviDropDown label.DefaultLabelClass,
.fiviControl.fiviDropDown:has(option[value=""]:checked)
  label.DefaultLabelClass:has(+ select:focus),
.fiviControl.fiviDropDown:has(option[value=""]:checked)
  label.DefaultLabelClass:has(+ select:active),
.fiviControl.fiviDropDown:has(option[value=""]:checked)
  label.DefaultLabelClass:has(+ select:hover) {
  position: absolute;
  height: var(--input-focusLabel-fontSize);
  font-size: var(--input-focusLabel-fontSize);
  color: var(--font-color-input);
  font-weight: 500;
  top: 0 !important;
  /* global.css conflict */
  left: 0;
  transition: top 0.25s ease-in-out, left 0.25s ease-in-out,
    font-size 0.25s ease-in-out, font-weight 0.25s ease-in-out;
}

.fiviControl.fiviDropDown select:has(option[value=""]:checked) {
  color: transparent;
  &:active,
  &:focus,
  &:hover {
    color: var(--font-color);
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fivi-two-input-container .fiviControl.fiviDropDown {
    max-width: var(--fiviInput-width);
  }
}

/*
	fiVISION_MoneyTextBoxV2
*/
.fiviMoneyTextBox {
  display: inline-flex;
  width: 100vw !important;
  /* global.css conflict */
  max-width: var(--fiviInput-width);
  position: relative;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.fivi-two-input-container .fiviMoneyTextBox {
  max-width: var(--fiviInput-width-half);
}

.fiviMoneyTextBox input::placeholder {
  color: transparent;
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fivi-two-input-container .fiviControl.fiviDropDown {
    max-width: var(--fiviInput-width);
  }
}

@media all and (max-device-width: 475px), all and (max-width: 475px) {
  .fivi-two-input-container .fiviMoneyTextBox,
  .fivi-two-input-container .fiviMoneyTextBox > .fiviTextBox {
    max-width: var(--fiviInput-width);
  }
}

/*
	fiVISION_EmailTextBoxV2
*/
.fiviParentControl.fiviEmailTextBox {
  width: 100vw !important;
  /* global.css conflict */
  max-width: var(--fiviInput-width);
}

/*
	fiVISION_DateTextBoxV2
*/
.fiviDateTextBox {
  display: inline-flex;
  width: 100vw !important;
  /* global.css conflict */
  max-width: var(--fiviInput-width);
  position: relative;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.fiviDateTextBox:has(.fiviValueLabelContainer) {
}

/*
	fiVISION_YearsMonthsDurationV2
*/
.fiviYearMonth {
  width: 100vw;
  max-width: var(--fiviInput-width);
  position: relative;
  & label.DefaultLabelClass {
    position: absolute;
    height: var(--input-focusLabel-fontSize);
    font-size: var(--input-focusLabel-fontSize);
    color: var(--font-color-input);
    top: 0 !important;
    /* global.css conflict */
    left: 0;
    font-weight: 500;
    /* text-transform: uppercase; */
  }

  & > .fiviLabelContainer {
    position: absolute;
    height: 100%;
    width: 100%;
  }
}

.fiviYearMonthInputContainer {
  display: flex;
  gap: var(--column-spacer);
  width: 100vw;
  max-width: var(--fiviInput-width);
}

.fiviYearMonthInputContainer .fiviInput {
  width: 100vw;
  max-width: var(--fiviInput-width-half);
  & > .fiviTextBox {
    max-width: 100%;
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fiviYearMonthInputContainer,
  .fiviYearMonth {
    max-width: 100%;
  }

  .fiviYearMonthInputContainer .fiviInput {
    max-width: var(--fiviInput-width);
  }
}

@media all and (max-device-width: 628px), all and (max-width: 628px) {
  .fiviYearMonthInputContainer,
  .fiviYearMonth {
    max-width: var(--fiviInput-width);
  }

  .fiviYearMonthInputContainer .fiviInput {
    max-width: var(--fiviInput-width-half);
  }
}
/*
	fiVISION_PhoneNumberTextBoxV2
*/
.fiviPhoneControl {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--column-spacer);
  width: 100vw !important;
  /* global.css conflict */
  max-width: var(--fiviInput-width);
  margin: 0;
  padding: 0;
}

.fiviPhoneTextBoxSMSOptionsContainer {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
}

.fiviPhoneTextBoxConsentLanguageWrapper {
  display: flex;
  line-height: 1.33;
}

.fiviPhoneTextBoxSMSOptInOptOutRBWrapper {
  display: flex;
  padding: var(--gap-vertical-25);
  gap: var(--gap-vertical-50);
}

/*has preferred flag*/
.fiviPhoneControl:has(> .fiviTextBox + .fiviRadioButton) {
  & > .fiviTextBox {
    max-width: var(--fiviInput-width-half);
  }

  & > .fiviRadioButton {
    max-width: var(--fiviInput-width-half);
    margin-top: var(--input-marginTop-forLabelFocusSpace);
    height: var(--input-height);
    & label {
      font-weight: var(--font-weight-label);
    }
  }
}

/*applicant determined*/
.fiviPhoneControl:has(> .fiviTextBox + .fiviTextBox) {
  & > .fiviTextBox {
    max-width: var(--fiviInput-width-half);
  }
}

/*applicant determined & preferred flag*/
.fiviPhoneControl:has(> .fiviTextBox + .fiviTextBox + .fiviRadioButton) {
  max-width: 100%;
}

@media all and (max-device-width: 808px), all and (max-width: 808px) {
  /*applicant determined*/
  .fiviPhoneControl:has(> .fiviTextBox + .fiviTextBox) {
    max-width: 100%;
    & > .fiviTextBox {
      max-width: var(--fiviInput-width);
    }
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fiviPhoneControl:has(> .fiviTextBox + .fiviTextBox + .fiviRadioButton) {
    flex-wrap: wrap;
    gap: calc(var(--column-spacer) * 0.75);
    & > .fiviTextBox:has(input) {
      max-width: 100%;
    }
  }
}

@media all and (max-device-width: 628px), all and (max-width: 628px) {
  /*applicant determined*/
  .fiviPhoneControl:has(> .fiviTextBox + .fiviTextBox) {
    max-width: var(--fiviInput-width);
    & > .fiviTextBox {
      max-width: var(--fiviInput-width-half);
    }
  }
}

@media all and (max-device-width: 475px), all and (max-width: 475px) {
  .fiviPhoneControl {
    flex-wrap: wrap;
    gap: calc(var(--column-spacer) * 0.75);
  }

  /*has preferred flag*/
  .fiviPhoneControl:has(> .fiviTextBox + .fiviRadioButton) {
    & > .fiviTextBox {
      max-width: var(--fiviInput-width);
    }

    & > .fiviRadioButton {
      margin-top: 0;
      height: 100%;
    }
  }

  /*applicant determined*/
  .fiviPhoneControl:has(> .fiviTextBox + .fiviTextBox) {
    & > .fiviTextBox {
      max-width: var(--fiviInput-width);
    }
  }
}

/*
    fiVISION_ErrorSummary
*/
.error-container,
.fiviErrorSummary {
  display: none;
}

.fiviErrorSummary:has(div) {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-25);
  width: 100vw;
  max-width: 100%;
}

.error-container:has(> .fiviErrorSummary > div) {
  display: block;
  width: 100vw;
  max-width: 100%;
}

.fiviErrorSummary > div {
  font-size: var(--font-size);
  line-height: var(--font-lineheight);
  font-weight: 500;
  color: red;
  margin-bottom: 0;
  list-style: none;
  text-align: center;
}

/*
	fiVISION_LinkHistory
*/
.fiviLinkHistory {
  display: flex;
  flex-direction: column;
  width: fit-content;
  padding: 0;
  margin: 0;
  gap: var(--gap-vertical-25);
}

.fiviLinkHistory > a {
  font-size: calc(var(--font-size) + 2px);
  cursor: pointer;
}

.fiviLinkHistory .fivisionpopover {
  position: relative !important;
  width: 100%;
  bottom: unset !important;
  text-align: center;
}

/*
	fiVISION_AddressTextBoxV2
*/
.flex-row:has(> .address-container) {
  gap: var(--gap-horizontal-150);
}

.address-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-horizontal-50);
  width: 100vw;
  max-width: 100%;
}

.fiviAddressControl {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--column-spacer);
}

.fiviAddressInputs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--column-spacer);
  width: 100%;
}

.fiviAddressValidation {
  margin-top: -15px;
  & > label {
    font-size: calc(var(--font-size) - 2px);
    line-height: var(--font-lineheight);
    font-weight: 400;
    text-align: center;
  }
}

.fiviAddressControl .fiviCheckbox {
  max-width: 100%;
  & > label {
    text-wrap: nowrap;
    white-space: nowrap;
  }
}

.fiviAddressControl .fiviCheckbox label {
  font-size: calc(var(--font-size-label) - 2px);
  line-height: var(--font-lineheight);
}

/*
	fiVISION_ProveIndividualLookup
*/
.fiviProve,
.fiviProve > div:not(.prove-direction-buttons) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap-vertical);
  width: 100%;
}

.fiviProve input::placeholder {
  color: transparent;
}

.fiviProve .fiviPhoneControl,
.fiviProve .fiviControl {
  max-width: 100%;
}

.prove-direction-buttons {
  gap: var(--gap-horizontal);
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  margin-top: var(--gap-vertical);
  align-items: center;
  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%;
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .prove-direction-buttons {
    flex-direction: column;
    & .button-link {
      text-align: center;
    }
  }
}

/*
	fiVISION_IDTypeV2
*/
.fiviIdType {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
  width: 100vw;
  max-width: 100%;
}

.fiviIdType > .fiviDateTextBox {
  max-width: var(--fiviInput-width-half);
  & > .fiviTextBox {
    max-width: 100%;
  }
}

.fiviIdTypeState,
.fiviIdTypeCountry {
  width: 100vw;
  max-width: var(--fiviInput-width);
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fiviIdType > .fiviDateTextBox {
    max-width: var(--fiviInput-width);
    & > .fiviTextBox {
      max-width: 100%;
    }
  }
}

/*
	fiVISION_EmploymentHistory
*/
.fiviEmploymentHistory {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical) var(--fiviInput-horizontal-spacing);
  width: 100vw;
  max-width: 100%;
}

.fiviEmpHistLblContainer label {
  line-height: var(--font-lineheight);
  font-weight: 400;
  color: var(--font-color);
  width: 100%;
}

.fiviEmpHistInputContainer {
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer);
  width: 100vw;
  max-width: 100%;
  /* margin-top: -12px; */
  & > .fiviMultiInput {
    display: flex;
    gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
    flex-wrap: wrap;
    width: 100vw;
    max-width: 100%;
    & > div {
      max-width: 100%;
    }
  }

  & .fiviEmpHistIncomeContainer {
    display: flex;
    gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
    flex-wrap: wrap;
    width: 100vw;
    max-width: 100%;
    & .fiviMoneyTextBox,
    & .fiviMoneyTextBox > .fiviTextBox,
    & .fiviNumericTextBox,
    & .fiviNumericTextBox > .fiviTextBox {
      width: 100vw;
      max-width: var(--fiviInput-width-half);
    }

    & .fiviDropDown {
      order: -1;
    }
  }
}

.fiviEmploymentHistory .fiviRemoveBtn {
  order: 2;
}

.fiviEmploymentHistory .fiviRemoveBtn:not(:has(> button)) {
  display: none;
}

.fiviEmploymentHistory .fiviRemoveBtn > button:before {
  /* content: "Remove Prior Employer"; */
}

.fiviEmpHistBtnContainer,
.fiviEmploymentHistory .fiviRemoveBtn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100vw;
  max-width: 100%;
}

.fiviEmploymentHistory .fiviRemoveBtn {
  justify-content: flex-start;
  order: 2;
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .fiviEmpHistInputContainer {
    & .fiviEmpHistIncomeContainer {
      & .fiviMoneyTextBox,
      & .fiviMoneyTextBox > .fiviTextBox,
      & .fiviNumericTextBox,
      & .fiviNumericTextBox > .fiviTextBox {
        width: 100vw;
        max-width: var(--fiviInput-width);
      }
    }
  }
}

@media all and (max-device-width: 628px), all and (max-width: 628px) {
  .fiviEmpHistBtnContainer,
  .fiviEmploymentHistory .fiviRemoveBtn {
    justify-content: center;
    max-width: var(--fiviInput-width);
    & .button-link {
      text-align: center;
    }
  }
}

/*
	fiVISION_IndividualIncome
*/
.fiviIndividualIncome {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
  width: 100vw;
  max-width: 100%;
}

.fiviIndividualIncome > div {
  display: flex;
  gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
  flex-wrap: wrap;
  width: 100vw;
  max-width: fit-content;
  position: relative;
  & > .fiviDropDown {
    order: -1;
  }

  & .fiviIndividualIncomeRemoveButtonContainer:not(:has(> button)) {
    display: none;
  }

  & .fiviIndividualIncomeRemoveButtonContainer:has(> button) {
    width: 100%;
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: flex-start;
    & > button {
      border: none;
      background-color: transparent;
      font-size: 15px;
      line-height: 18px;
      font-weight: 400;
      padding: 2px 0 0 0;
      display: flex;
      align-items: center;
      color: var(--color-primary-normal);
      &:hover {
        text-decoration: underline;
        color: var(--color-primary-normal);
      }
    }
  }
}

.fiviIndividualIncome > .fiviBtnContainer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100vw;
  max-width: 100%;
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  .fiviIndividualIncome > div {
    max-width: 100%;
    & > .fiviMoneyTextBox,
    & > .fiviControl.fiviDropDown,
    & > .fiviNumericTextBox,
    & > .fiviNumericTextBox > .fiviControl.fiviTextBox {
      max-width: var(--fiviInput-width);
      & > .fiviTextBox {
        max-width: 100%;
      }
    }
  }
}

@media all and (max-device-width: 628px), all and (max-width: 628px) {
  .fiviIndividualIncome > .fiviBtnContainer,
  .fiviIndividualIncome
    > div
    .fiviIndividualIncomeRemoveButtonContainer:has(> button) {
    justify-content: center;
  }
}

/*
	fiVISION_IndividualDetails
*/
.fiviIndividualDetails {
  width: 100vw;
  max-width: 100%;
}

.fiviIndividualDetails > div:not(.fiviIndDetailTitle) {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
  width: 100vw;
  max-width: 100%;
  margin-bottom: 1.25em;
}

.fiviIndividualDetails br {
  display: none;
}

/*name*/
.fiviIndividualDetails > div > span:first-of-type > label {
  font-size: calc(var(--font-size) + 2px);
  font-weight: 500;
  margin-bottom: var(--gap-vertical-25);
  margin-left: 0;
}

.fiviIndividualDetails > div > div:has(> label) {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
}

.fiviIndividualDetails > div > div > label {
  font-weight: 500;
}

.fiviIndividualDetails > div > div:has(> label) > div {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-25);
  margin-left: var(--gap-horizontal-25);
  font-weight: 400;
}

/*
	fiVISION_ProductsAndServicesSelected
*/
.fiviProductsAndServicesSelected {
  display: flex;
  flex-direction: column;
  width: 100vw;
  max-width: 100%;
  gap: var(--gap-vertical-25);
  font-size: calc(var(--font-size) + 2px);
  font-weight: 600;
}

.fiviProductsAndServicesSelected > div > ul {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-25) 1px;
  flex-wrap: wrap;
  font-weight: 400;
  font-size: calc(var(--font-size) + 2px);
  margin: 0 0 var(--gap-vertical-25) 0;
  & > li > b {
    font-weight: 500;
  }
}

.fiviProductsAndServicesSelected > div > i {
  display: block;
  font-size: calc(var(--font-size) + 2px);
  margin-bottom: var(--gap-vertical-25);
  font-style: normal;
}

.fiviProductsAndServicesSelected > div > i:before {
  content: "Selected ";
}

.fiviProductsAndServicesSelected > ul {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-25);
  font-weight: 400;
  padding: 0;
  margin: 0 0 0 var(--gap-horizontal-25);
  font-size: var(--font-size);
  list-style: none;
}

/* Application Summary page */
/* Indent product services */
.page-ApplicationSummary .fiviProductsAndServicesSelected div ul div li {
  margin-left: 2em;
}

.fiviProductRelationship {
  width: 100%;
}

.fiviProductRelationship table {
  margin: 0;
  border: 1px solid var(--color-gray-dark);
  border-radius: 5px;
  box-shadow: none;
  width: 100%;
  min-width: 410px;
}

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

.fiviProductRelationship table > tbody > tr,
.fiviProductRelationship table > thead > 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-dark);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.fiviProductRelationship table > tbody > tr,
.fiviProductRelationship table > thead > tr {
  background-color: white;
}

.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: var(--gap-horizontal) 0 !important;
  background-color: transparent !important;
}

.fiviProductRelationship table td.fiviTableRowHeader {
  justify-content: flex-start;
  padding-left: 5px !important;
}

.fiviProductRelationship table .fiviApplicantNameColumn {
  display: flex;
  flex-direction: column;
}

.fiviProductRelationship table .fiviApplicantNameColumn .fiviTableSubHeader {
  font-weight: 300;
  font-size: 13px;
}

@media all and (max-device-width: 650px), all and (max-width: 650px) {
  .fiviProductRelationship table {
    font-size: 13px;
  }

  .fiviProductRelationship {
    /* solution for mobile */
    overflow-x: scroll !important;
  }

  .fiviProductRelationship table > tbody > tr,
  .fiviProductRelationship table > thead > tr {
    padding: 5px 3px;
  }

  .fiviProductRelationship table .fiviApplicantNameColumn {
    font-size: 12px;
    word-break: break-all;
    margin: 4px;
    .fiviTableSubHeader {
      font-weight: 300;
      font-size: 11px;
    }
  }
}

/* Application Summary page */
/* Indent product services */
.page-ApplicationSummary .fiviProductsAndServicesSelected div ul div li {
  margin-left: 2em;
}

/*
	fiVISION_ProductsAndServicesV2
*/
.fiviProductServices {
  padding-bottom: var(--gap-vertical);
}

.certificate-deposit-products .fiviProductServices {
  padding-bottom: 0;
}

.fiviProductServices,
.product-services-default-mode-container {
  display: flex !important;
  /* global.css conflict */
  flex-direction: column !important;
  /* global.css conflict */
  gap: var(--gap-horizontal);
  width: 100vw;
  max-width: 100%;
  height: 100%;
}

.fiviProdGroup,
.fiviServGroup {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: var(--column-width-12);
  width: 100%;
  gap: var(--gap-vertical);
}

.fiviProductServices > div div {
  padding: 0 !important;
  /* global.css conflict */
}

.fiviProductServices .fiviProdServ:not(.fiviProductServicesFilterBar) {
  display: flex;
  flex-direction: column;
  /* height: 100%; */
  gap: var(--gap-vertical-50);
  max-width: 100%;
  width: 100vw;
  /* min-height: 100px; */
  padding: 0 !important;
  /* global.css conflict */
  position: relative;
  background: white;
  border-radius: 3px;
  box-shadow: none;
  background-color: transparent;
}

.fiviProductServices .fiviProdServ:not(:last-child),
.product-service-content[productgroup="certificate"]
  .fiviProductServices
  .fiviProdServ:last-child {
  padding-bottom: var(--gap-vertical) !important;
  border-bottom: 1px solid var(--border-color);
}

.fiviProductServices .fiviProdServ > .fiviRadioButton .fiviCheckBox,
.fiviProductServiceDisplay > .fiviRadioButton .fiviCheckBox {
  flex-direction: row;
  justify-content: flex-start;
  width: 100vw;
  max-width: 100%;
  & > label {
    width: fit-content;
    height: auto;
    order: 0;
  }

  & > .DefaultTooltipClass {
    position: relative;
    order: 1;
  }

  & > input {
    order: 2;
    margin-left: auto;
  }
}

.fiviProductServices .fiviProdServ > .fiviRadioButton .fiviCheckBox {
  & > label {
    font-size: calc(var(--font-size-label) + 4px);
    font-weight: 400;
    height: auto;
  }
}

.fiviProductServiceDisplay > .fiviRadioButton .fiviCheckBox {
  & > label {
    font-size: calc(var(--font-size-label) + 2px);
    font-weight: 400;
  }
}

.fiviProductAdditionalOptions {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  max-width: 100%;
  & > .fiviTextBox,
  & > .fiviNumericTextBox {
    width: 100vw;
    max-width: var(--fiviInput-width);
  }
}

.fiviProductMoreInfo {
  display: none;
  width: 100vw;
  max-width: 100%;
  margin: 0;
  line-height: var(--font-lineheight);
}

.fiviProductMoreInfo:has(> span > a),
.fiviProductMoreInfo:has(> span > div > *) {
  display: flex;
}

.fiviProductServices div.fiviProductAdditionalOptions {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical) var(--gap-horizontal-50);
}

.fiviProductServices > div div.fiviProdServGroup {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical);
  width: 100vw;
  max-width: 100%;
  padding: var(--gap-vertical-50) var(--gap-vertical) var(--gap-vertical-50)
    var(--gap-vertical) !important;
}

.fiviProductServiceDisplay {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
  width: 100vw;
  max-width: 100%;
}

.fiviProductServiceMoreInfo {
  display: none;
}

.fiviProductServiceMoreInfo:has(> span > a),
.fiviProductServiceMoreInfo:has(> span > div > *) {
  display: flex;
}

.fiviProdServ.fiviProductServicesFilterBar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  border-bottom: none;
  padding-bottom: var(--gap-vertical) !important;
  & input.form-control,
  & select.form-control {
    background-color: white !important;
  }

  & .fiviCheckbox {
    padding-top: var(--input-marginTop-forLabelFocusSpace);
    justify-self: flex-end;
  }

  & > .fiviControl {
    width: 100vw;
    max-width: calc(var(--fiviInput-width) * 0.75);
    & > .fiviControl {
      max-width: 100%;
    }
  }
}

.fiviProductServices > div div.fiviProductAddAnotherContainer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100vw;
  max-width: 100%;
  order: 2;
  padding-top: var(--gap-vertical-50) !important;
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fiviProdServ.fiviProductServicesFilterBar {
    > .fiviControl {
      width: 100vw;
      max-width: var(--fiviInput-width);
    }
  }
}

/*
	fiVISION_IndividualHyperlinkList
*/
.fiviIndividualHyperlinkList {
  width: 100vw;
  max-width: 100%;
  & > ul {
    margin: 0;
    padding-left: var(--gap-vertical-50);
    display: flex;
    flex-direction: column;
    gap: var(--gap-vertical-25);
    & > li {
      margin: 0;
      display: flex;
      gap: var(--gap-horizontal-25);
    }
  }

  & button {
    border: none;
    padding: 0;
    &:hover {
      text-decoration: underline;
    }
  }
}

/*
	fiVISION_ProgressBar
*/
.progress-container-header {
  display: block;
  width: 100%;
  position: relative;
  width: 100%;
}

.fiviProgressBar img {
  display: none;
}

main:has(.hide-all-progress-bars) {
  & .progress-container-header,
  & .progress-container,
  & .progress-container-main {
    display: none;
  }
}

/*
	controlid="progBar"
*/
.fiviProgressBar:has(> #progBar) {
  width: 100vw;
  max-width: 100%;
  display: flex;
  border-bottom: 2px solid var(--border-color);
  background-color: transparent;
}

#progBar {
  width: 100vw;
  max-width: 100%;
  & > .progress-bar-text {
    display: none;
  }

  & > .progress-bar-outer {
    display: none;
    background-color: transparent;
  }
}

#progBar .progress-bar-inner {
  height: 3px;
  background-color: var(--color-primary-normal);
}

@media (max-device-width: 1106px), (max-width: 1106px) {
  #progBar > .progress-bar-outer {
    display: block;
  }
}

/*
	controlid="pbJourneyBar"
*/
.progress-container {
  display: flex;
  align-self: stretch;
  width: 100%;
}

@media (max-device-width: 1106px), (max-width: 1106px) {
  .progress-container {
    display: none;
  }
}

.fiviProgressBar:has(> #pbJourneyBar) {
  /* width: 100vw; */
  /* max-width: 100%; */
}

#pbJourneyBar {
  display: flex;
  background-color: var(--color-secondary-normal);
  width: var(--column-width-3);
  & > table {
    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;
  }

  & tr {
    display: flex;
    flex-direction: column;
    gap: var(--gap-vertical-200);
  }
}

#pbJourneyBar tr > td {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--gap-vertical-25);
  min-width: var(--column-width);
}

#pbJourneyBar tr > td > span {
  font-size: calc(var(--font-size) - 2px);
  color: var(--color-gray-light);
}

#pbJourneyBar tr > td:before {
  display: block;
  content: "";
  position: relative;
  font-size: calc(var(--font-size) - 2px);
  color: var(--color-gray-light);
}

#pbJourneyBar tr > td:after {
  display: block;
  content: "";
  width: 100%;
  font-size: calc(var(--font-size) - 2px);
  color: var(--color-gray-light);
}

#pbJourneyBar tr > td.current-group > span,
#pbJourneyBar tr > td.current-group:before {
  color: var(--color-primary-normal);
  font-weight: bold;
}

#pbJourneyBar tr > td.current-group:after {
  color: var(--font-color);
}

#pbJourneyBar tr > td:nth-of-type(1):before {
  content: "1.";
}

#pbJourneyBar tr > td:nth-of-type(1):after {
  content: "Help us try to find your information for the fastest, smoothest experience possible!";
}

#pbJourneyBar tr > td:nth-of-type(2):before {
  content: "2.";
}

#pbJourneyBar tr > td:nth-of-type(2):after {
  content: "Select or review your choices";
}

#pbJourneyBar tr > td:nth-of-type(3):before {
  content: "3.";
}

#pbJourneyBar tr > td:nth-of-type(3):after {
  content: "Provide a little more information based on the accounts and services you selected";
}

#pbJourneyBar tr > td:nth-of-type(4):before {
  content: "4.";
}

#pbJourneyBar tr > td:nth-of-type(4):after {
  content: "Let's make sure we've dotted our i's and crossed our t's";
}

#pbJourneyBar tr > td:nth-of-type(5):before {
  content: "5.";
}

#pbJourneyBar tr > td:nth-of-type(5):after {
  content: "You have many options for your first deposit. Select the one that works for you!";
}

/*
	controlid="pbJourneyBarMain"
*/
.progress-container-main {
  width: 100%;
}

.progress-container-main > .fiviProgressBar:has(> #pbJourneyBarMain) {
  display: flex;
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

@media (max-device-width: 1106px), (max-width: 1106px) {
  .progress-container-main > .fiviProgressBar:has(> #pbJourneyBarMain) {
    display: none;
  }
}

#pbJourneyBarMain {
  width: 100%;
}

#pbJourneyBarMain table {
  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);
}

#pbJourneyBarMain tr {
  display: flex;
  width: 100%;
}

#pbJourneyBarMain tr > td.journey-bar-group {
  display: none;
  width: 100%;
  align-items: center;
  padding: 0;
  border-top: none;
  & > span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    & > 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;
    }
  }

  & .hidden-xs.hidden-sm {
    font-size: 22px;
    font-weight: var(--font-weight-h1);
    color: var(--color-primary-normal);
    width: 100%;
    display: flex !important;
    align-items: center;
    order: -1;
  }

  & > span:before {
    content: "1";
    display: block;
    font-size: 20px;
    font-weight: 800;
    font-family: var(--font-family-alt);
    color: var(--color-primary-normal);
  }

  & > span:after {
    content: "/5";
    display: block;
    font-size: 20px;
    font-family: var(--font-family-alt);
    color: #8d93b2;
    width: 21px;
  }

  &:after {
    content: "";
    display: block;
    border: 3px solid var(--color-black-light);
    border-radius: 50%;
    position: absolute;
    right: calc(var(--gap-horizontal) + -5px);
    width: 40px;
    height: 40px;
  }
}

#pbJourneyBarMain tr > td.journey-bar-group.current-group {
  display: flex;
}

#pbJourneyBarMain tr > td:nth-of-type(1) > span:before {
  content: "1";
}

#pbJourneyBarMain tr > td:nth-of-type(2) > span:before {
  content: "2";
}

#pbJourneyBarMain tr > td:nth-of-type(3) > span:before {
  content: "3";
}

#pbJourneyBarMain tr > td:nth-of-type(4) > span:before {
  content: "4";
}

#pbJourneyBarMain tr > td:nth-of-type(5) > span:before {
  content: "5";
}

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

.V3SummaryControl .fiviDocumentList {
  max-width: var(--column-width-12);
}

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

.fiviDocumentList span.fiviBtnContainer {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: var(--gap-vertical);
}

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

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

.fiviDocumentList table > tbody > tr,
.fiviDocumentList table > thead > 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-dark);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.fiviDocumentList table > tbody > tr,
.fiviDocumentList table > thead > tr {
  background-color: white;
}

.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: var(--gap-horizontal) 0 !important;
  background-color: transparent !important;
}

.V3MessagesHeaderClass th {
  max-width: var(--column-width-3) !important;
  width: 100% !important;
  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;
  align-items: center;
  max-width: var(--column-width-4);
  width: 100%;
  background-color: transparent !important;
}

.fiviDocumentList table td:last-of-type span:has(> .fiviFileUpload) {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
  align-items: center;
  & p {
    font-size: calc(var(--font-size) - 2px);
    text-align: left;
  }
}

.fiviDocumentList table td:last-of-type > div[id*="UploadProgressBar_"] {
  max-width: var(--fiviInput-width);
  min-width: var(--column-width-2);
  width: fit-content;
  display: flex;
  align-items: center;
  gap: var(--gap-horizontal-25);
  margin-top: var(--gap-vertical-25);
}

.fiviDocumentList table td:last-of-type > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-vertical-50);
}

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

.ng-modal-overlay {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.8;
}

.ng-modal-dialog {
  z-index: 10000;
  position: fixed;
  width: 80%;
  border-radius: 10px;
  top: 10%;
  left: 0;
  right: 0;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 4px 4px 80px #000;
}

.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;
  background-color: transparent;
  border: none;
  font-size: 22px;
  line-height: 22px;
  &:hover {
    opacity: 0.5;
  }
}

.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: 990px), all and (max-width: 990px) {
  .fiviDocumentList span.fiviBtnContainer {
    display: none;
  }
}

@media all and (max-device-width: 800px), all and (max-width: 800px) {
  .fiviDocumentList
    table:not(.V3StatusCenterTableClass)
    tbody
    > tr:first-of-type {
    display: none;
  }

  .fiviDocumentList table.V3StatusCenterTableClass thead {
    display: none;
  }

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

  .fiviDocumentList table > tbody > tr > td {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--font-size-h3);
    max-width: 100%;
    padding: 0 !important;
    width: 100%;
    gap: var(--gap-vertical-25);
  }

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

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

  /* status center column names */
  .fiviDocumentList
    table.V3StatusCenterTableClass
    > tbody
    > tr
    > td:nth-of-type(1):before {
    content: "Application Number";
  }

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

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

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

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

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

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

/*
	fiVISION_DisclosuresList
*/
div:has(> .DisclosuresHeaderClass) {
  display: flex;
  flex-direction: column;
  width: 100vw;
  max-width: 100%;
  gap: var(--gap-vertical);
}

.DisclosuresHeaderClass {
  display: none;
}

.fiviDisclosureList {
  display: flex;
  flex-direction: column;
  width: 100vw;
  max-width: 100%;
  gap: var(--gap-vertical-75);
  & > .DisclosureItem {
    padding-left: var(--gap-horizontal);
    & .fa.fa-square {
      outline: 1.5px solid var(--color-primary-dark);
      border-radius: 2px;
      color: white;
    }

    & .fa.fa-check {
      color: var(--color-primary-dark);
      outline: 1.5px solid var(--color-primary-dark);
      border-radius: 2px;
    }
  }

  & .DisclosureLinkV3 {
    color: var(--color-primary-dark);
    font-size: calc(var(--font-size) + 2px);
    line-height: 133%;
    background-color: transparent;
    border: none;
    text-align: left;
    &:hover {
      text-decoration: underline;
    }
  }
}

.fiviDisclosuresModal {
  position: fixed;
  width: 100vw;
  height: 100%;
  top: 0;
  left: 0;
  background-color: color-mix(
    in srgb,
    var(--color-black-dark) 50%,
    transparent
  );
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 15vh;
  z-index: 99;
  & > div {
    width: 100vw;
    z-index: 100;
    max-width: var(--column-width-12);
    background-color: var(--color-white-normal);
    padding-left: var(--column-spacer);
    padding-right: var(--column-spacer);
    border-left: solid 1px var(--color-gray-dark);
    border-right: solid 1px var(--color-gray-dark);
    &:first-of-type {
      padding-top: var(--column-spacer);
      padding-bottom: var(--column-spacer);
      border-left: solid 1px var(--color-gray-dark);
      border-right: solid 1px var(--color-gray-dark);
      border-top: solid 1px var(--color-gray-dark);
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      font-size: var(--font-size-h2);
      color: var(--font-color-h2);
      line-height: var(--font-lineheight-h2);
      font-weight: var(--font-weight-h2);
    }

    &.fiviDisclosureModalButtonWrapper {
      padding-top: var(--column-spacer);
      padding-bottom: var(--column-spacer);
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: space-between;
      border-left: solid 1px var(--color-gray-dark);
      border-right: solid 1px var(--color-gray-dark);
      border-bottom: solid 1px var(--color-gray-dark);
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }
  }

  & .fiviPDFContainer {
    width: 100%;
    height: 60vh;
  }
}

@media all and (max-device-width: 1120px), all and (max-width: 1120px) {
  .fiviDisclosuresModal {
    & > div {
      max-width: 90vw;
    }
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .fiviDisclosureList {
    & .DisclosureItem {
      padding-left: 0;
    }
  }
}

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

.fiviProductFundingItem,
.fiviFundingAmount {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  position: relative;
  padding: var(--gap-vertical-50);
  margin: 0;
  min-height: calc(var(--input-height) + var(--gap-vertical));
}

.fiviFundingInput,
.fiviFundingAmount {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--gap-horizontal);
  margin: 0;
  align-items: center;
  & input {
    margin: 0;
    text-align: right;
    &::placeholder {
      color: var(--color-gray-light);
    }
  }

  & > label {
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-vertical-25) / 2);
  }
}

.fiviProductFundingItem > .fiviFundingInput > label:first-child::after {
  content: "funding optional";
  color: var(--color-primary-light);
  font-size: 12px;
  padding: 0 4px;
  font-weight: bold;
  border-radius: var(--border-radius);
  position: relative;
  bottom: calc(var(--gap-vertical) * 0);
  font-style: italic;
}

.fiviProductFundingItem
  > .fiviFundingInput:has(.funding-required)
  > label:first-child:after {
  content: "* funding required";
  color: var(--color-primary-dark);
}

.fiviFundingAmount {
  justify-content: space-between;
  padding-right: var(--gap-vertical);
  & > span {
    font-weight: 500;
  }
}

@media all and (max-device-width: 628px), all and (max-width: 628px) {
  .fiviFundingInput {
    flex-direction: column;
    & > label {
      border-right: 0;
      text-align: center;
    }
  }
}

/*
	fiVISION_ACHFundingAccountVerification
*/
.fiviPlaid,
.fiviFinicityFundingAccountVerificationContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  max-width: 100%;
}

/*
	fiVISION_CreditCardV2
*/
.fiviParentControl.fiviCreditCard {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
}

.fiviCCNameAddress,
.fiviCCInfo,
.fiviCCNameAddress .fiviAddressInputs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
  width: 100vw;
  max-width: 100%;
  justify-content: center;
  & > .fiviControl.fiviInput {
    max-width: calc(50% - var(--fiviInput-horizontal-spacing));
  }
}

.fiviCCNameAddress *::placeholder {
  color: transparent;
}

.fiviCCNameAddress > span:nth-of-type(2) {
  display: none;
}

.fiviCCInfo {
  column-gap: 0;
  & > span:first-of-type {
    margin-right: var(--fiviInput-horizontal-spacing);
  }
}

.fiviCCInfo > span:first-of-type input::placeholder {
  color: transparent;
}

.fiviCCInfo > span:not(:first-of-type) {
  max-width: calc(
    calc(50% - var(--fiviInput-horizontal-spacing)) / 3
  ) !important;
  & .fivisionpopover {
    display: none !important;
  }
}

.fiviCCInfo > span:nth-of-type(2) {
  & > label.DefaultLabelClass {
    display: none !important;
  }

  & > select.form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    color: var(--font-color) !important;
  }

  &:before {
    content: "Card Expiration & CVV";
    display: flex;
    align-items: center;
    position: absolute;
    height: var(--input-focusLabel-fontSize);
    font-size: var(--input-focusLabel-fontSize);
    line-height: var(--font-size-label);
    color: var(--font-color-label);
    top: 0 !important;
    left: 0;
    font-weight: 500;
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

.fiviCCInfo > span:nth-of-type(3) {
  & > label.DefaultLabelClass {
    display: none !important;
  }

  & > select.form-control {
    border-radius: 0;
    color: var(--font-color) !important;
  }
}

.fiviCCInfo > span:nth-of-type(4) {
  & label.DefaultLabelClass {
    display: none !important;
  }

  & > input.form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
    color: var(--font-color) !important;
  }

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

@media all and (max-device-width: 725px), all and (max-width: 725px) {
  .fiviCCNameAddress,
  .fiviCCInfo,
  .fiviCCNameAddress .fiviAddressInputs {
    flex-wrap: wrap;
    & > .fiviControl.fiviInput {
      max-width: 100%;
    }
  }

  .fiviCCInfo > span:not(:first-of-type) {
    max-width: calc(100% / 3) !important;
  }

  .fiviCCInfo > span:first-of-type {
    margin-right: 0;
  }
}

/*
	fiVISION_OneTimePasscode
*/

.fiviOTP {
  width: 100vw;
  max-width: 100%;
  margin-top: calc(var(--gap-vertical-50) * -1);
  & > .loading {
    width: 100vw;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fiviControl.fiviDropDown select:has(option[value=""]:checked) {
    /* color: var(--font-color); */
    &:active,
    &:focus,
    &:hover {
      color: var(--font-color);
    }
  }
}

.fiviOTPDestination,
.fiviOTPCode {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical);
  width: 100vw;
  max-width: 100%;
  padding-bottom: calc(var(--gap-vertical) * 3.5);
}

.fiviOTPCode {
  padding-top: var(--gap-vertical-50);
}

.fiviOTPCode > .fiviLabelContainer > label {
  font-size: calc(var(--font-size) + 4px);
}

.fiviOTPDestination > div:has(> .fiviBtnContainer),
.fiviOTPButtonContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: var(--gap-vertical);
  align-items: center;
  border-top: 0.5px solid var(--border-color);
  padding: var(--gap-vertical) var(--gap-horizontal);
  width: 100vw;
  max-width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  text-wrap: nowrap;
}

@media all and (max-device-width: 628px), all and (max-width: 628px) {
  .fiviOTPDestination,
  .fiviOTPCode {
    padding-bottom: calc(var(--gap-vertical) * 7);
  }

  .fiviOTPDestination > div:has(> .fiviBtnContainer),
  .fiviOTPButtonContainer {
    flex-direction: column;
  }

  .fiviBtnContainer {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: var(--gap-vertical-75);
    & .button-link {
      text-align: center;
    }
  }
}

/* 
  ID Auth
*/

.fiviIDAuthentication {
  width: 100vw;
  max-width: 100%;
  padding-bottom: calc(var(--gap-vertical) * 3.5);
}

.fiviIDAuthentication > div {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-150);
  width: 100vw;
  max-width: 100%;
}

.fiviIDAuthQuestionContainerClass {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
  & > .fiviLabelContainer > label {
    font-size: calc(var(--font-size) + 2px);
    padding-bottom: var(--gap-vertical-50);
  }
}

.fiviIDAuthAnswerContainer {
  padding-left: var(--gap-horizontal-50);
}

.fiviIDAuthSubmitAnswerContainer {
  gap: var(--gap-horizontal);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: var(--gap-vertical);
  align-items: center;
  border-top: 0.5px solid var(--border-color);
  padding: var(--gap-vertical) var(--gap-horizontal);
  width: 100vw;
  max-width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

/*
	6.34 fiVISION_PleaseWait
*/
.fiviPleaseWait {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  background-color: black;
  opacity: 0.75;
  top: 0;
  left: 0;
  padding-top: 20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  & > .loaderMessage {
    text-align: center;
    color: white;
  }
}

/*
    fiVISION_HMDAQuestions
*/
.fiviHMDAQuestions {
  display: flex;
  width: 100vw;
  max-width: 100%;
  flex-wrap: wrap;
  gap: var(--gap-horizontal-150) var(--gap-horizontal);
  & br {
    display: none;
  }

  & > .fiviHMDAEthnicity,
  & > .fiviHMDARace,
  & > .fiviHMDAGender {
    display: flex;
    flex-direction: column;
    gap: var(--gap-horizontal-50);
    width: 100vw;
    max-width: var(--column-width-4);
    min-width: var(--column-width-3);
    & > .fiviLabelContainer {
      & > label {
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 1;
        text-decoration: underline;
      }
    }

    & > div {
      display: flex;
      flex-direction: column;
      gap: var(--gap-horizontal-25);
    }
  }

  & > .fiviHMDARace {
    order: -1;
  }
}

/*
    fivision_AccountSelection
*/
.fiviAccountSelectionCheckboxList {
  width: 100vw;
  max-width: 100%;
  & .fiviSelectAccountsContainer {
    width: 100vw;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-vertical-150);
  }
}

/*
    fiVISION_BeneficialOwnership
*/
.fiviBenficialOwnership {
  width: 100vw;
  max-width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-vertical-150);
  overflow-x: auto;
  margin: 0 10px;
  & > .fiviTable {
    border: 1px solid var(--color-gray-dark);
    border-radius: 5px;
    padding-top: var(--column-spacer);
  }

  & .fiviTableHead th {
    border-bottom: 1px solid var(--color-gray-dark);
    padding: 0 calc(var(--column-spacer) / 2) var(--column-spacer)
      calc(var(--column-spacer) / 2);
  }

  & .fiviTableBody td {
    padding: calc(var(--column-spacer) / 1.5);
  }

  .fiviTableRow:not(:first-of-type) {
    border-top: 2px solid var(--color-gray-dark);
    border-radius: 0 !important;
  }

  & td {
    min-width: var(--column-width-2);
  }

  & td:has(> .fiviTextBox) {
    width: 100vw;
    max-width: var(--column-width-4);
  }

  & tr:not(:last-of-type) > td {
    border-bottom: 1px solid var(--color-gray-dark);
  }

  & .fiviTextBox {
    max-width: var(--column-width-2);
    margin: 0 auto;
    display: block;
    & input.form-control {
      margin-top: 0;
      text-align: center;
    }
  }

  & .fiviRadioButton {
    display: block;
    margin: 0 auto;
  }

  & .fiviBtnContainer {
    align-self: flex-end;
  }
}

/* BeneficialOwnership table - Mobile Display */
@media screen and (max-width: 768px) {
  :root {
    --column-width-4: 70vw;
  }

  .section-container:has(.fiviBenficialOwnership) {
    align-items: center;
  }

  .fiviBenficialOwnership {
    & > .fiviTable {
      border: solid black 1px;
      padding-top: 0;
    }

    .fiviTableHead {
      display: none;
    }

    .fiviTable,
    .fiviTableBody,
    .fiviTableRow,
    .fiviTableData {
      display: block;
      width: 100%;
    }

    .fiviTableRow {
      margin-bottom: 1rem;
      border-radius: 8px;
      overflow: hidden;
    }

    .fiviTableData {
      text-align: center;
      padding: 12px 1rem;
      position: relative;
      border-bottom: 1px solid #e5e7eb;
    }

    .fiviTableData:last-child {
      border-bottom: 0;
    }

    /* Header for the first column */
    .fiviTableData:nth-of-type(1)::before {
      content: "Individual";
    }

    /* Header for the second column */
    .fiviTableData:nth-of-type(2)::before {
      content: "Percent Ownership";
    }

    /* Header for the third column */
    .fiviTableData:nth-of-type(3)::before {
      content: "Controlling Individual";
    }

    .fiviTableData::before {
      display: block;
      position: static;
      width: auto;
      padding-left: 0;
      margin-bottom: 0.5rem;
      font-weight: 700;
      text-align: center;
      color: #1f2937;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }

    .fiviBtnContainer {
      align-self: center;
      width: 100%;
      margin-top: 1rem;
    }
    .fiviBtnContainer .fiviLargeBtn {
      width: 100%;
    }

    /* Specific adjustments for input fields within responsive cells */
    .fiviTableData .fiviControl.fiviInput.fiviTextBox {
      width: auto;
      max-width: none;
    }

    .fiviTableData .fiviControl.fiviRadioButton {
      margin-top: 10px;
      text-align: center !important;
    }
  }
}

/*
    fiVISION_ExistingAccountOwnerList
*/
.fiviExistingAccountOwnerListContainer {
  width: 100vw;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-horizontal-200);
  & > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-horizontal-75);
  }

  & .fiviLabelContainer:has(.section-header) {
    width: 100%;
    margin-bottom: var(--gap-horizontal-50);
  }

  & .h4 {
    text-decoration: underline;
    margin-top: var(--gap-horizontal-75);
  }
}

.fiviExistingAccountOwnerProductsListClass {
  display: flex;
  flex-direction: column;
  gap: var(--gap-horizontal-75);
  margin-left: var(--gap-horizontal-50);
  & > .fiviExistingAccountOwnerApplicantNameClass {
    display: flex;
    gap: var(--gap-horizontal-50);
    align-items: center;
    & label.DefaultCBControlClassV3 {
      font-size: 16px;
      font-weight: 600;
    }
  }

  & div:has(> .product-selection) {
    display: flex;
    flex-direction: column;
    gap: var(--gap-horizontal-50);
    width: 100%;
    margin-left: var(--gap-horizontal-50);
    & > .product-selection > .fiviCheckBox {
      width: 100%;
      max-width: 100%;
      justify-content: flex-start;
      & input {
        width: fit-content;
      }

      & label {
        font-size: 16px;
      }
    }
  }
}

/*
    fiVISION_ACH
*/
.fiviACH {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
  flex-wrap: wrap;
  width: 100%;
  & > .fiviTextBox,
  & > .fiviABATextBoxContainer {
    max-width: calc(var(--fiviInput-width) - calc(var(--gap-vertical) / 2));
    width: 100%;
    & > .fiviTextBox {
      max-width: 100%;
      width: 100vw;
    }
  }

  & > .fiviACHAccountTypeRBContainer {
    max-width: 100%;
    width: 100vw;
    display: flex;
    height: var(--input-height);
    gap: var(--gap-horizontal);
    align-items: cetner;
  }
}

/*
    fiVISION_WithdrawApplication
*/
.fiviApplicantWithdrawContainer {
  width: 100vw;
  max-width: var(--fiviInput-width);
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical);
}

.fiviApplicantWithdrawContainer > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical);
}

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

/*
	6.35 Status Center 
	6.35.1 Global Overrides
*/
.V3StatusCenterLogin > #pnlEnterPassword,
.V3StatusCenterLogin > #pnlShowCreatePass,
.V3StatusCenterLogin > #pnlShowMFACode,
.V3StatusCenterLogin > #pnlShowMFADropdown,
.V3SummaryControl #pnlShowMFADropdown,
.V3SummaryControl #pnlShowMFACode,
.V3SummaryControl .fiviVerifyTrialDeposits,
.V3SummaryControl .fiviCheckOrder,
.fiviStatusCenterEmail,
.fiviVerifyTrialDepositsInputContainer {
  display: flex;
  flex-direction: column;
  gap: var(--gap-horizontal);
  width: 100vw;
  max-width: 100%;
}

.V3StatusCenterLogin > #pnlEnterPassword .DefaultLabelClassV3,
.V3StatusCenterLogin > #pnlShowCreatePass .DefaultLabelClassV3,
.V3StatusCenterLogin > #pnlShowMFACode .DefaultLabelClassV3,
.V3StatusCenterLogin > #pnlShowMFADropdown .DefaultLabelClassV3,
.V3SummaryControl #pnlShowMFACode .DefaultLabelClassV3,
.V3SummaryControl #pnlShowMFADropdown .DefaultLabelClassV3,
.V3SummaryControl .fiviVerifyTrialDeposits .DefaultLabelClassV3,
.fiviStatusCenterEmail .DefaultLabelClassV3 {
  display: flex;
  align-items: center;
  height: var(--input-height);
  position: absolute;
  left: var(--gap-horizontal-50);
  top: var(--input-marginTop-forLabelFocusSpace);
  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;
  pointer-events: none;
}

.V3StatusCenterLogin > #pnlEnterPassword .LabelClassFocus,
.V3StatusCenterLogin > #pnlShowCreatePass .LabelClassFocus,
.V3StatusCenterLogin > #pnlShowMFACode .LabelClassFocus,
.V3StatusCenterLogin > #pnlShowMFADropdown .LabelClassFocus,
.V3SummaryControl #pnlShowMFACode .LabelClassFocus,
.V3SummaryControl #pnlShowMFADropdown .LabelClassFocus,
.V3SummaryControl .fiviVerifyTrialDeposits .LabelClassFocus,
.fiviStatusCenterEmail .LabelClassFocus {
  height: var(--input-focusLabel-fontSize);
  font-size: var(--input-focusLabel-fontSize);
  top: 0 !important;
  /* global.css conflict */
  left: 0;
  font-weight: 500;
}

.V3StatusCenterLogin > #pnlEnterPassword .fivisionpopover,
.V3StatusCenterLogin > #pnlShowCreatePass .fivisionpopover,
.V3StatusCenterLogin > #pnlShowMFACode .fivisionpopover,
.V3SummaryControl #pnlShowMFACode .fivisionpopover,
.V3SummaryControl .fiviVerifyTrialDeposits .fivisionpopover,
.fiviStatusCenterEmail .fivisionpopover {
  position: relative !important;
  top: unset;
  bottom: unset !important;
  box-shadow: none;
  border: none;
  background-color: transparent;
  width: 100vw;
  max-width: var(--fiviInput-width);
  left: 0;
  margin: 0;
  /* margin-top: var(--gap-vertical-25); */
  text-align: left;
}

.V3StatusCenterLogin > #pnlShowMFADropdown select.DefaultFormControlClassV3,
.V3SummaryControl #pnlShowMFADropdown select.DefaultFormControlClassV3 {
  padding: 0px var(--gap-horizontal-50) !important;
  font-size: var(--font-size-input) !important;
  max-width: var(--fiviInput-width);
}

.V3StatusCenterLogin > #pnlEnterPassword .fiviControl,
.V3StatusCenterLogin > #pnlShowCreatePass .fiviControl,
.V3StatusCenterLogin > #pnlShowMFACode .fiviControl,
.V3StatusCenterLogin > #pnlShowMFADropdown .fiviControl,
.V3SummaryControl #pnlShowMFACode .fiviControl,
.V3SummaryControl #pnlShowMFADropdown .fiviControl,
.V3SummaryControl .fiviVerifyTrialDeposits .fiviControl,
.V3SummaryControl .fiviCheckOrder .fiviControl,
.fiviStatusCenterEmail .fiviControl {
  padding: 0;
}

/*
	6.35.2 Status Center Login
*/
.fiviStatusCenterEmail {
  width: 100vw;
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main:has(.V3StatusCenterLogin) {
  justify-content: center;
}

.V3StatusCenterLogin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-vertical-150);
  max-width: var(--column-width-12);
  width: 100%;
  line-height: var(--font-lineheight);
  font-size: calc(var(--font-size) + 2px);
}

.V3StatusCenterLogin div,
.V3StatusCenterLogin > div > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-vertical);
}

.V3StatusCenterLogin > div span:has(> .btn-link) {
  display: block;
}

.V3StatusCenterLogin br {
  display: none;
}

.V3StatusCenterLogin > #pnlShowMFACode .fiviCheckBox {
  display: flex;
}

.V3StatusCenterLogin > #pnlEnterPassword,
.V3StatusCenterLogin > #pnlShowCreatePass,
.V3StatusCenterLogin > #pnlShowMFACode,
.V3StatusCenterLogin > #pnlShowMFADropdown {
  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%;
  margin: 0;
}

.V3StatusCenterLogin .fiviControl.fiviTextBox {
  display: inline-flex !important;
  padding: 0 !important;
}

#pnlPleaseWait:has(+ .V3StatusCenterLogin) {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.66;
  background-color: black;
  display: flex;
  & > .loader {
    position: absolute;
    top: 20%;
    left: calc(50% - 50px);
  }
}

/*
	6.35.3 Status Center Summary
*/
.V3SummaryControl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-vertical-150);
  max-width: var(--column-width-12);
  width: 100%;
  line-height: var(--font-lineheight);
}

.V3SummaryControl span:has(> button.btn-link) {
  /* we need to add some structure to spans that have buttons. */
  display: inline-flex;
  align-items: center;
}

.V3SummaryControl br {
  display: none;
}

@media all and (max-device-width: 769px), all and (max-width: 769px) {
  .V3SummaryControl {
    gap: var(--gap-vertical);
  }
}

/*
	6.35.3.1 SC Summary Header
*/
.V3SummaryControl > header {
  display: block;
  box-shadow: none;
  padding: 0;
  background-color: transparent;
  border-bottom: none;
}

.V3SummaryHeader {
  background-image: none;
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.V3SummaryHeader:before,
.V3SummaryHeader:after {
  display: none;
}

.V3SummaryHeader > #navbar-header {
  display: none !important;
}

/*
	6.35.3.2 SC Summary Icons/Navigation
*/
.V3SummaryHeader > #topNav {
  display: block !important;
  width: 100%;
  padding: 0;
}

.V3SummaryHeader > #topNav > ul {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: var(--gap-horizontal) var(--gap-vertical);
}

.V3SummaryHeader > #topNav:before,
.V3SummaryHeader > #topNav:after,
.V3SummaryHeader > #topNav > ul:before,
.V3SummaryHeader > #topNav > ul:after {
  display: none;
}

.V3SummaryHeader > #topNav > ul > .nav-item {
  margin: 0;
  padding: var(--gap-vertical-75);
  min-width: 100px;
}

.V3SummaryHeader > #topNav > ul > .nav-item.active {
  border: 1px solid var(--color-secondary-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;
}

.V3SummaryHeader > #topNav > ul > .nav-item > a {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-25);
  padding: 0;
  margin: 0;
  font-size: calc(var(--font-size) + 2px);
  font-weight: 500;
  color: var(--color-primary-normal) !important;
  fill: var(--color-primary-normal) !important;
}

.V3SummaryHeader > #topNav > ul > .nav-item.active > a {
  background-image: none;
  background-color: transparent;
  box-shadow: none;
  color: var(--color-secondary-normal) !important;
  fill: var(--color-secondary-normal) !important;
}

.V3SummaryHeader > #topNav > ul > .nav-item .badge {
  right: var(--gap-vertical-25);
  left: unset;
  background-color: var(--color-secondary-normal);
  z-index: 2;
}

.V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge {
  right: var(--gap-vertical-75);
}

@media all and (max-device-width: 992px), all and (max-width: 992px) {
  .V3SummaryHeader > #topNav > ul > .nav-item {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--gap-horizontal-25);
  }

  .V3SummaryHeader > #topNav > ul > .nav-item .badge,
  .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge {
    position: relative;
    width: fit-content;
    height: fit-content;
    right: unset;
  }

  .V3SummaryHeader > #topNav > ul > .nav-item > a {
    flex-direction: row;
  }

  .V3SummaryHeader > #topNav > ul > .nav-item > a > svg {
    margin: 0 0 0 0;
  }
}

@media all and (max-device-width: 769px), all and (max-width: 769px) {
  .V3SummaryHeader > #topNav {
    border: none;
  }

  .V3SummaryHeader > #topNav > ul {
    flex-wrap: wrap;
    margin: 0;
    gap: var(--gap-vertical-25);
    border: none;
    justify-content: space-between;
  }

  .V3SummaryHeader > #topNav > ul > .nav-item {
    width: calc(50% - var(--gap-vertical-25));
    justify-content: center;
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .V3SummaryHeader > #topNav > ul > .nav-item {
    justify-content: center;
    padding: var(--gap-vertical-50);
  }

  .V3SummaryHeader > #topNav > ul > .nav-item > a {
    flex-direction: column;
    justify-content: center;
  }

  .V3SummaryHeader > #topNav > ul > .nav-item .badge,
  .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge {
    position: absolute;
    right: var(--gap-vertical-25);
    top: var(--gap-vertical-50);
    left: unset;
    background-color: var(--color-secondary-normal);
    z-index: 2;
  }
}

/*
	6.35.4 SC Status Center Content
*/
.V3SummaryControl > article {
  margin: 0;
}

.V3SummaryControl .container-fluid {
  padding: 0;
}

.V3SummaryControl .container-fluid:before,
.V3SummaryControl .container-fluid:after {
  display: none;
}

.V3SummaryControl .container-fluid > div {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-75);
}

.V3SummaryControl .headline-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-horizontal);
  padding: 0;
  background: transparent;
  margin: 0;
  text-align: left;
}

.V3SummaryControl .headline-container > h1 {
  font-size: 32px;
  text-transform: capitalize;
  font-weight: 500;
  text-align: center;
}

.V3SummaryControl .headline-container table.V3StatusCenterTableClass + div {
  display: flex;
  flex-direction: column;
  gap: var(--gap-horizontal);
}

table.V3StatusCenterTableClass {
  margin-bottom: 0px;
}

.V3SummaryControl table.V3StatusCenterTableClass td {
  line-height: 34px;
}

span:has(> table.V3StatusCenterTableClass) {
  display: flex;
  flex-direction: column;
  gap: var(--gap-horizontal);
}

.fiviAdditionalMFAScreenContainer > #pnlControls {
  width: 100vw;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-horizontal);
}

/*
	6.35.4.1 Status Center Content Home
*/
.V3SummaryControl .container-fluid > div > .task {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--gap-horizontal-50);
  margin: 0;
  border: 1px solid var(--color-secondary-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;
}

.V3SummaryControl .container-fluid > div > .task > .task-icon {
  fill: var(--color-primary-normal);
}

.V3SummaryControl .container-fluid > div > .task > .task-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-horizontal-50);
  margin: 0;
}

.V3SummaryControl .container-fluid > div > .task .task-text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-25);
}

.V3SummaryControl .container-fluid > div > .task .task-title {
  color: var(--color-primary-normal);
  font-size: 16px;
  text-transform: capitalize;
  margin: 0;
}

.V3SummaryControl .container-fluid > div > .task .task-description {
  font-size: calc(var(--font-size) + 2px);
  color: var(--font-color);
}

.V3SummaryControl .btn-primary {
  background-color: var(--color-primary-normal);
  border-color: var(--color-primary-normal);
  box-shadow: none;
  text-shadow: non;
  &:hover,
  &:active,
  &:focus {
    background-color: white;
    color: var(--color-primary-normal);
  }
}

/*
	6.35.4.2 Status Center Content Messages
*/
.V3SummaryControl
  header:has(#nav-messages.active)
  + article
  .headline-container,
.V3SummaryControl
  header:has(#nav-messages.active)
  + article
  .headline-container
  > span {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-150);
  align-items: flex-start;
  width: 100vw;
  max-width: 100%;
}

.V3SummaryControl
  header:has(#nav-messages.active)
  + article
  .headline-container
  > span
  div:has(.btn-primary) {
  /* text-align: center; */
  width: 100vw;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-horizontal);
}

.V3SummaryControl .fiviSCSendMessage > div,
.fiviSCSendMessage {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-75);
  width: 100vw;
  max-width: 100%;
  & > .btn-link {
    text-align: left;
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .V3SummaryControl .container-fluid > div > .task > .task-icon {
    display: none;
  }
}

/*
    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;
  justify-content: space-between;
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  box-shadow: none;
  position: relative;
  color: var(--color-primary-normal);
  & > .fiviControl.fiviPanel {
    width: 100%;
  }

  &:hover,
  &:active,
  &:focus {
    background-color: var(--color-white-dark);
    cursor: pointer;
  }
}

.page-Default-Content .thumbnail button,
.page-Default-Content .thumbnail > input,
.page-Default-Content .thumbnail .fiviIndividualButton:not(:has(button)) {
  display: block;
  font-weight: 500;
  height: 100%;
  min-height: 18px;
  width: 100% !important;
  padding: var(--gap-vertical) var(--gap-horizontal) var(--gap-vertical)
    calc(var(--gap-horizontal) * 2.5);
  margin: 0;
  text-align: left;
  text-decoration: none;
  color: inherit;
  text-wrap: wrap;
  &:hover {
    text-decoration: none;
  }
}

.page-Default-Content .thumbnail > .fa {
  width: 50px;
}

.page-Default-Content .thumbnail .fiviIndividualButton {
  width: 100%;
}

.page-Default-Content .thumbnail > span {
  width: 100%;
}

.thumbnail-img {
  position: absolute;
  pointer-events: none;
  left: var(--gap-horizontal-25);
  padding: 5px;
  border-radius: 5px;
  color: var(--color-primary-normal);
  font-size: 30px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbnail-img svg {
  color: var(--color-primary-normal);
  stroke: black;
  fill: black;
}

.thumbnail .glyph {
  position: absolute;
  pointer-events: none;
  right: var(--gap-horizontal-50);
  font-size: 22px;
  font-weight: 700;
}

@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: 656px), all and (max-width: 656px) {
  .default-thumbnail-container {
    justify-content: center;
  }
}

@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
*/
.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);
  & > .fiviHeaderPanelClass {
    flex-grow: inherit;
    flex-basis: inherit;
    align-self: inherit;
  }
}

.prove-start-container .fiviMultiInput {
  position: unset;
}

.prove-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 {
  flex-grow: 3;
  flex-basis: 0;
  min-width: 0;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  gap: var(--gap-vertical-150);
  & > .section-container {
    flex-grow: 0;
  }
}

.prove-new .prove-user-img-container {
  width: 60px;
  height: 60px;
  border: 4px solid var(--color-primary-normal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-primary-normal);
  color: white;
  & > .fa {
    font-size: 50px;
    padding-top: 15px;
  }
}

.prove-new .prove-user-img-container > img {
  width: 50px;
  height: 50px;
}

.prove-new .fiviInput {
  /* max-width: 100%; */
  width: 100%;
}

.prove-new .fiviErrorSummary > div {
  text-align: left;
}

.prove-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  gap: var(--gap-vertical-25);
  align-self: stretch;
}

.prove-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 {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.prove-disclosure {
}

#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;
  & > img {
    max-width: 90%;
  }
}

#proveIndividualErrorMessage {
  color: red;
}

.pnlCamera {
  display: none;
}

#tcpaLearnMore,
#proxyLearnMore {
  cursor: pointer;
}

#tcpaContainer,
#proxyContainer {
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

@media (max-device-width: 836px), (max-width: 836px) {
  .pnlCamera {
    display: flex;
  }

  .prove-start-container .fiviInput,
  .prove-start-container .button-other {
    max-width: 100%;
  }

  .prove-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-existing .button-other {
    width: 100% !important;
  }

  .prove-new,
  .prove-divider,
  .prove-existing,
  .prove-disclosure {
    width: 100%;
  }

  .prove-disclosure {
    margin: 0;
  }

  .vertical-divider {
    height: 1px;
    width: 100%;
    border-top: 0.5px solid var(--border-color);
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .prove-start-container {
    padding-bottom: calc(var(--gap-vertical) * 5);
  }
}

/* 
    9.3 Select Accounts
*/
.page-SelectAccount .fiviPanel {
  width: 100%;
}

/* 
    9.4 Disclosures
*/
.accept-disclosures-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-vertical) var(--gap-horizontal);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: var(--gap-horizontal-50);
  width: 100%;
}

.accept-disclosures-container .page-text {
  padding-left: calc(var(--gap-vertical-200) * 1.25);
}

.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 {
  background-color: var(--background-color-alt);
  padding: var(--gap-vertical) var(--gap-horizontal);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  width: 100vw;
  max-width: 100%;
}

.pnlBackupWithholding .fiviRadioButton {
  max-width: 100%;
  & > .fiviRadioButtonContainer {
    max-width: 100%;
    justify-content: center;
  }

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

  & .DefaultLabelClass {
    max-width: 100%;
    padding: var(--gap-vertical-75) var(--gap-horizontal-200);
    border: 1px solid var(--color-primary-normal);
    background-color: white;
    color: var(--color-primary-normal);
    text-align: center;
    justify-content: center;
    height: 100%;
    border-radius: 5px;
  }

  & .DefaultLabelClass:hover,
  & .DefaultLabelClass:active,
  & .DefaultLabelClass:focus,
  & input:checked + .DefaultLabelClass {
    background-color: var(--color-primary-normal);
    color: white;
  }
}

/*
	9.5 Funding
*/
.fund-now-selector-container,
.funding-method-container {
  display: flex;
  width: 100vw;
  max-width: 100%;
  justify-content: center;
}

.fund-now-selector-container .fiviCheckBox,
.funding-method-container .fiviRadioButton {
  max-width: fit-content;
  & > .fiviRadioButtonContainer {
    max-width: 100%;
    justify-content: center;
  }

  & .DefaultLabelClass:before,
  & .DefaultLabelClass:after,
  & .DefaultCBLabelClass:before,
  & .DefaultCBLabelClass:after {
    display: none;
  }

  & .DefaultLabelClass,
  & .DefaultCBLabelClass {
    max-width: fit-content;
    min-width: calc(var(--column-width-3) * 0.9);
    padding: var(--gap-vertical-75) var(--gap-horizontal-150);
    border: 1px solid var(--color-primary-normal);
    background-color: white;
    color: var(--color-primary-normal);
    text-align: center;
    justify-content: center;
    height: 100%;
    border-radius: 5px;
  }

  & .DefaultLabelClass:hover,
  & .DefaultLabelClass:active,
  & .DefaultLabelClass:focus,
  & input:checked + .DefaultLabelClass,
  & .DefaultCBLabelClass:hover,
  & .DefaultCBLabelClass:active,
  & .DefaultCBLabelClass:focus,
  & input:checked + .DefaultCBLabelClass {
    background-color: var(--color-primary-normal);
    color: white;
  }
}

.funding-method-detail {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background-color: var(--background-color-alt);
  padding: var(--gap-vertical);
  width: 100%;
}

.page-Funding ol {
  margin-top: 0;
}

@media all and (max-device-width: 540px), all and (max-width: 540px) {
  .funding-method {
    width: 100vw;
    max-width: 100%;
  }

  .funding-method-container .fiviRadioButton .DefaultLabelClass,
  .funding-method-container .fiviRadioButton {
    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 .fa {
  color: var(--color-primary-normal);
  font-size: 35px;
}

.app-status-container .page-text {
  letter-spacing: 0;
  font-weight: 400;
}

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

/*
    11. Classic 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 {
  display: flex;
  width: fit-content;
  align-items: center;
  min-width: 200px;
}

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

/*
    MCRD
*/
.fiviViewFormHeader {
  max-width: var(--column-width-9);
  margin-right: auto;
  margin-left: auto;
  padding: 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  & > .fiviSCDropDown {
    width: 100vw;
    max-width: var(--fiviInput-width);
    flex-direction: column;
    margin: 10px 0;
    & > label {
      font-size: 16px !important;
      font-weight: 500;
    }

    & > .form-control {
      margin-top: 5px;
    }
  }
}

.fiviViewFormHeader + div > .layout {
  & > header,
  & > footer,
  & .progress-container {
    display: none;
  }

  & > main {
    max-width: var(--column-width-9);
    & > .layout-container {
      margin: 0;
    }

    & .page-container {
      margin-top: var(--gap-horizontal);
    }
  }

  & .progress-container-main {
    display: none;
  }
}