/* Table of Contents 1. Variables 1.1 Mobile Variables 2. General Elements & Classes 2.1 General Elements 2.2 iCheck 2.3 Flex Helper Classes 2.4 Column Helper Classes 2.5 General Helper Classes 3. Page Structure 3.1 Page Structure 3.2 Header Styling 3.3 Main Styling 3.4 Footer Styling 4. Page General Containers 5. Buttons 5.1 Button Containers 6. Accordions 7. Inputs and Labels 7.1 Labels 7.2 Inputs 7.3 Fivi Input Containers 7.4 Fivi Checkbox/Radio Buttons 7.5 Validator 7.6 Tool Tips 7.7 Seperators 7.8 Loader 8. fiVISION Controls 8.1 fiVISION_ErrorSummary 8.2 fiVISION_Panel 8.3 fiVISION_ProductsAndServicesV2 8.4 fiVISION_AddressTextBoxV2 8.5 fiVISION_PhoneTextBoxV2 8.6 fiVISION_IDTypeV2 8.7 fiVISION_HousingDurationHistory 8.8 fiVISION_EmploymentHistory 8.9 fiVISION_IndividualIncome 8.10 fiVISION_IndividualDetails 8.11 fiVISION_ProductsAndServicesSelected 8.12 fiVISION_ProductRelationships 8.13 fiVISION_DocumentListV2 8.14 fiVISION_DisclosuresList 8.15 fiVISION_ProductFundingV2 8.16 fiVISION_ProveIndividualLookup 8.17 fiVISION_ACH 8.18 fiVISION_CreditCardV2 8.19 fiVISION_ApplicantWithdraw 8.20 fiVISION_ProgressBar 8.21 fiVISON_IndividualHandler 8.22 fiVISION_EmailTextBoxV2 8.23 fiVISION_CollateralHandler 8.24 fiVISION_IDAuthentication 8.25 fiVISION_PlaidFundingAccountVerification 8.26 fiVISION_WorkflowSurvey 8.27 fiVISION_MoneyTextBoxV2 9. Page Specific 9.1 Default Page 9.2 Applicant Prove 9.3 Select Accounts 9.4 Disclosures 9.5 Funding 9.6 Pending/Approved/Denied 9.7 Decline Disclosures 10. ControlID Specific 11. Admin Console Mobile Reference Media Queries for stepping down Assumes column width 66px and column spacer 24px @media all and (max-device-width: 1106px), all and (max-width: 1106px) { } @media all and (max-device-width: 836px), all and (max-width: 836px) { } @media all and (max-device-width: 656px), all and (max-width: 656px) { } @media all and (max-device-width: 452px), all and (max-width: 452px) { } */ /* 1. Variables */ :root { /*colors*/ /*gray scale*/ --color-white-light: #ffffff; --color-white-normal: #ffffff; --color-white-dark: #e5e7eb; --color-gray-light: #D0D2D3; --color-gray-normal: #696f8c; --color-gray-dark: #4e4c55; --color-black-light: #33374d; --color-black-normal: #000000; --color-black-dark: #0b0e1e; /*client colors*/ --color-primary-light: #ff9d85; --color-primary-normal: #ffb81c; --color-primary-dark: #d59a16; --color-primary-darker: #F68F1E; --color-secondary-light: #3c7ccd; --color-secondary-normal: #21253d; --color-secondary-dark: #0b0e1e; --color-tertiary-light: #10b981; --color-tertiary-normal: #059669; --color-tertiary-dark: #047857; --color-quaternary-light: #fcd34d; --color-quaternary-normal: #fbbf24; --color-quaternary-dark: #f59e0b; /*font family*/ --font-family-pri: "IBM Plex Sans", sans-serif; --font-family-alt: "Lato", sans-serif; /*fonts*/ /*default font*/ --font-size: 16px; --font-lineheight: 20px; --font-color: var(--color-black-white); --font-color-light: var(--color-gray-normal); --font-weight: 400; --font-family: var(--font-family-pri); /*input font*/ --font-size-input: var(--font-size); --font-lineheight-input: var(--font-lineheight); --font-color-input: var(--color-black-light); --font-weight-input: var(--font-weight); --font-family-input: var(--font-family); /*label font*/ --font-size-label: var(--font-size); --font-lineheight-label: var(--font-lineheight); --font-color-label: var(--color-black-light); --font-color-label-focus: var(--font-color); --font-weight-label: 500; --font-family-label: var(--font-family-alt); /*title font*/ --font-size-title: 32px; --font-lineheight-title: 34px; --font-color-title: var(--color-gray-dark); --font-weight-title: 500; --font-family-title: var(--font-family-pri); /*h1 font*/ --font-size-h1: calc(var(--font-size) + 16px); --font-lineheight-h1: calc(var(--font-size-h1) + 6px); --font-color-h1: var(--font-color-light); --font-weight-h1: 500; --font-family-h1: var(--font-family-pri); /*h2 font*/ --font-size-h2: calc(var(--font-size) + 4px); --font-lineheight-h2: calc(var(--font-size-h2) + 8px); --font-color-h2: var(--font-color-h1); --font-weight-h2: var(--font-weight-h1); --font-family-h2: var(--font-family-input); /*h3 font*/ --font-size-h3: calc(var(--font-size) + 2px); --font-lineheight-h3: calc(var(--font-size-h3) + 4px); --font-color-h3: var(--font-color-light); --font-weight-h3: 600; --font-family-h3: var(--font-family); /*h4 font*/ --font-size-h4: 16px; --font-lineheight-h4: 18px; --font-color-h4: var(--font-color-h3); --font-weight-h4: 500; --font-family-h4: var(--font-family); /*page structure*/ --column-width: 66px; --column-spacer: 24px; --column-width-half: calc(var(--column-width) / 2); /*33px*/ --column-width-2: calc( calc(var(--column-width) * 2) + var(--column-spacer) ); /*156px*/ --column-width-3: calc( calc(var(--column-width) * 3) + calc(var(--column-spacer) * 2) ); /*246px*/ --column-width-4: calc( calc(var(--column-width) * 4) + calc(var(--column-spacer) * 3) ); /*336px*/ --column-width-5: calc( calc(var(--column-width) * 5) + calc(var(--column-spacer) * 4) ); /*426px*/ --column-width-6: calc( calc(var(--column-width) * 6) + calc(var(--column-spacer) * 5) ); /*516px*/ --column-width-7: calc( calc(var(--column-width) * 7) + calc(var(--column-spacer) * 6) ); /*606px*/ --column-width-8: calc( calc(var(--column-width) * 8) + calc(var(--column-spacer) * 7) ); /*696px*/ --column-width-9: calc( calc(var(--column-width) * 9) + calc(var(--column-spacer) * 8) ); /*786px*/ --column-width-10: calc( calc(var(--column-width) * 10) + calc(var(--column-spacer) * 9) ); /*876px*/ --column-width-11: calc( calc(var(--column-width) * 11) + calc(var(--column-spacer) * 10) ); /*966px*/ --column-width-12: calc( calc(var(--column-width) * 12) + calc(var(--column-spacer) * 11) ); /*1056px*/ --column-width-full: 100%; /*flex properties*/ --gap-vertical: var(--column-spacer); --gap-vertical-25: calc(var(--gap-vertical) * 0.25); --gap-vertical-50: calc(var(--gap-vertical) * 0.5); --gap-vertical-75: calc(var(--gap-vertical) * 0.75); --gap-vertical-100: calc(var(--gap-vertical) * 1); --gap-vertical-125: calc(var(--gap-vertical) * 1.25); --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-100: calc(var(--gap-horizontal) * 1); --gap-horizontal-125: calc(var(--gap-horizontal) * 1.25); --gap-horizontal-150: calc(var(--gap-horizontal) * 1.5); --gap-horizontal-200: calc(var(--gap-horizontal) * 2); /*border properties*/ --border-radius: var(--gap-vertical) var(--gap-horizontal); --border-color: var(--color-gray-light); --border-color-focus: var(--color-primary-normal); /*color properties*/ --background-input-color: var(--color-white-normal); --background-color: var(--color-white-normal); --background-color-page: var(--color-white-normal); --background-color-alt: var(--color-white-normal); /*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-2); --fiviInput-width-partial-alt: var(--column-width-2); --input-height: 50px; --input-focusLabel-fontSize: var(--font-size-label); --input-focusLabel-offset: calc( var(--input-height) + var(--gap-vertical-25) ); --input-marginTop-forLabelFocusSpace: calc( var(--input-focusLabel-fontSize) + var(--gap-vertical-25) ); /* how much space between each input */ --fiviInput-vertical-spacing: var(--gap-vertical-75); --fiviInput-horizontal-spacing: var(--gap-horizontal); } /* 1.1 Mobile Variables We are going to do a step down approach. We need to account for the head/main/foot left/right padding of column width (*2 as there are left and right). add a couple pixels for good measure. */ @media all and (max-device-width: 1106px), all and (max-width: 1106px) { /* @1056px+48px+2px = 1106px -12 columns -> 7 columns -fiviInput-width goes to 5 columns -should accomidate 2 inputs per row */ :root { --column-width-11: 100%; --column-width-12: 100%; --column-width-10: 100%; --fiviInput-width: var(--column-width-5); --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-2); --fiviInput-width-half: calc( calc(var(--fiviInput-width) - var(--column-spacer)) / 2 ); } } @media all and (max-device-width: 988px), all and (max-width: 988px) { :root { --fiviInput-width: var(--column-width-4); --fiviInput-width-partial-main: var(--column-width-2); --fiviInput-width-partial-alt: var(--column-width-2); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { /* @786px+48px+2px = 836px -9 columns -> 7 columns -fiviInput-width goes to 3 columns -should accomidate 2 inputs per row */ :root { --font-size: 14px; --column-width-8: 100%; --column-width-9: 100%; } } @media all and (max-device-width: 808px), all and (max-width: 808px) { :root { --fiviInput-width: var(--column-width-3); --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-3); --fiviInput-width-half: calc( calc(var(--fiviInput-width) - var(--column-spacer)) / 2 ); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { /* @606px+48+2px = 656px -7 columns -> 5 columns -fiviInput-width goes to 4 columns -accomidate 1 input, with an exception or two, inputs go 1 per row */ :root { --column-width-6: 100%; --column-width-7: 100%; --fiviInput-width: var(--column-width-3); --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-3); --fiviInput-width-half: var(--column-width-2); } } @media all and (max-device-width: 628px), all and (max-width: 628px) { /* @606px+48+2px = 656px -7 columns -> 5 columns -fiviInput-width goes to 4 columns -accomidate 1 input, with an exception or two, inputs go 1 per row */ :root { --fiviInput-width: var(--column-width-5); --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-2); --fiviInput-width-half: calc( calc(var(--fiviInput-width) - var(--column-spacer)) / 2 ); } } @media all and (max-device-width: 540px), all and (max-width: 540px) { /* @606px+48+2px = 656px -7 columns -> 5 columns -fiviInput-width goes to 4 columns -accomidate 1 input, with an exception or two, inputs go 1 per row */ :root { --column-width-3: 100%; --column-width-4: 100%; --column-width-5: 100%; --fiviInput-width: 100%; --fiviInput-width: var(--column-width-4); --fiviInput-width-half: calc(50% - calc(var(--column-spacer) / 2)); --fiviInput-width-partial-main: var(--fiviInput-width-half); --fiviInput-width-partial-alt: var(--fiviInput-width-half); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { /* @426px+24px+2px = 452px - any column width > 2 goes to 100% */ :root { --column-width-3: 100%; --column-width-4: 100%; --column-width-5: 100%; --fiviInput-width: 100%; --fiviInput-width-half: calc(50% - calc(var(--column-spacer) / 2)); } } /* 2. General Elements & Classes */ /* 2.1 General Elements */ * { box-sizing: border-box; } html, body { font-size: var(--font-size); line-height: var(--font-size); color: var(--font-color); font-weight: var(--font-weight); font-family: var(--font-family); margin: 0; padding: 0; } input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } h1, h2, h3, h4, .h1, .h2, .h3, .h4, p, label, input, select, textarea, form { margin: 0; margin-block: 0; padding: 0; padding-block: 0; width: 100%; } b { font-weight: 600; } h1, .h1 { font-size: var(--font-size-h1); line-height: var(--font-lineheight-h1); color: var(--font-color-h1); font-weight: var(--font-weight-h1); font-family: var(--font-family-h1); text-align: left; } h2, .h2 { font-size: var(--font-size-h2); line-height: var(--font-lineheight-h2); color: var(--font-color-h2); font-weight: var(--font-weight-h2); font-family: var(--font-family-h2); text-align: left; } h3, .h3 { font-size: var(--font-size-h3); line-height: var(--font-lineheight-h3); color: var(--font-color-h3); font-weight: var(--font-weight-h3); font-family: var(--font-family-h3); text-align: left; } h4, .h4 { font-size: var(--font-size-h4); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: var(--font-weight-h4); font-family: var(--font-family-h4); text-align: left; } .flagstar-font-32-28, .flagstar-font-32-28-bold, .header-text { font-size: 32px !important; line-height: 38px !important; font-weight: 400 !important; text-align: left; } .flagstar-font-24-32, .flagstar-font-24-32-bold { font-size: 24px !important; line-height: 32px !important; font-weight: 400 !important; text-align: left; } .flagstar-font-20-28, .flagstar-font-20-28-bold, .header-sub-text, .header-sub-text-bold { font-size: 20px !important; line-height: 28px !important; font-weight: 400 !important; text-align: left; } .flagstar-font-18-26, .flagstar-font-18-26-bold { font-size: 18px !important; line-height: 26px !important; font-weight: 400 !important; text-align: left; } .flagstar-font-18-22, .flagstar-font-18-22-bold { font-size: 18px !important; line-height: 22px !important; font-weight: 400 !important; text-align: left; } .flagstar-font-32-28-bold, .flagstar-font-24-32-bold, .flagstar-font-20-28-bold, .flagstar-font-18-26-bold, .flagstar-font-18-22-bold, .header-text, .header-sub-text-bold { font-weight: 600; } legend { display: none; } a { color: var(--color-primary-light); } a:hover { text-decoration: underline; color: var(--color-primary-normal); cursor: pointer; } a:visited, a:focus { color: var(--color-primary-normal); } ul, ol { margin-bottom: 0; padding-left: var(--gap-horizontal); } ul > li:not(:last-of-type), ol > li:not(:last-of-type) { margin-bottom: var(--gap-vertical-25); } label { font-weight: var(--font-weight-label); } button, input[type="button"], input[type="reset"], input[type="submit"] { --webkit-appearance: button; cursor: pointer; } fieldset { margin: 0; min-inline-size: unset; margin-inline: 0; border: none; padding-block: unset; padding-inline: unset; } :focus-visible { outline: none; } .glyph { font-family: Arial, Helvetica, sans-serif; } .vertical-spacer-10 { height: 10px; } .vertical-spacer-25 { height: 25px; } .vertical-spacer-50 { height: 50px; } .error { color: red !important; } /* 2.3 Flex Helper Classes */ .flex-row { display: flex; align-items: flex-start; justify-content: space-between; /* gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); */ flex-wrap: wrap; width: 100%; max-width: var(--column-width-10); } .flex-column { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); width: 100%; } .flex-no-wrap { flex-wrap: nowrap; } .flex-row.flex-align-vertical-center { align-items: center; } .flex-column.flex-align-vertical-center { justify-content: center; } .flex-row.flex-align-horizontal-center { justify-content: center; } .flex-row.flex-space-between { justify-content: space-between; } .flex-column.flex-space-between { align-items: space-between; } .flex-column.flex-align-vertical-center { align-items: center; } .flex-row.flex-align-horizontal-end { justify-content: flex-end; } .flex-column.flex-align-horizontal-end { align-items: flex-end; } .flex-row.flex-align-vertical-end { align-items: flex-end; } .flex-column.flex-align-vertical-end { justify-content: flex-end; } .flex-gap-25 { gap: var(--gap-vertical-25) var(--gap-horizontal) !important; } .flex-gap-50 { gap: var(--gap-vertical-50) var(--gap-horizontal) !important; } .flex-gap-75 { gap: var(--gap-vertical-75) var(--gap-horizontal) !important; } .flex-gap-100 { gap: var(--gap-vertical) var(--gap-horizontal) !important; } .flex-gap-150 { gap: var(--gap-vertical-150) var(--gap-horizontal) !important; } .flex-gap-200 { gap: var(--gap-vertical-200) var(--gap-horizontal) !important; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .flex-row{ gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); } } /* 2.4 Column Helper Classes */ .column-width-fiviInput { max-width: var(--fiviInput-width); width: 100vw; } .column-width-1 { max-width: var(--column-width); width: 100vw; } .column-width-2 { max-width: var(--column-width-2); width: 100vw; } .column-width-3 { max-width: var(--column-width-3); width: 100vw; } .column-width-4 { max-width: var(--column-width-4); width: 100vw; } .column-width-5 { max-width: var(--column-width-5); width: 100vw; } .column-width-6 { max-width: var(--column-width-6); width: 100vw; } .column-width-7 { max-width: var(--column-width-7); width: 100vw; } .column-width-8 { max-width: var(--column-width-8); width: 100vw; } .column-width-9 { max-width: var(--column-width-9); width: 100vw; } .column-width-10 { max-width: var(--column-width-10); width: 100vw; } .column-width-11 { max-width: var(--column-width-11); width: 100vw; } .column-width-12 { max-width: var(--column-width-12); width: 100vw; } .column-width-full { max-width: 100%; width: 100vw; } /* 2.5 General Helper Classes */ .title-text { font-size: var(--font-size-title); line-height: var(--font-lineheight-title); color: var(--font-color-title); font-weight: var(--font-weight-title); font-family: var(--font-family-title); text-align: left; } .page-text { font-size: var(--font-size); line-height: var(--font-lineheight); font-weight: var(--font-weight); color: var(--font-color); width: 100%; } .page-text-small { font-size: calc(var(--font-size) - 4px); width: 100%; } .page-text-large { font-size: calc(var(--font-size) + 2px); line-height: calc(var(--font-lineheight) + 3px); width: 100%; } .page-text, .page-text-small, .page-text-large { & > b, & > strong { font-weight: 600; } } .header-container .page-text-large { color: var(--color-gray-light); font-size: calc(var(--font-size) + 6px); font-weight: 500; letter-spacing: 1px; } .no-wrap { white-space: nowrap; text-wrap: nowrap; width: fit-content; } .spacer-vertical { width: 100%; } .indentLeft { margin-left: var(--gap-horizontal); } .loader-container { display: block; background-color: transparent; } .loader-container .loader { position: relative; top: 0; left: 0; border-top-color: var(--color-primary-normal); margin: var(--gap-vertical-50) var(--gap-horizontal-50); } .alert-container-box { background: var(--color-white-dark); border-radius: var(--border-radius); font-size: var(--font-size-h4); align-items: center; text-align: center; padding: var(--gap-vertical) var(--gap-horizontal); } .vertical-divider { max-height: 100%; border-left: 0.5px solid var(--border-color); position: relative; flex-grow: 1; flex-basis: 0; } .horizontal-divider { height: 1px; width: 100%; border-top: 1px solid var(--border-color); } .mobile-visible-only, .hidden { display: none; } .fiviNewLine { display: none !important; } .fiviHide { display: none !important; } .fiviTransparent { color: transparent; } @media all and (max-device-width: 836px), all and (max-width: 836px) { .page-text-small { font-size: calc(var(--font-size) - 2px); } .mobile-visible-only { display: flex; } } /* 3. Page Structure */ /* 3.1 Page Structure */ .layout { background-color: var(--color-white-normal); width: 100%; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } header, main, footer { width: 100%; display: flex; margin: 0; text-align: left; flex-direction: column; } main { position: relative; margin-bottom: auto; align-items: flex-start; flex: 1; flex-direction: row; max-width: var(--column-width-10); } header .layout-container, footer .layout-container { max-width: var(--column-width-12); width: 100%; margin: 0 auto; min-height: 62px; padding: var(--gap-vertical) var(--gap-horizontal); } @media all and (max-device-width: 452px), all and (max-width: 452px) { header, footer { padding: 0; } main { padding: var(--gap-vertical) var(--gap-horizontal-50); } header > .layout-container { min-height: 50px; justify-content: center; } } /* 3.2 Header Styling */ header { box-shadow: none; background-color: var(--color-white-normal); border-bottom: 1px solid var( --border-color); } header > .fdic > .layout-container, footer > .social > .layout-container { max-width: var(--column-width-12); width: 100%; margin: 0 auto; min-height: 62px; padding: var(--gap-vertical) var(--gap-horizontal); display: flex; align-items: center; flex-direction: row; justify-content: space-between; } .fdic > .layout-container > .header-left { display: flex; align-items: center; } .fdic > .layout-container > .header-right { display: flex; align-items: center; justify-content: space-between; font-weight: 600; } .fdic > .layout-container > .header-right > i { margin-right: 10px; } .header-left > .card-gray > .card-gray-row .card-gray-column:nth-child(1) { justify-content: center; } .header-left > .card-gray > .card-gray-row .card-gray-column:nth-child(2) { width: 155px; } .header-left > .card-gray > .card-gray-row .card-gray-column:nth-child(2) span { line-height: 20px; } .fdic { background-color: var(--color-gray-light); } .fdic-logo { padding-right: 8px; height: 16px; } .fdic-text { color: var(--color-black-normal); font-size: .8pc; line-height: .8pc; font-style: italic; font-weight: 400; font-family: var(--font-family-alt); } .header-right, .header-left { display: flex; } .flagstar-secure-location-img{ margin-right: 5px; } .flagstar-header-logo { background-position: 50%; background-position-x: 0; background-repeat: no-repeat; height: 100%; max-width: 168px; width: 168px; } @media all and (max-device-width: 656px), all and (max-width: 656px) { header .layout-container > a { display: flex; align-items: center; justify-content: center; } .header-contact { justify-content: center; } header .layout-container, .fdic .layout-container { padding: .75rem !important; } header .header-logo-text { flex-direction: row !important; & .header-left { width: 25; } & .flagstar-header-logo { width: 125px; } & .header-right { font-size: 14px } } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .header-logo { width: 200px; } } /* 3.3 Main Styling */ main .layout-container, main .help-container { position: relative; display: flex; align-self: stretch; flex-grow: 1; flex-basis: 0; flex-direction: column; justify-content: stretch; gap: var(--gap-vertical); padding-bottom: var(--gap-vertical); margin-top: 2rem; } main .help-container { border-top: 1px solid var(--border-color); padding-top: 1rem; margin-top: 0; } main .help-container-text-large { font-size: var(--font-size-h2); font-weight: 600; line-height: 28px; } main .help-container-text { font-size: var(--font-size-h4); line-height: 20px; } main .help-container-text .flex-row { justify-content: flex-start; align-items: center; } main .help-container-text .help-container-contact-img{ margin-right: 10px; } main .help-container-contact{ display: flex; align-items: center; flex-wrap: wrap; width: 100%; max-width: var(--column-width-10); justify-content: flex-start; } main .help-container-text .help-container-contact-text{ margin-right: 25px; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { main > .layout-container { min-width: 0; padding: 0 1rem; } main > .layout-container > span { max-width: var(--column-width-10); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { main > .layout-container { margin: 0; padding: 0; } } /* footer styling */ footer { background-color: var(--color-black-normal); border-top: 1px solid var(--border-color); position: relative; padding: 0; color: white; } footer > .layout-container { font-size: var(--font-size); } footer .h1, footer .h2, footer .h3, footer .h4 { color: var(--color-white-normal); font-weight: 500; } footer .page-text { color: var(--color-white-normal); } footer a, footer a:hover, footer a:visited { color: var(--color-primary-light); } .footer-bottom-left, .footer-bottom-right { display: flex; font-size: 14px; } .footer-bottom-left div, .footer-bottom-right div, .footer-bottom-left span, .footer-bottom-right span { padding-left: 5px; } footer > .social > .layout-container { padding: 2rem 1rem; } footer > .layout-container > .h2 { /* max-width: 100%; */ } footer > .layout-container > .h2 { font-family: var(--font-family-alt); } footer > .layout-container > .h2:after { content: ""; display: block; width: var(--column-width-2); height: 2px; background-color: var(--color-primary-normal); align-self: flex-start; margin-top: var(--gap-vertical-50); } footer > .social { background-color: var(--color-gray-dark); } footer > .social .flagstar-footer-logo { width: 40px; height: 40px; } footer > .social .flagstar-social-icons { width: 40px; height: 40px; margin-left: 10px } footer > .footer-application-number { opacity: 0.75; padding-bottom: var(--gap-horizontal-50); } @media all and (max-device-width: 836px), all and (max-width: 836px) { footer > .layout-container.flex-row.flex-row.flex-space-between { justify-content: flex-start; } } @media (max-device-width: 656px), (max-width: 656px) { footer > .layout-container.flex-row.flex-row.flex-space-between { flex-direction: column; } .footer-bottom-right { width: 100%; justify-content: center; } } /* 4. Page General Containers */ .page-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: stretch; gap: var(--gap-vertical-150); max-width: var(--column-width-10); width: 100%; flex-grow: 1; flex-basis: 0; align-self: stretch; } .header-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-50); max-width: var(--column-width-10); width: 100%; } .section-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--gap-vertical); max-width: var(--column-width-10); width: 100%; flex-grow: 1; } .error-container { height: fit-content; } .section-header:after { content: ""; display: block; width: 100%; height: 1px; background-color: var(--color-black-normal); align-self: flex-start; margin-top: var(--gap-vertical-25); } .page-navigation-container { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; width: 100%; bottom: 0; left: 0; padding: var(--gap-vertical) 0 0 0; margin-top: auto; } .navigation-forward-container, .navigation-other-container, .prove-direction-buttons { display: flex; flex-direction: row; gap: var(--gap-vertical-25); align-items: flex-start; } .navigation-forward-container, .prove-direction-buttons { flex-direction: row; width: 100%; justify-content: space-between; } .navigation-forward-container .button-link { text-align: center; } .fivi-input-width { max-width: var(--fiviInput-width); } .fivi-two-input-container { max-width: var(--fiviInput-width); } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .page-container { max-width: var(--column-width-10); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .header-container, .section-container { min-width: 0; } .navigation-other-container .button-link { text-align: center; } .navigation-forward-container { flex-direction: column-reverse; } .navigation-forward-container .fiviBtnContainer:first-of-type { margin-top: .5rem; } .header-container h1, .header-container .page-text { text-align: center; } } /* 5.1 Button Containers */ .add-another-list-container { display: flex; max-width: 100%; width: 100%; gap: var(--gap-horizontal-25); justify-content: space-between; & > .vertical-divider { flex-grow: 0; } } .add-another-list-container > div:has(> .fiviIndividualButton) { justify-content: center; align-items: center; } .add-another-individual-container { display: flex; align-items: center; justify-content: flex-start; width: var(--fiviInput-width); } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .add-another-individual-container { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .add-another-individual-container { width: var(--fiviInput-width); } } @media (max-device-width: 836px), (max-width: 836px) { .add-another-list-container { & > .vertical-divider { height: 100%; width: auto; border-top: 0.5px solid var(--border-color); } } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .add-another-list-container { flex-direction: column; gap: var(--gap-horizontal-200); & > .vertical-divider { display: none; } } .add-another-list-container > div { width: 100%; max-width: 100%; justify-content: center; align-items: center; & > * { text-align: center; } & .fiviIndividualHyperlinkList > ul { align-items: center; } } } /* 6. Accordions */ #accordion { display: flex; flex-direction: column; max-width: var(--column-width-10); width: 100%; gap: var(--gap-vertical); } .product-service-container { display: flex; flex-direction: column; width: 100%; gap: var(--gap-vertical); background-color: transparent; } .product-service-heading { display: flex; justify-content: flex-start; gap: var(--gap-horizontal-25); padding: var(--gap-vertical) var(--gap-horizontal) 0 var(--gap-horizontal); align-items: center; width: 100vw; max-width: 100%; font-size: var(--font-size-h3); line-height: var(--font-size-h3); cursor: pointer; transition: padding-left 0.35s ease-in-out; } .product-service-container > .page-text { padding: 0 var(--gap-horizontal); } /*.product-service-heading:not(.force-accordion-expand):before { content: "\f061"; transition: transform 0.35s ease-in-out; font-family: FontAwesome; font-weight: 400; } */ .product-service-content { display: flex; flex-direction: column; gap: var(--gap-vertical-75); border: none; border-radius: 5px; height: 0; overflow: hidden; opacity: 0; transition: all 0.35s ease-in-out; } .product-service-container:has(> .force-accordion-expand) > .product-service-content { height: auto; opacity: 1; } .product-service-container-expanded { outline: none; & > .product-service-heading:before { transform: rotate(90deg); } & > .product-service-content { opacity: 1; padding-bottom: var(--gap-vertical); } } /* 7. Inputs and Labels */ /* 7.5 Validator */ .CtlValidator { position: absolute; line-height: var(--input-height); bottom: -3px; left: 3.5px; z-index: 5; } /* 7.6 Tool Tips */ .fa-question-circle { font-size: 16px !important; } .product-service-content.force-accordion-expand { overflow: visible; } .fiviTooltipContainer { width: fit-content; height: fit-content; position: absolute; right: 5px; top: 0; } .DefaultTooltipClass:has(+ span[role="tooltip"]) { position: static; + span[role="tooltip"] { visibility: hidden; position: absolute; background: black; opacity: 0.9; color: white; padding: 0.5rem; border-radius: 0.25rem; transition: visibility 0.25s; z-index: 2; max-width: 250px; width: 200px; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; left: 2rem; /* top: 25px; */ &:hover, &:focus { visibility: visible; } } &:hover, &:focus { + span[role="tooltip"] { visibility: visible; } } } @media all and (max-device-width: 475px), all and (max-width: 475px) { .DefaultTooltipClass { } } .fiviControl.fiviCheckBox, .fiviCheckBox, .fiviControl.fiviRadioButton, .fiviRadioButton { & .fiviTooltipContainer { position: relative; top: unset; } & .DefaultTooltipClass { position: static; } } .fiviLinkHistory:has(.fiviTooltipContainer) { padding-right: 25px; position: relative; & > .fiviTooltipContainer { position: absolute; right: 0; top: -2px; } } /* 7.7 Seperators */ .fiviMultiSeperator { width: 100%; height: 2px; margin: var(--gap-vertical-50) 0; } .fiviMultiSeperator::after { content: ""; display: block; width: 100%; height: 100%; max-width: calc(var(--fiviInput-width) * 2 + var(--column-spacer)); background-color: var(--border-color); } .divider { display: flex; align-items: center; justify-content: center; width: 100%; height: 1px; } .divider::before { content: ""; display: block; width: var(--column-width-3); height: 1px; background-color: var(--color-gray-dark); } /* 7.8 Loader */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loader { position: relative; z-index: 1; width: 150px; height: 150px; margin: 0 auto; border: 16px solid #d3d3d3; border-radius: 50%; border-top: 16px solid #2f80ed; width: 100px; height: 100px; animation: spin 2s linear infinite; } .section-container > .loader { position: relative; left: unset; right: unset; top: unset; margin: 0 auto; } /* 7.9 Popover */ .fivisionpopover > .arrow { display: none; } .fivisionpopover .popover-content { font-size: calc(var(--font-size) - 2px); font-weight: 500; color: red; padding: 0; } .fivisionpopover { position: relative !important; top: unset; bottom: unset !important; box-shadow: none; border: none; background-color: transparent; width: 100vw; max-width: var(--fiviInput-width); left: 0; margin: 0; margin-top: var(--gap-vertical-25); } /* 8. fiVISION Controls */ /* 8. fiVISION Controls */ /* global unsets */ .fiviControl:not(.fiviPanel) { padding: 0; width: auto; margin: 0; } /* Fivision Panel */ .single-input .fiviPanel { width: 100%; } /* fiVISION_Label */ .fiviLabelContainer { display: inline-flex; width: fit-content; } .fiviLabelContainer > label { font-weight: inherit; } .fivilabelcontainer:has(.variable-inline) { display: inline !important; } /* fiVISION_Panel */ .fiviHeaderPanelClass { display: inherit; flex-direction: inherit; align-items: inherit; justify-content: inherit; gap: inherit; max-width: inherit; width: inherit; flex-wrap: inherit; } /* fiVISION_ButtonV2 */ .fiviBtnContainer:has(.next-button) { flex-grow: 1; justify-content: flex-end; display: inline-flex; } .fiviBtnContainer .fiviBtnLabel { font-size: 18px; line-height: 18px; font-weight: 500; } .fiviControlActionsContainer button { border: none; } .button-primary, .button-exit { min-width: var(--column-width-2); width: fit-content; margin: 0; padding: var(--gap-vertical-25) var(--gap-horizontal-200); background-color: var(--color-primary-normal); color: white; border: 2px solid var(--color-primary-normal); border-radius: 5px; font-size: 15px; line-height: 18px; font-weight: 400; box-shadow: none; transition-duration: 500ms; transition-property: border-radius, color, background-color; text-decoration: none; &:visited { color: white; } &:hover:not(:disabled), &:active:not(:disabled), &:focus:not(:disabled) { border-radius: var(--gap-horizontal); text-decoration: none; color: white; } &:disabled { opacity: 0.5; } } .next-button { width: 98%; } .next-button::after { content: "\2192"; margin-left: 5px; } .button-other, .fiviLinkBtn { display: inline-flex; justify-content: center; align-items: center; max-width: var(--fiviInput-width); min-width: var(--fiviInput-width-half); width: fit-content !important; margin: 0; padding: var(--gap-vertical-50) var(--gap-horizontal-150); background-color: var(--background-input-color); color: var(--color-primary-normal); border: 1px solid var(--color-primary-normal); border-radius: 5px; font-size: 16px; line-height: 16px; font-weight: 500; box-shadow: none; transition-duration: 500ms; transition-property: color, background-color; height: var(--input-height); cursor: pointer; text-shadow: none; &:hover:not(:disabled), &:active:not(:disabled), &:focus:not(:disabled) { background-color: var(--color-primary-normal); color: var(--color-white-normal); box-shadow: none; text-decoration: none; text-shadow: none; border-color: var(--color-primary-normal); outline: none; } &:disabled { opacity: 0.5; } } .button-link, .button-link-alt { min-width: var(--column-width-2); text-align: left; background-color: transparent; border: 2px solid transparent; font-size: 15px; line-height: 18px; font-weight: 400; height: 34px; color: var(--color-primary-normal); width: 100%!important; cursor: pointer; &:hover:not(:disabled), &:active:not(:disabled), &:focus:not(:disabled) { text-decoration: underline; } &:disabled { opacity: 0.5; } } .button-primary + .fiviBtnLabel, .button-other + .fiviBtnLabel, .button-link + .fiviBtnLabel, .button-link-alt + .fiviBtnLabel { cursor: none; opacity: 0.5; } .fiviLinkButton { color: var(--color-black-normal); border: none; margin: .5rem 0; font-weight: 600; text-decoration: underline; background: none; } .button-login { max-width: 250px; text-decoration:none !important; } .button-exit, .button-login { display: flex; justify-content: center; align-items: center; } @media all and (max-device-width: 628px), all and (max-width: 628px) { .next-button, .back-button { width: 100% !important; } } /* fiVISION_IndividualCommandButtonV2 */ .fiviIndividualButton > label { font-size: 18px; line-height: 18px; font-weight: 500; } /* fiVISION_CheckBox */ .fiviControl.fiviCheckBox, .fiviCheckBox { display: flex; gap: var(--gap-horizontal-50); align-items: center; width: 100%; max-width: fit-content; padding: 0; margin: 0; } input.DefaultCBControlClassV3 { display: flex; width: 20px; min-width: 20px; height: 20px; background-color: white; accent-color: var(--color-black-normal); cursor: pointer; margin: 0; align-self:flex-start; &:hover { accent-color: var(--color-black-normal); } } label.DefaultCBLabelClass { font-weight: 500; font-size: var(--font-size-label); line-height: var(--font-lineheight-input); } /* fiVISION_RadioButton */ .fiviControl.fiviRadioButton { width: 100%; max-width: fit-content; padding: 0; margin: 0; } .fiviControl.fiviRadioButton > .fiviRadioButtonContainer, .fiviControl.fiviRadioButton > .fiviCheckboxContainer { width: 100%; max-width: fit-content; padding: 0; margin: 0; } .fiviControl.fiviRadioButton > .fiviRadioButtonContainer { display: flex; gap: var(--gap-horizontal-50); align-items: center; width: 100%; max-width: fit-content; padding: 0; margin: 0; } input.DefaultRBControlClassV3 { width: 20px; min-width: 20px; height: 20px; background-color: white; accent-color: var(--color-black-normal); cursor: pointer; margin: 0; &:hover { accent-color: var(--color-black-normal); } } input.DefaultRBControlClassV3 + label { position: relative; left: unset; top: unset; font-weight: 500; font-size: calc(var(--font-size-label) - 2px); line-height: var(--font-lineheight-input); } .rbPair-as-fiviInput { display: flex; flex-direction: column; gap: var(--gap-horizontal-75); width: 100vw !important; max-width: var(--fiviInput-width); height: calc(var(--input-height) + var(--input-marginTop-forLabelFocusSpace)); & > .h4 { font-size: 16px; } } .fiviControl.fiviCheckBox, .fiviCheckBox, .fiviControl.fiviRadioButton, .fiviRadioButton { & .fiviTooltipContainer { position: relative; top: unset; } } /* fiVISION_TextBoxV2 */ .fiviControl.fiviTextBox { display: inline-flex; width: 100vw; max-width: 49%; position: relative; flex-wrap: wrap; padding: 0; margin: 0; } .single-input .fiviTextBox{ width: 100%; max-width: 100%; } .fivi-two-input-container .fiviControl.fiviTextBox { max-width: var(--fiviInput-width-half); } input.form-control, textarea.form-control, select.form-control { display: flex; align-items: center; width: 100%; height: var(--input-height); padding: 0px var(--gap-horizontal-50); margin-top: var(--input-marginTop-forLabelFocusSpace); font-size: var(--font-size-input); font-weight: var(--font-weight-input); line-height: var(--font-lineheight-input); color: var(--font-color-input); font-family: var(--font-family-input); border: 1px solid var(--border-color); border-radius: 8px; background-color: white; &:active, &:hover { border: 2px solid var(--border-color-focus); box-shadow: none; color: var(--font-color-label-focus); } &:disabled { cursor: not-allowed; background-color: #eee; } } .fiviControl.fiviTextBox .fiviLabelContainer { display: flex; position: absolute; height: 100%; width: 100%; pointer-events: none; } .fiviControl.fiviTextBox label.DefaultLabelClass { display: flex; align-items: center; position: absolute; height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); top: 0 !important; /* global.css conflict */ left: 0; font-weight: 500; line-height: var(--font-size-label); color: var(--font-color-label); font-family: var(--font-family-label); transition: all 0.2s ease-in-out; pointer-events: none; } .fiviControl.fiviTextBox label.FocusLabelClass { height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); top: 0 !important; /* global.css conflict */ left: 0; font-weight: 500; } .fiviTextBox:has(> .fiviValueLabelContainer) { flex-direction: column; gap: var(--gap-vertical-25); & > .fiviLabelContainer { position: relative; display: block; width: auto; height: auto; } & label.DefaultLabelClass { position: relative; width: auto; height: auto; top: 0; left: 0; font-size: var(--input-focusLabel-fontSize); } & > .fiviValueLabelContainer { display: flex; align-items: center; width: 100% !important; height: var(--input-height); padding: 0px var(--gap-horizontal-50); font-size: var(--font-size-input); font-weight: var(--font-weight-input); line-height: var(--font-lineheight-input); color: var(--font-color-input); font-family: var(--font-family-input); border: 1px solid var(--color-gray-light) !important; border-radius: 8px; background-color: var(--background-input-color) !important; cursor: not-allowed; pointer-events: all; } & .fiviValueLabel { cursor: not-allowed; pointer-events: all; } } .fiviControl.fiviTextBox .autocomplete-items:has(> div) { display: flex; flex-direction: column; gap: 5px; padding: 5px 0px; border: 1px solid var(--color-gray-dark); border-top: none; position: absolute; left: 0; z-index: 2; background-color: white; & > div { font-size: calc(var(--font-size) + 1px); line-height: 1.5; font-weight: 300; padding: 0px 10px; cursor: pointer; &.autocomplete-active { background-color: var(--color-gray-dark); } } } .fiviControl.fiviTextBox .fiviWriteOnlyEditButton { position: absolute; top: -2px; right: 0px; font-size: calc(var(--font-size) - 2px); font-weight: 600; color: var(--color-secondary-dark); text-transform: uppercase; border: none; border-radius: 5px; background-color: transparent; &:active, &:hover, &:focus { text-decoration: underline; border-color: transparent; } } .fiviControl.fiviTextBox .DefaultTooltipClass { right: var(--gap-horizontal-25); top: calc(var(--input-marginTop-forLabelFocusSpace) + 14px); } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fivi-two-input-container .fiviControl.fiviTextBox { max-width: var(--fiviInput-width); } .fiviControl.fiviTextBox { max-width: 100%; } } /* textbox as camera */ .fiviTextBox:has(label.MobileScanButton) { width: fit-content !important; } .fiviTextBox label.MobileScanButton { min-height: var(--gap-vertical-200); height: 100%; } /* fiVISION_DropDownV2 */ .fiviControl.fiviDropDown { display: inline-flex; width: 100%; /* global.css conflict */ max-width: 49%; position: relative; flex-wrap: wrap; padding: 0; margin: 0; } .single-input .fiviControl.fiviDropDown { display: inline-flex; width: 100%; /* global.css conflict */ max-width: 100%; } .fivi-two-input-container .fiviControl.fiviDropDown { max-width: var(--fiviInput-width-half); } .fiviControl.fiviDropDown:has(option[value=""]:checked) label.DefaultLabelClass { display: flex; position: absolute; align-items: center; height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); top: 0 !important; /* global.css conflict */ left: 0; font-weight: 500; line-height: var(--font-size-label); color: var(--font-color-label); font-family: var(--font-family-label); transition: top 0.25s ease-in-out, left 0.25s ease-in-out, font-size 0.25s ease-in-out, font-weight 0.25s ease-in-out; pointer-events: none; text-transform: none; /* margin-bottom: .5rem; */ } .fiviControl.fiviDropDown label.DefaultLabelClass, .fiviControl.fiviDropDown:has(option[value=""]:checked) label.DefaultLabelClass:has(+ select:focus), .fiviControl.fiviDropDown:has(option[value=""]:checked) label.DefaultLabelClass:has(+ select:active), .fiviControl.fiviDropDown:has(option[value=""]:checked) label.DefaultLabelClass:has(+ select:hover) { position: absolute; height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); top: 0 !important; /* global.css conflict */ left: 0; font-weight: 500; transition: top 0.25s ease-in-out, left 0.25s ease-in-out, font-size 0.25s ease-in-out, font-weight 0.25s ease-in-out; } .fiviControl.fiviDropDown select:has(option[value=""]:checked) { &:active, &:focus, &:hover { color: var(--font-color); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fivi-two-input-container .fiviControl.fiviDropDown { max-width: var(--fiviInput-width); } .fiviControl.fiviDropDown { max-width: 100%; } } /* fiVISION_MoneyTextBoxV2 */ .fiviMoneyTextBox { display: inline-flex; width: 100vw !important; /* global.css conflict */ max-width: var(--fiviInput-width); position: relative; flex-wrap: wrap; padding: 0; margin: 0; justify-content: flex-end; } .fivi-two-input-container .fiviMoneyTextBox { max-width: var(--fiviInput-width-half); } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fivi-two-input-container .fiviControl.fiviDropDown { max-width: var(--fiviInput-width); } } @media all and (max-device-width: 475px), all and (max-width: 475px) { .fivi-two-input-container .fiviMoneyTextBox, .fivi-two-input-container .fiviMoneyTextBox > .fiviTextBox { max-width: var(--fiviInput-width); } } /* fiVISION_EmailTextBoxV2 */ .fiviParentControl.fiviEmailTextBox { width: 100%; /* global.css conflict */ } /* fiVISION_DateTextBoxV2 */ .fiviDateTextBox { display: inline-flex; width: 100vw; max-width: 49%; position: relative; flex-wrap: wrap; padding: 0; margin: 0; } .fiviDateTextBox > .fiviControl.fiviTextBox { width: 100%; max-width: 100%; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviDateTextBox { max-width: 100%; } } /* fiVISION_YearsMonthsDurationV2 */ .fiviYearMonth { width: 100vw; max-width: var(--fiviInput-width); position: relative; & label.DefaultLabelClass { position: absolute; height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); color: var(--font-color-input); top: 0 !important; /* global.css conflict */ left: 0; font-weight: 500; /* text-transform: uppercase; */ } & > .fiviLabelContainer { position: absolute; height: 100%; width: 100%; } } .fiviYearMonthInputContainer { display: flex; gap: var(--column-spacer); width: 100vw; max-width: var(--fiviInput-width); } .fiviYearMonthInputContainer .fiviInput { width: 100vw; max-width: var(--fiviInput-width-half); & > .fiviTextBox { max-width: 100%; } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviYearMonthInputContainer, .fiviYearMonth { max-width: 100%; } .fiviYearMonthInputContainer .fiviInput { max-width: var(--fiviInput-width); } } @media all and (max-device-width: 628px), all and (max-width: 628px) { .fiviYearMonthInputContainer, .fiviYearMonth { max-width: var(--fiviInput-width); } .fiviYearMonthInputContainer .fiviInput { max-width: var(--fiviInput-width-half); } } /* */ /* fiVISION_PhoneNumberTextBoxV2 */ .fiviPhoneControl { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: var(--column-spacer); width: 100vw !important; /* global.css conflict */ max-width: var(--fiviInput-width); margin: 0; padding: 0; } .fiviPhoneTextBoxSMSOptionsContainer { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .fiviPhoneTextBoxConsentLanguageWrapper { display: flex; line-height: 1.33; } .fiviPhoneTextBoxSMSOptInOptOutRBWrapper { display: flex; padding: var(--gap-vertical-25); gap: var(--gap-vertical-50); } /*has preferred flag*/ .fiviPhoneControl:has(> .fiviTextBox + .fiviRadioButton) { & > .fiviTextBox { max-width: var(--fiviInput-width-half); } & > .fiviRadioButton { max-width: var(--fiviInput-width-half); margin-top: var(--input-marginTop-forLabelFocusSpace); height: var(--input-height); & label { font-weight: var(--font-weight-label); } } } /*applicant determined*/ .fiviPhoneControl:has(> .fiviTextBox + .fiviTextBox) { & > .fiviTextBox { max-width: var(--fiviInput-width-half); } } /*applicant determined & preferred flag*/ .fiviPhoneControl:has(> .fiviTextBox + .fiviTextBox + .fiviRadioButton) { max-width: 100%; } @media all and (max-device-width: 808px), all and (max-width: 808px) { /*applicant determined*/ .fiviPhoneControl:has(> .fiviTextBox + .fiviTextBox) { max-width: 100%; & > .fiviTextBox { max-width: var(--fiviInput-width); } } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviPhoneControl:has(> .fiviTextBox + .fiviTextBox + .fiviRadioButton) { flex-wrap: wrap; gap: calc(var(--column-spacer) * 0.75); & > .fiviTextBox:has(input) { max-width: 100%; } } } @media all and (max-device-width: 628px), all and (max-width: 628px) { /*applicant determined*/ .fiviPhoneControl:has(> .fiviTextBox + .fiviTextBox) { max-width: var(--fiviInput-width); & > .fiviTextBox { max-width: var(--fiviInput-width-half); } } } @media all and (max-device-width: 475px), all and (max-width: 475px) { .fiviPhoneControl { flex-wrap: wrap; gap: calc(var(--column-spacer) * 0.75); } /*has preferred flag*/ .fiviPhoneControl:has(> .fiviTextBox + .fiviRadioButton) { & > .fiviTextBox { max-width: var(--fiviInput-width); } & > .fiviRadioButton { margin-top: 0; height: 100%; } } /*applicant determined*/ .fiviPhoneControl:has(> .fiviTextBox + .fiviTextBox) { & > .fiviTextBox { max-width: var(--fiviInput-width); } } } /* fiVISION_ErrorSummary */ .error-container, .fiviErrorSummary { display: none; } .fiviErrorSummary:has(div) { display: flex; flex-direction: column; gap: var(--gap-vertical-25); width: 100vw; max-width: 100%; } .error-container:has(> .fiviErrorSummary > div) { display: block; width: 100vw; max-width: 100%; } .fiviErrorSummary > div { font-size: var(--font-size); line-height: var(--font-lineheight); font-weight: 500; color: red; margin-bottom: 0; list-style: none; text-align: center; } /* fiVISION_LinkHistory */ .fiviLinkHistory { display: flex; flex-direction: column; width: fit-content; padding: 0; margin: 0; gap: var(--gap-vertical-25); } .fiviLinkHistory > a { font-size: calc(var(--font-size) + 2px); cursor: pointer; } .fiviLinkHistory .fivisionpopover { position: relative !important; width: 100%; bottom: unset !important; text-align: center; } /* fiVISION_AddressTextBoxV2 */ .flex-row:has(> .address-container) { gap: var(--gap-horizontal-150); } .address-container { position: relative; display: flex; flex-direction: column; gap: var(--gap-horizontal-50); width: 100vw; max-width: 100%; } .fiviAddressControl { display: flex; width: 100%; flex-direction: column; gap: var(--column-spacer); } .fiviAddressInputs { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--column-spacer); width: 100%; } .fiviAddressValidation { margin-top: -15px; & > label { font-size: calc(var(--font-size) - 2px); line-height: var(--font-lineheight); font-weight: 400; text-align: center; } } .fiviAddressControl .fiviCheckbox { max-width: 100%; & > label { text-wrap: nowrap; white-space: nowrap; } } .fiviAddressControl .fiviCheckbox label { font-size: calc(var(--font-size-label) - 2px); line-height: var(--font-lineheight); } /* fiVISION_ProveIndividualLookup */ .fiviProve, .fiviProve > div:not(.prove-direction-buttons) { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--gap-vertical); width: 100%; } .fiviProve .fiviPhoneControl, .fiviProve .fiviControl { max-width: 100%; } .prove-direction-buttons { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; width: 100%; margin-top: auto; } @media all and (max-device-width: 452px), all and (max-width: 452px) { .prove-direction-buttons { flex-direction: column; & .button-link { text-align: center; } } } /* fiVISION_IDTypeV2 */ .fiviIdType { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); width: 100vw; max-width: 100%; } .fiviIdType > .fiviDateTextBox { max-width: var(--fiviInput-width-half); & > .fiviTextBox { max-width: 100%; } } .fiviIdTypeState, .fiviIdTypeCountry { width: 100vw; max-width: var(--fiviInput-width); } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviIdType > .fiviDateTextBox { max-width: var(--fiviInput-width); & > .fiviTextBox { max-width: 100%; } } } /* fiVISION_EmploymentHistory */ .fiviEmploymentHistory { display: flex; flex-direction: column; gap: var(--gap-vertical) var(--fiviInput-horizontal-spacing); width: 100vw; max-width: 100%; } .fiviEmpHistLblContainer label { line-height: var(--font-lineheight); font-weight: 400; color: var(--font-color); width: 100%; } .fiviEmpHistInputContainer { display: flex; flex-direction: column; gap: var(--column-spacer); width: 100vw; max-width: 100%; /* margin-top: -12px; */ & > .fiviMultiInput { display: flex; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); flex-wrap: wrap; width: 100vw; max-width: 100%; & > div { max-width: 100%; } } & .fiviEmpHistIncomeContainer { display: flex; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); flex-wrap: wrap; width: 100vw; max-width: 100%; & .fiviMoneyTextBox, & .fiviMoneyTextBox > .fiviTextBox, & .fiviNumericTextBox, & .fiviNumericTextBox > .fiviTextBox { width: 100vw; max-width: var(--fiviInput-width-half); } & .fiviDropDown { order: -1; } } } .fiviEmploymentHistory .fiviRemoveBtn { order: 2; } .fiviEmploymentHistory .fiviRemoveBtn:not(:has(> button)) { display: none; } .fiviEmploymentHistory .fiviRemoveBtn > button:before { /* content: "Remove Prior Employer"; */ } .fiviEmpHistBtnContainer, .fiviEmploymentHistory .fiviRemoveBtn { display: flex; align-items: center; justify-content: flex-end; width: 100vw; max-width: 100%; } .fiviEmploymentHistory .fiviRemoveBtn { justify-content: flex-start; order: 2; } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviEmpHistInputContainer { & .fiviEmpHistIncomeContainer { & .fiviMoneyTextBox, & .fiviMoneyTextBox > .fiviTextBox, & .fiviNumericTextBox, & .fiviNumericTextBox > .fiviTextBox { width: 100vw; max-width: var(--fiviInput-width); } } } } @media all and (max-device-width: 628px), all and (max-width: 628px) { .fiviEmpHistBtnContainer, .fiviEmploymentHistory .fiviRemoveBtn { justify-content: center; max-width: var(--fiviInput-width); & .button-link { text-align: center; } } } /* fiVISION_IndividualIncome */ .fiviIndividualIncome { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); width: 100vw; max-width: 100%; } .fiviIndividualIncome > div { display: flex; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); flex-wrap: wrap; width: 100vw; max-width: fit-content; position: relative; & > .fiviDropDown { order: -1; } & .fiviIndividualIncomeRemoveButtonContainer:not(:has(> button)) { display: none; } & .fiviIndividualIncomeRemoveButtonContainer:has(> button) { width: 100%; display: flex; gap: 2px; align-items: center; justify-content: flex-start; & > button { border: none; background-color: transparent; font-size: 15px; line-height: 18px; font-weight: 400; padding: 2px 0 0 0; display: flex; align-items: center; color: var(--color-primary-normal); &:hover { text-decoration: underline; color: var(--color-primary-normal); } } } } .fiviIndividualIncome > .fiviBtnContainer { display: flex; align-items: center; justify-content: flex-end; width: 100vw; max-width: 100%; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .fiviIndividualIncome > div { max-width: 100%; & > .fiviMoneyTextBox, & > .fiviControl.fiviDropDown, & > .fiviNumericTextBox, & > .fiviNumericTextBox > .fiviControl.fiviTextBox { max-width: var(--fiviInput-width); & > .fiviTextBox { max-width: 100%; } } } } @media all and (max-device-width: 628px), all and (max-width: 628px) { .fiviIndividualIncome > .fiviBtnContainer, .fiviIndividualIncome > div .fiviIndividualIncomeRemoveButtonContainer:has(> button) { justify-content: center; } } /* fiVISION_IndividualDetails */ .fiviIndividualDetails { width: 100vw; max-width: 100%; } .fiviIndividualDetails > div:not(.fiviIndDetailTitle) { display: flex; flex-direction: column; gap: var(--gap-vertical-50); width: 100vw; max-width: 100%; margin-bottom: 1.25em; } .fiviIndividualDetails br { display: none; } /*name*/ .fiviIndividualDetails > div > span:first-of-type > label { font-size: calc(var(--font-size) + 2px); font-weight: 500; margin-bottom: var(--gap-vertical-25); margin-left: 0; } .fiviIndividualDetails > div > div:has(> label) { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .fiviIndividualDetails > div > div > label { font-weight: 500; } .fiviIndividualDetails > div > div:has(> label) > div { display: flex; flex-direction: column; gap: var(--gap-vertical-25); margin-left: var(--gap-horizontal-25); font-weight: 400; } /* fiVISION_ProductsAndServicesSelected */ .fiviProductsAndServicesSelected { display: flex; flex-direction: column; width: 100vw; max-width: 100%; gap: var(--gap-vertical-25); font-size: calc(var(--font-size) + 2px); font-weight: 600; } .fiviProductsAndServicesSelected > div > ul { padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--gap-vertical-25) 1px; flex-wrap: wrap; font-weight: 400; font-size: calc(var(--font-size) + 2px); margin: 0 0 var(--gap-vertical-25) 0; & > li > b { font-weight: 500; } } .fiviProductsAndServicesSelected > div > i { display: block; font-size: calc(var(--font-size) + 2px); margin-bottom: var(--gap-vertical-25); font-style: normal; } .fiviProductsAndServicesSelected > div > i:before { content: "Selected "; } .fiviProductsAndServicesSelected > ul { display: flex; flex-direction: column; gap: var(--gap-vertical-25); font-weight: 400; padding: 0; margin: 0 0 0 var(--gap-horizontal-25); font-size: var(--font-size); list-style: none; } /* fiVISION_ProductRelationships */ .fiviProductRelationship { width: 100%; } .fiviProductRelationship table { margin: 0; border: 1px solid var(--color-gray-dark); border-radius: 5px; box-shadow: none; width: 100%; min-width: 410px; } .fiviProductRelationship table > tbody, .fiviProductRelationship table > thead { display: flex; flex-direction: column; width: 100%; } .fiviProductRelationship table > tbody > tr, .fiviProductRelationship table > thead > tr { display: flex; flex-wrap: nowrap; position: relative; padding: 0 var(--column-spacer); border: none; border-radius: 5px; border-bottom: 1px solid var(--color-gray-dark); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .fiviProductRelationship table > tbody > tr, .fiviProductRelationship table > thead > tr { background-color: white; } .fiviProductRelationship table > tbody > tr:last-of-type { border: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .fiviProductRelationship table th, .fiviProductRelationship table td { display: flex; align-items: center; justify-content: center; max-width: var(--column-width-3); width: 100%; padding: var(--gap-horizontal) 0 !important; background-color: transparent !important; } .fiviProductRelationship table td.fiviTableRowHeader { justify-content: flex-start; padding-left: 5px !important; } .fiviProductRelationship table .fiviApplicantNameColumn { display: flex; flex-direction: column; } .fiviProductRelationship table .fiviApplicantNameColumn .fiviTableSubHeader { font-weight: 300; font-size: 13px; } @media all and (max-device-width: 650px), all and (max-width: 650px) { .fiviProductRelationship table { font-size: 13px; } .fiviProductRelationship { /* solution for mobile */ overflow-x: scroll !important; } .fiviProductRelationship table > tbody > tr, .fiviProductRelationship table > thead > tr { padding: 5px 3px; } .fiviProductRelationship table .fiviApplicantNameColumn { font-size: 12px; word-break: break-all; margin: 4px; .fiviTableSubHeader { font-weight: 300; font-size: 11px; } } } /* Application Summary page */ /* Indent product services */ .page-ApplicationSummary .fiviProductsAndServicesSelected div ul div li { margin-left: 2em; } /* fiVISION_ProductsAndServicesV2 */ .fiviProductServices { padding-bottom: var(--gap-vertical); } .certificate-deposit-products .fiviProductServices { padding-bottom: 0; } .fiviProductServices, .product-services-default-mode-container { display: flex !important; /* global.css conflict */ flex-direction: column !important; /* global.css conflict */ gap: var(--gap-horizontal); width: 100vw; max-width: 100%; height: 100%; padding: 1px; } .fiviProdGroup, .fiviServGroup { display: flex; flex-direction: column; flex-wrap: wrap; max-width: var(--column-width-10); width: 100%; gap: var(--gap-vertical); } .fiviProductServices > div div { padding: 0 !important; /* global.css conflict */ } .fiviProductServices .fiviProdServ:not(.fiviProductServicesFilterBar) { display: flex; flex-direction: column; /* height: 100%; */ gap: var(--gap-vertical-50); max-width: 100%; width: 100vw; /* min-height: 100px; */ padding: 0 !important; /* global.css conflict */ position: relative; background: white; border-radius: 3px; box-shadow: none; background-color: transparent; } .fiviProductServices .fiviProdServ:not(:last-child), .product-service-content[productgroup="certificate"] .fiviProductServices .fiviProdServ:last-child { padding-bottom: 1rem !important; border-bottom: 1px solid var(--border-color); } .fiviProductServices .fiviProdServ > .fiviRadioButton .fiviCheckBox, .fiviProductServiceDisplay > .fiviRadioButton .fiviCheckBox { flex-direction: row; justify-content: flex-start; width: 100vw; max-width: 100%; & > label { width: fit-content; height: auto; } & > .DefaultTooltipClass { position: relative; order: 1; } & > input { /* margin-left: auto; */ } } .fiviProductServices .fiviProdServ > .fiviRadioButton .fiviCheckBox { & > label { font-size: calc(var(--font-size-label) + 2px); line-height: cal(var(--font-size-label) + 8px) font-weight: 600; height: auto; } } .fiviProductServiceDisplay > .fiviRadioButton .fiviCheckBox { & > label { font-size: calc(var(--font-size-label) + 2px); font-weight: 400; } } .fiviProductAdditionalOptions { display: flex; flex-wrap: wrap; width: 100vw; max-width: 100%; & > .fiviTextBox, & > .fiviNumericTextBox { width: 100vw; max-width: var(--fiviInput-width); } } .fiviProductMoreInfo { display: none; width: 100vw; max-width: 100%; margin: 0; line-height: var(--font-lineheight); } .fiviProductMoreInfo:has(> span > a), .fiviProductMoreInfo:has(> span > div > *) { display: flex; } .fiviProductServices div.fiviProductAdditionalOptions { display: flex; flex-direction: column; gap: var(--gap-vertical) var(--gap-horizontal-50); } .fiviProductServices > div div.fiviProdServGroup { display: flex; flex-direction: column; gap: var(--gap-vertical); width: 100vw; max-width: 100%; padding: var(--gap-vertical-50) var(--gap-vertical) var(--gap-vertical-50) var(--gap-vertical) !important; } .fiviProductServiceDisplay { display: flex; flex-direction: column; gap: var(--gap-vertical-50); width: 100vw; max-width: 100%; } .fiviProductServiceMoreInfo { display: none; } .fiviProductServiceMoreInfo:has(> span > a), .fiviProductServiceMoreInfo:has(> span > div > *) { display: flex; } .fiviProdServ.fiviProductServicesFilterBar { display: flex; align-items: center; justify-content: flex-start; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); flex-wrap: wrap; width: 100%; max-width: 100%; border-bottom: none; padding-bottom: var(--gap-vertical) !important; & input.form-control, & select.form-control { background-color: white !important; } & .fiviCheckbox { padding-top: var(--input-marginTop-forLabelFocusSpace); justify-self: flex-end; } & > .fiviControl { width: 100vw; max-width: calc(var(--fiviInput-width) * 0.75); & > .fiviControl { max-width: 100%; } } } .fiviProductServices > div div.fiviProductAddAnotherContainer { display: flex; align-items: center; justify-content: flex-start; width: 100vw; max-width: 100%; order: 2; padding-top: var(--gap-vertical-50) !important; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviProdServ.fiviProductServicesFilterBar { > .fiviControl { width: 100vw; max-width: var(--fiviInput-width); } } } /* fiVISION_IndividualHyperlinkList */ .fiviIndividualHyperlinkList { width: 100vw; max-width: 100%; & > ul { margin: 0; padding-left: var(--gap-vertical-50); display: flex; flex-direction: column; gap: var(--gap-vertical-25); & > li { margin: 0; display: flex; gap: var(--gap-horizontal-25); } } & button { border: none; padding: 0; &:hover { text-decoration: underline; } } } /* fiVISION_ProgressBar */ .progress-container-header { display: flex; flex-direction: column; width: 100%; max-width: var(--column-width-10); position: relative; } .progress-container-info { display: flex; width: 100%; align-items: center; margin-bottom: .5rem; & div{ width: 50%; } & .progress-container-steps { text-align: left; font-weight: 600; } & .progress-container-cart { width: 100%; text-align: right; align-items: center; display: flex; justify-content: flex-end; } & label { font-weight: 600; } } .pnlProductCartMobile { width: 100%; justify-content: center; } .progress-container-info-mobile { display: none; width: 100%; align-items: center; margin-top: .5rem; & .progress-container-cart-mobile{ width: 100%; text-align: right; align-items: center; display: flex; justify-content: center; } & label { font-weight: 600; } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .progress-container-cart { display: none !important; } .progress-container-info-mobile { display: flex; } } /* controlid="progBar" */ .fiviProgressBar:has(> #progBar) { width: 100vw; max-width: 100%; display: flex; background-color: transparent; } #progBar { width: 100vw; max-width: 100%; & > .progress-bar-text { display: none; } } #progBar .progress-bar-outer { height: 5px; background-color: #E6E7E8; } #progBar .progress-bar-inner { height: 5px; background-color: var(--color-primary-normal); } @media (max-device-width: 1106px), (max-width: 1106px) { #progBar > .progress-bar-outer { display: block; } } /* fiVISION_DocumentListV2 */ .fiviDocumentList, .page-RequiredDocuments .fiviDocumentList > span { max-width: var(--column-width-10); width: 100%; display: flex; flex-direction: column-reverse; gap: var(--gap-vertical-75); } .V3SummaryControl .fiviDocumentList { max-width: var(--column-width-12); } .fiviDocumentList > input:first-of-type { align-self: center; } .fiviDocumentList span.fiviBtnContainer { display: flex; width: 100%; align-items: center; justify-content: flex-end; margin-bottom: var(--gap-vertical); } .fiviDocumentList table { /* display: block; */ width: 100%; margin: 0; border: 1px solid var(--color-gray-dark); border-radius: 5px; box-shadow: none; } .fiviDocumentList table > tbody, .fiviDocumentList table > thead { display: flex; flex-direction: column; width: 100%; } .fiviDocumentList table > tbody > tr, .fiviDocumentList table > thead > tr { display: flex; flex-wrap: nowrap; position: relative; padding: 0 var(--column-spacer); border: none; border-radius: 5px; border-bottom: 1px solid var(--color-gray-dark); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .fiviDocumentList table > tbody > tr, .fiviDocumentList table > thead > tr { background-color: white; } .fiviDocumentList table > tbody > tr:last-of-type { border: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .fiviDocumentList table th, .fiviDocumentList table td { display: flex; align-items: center; justify-content: center; max-width: var(--column-width-3); width: 100%; background-color: transparent !important; } .V3MessagesHeaderClass th { max-width: var(--column-width-3) !important; width: 100% !important; border: none !important; } .fiviDocumentList table th:first-of-type, .fiviDocumentList table td:first-of-type { justify-content: flex-start; } .fiviDocumentList table th:last-of-type, .fiviDocumentList table td:last-of-type { display: flex; flex-direction: column; align-items: center; max-width: var(--column-width-2); width: 100%; background-color: transparent !important; } .fiviDocumentList table td:last-of-type span:has(> .fiviFileUpload) { display: flex; flex-direction: column; gap: var(--gap-vertical-50); align-items: center; width: 400px; & p { font-size: calc(var(--font-size) - 2px); text-align: left; } } .fiviDocumentList table td:last-of-type > div[id*="UploadProgressBar_"] { max-width: var(--fiviInput-width); min-width: var(--column-width-2); width: fit-content; display: flex; align-items: center; gap: var(--gap-horizontal-25); margin-top: var(--gap-vertical-25); } .fiviDocumentList table td:last-of-type > div { display: flex; flex-direction: column; align-items: center; gap: var(--gap-vertical-50); } .fiviFileUpload { order: 1; } .fiviDocumentList .DefaultTooltipClass { display: flex; align-items: center; justify-content: center; width: var(--column-spacer); height: 100%; margin: 0 !important; position: absolute; top: 0; right: var(--gap-horizontal-25); } .ng-modal-overlay { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.8; } .ng-modal-dialog { z-index: 10000; position: fixed; width: 80%; border-radius: 10px; top: 10%; left: 0; right: 0; margin: 0 auto; background-color: #fff; box-shadow: 4px 4px 80px #000; } .fiviDocumentList .ng-modal-dialog { left: 0; width: var(--column-width-6) !important; } .fiviDocumentList .ng-modal-dialog-content { padding: var(--column-spacer); } .fiviDocumentList .ModalContent > div { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .fiviDocumentList .ModalContent br { display: none; } .fiviDocumentList .ModalContent > div > .modal-header { padding: 0; } .fiviDocumentList .ModalContent > div > .modal-header .close { font-size: var(--font-size-h1); color: var(--color-black-dark); opacity: 1; background-color: transparent; border: none; font-size: 22px; line-height: 22px; &:hover { opacity: 0.5; } } .fiviDocumentList .ModalContent > div > .modal-header .close:hover { opacity: 0.5; } .fiviDocumentList .ModalContent > div .modal-body-insideItem { text-align: left; margin: 0 !important; display: flex; flex-direction: column; gap: var(--gap-horizontal-50); } .fiviDocumentList .ModalContent > div .text-muted { font-size: var(--font-size); color: var(--font-color); line-height: var(--font-lineheight); } .fiviDocumentList .ModalContent > div .text-muted > br { display: inline-block; } .fiviDocumentList .ModalContent #qrcode { margin: 0 !important; } .fiviDocumentList .ModalContent #UploadWrapper > div:nth-of-type(2) { margin: 0 !important; height: auto !important; border: none !important; text-align: left !important; } .fiviDocumentList .ModalContent #UploadWrapper > div:nth-of-type(2) > span { font-size: var(--font-size-h2) !important; color: var(--font-color-h2) !important; line-height: var(--font-lineheight-h2) !important; font-weight: var(--font-weight-h2); padding: 0 !important; text-align: left !important; } .fiviFileUploadFailedWrapper { color: red; padding-top: 1rem; } @media all and (max-device-width: 990px), all and (max-width: 990px) { .fiviDocumentList span.fiviBtnContainer { display: none; } } @media all and (max-device-width: 800px), all and (max-width: 800px) { .fiviDocumentList table:not(.V3StatusCenterTableClass) tbody > tr:first-of-type { display: none; } .fiviDocumentList table.V3StatusCenterTableClass thead { display: none; } .fiviDocumentList table > tbody > tr { flex-direction: column; padding: calc(var(--column-spacer) / 2); gap: var(--gap-vertical-75); } .fiviDocumentList table > tbody > tr > td { display: flex; flex-direction: column; align-items: center; font-size: var(--font-size-h3); max-width: 100%; padding: 0 !important; width: 100%; gap: var(--gap-vertical-25); } .fiviDocumentList table > tbody > tr > td::before { font-size: var(--font-size-h2); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: 600; font-family: var(--font-family-h4); } .fiviDocumentList table > tbody > tr > td:nth-of-type(1):before { content: "Applicant Name"; } .fiviDocumentList table > tbody > tr > td:nth-of-type(2):before { content: "Document Type"; } /* status center column names */ .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(1):before { content: "Application Number"; } .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(2):before { content: "Individual"; } .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(3):before { content: "Document Type"; } .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(4):before { content: " "; } .fiviDocumentList table > tbody > tr > td:nth-of-type(3), .fiviDocumentList table td:last-of-type { max-width: 100%; } .fiviDocumentList .DefaultTooltipClass { position: relative; height: fit-content; width: 100%; margin: var(--gap-vertical-25) 0 !important; } .fiviDocumentList > input:first-of-type { display: none !important; } } /* fiVISION_DisclosuresList */ div:has(> .DisclosuresHeaderClass) { display: flex; flex-direction: column; width: 100vw; max-width: 100%; gap: var(--gap-vertical); } .DisclosuresHeaderClass { display: none; margin-top: 10px; } .fiviDisclosureList { margin-top: 10px; display: flex; flex-direction: column; width: 100vw; max-width: 100%; gap: var(--gap-vertical-75); & > .DisclosureItem { display: flex; font-size: 18px; line-height: 24px; & .fa.fa-square { outline: 1.5px solid var(--color-primary-dark); border-radius: 2px; color: white; } & .fa.fa-check { color: var(--color-primary-dark); outline: 1.5px solid var(--color-primary-dark); border-radius: 2px; } } & .DisclosureLinkV3 { color: var(--color-primary-dark); font-size: calc(var(--font-size) + 2px); line-height: 133%; background-color: transparent; border: none; text-align: left; &:hover { text-decoration: underline; } } } .DisclosureItem::before { content: url('/_assets/layoutcontent/20099/defaultv3/document_loan-forms.svg'); margin-right: 1px; /* Space between image and text */ vertical-align: middle; display: inline-block; zoom: 75%; } .fiviDisclosuresModal { position: fixed; width: 100vw; height: 100%; top: 0; left: 0; background-color: color-mix( in srgb, var(--color-black-dark) 50%, transparent ); display: flex; align-items: center; flex-direction: column; padding-top: 15vh; z-index: 99; & > div { width: 100vw; z-index: 100; max-width: var(--column-width-10); background-color: var(--color-white-normal); padding-left: var(--column-spacer); padding-right: var(--column-spacer); border-left: solid 1px var(--color-gray-dark); border-right: solid 1px var(--color-gray-dark); &:first-of-type { padding-top: var(--column-spacer); padding-bottom: var(--column-spacer); border-left: solid 1px var(--color-gray-dark); border-right: solid 1px var(--color-gray-dark); border-top: solid 1px var(--color-gray-dark); border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: var(--font-size-h2); color: var(--font-color-h2); line-height: var(--font-lineheight-h2); font-weight: var(--font-weight-h2); } &.fiviDisclosureModalButtonWrapper { padding-top: var(--column-spacer); padding-bottom: var(--column-spacer); display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; border-left: solid 1px var(--color-gray-dark); border-right: solid 1px var(--color-gray-dark); border-bottom: solid 1px var(--color-gray-dark); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } } & .fiviPDFContainer { width: 100%; height: 60vh; } } @media all and (max-device-width: 1120px), all and (max-width: 1120px) { .fiviDisclosuresModal { & > div { max-width: 90vw; } } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviDisclosureList { & .DisclosureItem { padding-left: 0; } } } /* fiVISION_ProductFundingV2 */ .fiviProductFunding { display: flex; flex-direction: column; gap: var(--gap-vertical); width: 100vw; max-width: 100%; } .fiviProductFundingItem, .fiviFundingAmount { width: 100%; position: relative; padding: var(--gap-vertical-50) 0; margin: 0; min-height: calc(var(--input-height) + var(--gap-vertical)); } .fiviFundingInput, .fiviFundingAmount { display: flex; flex-direction: column; justify-content: space-between; margin: 0; align-items: center; & input { margin: 0; text-align: right; &::placeholder { color: var(--color-gray-normal); } } & > label { display: flex; flex-direction: column; gap: calc(var(--gap-vertical-25) / 2); } & .fiviMoneyTextBox { max-width: 100%; width: 100%; } & .fiviMoneyTextBox > .fiviInput { padding-top: .5rem; max-width: 100%; width: 100%; } } .fiviFundingAmount { justify-content: space-between; padding-right: var(--gap-vertical); display: none; & > span { font-weight: 500; } } @media all and (max-device-width: 628px), all and (max-width: 628px) { .fiviFundingInput { flex-direction: column; & > label { border-right: 0; text-align: center; } } } /* fiVISION_ACHFundingAccountVerification */ .fiviPlaid, .fiviFinicityFundingAccountVerificationContainer { display: flex; flex-direction: column; align-items: center; width: 100vw; max-width: 100%; } /* fiVISION_CreditCardV2 */ .fiviParentControl.fiviCreditCard { display: flex; width: 100%; flex-direction: column; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); } .fiviCCNameAddress, .fiviCCInfo, .fiviCCNameAddress .fiviAddressInputs { display: flex; flex-wrap: wrap; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); width: 100vw; max-width: 100%; justify-content: center; & > .fiviControl.fiviInput { max-width: calc(50% - var(--fiviInput-horizontal-spacing)); } } .fiviCCNameAddress > span:nth-of-type(2) { display: none; } .fiviCCInfo { column-gap: 0; & > span:first-of-type { margin-right: var(--fiviInput-horizontal-spacing); } } .fiviCCInfo > span:not(:first-of-type) { max-width: calc( calc(50% - var(--fiviInput-horizontal-spacing)) / 3 ) !important; & .fivisionpopover { display: none !important; } } .fiviCCInfo > span:nth-of-type(2) { & > label.DefaultLabelClass { display: none !important; } & > select.form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; color: var(--font-color) !important; } &:before { content: "Card Expiration & CVV"; display: flex; align-items: center; position: absolute; height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); line-height: var(--font-size-label); color: var(--font-color-label); top: 0 !important; left: 0; font-weight: 500; white-space: nowrap; text-wrap: nowrap; } } .fiviCCInfo > span:nth-of-type(3) { & > label.DefaultLabelClass { display: none !important; } & > select.form-control { border-radius: 0; color: var(--font-color) !important; } } .fiviCCInfo > span:nth-of-type(4) { & label.DefaultLabelClass { display: none !important; } & > input.form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; color: var(--font-color) !important; } & .DefaultTooltipClass { display: none !important; } } @media all and (max-device-width: 725px), all and (max-width: 725px) { .fiviCCNameAddress, .fiviCCInfo, .fiviCCNameAddress .fiviAddressInputs { flex-wrap: wrap; & > .fiviControl.fiviInput { max-width: 100%; } } .fiviCCInfo > span:not(:first-of-type) { max-width: calc(100% / 3) !important; } .fiviCCInfo > span:first-of-type { margin-right: 0; } } /* fiVISION_OneTimePasscode */ .fiviOTP { width: 100vw; max-width: 100%; margin-top: calc(var(--gap-vertical-50) * -1); & > .loading { width: 100vw; max-width: 100%; display: flex; align-items: center; justify-content: center; } .fiviControl.fiviDropDown select:has(option[value=""]:checked) { color: var(--font-color); &:active, &:focus, &:hover { color: var(--font-color); } } } .fiviOTPDestination, .fiviOTPCode { display: flex; flex-direction: column; gap: var(--gap-vertical); width: 100vw; max-width: 100%; padding-bottom: calc(var(--gap-vertical) * 3.5); } .fiviOTPCode { padding-top: var(--gap-vertical-50); } .fiviOTPCode > .fiviLabelContainer > label { font-size: calc(var(--font-size) + 4px); } .fiviOTPDestination > div:has(> .fiviBtnContainer), .fiviOTPButtonContainer { display: flex; flex-direction: row; justify-content: space-between; margin-top: var(--gap-vertical); align-items: center; border-top: 0.5px solid var(--border-color); padding: var(--gap-vertical) var(--gap-horizontal); width: 100vw; max-width: 100%; position: absolute; bottom: 0; left: 0; text-wrap: nowrap; } @media all and (max-device-width: 628px), all and (max-width: 628px) { .fiviOTPDestination, .fiviOTPCode { padding-bottom: calc(var(--gap-vertical) * 7); } .fiviOTPDestination > div:has(> .fiviBtnContainer), .fiviOTPButtonContainer { flex-direction: column; } .fiviBtnContainer { flex-direction: column-reverse; align-items: center; justify-content: center; gap: var(--gap-vertical-75); width: 100%; & .button-link { text-align: center; } } } /* ID Auth */ .fiviIDAuthentication { width: 100vw; max-width: 100%; padding-bottom: calc(var(--gap-vertical) * 3.5); } .fiviIDAuthentication > div { display: flex; flex-direction: column; gap: var(--gap-vertical-150); width: 100vw; max-width: 100%; } .fiviIDAuthQuestionContainerClass { display: flex; flex-direction: column; gap: var(--gap-vertical-50); & > .fiviLabelContainer > label { font-size: calc(var(--font-size) + 2px); padding-bottom: var(--gap-vertical-50); } } .fiviIDAuthAnswerContainer { padding-left: var(--gap-horizontal-50); } .fiviIDAuthSubmitAnswerContainer { gap: var(--gap-horizontal); display: flex; flex-direction: row; justify-content: flex-end; margin-top: var(--gap-vertical); align-items: center; border-top: 0.5px solid var(--border-color); padding: var(--gap-vertical) var(--gap-horizontal); width: 100vw; max-width: 100%; position: absolute; bottom: 0; left: 0; } /* 6.34 fiVISION_PleaseWait */ .fiviPleaseWait { position: fixed; width: 100vw; height: 100vh; z-index: 99; background-color: black; opacity: 0.75; top: 0; left: 0; padding-top: 20vh; display: flex; flex-direction: column; align-items: center; gap: 20px; & > .loaderMessage { text-align: center; color: white; } } /* fiVISION_HMDAQuestions */ .fiviHMDAQuestions { display: flex; width: 100vw; max-width: 100%; flex-wrap: wrap; gap: var(--gap-horizontal-150) var(--gap-horizontal); & br { display: none; } & > .fiviHMDAEthnicity, & > .fiviHMDARace, & > .fiviHMDAGender { display: flex; flex-direction: column; gap: var(--gap-horizontal-50); width: 100vw; max-width: var(--column-width-4); min-width: var(--column-width-3); & > .fiviLabelContainer { & > label { font-size: 18px; font-weight: 600; letter-spacing: 1; text-decoration: underline; } } & > div { display: flex; flex-direction: column; gap: var(--gap-horizontal-25); } } & > .fiviHMDARace { order: -1; } } /* fivision_AccountSelection */ .fiviAccountSelectionCheckboxList { width: 100vw; max-width: 100%; & .fiviSelectAccountsContainer { width: 100vw; max-width: 100%; display: flex; flex-direction: column; gap: var(--gap-vertical-150); } } /* fiVISION_BeneficialOwnership */ .fiviBenficialOwnership { width: 100vw; max-width: fit-content; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-150); overflow-x: auto; margin: 0 10px; & > .fiviTable { border: 1px solid var(--color-gray-dark); border-radius: 5px; padding-top: var(--column-spacer); } & .fiviTableHead th { border-bottom: 1px solid var(--color-gray-dark); padding: 0 calc(var(--column-spacer) / 2) var(--column-spacer) calc(var(--column-spacer) / 2); } & .fiviTableBody td { padding: calc(var(--column-spacer) / 1.5); } .fiviTableRow:not(:first-of-type) { border-top: 2px solid var(--color-gray-dark); border-radius: 0 !important; } & td { min-width: var(--column-width-2); } & td:has(> .fiviTextBox) { width: 100vw; max-width: var(--column-width-4); } & tr:not(:last-of-type) > td { border-bottom: 1px solid var(--color-gray-dark); } & .fiviTextBox { max-width: var(--column-width-2); margin: 0 auto; display: block; & input.form-control { margin-top: 0; text-align: center; } } & .fiviRadioButton { display: block; margin: 0 auto; } & .fiviBtnContainer { align-self: flex-end; } } /* BeneficialOwnership table - Mobile Display */ @media screen and (max-width: 768px) { :root { --column-width-4: 70vw; } .section-container:has(.fiviBenficialOwnership) { align-items: center; } .fiviBenficialOwnership { & > .fiviTable { border: solid black 1px; padding-top: 0; } .fiviTableHead { display: none; } .fiviTable, .fiviTableBody, .fiviTableRow, .fiviTableData { display: block; width: 100%; } .fiviTableRow { margin-bottom: 1rem; border-radius: 8px; overflow: hidden; } .fiviTableData { text-align: center; padding: 12px 1rem; position: relative; border-bottom: 1px solid #e5e7eb; } .fiviTableData:last-child { border-bottom: 0; } /* Header for the first column */ .fiviTableData:nth-of-type(1)::before { content: "Individual"; } /* Header for the second column */ .fiviTableData:nth-of-type(2)::before { content: "Percent Ownership"; } /* Header for the third column */ .fiviTableData:nth-of-type(3)::before { content: "Controlling Individual"; } .fiviTableData::before { display: block; position: static; width: auto; padding-left: 0; margin-bottom: 0.5rem; font-weight: 700; text-align: center; color: #1f2937; white-space: normal; overflow: visible; text-overflow: clip; } .fiviBtnContainer { align-self: center; width: 100%; margin-top: 1rem; } .fiviBtnContainer .fiviLargeBtn { width: 100%; } /* Specific adjustments for input fields within responsive cells */ .fiviTableData .fiviControl.fiviInput.fiviTextBox { width: auto; max-width: none; } .fiviTableData .fiviControl.fiviRadioButton { margin-top: 10px; text-align: center !important; } } } /* fiVISION_ExistingAccountOwnerList */ .fiviExistingAccountOwnerListContainer { width: 100vw; max-width: 100%; display: flex; flex-direction: column; gap: var(--gap-horizontal-200); & > div { width: 100%; display: flex; flex-direction: column; gap: var(--gap-horizontal-75); } & .fiviLabelContainer:has(.section-header) { width: 100%; margin-bottom: var(--gap-horizontal-50); } & .h4 { text-decoration: underline; margin-top: var(--gap-horizontal-75); } } .fiviExistingAccountOwnerProductsListClass { display: flex; flex-direction: column; gap: var(--gap-horizontal-75); margin-left: var(--gap-horizontal-50); & > .fiviExistingAccountOwnerApplicantNameClass { display: flex; gap: var(--gap-horizontal-50); align-items: center; & label.DefaultCBControlClassV3 { font-size: 16px; font-weight: 600; } } & div:has(> .product-selection) { display: flex; flex-direction: column; gap: var(--gap-horizontal-50); width: 100%; margin-left: var(--gap-horizontal-50); & > .product-selection > .fiviCheckBox { width: 100%; max-width: 100%; justify-content: flex-start; & input { width: fit-content; } & label { font-size: 16px; } } } } /* fiVISION_ACH */ .fiviACH { display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); flex-wrap: wrap; width: 100%; & > .fiviTextBox, & > .fiviABATextBoxContainer { max-width: calc(var(--fiviInput-width) - calc(var(--gap-vertical) / 2)); width: 100%; & > .fiviTextBox { max-width: 100%; width: 100vw; } } & > .fiviACHAccountTypeRBContainer { max-width: 100%; width: 100vw; display: flex; height: var(--input-height); gap: var(--gap-horizontal); align-items: cetner; } } /* fiVISION_WithdrawApplication */ .fiviApplicantWithdrawContainer { width: 100vw; max-width: var(--fiviInput-width); display: flex; flex-direction: column; gap: var(--gap-vertical); } .fiviApplicantWithdrawContainer > div { width: 100%; display: flex; flex-direction: column; gap: var(--gap-vertical); } /* fiVISION_PersonSearch */ .fiviPersonSearch { display: flex !important; flex-direction: column !important; align-items: stretch; width: 100%; } .fiviPersonSearch .fiviInput.fiviTextBox:nth-of-type(1), .fiviPersonSearch .fiviInput.fiviTextBox:nth-of-type(2) { display: block; width: 100%; margin-bottom: 12px; } .fiviPersonSearch .fiviInput.fiviTextBox input.form-control { width: 100%; } .fiviPersonSearch .form-inline { display: flex; flex-direction: row !important; gap: 1em; } .fiviPersonSearch .form-inline .fiviInput, .fiviPersonSearch .form-inline .fiviTextBox { display: flex; flex: 1 1 0; min-width: 0; } .fiviPersonSearch .fiviCenterBtn .defaultnextbutton { min-width: var(--column-width-2); width: fit-content !important; margin: 0; padding: var(--gap-vertical-25) var(--gap-horizontal-200); background-color: var(--color-primary-normal); color: white; border: 2px solid var(--color-primary-normal); border-radius: 5px; font-size: 15px; line-height: 18px; font-weight: 400; box-shadow: none; transition-duration: 500ms; transition-property: border-radius, color, background-color; text-decoration: none; } /* 6.35 Status Center 6.35.1 Global Overrides */ .V3StatusCenterLogin > #pnlEnterPassword, .V3StatusCenterLogin > #pnlShowCreatePass, .V3StatusCenterLogin > #pnlShowMFACode, .V3StatusCenterLogin > #pnlShowMFADropdown, .V3SummaryControl #pnlShowMFADropdown, .V3SummaryControl #pnlShowMFACode, .V3SummaryControl .fiviVerifyTrialDeposits, .V3SummaryControl .fiviCheckOrder, .fiviStatusCenterEmail, .fiviVerifyTrialDepositsInputContainer { display: flex; flex-direction: column; gap: var(--gap-horizontal); width: 100vw; max-width: 100%; } .V3StatusCenterLogin > #pnlEnterPassword .DefaultLabelClassV3, .V3StatusCenterLogin > #pnlShowCreatePass .DefaultLabelClassV3, .V3StatusCenterLogin > #pnlShowMFACode .DefaultLabelClassV3, .V3StatusCenterLogin > #pnlShowMFADropdown .DefaultLabelClassV3, .V3SummaryControl #pnlShowMFACode .DefaultLabelClassV3, .V3SummaryControl #pnlShowMFADropdown .DefaultLabelClassV3, .V3SummaryControl .fiviVerifyTrialDeposits .DefaultLabelClassV3, .fiviStatusCenterEmail .DefaultLabelClassV3 { display: flex; align-items: center; height: var(--input-height); position: absolute; left: var(--gap-horizontal-50); top: var(--input-marginTop-forLabelFocusSpace); font-size: var(--font-size-label); font-weight: var(--font-weight-label); line-height: var(--font-size-label); color: var(--font-color-label); font-family: var(--font-family-label); transition: all 0.2s ease-in-out; pointer-events: none; } .V3StatusCenterLogin > #pnlEnterPassword .LabelClassFocus, .V3StatusCenterLogin > #pnlShowCreatePass .LabelClassFocus, .V3StatusCenterLogin > #pnlShowMFACode .LabelClassFocus, .V3StatusCenterLogin > #pnlShowMFADropdown .LabelClassFocus, .V3SummaryControl #pnlShowMFACode .LabelClassFocus, .V3SummaryControl #pnlShowMFADropdown .LabelClassFocus, .V3SummaryControl .fiviVerifyTrialDeposits .LabelClassFocus, .fiviStatusCenterEmail .LabelClassFocus { height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); top: 0 !important; /* global.css conflict */ left: 0; font-weight: 500; } .V3StatusCenterLogin > #pnlEnterPassword .fivisionpopover, .V3StatusCenterLogin > #pnlShowCreatePass .fivisionpopover, .V3StatusCenterLogin > #pnlShowMFACode .fivisionpopover, .V3SummaryControl #pnlShowMFACode .fivisionpopover, .V3SummaryControl .fiviVerifyTrialDeposits .fivisionpopover, .fiviStatusCenterEmail .fivisionpopover { position: relative !important; top: unset; bottom: unset !important; box-shadow: none; border: none; background-color: transparent; width: 100vw; max-width: var(--fiviInput-width); left: 0; margin: 0; /* margin-top: var(--gap-vertical-25); */ text-align: left; } .V3StatusCenterLogin > #pnlShowMFADropdown select.DefaultFormControlClassV3, .V3SummaryControl #pnlShowMFADropdown select.DefaultFormControlClassV3 { padding: 0px var(--gap-horizontal-50) !important; font-size: var(--font-size-input) !important; max-width: var(--fiviInput-width); } .V3StatusCenterLogin > #pnlEnterPassword .fiviControl, .V3StatusCenterLogin > #pnlShowCreatePass .fiviControl, .V3StatusCenterLogin > #pnlShowMFACode .fiviControl, .V3StatusCenterLogin > #pnlShowMFADropdown .fiviControl, .V3SummaryControl #pnlShowMFACode .fiviControl, .V3SummaryControl #pnlShowMFADropdown .fiviControl, .V3SummaryControl .fiviVerifyTrialDeposits .fiviControl, .V3SummaryControl .fiviCheckOrder .fiviControl, .fiviStatusCenterEmail .fiviControl { padding: 0; } /* 6.35.2 Status Center Login */ .fiviStatusCenterEmail { width: 100vw; max-width: 100%; margin: 0; display: flex; flex-direction: column; } main:has(.V3StatusCenterLogin) { justify-content: center; } .V3StatusCenterLogin { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--gap-vertical-150); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); font-size: calc(var(--font-size) + 2px); } .V3StatusCenterLogin div, .V3StatusCenterLogin > div > span { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--gap-vertical); } .V3StatusCenterLogin > div span:has(> .btn-link) { display: block; } .V3StatusCenterLogin br { display: none; } .V3StatusCenterLogin > #pnlShowMFACode .fiviCheckBox { display: flex; } .V3StatusCenterLogin > #pnlEnterPassword, .V3StatusCenterLogin > #pnlShowCreatePass, .V3StatusCenterLogin > #pnlShowMFACode, .V3StatusCenterLogin > #pnlShowMFADropdown { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical); max-width: var(--column-width-12); width: 100%; margin: 0; } .V3StatusCenterLogin .fiviControl.fiviTextBox { display: inline-flex !important; padding: 0 !important; } #pnlPleaseWait:has(+ .V3StatusCenterLogin) { position: fixed; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.66; background-color: black; display: flex; & > .loader { position: absolute; top: 20%; left: calc(50% - 50px); } } /* 6.35.3 Status Center Summary */ .V3SummaryControl { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-150); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .V3SummaryControl span:has(> button.btn-link) { /* we need to add some structure to spans that have buttons. */ display: inline-flex; align-items: center; } .V3SummaryControl br { display: none; } @media all and (max-device-width: 769px), all and (max-width: 769px) { .V3SummaryControl { gap: var(--gap-vertical); } } /* 6.35.3.1 SC Summary Header */ .V3SummaryControl > header { display: block; box-shadow: none; padding: 0; background-color: transparent; border-bottom: none; } .V3SummaryHeader { background-image: none; background-color: transparent; border: none; box-shadow: none; } .V3SummaryHeader:before, .V3SummaryHeader:after { display: none; } .V3SummaryHeader > #navbar-header { display: none !important; } /* 6.35.3.2 SC Summary Icons/Navigation */ .V3SummaryHeader > #topNav { display: block !important; width: 100%; padding: 0; } .V3SummaryHeader > #topNav > ul { display: flex; width: 100%; justify-content: center; gap: var(--gap-horizontal) var(--gap-vertical); } .V3SummaryHeader > #topNav:before, .V3SummaryHeader > #topNav:after, .V3SummaryHeader > #topNav > ul:before, .V3SummaryHeader > #topNav > ul:after { display: none; } .V3SummaryHeader > #topNav > ul > .nav-item { margin: 0; padding: var(--gap-vertical-75); min-width: 100px; } .V3SummaryHeader > #topNav > ul > .nav-item.active { border: 1px solid var(--color-secondary-normal); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; } .V3SummaryHeader > #topNav > ul > .nav-item > a { display: flex; flex-direction: column; gap: var(--gap-vertical-25); padding: 0; margin: 0; font-size: calc(var(--font-size) + 2px); font-weight: 500; color: var(--color-primary-normal) !important; fill: var(--color-primary-normal) !important; } .V3SummaryHeader > #topNav > ul > .nav-item.active > a { background-image: none; background-color: transparent; box-shadow: none; color: var(--color-secondary-normal) !important; fill: var(--color-secondary-normal) !important; } .V3SummaryHeader > #topNav > ul > .nav-item .badge { right: var(--gap-vertical-25); left: unset; background-color: var(--color-secondary-normal); z-index: 2; } .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge { right: var(--gap-vertical-75); } @media all and (max-device-width: 992px), all and (max-width: 992px) { .V3SummaryHeader > #topNav > ul > .nav-item { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--gap-horizontal-25); } .V3SummaryHeader > #topNav > ul > .nav-item .badge, .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge { position: relative; width: fit-content; height: fit-content; right: unset; } .V3SummaryHeader > #topNav > ul > .nav-item > a { flex-direction: row; } .V3SummaryHeader > #topNav > ul > .nav-item > a > svg { margin: 0 0 0 0; } } @media all and (max-device-width: 769px), all and (max-width: 769px) { .V3SummaryHeader > #topNav { border: none; } .V3SummaryHeader > #topNav > ul { flex-wrap: wrap; margin: 0; gap: var(--gap-vertical-25); border: none; justify-content: space-between; } .V3SummaryHeader > #topNav > ul > .nav-item { width: calc(50% - var(--gap-vertical-25)); justify-content: center; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .V3SummaryHeader > #topNav > ul > .nav-item { justify-content: center; padding: var(--gap-vertical-50); } .V3SummaryHeader > #topNav > ul > .nav-item > a { flex-direction: column; justify-content: center; } .V3SummaryHeader > #topNav > ul > .nav-item .badge, .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge { position: absolute; right: var(--gap-vertical-25); top: var(--gap-vertical-50); left: unset; background-color: var(--color-secondary-normal); z-index: 2; } } /* 6.35.4 SC Status Center Content */ .V3SummaryControl > article { margin: 0; } .V3SummaryControl .container-fluid { padding: 0; } .V3SummaryControl .container-fluid:before, .V3SummaryControl .container-fluid:after { display: none; } .V3SummaryControl .container-fluid > div { display: flex; flex-direction: column; gap: var(--gap-vertical-75); } .V3SummaryControl .headline-container { display: flex; flex-direction: column; gap: var(--gap-horizontal); padding: 0; background: transparent; margin: 0; text-align: left; } .V3SummaryControl .headline-container > h1 { font-size: 32px; text-transform: capitalize; font-weight: 500; text-align: center; } .V3SummaryControl .headline-container table.V3StatusCenterTableClass + div { display: flex; flex-direction: column; gap: var(--gap-horizontal); } table.V3StatusCenterTableClass { margin-bottom: 0px; } .V3SummaryControl table.V3StatusCenterTableClass td { line-height: 34px; } span:has(> table.V3StatusCenterTableClass) { display: flex; flex-direction: column; gap: var(--gap-horizontal); } .fiviAdditionalMFAScreenContainer > #pnlControls { width: 100vw; max-width: 100%; display: flex; flex-direction: column; gap: var(--gap-horizontal); } /* 6.35.4.1 Status Center Content Home */ .V3SummaryControl .container-fluid > div > .task { display: flex; justify-content: flex-start; align-items: center; gap: var(--gap-horizontal-50); margin: 0; border: 1px solid var(--color-secondary-normal); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; } .V3SummaryControl .container-fluid > div > .task > .task-icon { fill: var(--color-primary-normal); } .V3SummaryControl .container-fluid > div > .task > .task-content { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-horizontal-50); margin: 0; } .V3SummaryControl .container-fluid > div > .task .task-text { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } .V3SummaryControl .container-fluid > div > .task .task-title { color: var(--color-primary-normal); font-size: 16px; text-transform: capitalize; margin: 0; } .V3SummaryControl .container-fluid > div > .task .task-description { font-size: calc(var(--font-size) + 2px); color: var(--font-color); } .V3SummaryControl .btn-primary { background-color: var(--color-primary-normal); border-color: var(--color-primary-normal); box-shadow: none; text-shadow: non; &:hover, &:active, &:focus { background-color: white; color: var(--color-primary-normal); } } /* 6.35.4.2 Status Center Content Messages */ .V3SummaryControl header:has(#nav-messages.active) + article .headline-container, .V3SummaryControl header:has(#nav-messages.active) + article .headline-container > span { display: flex; flex-direction: column; gap: var(--gap-vertical-150); align-items: flex-start; width: 100vw; max-width: 100%; } .V3SummaryControl header:has(#nav-messages.active) + article .headline-container > span div:has(.btn-primary) { /* text-align: center; */ width: 100vw; max-width: 100%; display: flex; flex-direction: column; gap: var(--gap-horizontal); } .V3SummaryControl .fiviSCSendMessage > div, .fiviSCSendMessage { display: flex; flex-direction: column; gap: var(--gap-vertical-75); width: 100vw; max-width: 100%; & > .btn-link { text-align: left; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .V3SummaryControl .container-fluid > div > .task > .task-icon { display: none; } } /* 9. Page Specific */ /* 9.1 Default Page */ .page-Default-Content.page-container { gap: var(--gap-vertical-100); } .page-Default-Content .header-container { gap: var(--gap-vertical); } .page-Default-Content .button-link { var(--column-width-2); } .coasp-card { display: flex; align-items: center; width: 100%; padding: 1rem; border: 1px solid var(--border-color); border-radius: 6px; & .coasp-logo-text { width: 75% } } .coasp-logo-text, .coasp-button { width: 50%; } .coasp-logo{ display: flex; align-items: center; width: 48; margin-right: 1rem } .coasp-logo-text{ display: flex; } .coasp-text{ font-size: 18px; line-height: 26px; font-weight: 400; } .coasp-header { font-size: 24px; line-height: 32px; margin-bottom: .5rem; font-weight: 600; } .coasp-button { display: flex; justify-content: flex-end; } .add-joint { display: flex; align-items: center; & .add-joint-image { width: 36px; height: 36px; margin-right: .5rem; } } .page-Default-Content .next-button, .page-applicantnew .next-button, .page-SelectAccount .next-button, .page-Funding .next-button, .fiviPlaid .next-button, .page-DisclosuresDecline .next-button { width: 100%; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .lets-get-started-container { max-width: var(--column-width-5); } .what-you-need { font-size: calc(var(--font-size) - 2px); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .default-thumbnail-container { max-width: 100%; width: 100%; flex-direction: row; flex-wrap: wrap; } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .default-thumbnail-container { justify-content: center; } .coasp-card { flex-direction: column; } .coasp-logo-text, .coasp-button { width: 100% !important; margin-bottom: 1rem; justify-content: center; } .add-joint { & .page-text{ font-size: 14px; } } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .page-Default-Content .thumbnail { max-width: var(--column-width-4); } .lets-get-started-container { align-items: center; } .lets-get-started-container > #IndividualHandler01 { align-items: center; } .lets-get-started-container > .h2 { text-align: center; justify-content: center; } .lets-get-started-container > h2 { flex-direction: column; gap: var(--gap-vertical-25); } } /* 9.2 Applicant Prove */ .prove-start-container { display: flex; flex-direction: column; gap: var(--gap-vertical); flex-grow: 1; flex-basis: 0; & > .fiviHeaderPanelClass { flex-grow: inherit; flex-basis: inherit; align-self: inherit; } } .prove-start-container .fiviMultiInput { position: unset; } .prove-or-existing { padding: 0 var(--gap-horizontal); align-items: stretch; justify-content: space-between; min-width: 0; flex-grow: 1; flex-basis: 0; align-self: stretch; } .prove-new { flex-grow: 3; flex-basis: 0; min-width: 0; justify-content: center; align-items: center; align-self: stretch; gap: var(--gap-vertical-150); & > .section-container { flex-grow: 0; } } .prove-new .prove-user-img-container { width: 60px; height: 60px; border: 4px solid var(--color-primary-normal); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--color-primary-normal); color: white; & > .fa { font-size: 50px; padding-top: 15px; } } .prove-new .prove-user-img-container > img { width: 50px; height: 50px; } .prove-new .fiviInput { /* max-width: 100%; */ width: 100%; } .prove-new .fiviErrorSummary > div { text-align: left; } .prove-divider { display: flex; flex-direction: column; align-items: center; justify-content: stretch; gap: var(--gap-vertical-25); align-self: stretch; } .prove-existing { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--gap-horizontal); flex-basis: 0; flex-grow: 2; } .prove-existing > span { width: 100%; display: flex; justify-content: center; flex-direction: row; } #proveWorking, .loading { display: block; background-color: transparent; width: fit-content; } #proveWorking .loader, .loading .loader { position: relative; top: 0; left: 0; border-top-color: var(--color-primary-normal); margin: var(--gap-vertical-50) var(--gap-horizontal-50); } .prove-check-phone-image-container { display: flex; flex-direction: row; justify-content: center; align-items: center; & > img { max-width: 90%; } } #proveIndividualErrorMessage { color: red; } .prove-link-container-mobile { display: none; } .prove-link-container-desktop { display: flex; align-items: center; width: 100%; padding: var(--gap-vertical) 0; } .prove-link-image { width: 48; margin-right: 1rem; & > img{ width: 48; height:48; } } .prove-link-text { & > .h1 { margin-bottom: .5rem; } } .pnlCamera { display: none; } .applicant-no-ssn { display: flex !important; justify-content: flex-start !important; width: 100% !important; flex-direction: row !important; & .button-hyperlink{ padding: 0; border: none; background-color: transparent; text-decoration: underline; } } @media (max-device-width: 836px), (max-width: 836px) { .pnlCamera { display: flex; } .prove-start-container .fiviInput, .prove-start-container .button-other { max-width: 100%; } .prove-or-existing { padding: 0; flex-direction: column; gap: var(--gap-vertical); flex-wrap: nowrap; } .prove-divider { justify-content: center; flex-direction: row; text-align: center; gap: var(--gap-horizontal); padding: 0 var(--gap-horizontal); } .prove-divider .page-text { width: fit-content; } .prove-existing .button-other { width: 100% !important; } .prove-new, .prove-divider, .prove-existing, .prove-disclosure { width: 100%; } .prove-disclosure { margin: 0; } .vertical-divider { height: 1px; width: 100%; border-top: 0.5px solid var(--border-color); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .prove-start-container { padding-bottom: calc(var(--gap-vertical) * 5); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .prove-link-container-mobile { display: flex; flex-direction: column; text-align: center; align-items: center; width: 100%; padding: var(--gap-vertical) 0; border-bottom: 0.5px solid var(--border-color); & .h1 { text-align: center; margin-bottom: .5rem; } & .prove-link-image { margin-bottom: .5rem; } } .prove-link-container-desktop { display: none; } } /* 9.3 Select Accounts */ .page-SelectAccount .fiviPanel { width: 100%; } /* 9.4 Expected Activity */ .pnlACHWire, .pnlForeignACHWire{ width: 100% } .pnlDomesticACHAmount, .pnlDomesticWireAmount { width: 50%; } .pnlDomesticACHAmount .fiviDropDown, .pnlDomesticWireAmount .fiviDropDown { max-width: 100%; } .pnlDomesticACHAmount option[value="0"], .pnlDomesticWireAmount option[value="0"] { display: none; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .pnlDomesticACHAmount, .pnlDomesticWireAmount { width: 100%; } } /* 9.5 Disclosures */ .page-Disclosures .fiviCheckBox { & input { margin-top: 4px; } & label { font-weight: 400; font-size: 20px; line-height: 28px; align-items: flex-start; padding: 0; } } .accept-disclosures-container { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-vertical) var(--gap-horizontal); border: 1px solid var(--border-color); border-radius: 5px; padding: var(--gap-horizontal-50); width: 100%; } .accept-disclosures-container .page-text { padding-left: calc(var(--gap-vertical-200) * 1.25); } .bw-divider { display: flex; align-items: center; justify-content: center; flex-direction: row; /* text-align: center; */ gap: var(--gap-horizontal); width: 100%; } .bw-divider .page-text { width: fit-content; } .pnlBackupWithholding { padding: 1rem 0; width: 100%; max-width: 100%; } /* 9.6 Funding */ .funding-text-large { font-size: 20px; line-height: 28px; font-weight: 400; } .funding-text-small { font-size: 14px; line-height: 18px; font-weight: 400; } .fund-now-selector-container, .funding-method-container { display: flex; width: 100vw; max-width: 100%; justify-content: space-evenly; } .funding-method-detail { display: flex; flex-direction: column; padding: var(--gap-vertical) 0; width: 100%; & div { width: 100%; } & .fiviDropDown { width: 100%; max-width: 100% } } .ach-container { margin: 1rem 0; } .page-Funding ol { margin-top: 0; } .fund-now-selector-container .fiviCheckBox, .funding-method-container .fiviRadioButton { & .DefaultLabelClass:before, & .DefaultLabelClass:after, & .DefaultCBLabelClass:before, & .DefaultCBLabelClass:after { display: none; } & .DefaultLabelClass, & .DefaultCBLabelClass { position: relative; border: 1px solid var(--color-gray-light); padding: 1rem; border-radius: 6px; width: 275px; max-width: 100%; height: 125px; cursor: pointer; color: transparent; } & .DefaultLabelClass:hover, & .DefaultLabelClass:active, & .DefaultLabelClass:focus, & input:checked + .DefaultLabelClass, & .DefaultCBLabelClass:hover, & .DefaultCBLabelClass:active, & .DefaultCBLabelClass:focus, & input:checked + .DefaultCBLabelClass { border: 1px solid var(--color-black-normal); } } .funding-card { position: absolute; padding: 1rem; border-radius: 6px; width: 275px; height: 100px; cursor: pointer; & .funding-image { width: 32px; height: 100%; margin-right: .5rem; } & .funding-image img { width: 32; height: 32; } & .funding-text { width: 200px; gap: 0; } & .funding-text-title { font-weight: 600; margin-bottom: .5rem; } & .funding-text-title:after { content: "\2192"; margin-left: 5px; } & .funding-text-description { font-size: 14px; } & .recommend-banner { font-size: 10px; font-weight: 600; background-color: #77C5D580; border: 1px solid #77C5D580; border-radius: 6px; padding: 1px 5px; margin-bottom: 2px; } } .fiviPlaid .fiviBtnContainer { display: flex; justify-content: center; width: 100% } @media all and (max-device-width: 656px), all and (max-width: 656px) { .funding-method { width: 100%; max-width: 100%; } .funding-method-container .fiviRadioButton .DefaultLabelClass, .funding-method-container .fiviRadioButton { max-width: 100%; } .funding-card { width: 100%; gap: 0; justify-content: flex-start; & .funding-text { width: 80%; gap: 0; } } .fund-now-selector-container .fiviCheckBox, .funding-method-container .fiviRadioButton { & .DefaultLabelClass:before, & .DefaultLabelClass:after, & .DefaultCBLabelClass:before, & .DefaultCBLabelClass:after { display: none; } & .DefaultLabelClass, & .DefaultCBLabelClass { width: 100vw; } } } /* 9.7 Pending/Approved/Denied */ .page-Approved .header-container, .page-Pending .header-container, .page-Denied .header-container { flex-direction: row; } .page-Approved .header-container .flex-column, .page-Pending .header-container .flex-column, .page-Denied .header-container .flex-column { flex: 1; } /* Pending */ .pnlCompleteButtons{ width: 100%; & .next-button::after { content: ""; } } .page-Pending .fiviToolTipContainer { position:relative; margin-left: 1rem; } .application-details { display: flex; width: 100%; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); & .application-details-right, .application-details-left { width: 50%; } & .application-details-left { font-weight: 600; } & .application-details-right { text-align: right; & .fiviLabelContainer { flex-direction: column; } } } .application-details.status-message { border-bottom: none; & p { margin-bottom: 1rem; } & .application-details-left { width: 32px; height: 32px; margin-right: 1rem; } & .application-details-left img { width: 32; height: 32; } & .application-details-right { width: fit-content; flex-grow: 1; text-align: left; } } .page-visitbranch .application-details:last-child, .page-approved .application-details:last-child { border: none; } /* Approved */ .page-Approved { gap: 25px; & a { font-weight: 600; } } .page-Approved .pnlOnlineBanking{ width: 100%; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); & .fiviOnlineBankingEnrollmentContainer{ width: 100%; } & .next-button{ width: 100%; } & .fiviBtnContainer{ width: 100%; } } .page-Approved .header-container { padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); } .page-Approved .approved-header-account { justify-content: flex-start; align-items: center; & .flagstar-font-18-22-bold { width: 350px; padding-right: 16px; } & .fa-eye { cursor: pointer; } } .page-Approved .approved-header-image { display: flex; & > img { width: 188px; height: 120px; } } .approved-header-text { align-self: center; } .approved-next-steps { gap: 16px; & .header-container { border: none; flex-direction: column; } & .section-container { gap: 16px; } } .approved-next-steps-card { display: flex; background-color: #F7F7F7; width: 100%; padding: 16px; gap: 16px; & .flagstar-font-32-28-bold { width: 11px; height: 38px; font-weight: 700; color: var(--color-primary-normal); } & .approved-next-steps-image { width: 32; height: 32; } & .approved-next-steps-text { display: flex; flex-direction: column; gap: 8px; & .approved-next-steps-image-apps { display: none; width: 100%; justify-content: space-around; & img { width: 120px; height: 40px; } } } } .application-info-container { text-align: right; } .app-status-container { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 1px solid var(--border-color); border-radius: 5px; padding: var(--gap-vertical); background-color: var(--background-color-alt); & .page-text { letter-spacing: 0; font-weight: 400; } & .fiviPanel { width: 100%; } } .app-status-img .fa { color: var(--color-primary-normal); font-size: 35px; } .app-status-container .flex-row .page-text { flex: 1; } .app-status-account-container { display: flex; flex-direction: column; gap: var(--gap-vertical); width: 100%; } .app-status-account-container .fiviProdServiceSelected { background-color: var(--background-color-page); padding: var(--gap-vertical); border-radius: 5px; border: 1px solid var(--border-color); } .page-Pending .fiviDocumentList { & span { gap: 0 !important; text-align: left; } & > span > div { padding-top: 1rem; order:1; border-top: 1px solid; } & table{ width: 100%; align-self: center; border: none; } & table { & .V3MessagesHeaderClass { display: none; border: none; } & tr { border-bottom: 1px solid var(--color-black-normal); padding: 0; } & td:nth-child(2) { display: none; } & td:nth-child(3) { width: 450px; max-width: 100%; display: flex; justify-content: flex-start; margin-left: 1rem; align-items: baseline; padding-top: 2.5rem !important; } & td:nth-child(4) { max-width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; padding: 1rem 0 !important; order: -1; width: fit-content; & div > span:first-of-type { flex-direction: row; flex-wrap: wrap; } & div > span:nth-of-type(2) { width: 100%; } & div > span:nth-of-type(2)::before { content: url('/_assets/layoutcontent/20099/defaultv3/document_loan-forms.svg'); margin-right: 10px; /* Space between image and text */ vertical-align: middle; display: inline-block; } } } } @media all and (max-device-width: 836px), all and (max-width: 836px){ .page-Pending .fiviDocumentList table { & tr { padding: 1rem; flex-direction: column; } & td:nth-child(3) { width: 100% !important; max-width: 100%; display: flex; justify-content: center; align-items: center; padding-top: 0 !important; margin: 0 !important; } & td:nth-child(4) { & div > span:first-of-type { width: 100%; } & div > span:nth-of-type(2) { width: 100%; } } } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .page-Approved .header-container, .page-Pending .header-container, .page-Denied .header-container { justify-content: center; } /* Pending */ .page-Pending .fiviDocumentList { & table { & td { width: 100% !important; align-items: center; } & td:nth-child(3) { padding-top: 0 !important; } & td:nth-child(3):before { content: "" !important; } & .V3MessagesHeaderClass { display: none; border: none; } & tr { padding: 1rem; } & td:nth-child(3) { width: 100% !important; max-width: 100%; display: flex; justify-content: flex-start; align-items: center; padding-top: 0 !important; margin: 0 !important; } & td:nth-child(4) { & div > span:first-of-type { width: 100%; } & div > span:nth-of-type(2) { width: 100%; } } } } .application-details { & .application-details-left { width: 40%; } & .application-details-right { width: 60%; } } /* Approved Page */ .approved-header-account { display: none; } .page-Approved .header-container div { width: 100% !important; text-align: center; justify-content: center; } .approved-header-text div:nth-child(2) { margin-top: 16px; } .approved-next-steps-image-qr { display: none; } .approved-next-steps-image-apps { display: flex !important; } .application-info-container { width: 100%; } } /* 9.8 Decline Disclosures */ .page-DeclineDisclosures .h1 { text-align: center; } /* 11. Classic Admin Console */ #Content { width: 100% !important; } .AdminContent { width: 100%; } .AdminContent > table > tbody > tr > td:nth-child(2) > table > tbody > tr { display: flex; } .AdminContent > table > tbody > tr > td:nth-child(2) > table > tbody > tr > td { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; } .AdminContent > table > tbody > tr > td:nth-child(2) > table > tbody > tr > td:last-of-type .form-control { max-width: 200px; margin-top: 0; } .AdminContent > table > tbody > tr > td:nth-child(2) > table > tbody > tr > td input[type="checkbox"] { appearance: auto; position: static; width: inherit; height: inherit; margin: 0; } .AdminContent .aspNetDisabled { display: flex; width: fit-content; align-items: center; min-width: 200px; } .AdminContent .aspNetDisabled > input { width: 20px; } .layout.AdminConsole { min-height: auto; } .layout.AdminConsole > header, .layout.AdminConsole > footer { display: none; } .layout.AdminConsole > main { padding: 40px 10px; } .layout.AdminConsole > main > .layout-container { width: 100%; max-width: calc(980px - 40px); } .layout.AdminConsole .page-navigation-container { max-width: 100%; } /* hide progress bar */ .layout-container:has(.hide-all-progress-bars) { & .progress-container-header { display: none; } } /* MCRD */ .fiviViewFormHeader { max-width: var(--column-width-9); margin-right: auto; margin-left: auto; padding: 0; display: flex; flex-direction: row-reverse; justify-content: space-between; & > .fiviSCDropDown { width: 100vw; max-width: var(--fiviInput-width); flex-direction: column; margin: 10px 0; & > label { font-size: 16px !important; font-weight: 500; } & > .form-control { margin-top: 5px; } } } .fiviViewFormHeader + div > .layout { & > header, & > footer, & .progress-container { display: none; } & > main { max-width: var(--column-width-9); & > .layout-container { margin: 0; } & .page-container { margin-top: var(--gap-horizontal); } } & .progress-container-main { display: none; } } /* Tooltips */ .fivi-popover { padding: 10px !important; max-width: 300px; border: 2px solid color-mix(in srgb, var(--color-black-normal) 66%, transparent); border-radius: 5px; font-size: calc(var(--font-size) + 2px); line-height: var(--font-lineheight); font-weight: 400; color: var(--font-color); width: fit-content; background-color: color-mix(in srgb, var(--color-black-normal) 15%, white); opacity: 0; &::backdrop { background-color: transparent; } } @media (pointer: coarse), (hover: none), (max-device-width: 875px), (max-width: 875px) { .fivi-popover { max-width: 90vw; opacity: 1; &::backdrop { background-color: black; opacity: 0.75; pointer-events: none; } } } /* Radio Button Containers */ .radio-button-yesno-container { font-weight: 600; display: flex; flex-direction: column; gap: 15px; margin: 5px 0 20px 0; & > label { width: 100%; text-align: left; } } .radio-button-group { display: flex; gap: var(--gap-vertical-150); } .radio-button-group .fiviRadioButton { width: 250px; } .fiviControl.fiviRadioButton > .fiviRadioButtonContainer{ align-items: flex-start; } @media all and (max-device-width: 452px), all and (max-width: 452px) { .radio-button-group { gap: var(--gap-horizontal); } }