/*
    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
		7.9 Popover
	8. fiVISION Controls
		8.1 fiVISION_ErrorSummary
		8.2 fiVISION_Panel
		8.3 fiVISION_ProductsAndServicesV2
		8.4 fiVISION_AddressTextBoxV2
		8.5 fiVISION_PhoneTextBoxV2
		8.6 fiVISION_IDTypeV2
		8.7 fiVISION_HousingDurationHistory
		8.8 fiVISION_EmploymentHistory
		8.9 fiVISION_IndividualIncome
		8.10 fiVISION_IndividualDetails
		8.11 fiVISION_ProductsAndServicesSelected
		8.12 fiVISION_ProductRelationships
		8.13 fiVISION_DocumentListV2
		8.14 fiVISION_DisclosuresList
		8.15 fiVISION_IDAuthenticationQuestions
		8.16 fiVISION_ProductFundingV2
		8.17 fiVISION_ACH
		8.18 fiVISION_CreditCardV2
		8.19 fiVISION_ApplicantWithdraw
		8.20 fiVISION_ProgressBar
		8.21 fiVISON_IndividualHandler
		8.22 Status Center Login
		8.23 Status Center Summary
		8.24 v3TextBox
		8.25 fiVISION_FinicityFundingAccountVerification
		8.26 fiVISION_OneTimePasscode
		8.27 fiVISION_WorkflowSurvey
		8.28 fiVISION_Prove
        8.29 fiVISION_PersonSearch
	9. Page Specific
		9.1 Default Page
		9.2 Status Center - Default
		9.3 Status Center - Status Center
		9.4 Funding Method
		9.5 eSign Agreement
		9.6 Disclosures
		9.7 ID Authentication
		9.8 Custom Styles for FAQ Section 
		9.9 Expected Activity
		9.10 Workflow Selection Page
	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: #fff;
  --color-white-normal: #fff;
  --color-white-dark: #fff;
  --color-gray-light: #f8f8f8;
  --color-client-gray-light: #f0f0f0;
  --color-gray-normal: #e4ebec;
  --color-gray-dark: #d6d5d4;
  --color-black-light: #52575a;
  --color-black-normal: #000;
  --color-black-dark: #000;
  /*client colors*/
  --color-primary-light: #cae7f8;
  --color-primary-normal: #0079c1;
  --color-primary-dark: #00619a;
  --color-secondary-light: #0d0734;
  --color-secondary-normal: #0d0734;
  --color-secondary-dark: #0d0734;
  --color-tertiary-light: #d4dffd;
  --color-tertiary-normal: #d4dffd;
  --color-tertiary-dark: #d4dffd;
  --color-quaternary-light: #0d0734;
  --color-quaternary-normal: #0d0734;
  --color-quaternary-dark: #0d0734;
  /*font family*/
  --font-family-pri: "Poppins", sans-serif;
  --font-family-alt: "Poppins", sans-serif;
  /*fonts*/
  /*default font*/
  --font-size: 14px;
  --font-lineheight: 20px;
  --font-color: var(--color-black-light);
  --font-weight: 500;
  --font-family: var(--font-family-pri);
  /*input font*/
  --font-size-input: 20px;
  --font-lineheight-input: 22px;
  --font-color-input: var(--font-color);
  --font-weight-input: var(--font-weight);
  --font-family-input: var(--font-family);
  /*label font*/
  --font-size-label: 20px;
  --font-lineheight-label: var(--font-lineheight);
  --font-color-label: var(--font-color);
  --font-weight-label: 300;
  --font-family-label: var(--font-family-alt);
  /*h1 font*/
  --font-size-h1: 32px;
  --font-lineheight-h1: 42px;
  --font-color-h1: var(--color-black-dark);
  --font-weight-h1: 500;
  --font-family-h1: var(--font-family-alt);
  /*h2 font*/
  --font-size-h2: 24px;
  --font-lineheight-h2: 26px;
  --font-color-h2: var(--color-secondary-dark);
  --font-weight-h2: 600;
  --font-family-h2: var(--font-family-input);
  /*h3 font*/
  --font-size-h3: 18px;
  --font-lineheight-h3: 22px;
  --font-color-h3: var(--color-secondary-dark);
  --font-weight-h3: 600;
  --font-family-h3: var(--font-family);
  /*h4 font*/
  --font-size-h4: 16px;
  --font-lineheight-h4: 18px;
  --font-color-h4: var(--color-secondary-dark);
  --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);
  /*input and label structure*/
  --fiviInput-width: var(--column-width-6);
  --fiviInput-width-half: calc(
    calc(var(--fiviInput-width) - var(--column-spacer)) / 2
  );
  --fiviInput-width-double: calc(
    calc(var(--fiviInput-width) * 2) + var(--column-spacer)
  );
  /*the below two should add to the above, sometimes 3+2 or 2+2 or 2+1, main is always >= alt*/
  --fiviInput-width-partial-main: var(--column-width-3);
  --fiviInput-width-partial-alt: var(--column-width-3);
  --input-height: 60px;
  --input-focusLabel-fontSize: 12px;
  --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-150);
  --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+96px+2px = 1106px
          -12 columns -> 8 columns 
          -fiviInput-width goes to 4 columns
          -should accomidate 2 inputs per row
      */
  :root {
    --font-size-input: 18px;
    --font-size-label: 18px;
    --font-lineheight-label: var(--font-lineheight);
    --column-width-11: 100%;
    --column-width-12: 100%;
    --column-width-10: 100%;
    --fiviInput-width: var(--column-width-4);
    --fiviInput-width-partial-main: var(--column-width-2);
    --fiviInput-width-partial-alt: var(--column-width-2);
    --fiviInput-width-half: var(--column-width-2);
  }
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  /*
          @786px+48px+2px = 836px
          -9 columns -> 6 columns 
          -fiviInput-width goes to 3 columns
          -should accomidate 2 inputs per row
      */
  :root {
    --font-size: 14px;
    --font-size-h1: 30px;
    --font-lineheight-h1: 32px;
    --font-size-h2: 22px;
    --font-lineheight-h2: 24px;
    --font-size-h3: 18px;
    --font-lineheight-h3: 20px;
    --column-width-8: 100%;
    --column-width-9: 100%;
    --fiviInput-width: var(--column-width-6);
    --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 -> 4 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-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: 452px), all and (max-width: 452px) {
  /*
          @426px+24px+2px = 452px
          - any column width > 2 goes to 100%
      */
  :root {
    --column-width-3: 100%;
    --column-width-4: 100%;
    --column-width-5: 100%;
    --fiviInput-width-half: calc(50% - calc(var(--column-spacer) / 2));
  }
}

/*
      2. General Elements & Classes
  */
/*
      2.1 General Elements
  */
html,
body {
  font-size: var(--font-size);
  line-height: var(--font-size);
  color: var(--font-color);
  font-weight: var(--font-weight);
  font-family: var(--font-family);
}

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

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4,
p,
label,
input,
select,
textarea,
form {
  margin: 0;
  margin-block: 0;
  padding: 0;
  padding-block: 0;
  width: 100%;
}

b {
  font-weight: 600;
}

h1,
.h1 {
  font-size: var(--font-size-h1);
  line-height: var(--font-lineheight-h1);
  color: var(--font-color-h1);
  font-weight: var(--font-weight-h1);
  font-family: var(--font-family-h1);
  text-align: center;
}

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-normal) !important;
}

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

a:hover {
  text-decoration: underline;
  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);
}

/*
      2.2 iCheck
  */
.icheckbox_square-black,
.icheckbox_square-red,
.icheckbox_square-green,
.icheckbox_square-blue,
.icheckbox_square-aero,
.icheckbox_square-grey,
.icheckbox_square-orange,
.icheckbox_square-yellow,
.icheckbox_square-pink,
.icheckbox_square-purple {
  background-color: white;
  margin: 0;
  border-radius: 2.5px;
}

.iradio_square-black,
.iradio_square-red,
.iradio_square-green,
.iradio_square-blue,
.iradio_square-aero,
.iradio_square-grey,
.iradio_square-orange,
.iradio_square-yellow,
.iradio_square-pink,
.iradio_square-purple {
  background-color: white;
  border-radius: 50%;
  margin: 0;
}

/*
      2.3 Flex Helper Classes
  */
.flex-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
  flex-wrap: wrap;
  width: 100%;
}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
  width: 100%;
}

.flex-row.flex-align-vertical-center {
  align-items: center;
}

.flex-column.flex-align-vertical-center {
  justify-content: center;
}

.flex-row.flex-align-horizontal-center {
  justify-content: center;
}

.flex-column.flex-align-horizontal-center {
  align-items: center;
}

.flex-row.flex-space-between {
  justify-content: space-between;
}

.flex-column.flex-space-between {
  align-items: space-between;
}

/*
      gap is almost always going to govern the vertical, 
      horizontal should rarely be modified, if ever.  If you
      need to, add/modify a custom class.
  */
.flex-gap-25 {
  gap: var(--gap-vertical-25) var(--gap-horizontal) !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
  */
.page-text {
  font-size: calc(var(--font-size) + 2px);
  line-height: var(--font-lineheight);
  font-weight: 400;
  color: var(--font-color);
  width: 100%;
}

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

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

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

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

.fiviHide {
  display: none !important;
}

/*
      3. Page Structure
  */
/*
      3.1 Page Structure
  */
.layout {
  background-color: var(--color-white-light);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

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

header {
  box-shadow: none;
  background: rgb(0, 121, 193);
  background: linear-gradient(
    90deg,
    rgba(0, 121, 193, 1) 0%,
    rgba(3, 43, 69, 1) 100%
  );
}

main {
  flex-grow: 1;
  margin-bottom: auto;
  align-items: flex-start;
  height: 100%;
  flex-direction: column;
  padding: 0;
}

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

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .layout {
    gap: 0;
  }

  header,
  main,
  footer {
    padding: var(--gap-vertical-50) var(--gap-horizontal-50);
  }

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

/*
      3.2 Header Styling
  */
header {
  border-bottom: 2px solid var(--color-gray-dark);
  display: flex;
  flex-direction: column;
  padding: 0;
}

header .layout-container {
  max-width: 80rem;
  width: 100%;
  margin: 0 auto;
  min-height: 62px;
  padding: 1rem;
}

.mobile-logo,
.mobile-logo-vertical {
  display: none;
}

.mobile-contact-vertical {
  display: none !important;
}

.mobile-contact-vertical li a {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mobile-contact-vertical a {
  font-size: 0.8rem !important;
}

.desktop-logo .header-logo {
  width: 300px;
}

.desktop-logo,
.mobile-logo {
  filter: brightness(0) invert(1);
  display: flex;
  flex-direction: column;
}

/* FDIC */
#fdicBand {
  display: block;
  left: 70px;
  bottom: 22px;
  position: absolute;
  width: 470px;
}

#fdicBand {
  position: relative;
  z-index: 999;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: left;
  padding: 10px;
  align-self: flex-start;
}

.fdic-svg {
  fill: #ffffff;
  /* fill: #003256; */
  fill-rule: evenodd;
  stroke-width: 0px;
}

.source-sans-3-fdic-text {
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-size: 12.8px;
  left: 4em !important;
  top: 1em;
  color: #ffffff;
  position: absolute;
  /* color: #000000 */
}

#fdicBand > svg {
  /* width: 40px;
          left: 10em; */
  top: 0.8em;
}

/* ----  */
.header-top-nav {
  /* background-color: var(--color-primary-normal); */
  width: var(--column-width-full) !important;
  padding: 1rem 0;
}

.header-top-nav .layout-container {
  padding: 0;
  flex-direction: row;
  justify-content: flex-end;
}

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

.header-top-nav ul li {
  padding: 0;
  margin: 0;
}

.header-top-nav ul li a {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0.25rem;
  color: #ffffff !important;
  display: block;
  font-family: Source Sans Pro, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.2;
  padding: 0.75rem;
  text-align: center;
  transition: background-color 0.2s;
  text-decoration: none;
  margin: 0 0 0 0.5rem;
}

.header-top-nav ul li a:hover,
.header-top-nav ul li a:active,
.header-top-nav ul li a:focus {
  background-color: rgba(0, 0, 0, 0.3);
  color: #ffffff !important;
  cursor: pointer;
}

.icon-bubbleleft,
.icon-location {
  color: #ffffff !important;
  content: "asdfasdf" !important;
}

.icon-bubbleleft i,
.icon-location i {
  padding-right: 0.625rem;
}

i {
  padding: 1em;
}

.mobile-contact {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  width: 40%;
}

.mobile-contact-vertical {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  text-align: center;
  padding: 0;
  width: 100%;
}

.mobile-contact-vertical > li > a {
  display: flex;
  flex-direction: row;
  align-items: center;
}

@media all and (max-device-width: 889px), all and (max-width: 889px) {
  .mobile-contact {
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;
    width: 100%;
  }

  header .layout-container {
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-horizontal-50);
  }

  .desktop-logo {
    /* display: none; */
    display: flex;
    align-content: center;
    justify-content: center;
    text-align: center;
  }

  .mobile-logo {
    display: flex;
  }

  #fdicBand {
    width: 300px;
  }

  .source-sans-3-fdic-text {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: italic;
    font-size: 12.8px;
    top: 0.7em;
    color: #ffffff;
    position: absolute;
    /* color: #000000 */
    text-align: left;
    white-space: normal;
    word-break: break-word;
  }

  #fdicBand > svg {
    /* width: 40px;
          left: 10em; */
    top: 1em;
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .header-top-nav .layout-container {
    padding: 0;
    flex-direction: row;
    justify-content: space-between;
  }

  .mobile-logo {
    /* display: none; */
  }

  .mobile-logo-vertical {
    display: flex;
  }

  .mobile-contact {
    display: none !important;
  }

  .mobile-contact-vertical {
    display: flex !important;
    margin-right: 1rem !important;
  }

  #fdicBand {
    width: 200px;
  }
}

.header-bottom-nav {
  justify-content: space-around !important;
}

.h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

/*
      3.3 Main Styling
  */
main > .layout-container {
  flex-grow: 1;
  height: 100%;
  padding: var(--gap-vertical-150) var(--column-spacer);
  max-width: calc(var(--column-width-12) + calc(var(--column-spacer) * 2));
  background-color: var(--color-white-normal);
  /* outline: 1px solid var(--color-gray-dark); */
}

main > .layout-container > span {
  /*
          this is span that start the fivision_PageContent
      */
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  gap: inherit;
  flex-grow: inherit;
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  main > .layout-container {
    padding: var(--gap-vertical-150) calc(var(--column-spacer) / 2);
    max-width: calc(var(--column-width-8) + var(--column-spacer));
  }
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  main > .layout-container {
    max-width: calc(var(--column-width-6) + var(--column-spacer));
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  main > .layout-container {
    max-width: calc(var(--column-width-5) + var(--column-spacer));
  }
}

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

.page-text {
  font-size: 16px;
  line-height: 1.5em;
}

/*
      3.4 Footer Styling
  */
.site-footer__bottom {
  width: 100%;
  padding-bottom: 3em;
  color: #000;
}

.container-footer {
  width: 100%;
  max-width: 89.375rem;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0.938em;
  padding-right: 0.938em;
}

@media (min-width: 60em) {
  .site-footer__bottom-inner {
    padding: 32px;
  }
}

.site-footer__bottom-inner {
  background-color: #f0f0f0;
  border-radius: 16px;
  text-align: center;
  padding: 24px;
}

.footer-bottom-badges {
  margin: 0 0 16px;
  padding: 0;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
}

.footer-bottom-badges {
  -ms-flex-wrap: wrap;
  list-style: none;
}

.footer-bottom-badges__link {
  display: block;
  transition: all 0.18s ease-in-out;
}

@media (min-width: 60em) {
  .footer-bottom-badges__img {
    width: 96px;
  }
}

.footer-bottom-badges__img {
  max-width: 100%;
  width: 76px;
}

.footer-copyright-text {
  font-size: 0.9rem;
  max-width: 700px;
  margin: auto;
  line-height: 1.4;
  font-weight: 400;
}

.footer-bottom-links {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 24px;
}

.footer-bottom-links__link {
  color: #000 !important;
  text-decoration: underline;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.footer-bottom-links__link:hover {
  text-decoration: none;
}

@media (min-width: 60em) {
  .footer-copyright-text {
    font-size: 1rem;
  }
}

/*
      4. Page General Containers
  */
.page-container,
#IndividualHandler01,
span[id*="IndividualHandler01"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-vertical-150);
  width: 100%;
}

.header-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-vertical-50);
  max-width: var(--column-width-12);
  width: 100%;
  text-align: center;
}

.section-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-vertical-150);
  max-width: var(--column-width-12);
  width: 100%;
}

.section-header {
  display: flex;
  align-items: center;
  gap: var(--gap-vertical-50);
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  text-wrap: nowrap;
  white-space: nowrap;
}

.section-header:after {
  content: "";
  display: inline;
  width: 100%;
  height: 1px;
  background-color: var(--color-gray-dark);
}

.page-navigation-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: space-between;
  width: var(--column-width-12);
  margin-top: var(--gap-vertical-200);
}

.prove-direction-buttons {
  align-items: center;
}

.navigation-forward-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap-horizontal);
}

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

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

  .navigation-forward-container {
    flex-direction: column-reverse;
  }

  .navigation-other-container {
    align-items: center;
    gap: var(--gap-vertical);
  }

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

/*
      5. Buttons
  */
.button-primary,
.fiviDocumentList #email-submit-btn,
.V3StatusCenterLogin .DefaultNextButton {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  min-width: var(--column-width-2);
  width: fit-content !important;
  height: var(--gap-vertical-200);
  margin: 0;
  padding: 0 10px;
  color: white !important;
  font-size: 18px;
  line-height: 18px;
  font-weight: 500;
  background-color: var(--color-primary-normal);
  border: 2px solid var(--color-primary-normal);
  border-radius: 5px;
  /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
  text-transform: uppercase;
  text-decoration: none;
}

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

.button-primary:hover:not(:disabled),
.button-primary:active:not(:disabled),
.button-primary:focus:not(:disabled),
.fiviDocumentList #email-submit-btn:hover:not(:disabled),
.fiviDocumentList #email-submit-btn:active:not(:disabled),
.fiviDocumentList #email-submit-btn:focus:not(:disabled),
.V3StatusCenterLogin .DefaultNextButton:hover:not(:disabled),
.V3StatusCenterLogin .DefaultNextButton:active:not(:disabled),
.V3StatusCenterLogin .DefaultNextButton:hover:not(:disabled) {
  background-color: transparent;
  /* color: var(--color-primary-normal) !important; */
  font-weight: 500;
  box-shadow: none;
  text-decoration: none;
}

.button-primary:disabled,
.fiviDocumentList #email-submit-btn:disabled {
  opacity: 0.5;
}

.button-other,
.MinorButton,
.fiviAddAnotherButton > a,
.fiviDocumentList .modal-footer > button,
.V3SummaryButtons.active,
.V3SummaryControl .fiviDocumentList .fiviFileUpload + .btn-default,
.V3SummaryControl .btn-primary,
.fiviDocumentList .btn-default,
.fiviPhoneControl
  > div[id*="_pnlSMSOptInOut"]
  div[id*="_outerButtonDiv"]
  label {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: var(--fiviInput-width);
  min-width: var(--column-width-2);
  width: fit-content !important;
  height: var(--gap-vertical-150);
  line-height: calc(var(--gap-vertical-150) - 4px);
  margin: 0;
  padding: 0 10px;
  color: var(--color-primary-normal) !important;
  font-size: 14px;
  font-weight: 600;
  background-color: transparent;
  border: 2px solid var(--color-primary-normal);
  border-radius: 5px;
  box-shadow: none;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  &:hover:not(:disabled),
  &:active:not(:disabled),
  &:focus:not(:disabled) {
    /* background-color: var(--color-primary-normal) !important; */
    color: #ffffff !important;
    /* border-color: var(--color-primary-normal) !important; */
    font-weight: 600;
    box-shadow: none;
    text-decoration: none;
  }

  &:disabled {
    opacity: 0.5;
  }
}

.button-link,
.button-link-alt,
.V3StatusCenterLogin .btn-link,
.V3SummaryControl .btn-link,
.V3SummaryControl .LinkClass,
.fiviRemoveBtn:before,
.MultiSelectTextboxAddButton input[type="button"],
.fiviInput:has(.MultiSelectTextboxAddButton) .fa-trash:after {
  /* min-width: var(--column-width-2); */
  text-align: left;
  background-color: transparent;
  border: none;
  font-size: 16px;
  line-height: 18px;
  font-weight: 600;
  color: var(--color-primary-normal);
  text-transform: uppercase;
  width: fit-content !important;
  padding: 0;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
}

.button-link-alt {
  text-transform: uppercase;
  font-weight: 600;
}

.button-link:hover:not(:disabled),
.button-link:active:not(:disabled),
.button-link:focus:not(:disabled),
.button-link-alt:hover:not(:disabled),
.button-link-alt:active:not(:disabled),
.button-link-alt:focus:not(:disabled),
.V3StatusCenterLogin .btn-link:hover:not(:disabled),
.V3StatusCenterLogin .btn-link:active:not(:disabled),
.V3StatusCenterLogin .btn-link:focus:not(:disabled),
.V3SummaryControl .btn-link:hover:not(:disabled),
.V3SummaryControl .btn-link:active:not(:disabled),
.V3SummaryControl .btn-link:focus:not(:disabled),
.V3SummaryControl .LinkClass:hover:not(:disabled),
.V3SummaryControl .LinkClass:active:not(:disabled),
.V3SummaryControl .LinkClass:focus:not(:disabled),
.MultiSelectTextboxAddButton input[type="button"]:hover,
.MultiSelectTextboxAddButton input[type="button"]:active,
.MultiSelectTextboxAddButton input[type="button"]:focus,
.fiviInput:has(.MultiSelectTextboxAddButton) .fa-trash:hover:after {
  text-decoration: underline;
  font-weight: 600;
  color: var(--color-primary-normal);
}

.button-other:disabled,
.button-other-alt:disabled,
.V3StatusCenterLogin .btn-link:disabled,
.V3SummaryControl .btn-link:disabled,
.V3SummaryControl .LinkClass:disabled {
  opacity: 0.5;
}

.fiviRemoveBtn {
  color: var(--color-primary-dark);
  cursor: default;
  width: 0;
  max-width: 100%;
  margin-right: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  order: 2;
  align-self: flex-end;
}

.fiviRemoveBtn.fa-2x {
  font-size: var(--font-size);
}

.fiviRemoveBtn + .tooltip {
  display: none !important;
}

.fiviRemoveBtn:before {
  content: "remove";
  cursor: pointer;
  font-family: var(--font-family);
  text-transform: none;
  white-space: nowrap;
  text-wrap: nowrap;
}

.fiviRemoveBtn:hover:not(:disabled):before,
.fiviRemoveBtn:active:not(:disabled):before,
.fiviRemoveBtn:focus:not(:disabled):before {
  text-decoration: underline;
  font-weight: 600;
  color: var(--color-primary-dark);
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .fiviRemoveBtn {
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
  }
}

/* Primary Button Styles  */
#btnNonMember > input,
#btnMember > input,
.thumbnail-call-to-action > input,
#btnNextButton_SubmitButton.button-primary,
.next-button,
.button-primary,
#btnNext_SubmitButton {
  height: 48px;
  border: 2px solid #0079c1;
  color: #fff !important;
  text-decoration: none;
  text-align: center;
  background: #0079c1;
  cursor: pointer;
  transition: all 0.18s ease-in-out;
  line-height: 1;
  border-radius: 24px;
  font-size: 0.8125rem;
  font-weight: 500;
  gap: 8px;
  padding: 0 1em;
  font-size: 16px;
  text-transform: capitalize;
  font-weight: 400 !important;
}

#btnNonMember > input:hover,
#btnMember > input:hover,
.thumbnail-call-to-action > input:hover,
#btnNextButton_SubmitButton.button-primary:hover,
.next-button:hover,
.button-primary:hover {
  background-color: #002743 !important;
  border: 2px solid #002743 !important;
  text-decoration: none !important;
  color: #fff !important;
}

/* Accent Green Button  */
.fiviAddAnotherButton > a,
.button-other,
span > #btnAdd {
  background-color: #aaca7d !important;
  border-color: #aaca7d !important;
  color: #000 !important;
  border-radius: 24px;
  height: 48px;
  text-decoration: none;
  border-style: none;
  text-shadow: none;
}

span > #btnAdd {
  padding: 0 1em;
  text-transform: capitalize;
  font-weight: 500;
}

.button-other {
  height: 36px;
  text-transform: capitalize;
}

.fiviAddAnotherButton > a:hover,
.button-other:hover,
span > #btnAdd:hover {
  background-color: #002743 !important;
  border: 2px solid #002743 !important;
  color: #fff !important;
  text-decoration: none;
  text-shadow: none;
}

/* Secondary Button  */
.MinorButton {
  color: #000 !important;
  border: 2.3px solid #000;
  background-color: transparent;
  border-radius: 24px;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize !important;
}

.MinorButton:hover,
#btnSearch_SubmitButton:active,
#btnSelect:active,
#btnSelect:focus {
  background-color: #002743 !important;
  border: 2px solid #002743 !important;
  color: #fff !important;
  font-weight: 500 !important;
  text-shadow: none;
}

/*
      5.1 Button Containers
  */
.add-another-individual-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

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

.framed-section {
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 5px;
  background-color: #fff;
  margin-bottom: 15px;
}

.button-primary {
  display: inline-block;
  margin: 5px 5px 0 0;
  padding: 10px 15px;
  text-decoration: none;
  color: white;
  background-color: #007bff;
  border-radius: 5px;
  transition: background-color 0.3s;
  border-radius: 24px;
}

.button-primary:hover {
  background-color: #0056b3;
}

.button-link {
  color: #007bff;
  text-decoration: none;
}

.button-link:hover {
  text-decoration: underline;
}

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

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

#accordion > .panel:has(> .panel-heading.collapsed) {
  outline: 2px solid var(--color-gray-dark);
  box-shadow: none;
}

#accordion > .panel > .panel-heading {
  display: flex;
  align-items: center;
  height: var(--input-height);
  padding: 0 var(--column-spacer) 0 0;
  background: white;
  border: none;
  border-radius: 5px;
}

#accordion > .panel > .panel-heading > .panel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: wrap;
  position: relative;
  text-transform: none;
}

#accordion > .panel > .panel-heading .panel-title > .panelArrow {
  position: absolute;
  right: -30px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -12px;
}

#accordion > .panel .panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-75);
  border: none;
  border-radius: 5px;
  padding: 0 0 var(--column-spacer) 0;
}

.panel-body::before,
.panel-body::after {
  display: none;
}

/*
      this is the accordion open
  */
#accordion > .panel > .panel-heading:has(+ .collapse.in) {
  padding-left: 0;
  background: transparent;
  transition: padding-left 0.5s ease-in-out;
}

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

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

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

/*
      this is with the accordion closed
  */
#accordion > .panel > .panel-heading.collapsed:has(+ .collapse:not(.in)) {
  padding-left: var(--column-spacer);
  transition: padding-left 0.5s ease-in-out;
}

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

/*
      this is with the accordion closing
  */
#accordion > .panel > .panel-heading.collapsed:has(+ .collapsing) {
  padding-left: var(--column-spacer);
  outline: none;
  transition: padding-left 0.5s ease-in-out;
}

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

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

.DefaultLabelClass,
.DefaultLabelClassV3 {
  display: flex;
  align-items: center;
  height: var(--input-height);
  position: absolute;
  left: var(--gap-horizontal-75);
  bottom: 0;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  line-height: var(--font-size-label);
  color: var(--font-color-label);
  font-family: var(--font-family-label);
  transition: bottom 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;
}

.FocusLabelClass {
  height: var(--input-focusLabel-fontSize);
  font-size: var(--input-focusLabel-fontSize);
  bottom: var(--input-focusLabel-offset);
  left: 0;
  font-weight: 600;
  text-transform: uppercase;
}

/* v3 specific */
.fiviLabelContainer {
  display: flex;
}

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

.DefaultLabelClassV3,
.fiviStaticLabel {
  display: flex;
  align-items: center;
  height: var(--input-height);
  margin: 0 !important;
  position: absolute !important;
  left: var(--gap-horizontal-50) !important;
  top: unset !important;
  bottom: 0;
  font-size: var(--font-size-label) !important;
  font-weight: var(--font-weight-label);
  line-height: var(--font-size-label) !important;
  color: var(--font-color-label);
  font-family: var(--font-family-label);
  transition: bottom 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 !important;
}

.DefaultLabelClassV3.FocusLabelClass,
.fiviStaticLabel {
  height: var(--input-focusLabel-fontSize);
  bottom: var(--input-focusLabel-offset) !important;
  font-size: var(--input-focusLabel-fontSize) !important;
  left: 0 !important;
  font-weight: 600;
  color: var(--font-color-label) !important;
  text-transform: uppercase;
}

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

.form-control {
  display: flex;
  align-items: center;
  width: 100% !important;
  height: var(--input-height);
  padding: 0 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: 2px solid var(--color-gray-dark) !important;
  border-radius: 30px;
}

.form-control:focus {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px color-mix(in srgb, var(--color-gray-dark) 60%, transparent);
}

.fiviTransparent {
  color: transparent;
}

/* v3 specific */
.DefaultFormControlClassV3 {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0px;
}

.fiviNewLine {
  display: none !important;
}

/*
      7.3 Fivi Input Containers
  */
.fiviTwoInput,
.fiviLongInput {
  /*
          can container either input elements or fiviInput containers
      */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-vertical-25) var(--gap-horizontal);
  flex-wrap: wrap;
}

.fiviTwoInput > input,
.fiviTwoInput > .fiviInput {
  max-width: var(--fiviInput-width-half);
}

.fiviTwoInput > .DefaultLabelClass {
  height: var(--input-focusLabel-fontSize);
  font-size: var(--input-focusLabel-fontSize);
  bottom: var(--input-focusLabel-offset);
  left: 0;
  font-weight: 600;
  text-transform: uppercase;
}

/*
      these containers normally contain a bunch of .fiviInput containers
  */
.fiviMultiInput {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
  flex-wrap: wrap;
  max-width: 100%;
  width: 100%;
  position: relative;
}

.fiviMultiContainer {
  display: flex;
  flex-direction: column;
  max-width: var(--column-width-full);
  width: 100%;
  gap: var(--gap-vertical) var(--gap-horizontal);
}

.fiviTwoInputContainer {
  /*
          Use this when you want two .fiviInputs to take
          up half the normal width and behave like a standard
          width .fiviInput.
      */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
  flex-wrap: wrap;
  max-width: var(--fiviInput-width);
  width: 100vw;
  position: relative;
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .fiviTwoInput > input {
    max-width: var(--fiviInput-width-half);
  }

  .fiviMultiInput {
    max-width: var(--fiviInput-width);
    width: 100%;
  }
}

/*
      v3 specific containers
  */
.fiviParentControl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-vertical);
  max-width: var(--column-width-12);
  width: 100%;
  margin: 0;
}

.fiviControl {
  display: inline-flex;
  padding: 0 !important;
  width: 100% !important;
  margin-bottom: calc(
    calc(var(--font-size) - 4px) + var(--gap-vertical-25)
  ) !important;
}

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

.fiviCheckBox > label,
.fiviCheckBox > span > label {
  text-indent: -3px;
  font-weight: 500;
  font-size: calc(var(--font-size-label) - 2px);
  line-height: var(--font-lineheight-input);
}

/*
      v3 checkbox
  */
.fiviCheckBox:has(> input[type="checkbox"]) {
  margin: 0 !important;
}

.fiviCheckBox > input[type="checkbox"] {
  width: fit-content;
  margin: 0;
}

/*
      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: calc(var(--fiviInput-vertical-spacing) - 14px) 0 0 0;
}

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

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

.divider::before {
  content: "";
  display: block;
  width: 208px;
  height: 2px;
  margin: auto;
  background-image: linear-gradient(to right, #636363 33%, rgba(0, 0, 0, 0) 0);
  background-position: bottom;
  background-size: 10px 2px;
  background-repeat: repeat-x;
}

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

/*
      7.9 Popover
          v2: .popover
          v3: .fivisionpopover
  */
.popover > .arrow,
.fivisionpopover > .arrow {
  display: none;
}

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

.fivisionpopover {
  position: absolute !important;
  top: calc(
    var(--input-height) + var(--input-marginTop-forLabelFocusSpace)
  ) !important;
  box-shadow: none;
  border: none;
  background-color: transparent;
  margin-top: var(--gap-vertical-25) !important;
}

/*
      8. fiVISION Controls
  */
/*
      8.1 fiVISION_ErrorSummary
          v2: #ErrorSummary
          v3: .fiviErrorSummary
  */
#ErrorSummary1,
.fiviErrorSummary {
  display: none;
}

#ErrorSummary1:has(li) {
  display: block;
  max-width: var(--column-width-6);
  width: 100%;
  margin: 0 auto;
}

.fiviErrorSummary:has(div) {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-25);
}

#ErrorSummary1 ul {
  padding-left: 0;
}

#ErrorSummary1 li,
.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;
}

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

.fiviPanel,
.fiviPanel > .fiviPanelContainer {
  max-width: 100%;
  /* width: 100%; */
}

.page-container > .fiviPanel,
.section-container > .fiviPanel,
.header-container > .fiviPanel {
  width: 100%;
}

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

.fiviProdServControl .DefaultTooltipClass {
  top: 0;
  right: 0;
  width: max-content !important;
}

.fiviProdContainer {
  max-width: var(--column-width-4);
  width: 100%;
  min-height: 100px;
  padding: var(--gap-horizontal-75);
  position: relative;
  background: white;
  border: 2px solid var(--color-gray-dark);
  border-radius: 3px;
  box-shadow: none;
}

.fiviProdContainer:has(input[id*="_ProductCheckbox_"]:checked),
.fiviProdContainer:has(input[id*="_GeneralService"]:checked) {
  background-color: #ffffff;
}

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

.fiviProdServ > .fiviCheckBox,
.fiviProdServ > .fiviCheckBox > span {
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  max-width: 100%;
  width: 100%;
}

.fiviProdServ > .fiviCheckBox > div:first-child,
.fiviProdServ > .fiviCheckBox > span > div:first-child {
  order: 3;
}

.fiviProdServ > .fiviCheckBox > .DefaultTooltipClass,
.fiviProdServ > .fiviCheckBox > span > .DefaultTooltipClass {
  position: relative;
  order: 1;
}

.fiviProdServ > .fiviCheckBox > label,
.fiviProdServ > .fiviCheckBox > span > label,
.hsa-products .fiviProdServ > div > label[for*='_ProductCheckbox_'] {
  font-size: var(--font-size-label);
  font-weight: 600;
  margin-left: -3px;
  width: 100%;
  text-wrap: wrap !important;
  white-space: nowrap;
  order: 2;
}

.hsa-products .fiviProdServ > div > label[for*='_ProductCheckbox_'] {
    margin-left: 3px;
    line-height: 22px;
}

.fiviProdServ .fiviAddAnotherButton {
  display: none;
  width: fit-content;
  align-self: center;
  justify-content: flex-end;
}

.fiviProdContainer:has(input[id*="_ProductCheckbox_"]:checked)
  .fiviAddAnotherButton {
  display: flex;
}

.fiviProdServ .fiviAddAnotherButton > a {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}

.fiviProdPanel {
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.fiviProdPanel:has(*):before {
  content: "";
  display: block;
  height: 2px;
  width: calc(100% + var(--gap-horizontal-150));
  margin-left: calc(var(--gap-horizontal-75) * -1);
  background-color: var(--color-gray-dark);
}

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

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

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

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

.fiviProdInnerPanel {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50) 0;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  position: relative;
}

.Service_MoreInfo {
  width: 100%;
  font-size: 14px;
}

.fiviCDWizardInfo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: var(--column-width-12);
  min-height: fit-content;
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
}

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

.fiviProdServ div:has(> div[id*='_ContributionType_']) {
    width: 100%;
    margin: 0 !important;
}

.fiviProdServ div[id*='_ContributionType_'],
.fiviProdServ div[id*='_ContributionYearType_'] {
    width: 100%;
    margin: 0 0 0 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    & > select {
        width: 100% !important;
        display: flex;
        align-items: center;
        width: 100% !important;
        height: calc(var(--input-height) * .75);
        padding: 0 var(--gap-horizontal-50);
        font-size: 16px;
        font-weight: var(--font-weight-input);
        line-height: var(--font-lineheight-input);
        color: var(--font-color-input);
        font-family: var(--font-family-input);
        border: 2px solid var(--color-gray-dark) !important;
        border-radius: 5px;
    }
}

.fiviProdServ div[id*='_ContributionYearType_'] {
    margin-top: 20px !important;
}

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

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

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

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

.fiviAddress > .fiviSameAs {
  max-width: calc(calc(var(--fiviInput-width) / 2) - var(--column-spacer));
  position: absolute;
  top: calc(
    calc(var(--font-lineheight-h3) + var(--fiviInput-vertical-spacing)) * -1
  );
  right: 0;
}

.fiviAddress > .fiviSameAs label {
  font-size: calc(var(--font-size-label) - 4px);
  line-height: var(--font-lineheight);
}

.fiviAddress > .DefaultAddressVerifyingClass {
  font-size: calc(var(--font-size) - 2px);
  line-height: var(--font-lineheight);
  font-weight: 500;
  text-align: center;
}

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

  .address-container > h3 {
    max-width: 100%;
  }

  .fiviAddress > .fiviSameAs {
    max-width: 100%;
    position: relative;
    top: unset;
    right: unset;
  }
}

/*
      8.5 fiVISION_PhoneTextBoxV2
          --fiviLongInput has the phone field, phone type, and preferred
          --fiviTwoInput has the phone field and either phone type or preferred
          --else its just the phone field
  */
.fiviPhoneControl {
  margin: 0;
  max-width: var(--fiviInput-width);
}

.fiviTwoInput.fiviPhoneControl,
.fiviLongInput.fiviPhoneControl {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-horizontal-25) var(--gap-vertical);
  flex-wrap: wrap;
}

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

.fiviPhoneControl .CtlValidator {
  top: calc(var(--input-marginTop-forLabelFocusSpace) + 3px);
  bottom: unset;
}

.fiviLongInput.fiviPhoneControl > input.form-control,
.fiviTwoInput.fiviPhoneControl > input.form-control {
  max-width: var(--fiviInput-width-partial-main) !important;
  width: 100%;
}

.fiviPhoneControl > .fiviCheckBox,
.fiviPhoneControl > select.form-control {
  max-width: var(--fiviInput-width-partial-alt);
  width: 100%;
}

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

.fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) {
  flex-wrap: wrap;
  gap: var(--gap-vertical-50);
}

.fiviTwoInput.fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"])
  > .DefaultLabelClass,
.fiviLongInput.fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"])
  > .DefaultLabelClass {
  top: 0;
}

.fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass {
  top: var(--input-marginTop-forLabelFocusSpace);
  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;
}

.fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"])
  > .DefaultLabelClass.FocusLabelClass {
  top: 0;
}

.fiviPhoneControl > div[id*="_pnlSMSOptInOut"] {
  width: 100%;
}

.fiviPhoneControl > div[id*="_pnlSMSOptInOut"] br {
  display: none;
}

.fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_smsOptionsDiv"] {
  background-color: var(--color-gray-normal) !important;
  padding: var(--gap-horizontal) !important;
  display: flex !important;
  gap: var(--gap-vertical);
  flex-direction: column;
  min-width: unset !important;
}

.fiviPhoneControl
  > div[id*="_pnlSMSOptInOut"]
  div[id*="_smsOptionsDiv"]
  > span {
  display: block;
  width: 100%;
}

.fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_messageIconDiv"] {
  display: none;
}

.fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] {
  display: flex;
  gap: var(--gap-horizontal);
  width: 100%;
}

.fiviPhoneControl
  > div[id*="_pnlSMSOptInOut"]
  div[id*="_outerButtonDiv"]
  div.form-element {
  width: calc(calc(100% - var(--gap-horizontal)) / 2);
  height: fit-content;
  padding: 0;
}

.fiviPhoneControl
  > div[id*="_pnlSMSOptInOut"]
  div[id*="_outerButtonDiv"]
  div.form-element
  > span {
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
}

.fiviPhoneControl
  > div[id*="_pnlSMSOptInOut"]
  div[id*="_outerButtonDiv"]
  label {
  min-width: unset;
  width: 100% !important;
}

.fiviPhoneControl
  > div[id*="_pnlSMSOptInOut"]
  div[id*="_outerButtonDiv"]
  div.form-element
  > span
  > input:checked
  + label {
  border: 2px solid var(--color-primary-normal);
  background: var(--color-primary-normal);
}

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

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

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

  .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass {
    bottom: calc(var(--input-height) + var(--gap-horizontal-25));
  }

  .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass {
    bottom: calc(
      var(--input-focusLabel-offset) +
        calc(var(--input-height) + var(--gap-horizontal-25))
    );
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fiviTwoInput.fiviPhoneControl > input.form-control,
  .fiviTwoInput.fiviPhoneControl > select.form-control {
    max-width: var(--column-width-2);
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .fiviTwoInput.fiviPhoneControl {
    gap: var(--gap-horizontal-25) var(--gap-vertical);
  }

  .fiviTwoInput.fiviPhoneControl > input.form-control,
  .fiviLongInput.fiviPhoneControl > input.form-control,
  .fiviTwoInput.fiviPhoneControl > select.form-control,
  .fiviLongInput.fiviPhoneControl > select.form-control {
    max-width: 100% !important;
  }

  .fiviTwoInput.fiviPhoneControl > select.form-control,
  .fiviLongInput.fiviPhoneControl > select.form-control {
    margin-top: 0px;
  }

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

  .fiviTwoInput.fiviPhoneControl > label.DefaultLabelClass {
    bottom: calc(
      var(--input-focusLabel-offset) +
        calc(var(--input-height) + var(--gap-horizontal-25))
    );
  }

  .fiviTwoInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass {
    bottom: calc(
      var(--input-focusLabel-offset) +
        calc(var(--input-height) + var(--gap-horizontal-25))
    );
  }

  .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass {
    bottom: calc(calc(var(--input-height) + var(--gap-horizontal-25)) * 2);
  }

  .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass {
    bottom: calc(
      var(--input-focusLabel-offset) +
        calc(calc(var(--input-height) + var(--gap-horizontal-25)) * 2)
    );
  }
}

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

.fiviIDType > div[id*="issueDateDiv"],
.fiviIDType > div[id*="expirationDateDiv"] {
  max-width: var(--fiviInput-width-half);
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .fiviIDType > div[id*="issueDateDiv"],
  .fiviIDType > div[id*="expirationDateDiv"] {
    max-width: var(--fiviInput-width);
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fiviIDType {
    max-width: var(--fiviInput-width);
  }

  .fiviIDType > div[id*="issueDateDiv"],
  .fiviIDType > div[id*="expirationDateDiv"] {
    max-width: var(--fiviInput-width-half);
  }
}

/*
      8.7 fiVISION_HousingDurationHistory
  */
.fiviHousingDurationHistory {
  max-width: var(--column-width-full);
}

.fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"],
.fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] {
  max-width: var(--fiviInput-width-half);
}

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

.fiviHousingDurationHistory .DefaultAddressVerifyingClass {
  width: var(--fiviInput-width);
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  .fiviHousingDurationHistory center {
    width: var(--fiviInput-width-double);
  }
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"],
  .fiviHousingDurationHistory
    .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] {
    max-width: var(--fiviInput-width);
  }

  .fiviHousingDurationHistory .DefaultAddressVerifyingClass {
    width: var(--column-width-4);
  }

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

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"],
  .fiviHousingDurationHistory
    .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] {
    max-width: var(--fiviInput-width-half);
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"],
  .fiviHousingDurationHistory
    .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] {
    max-width: var(--fiviInput-width-half);
  }
}

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

.fiviEmpHistoryControl center {
  width: 100%;
}

.fiviEmpHistoryControl .fiviRemoveBtn:before {
  content: "Remove Prior Employer";
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  .fiviEmpHistoryControl center {
    width: var(--fiviInput-width-double);
  }
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .fiviEmpHistoryControl center {
    width: var(--fiviInput-width);
  }
}

/*
      8.9 fiVISION_IndividualIncome
  */
.fiviIncomeControl {
  max-width: 100%;
  width: 100%;
}

.fiviIncomeControl > .fiviMultiContainer {
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 100%;
}

.fiviIncomeControl > .fiviMultiContainer > div {
  max-width: 100%;
  width: 100vw;
}

.fiviIncomeControl .fiviMultiInput {
  gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing);
}

.fiviIncomeControl .fiviMultiInput .fiviInput {
  max-width: var(--fiviInput-width-half);
}

.fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) {
  display: flex;
  width: 100%;
  max-width: 100%;
}

.fiviIncomeControl
  > .fiviMultiContainer
  > div:has(span[id*="btnAddIncome"])
  > span {
  width: 100%;
}

.fiviIncomeControl .fiviRemoveBtn:before {
  content: "Remove Optional Income";
}

.fiviIncomeControl input[id*="ntbHoursPerWeek"]::placeholder {
  color: transparent;
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  .fiviIncomeControl .fiviMultiInput > .fiviInput,
  .fiviIncomeControl .fiviMultiInput > .fiviInput > .fiviInput {
    max-width: var(--fiviInput-width);
  }

  .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) {
    width: var(--fiviInput-width-double);
  }

  .fiviIncomeControl .fiviRemoveBtn {
    left: var(--fiviInput-width);
  }
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) {
    width: var(--fiviInput-width);
  }

  .fiviIncomeControl .fiviRemoveBtn {
    top: var(--input-marginTop-forLabelFocusSpace);
    left: unset;
    right: var(--gap-horizontal-25);
  }
}

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

/*
      8.10 fiVISION_IndividualDetails
  */
.fiviIndividualDetails {
  width: 100%;
}

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

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

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

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

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

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

/*
      8.11 fiVISION_ProductsAndServicesSelected
  */
.fiviProdServiceSelected > div {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-75);
  font-size: calc(var(--font-size) + 2px);
  font-weight: 600;
}

.fiviProdServiceSelected > div > ul {
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--gap-vertical-25) 1px;
  flex-wrap: wrap;
  font-weight: 400;
  font-size: var(--font-size);
}

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

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

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

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

.fiviProdServiceSelected > div > br + ul > li {
  margin-left: var(--gap-horizontal-25);
  font-size: var(--font-size);
  margin-top: 0;
}

.fiviProdServiceSelected > div > br + ul > li > b {
  font-weight: 500;
}

/*
      8.12 fiVISION_ProductRelationships
  */
.fiviProductRelationship {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  border: 1px solid var(--color-gray-dark);
  border-radius: 5px;
  max-width: 100%;
  width: fit-content;
  box-shadow: none;
}

.fiviProductRelationship table {
  overflow-x: auto;
  white-space: nowrap;
  border: none;
  margin: 0;
}

.fiviProductRelationship tr {
  display: flex;
  flex-wrap: nowrap;
  padding: 0 var(--column-spacer);
  border-bottom: 1px solid var(--color-gray-dark);
}

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

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

.fiviProductRelationship tr:last-of-type {
  border: none;
}

.fiviProductRelationship td {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--column-width-2);
  height: calc(var(--font-size) * 3);
  text-wrap: wrap;
  white-space: nowrap;
  padding: 0 !important;
  line-height: var(--font-lineheight);
  background-color: transparent !important;
  border: none !important;
  font-size: var(--font-size);
}

.fiviProductRelationship tr > td:first-of-type {
  justify-content: flex-start;
  font-weight: 600;
  width: var(--column-width-3);
}

.fiviProductRelationship tr[id*="_ServiceRow"] > td:first-of-type {
  padding-left: var(--column-spacer) !important;
  font-weight: 400;
}

.fiviProductRelationship tr:first-of-type > td {
  font-weight: bold;
  text-align: left !important;
  border: none;
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .fiviProductRelationship tr {
    gap: 0 var(--column-spacer);
  }

  .fiviProductRelationship td {
    width: var(--column-width);
  }

  .fiviProductRelationship tr > td:first-of-type {
    width: var(--column-width-2);
  }

  .fiviProductRelationship tr:first-of-type > td {
    text-align: center !important;
  }
}

/*
      8.13 fiVISION_DocumentListV2
  */
.fiviDocumentList {
  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 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:nth-of-type(odd) {
  background-color: white !important;
}

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

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

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

.V3MessagesHeaderClass th {
  max-width: var(--column-width-3) !important;
  width: 100% !important;
}

.fiviDocumentList table td,
.fiviDocumentList .V3MessagesHeaderClass th {
  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 br {
  display: none;
}

.fiviDocumentList table td:last-of-type > span:has(.btn-default) {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin-top: var(--gap-vertical-25);
}

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

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

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

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

.fiviDocumentList .ModalContent br {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
      8.14 fiVISION_DisclosuresList
  */
.fiviDisclosureList {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
  width: 100%;
  padding-left: var(--gap-horizontal-150);
}

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

.fivi-disclosure-modal > .fiviDisclosure-checkbox-container label {
  font-weight: 500;
  font-size: calc(var(--font-size) + 2px);
  width: fit-content;
}

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

.fivi-disclosure-modal > .fiviDisclosure-checkbox-container > i {
  padding: 0 !important;
}

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

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

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

.fiviIDAuth br {
  display: none;
}

.fiviIDAuth-question-container > span:has(label) {
  display: flex;
  gap: var(--gap-horizontal-25);
  max-width: 95%;
  width: fit-content;
  font-size: var(--font-size-h4);
  line-height: var(--font-lineheight-h4);
  color: var(--font-color-h4);
  font-weight: var(--font-weight-h4);
  font-family: var(--font-family-h4);
  text-align: left;
}

.fiviIDAuth-question-container > span > label {
  font-weight: 500;
  font-size: var(--font-size-label);
}

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

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

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

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

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

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

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

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

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

.fiviProductFunding > .fiviProductFundingItem > .fiviInput > label {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
  font-size: var(--font-size-label);
  font-weight: 500;
}

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

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

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

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

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

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

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

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

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

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

.fiviACHControl > .fiviACHStatus {
  order: 5;
}

.fiviACHControl > .fiviACHcbCont {
  order: 6;
}

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

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

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

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

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

  .fiviACHControl > .fiviACHStatus {
    order: 4;
  }

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

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

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

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

.fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > select,
.fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > .TwoControls {
  width: calc(100% / 3) !important;
  margin: 0;
}

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

.fiviCreditCardControl
  > .fiviCCCardInfo
  > .fiviTwoInput
  > select:nth-of-type(1) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-color: transparent !important;
}

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

.fiviCreditCardControl
  > .fiviCCCardInfo
  > .fiviTwoInput
  > .TwoControls
  > input {
  margin: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-color: transparent !important;
}

/*
      8.19 fiVISION_ApplicantWithdraw
  */
.fiviApplicantWithdraw {
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-75);
  position: relative;
}

.fiviApplicantWithdraw > .CtlValidator {
  top: -3px;
  bottom: unset;
  left: -8px;
}

/*
      8.20 fiVISION_ProgressBar
  */
.progress-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
}

.journey-bar-icons {
  display: none;
}

.journey-bar {
  margin-bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
}

.journey-bar > tbody > tr {
  display: flex;
  gap: var(--gap-horizontal-50);
}

.journey-bar > tbody > tr > td {
  border-top: none;
  padding: 0;
  color: #ffffff;
}

.journey-bar-group {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  min-width: var(--column-width);
  gap: var(--gap-vertical-25);
}

.journey-bar-group > span {
  padding: 0 var(--gap-horizontal-25);
  font-size: calc(var(--font-size) - 2px);
  font-weight: 500;
}

.journey-bar-group:after {
  content: " ";
  width: 100%;
  height: 10px;
  border-radius: 5px;
}

.journey-bar-group.previous-group span {
  color: var(--color-gray-normal);
}

.journey-bar-group.previous-group:after {
  background-color: var(--color-gray-normal);
}

.journey-bar-group.current-group > span {
  color: #ffffff;
  opacity: 100%;
}

.journey-bar-group.current-group:after {
  background-color: #ffffff;
}

.journey-bar-group.future-group span {
  color: var(--color-primary-light);
}

.journey-bar-group.future-group:after {
  background-color: var(--color-primary-light);
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
  .journey-bar {
    justify-content: flex-start;
  }

  .journey-bar-group > span {
    display: none;
  }

  .progress-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .progress-container {
    width: 100%;
    flex-grow: unset;
  }

  #pbJourneyBar {
    width: 100%;
  }

  .journey-bar {
    justify-content: center;
  }

  .journey-bar > tbody {
    width: 100%;
  }

  .journey-bar > tbody > tr {
    width: 100%;
  }

  .journey-bar-group {
    min-width: calc(calc(100% / 5) - var(--gap-horizontal-50));
  }
}

/*
      8.21 fiVISON_IndividualHandler
  */
#IndividualHandler01,
span[id*="IndividualHandler01"] {
  width: 100%;
}

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

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

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

.V3StatusCenterLogin br {
  display: none;
}

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

/*
      8.23 Status Center Summary (v3)
  */
.V3SummaryControl header {
  background-image: none;
}

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

.V3StatusCenterLogin > #pnlEnterPassword,
.V3StatusCenterLogin > #pnlShowCreatePass,
.V3StatusCenterLogin > #pnlShowMFACode,
.V3StatusCenterLogin > #pnlShowMFADropdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-vertical);
  max-width: var(--column-width-12);
  width: 100%;
  margin: 0;
}

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

/*
      8.23.1 SC Summary Header (v3)
  */
.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;
}

/*
      8.23.1.1 SC Summary Header Mobile Badge
          Hiding this and handling mobile styling differently.  If you want to use it
          un-display-none the navbar-header and uncomment out the commented out bits.
  */
.V3SummaryHeader > #navbar-header {
  display: none !important;
}

/*
  
  .V3SummaryHeader > #navbar-header .V3SummaryCollapsedMenuButton {
      border: 2px solid var(--color-secondary-light);
      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;
      margin: 0 var(--gap-horizontal-50) 0 0;
  }
  
  .V3SummaryHeader > #navbar-header .V3SummaryCollapsedMenuButton > .icon-bar {
      background-color: var(--color-primary-dark);
  }
  
  .V3SummaryHeader > #navbar-header .V3SummaryBadge {
      right: var(--gap-vertical-25);
      left: unset;
      background-color: var(--color-secondary-dark);
      z-index: 2;
  }
  
  .V3SummaryHeader > #navbar-header #mobile-badge.V3SummaryBadge {
      top: calc(var(--gap-vertical-50) * -1);
  }
  
  */
/*
      8.23.1.2 SC Summary Header Icons/Navigation
          id of topNav
  */
.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-light);
  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-dark) !important;
  fill: var(--color-primary-dark) !important;
}

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

.V3SummaryHeader > #topNav > ul > .nav-item .badge {
  right: var(--gap-vertical-25);
  left: unset;
  background-color: var(--color-secondary-dark);
  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-dark);
    z-index: 2;
  }
}

/*
      8.23.2 SC Summary 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 {
  padding: 0;
  background: transparent;
  margin: 0;
  text-align: left;
}

.V3SummaryControl .headline-container > h1 {
  font-size: var(--font-size-h1);
  text-transform: capitalize;
  font-weight: var(--font-weight-h1);
  text-align: center;
}

/*
      8.23.2.1 SC Summary 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-light);
  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-dark);
}

.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-dark);
  font-size: var(--font-size-h3);
  text-transform: capitalize;
  margin: 0;
}

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

/*
      8.23.2.2 SC Summary 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: center;
}

.V3SummaryControl
  header:has(#nav-messages.active)
  + article
  .headline-container
  > span
  div:has(.btn-primary) {
  margin-bottom: var(--gap-vertical-150);
  text-align: center;
}

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

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

/*
      8.24 v3TextBox
          ***MOVE TO TOP OF fivi Controls when converting to v3***
          its a base level control, it should be first in the hierarchy of controls
          for now its only SC so here is fine.
  */
.fiviTextBox {
  flex-wrap: nowrap;
}

/*
      8.25 fiVISION_FinicityFundingAccountVerification
  */
.fiviFinicity,
.fiviFinicity #RealTimeInput,
.fiviFinicity .fivi-verifyNow-contents {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-vertical-50);
  font-size: calc(var(--font-size) + 2px);
}

.fiviFinicity #RealTimeInput > div {
  width: 100% !important;
  text-align: center;
}

/*
      fiVISION_OneTimePasscode 
  */
.fiviOneTimePasscode .fiviPanelContainer {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-horizontal);
}

.fiviOneTimePasscode .fiviOTPButtonGroup {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-horizontal);
  margin-top: var(--gap-horizontal-50);
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .fiviOneTimePasscode .fiviOTPButtonGroup {
    flex-direction: column-reverse;
    gap: var(--gap-vertical);
  }
}

/*
      fiVISION_WorkflowSurvey
  */
.fiviWorkflowSurvey {
  width: 100%;
  max-width: 100%;
}

.fiviWorkflowSurvey > div {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-horizontal);
}

.fivi-workflow-survey-item {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-50);
}

.fivi-workflow-survey-question > label {
  font-weight: 600;
}

.fivi-workflow-survey-answers {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-25);
  padding-left: var(--gap-horizontal);
}

.fivi-workflow-survey-answers .fiviCheckBox > label {
  font-weight: 400;
}

.ErrorMessage.fivi-workflow-survey-error {
  font-weight: 600;
  font-size: calc(var(--font-size) - 2px);
}

/*
      8.28 Prove
  */
.prove-direction-buttons {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: center;
  gap: var(--gap-horizontal);
  width: 100%;
}

.prove-check-phone-image-container {
  justify-content: center;
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  #pilProve_overallProveDiv {
    width: 100%;
  }

  .prove-container {
    display: flex;
    width: 100%;
  }

  .prove-direction-buttons {
    flex-direction: column;
    align-items: center;
    gap: var(--gap-vertical);
  }
}

/*
      8.29 Person Search
  */
.page-personsearch {
  gap: 0;
}

.page-personsearch [id$="IndividualHandler01"] {
  width: 100%;
}

.fiviPersonSearch {
  width: 80%;
}

.fiviPersonSearch .form-inline {
  display: flex;
}

.fiviPersonSearch .form-control {
  margin-top: 0;
}

/*
      9. Page Specific
  */
/*
      9.1 Default Page
  */
main > .layout-container:has(.page-Default-Content) {
  background-color: unset;
  outline: none;
}

.page-Default-Content .h1 {
  font-weight: 300;
}

.lets-get-started-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-vertical-75);
  max-width: var(--column-width-6);
  width: 100%;
  height: calc(460px + var(--gap-vertical));
  padding: var(--gap-vertical) var(--gap-horizontal);
  background: var(--color-client-gray-light);
  border: 1px solid var(--color-gray-dark);
  border-radius: 32px;
}

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

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

.what-you-need li {
  font-size: 13px;
}

.lets-get-started-container > #IndividualHandler01 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

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

.page-Default-Content .thumbnail {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  gap: var(--gap-vertical-75);
  max-width: var(--column-width-5);
  width: 100%;
  min-height: 230px;
  margin: 0;
  padding: var(--gap-vertical) var(--gap-horizontal);
  border: 1px solid var(--color-gray-dark);
  background-color: var(--color-client-gray-light);
  border-radius: 0px;
  transition: none;
  box-shadow: none;
  border-radius: 32px;
}

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

.page-Default-Content .thumbnail-call-to-action {
  width: 100%;
  margin-top: auto;
  display: flex;
  align-items: flex-end;
}

.thumbnail-call-to-action:hover span#btnNonMember::after,
.thumbnail-call-to-action:hover span#btnMember::after,
.thumbnail-call-to-action:hover .arrow-right {
  color: var(--color-primary-dark);
}

@media all and (max-device-width: 1106px), all and (max-width: 1106px) {
  .lets-get-started-container {
    max-width: var(--column-width-5);
  }

  .page-Default-Content .thumbnail {
    max-width: var(--column-width-4);
  }

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

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

  .lets-get-started-container > #IndividualHandler01 {
    align-items: flex-start;
  }

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

  .page-Default-Content .thumbnail {
    max-width: 100%;
    min-height: fit-content;
  }
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .default-thumbnail-container {
    flex-wrap: wrap;
  }

  .default-thumbnail-container > .thumbnail {
    min-height: fit-content;
  }

  .thumbnail-call-to-action,
  .thumbnail-call-to-action > #IndividualHandler01 {
    flex-direction: row;
    justify-content: flex-end;
  }

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

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

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

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

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

/*
      9.2 Status Center - Default
  */
.page-StatusCenterDefault {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-vertical-200);
  max-width: var(--column-width-12);
  width: 100%;
  line-height: var(--font-lineheight);
}

.page-StatusCenterDefault > .page-navigation-container {
  flex-direction: column;
  align-items: center;
  margin-top: 0;
}

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

.page-StatusCenter > .page-navigation-container {
  flex-direction: column;
  align-items: center;
  margin-top: 0;
}

/*
      9.4 Funding Method
  */
.funding-method-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: var(--column-width-12);
  gap: var(--gap-vertical) var(--gap-horizontal);
}

.funding-method-container > .fiviPanel > .fiviMultiInput,
.funding-method-container > .fiviPanel {
  width: 100%;
  max-width: var(--column-width-3);
}

.funding-method-container .fiviCheckBox > div {
  display: none;
}

.funding-method-container .fiviCheckBox > label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--column-width-3);
  height: var(--input-height);
  border: 2px solid var(--color-gray-dark);
  border-radius: 2px;
  padding: 0 var(--column-spacer);
  text-align: center;
  cursor: pointer;
}

.funding-method-container .fiviCheckBox > div.checked + label {
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  background-color: var(--color-gray-light);
}

.funding-method-container .fiviCheckBox > label:hover {
  color: var(--color-primary-normal);
  border-color: var(--color-primary-normal);
}

#pnlSelectFundingMethodDetails .fiviPanel {
  width: 100%;
}

.funding-detail {
  padding: var(--column-spacer);
  outline: 2px solid var(--color-gray-dark);
  gap: var(--gap-vertical-50);
  width: 100%;
  max-width: calc(var(--fiviInput-width) + calc(var(--column-spacer) * 2));
  margin: 0 auto;
}

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

.funding-detail .section-header:before {
  content: "";
  display: inline;
  width: 100%;
  height: 1px;
  background-color: var(--color-gray-dark);
}

.funding-detail .fiviInput,
.funding-detail .fiviTwoInput {
  width: 100%;
}

@media all and (max-device-width: 656px), all and (max-width: 656px) {
  .funding-method-container > .fiviPanel {
    width: 100%;
    max-width: calc(50% - calc(var(--column-spacer) / 2));
  }

  .funding-method-container > .fiviPanel > .fiviMultiInput {
    max-width: 100%;
    width: 100%;
  }

  .funding-method-container > .fiviPanel > .fiviMultiInput > .rb-as-button {
    max-width: 100%;
  }

  .funding-method-container .fiviCheckBox > label {
    width: 100%;
  }
}

@media all and (max-device-width: 452px), all and (max-width: 452px) {
  .funding-method-container > .fiviPanel {
    width: 100%;
    max-width: 100%;
  }
}

/*
      9.5 eSign Agreement
  */
.page-eSignAgreement #lnkESignAgreement,
.page-eSignAgreement .fiviCheckBox > label {
  font-size: calc(var(--font-size) + 2px);
}

/*
      9.6 Disclosure
  */
.page-Disclosures .page-text.disclosure-click-text {
  font-weight: 600;
  color: red;
}

.arbitration-list ol li:not(:last-of-type) {
  margin: 0 0 2rem 0;
}

#lnkRegE>span.DefaultLabelClass {
	display: none;  
}

/*
      9.7 ID Authentication
  */
@media all and (max-device-width: 834px), all and (max-width: 834px) {
  .page-ApplicantIDAuthentication H2.section-header {
    display: flex;
    flex-direction: column;
  }
}

/* 
  9.8 Custom Styles for FAQ Section 
  */
/* FAQ Section Styling */
.faq-container {
  width: 100%;
  margin: 0;
  padding: 0;
}

.faq-item {
  padding: 10px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #e4ebec;
  /* Optional separator between items */
}

.faq-question {
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 5px;
}

.faq-answer {
  padding-left: 15px;
  margin: 0;
}

/* 9.9 Expected Activity  */
.rbGroupQuest {
  font-size: var(--font-size-input);
  line-height: var(--font-lineheight);
}

.rbGroupTwoAnswers {
  margin-top: 1em;
}

.rbGroupTwoAnswers .fiviCheckBox,
.cbButtonGroup .fiviCheckBox {
  margin-top: 1em;
}

#tbThirdParty .DefaultLabelClass {
  top: 15px;
}

#tbNature {
  width: 350px;
}

@media all and (max-device-width: 400px), all and (max-width: 400px) {
  #tbNature {
    padding-right: 2em;
  }
}

/* 9.91 Beneficial Ownership  */
.page-BeneficialOwnership .center {
  justify-content: center;
  text-align: center;
}
/*
      9.10 Workflow Selection Page
  */
.account-type-tiles {
  display: grid;
  grid-template-columns: 1fr; 
  gap: 2rem;
  margin-top: 2rem;
  width: 100%;
}

@media (min-width: 700px) {
  .account-type-tiles {
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media (min-width: 1100px) {
  .account-type-tiles {
    grid-template-columns: repeat(4, 1fr); 
  }
}

.account-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--color-white-normal);
  border: 1px solid var(--color-gray-dark);
  border-radius: 16px;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.account-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.account-tile h3 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
}

.account-tile p {
  font-size: 1rem;
  color: #4a4a4a; 
  line-height: 1.5;
  margin-top: 0.5rem;
}


.cta-button {
  display: inline-block;
  margin-top: 1.5rem;
  align-self: flex-start;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  background-color: var(--color-primary);
  color: white;
  font-weight: bold;
  font-size: 0.95rem;
  text-align: center;
  transition: background-color 0.2s ease;
}

.account-tile:hover .cta-button {
  background-color: var(--color-primary-dark);
}

.account-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 0.5rem;
  margin: 0 auto 1rem auto;
  display: block;
  object-fit: contain;
}


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

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

span [id$="tbOtherCitizenshipCountries"] {
  flex-direction: column;
}

span [id$="tbOtherCitizenshipCountries"] label {
  height: var(--input-focusLabel-fontSize);
  font-size: var(--input-focusLabel-fontSize);
  bottom: var(--input-focusLabel-offset);
  left: 0;
  font-weight: 600;
  text-transform: uppercase;
  top: 0;
}

.MultiSelectTextboxAddButton {
  display: flex;
  justify-content: flex-start;
}

.MultiSelectTextboxAddButton input[type="button"] {
  width: auto;
  padding: 0 1rem;
  margin-top: 1rem;
}

.fiviInput:has(.MultiSelectTextboxAddButton) {
  & > div[id*="TextBox_divMultiSelect"] {
    position: relative;
    & > label {
      position: unset;
      height: 0;
      width: 0;
      & > .fa-trash {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0;
        pointer-events: all;
        cursor: pointer;
        &:before {
          display: none;
        }
        &:after {
          content: "REMOVE";
          font-family: var(--font-family-pri);
          padding: 0 1rem;
        }
      }
    }
  }
}

#pnlDocuments {
  width: 100%;
}

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

/*
      11. Admin Console
  */

.AdminContent .aspNetDisabled > input {
  width: 20px;
}

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

.layout.AdminConsole > header,
.layout.AdminConsole > .site-footer__bottom {
  display: none;
}

.layout.AdminConsole > main {
  padding: 40px 10px;
}

.layout.AdminConsole > main > .layout-container {
  width: 100%;
  max-width: calc(980px - 40px);
}

.layout.AdminConsole .page-navigation-container {
  max-width: 100%;
}

.branch-business-select {
  margin: auto;
}

.branch-business-select fieldset > span,
label {
  display: inline;
  padding-right: 1em;
}

.branch-business-select h2 {
  margin-bottom: 1em !important;
}

.AdminConsole .add-another-individual-container {
  width: 100%;
  padding-top: 3em;
}

.AdminConsole {
  --fiviInput-width: var(--column-width-5);
  --fiviInput-width-half: var(--column-width-5);
  & .fiviIDType,
  & .fiviPhoneControl {
    max-width: 100%;
  }
  & .fiviEmpHistoryControl {
    display: block;
    width: 100%;
  }
  & .fiviLongInput.fiviPhoneControl > input.form-control,
  & .fiviTwoInput.fiviPhoneControl > input.form-control {
    max-width: var(--fiviInput-width) !important;
  }
  & .funding-detail {
    max-width: 100%;
    padding: var(--column-spacer) 8px;
  }
  & .fiviPhoneControl > .fiviCheckBox {
    max-width: var(--column-width-2);
  }
  & .fiviTwoInput.fiviPhoneControl > select.form-control {
    max-width: var(--column-width-3);
  }
  & .fiviBeneficiaries {
    width: 100%;
  }
}

.AdminContent > table td:has(> input#ReadOnly),
.AdminContent > table td > span:has(> input#ReadOnly) {
  display: flex;
  gap: 10px;
  align-items: center;
  & > label {
    font-weight: bold;
    text-wrap: nowrap;
    white-space: nowrap;
    font-size: 16px;
  }
}

.AdminContent > table td:has(> select) {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: bold;
  text-wrap: nowrap;
  white-space: nowrap;
  font-size: 16px;
  & > select {
    margin-top: 0;
  }
}

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

.AdminContent span[id*="IndividualHandler01"] {
  align-items: center;
}

.AdminContent .page-eSignAgreement .funding-method-container {
  width: 100%;
}