/*
    Layout v2.5 Mark 3

    Table of Contents

    1. Variables
    2. General Elements & Classes
    3. Page Structure
    4. Page General Containers
    5. Inputs
    6. Buttons
    7. Controls
    8. Pages
    9. Admin Console

*/

/*
    1. Variables
*/

:root {
  /*colors*/
  /*gray scale*/
  --color-white-light: #ffffff;
  --color-white-normal: #ffffff;
  --color-white-dark: #ffffff;
  --color-gray-light: #f0f0f0;
  --color-gray-normal: #d3d3d3;
  --color-gray-dark: #595959;
  --color-black-light: #222;
  --color-black-normal: #222;
  --color-black-dark: #222;

  /*client colors*/
  --color-tdecu-red: #d24114;
  --color-tdecu-purple: #004456;
  --color-tdecu-teal: #00586f;
  --color-tdecu-font: #222;
  --color-journey-red: #c10230;
  --color-solutions-blue: #005971;
  --color-solutions-blue-hover: #004456;
  --color-solutions-blue-75: #408395;
  --color-solutions-blue-50: #7facb8;
  --color-solutions-blue-25: #bfd5db;
  --color-action-orange: #d24114;
  --color-action-orange-hover: #cd3100;
  --color-eggshell: #d9ecf4;
  --color-eggshell-75: #e2f1f7;
  --color-eggshell-50: #ecf5f9;
  --color-eggshell-25: #f6fafc;
  --color-success-green: #6e883e;
  --color-warning-yellow: #f8c000;
  --color-error-red: #f30b0b;

  /*font family*/
  --font-family: Lato, system-ui, sans-serif;
  --font-family-alt: Lato, system-ui, sans-serif;

  /*fonts*/
  /*default font*/
  --font-size: 18px;
  --font-lineheight: 24px;
  --font-color: var(--color-tdecu-font);
  --font-weight: 400;

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

  /*input label*/
  --font-size-input-label: 14px;
  --font-lineheight-input-label: 17px;
  --font-color-input-label: var(--font-color);
  --font-weight-input-label: 600;
  --font-family-input-label: var(--font-family);

  /*input label focus*/
  --font-size-input-label-focus: 14px;
  --font-lineheight-input-label-focus: 14px;
  --font-color-input-label-focus: var(--font-color);
  --font-weight-input-label-focus: 600;
  --font-family-input-label-focus: var(--font-family);
  --text-transform-input-label-focus: unset;

  /*label font*/
  --font-size-label: 14px;
  --font-lineheight-label: 20px;
  --font-color-label: var(--font-color);
  --font-weight-label: 600;
  --font-family-label: var(--font-family);

  /*page-header | h1 font*/
  --font-size-pageHeader: 30px;
  --font-lineheight-pageHeader: 40px;
  --font-color-pageHeader: var(--font-color);
  --font-weight-pageHeader: 500;
  --font-family-pageHeader: var(--font-family);

  /*page-section-header | h2 font*/
  --font-size-sectionHeader: 24px;
  --font-lineheight-sectionHeader: 24px;
  --font-color-sectionHeader: var(--color-tdecu-teal);
  --font-weight-sectionHeader: 600;
  --font-family-sectionHeader: var(--font-family-pageHeader);

  /*page-sub-section-header | h3 font*/
  --font-size-subSectionHeader: 20px;
  --font-lineheight-subSectionHeader: 20px;
  --font-color-subSectionHeader: var(--font-color-pageHeader);
  --font-weight-subSectionHeader: 400;
  --font-family-subSectionHeader: var(--font-family-pageHeader);

  /*column structure*/
  --column-width: 66px;
  --column-spacer: 24px;
  --column-spacer-vertical: 40px;
  --column-spacer-half: calc(var(--column-spacer) / 2);
  --column-width-2: calc(calc(var(--column-width) * 2) + var(--column-spacer));
  --column-width-3: calc(
    calc(var(--column-width) * 3) + calc(var(--column-spacer) * 2)
  );
  --column-width-4: calc(
    calc(var(--column-width) * 4) + calc(var(--column-spacer) * 3)
  );
  --column-width-5: calc(
    calc(var(--column-width) * 5) + calc(var(--column-spacer) * 4)
  );
  --column-width-6: calc(
    calc(var(--column-width) * 6) + calc(var(--column-spacer) * 5)
  );
  --column-width-7: calc(
    calc(var(--column-width) * 7) + calc(var(--column-spacer) * 6)
  );
  --column-width-8: calc(
    calc(var(--column-width) * 8) + calc(var(--column-spacer) * 7)
  );
  --column-width-9: calc(
    calc(var(--column-width) * 9) + calc(var(--column-spacer) * 8)
  );
  --column-width-10: calc(
    calc(var(--column-width) * 10) + calc(var(--column-spacer) * 9)
  );
  --column-width-11: calc(
    calc(var(--column-width) * 11) + calc(var(--column-spacer) * 10)
  );
  --column-width-12: 100%;

  /*control structure*/
  --control-width: calc(
    calc(var(--column-width) * 3) + calc(var(--column-spacer) * 2)
  );
  --control-height: 40px;
  --label-height: 26px;
  --horizontal-object-spacer: 20px;
  --object-gap: 12px;
  --control-width-half: calc(
    calc(var(--control-width) - var(--column-spacer)) / 2
  );
  --border-radius: 4px;
  --control-label-height: var(--font-lineheight-input-label);
  --control-popover-height: calc(var(--font-size) - 6px);
  --control-container-gap: 5px;
  --control-container-min-height: calc(
    var(--control-height) + var(--control-label-height) +
      var(--control-popover-height) + calc(var(--control-container-gap) * 2)
  );

  /*background colors*/
  --header-background: #fff;
  --layout-background: #fff;
  --footer-background: var(--color-solutions-blue);
}

@media all and (max-device-width: 450px), all and (max-width: 450px) {
  :root {
    --control-width: 100%;
    --control-width-half: 100%;
  }
}

/*
	working page width
*/
/*1056px*/
:root {
  --working-page-width: calc(
    calc(var(--column-width) * 12) + calc(var(--column-spacer) * 11)
  );
}

/*
		1056px -> working with in actual pixels: 
		1080px -> 1056px + 48px -> working page width when 
				taking into account overall left/right 
				padding (standard spacer)

		we step down the working page width 2 columns until we hit the min width of column width 4
	*/

@media all and (max-device-width: 1104px), all and (max-width: 1104px) {
  :root {
    --working-page-width: calc(
      calc(var(--column-width) * 9) + calc(var(--column-spacer) * 8)
    );
  }
}

@media all and (max-device-width: 834px), all and (max-width: 834px) {
  :root {
    --working-page-width: calc(
      calc(var(--column-width) * 6) + calc(var(--column-spacer) * 5)
    );
  }
}

@media all and (max-device-width: 540px), all and (max-width: 540px) {
  :root {
    --working-page-width: 100%;
    --column-width-2: 100%;
    --column-width-3: 100%;
    --column-width-4: 100%;
    --column-width-5: 100%;
    --column-width-6: 100%;
    --column-width-7: 100%;
    --column-width-8: 100%;
    --column-width-9: 100%;
    --column-width-10: 100%;
    --column-width-11: 100%;
    --column-width-12: 100%;
  }
}

/*
    2. General Elements & Classes
*/

/*
    generic elements
*/
html,
body {
  font-size: var(--font-size);
  line-height: var(--font-lineheight);
  color: var(--font-color);
  font-weight: var(--font-weight);
  font-family: var(--font-family);
  padding: 0 !important;
}

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

h1,
.h1 {
  font-size: var(--font-size-pageHeader);
  line-height: var(--font-lineheight-pageHeader);
  color: var(--font-color-pageHeader);
  font-weight: var(--font-weight-pageHeader);
  font-family: var(--font-family-pageHeader);
  margin: 0 0 0 0;
}

h2,
.h2 {
  font-size: var(--font-size-sectionHeader);
  line-height: var(--font-lineheight-sectionHeader);
  color: var(--color-black-normal);
  font-weight: var(--font-weight-sectionHeader);
  font-family: var(--font-family-sectionHeader);
  margin: 0 0 0 0;
  font-weight: 400;
}

h3,
.h3 {
  font-size: var(--font-size-subSectionHeader);
  line-height: var(--font-lineheight-subSectionHeader);
  color: var(--font-color-subSectionHeader);
  font-weight: var(--font-weight-subSectionHeader);
  font-family: var(--font-family-subSectionHeader);
  margin: 0 0 0 0;
}

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

legend {
  display: none;
}

a {
  display: inline-flex;
  align-items: center;
  color: var(--color-tdecu-teal);
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
}

a:visited,
a:hover {
  opacity: 50%;
}

.header-logo > a {
  opacity: 100%;
}

.header-logo > a > img {
  max-width: 100%;
}

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

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

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

/*
    generic classes
*/

.page-text {
  /* display: flex; */
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
  align-items: center;
  width: var(--column-width-12);
  font-size: 18px;
}

.disclosure-text {
  font-size: 14px;
  line-height: 20px;
}

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

.disclosure-text > *,
.page-text > * {
  display: inline;
}

ul.page-text > li {
  display: list-item;
}

.white-background {
  background-color: var(--color-white-normal);
}

.eggshell-background {
  background-color: var(--color-eggshell-25);
}

.nowrap {
  white-space: nowrap;
}

/*
	set columns
*/

.column-container {
  max-width: var(--working-page-width);
  margin: 0 auto;
  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: 100%;
  width: 100vw;
}

/*
	flex classes
*/

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: var(--column-spacer);
  flex-wrap: wrap;
}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--column-spacer);
}

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

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

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

.flex-row.flex-align-start {
  justify-content: flex-start;
}

.flex-row.flex-align-end {
  justify-content: flex-end;
}

.flex-half-gap {
  gap: var(--column-spacer-half);
}

.flex-standard-gap,
.flex-gap-standard {
  gap: var(--column-spacer) !important;
}

.flex-same-as-control {
  display: flex;
  flex-wrap: wrap;
  gap: 20px var(--column-spacer);
}

.flex-same-as-control > .checkbox-question {
  font-weight: 600;
  font-size: var(--font-size-input-label);
}

@media all and (max-device-width: 1104px), all and (max-width: 1104px) {
  .flex-row.flex-align-start {
    justify-content: center;
  }

  .page-ApplicantNewInitial .flex-row.flex-align-start,
  .page-RemoteAuthJointOwnerDetails .flex-row.flex-align-start {
    justify-content: flex-start;
  }
}

/*
    3. Page Structure
*/

/*parent layout class*/
.layout {
  background-color: var(--layout-background);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

/*main structure elements*/
header,
main,
footer {
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0 48px;
}

header,
footer {
  z-index: 2;
}

header {
  box-shadow: none;
  background-color: var(--header-background);
}

main {
  align-items: flex-start;
  flex-grow: 1;
  /* margin-bottom: auto; */
  background-color: var(--color-gray-light);
  /* margin: 0 auto; */
  padding: 0;
  /* height: calc(100vh - 238px); */
}

main:has(> .layout-container .page-content.white-background) {
  background-color: var(--color-white-normal);
}

main:has(> .layout-container .page-content.eggshell-background) {
  background-color: var(--color-eggshell-25);
}

footer {
  background-color: var(--footer-background);
}

@media all and (max-device-width: 400px), all and (max-width: 400px) {
  header,
  footer {
    padding: 10px 5px;
  }
}

/*structure element containers*/
header > .layout-container,
main > .layout-container,
footer > .layout-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 100px;
}

main > .layout-container {
  width: 100%;
  margin: 0;
}

header > .layout-container,
footer > .layout-container {
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  position: relative;
  gap: var(--object-gap);
}

header > .layout-container {
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 0;
  justify-content: center;
}

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

main > .layout-container {
  flex-direction: column;
  align-self: flex-start;
  height: 100%;
}

footer > .layout-container {
  justify-content: space-between;
  font-size: 16px;
  align-items: flex-start;
  gap: 20px;
  padding: 30px 0;
}

/*layout structure specific*/
/*header specific items*/
.header-logo > img {
  /* width: 200px; */
  height: 36px;
}

.header-item-container {
  flex-grow: 1;
  display: flex;
  gap: var(--object-gap);
  align-items: center;
}

@media all and (max-device-width: 750px), all and (max-width: 750px) {
  header {
    padding: 0 var(--column-spacer);
  }

  header > .layout-container {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }

  .header-logo > img {
    height: 24px;
  }

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

/*main specific items*/

/*footer specific items*/
.footer-item {
  width: auto;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  text-align: left;
}

.ecu-ncua-container {
  width: 100%;
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: flex-start;
  & a {
    opacity: 100%;
  }
  & .company-info-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--font-size) / 1.2);
  }
}

.company-info-footer label {
  width: fit-content;
  font-size: calc(var(--font-size) / 1.2);
  color: white;
  font-weight: 400;
}

.img-ehl {
  width: 69px;
}

.img-ncua {
  width: 89px;
}

@media (max-device-width: 750px), (max-width: 750px) {
  footer > .layout-container .ecu-ncua-container {
    width: 100%;
    flex-direction: column;
  }

  .footer-item {
    width: 100%;
  }

  .img-ehl {
    width: 45px;
  }

  .img-ncua {
    width: 89px;
  }

  footer > .layout-container {
    min-height: 100px;
    justify-content: center;
  }

  footer {
    padding: 0 var(--column-spacer);
  }
}

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

/*
    4. Page Level Items
*/

.page-content,
.page-content > div[controlid*="IndividualHandler"] {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  gap: var(--column-spacer-vertical);
  z-index: 1;
  /* margin-bottom: var(--column-spacer-vertical); */
  /* background-color: var(--color-eggshell-25); */
  padding-bottom: 40px;
}

.page-content.white-background:before {
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-white-normal);
  top: 0;
  bottom: 0;
  z-index: -1;
}

.content-header-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--object-gap);
  align-items: center;
  background-color: var(--color-tdecu-purple);
  color: var(--color-white-normal);
  padding: var(--column-spacer) var(--column-spacer-half);
  text-align: center;
}

.content-header-container > .h1 {
  width: fit-content;
  color: var(--color-white-normal);
}

.content-header-text {
  font-size: 18px;
}

.content-header-text > * {
  display: inline;
}

.content-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--object-gap);
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
}

.content-header-container.has-header-banner-below {
  margin-bottom: calc(var(--column-spacer-vertical) * -1);
}

.content-header-container.has-header-banner-below
  + .section-container.error-container {
  margin-top: var(--column-spacer-vertical);
}

.section-container,
.section-container > div[controlid*="IndividualHandler01"] {
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer-vertical);
  max-width: 100%;
  padding: 0 var(--column-spacer-half);
}

.section-header {
  text-align: center;
}

.section-text {
  text-align: center;
}

.section-header-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--column-spacer);
  padding-left: calc(calc(90vw - var(--working-page-width)) / 2);
  margin-left: calc(var(--column-spacer-half) * -1);
  margin-right: calc(var(--column-spacer-half) * -1);
  height: 100px;
  padding: 20px 40px;
  padding-left: calc(calc(90vw - var(--working-page-width)) / 2);
  background: #ecf5f9;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-black-normal);
}

.section-header-banner > .section-header {
  width: fit-content;
}

.section-header-banner > .section-banner-img {
  content: "";
  display: block;
  width: 80px;
  min-width: 80px;
  height: 80px;
  background-size: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-white-normal);
  border-radius: 50%;
  z-index: 2;
}

.section-banner-img.img-account {
  background-image: url("https://www.tdecu.org/images/icon-new/240px/account.png");
}

.section-banner-img.img-pig {
  background-image: url("https://cdn.tdecu.org/images/icon-new/240px/savings.png");
}

.section-banner-img.img-terms {
  background-image: url("https://www.tdecu.org/images/icon-new/240px/terms.png");
}

.section-banner-img.img-joint {
  background-image: url("https://a.mktgcdn.com/p/nEDPabvDNPcIEAnbXidn6SbQgdo3hN7dVAzx2dldbYw/120x120.png");
}

.section-banner-img.img-beneficiary {
  background-image: url("https://a.mktgcdn.com/p/nEDPabvDNPcIEAnbXidn6SbQgdo3hN7dVAzx2dldbYw/120x120.png");
}

.sub-section-header {
  max-width: var(--working-page-width);
  width: 100%;
  background-color: var(--color-gray-light);
  align-self: center;
  /* margin-left: -40px; */
  padding: 16px 20px;
  display: flex;
  flex-direction: row;
  border-radius: var(--border-radius);
}

@media all and (max-device-width: 834px), all and (max-width: 834px) {
  .sub-section-header {
    max-width: 100%;
  }
}

.sub-section-header > * {
  font-size: 16px;
  font-weight: 600;
}

.fiviMultiInput {
  width: 100%;
  /* position: relative; */
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: var(--object-gap);
}

.page-content .fiviPanel > .fiviMultiInput.fiviPanelContainer {
  flex-direction: column;
  gap: var(--column-spacer-vertical);
}

.light-container-box {
  padding: 40px 50px;
  align-self: center;
  background-color: var(--color-eggshell-25);
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  gap: var(--column-spacer-half);
}

.normal-container-box {
  background-color: #f6fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--column-spacer) var(--column-spacer);
  gap: var(--column-spacer-half);
  /* width: 100%; */
  text-align: center;
}

.normal-container-box > img {
  width: 50px;
}

.alert-container-box {
  background: #ecf5f9;
  border-radius: 4px;
  font-size: 16px;
  align-items: center;
  text-align: center;
  padding: var(--column-spacer-vertical) var(--column-width);
}

.alert-container-box > img {
  width: 100px;
}

.alert-container-box .page-text {
  font-size: 18px;
}

.alert-container-box .h2 {
  font-size: 18px;
  color: var(--color-black-normal);
}

.dark-container-box {
  background: var(--color-eggshell-50);
  padding: var(--column-spacer-vertical);
  text-align: center;
  align-items: center;
  border-radius: var(--border-radius);
}

@media all and (max-device-width: 900px), all and (max-width: 900px) {
  .alert-container-box {
    padding: var(--column-spacer-vertical) var(--column-spacer-half);
  }
}

/*
    Page Navigation
*/

.page-navigation-container {
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  width: 100%;
  gap: var(--column-spacer-vertical);
  align-items: center;
}

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

  .navigation-other-container > span {
    min-width: 125px;
    display: flex;
    justify-content: center;
  }
}

/*
    Accordions
*/

.panel-group {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--object-gap) * 1.5);
}

.panel-group .panel + .panel {
  margin-top: 0;
}

.panel-group .panel.panel-default {
  border: 1px solid var(--color-primary-normal);
  box-shadow: none;
}

.panel-group .panel-heading {
  background-color: transparent;
  background-image: none;
  border-radius: 4px;
}

.panel-title-container {
  display: flex;
  gap: 16px;
}

.panel-title-icon {
  align-self: center;
  width: fit-content;
  color: var(--color-primary-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

.panel-heading.collapsed {
  background-color: var(--color-white-light);
}

.panel-heading.collapsed + .collapsing {
  background-color: var(--color-white-light);
}

.panel-title {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}

.panelArrow {
  color: var(--color-solutions-blue);
}

.CursorPointer {
  cursor: pointer;
}

.panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--object-gap);
  /*padding: 0px 15px 10px 15px;*/
  padding: 24px;
}

/*
    Thumbnails
*/

.thumbnail-stack-container {
  display: flex;
  flex-direction: column;
  gap: var(--object-gap);
  height: 505px;
}

.thumbnail {
  display: flex;
  flex-direction: column;
  margin: 0;
  width: var(--control-width);
  padding: 15px;
  gap: var(--object-gap);
  height: 100%;
  justify-content: flex-start;
  border: 1px solid var(--color-primary-normal);
  background-color: var(--color-white-light);
  border-radius: 10px;
  align-items: center;
  text-align: center;
}

.content-container > .thumbnail {
  height: 505px;
}

.content-container > .thumbnail > .thumbnail-call-to-action {
  flex-grow: 1;
  margin-top: auto;
}

.thumbnail-icon {
  align-self: center;
  width: fit-content;
  font-size: 27px;
  color: var(--color-primary-normal);
  border: 2px solid var(--color-primary-normal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background-color: var(--layout-background);
}

.thumbnail > .h4 {
  color: var(--color-primary-normal);
  text-decoration: underline;
}

.thumbnail > .disclosure-text.fill-align {
  text-align: justify;
}

.thumbnail > ul {
  font-size: 14px;
  margin-bottom: 0;
  padding-left: 12px;
  list-style-type: none;
}

.thumbnail > ul > li:before {
  content: "- ";
  font-weight: 700;
}

.thumbnail-call-to-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/*
    Buttons
*/

.fiviBtnContainer {
  display: inline-block;
}

.button-primary,
.omnibrowse-code-button,
.fiviIncomeControl .btn.SecondaryButton.MinorButton,
#addHousingDurationBtnPanel .btn.SecondaryButton.MinorButton,
.fiviBeneOwnership .btn.DefaultNextButton.MinorButton,
.plaid-container .fiviBtn.fiviLargeBtn.fiviPrimBtn,
.fiviDocumentList button[id*="btnSignDocs"],
.fiviIDAuthSubmitAnswerContainer .PrimaryButton {
  background-color: var(--color-action-orange);
  border: none;
  outline: 0px;
  border-radius: var(--border-radius);
  color: #fff !important;
  font-weight: 700;
  width: fit-content !important;
  padding: 12px 36px;
  min-width: 175px;
  font-size: 18px;
  display: block;
  text-align: center;
  text-shadow: none;
  box-shadow: none;
  margin: 0;
  &:hover,
  &:active,
  &:focus {
    background-color: var(--color-action-orange-hover);
  }
}

.button-other {
  color: var(--color-solutions-blue);
  border: 2px solid var(--color-solutions-blue);
  border-radius: var(--border-radius);
  background-color: var(--color-white-normal);
  font-weight: 600;
  width: fit-content !important;
  padding: 12px 36px;
  min-width: 175px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  &:hover,
  &:active,
  &:focus {
    background-color: var(--color-eggshell-50);
  }
}

.button-upload:hover {
  background-color: var(--color-eggshell-50);
}
.button-primary:active,
.button-other:active {
  transform: scale(0.975);
}

.button-link,
.ButtonAsLinkV3,
.fiviLinkButton {
  width: fit-content !important;
  padding: 0;
  color: var(--color-tdecu-purple);
  font-weight: 600;
  font-size: 16px;
  border: none;
  background: transparent;
  &:hover,
  &:active,
  &:focus {
    text-decoration: underline;
  }
}

.button-primary:disabled,
.button-other:disabled,
.button-link:disabled {
  opacity: 50%;
}

.button-upload {
  border: 2px solid var(--color-gray-light);
  border-radius: var(--border-radius);
  width: fit-content !important;
  padding: 5px 10px;
}

.button-upload:hover,
.button-upload:active,
.button-upload:focus {
  background-color: var(--color-gray-normal);
  border-color: var(--color-gray-normal);
  cursor: pointer;
}

/*
	checkbox/radio button containers
*/

.fiviRadioButtonContainer {
  margin: 0.5rem 0 0.5rem 0;
  padding: 0 0 0 0;
  display: inline-flex;
  flex-direction: row;
  width: auto;
  justify-content: flex-start;
}

/*
.fiviControl.fiviRadioButton input {
        padding-top: 0;
        margin-bottom: 0;
        width: 3rem;
        margin: 0;
        align-self: center;
    }
*/
.fiviControl.fiviRadioButton .DefaultLabelClass {
  display: inline;
  position: relative;
}

.checkbox-container-column-single {
  display: flex;
  flex-direction: column;
  gap: var(--horizontal-object-spacer);
}

.checkbox-container-column-single .fiviCheckBox,
.checkbox-seperated-label {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--object-gap);
}

.checkbox-seperated-label .fiviCheckBox {
  width: fit-content;
}

.checkbox-seperated-label label > * {
  display: inline;
}

.checkbox-container-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--object-gap);
}

.checkbox-container-row > .fiviCheckBox {
  width: var(--control-width);
}

.checkbox-container-row-compact {
  display: flex;
  flex-direction: row;
  gap: var(--object-gap);
}

.checkbox-container-row > .fiviCheckBox label,
.checkbox-container-row-compact > .fiviCheckBox label {
  font-weight: 400;
  text-indent: -3px;
}

/*
	Question/Answer Containers
*/

.question-answer-container {
  display: flex;
  flex-direction: column;
  gap: var(--horizontal-object-spacer);
  width: 100%;
}

.question-text {
  font-size: 16px;
  font-weight: 500;
}

/*
    Controls
*/

/*input*/
.form-control {
  width: 100% !important;
  height: var(--control-height);
  margin: 0;
  padding: 0px 10px 0px 10px;
  background-color: white;
  color: var(--font-color-input);
  font-size: var(--font-size-input);
  font-family: var(--font-family-input);
  font-weight: var(--font-weight-input);
  line-height: var(--font-lineheight-input);
  border: 1px solid var(--color-gray-normal) !important;
  border-radius: 0;
  box-shadow: none;
  border-radius: var(--border-radius);
}

/*label*/
.DefaultLabelClass,
.FocusLabelClass,
.fiviTwoInput .DefaultLabelClass,
.form-input-seperated-label > .DefaultLabelClass {
  position: relative;
  color: var(--font-color-input-label);
  font-size: var(--font-size-input-label);
  font-family: var(--font-family-input-label);
  font-weight: var(--font-weight-input-label);
  line-height: var(--font-lineheight-input-label);
  cursor: text;
  transition: all 0.2s ease-in-out;
  text-align: left;
  width: 100%;
  pointer-events: none;
  margin-bottom: 0;
}

/*popover*/
.popover > .arrow,
.fivisionpopover > .arrow {
  display: none;
}

.fivisionpopover .popover-content {
  font-size: calc(var(--font-size) - 6px);
  line-height: calc(var(--font-size) - 4px);
  font-weight: 500;
  color: var(--color-tdecu-red);
  padding: 0;
  width: 100%;
}

.fivisionpopover {
  position: relative !important;
  top: unset;
  bottom: 0;
  left: 0;
  right: unset;
  width: 100%;
  min-width: 100%;
  box-shadow: none;
  border: none;
  background-color: transparent;
  z-index: unset;
  padding: 0 0 0 2px !important;
  margin: 0 0 0 0 !important;
}

/*tool tip*/
.fiviInput .DefaultTooltipClass,
.fiviMultiInput .DefaultTooltipClass {
  position: absolute;
  right: 16px;
  top: 31px;
  width: fit-content;
}

.tooltip-arrow {
  display: none;
}

.tooltip-inner {
  width: max-content;
  max-width: 350px !important;
}

/*fiviNewLine -- WHY IS THIS STILL HERE???*/
.fiviNewLine {
  display: none;
}

/* control containers */
.fiviControl {
  /*nothing*/
}

.fiviInput {
  /*nothing*/
}

.fiviParentControl {
  /*nothing*/
}

/*
	Rollback Global
*/

.TwoControls {
  width: unset !important;
}

.fiviProductServices > div div {
  padding: unset !important;
}

/*
	fiviTextBox
	fiviDropDown
*/

.fiviTextBox,
.fiviDropDown {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 5px;
  min-height: var(--control-container-min-height);
  width: 100% !important;
  flex-wrap: unset;
  padding: 0;
  margin: 0;
}

.fiviTextBox .fiviControlActionsContainer {
  position: absolute;
  right: 0;
  top: 0;
}

/*
	fiviCheckBox
	fiviRadioButton
*/

.csscheckbox input[type="checkbox"] {
  opacity: unset;
  display: unset;
}

.csscheckbox label {
  position: unset;
  display: unset;
  padding-left: unset;
}

.csscheckbox label::before,
.csscheckbox label::after {
  position: absolute;
  content: "";
  display: none;
}

.csscheckbox label::before {
  height: 21px;
  width: 21px;
  border: 1px solid;
  left: 0;
  top: 3px;
  display: none;
}

.csscheckbox label::after {
  height: 6px;
  width: 12px;
  border-left: 2px solid;
  border-bottom: 2px solid;
  transform: rotate(-45deg);
  left: 6px;
  top: 9px;
  display: none;
}

.csscheckbox input[type="checkbox"] + label::after {
  display: none;
}

.csscheckbox input[type="checkbox"]:checked + label::after {
  display: none;
}

.csscheckbox input[type="checkbox"]:focus + label::before {
  display: none;
}

.fiviControl.fiviCheckBox,
.fiviControl.fiviRadioButton {
  margin: 0;
  padding: 0;
}

.fiviControl.fiviCheckBox,
.fiviControl.fiviRadioButton > .fiviRadioButtonContainer {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--column-spacer-half);
  width: fit-content;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.fiviControl.fiviCheckBox input,
.fiviControl.fiviRadioButton > .fiviRadioButtonContainer input {
  width: 23px;
  min-width: 23px;
  height: 23px;
  background-color: white;
  border: 1px solid #d3cfc8;
  cursor: pointer;
  margin: 0;
}

.fiviControl.fiviCheckBox input:checked,
.fiviControl.fiviRadioButton > .fiviRadioButtonContainer input:checked {
  accent-color: #73716e;
}

.fiviControl.fiviCheckBox input:hover,
.fiviControl.fiviRadioButton > .fiviRadioButtonContainer input:hover {
  border-color: #73716e;
  border-width: 2px;
}

.fiviControl.fiviCheckBox input:disabled,
.fiviControl.fiviRadioButton > .fiviRadioButtonContainer input:disabled {
  opacity: 0.5;
}

.fiviCheckBox .DefaultCBLabelClass,
.fiviCheckBox .DefaultLabelClass,
.fiviRadioButton .DefaultCBLabelClass,
.fiviRadioButton .DefaultLabelClass {
  text-indent: -3px;
  font-size: 18px;
  font-weight: 600;
  line-height: var(--font-lineheight-label);
  color: var(--font-color-label);
  font-family: var(--font-family-label);
}

.fiviRadioButton .DefaultCBLabelClass,
.fiviRadioButton .DefaultLabelClass {
  text-indent: 0px;
}

/*
	fiviErrorSummary
*/

.fiviErrorSummary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fiviErrorSummary > div,
.fiviErrorSummary label {
  color: red;
  font-weight: 400;
  text-align: left;
  padding-left: var(--column-spacer-half);
  max-width: var(--column-width-8);
  width: 100vw;
}

.pageDefault .fiviErrorSummary > div {
  width: fit-content;
}

.error-container {
  align-items: center;
}

.error-container {
  display: none;
}

.error-container:has(.fiviErrorSummary > div) {
  display: flex;
}

/*
	fiviIndividualHyperlinkList
*/

.fiviIndividualHyperlinkList {
  width: 100%;
}

.fiviIndividualHyperlinkList ul {
  margin: 0;
  padding: 0;
}

.fiviIndividualHyperlinkList li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.fiviIndividualHyperlinkList li button {
  padding: 0;
  margin: 0;
}

.fiviIndividualHyperlinkList li > span:first-of-type button {
  font-size: 18px;
}

/*
	fiviOTP
*/

.fiviOTP .fiviOTPDestination,
.fiviOTP .fiviOTPCode {
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer);
  align-items: center;
}

.fiviOTP .fiviOTPDestination > .fiviLabelContainer label {
  font-size: var(--font-size);
  font-weight: 400;
}

.fiviOTP .fiviOTPDestination > .fiviRadioButton {
  max-width: var(--column-width-4);
  width: 100%;
}

.fiviOTP .fiviOTPDestination:before {
  content: "Select a Delivery Method";
  width: 100%;
  text-align: center;
  font-size: var(--font-size-sectionHeader);
  font-weight: var(--font-weight-sectionHeader);
  color: var(--font-color-sectionHeader);
}

.fiviOTP .fiviOTPButtonContainer {
  display: flex;
  flex-direction: row;
  gap: var(--column-spacer);
  align-items: center;
}

.fiviOTP .fiviOTPCode .fiviLabelContainer label {
  text-align: center;
  font-size: var(--font-size-sectionHeader);
  font-weight: var(--font-weight-sectionHeader);
  color: var(--font-color-sectionHeader);
}

.fiviOTP .fiviOTPCode .fiviTextBox .fiviLabelContainer {
  display: none;
}

@media all and (max-device-width: 540px), all and (max-width: 540px) {
  .fiviOTP .fiviOTPButtonContainer {
    flex-direction: column;
  }
}

/*Select a Delivery Method*/

/*
	fiviProductRelationship
*/

.fiviProductRelationship {
  margin: 0 !important;
  width: 100%;
}

.fiviProductRelationship > table {
  margin: 0;
}

.fiviProductRelationship th {
  text-align: center;
}

.fiviProductNameColumn {
  text-align: left;
}

.fiviProductRelationship td {
  padding: 8px var(--column-spacer) !important;
}

.fiviProductRelationship td.ServiceRelationshipItalic {
  padding-left: calc(var(--column-spacer) + 16px) !important;
}

.fiviProductNameColumn > div,
.fiviServiceNameColumn > .fiviCheckBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0;
}

.fiviProductNameColumn > div > .fiviCheckBox {
  gap: 0;
}

.fiviProductNameColumn > div label,
.fiviServiceNameColumn > span label {
  display: none;
}

.fiviProductCheckboxColumn > .fiviCheckBox {
  margin: 0 auto;
}

.fiviProductCheckboxColumn > .fiviCheckBox > label {
  display: none;
}

/*
	.fiviEmailTextBox
*/

.fiviParentControl.fiviEmailTextBox {
  width: unset !important;
}

/*
	Panel
*/

.fiviHeaderPanelClass,
.fiviPanelExpandedHeaderClass {
  display: inherit;
  width: inherit;
  max-width: inherit;
  height: inherit;
  flex-direction: inherit;
  gap: inherit;
  z-index: inherit;
  justify-content: inherit;
  align-items: inherit;
  flex-wrap: inherit;
}

.column-container.fiviPanel:not( .fiviHeaderPanelClass) {
    margin: 0 auto;
}

.page-content.fiviPanel:not( .fiviHeaderPanelClass) {
    padding-bottom: 40px;
}

.funding-method.fiviPanel:not( .fiviHeaderPanelClass) {
    padding: var(--column-spacer);
}

/*
	fiviYearMonth
*/

.fiviYearMonth {
  display: flex;
  flex-direction: column;
  min-height: var(--control-container-min-height);
  gap: 5px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.fiviYearMonth > .fiviYearMonthInputContainer {
  display: flex;
  gap: var(--column-spacer);
  width: 100%;
  & .fiviInput {
    width: calc(50% - var(--column-spacer-half));
  }
}

.fiviYearMonthInputContainer .fiviTextBox {
  width: 100% !important;
  min-height: fit-content;
}

.fiviYearMonthInputContainer .fiviTextBox > .fiviLabelContainer {
  display: none;
}

@media all and (max-device-width: 540px), all and (max-width: 540px) {
  .fiviYearMonth > .fiviYearMonthInputContainer {
    flex-direction: column;
    width: 100%;
  }

  .page-ApplicantAddress .column-container .fiviPanel {
    width: 100%;
  }
}

/*
	fiviPhoneControl
*/

.fiviPhoneControl {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 var(--column-spacer);
  margin: 0;
  justify-content: unset;
}

.fiviPhoneControl > .fiviTextBox:has(> input.form-control) {
  width: var(--column-width-3) !important;
}

.fiviPhoneControl > .fiviTextBox:has(> select.form-control) {
  width: var(--column-width-2) !important;
}

/*
	fiviAddressControl
*/

.fiviAddressControl {
  position: relative;
  max-width: var(--column-width-10);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 5px var(--column-spacer);
}

.fiviAddressInputs {
  position: inherit;
  max-width: inherit;
  width: inherit;
  display: inherit;
  flex-wrap: inherit;
  gap: inherit;
}

.fiviAddressControl .fiviTextBox {
  width: var(--column-width-5) !important;
}

.fiviAddressControl .fiviAddressValidation {
  width: 100%;
  text-align: center;
}

.fiviAddressControl .fiviAddressValidation > label {
  font-size: 14px;
  font-weight: normal;
  color: dimgray;
}

@media all and (max-device-width: 834px), all and (max-width: 834px) {
  .fiviAddressInputs {
    justify-content: center;
  }
}

/*
	fiviEmploymentHistory
*/

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

.fiviEmploymentHistory .fiviMultiSeperator {
  margin-bottom: var(--column-spacer);
}

.fiviEmploymentHistory > .fiviEmpHistLblContainer {
  display: none;
}

.fiviEmploymentHistory > .fiviEmpHistInputContainer {
  position: relative;
  display: flex;
  flex-direction: column;
}

.fiviEmploymentHistory > .fiviEmpHistInputContainer > .fiviMultiInput {
  width: var(--column-width-12);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--column-spacer);
}

.fiviEmploymentHistory > .fiviEmpHistInputContainer > .fiviMultiInput > div {
  width: var(--column-width-4) !important;
}

.fiviEmploymentHistory
  > .fiviEmpHistInputContainer
  > .fiviMultiInput
  > .fiviEmpHistEmployerContainer,
.fiviEmploymentHistory
  > .fiviEmpHistInputContainer
  > .fiviMultiInput
  > .fiviEmpHistOccContainer {
  width: var(--column-width-6) !important;
}

@media all and (max-device-width: 834px), all and (max-width: 834px) {
  .fiviEmploymentHistory
    > .fiviEmpHistInputContainer
    > .fiviMultiInput
    > .fiviEmpHistEmployerContainer,
  .fiviEmploymentHistory
    > .fiviEmpHistInputContainer
    > .fiviMultiInput
    > .fiviEmpHistOccContainer {
    width: var(--column-width-4) !important;
  }
}

/*
	fiviIdType
*/

.fiviIdType {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--column-spacer) var(--column-spacer);
  justify-content: flex-start;
}

.fiviIdType > span {
  width: var(--column-width-4) !important;
}

.fiviIdType > .fiviDropDown,
.fiviIdType > div:has(.fiviDropDown) {
  width: var(--column-width-6) !important;
}

/*
	fiviProve
*/

/* Hide skip option in prod */
.hideskip {
  display: none;
}

.prove-container {
  display: flex;
  background: white;
  border: 1px solid var(--color-solutions-blue-25);
  border-radius: calc(var(--border-radius) * 4);
  padding: 40px;
}

.prove-container-contents {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 40px;
  align-self: stretch;
  flex-wrap: wrap;
}

.prove-container-cards {
  display: flex;
  gap: calc(var(--object-gap) * 2);
  flex-wrap: wrap;
}

.fiviProve {
  display: flex;
  min-width: 340px;
  flex-direction: column;
  gap: var(--object-gap);
  flex: 1 0 0;
  align-items: center;
  padding: 20px;
}

.fiviProve > div:has(> .fiviTextBox) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--column-spacer-vertical) / 2);
  width: 100%;
}

.fiviProve .fiviPhoneControl > .fiviTextBox:has(> input.form-control) {
  width: 100% !important;
}

.fiviProveButtons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--object-gap);
}

.fiviProve > .loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.proveWorking {
  display: none;
}

.prove-explainer {
  display: flex;
  min-width: 340px;
  flex-direction: column;
  flex: 1 0 0;
  border: 1px solid var(--color-eggshell);
  padding: 20px;
  border-radius: calc(var(--border-radius) * 2);
  & ol {
    padding-left: 20px;
    margin-bottom: 0;
  }
  & li {
    margin-bottom: 12px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}

@media (max-device-width: 450px), (max-width: 450px) {
  .prove-container {
    padding: var(--column-spacer-vertical) var(--column-spacer-half);
  }
}

/*
	fiviProductsAndServicesSelected
*/

.fiviProductsAndServicesSelected,
.fiviProductsAndServicesSelected > div > ul {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer-half);
}

.fiviProductsAndServicesSelected > div > ul {
  margin-top: var(--column-spacer-half);
}

.fiviProductsAndServicesSelected ul {
  margin: 0 !important;
  padding-left: 0px;
}

.fiviProductsAndServicesSelected > div > i {
  font-style: normal;
  font-weight: 600;
}

.fiviProductsAndServicesSelected > div:has(> i) {
  margin-top: var(--column-spacer-half);
}

/*
	fiviIDAuthentication
*/

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

.fiviIDAuthQuestionListContainer {
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer-vertical);
}

.fiviIDAuthQuestionContainerClass > .fiviLabelContainer > label {
  font-size: 16px;
}

.fiviIDAuthQuestionContainerClass {
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer-half);
}

.fiviIDAuthAnswerContainer label.AnswerCSS {
  font-weight: 400;
  font-size: 16;
}

.fiviIDAuthentication .fiviIDAuthSubmitAnswerContainer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
	fiviDisclosureList
*/

.fiviDisclosureList {
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer-half);
  align-items: center;
}

.fiviDisclosureList button {
  font-size: 18px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  color: var(--color-tdecu-teal);
  font-weight: 400;
  text-decoration: underline;
}

.fiviDisclosureList button:hover {
  color: #2a6496;
  text-decoration: underline;
  opacity: 0.5;
}

/*
	fiviProductFunding
*/

.fiviProductFunding {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  width: 100%;
  background-color: var(--color-eggshell-25);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-solutions-blue-25);
}

.fiviProductFundingItem,
.fiviFundingAmount,
.funding-method-container > span {
  padding: var(--column-spacer);
  /* padding-top: var(--column-spacer); */
  margin: 0;
  width: 100%;
  border-bottom: 1px solid var(--color-solutions-blue-25);
  position: relative;
}

.fiviProductFunding .fiviFundingInput {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  position: relative;
}

.fiviProductFunding .fiviFundingInput > label {
  width: fit-content !important;
  font-size: 16px;
  height: var(--control-height);
  display: flex;
  align-items: center;
}

.fiviProductFunding .fiviFundingInput .fiviTextBox {
  max-width: var(--column-width-2);
}

.fiviProductFunding .fiviFundingInput .fiviTextBox > div:first-of-type {
  display: none;
}

.fiviProductFunding
  .fiviFundingInput
  .fiviTextBox
  > .fivisionpopover
  .popover-content {
  text-align: right;
}

.fiviProductFunding .fiviFundingInput .fiviTextBox > .fiviLabelContainer {
  display: none;
}

.fiviProductFunding .fiviFundingInput:after {
  content: "FUNDING OPTIONAL";
  color: #0c6078;
  border: 1px solid #0c6078;
  font-size: 10px;
  padding: 0 4px;
  font-weight: bold;
  border-radius: var(--border-radius);
  position: absolute;
  bottom: 0;
}

.fiviProductFunding .fiviFundingInput:has(> .funding-required):after {
  content: "FUNDING REQUIRED";
  color: #f31c1c;
  border: 1px solid #f31c1c;
}

.fiviFundingAmount {
  display: flex;
  justify-content: space-between;
  padding-top: var(--column-spacer);
  width: 100% !important;
}

.fiviFundingAmount > span {
  font-weight: 600;
}

/*
	fiviCreditCard
*/

.fiviParentControl.fiviCreditCard {
  display: flex;
  flex-direction: column;
  gap: var(--object-gap);
}

.fiviCreditCard .fiviCCNameAddress,
.fiviCreditCard .fiviCCInfo {
  width: 100%;
  /* position: relative; */
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: var(--object-gap);
}

.fiviCreditCard .fiviCCNameAddress > .fiviTextBox {
  width: var(--column-width-4) !important;
}

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

.fiviCreditCard .fiviCCInfo > .fiviTextBox:first-of-type {
  width: var(--column-width-4) !important;
}

.fiviCreditCard .fiviCCInfo > .fiviInput:not(:first-of-type) {
  width: calc(var(--column-width-4) / 3) !important;
  margin-left: calc(var(--object-gap) * -1);
}

.fiviCreditCard .fiviCCInfo .fiviInput:nth-of-type(2) {
  margin-left: 0 !important;
}

/*
    fiVISION_ProgressBar
*/

#journeyBar {
  display: flex;
  background-color: var(--color-white-normal);
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px var(--column-spacer-half);
  box-shadow: 0 20px 30px -20px rgba(0, 0, 0, 0.1) inset;
  z-index: 10;
}

.progress-container {
  flex-grow: 1;
}

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

.journey-bar > table {
  margin: 0 auto;
  display: flex;
  width: 100%;
  max-width: var(--working-page-width);
}

.journey-bar > table > tr {
  display: flex;
  gap: 10px;
  position: relative;
  /* max-width: var(--column-width-12); */
  justify-content: center;
  width: 100%;
  position: relative;
}

.journey-bar > table > tr:before {
  content: "";
  width: calc(100% - var(--column-width-2));
  height: 4px;
  background-color: var(--color-tdecu-purple);
  position: absolute;
  top: 17px;
  left: calc(var(--column-width) + var(--column-spacer-half));
  margin: 0 auto;
  display: none;
}

.journey-bar > table > tr > td {
  border-top: none;
  padding: 0;
}

.journey-bar-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--column-width-2);
  width: 100%;
  gap: 10px;
}

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

.journey-bar-group:last-of-type > span:after {
  content: "Funding";
}

.layout-container:has(div[class*="page-RemoteAuthJointOwner"])
  .journey-bar-group:last-of-type
  > span:after {
  content: "Submit";
}

.journey-bar-group > span {
  font-size: 14px;
  font-weight: 400;
  color: #005971;
  text-align: center;
}

.journey-bar-group:before {
  content: "#";
  border-radius: 50%;
  background-color: var(--color-white-normal);
  width: 40px;
  height: 40px;
  border: solid 2px #005971;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 18px;
  z-index: 1;
  color: #005971;
  font-weight: 600;
  padding-bottom: 1px;
}

.journey-bar-group:after {
  content: "";
  max-width: var(--column-width-2);
  width: 100%;
  height: 4px;
  background-color: var(--color-gray-normal);
  position: absolute;
  top: 18px;
  left: 50%;
}

.journey-bar-group:last-of-type:after {
  display: none;
}

.journey-bar-group:nth-of-type(1):before {
  /*Get Started*/
  content: "1";
}

.journey-bar-group:nth-of-type(2):before {
  /*Products*/
  content: "2";
}

.layout-container:has(div[class*="page-RemoteAuthJointOwner"])
  .journey-bar-group:nth-of-type(2) {
  display: none;
}

.journey-bar-group:nth-of-type(3):before {
  /*Product Options*/
  content: "3";
}

.layout-container:has(div[class*="page-RemoteAuthJointOwner"])
  .journey-bar-group:nth-of-type(3) {
  display: none;
}

.journey-bar-group:nth-of-type(4):before {
  /*Your Details*/
  content: "4";
}

.layout-container:has(div[class*="page-RemoteAuthJointOwner"])
  .journey-bar-group:nth-of-type(4):before {
  content: "2";
}

.journey-bar-group:nth-of-type(5):before {
  /*Review*/
  content: "5";
}

.layout-container:has(div[class*="page-RemoteAuthJointOwner"])
  .journey-bar-group:nth-of-type(5):before {
  content: "3";
}

.journey-bar-group:nth-of-type(6):before {
  /*Funding or Submit*/
  content: "6";
}

.journey-bar-group:nth-of-type(6) .journey-bar-text-alt {
  display: none;
}

.layout-container:has(div[class*="page-RemoteAuthJointOwner"])
  .journey-bar-group:nth-of-type(6):before {
  content: "4";
}

.layout-container:has(div[class*="page-RemoteAuthJointOwner"])
  .journey-bar-group:nth-of-type(6)
  .journey-bar-text {
  display: none;
}

.layout-container:has(div[class*="page-RemoteAuthJointOwner"])
  .journey-bar-group:nth-of-type(6)
  .journey-bar-text-alt {
  display: inline;
}

.journey-bar-group.current-group {
  font-weight: 600;
}

.journey-bar-group.current-group > span {
  font-weight: 600;
  /* text-transform: uppercase; */
  display: inline-block;
  overflow: overlay;
}

.journey-bar-group.previous-group:before,
.layout-container:has(div[class*="page-RemoteAuthJointOwner"])
  .journey-bar-group.previous-group:before {
  content: "L";
  transform: scale(-1, 1) rotate(-45deg);
  font-size: 25px;
  line-height: 25px;
  padding-bottom: 4px;
  padding-left: 1px;
  color: var(--color-white-normal);
  background-color: #738748;
  border-color: #738748;
}

.journey-bar-group.previous-group > span {
  font-weight: 600;
  color: #738748;
}

.journey-bar-group.previous-group:after {
  background-color: #408395;
}

.journey-bar-group.current-group:before {
  background-color: #005971;
  color: var(--color-white-normal);
  font-weight: 400;
}

@media all and (max-device-width: 650px), all and (max-width: 650px) {
  .journey-bar-group > span {
    overflow: visible;
    text-wrap: nowrap;
    align-self: flex-start;
    width: 100%;
    text-align: center;
  }

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

  .journey-bar-group:before {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .journey-bar-group:after {
    top: 13px;
  }

  .journey-bar-group.previous-group:has(
      + .journey-bar-group.current-group
    ):after {
    max-width: calc(100% + 30px);
    width: calc(100% + 30px);
  }
}

@media all and (max-device-width: 650px), all and (max-width: 650px) {
  .journey-bar-group:first-of-type {
    margin-bottom: 20px;
    text-align: center;
  }

  .journey-bar-group:first-of-type > span {
    position: absolute;
    bottom: -20px;
    width: 100%;
  }
}

/*
	Please Wait
*/

.fiviPleaseWait > .overlay {
  opacity: 0.75;
  background-color: var(--color-tdecu-purple);
}

.fiviPleaseWait > .loader {
  border-top-color: var(--color-tdecu-red);
}

.fiviPleaseWait > .loaderMessage {
  color: var(--color-eggshell-50);
  margin-top: var(--column-spacer-vertical);
  font-size: var(--font-size-pageHeader);
  font-weight: var(--font-weight-pageHeader);
}

/*
    Page Specific
*/

/*
	Default
*/

.page-Default {
  gap: 28px;
  & h1 {
  	text-align: center;
  	font-size: 1.8rem;
  	font-weight: 600;
  }
}

.page-Default .fiviErrorSummary > div {
  width: fit-content;
}

.app-starting-container {
  width: var(--working-page-width);
  margin: 0 auto;
  text-align: center;
}

.default-content-start {
  background: var(--color-eggshell-25);
  padding: 28px;
  position: relative;
}

.default-content-start > div {
  width: 100%;
}

.default-content-start .card-container {
  /*min-width: calc(var(--column-width-6) + 76px);*/
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.default-start-card {
  background: #ffffff;
  max-width: var(--column-width-6);
  width: 100%;
  border-radius: calc(var(--border-radius) * 3);
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
  gap: var(--column-spacer);
  & h2 {
  	font-weight: 600;
  	font-size: 1.25rem;
  }
  & h2, p {
  	text-align: center;
  }
}

.default-start-new-applicant {
  display: flex;
  flex-direction: column;
  gap: calc(var(--column-spacer) / 2);
}

.default-start-new-applicant > .column-container {
  gap: var(--column-spacer-half) var(--column-spacer);
  justify-content: center;
  max-width: 100%;
}

.default-new-member-field {
	display: flex;
	min-width: 154px;
	max-width: 300px;
	flex-direction: column;
	gap: 8px;
	flex: 1 0 0;
}

div[controlid="IndividualHandlerExisting"] > .card-call-to-action > span {
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: center;
}

div[controlid="IndividualHandlerExisting"]
  > .card-call-to-action
  > span:has(button):after {
  content: url("/_assets/layoutcontent/20035/2024v3/icon-right.svg");
  height: 14px;
}

@media all and (max-device-width: 834px), all and (max-width: 834px) {
  .default-content-start > div {
    justify-content: center !important;
  }

  .default-content-start {
    padding: 24px 20px;
  }

  .default-content-start .card-container {
    padding-right: 0px;
    justify-content: center;
    min-width: calc(var(--column-width-6));
  }

  .default-start-card {
    max-width: 100%;
    padding: 24px 20px;
    gap: 20px;
    /* flex-wrap: wrap; */
  }

  .default-start-new-applicant > .column-container {
  	display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
  }

  .default-start-card .column-width-2 {
    width: 100%;
  }

  .default-start-new-applicant .column-width-3 {
    max-width: 100%;
  }
}

.default-content-banner {
  color: var(--color-black-normal);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--column-spacer);
}

.default-content-banner .h1 {
  color: var(--color-black-normal);
  font-size: 32px;
  font-weight: 400;
  line-height: 130%;
}

.banner-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: var(--column-spacer);
}

.justify-vertical-center {
	display: flex;
	justify-content: center;
}

.banner-benefits-text {
  display: flex;
  width: fit-content;
  background-color: var(--color-solutions-blue-25);
  color: var(--color-solutions-blue);
  border-radius: var(--border-radius);
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1rem;
}

.exclusive-perks-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
  gap: 20px;
  flex: 1 0 0;
  flex-wrap: wrap;
}

@media all and (max-device-width: 844px), all and (max-width: 844px) {
  .exclusive-perks-container {
    justify-content: center;
  }
}

.exclusive-perks {
  display: flex;
  width: 200px;
  min-width: 180px;
  max-width: 240px;
  padding: var(--border-radius-md, 12px);
  align-items: center;
  gap: var(--border-radius-md, 12px);
  border-left: 3px solid var(--Primary-Solutions-Blue, #005971);
  background: var(--Basic-Shades-White, #fff);
  border-radius: calc(var(--border-radius) / 2);
  font-size: 0.8rem;
  line-height: 1rem;
}

.banner-benefits-text > img {
  height: 15px;
  width: 15px;
}

.banner-content .page-text {
  width: 100%;
}

@media all and (max-device-width: 1104px), all and (max-width: 1104px) {
  .banner-content {
    max-width: var(--column-width-4);
    width: 100%;
  }
}

@media all and (max-device-width: 834px), all and (max-width: 834px) {
  .default-content-banner {
    padding: 20px;
  }

  .default-content-banner > div,
  .banner-content {
    gap: 16px;
  }

  .default-content-banner .h1 {
    font-size: 28px;
    text-align: center;
    width: 100%;
  }

  .default-content-banner .h1 br {
    display: none;
  }

  .banner-benefits-text {
    align-self: left;
  }
}

.default-content-other-options {
  background-color: var(--color-eggshell-25);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 60px 20px;
}

.default-other-card {
  background-color: var(--color-white-normal);
  border: 1px solid var(--color-solutions-blue-25);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: var(--column-spacer);
}

.default-other-card > .card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--column-spacer);
}

.default-other-card > .card-text {
  text-align: center;
}

.img-pig {
  height: 60px;
}

.img-texas {
  width: 55px;
}

.img-buccees {
  height: 60px;
}

.img-heart {
  width: 20px;
  height: 20px;
}

.card-text {
  padding: 0;
}

@media all and (max-device-width: 1104px), all and (max-width: 1104px) {
  .default-other-card {
    width: var(--column-width-4);
    padding: 20px 20px;
  }

  .card-text {
    font-size: 14px;
  }
}

@media all and (max-device-width: 834px), all and (max-width: 834px) {
  .page-content.page-Default {
    margin-bottom: 0;
  }

  .default-content-other-options {
    padding: 24px 20px;
  }

  .default-content-other-options > div {
    gap: 20px;
  }

  .img-buccees,
  .img-pig {
    height: 40px;
  }

  .default-other-card {
    gap: 20px;
  }
}

/*
	Applicant Address
*/

.page-ApplicantAddress .column-container .fiviPanel,
.page-RemoteAuthJointOwnerAddress .column-container .fiviPanel {
  width: fit-content;
}

@media all and (max-device-width: 540px), all and (max-width: 540px) {
  .page-ApplicantAddress .column-container .fiviPanel {
    width: 100%;
  }
}

.page-ApplicantAddress .fiviAddressControl {
  gap: var(--column-spacer) var(--column-spacer);
}

/*
	Eligibility
*/

.questions-container {
  width: var(--column-width-7);
  align-self: center;
  gap: var(--column-spacer);
}

.question-container {
  width: 100%;
  background: var(--color-white-normal);
  outline: 1px solid var(--color-solutions-blue-25);
  border-radius: var(--border-radius);
  padding: var(--column-spacer);
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer-half);
}

.question-container > .fiviCheckBox,
.question-container > .fiviRadioButton {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: var(--column-spacer-half);
}

.question-container > .fiviCheckBox label,
.question-container > .fiviRadioButton label {
  font-weight: 400;
  font-size: 16px;
}

.question-container ul {
  margin-bottom: 0;
  padding-left: 60px;
}

/*
    Product Selection
*/

.page-ProductSelection .required-products,
.page-ProductSelection .product-services-container {
  flex-direction: column;
}

.page-ProductSelection .panel-group .panel.panel-default {
  border: 1px solid var(--color-solutions-blue-25);
}

.page-ProductSelection .panel-heading {
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer-half);
  padding: var(--column-spacer);
}

.page-ProductSelection .panel-heading > .page-text {
  font-size: 16px;
}

.product-disclosure-container {
  display: flex;
  flex-direction: column;
  gap: var(--object-gap);
  max-width: var(--column-width-10);
  align-self: center;
  width: 100%;
  margin-top: calc(var(--object-gap) * 2);
  padding-top: calc(var(--object-gap) * 2);
  border-top: 1px solid var(--color-solutions-blue-25);
}

.page-ProductSelection .product-disclosure-text {
  display: block;
  font-size: 12px;
  line-height: calc(var(--font-lineheight) / 1.2);
}

.page-ProductSelection .product-disclosure-text > * {
  display: inline;
}

.page-ProductSelection .fiviProdServControl {
  width: 100%;
}

.page-ProductSelection .fiviProdServControl .fiviProdGroup {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: var(--column-spacer);
  flex-wrap: wrap;
  justify-content: center;
}

.page-ProductSelection .fiviProdServ {
  width: var(--column-width-5);
  background-color: #f7fafc;
  outline: 1px solid var(--color-solutions-blue-25);
  border-radius: var(--border-radius);
  padding: var(--column-spacer) !important;
  position: relative;
  display: flex;
  flex-direction: column;
  /* gap: var(--column-spacer); */
}

.page-ProductSelection .fiviProdServ > img {
  position: absolute;
  top: var(--column-spacer);
  right: var(--column-spacer);
  transition: 300ms ease-out;
  width: 50px;
  z-index: 5;
}

.page-ProductSelection .fiviProdServ > img:hover {
  height: auto;
  width: 140px;
  -webkit-transition: all 140ms ease;
  transition: all 140ms ease;
  z-index: 99;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
  border-radius: calc(var(--border-radius) * 1.75);
  background: #fff;
  border: 1px solid #fff;
}

.page-ProductSelection .fiviProdServ > .fiviProductMoreInfo {
  width: 100%;
  /*flex-wrap: wrap;*/
  padding: 0;
  margin: 0;
}

.page-ProductSelection .fiviProdServ > .fiviCheckBox > label {
  /*text-indent: -3px;*/
  display: flex;
}

.page-ProductSelection .fiviProdServ .fiviCheckBox > label.product-label-small,
.page-ProductSelection
  .fiviProdServ:has(label.product-label-small)
  > .fiviProductMoreInfo
  > span {
  font-size: 15px !important;
}

.page-ProductSelection .fiviProdServ > .fiviCheckBox > label:has(> img) {
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--column-spacer-half);
  flex-grow: 1;
  justify-content: space-between;
}

.page-ProductSelection .fiviProdServ > .fiviCheckBox > label > img {
  width: 50px;
}

.page-ProductSelection .fiviProdServ > .fiviCheckBox > * {
  width: fit-content;
}

.page-ProductSelection .fiviProdServ > .fiviCheckBox a {
  float: none !important;
}

.page-ProductSelection .fiviProdServ > .fiviProductMoreInfo > span,
.page-ProductSelection
  .fiviProdServ
  > .fiviProductMoreInfo
  > span
  > div:has(> .product-more-info-items) {
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer);
  font-size: 16px;
  line-height: 20px;
  margin-top: 12px;
}

.page-ProductSelection
  .fiviProdServ
  > .fiviProductMoreInfo
  .product-more-info-items {
  display: flex;
  justify-content: center;
  gap: var(--column-spacer);
}

.page-ProductSelection
  .fiviProdServ
  > .fiviProductMoreInfo
  .product-more-info-item {
  width: var(--column-width-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.page-ProductSelection
  .fiviProdServ
  > .fiviProductMoreInfo
  .product-more-info-item
  > .fivi-subtle-seperator {
  margin-bottom: 8px;
}

.page-ProductSelection .fiviProdServControl .fiviProductAdditionalOptions {
  padding: 0;
}

.page-ProductSelection .fiviProdInnerPanel {
  display: flex !important;
  flex-direction: column;
  gap: var(--object-gap);
  margin-bottom: calc(var(--object-gap) + 5px);
}

.page-ProductSelection .fiviProdInnerPanel:last-of-type {
  margin-bottom: 0px;
}

.page-ProductSelection .fiviProdPanel {
  margin-left: 15px;
}

.page-ProductSelection .product-services-container .fiviProdServControl {
  flex-direction: row;
}

.page-ProductSelection .product-services-container .fiviProdServ {
  width: var(--control-width);
  border: 1px solid var(--color-primary-normal);
  background-color: var(--color-white-light);
  border-radius: 10px;
  padding: 15px;
}

.page-ProductSelection .product-services-container .fiviInput {
  width: 100%;
  margin-bottom: var(--horizontal-object-spacer);
}

.page-ProductSelection #psCertificates .fiviProdServ,
.page-ProductSelection #psVehicleLoans .fiviProdServ {
  flex-direction: row;
  gap: 6px;
  align-items: center;
}

.page-ProductSelection #psCertificates .fiviProdServ .fiviProductMoreInfo,
.page-ProductSelection #psVehicleLoans .fiviProdServ .fiviProductMoreInfo {
  width: fit-content;
  & > span {
    margin-top: 0px;
    font-size: 18px;
    flex-direction: row;
    margin: 0;
  }
}

@media all and (max-device-width: 540px), all and (max-width: 540px) {
  .page-ProductSelection #psCertificates .fiviProdServ,
  .page-ProductSelection #psVehicleLoans .fiviProdServ {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-ProductSelection #psCertificates .fiviProdServ .fiviProductMoreInfo,
  .page-ProductSelection #psVehicleLoans .fiviProdServ .fiviProductMoreInfo {
    margin-left: calc(var(--column-spacer) * 2);
  }
}

/*
    Product Options Loan Pages
*/

.page-ProductOptionsVehicle > div[controlid="CollateralHandlerVehicle"] {
  display: inherit;
  flex-direction: inherit;
  width: inherit;
  gap: inherit;
}

/*
	Service Options
*/

.page-ServiceOptions .content-header-container {
  margin-bottom: calc(var(--column-spacer-vertical) * -1);
}

.page-ServiceOptions .error-container {
  margin-top: var(--column-spacer-vertical);
}

.page-ServiceOptions .fiviProdServControl,
.page-ServiceOptions .product-options-container {
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer-vertical);
}

.page-ServiceOptions .product-options-container {
  gap: 0;
}

.page-ServiceOptions .fiviProdServ > .fiviCheckBox,
.product-options-manual-header {
  padding: 20px 40px;
  padding-left: calc(calc(90vw - var(--working-page-width)) / 2);
  margin-left: calc(var(--column-spacer-half) * -1);
  margin-right: calc(var(--column-spacer-half) * -1);
  width: calc(100% + var(--column-spacer));
  background: var(--color-eggshell-50);
  height: 100px;
  margin-bottom: var(--column-spacer-vertical);
  gap: var(--column-spacer);
}

.product-options-manual-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--column-spacer);
  font-size: 18px;
  font-weight: 600;
  /* margin: 0 auto; */
}

.page-ServiceOptions .fiviCheckBox > h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-black-normal);
}

.page-ServiceOptions .fiviProdServ > .fiviCheckBox:before,
.product-options-manual-header:before {
  content: "";
  background-image: url("https://cdn.tdecu.org/images/icons-svg/visa-card.svg");
  background-size: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-white-normal);
  display: block;
  width: 80px;
  min-width: 80px;
  height: 80px;
  border-radius: 50%;
  z-index: 2;
}

.page-ServiceOptions .product-options-general-services .fiviProdServControl,
.page-ServiceOptions
  .product-options-general-services
  .fiviProdServControl
  > .fiviProdServ {
  width: var(--column-width-9);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer);
}

.page-ServiceOptions .product-options-general-services .fiviProdServControl {
  margin-bottom: var(--column-spacer);
}

.page-ServiceOptions .fiviProdServ > .fiviCheckBox > div {
  display: none;
}

.page-ServiceOptions
  .product-options-general-services
  .fiviProdServ
  > .fiviCheckBox {
  width: fit-content;
  padding: 0;
  height: fit-content;
  background: transparent;
  gap: var(--column-spacer-half);
  margin: 0;
}

.page-ServiceOptions
  .product-options-general-services
  .fiviProdServ
  > .fiviCheckBox
  > div {
  display: inline-block;
}

.page-ServiceOptions
  .product-options-general-services
  .fiviProdServ
  > .fiviCheckBox:before {
  display: none;
}

.page-ServiceOptions .product-options-general-services .Service_MoreInfo {
  padding-left: calc(27px + var(--column-spacer-half));
  font-size: 16px;
  line-height: 24px;
}

.page-ServiceOptions .fiviProdInnerPanel {
  max-width: var(--column-width-9);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: calc(var(--column-spacer) * 2);
  column-gap: var(--column-spacer);
}

.page-ServiceOptions .product-options-general-services .fiviProdInnerPanel {
  width: var(--column-width-9);
}

.page-ServiceOptions .fiviProductServiceContainer {
  width: var(--column-width-3);
  display: flex;
  flex-wrap: wrap;

  gap: var(--column-spacer);
}

.page-ServiceOptions #psChecking .fiviCheckBox {
  align-items: center;
}

.page-ServiceOptions .fiviProductServiceContainer > .Service_MoreInfo {
  padding-left: calc(27px + var(--column-spacer-half));
}

.page-ServiceOptions
  .product-options-general-services
  .fiviProductServiceContainer {
  width: var(--column-width-9);
  flex-direction: column;
}

.page-ServiceOptions .fiviProductServiceContainer > * {
  width: var(--column-width-3);
}

.page-ServiceOptions
  .product-options-general-services
  .fiviProductServiceContainer
  > * {
  width: 100%;
}

.page-ServiceOptions .ProductServiceTitle {
  text-indent: -3px;
}

.page-ServiceOptions .ProductServiceTitle > label {
  font-weight: 500;
}

.page-ServiceOptions .fiviNoMoreInfo > .ProductServiceTitle {
  width: var(--column-width-4);
}

.page-ServiceOptions .product-option-custom-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer);
}

.page-ServiceOptions .product-option-custom-container h3 {
  background-color: var(--color-gray-light);
  font-weight: 600;
  margin: 0 -20px;
  padding: 5px 20px;
}

.page-ServiceOptions
  > .section-container
  > .product-options-container
  > .fiviProdServControl
  > .fiviProdServ
  > .Product_MoreInfo
  > span {
  display: none;
  width: var(--column-width-9);
  margin: 0 auto 20px auto;
}

.page-ServiceOptions
  > .section-container
  > .fiviProdServControl
  > .fiviProdServ
  > .Product_MoreInfo
  > span {
  display: none;
  width: var(--column-width-9);
  margin: 0 auto 20px auto;
}

.page-ServiceOptions .product-option-custom-container > .page-text {
  font-size: 16px;
  line-height: 24px;
}

.page-ServiceOptions
  .product-option-custom-container
  .fiviProductServiceContainer {
  border: 1px solid var(--color-solutions-blue-25);
  border-radius: var(--border-radius);
  padding: var(--column-spacer);
}

.page-ServiceOptions
  .product-options-product-services
  .product-services-productService-mode-container {
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer-vertical);
  max-width: 100%;
  padding: 0;
}

.page-ServiceOptions
  .product-options-product-services
  .product-service-product-header-container,
  .product-service-product-header-container.payment-protection {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--column-spacer);
  font-size: 18px;
  font-weight: 600;
  padding: 20px 40px !important;
  padding-left: calc(calc(90vw - var(--working-page-width)) / 2) !important;
  margin-left: calc(var(--column-spacer-half) * -1);
  margin-right: calc(var(--column-spacer-half) * -1);
  width: calc(100% + var(--column-spacer));
  background: var(--color-eggshell-50);
  height: 100px;
  margin-bottom: var(--column-spacer-vertical);
}

.page-ServiceOptions
  .product-options-product-services
  .product-service-product-header-container:before,
  .product-service-product-header-container.payment-protection:before {
  content: "";
  background-image: url(https://cdn.tdecu.org/images/icons-svg/visa-card.svg);
  background-size: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-white-normal);
  display: block;
  width: 80px;
  min-width: 80px;
  height: 80px;
  border-radius: 50%;
  z-index: 2;
}

.page-ServiceOptions
  .product-options-product-services
  .product-service-product-container
  > .fiviProductServiceMoreInfo {
  display: none;
}

.page-ServiceOptions
  .product-options-product-services
  .product-service-group-container {
  max-width: var(--column-width-9);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: calc(var(--column-spacer) * 2);
  column-gap: var(--column-spacer);
}

.page-ServiceOptions
  .product-options-product-services
  .fiviProductServiceDisplay {
  width: var(--column-width-3);
  /* max-width: 100%; */
  display: flex;
  flex-wrap: wrap;
  gap: var(--column-spacer);
}

@media all and (max-device-width: 834px), all and (max-width: 834px) {
  .page-ServiceOptions
    .product-options-product-services
    .product-service-group-container {
    justify-content: center;
  }
}

@media all and (max-device-width: 540px), all and (max-width: 540px) {
  .page-ServiceOptions
    .product-options-product-services
    .product-service-group-container {
    justify-content: flex-start;
  }

  .page-ServiceOptions
    .product-options-product-services
    .fiviProductServiceDisplay {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .page-ServiceOptions
    .product-options-product-services
    .product-service-product-header-container,
    .product-service-product-header-container.payment-protection {
    width: calc(100% + var(--column-spacer));
    padding-left: 0 !important;
    padding-right: var(--column-spacer-half);
  }
}

/*
	applicantemploymentincome
*/

.page-ApplicantEmploymentIncome
  .fiviEmpHistInputContainer
  .fiviEmpHistStatusContainer,
.page-ApplicantEmploymentIncome
  .fiviEmpHistInputContainer
  .fiviEmpHistOccTbContainer {
  display: none;
}

.page-ApplicantEmploymentIncome
  .fiviEmpHistLblContainer
  + .fiviEmpHistInputContainer
  .fiviEmpHistStatusContainer,
.page-ApplicantEmploymentIncome
  .fiviEmpHistLblContainer
  + .fiviEmpHistInputContainer
  .fiviEmpHistOccTbContainer {
  display: block;
}

/*
	Applicant Address
	and also RemoteAuthJointOwnerAddress
*/

.page-ApplicantAddress .flex-row,
.page-RemoteAuthJointOwnerAddress .flex-row {
  align-items: start;
}

.page-ApplicantAddress .duration-container > .fiviTwoInput,
.page-RemoteAuthJointOwnerAddress .duration-container > .fiviTwoInput {
  gap: 0 var(--column-spacer);
}

/*
	Joint Owners
*/

.page-JointOwner .content-header-container {
  margin-bottom: calc(var(--column-spacer-vertical) * -1);
}

.page-JointOwner .error-container {
  margin-top: var(--column-spacer-vertical);
}

/*
	Beneficiary
*/

.page-Beneficiary .content-header-container {
}

.page-Beneficiary .error-container {
  margin-top: var(--column-spacer-vertical);
}

/*
	Disclosures
*/

.page-Disclosures .content-header-container {
  margin-bottom: calc(var(--column-spacer-vertical) * -1);
}

.page-Disclosures .error-container {
  margin-top: var(--column-spacer-vertical);
}

.summary-item-container .fiviTextBox,
.summary-item-container .fiviDropDown {
  gap: 0;
  min-height: fit-content;
}

.summary-item-header,
.summary-item-container .fiviTextBox label.DefaultLabelClass,
.summary-item-container .fiviDropDown label.DefaultLabelClass {
  font-size: var(--font-size);
  line-height: var(--font-lineheight);
  color: var(--font-color);
  font-weight: 600;
}

.summary-item-container .fiviTextBox .fiviValueLabel,
.summary-item-container .fiviDropDown > .fiviLabelContainer > label,
.summary-item-container .fiviLabelContainer > label {
  font-size: var(--font-size);
  line-height: var(--font-lineheight);
  color: var(--font-color);
  font-weight: var(--font-weight);
  font-family: var(--font-family);
  padding: 0;
  margin: 0;
}

.page-Disclosures .flex-column,
.page-RemoteAuthJointOwnerDisclosures .flex-column {
  gap: calc(var(--column-spacer-half) + 10px);
}

.page-Disclosures .sub-header,
.page-RemoteAuthJointOwnerDisclosures .sub-header {
  color: var(--color-primary-dark);
}

.disclosure-icon {
  width: 50px;
  align-self: center;
}

.page-Disclosures .column-container,
.page-RemoteAuthJointOwnerDisclosures .column-container {
  justify-content: flex-start;
}

.page-Disclosures
  .column-container
  > .fiviPanel
  .page-RemoteAuthJointOwnerDisclosures
  .column-container
  > .fiviPanel {
  width: fit-content;
}

.page-Disclosures .fiviCheckBox > label,
.page-RemoteAuthJointOwnerDisclosures .fiviCheckBox > label {
  text-indent: -3px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

.disclosure-list-item {
  text-align: center;
  align-self: center;
}

.disclosure-backup-withholding h4 {
  font-weight: 600;
}

.page-Disclosures
  .disclosure-backup-withholding
  .flex-column.flex-half-gap
  .page-RemoteAuthJointOwnerDisclosures
  .disclosure-backup-withholding
  .flex-column.flex-half-gap {
  margin-left: var(--column-spacer);
  gap: var(--column-spacer-half);
}

.disclosure-backup-withholding .fiviCheckBox > label {
  font-weight: 600;
  font-size: 16px;
}

/*
	ID Authe Pages
*/

.page-IDVerificationApplicant .content-header-container {
  margin-bottom: calc(var(--column-spacer-vertical) * -1);
}

.page-IDVerificationApplicant .error-container {
  margin-top: var(--column-spacer-vertical);
}

.page-IDVerificationApplicant .section-text + div {
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer-vertical);
  width: 100%;
  padding: 0 var(--column-spacer-half);
}

.page-IDVerificationApplicant .h4.sub-section-header > strong {
  display: flex;
  align-items: center;
}

.page-IDVerificationApplicant .h4.sub-section-header > strong label {
  font-size: 16px;
  font-weight: 600;
}

/*
	Funding Method
*/

.page-Funding .section-header {
  text-align: left;
  font-weight: 600;
  font-size: 16px;
}

.page-Funding .section-container > .flex-column {
  gap: var(--column-spacer);
}

.funding-method-container .funding-method {
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer-half);
}

.funding-method-container .fiviCCIndNameInfo > div,
.funding-method-container .fiviCCCardInfo > div {
  width: var(--column-width-4);
}

.funding-method-container .fiviCCCardInfo .form-control.CCCVVClass {
  width: 100%;
}

.funding-method-container .fiviCCCardInfo .form-control.TwoControls,
.funding-method-container .fiviCCCardInfo .fiviInput.TwoControls {
  width: calc(var(--column-width-4) / 3) !important;
}

.funding-method-detail {
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer-half);
}

.funding-method {
  background-color: var(--color-eggshell-25);
  border: 1px solid var(--color-solutions-blue-25);
  border-radius: var(--border-radius);
  display: flex;
  justify-content: space-between;
  padding: var(--column-spacer);
  width: 100% !important;
}

.plaid-container .fiviBtnContainer,
.plaid-container #FundingVerificationShowLoading {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--column-spacer);
}

/*
	Approved Page
*/

.dark-container-box .page-text {
  font-size: 16px;
}

.application-number-container {
  display: flex;
  flex-direction: row;
  padding: var(--column-spacer-half);
  justify-content: center;
}

.application-number-container > img {
  height: 60px;
}

.application-number-container > .application-number {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: fit-content;
  gap: 5px;
}

.application-number-container > .application-number > .disclosure-text {
  font-size: 12px;
  font-weight: 600;
}

.application-number-container > .application-number > span > span {
  font-size: 28px;
  font-weight: 600;
}

.yellow-container {
  background: #fff3c9;
  width: fit-content;
  padding: 2px 8px;
  align-self: center;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: #ab8500;
  border-radius: var(--border-radius);
}

.yellow-container > img {
  height: 20px;
}

.pnlHasLoans {
  flex-direction: column;
  gap: var(--column-spacer);
}

.pnlHasPendingDocuments > .fiviHeaderPanelClass {
  display: flex;
  flex-direction: column;
  gap: var(--column-spacer);
}

/*
	Personal Loan Page
*/

#loanPurposeListPersonalContainer:not(:has(select > option:nth-of-type(3))) {
  display: none;
}

/*
	page-Pending (after submitting application)
*/

.page-Pending .fiviLoanStatus {
  width: 100%;
}

.page-Pending .fiviLoanStatus .fiviLoanStatusContainer {
  width: 100%;
  overflow: hidden;
  overflow-x: scroll;
}

.page-Pending
  .fiviLoanStatus
  .fiviLoanStatusContainer
  .fiviLoanStatusDescription {
  position: sticky;
  top: 0px;
  left: 0px;
  margin-bottom: 12px;
}

.page-Pending .fiviLoanStatus .fiviLoanStatusContainer .fiviLoanStatusTable {
  max-width: fit-content;
  margin: 0 auto;
}

.page-Pending .pnlPendingHasCD {
  justify-content: center;
  gap: var(--column-spacer);
}

/*
    random stuff
*/

.fiviMultiSeperator {
  width: 50%;
  margin: 0 auto;
  border-bottom: 1px solid var(--color-tdecu-purple);
  opacity: 50%;
  box-shadow: 0 0 3px rgba(102, 175, 233, 0.6);
  position: relative;
  align-self: center;
}

.fivi-subtle-seperator {
  width: calc(100% - var(--column-spacer));
  border-bottom: 1px solid var(--color-solutions-blue-50);
  opacity: 50%;
}

.default-start-card .fivi-subtle-seperator {
  width: 100%;
}

.normal-container-box .fivi-subtle-seperator {
  margin: var(--column-spacer-half) 0;
}

@media all and (max-device-width: 850px), all and (max-width: 850px) {
  .fiviMultiSeperator {
    margin-left: 0;
    width: 100%;
  }
}

.fiviRemoveBtn {
  position: absolute;
  left: calc(50% - 13px);
  top: -16px;
  z-index: 2;
  background-color: white;
  color: var(--color-tdecu-purple);
  cursor: pointer;
}

.fiviRemoveBtn > button {
  margin: 0;
  padding: 0;
  color: var(--color-tdecu-purple);
  &:active,
  &:hover,
  &:focus {
    color: var(--color-primary-dark);
  }
}

.flexBreak,
.flex-break {
  flex-basis: 100%;
  height: 0;
}

.add-another-button-container {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

#__asptrace {
  z-index: 10;
  position: relative;
}

.AdminConsole .white-background:before {
  display: none;
}

.AdminConsole #journeyBar {
  display: none;
}

.fivitextbox .fivilabelcontainer {
  width: 100%;
}

.fiviTextBox .fiviValueLabelContainer {
  width: auto;
}

.fiviTextBox .fiviValueLabel {
  font-weight: normal;
  margin-top: 6px;
  margin-bottom: 6px;
  padding-left: 10px;
}

.fiviphonecontrol .fiviInput .defaultlabelclass {
  top: unset !important;
}

.layout-container > div {
  width: 100%;
  height: 100%;
  display: flex;
}

.loading {
  position: relative;
  background-color: transparent;
}

.loading .loader {
  position: relative;
  left: 0;
  top: 0;
  margin: 0;
}


/*
  Management Console
*/

.fiviViewFormHeader {
  position: relative;
  z-index: 2;
  & .fiviSCDropDown > label {
    text-align: right;
    padding-right: 5px;
    font-size: 16px !important;
  }
}

#app:has( .fiviViewFormHeader) {
  & header,
  & footer,
  & .fiviProgressBar {
    display: none;
  }
}