/* Recent Updates: 5/27/25 -CM(NW) - add new (.button-other-disclosure-print) for disclosure print button, basically just a smaller verison of button-other so that it looks more aligned at the bottom of the disclosure list. */ /* 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 9.8 One Time Passcode 9.9 Applicant Additional Information 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: #ffffff; --color-white-light: #f9fafb; --color-white-normal: #f3f4f6; --color-white-dark: #e5e7eb; --color-gray-light: #8d93b2; --color-gray-normal: #696f8c; --color-gray-dark: #4e4c55; --color-black: #000000; --color-black-light: #33374d; --color-black-normal: #101325; --color-black-dark: #0b0e1e; /*client colors*/ --color-blue-header: #283971; --color-blue-footer: #002d7b; --color-primary-light: #b6e3f2; --color-primary-secondary: #4a7cb9; --color-primary-normal: #002d7b; --color-primary-dark: #cb5756; --color-secondary-light: #3c7ccd; --color-secondary-normal: #ffd800; --color-secondary-dark: #0b0e1e; --color-tertiary-light: #10b981; --color-tertiary-normal: #cb6d51; --color-tertiary-dark: #047857; --color-quaternary-light: #fcd34d; --color-quaternary-normal: #fbbf24; --color-quaternary-dark: #f59e0b; /*font family*/ --font-family-pri: "Open Sans", sans-serif; --font-family-alt: "Open Sans", 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-alt); /*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); /*title font*/ --font-size-title: 32px; --font-lineheight-title: 34px; --font-color-title: var(--color-primary-normal); --font-weight-title: 500; --font-family-title: var(--font-family-pri); /*h1 font*/ --font-size-h1: calc(var(--font-size) + 6px); --font-lineheight-h1: calc(var(--font-size-h1) + 3px); --font-color-h1: var(--color-primary-normal); --font-weight-h1: 500; --font-family-h1: var(--font-family-pri); /*h2 font*/ --font-size-h2: calc(var(--font-size) + 4px); --font-lineheight-h2: calc(var(--font-size-h2) + 3px); --font-color-h2: var(--font-color-h1); --font-weight-h2: var(--font-weight-h1); --font-family-h2: var(--font-family-pri); /*h3 font*/ --font-size-h3: calc(var(--font-size) + 2px); --font-lineheight-h3: calc(var(--font-size-h3) + 3px); --font-color-h3: var(--font-color-light); --font-weight-h3: 600; --font-family-h3: var(--font-family); /*h4 font*/ --font-size-h4: 16px; --font-lineheight-h4: 18px; --font-color-h4: var(--font-color-h3); --font-weight-h4: 500; --font-family-h4: var(--font-family); /*page structure*/ --column-width: 66px; --column-spacer: 24px; --column-width-half: calc(var(--column-width) / 2); /*33px*/ --column-width-2: calc(calc(var(--column-width) * 2) + var(--column-spacer)); /*156px*/ --column-width-3: calc(calc(var(--column-width) * 3) + calc(var(--column-spacer) * 2)); /*246px*/ --column-width-4: calc(calc(var(--column-width) * 4) + calc(var(--column-spacer) * 3)); /*336px*/ --column-width-5: calc(calc(var(--column-width) * 5) + calc(var(--column-spacer) * 4)); /*426px*/ --column-width-6: calc(calc(var(--column-width) * 6) + calc(var(--column-spacer) * 5)); /*516px*/ --column-width-7: calc(calc(var(--column-width) * 7) + calc(var(--column-spacer) * 6)); /*606px*/ --column-width-8: calc(calc(var(--column-width) * 8) + calc(var(--column-spacer) * 7)); /*696px*/ --column-width-9: calc(calc(var(--column-width) * 9) + calc(var(--column-spacer) * 8)); /*786px*/ --column-width-10: calc(calc(var(--column-width) * 10) + calc(var(--column-spacer) * 9)); /*876px*/ --column-width-11: calc(calc(var(--column-width) * 11) + calc(var(--column-spacer) * 10)); /*966px*/ --column-width-12: calc(calc(var(--column-width) * 12) + calc(var(--column-spacer) * 11)); /*1056px*/ --column-width-full: 100%; /*flex properties*/ --gap-vertical: var(--column-spacer); --gap-vertical-25: calc(var(--gap-vertical) * 0.25); --gap-vertical-50: calc(var(--gap-vertical) * 0.5); --gap-vertical-75: calc(var(--gap-vertical) * 0.75); --gap-vertical-150: calc(var(--gap-vertical) * 1.5); --gap-vertical-200: calc(var(--gap-vertical) * 2); --gap-horizontal: var(--column-spacer); --gap-horizontal-25: calc(var(--gap-horizontal) * 0.25); --gap-horizontal-50: calc(var(--gap-horizontal) * 0.5); --gap-horizontal-150: calc(var(--gap-horizontal) * 1.5); --gap-horizontal-200: calc(var(--gap-horizontal) * 2); /*border properties*/ --border-radius: var(--gap-vertical) var(--gap-horizontal); --border-color: var(--color-gray-light); --border-color-focus: var(--color-primary-normal); /*color properties*/ --background-input-color: var(--color-white-light); --background-color: var(--color-white-normal); --background-color-page: var(--color-white-light); --background-color-alt: var(--color-white-normal); /*input and label structure*/ --fiviInput-width: var(--column-width-4); --fiviInput-width-half: calc(calc(var(--fiviInput-width) - var(--column-spacer)) / 2); --fiviInput-width-double: calc(calc(var(--fiviInput-width) * 2) + var(--column-spacer)); /*the below two should add to the above, sometimes 3+2 or 2+2 or 2+1, main is always >= alt*/ --fiviInput-width-partial-main: var(--column-width-2); --fiviInput-width-partial-alt: var(--column-width-2); --input-height: 50px; --input-focusLabel-fontSize: calc(var(--font-size-label) - 2px); --input-focusLabel-offset: calc(var(--input-height) + var(--gap-vertical-25)); --input-marginTop-forLabelFocusSpace: calc(var(--input-focusLabel-fontSize) + var(--gap-vertical-25)); /* how much space between each input */ --fiviInput-vertical-spacing: var(--gap-vertical-75); --fiviInput-horizontal-spacing: var(--gap-horizontal); } /* 1.1 Mobile Variables We are going to do a step down approach. We need to account for the head/main/foot left/right padding of column width (*2 as there are left and right). add a couple pixels for good measure. */ @media all and (max-device-width: 1106px), all and (max-width: 1106px) { /* @1056px+48px+2px = 1106px -12 columns -> 7 columns -fiviInput-width goes to 5 columns -should accomidate 2 inputs per row */ :root { --column-width-11: 100%; --column-width-12: 100%; --column-width-10: 100%; --fiviInput-width: var(--column-width-5); --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-2); --fiviInput-width-half: calc(calc(var(--fiviInput-width) - var(--column-spacer)) / 2); } } @media all and (max-device-width: 988px), all and (max-width: 988px) { :root { --fiviInput-width: var(--column-width-4); --fiviInput-width-partial-main: var(--column-width-2); --fiviInput-width-partial-alt: var(--column-width-2); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { /* @786px+48px+2px = 836px -9 columns -> 7 columns -fiviInput-width goes to 3 columns -should accomidate 2 inputs per row */ :root { --font-size: 14px; /* --font-size-h1: 20px; --font-lineheight-h1: 23px; */ /* --font-size-h2: 16px; --font-lineheight-h2: 18px; --font-size-h3: 14px; --font-lineheight-h3: 16px; */ --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 */ 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); } 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; line-height: 150%; } h2, .h2 { font-size: var(--font-size-h2); line-height: var(--font-lineheight-h2); color: var(--font-color-h2); font-weight: var(--font-weight-h2); font-family: var(--font-family-h2); text-align: left; } h3, .h3 { font-size: var(--font-size-h3); line-height: var(--font-lineheight-h3); color: var(--font-color-h3); font-weight: var(--font-weight-h3); font-family: var(--font-family-h3); text-align: left; } h4, .h4 { font-size: var(--font-size-h4); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: var(--font-weight-h4); font-family: var(--font-family-h4); text-align: left; } legend { display: none; } a, a:focus { color: var(--color-primary-normal); text-decoration: underline; } a:hover { text-decoration: underline; color: var(--color-primary-secondary); } a:active, a:visited { color: var(--color-tertiary-normal) !important; text-decoration: none; } ul, ol { margin-bottom: 0; line-height: calc(var(--font-size) * 1.25); padding-left: var(--gap-horizontal); } ul>li:not(:last-of-type), ol>li:not(:last-of-type) { margin-bottom: var(--gap-vertical-25); } /* 2.2 iCheck */ .icheckbox_square-black, .icheckbox_square-red, .icheckbox_square-green, .icheckbox_square-blue, .icheckbox_square-aero, .icheckbox_square-grey, .icheckbox_square-orange, .icheckbox_square-yellow, .icheckbox_square-pink, .icheckbox_square-purple { background-color: white; margin: 0; } .iradio_square-black, .iradio_square-red, .iradio_square-green, .iradio_square-blue, .iradio_square-aero, .iradio_square-grey, .iradio_square-orange, .iradio_square-yellow, .iradio_square-pink, .iradio_square-purple { background-color: white; border-radius: 50%; margin: 0; } /* 2.3 Flex Helper Classes */ .flex-row { display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); flex-wrap: wrap; width: 100%; } .flex-column { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); width: 100%; } .flex-row.flex-align-vertical-center { align-items: center; } .flex-column.flex-align-vertical-center { justify-content: center; } .flex-row.flex-align-horizontal-center { justify-content: center; } .flex-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; } /* gap is almost always going to govern the vertical, horizontal should rarely be modified, if ever. If you need to, add/modify a custom class. */ .flex-gap-25 { gap: var(--gap-vertical-25) var(--gap-horizontal-25); } .flex-gap-50 { gap: var(--gap-vertical-50) var(--gap-horizontal); } .flex-gap-100 { gap: var(--gap-vertical) var(--gap-horizontal); } .flex-gap-150 { gap: var(--gap-vertical-150) var(--gap-horizontal); } .flex-gap-200 { gap: var(--gap-vertical-200) var(--gap-horizontal); } /* 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: 40px; 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: 24px; 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%; } .header-container .page-text-large { color: var(--color-gray-light); font-size: calc(var(--font-size) + 6px); font-weight: 500; letter-spacing: 1px; } .spacer-vertical { /* no height is required here, gap should handle it, will double the space between the previous and next elements */ 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: 0.5px solid var(--color-gray-light); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .page-text-small { font-size: calc(var(--font-size) - 2px); } } /* 3. Page Structure */ /* 3.1 Page Structure */ .layout { background-color: var(--background-color); width: 100%; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } header, main, footer { width: 100%; display: flex; margin: 0; text-align: left; flex-direction: column; } header { box-shadow: none; background-color: var(--color-white); } main { position: relative; margin-bottom: auto; align-items: flex-start; padding: var(--gap-vertical-200) 0; flex: 1; flex-direction: row; max-width: var(--column-width-12); } footer { background-color: var(--color-blue-footer); position: relative; padding: 0; color: #ffffff; } header>.layout-container, main>.layout-container, footer>.layout-container { max-width: var(--column-width-12); width: 100%; margin: 0 auto; min-height: 62px; padding: var(--gap-vertical) var(--gap-horizontal); } @media all and (max-device-width: 452px), all and (max-width: 452px) { header, footer { padding: 0; } main { padding: var(--gap-vertical) var(--gap-horizontal-50); } header>.layout-container { min-height: 50px; justify-content: center; } } /* 3.2 Header Styling */ header>.layout-container { padding: 0; } .header-logo-container { background-color: #ffffff; padding: 2rem; } .header-logo { width: 300px; } header .top-menu { list-style: none; padding: 0; display: flex; font-size: 0.75rem; justify-content: flex-end; } header .top-menu .menu-item { padding-left: 1rem; } header a, header a:visited, header a:active { color: var(--font-color); font-weight: 600; text-decoration: none !important; transition: color 0.3s ease; text-decoration: none; } header a:hover { text-decoration: underline !important; } .header-contact-info.page-text { color: var(--color-white-light); font-size: calc(var(--font-size) - 2px); } .header-info-bar { width: 100%; background-color: var(--color-secondary-normal); padding: var(--gap-vertical-25) var(--gap-horizontal-25); } .header-info-bar>.flex-row { max-width: var(--column-width-12); margin: 0 auto; } .header-info-bar .page-text { flex: 0 1 auto; width: fit-content; color: var(--color-white-normal); } .menu-header { margin-bottom: auto; padding-top: 0.5rem; } @media all and (max-device-width: 1024px), all and (max-width: 1024px) { header>.layout-container { padding: 0 3rem; width: 100%; } header .menu-header { display: none; } } @media all and (max-device-width: 656px), all and (max-width: 656px) { header .layout-container { flex-direction: column; } .header-contact { justify-content: center; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .header-logo { width: 250px; } .menu-header { display: none; } } /* 3.3 Main Styling */ main>.layout-container { position: relative; display: flex; align-self: stretch; padding: 0; flex-grow: 1; flex-basis: 0; flex-direction: column; justify-content: stretch; gap: var(--gap-vertical); border: 1px solid var(--border-color); background-color: var(--background-color-page); margin: 0 var(--gap-horizontal); border-radius: 5px; } main>.layout-container>span { /* this is span that start the fivision_PageContent */ display: flex; width: 100%; flex-direction: column; align-self: stretch; justify-content: stretch; flex-basis: 0; flex-grow: 1; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { main>.layout-container { min-width: 0; } main>.layout-container>span { max-width: var(--column-width-12); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { main>.layout-container { margin: 0; } } /* 3.4 Footer Styling */ 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 p { color: var(--color-white-normal); font-size: 0.79em; width: 100%; margin-bottom: 1em; } footer a, footer a:visited, footer a:active { color: var(--color-white); font-size: 14px !important; text-decoration: none !important; } footer a:hover { color: var(--color-white); } 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 .region { display: flex; } .footer-logo img { width: 100%; } .footer-top, .footer-bottom { width: 100%; } .footer-top { margin: 3rem 0 4rem 0; justify-content: flex-start !important; gap: 0 !important; } .footer-middle { padding: 4rem 5rem; border-top: 1px solid var(--color-primary-normal); } .footer-bottom { padding-top: 2em; border-top: 1px solid var(--color-primary-normal); } .footer-bottom .region, .footer-bottom .region a { font-size: 0.75rem !important; width: 100%; } .footer-top .region.region-col-1 { width: 40%; } .footer-top .region.region-col-2 { width: 30%; margin: 0 2rem; } .footer-top .region.region-col-3 { width: 20%; } .copyright-info { justify-content: flex-start; width: 45% !important; } .privacypolicy-info { justify-content: flex-end; text-align: right; width: 45% !important; } footer .top-menu { list-style: none; padding: 0; } .footer-title { font-weight: 700; } .institution-info { padding-right: 5rem; border-right: 1px solid var(--color-primary-normal); } .menu-footer { margin-bottom: 1.5em; } .menu-socialmedia { margin: 1rem 0 0.5rem 0; } .menu-socialmedia ul { display: flex; } .menu-socialmedia img { width: 30px; height: 30px; margin-right: 0.5em; filter: brightness(0) invert(1); } .aba-button-container { display: flex; width: 100%; justify-content: flex-start; align-items: center; text-align: center; margin: 0.5 0 1rem 0; } .aba-button { padding: 1rem 1rem; background-color: #19295a; border-radius: 25px; } .field-items { display: flex; justify-content: flex-start; } .routing-links li { margin-bottom: var(--gap-vertical-50) !important; } .field-item { max-width: 100px; } .field-item img { width: 100px; } .ncua-logo { width: 100px; margin: 0 1rem; } .eho-logo { width: 40px; margin: 0 1rem; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .footer-top .region.region-col-1 { width: 45%; } .footer-top .region.region-col-2 { width: 20%; margin: 0 2rem; } } @media all and (max-device-width: 836px), all and (max-width: 836px) { footer>.layout-container.flex-row.flex-row.flex-space-between { justify-content: flex-start; } } @media all and (max-device-width: 656px), all and (max-width: 656px) { footer>.layout-container.flex-row.flex-row.flex-space-between { flex-direction: column; } .footer-top, .footer-bottom { flex-direction: column; } .footer-top .region.region-col-1 { width: 100%; } .footer-top .region.region-col-2 { width: 100%; margin: 2rem 0; } .footer-top .region.region-col-3 { width: 100%; } .institution-info { padding-right: 0; border-right: none; } .menu-footer, .menu-socialmedia { justify-content: center; } .field-items { justify-content: center; } .footer-top .region, .footer-bottom .region { max-width: 100%; text-align: center !important; justify-content: center; } .institution-info { box-shadow: none; } .copyright-info { width: 100% !important; } .privacypolicy-info { width: 100% !important; } .footer-middle { padding: 4rem 1rem; } } @media all and (max-device-width: 452px), all and (max-width: 452px) {} /* 4. Page General Containers */ .page-container, #IndividualHandler01, main > .layout-container > span:not(:has( > .page-container)) { display: flex; flex-direction: column; align-items: flex-start; justify-content: stretch; gap: var(--gap-vertical-150); max-width: var(--column-width-9); width: 100vw; flex-grow: 1; flex-basis: 0; align-self: stretch; } main > .layout-container > span:not(:has( > .page-container)) { padding: var(--column-spacer); } .progress-container:not(:has(> span))+.layout-container .page-container { max-width: 100%; } .header-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-50); max-width: var(--column-width-12); width: 100%; padding: 0 var(--gap-horizontal); } .section-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical); max-width: var(--column-width-12); width: 100%; padding: 0 var(--gap-horizontal) var(--gap-horizontal) var(--gap-horizontal); } .error-container { height: fit-content; } .section-header:after { content: ""; display: block; width: var(--column-width-2); height: 2px; background-color: var(--color-primary-normal); align-self: flex-start; margin-top: var(--gap-vertical-25); } .page-navigation-container { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; width: 100%; gap: var(--gap-horizontal); /* position: absolute; */ bottom: 0; left: 0; padding: var(--gap-vertical) var(--gap-horizontal); border-top: 0.5px solid var(--border-color); margin-top: auto; } .navigation-forward-container, .navigation-other-container { display: flex; flex-direction: column; gap: var(--gap-vertical-50); align-items: flex-end; } .navigation-forward-container { flex-direction: row-reverse; align-items: center; justify-content: flex-end; } .navigation-forward-container .button-link { text-align: center; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .page-container, #IndividualHandler01 { 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; } .page-navigation-container { flex-direction: column; align-items: center; gap: var(--gap-vertical); } .navigation-other-container { flex-direction: column-reverse; align-items: center; gap: var(--gap-vertical); } .navigation-other-container .button-link { text-align: center; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .navigation-forward-container { flex-direction: column; text-align: right; } } /* 5. Buttons */ .button-primary, .btn-default { 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-tertiary-normal); color: var(--color-white-normal); border: 2px solid var(--color-tertiary-normal); border-radius: var(--gap-horizontal); font-size: 15px; line-height: 18px; font-weight: 600; box-shadow: none; transition-duration: 500ms; transition-property: border-radius; text-transform: uppercase; text-shadow: none; text-align: center; text-decoration: none !important; } .button-primary:hover:not(:disabled), .button-primary:active:not(:disabled), .button-primary:focus:not(:disabled), .button-primary:visited:not(:disabled), .btn-default:hover:not(:disabled), .btn-default:active:not(:disabled), .btn-default:focus:not(:disabled), .btn-default:visited:not(:disabled) { background-color: var(--color-white-normal); border: 2px solid var(--color-tertiary-normal); color: var(--color-tertiary-normal) !important; border-radius: var(--gap-horizontal); text-decoration: none !important; } .button-primary:disabled { opacity: 0.5; } .button-other, .MinorButton, .fiviAddAnotherButton>a, .fiviPlaid .btn-default, .section-container div>a[id*="btn"] { 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-200); */ padding: 1em; background-color: var(--background-input-color); color: var(--color-primary-normal); border: 2px solid var(--color-primary-normal); border-radius: var(--gap-horizontal); font-size: 14px; line-height: 14px; font-weight: 500; box-shadow: none; /* transition-duration: 500ms; */ /* transition-property: color, background-color; */ height: var(--input-height); cursor: pointer; text-transform: uppercase; text-shadow: none; white-space: nowrap; } .button-other-disclosure-print { justify-content: center; align-items: center; max-width: 20px; min-width: 115px; width: 15%; margin: 0; /* padding: var(--gap-vertical-50) var(--gap-horizontal-200); */ padding: 1em; background-color: var(--background-input-color); color: var(--color-primary-normal); border: 2px solid var(--color-primary-normal); border-radius: var(--gap-horizontal); font-size: 14px; line-height: 2px; font-weight: 500; box-shadow: none; /* transition-duration: 500ms; */ /* transition-property: color, background-color; */ height: 30px; cursor: pointer; text-transform: uppercase; text-shadow: none; white-space: nowrap; } .button-other, .MinorButton { display: inline-flex; } .fiviAddAnotherButton>a { display: inline-flex; } .button-other:hover:not(:disabled), .button-other:active:not(:disabled), .button-other:focus:not(:disabled), .button-other-disclosure-print:hover:not(:disabled), .button-other-disclosure-print:active:not(:disabled), .button-other-disclosure-print:focus:not(:disabled), .MinorButton:hover:not(:disabled), .MinorButton:active:not(:disabled), .MinorButton:focus:not(:disabled), .fiviAddAnotherButton>a:hover:not(:disabled), .fiviAddAnotherButton>a:active:not(:disabled), .fiviAddAnotherButton>a:focus:not(:disabled), .fiviPlaid .btn-default:hover:not(:disabled), .fiviPlaid .btn-default:active:not(:disabled), .fiviPlaid .btn-default:focus:not(:disabled), .section-container div>a[id*="btn"]:hover { background-color: var(--color-primary-normal); color: var(--color-white) !important; box-shadow: none; text-decoration: none; text-shadow: none; border-color: var(--color-primary-normal); outline: none; } .button-other:disabled, .MinorButton:disabled, .fiviAddAnotherButton>a:disabled { opacity: 0.5; } .button-link, .button-link-alt, .button-upload { min-width: var(--column-width-2); text-align: left !important; width: fit-content !important; margin: 0; padding: var(--gap-vertical-25) var(--gap-horizontal-200); background-color: transparent; border: none; font-size: 15px; line-height: 18px; font-weight: 600; color: var(--color-primary-normal); width: fit-content !important; cursor: pointer; text-transform: uppercase; text-shadow: none; } .button-link-alt { text-transform: uppercase; font-weight: 600; } .button-upload { cursor: pointer; } .button-upload:hover:not(:disabled), .button-upload:active:not(:disabled), .button-upload:focus:not(:disabled), .button-link:hover:not(:disabled), .button-link:active:not(:disabled), .button-link:focus:not(:disabled), .button-link-alt:hover:not(:disabled), .button-link-alt:active:not(:disabled), .button-link-alt:focus:not(:disabled) { text-decoration: underline !important; } .button-other:disabled, .button-other-alt:disabled { opacity: 0.5; } .back-button { min-width: var(--column-width-2); width: fit-content !important; text-align: center !important; margin: 0; padding: var(--gap-vertical-25) var(--gap-horizontal-200); background-color: transparent; color: var(--color-tertiary-normal); border: 2px solid var(--color-tertiary-normal); border-radius: var(--gap-horizontal); font-size: 15px; line-height: 18px; font-weight: 600; box-shadow: none; transition-duration: 500ms; transition-property: border-radius; text-transform: uppercase; text-shadow: none; text-align: center; text-decoration: none !important; } .back-button:hover:not(:disabled), .back-button:active:not(:disabled), .back-button:focus:not(:disabled) { background-color: var(--color-tertiary-normal); border: 2px solid var(--color-tertiary-normal); color: var(--color-white) !important; border-radius: var(--gap-horizontal); text-decoration: none !important; color: white; } .fiviRemoveBtn { position: absolute; color: var(--color-primary-normal); cursor: pointer; left: var(--fiviInput-width); background: white; } .fiviRemoveBtn:hover:not(:disabled), .fiviRemoveBtn:active:not(:disabled), .fiviRemoveBtn:focus:not(:disabled) { color: var(--color-primary-secondary); } /* 5.1 Button Containers */ .add-another-individual-container { display: flex; align-items: center; justify-content: flex-start; width: var(--fiviInput-width); } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .add-another-individual-container { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .add-another-individual-container { width: var(--fiviInput-width); } } /* 6. Accordions */ .panel.panel-default { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: 5px; width: 100%; padding: var(--gap-vertical) var(--gap-horizontal); gap: var(--gap-vertical); background-color: var(--background-color-alt); } /* #accordion { display: flex; flex-direction: column; max-width: var(--column-width-12); width: 100%; gap: var(--gap-vertical); } #accordion>.panel { outline: none; border: none; border-radius: var(--border-radius); background-color: transparent; box-shadow: none; margin: 0; } #accordion>.panel:has(> .panel-heading.collapsed) { outline: 1px solid var(--color-primary-normal); box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; } #accordion>.panel>.panel-heading { display: flex; align-items: center; background: white; border: none; border-radius: var(--border-radius); padding: var(--gap-vertical-50); cursor: pointer; } #accordion>.panel>.panel-heading>.panel-title { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; flex-wrap: wrap; position: relative; } #accordion>.panel>.panel-heading .panel-title>.panelArrow { position: absolute; right: 0; height: 100%; display: flex; align-items: center; justify-content: center; } #accordion>.panel .panel-body { display: flex; flex-direction: column; gap: var(--gap-vertical); border: none; border-radius: var(--border-radius); padding: var(--gap-vertical) 0; }*/ .panel-group { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .panel-default>.panel-heading { color: unset; background-color: unset; border-color: unset; background-image: unset; } .panel-group .panel+.panel { margin-top: unset; } .panel-heading { display: flex; cursor: pointer; padding: 0; } .panel-title>i:before { display: none; } .panel-heading>.panel-title>i:before { display: unset; } .panel-body::before, .panel-body::after { display: none; } /* this is the accordion open */ /* #accordion>.panel>.panel-heading:has(+ .collapse.in) { padding-left: 0; background: transparent; transition: padding-left .5s ease-in-out; } #accordion>.panel>.panel-heading:has(+ .collapse.in)>.panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); transition: font-size .5s ease-in-out; } */ /* this is the accordion opening */ /* #accordion>.panel>.panel-heading:has(+ .collapsing) { padding-left: 0; background: transparent; transition: padding-left .5s ease-in-out; } #accordion>.panel>.panel-heading:has(+ .collapsing)>.panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); transition: font-size .5s ease-in-out; } */ /* this is with the accordion closed */ /* #accordion>.panel>.panel-heading.collapsed:has(+ .collapse:not(.in)) { padding-left: var(--gap-horizontal); transition: padding-left .5s ease-in-out; } #accordion>.panel>.panel-heading.collapsed:has(+ .collapse:not(.in))>.panel-title { font-size: var(--font-size-h4); line-height: var(--font-size-h4); transition: font-size .5s ease-in-out; } */ /* this is with the accordion closing */ /* #accordion>.panel>.panel-heading.collapsed:has(+ .collapsing) { padding-left: var(--gap-horizontal); transition: padding-left .5s ease-in-out; } #accordion>.panel>.panel-heading.collapsed:has(+ .collapsing)>.panel-title { font-size: var(--font-size-h4); line-height: var(--font-size-h4); transition: font-size .5s ease-in-out; } */ /* 7. Inputs and Labels */ /* 7.1 Labels */ label { font-weight: var(--font-weight-label); } .DefaultLabelClass { display: flex; align-items: center; height: var(--input-height); position: absolute; left: var(--gap-horizontal-50); bottom: 0; font-size: var(--font-size-label); font-weight: var(--font-weight-label); line-height: var(--font-size-label); color: var(--font-color-label); font-family: var(--font-family-label); transition: all 0.2s ease-in-out; } .FocusLabelClass { height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); bottom: var(--input-focusLabel-offset); color: var(--font-color-label-focus); left: 0; font-weight: 500; } .checkbox-label { font-weight: var(--font-weight); flex: 1; line-height: var(--font-lineheight); } .DefaultLabelClass:has(+ select) { pointer-events: none; } /* 7.2 Inputs */ .fiviInput { display: inline-flex; width: 100vw; max-width: var(--fiviInput-width); position: relative; } .form-control { display: flex; align-items: center; width: 100% !important; 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) !important; border-radius: 8px; background-color: var(--background-input-color) !important; flex: 1 1 0; } .form-control:focus { border: 2px solid var(--border-color-focus) !important; box-shadow: none; /* -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px color-mix(in srgb, var(--border-color-focus), transparent 40%); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px color-mix(in srgb, var(--border-color-focus), transparent 40%); */ color: var(--font-color-label-focus); } .form-control[disabled] { background-color: #eee !important; } .fiviTransparent { color: transparent; } .fiviInput:has(> textarea) { max-width: 100%; &>textarea { margin-top: 0; padding: var(--gap-horizontal-50); font-weight: 400; } } /* 7.3 Fivi Input Containers */ .fiviTwoInput, .fiviLongInput { /* can container either input elements or fiviInput containers */ display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-horizontal-25) var(--gap-vertical); flex-wrap: wrap; } .fiviTwoInput>input, .fiviTwoInput>.fiviInput { max-width: var(--fiviInput-width-half); } .fiviTwoInput>.DefaultLabelClass { height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); bottom: var(--input-focusLabel-offset); color: var(--font-color-label-focus); left: 0; text-transform: none; } /* these containers normally contain a bunch of .fiviInput containers */ .fiviMultiInput { display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); flex-wrap: wrap; max-width: 100%; width: 100%; position: relative; } .fiviMultiContainer { display: flex; flex-direction: column; max-width: var(--column-width-full); width: 100%; gap: var(--gap-vertical) var(--gap-horizontal); } .fiviTwoInputContainer { /* Use this when you want two .fiviInputs to take up half the normal width and behave like a standard width .fiviInput. */ display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); flex-wrap: wrap; max-width: var(--fiviInput-width); width: 100vw; position: relative; } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviTwoInput>input { max-width: var(--fiviInput-width-half); } .fiviMultiInput { max-width: var(--fiviInput-width); width: 100%; } } /* 7.4 Fivi Checkbox/Radio Buttons */ .fiviCheckBox, .fiviCheckBox>span { display: flex; align-items: center; justify-content: center; gap: var(--gap-horizontal-50); max-width: fit-content; flex-direction: row; } .fiviCheckBox>label, .fiviCheckBox>span>label { display: flex; height: var(--column-spacer); align-items: center; gap: var(--gap-horizontal-50); } .icheckbox_square-blue, .iradio_square-blue { background-image: unset; width: 0; height: 0; appearance: none; position: absolute !important; } input[type="checkbox"], input[type="radio"] { appearance: none; position: absolute; width: 0; height: 0; } .fiviCheckBox { /* display: block !important; */ } .fiviCheckBox label { /* display: none; */ } .fiviCheckBox .CtlValidator { top: -4px; margin: 0; padding: 0; left: -20; height: 25px; } .icheckbox_square-blue+label, .iradio_square-blue+label, .iradio_square-blue+span+label { position: relative; margin-bottom: 0; cursor: pointer; } .icheckbox_square-blue+label:before, .iradio_square-blue+label:before, .iradio_square-blue+span+label:before { content: ""; margin: 0; min-width: calc(var(--column-spacer) * 2); border-radius: 40px; height: var(--column-spacer); position: relative; cursor: pointer; background-color: var(--color-gray-light); transition-duration: 500ms; max-width: calc(var(--column-spacer) * 2); } .icheckbox_square-blue+label:after, .iradio_square-blue+label:after, .iradio_square-blue+span+label:after { content: ""; position: absolute; background-color: var(--color-black-light); cursor: pointer; left: 0; width: var(--column-spacer); height: var(--column-spacer); border-radius: 50%; border: 0.5px solid var(--border-color); transition-duration: 500ms; } .icheckbox_square-blue.checked+label:before, .iradio_square-blue.checked+label:before, .iradio_square-blue.checked+span+label:before { background-color: var(--color-primary-light); } .icheckbox_square-blue.checked+label:after, .iradio_square-blue.checked+label:after, .iradio_square-blue.checked+span+label:after { background-color: var(--color-primary-normal); border-color: var(--color-primary-light); left: var(--column-spacer); } .icheckbox_square-blue.checked.disabled+label:after, .iradio_square-blue.checked.disabled+label:after, .iradio_square-blue.checked.disabled+span+label:after { cursor: not-allowed; } .icheckbox_square-blue.checked.disabled+label:before, .iradio_square-blue.checked.disabled+label:before, .iradio_square-blue.checked.disabled+span+label:before { display: flex; align-items: center; padding-left: calc(var(--column-spacer) / 2); background-color: var(--color-primary-light); color: var(--color-primary-normal); content: "\f023"; font-family: FontAwesome; font-size: 14px; cursor: not-allowed; } /* Button radio style */ .fiviRadioButton { display: flex; position: relative; align-items: center; z-index: 0; } .fiviRadioButton input+label { position: relative; padding: 0 var(--gap-horizontal-25); margin-bottom: 0; width: 100%; justify-content: center; height: calc(var(--input-height)); cursor: pointer; text-align: center; color: var(--color-primary-normal); align-content: center; pointer-events: all !important; } .fiviRadioButton input+label:before { display: none; } .fiviRadioButton input+label:after { content: ""; top: 0; left: 0; position: absolute; width: 100%; min-width: fit-content; padding: var(--gap-vertical) var(--gap-horizontal); background-color: var(--background-color-alt); color: var(--color-primary-normal); border: 1px solid var(--color-primary-normal); border-radius: 5px; font-size: 14px; line-height: 14px; font-weight: 500; box-shadow: none; transition-duration: 500ms; transition-property: color, background-color; z-index: -1; } .fiviRadioButton input+label:hover, .fiviRadioButton input+label:focus, .fiviRadioButton input+label:active, .fiviRadioButton input:checked+label { color: var(--color-white-normal); } .fiviRadioButton input+label:hover:after, .fiviRadioButton input+label:focus:after, .fiviRadioButton input+label:active:after, .fiviRadioButton input:checked+label:after { background-color: var(--color-primary-normal); box-shadow: none; text-decoration: none; left: 0; } .fiviRadioButton input:checked:disabled+label:after { cursor: not-allowed; } .fiviRadioButton input:checked:disabled+label:before { display: none; } /* 7.5 Validator */ .CtlValidator { position: absolute; line-height: var(--input-height); bottom: -3px; left: 3.5px; z-index: 5; } /* 7.6 Tool Tips */ .DefaultTooltipClass { position: absolute; width: fit-content; } .fiviInput .DefaultTooltipClass { bottom: 0; right: var(--gap-horizontal-50); height: var(--input-height); display: flex; align-items: center; } .fiviInput select~.DefaultTooltipClass { right: calc(var(--gap-horizontal) - var(--gap-horizontal-25)); } .tooltip-arrow { display: none; } .tooltip-inner { width: max-content; max-width: 300px !important; text-align: left; } .popover-content { color: var(--color-black-normal); } /* 7.7 Seperators */ .fiviMultiSeperator { width: 100%; height: 2px; margin: 14px 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); } /* 8. fiVISION Controls */ /* 8.1 fiVISION_ErrorSummary */ [id$="ErrorSummary1"] { display: none; } [id$="ErrorSummary1"]:has(li) { display: block; padding: 0 var(--gap-horizontal); } [id$="ErrorSummary1"] li, .errorSummary { font-size: calc(var(--font-size) - 2px); font-weight: 500; margin-bottom: 0; } /* 8.2 fiVISION_Panel */ .fiviPanel { display: inline-flex; flex-direction: unset; flex-wrap: unset; width: unset; justify-content: unset; } .fiviPanel, .fiviPanel>.fiviPanelContainer { display: block; max-width: 100%; } /* 8.3 fiVISION_ProductsAndServicesV2 */ .fiviProdServControl { display: flex; flex-wrap: wrap; max-width: var(--column-width-12); width: 100%; gap: var(--gap-vertical); } .fiviProdServControl .fiviCheckBox>label, .fiviProdServControl .fiviCheckBox>span>label { text-indent: -3px; } .fiviProdServControl .DefaultTooltipClass { top: 0; position: relative; } .fiviProdContainer { max-width: 100%; width: 100%; position: relative; } .fiviProdContainer:not(:last-child) { padding-bottom: var(--gap-vertical); border-bottom: 1px solid var(--border-color); } .fiviProdServ { display: flex; flex-direction: row; gap: var(--gap-vertical-50) var(--gap-horizontal-50); align-items: center; } .fiviProdServ>.fiviCheckBox>.DefaultTooltipClass, .fiviProdServ>.fiviCheckBox>span>.DefaultTooltipClass {} .fiviProdServ>.fiviCheckBox>label, .fiviProdServ>.fiviCheckBox>span>label { font-size: var(--font-size-label); font-weight: 400; } .fiviProdServ .fiviAddAnotherButton { display: flex; width: fit-content; align-self: center; justify-content: flex-start; } .fiviProdServ .fiviAddAnotherButton>a, .section-container div>a[id*="btn"] { text-align: center; display: flex; align-items: center; justify-content: center; margin-top: auto; } .Product_MoreInfo { width: 100%; } .fiviProdPanel { max-width: 100%; width: 100%; } .fiviProdPanel:not(.fiviProdPanel:has(> *)) { display: none !important; } .fiviProdPanel>.fiviInput { max-width: 100%; width: var(--fiviInput-width); } .fiviProdPanel>.fiviProdInnerPanel:first-of-type { margin-top: var(--gap-vertical-50); } .fiviProdPanel>.fiviProdInnerPanel:not(:first-of-type) { margin-top: var(--gap-vertical); } .fiviProdInnerPanel { display: flex; flex-direction: row; gap: var(--gap-vertical-50); flex-wrap: wrap; width: 100%; padding: 0 var(--gap-horizontal); position: relative; } .Service_MoreInfo { width: 100%; font-size: 14px; } .fiviCDWizardInfo { display: flex; flex-direction: row; flex-wrap: wrap; max-width: var(--column-width-12); min-height: fit-content; padding: 0; background-color: transparent; border: none; box-shadow: none; } .fiviCDWizardInfo>.fiviCheckBox { height: var(--input-height); align-self: flex-end; width: 100%; } .fiviCDWizardInfo>.fiviInput>input { color: inherit !important; } /* 8.4 fiVISION_AddressTextBoxV2 */ .address-container { position: relative; display: flex; flex-direction: column; gap: var(--fiviInput-vertical-spacing); width: 100%; max-width: var(--fiviInput-width); } .fiviAddress { display: flex; flex-direction: column; gap: var(--gap-vertical-25); width: 100%; } .fiviAddress>.fiviMultiInput { display: flex; flex-direction: column; gap: var(--fiviInput-vertical-spacing); width: 100%; } .fiviAddress>.fiviSameAs { max-width: calc(calc(var(--fiviInput-width) / 2) + var(--gap-horizontal-50)); position: absolute; top: calc(calc(var(--font-lineheight-h3) + var(--fiviInput-vertical-spacing)) * -1); right: 0; } .fiviAddress>.fiviSameAs label { font-size: calc(var(--font-size-label) - 2px); } .fiviAddress>.DefaultAddressVerifyingClass { font-size: calc(var(--font-size) - 2px); line-height: var(--font-lineheight); font-weight: 500; text-align: center; color: var(--font-color-light) !important; } @media all and (max-device-width: 836px), all and (max-width: 836px) { .address-container { /* max-width: 100%; */ } .address-container>h3 { max-width: 100%; } .fiviAddress .fiviInput { /* max-width: var(--column-width-4); */ } .fiviAddress>.fiviSameAs { max-width: 100%; position: relative; top: unset; right: unset; } } /* 8.5 fiVISION_PhoneTextBoxV2 --fiviLongInput has the phone field, phone type, and preferred --fiviTwoInput has the phone field and either phone type or preferred --else its just the phone field */ .fiviPhoneControl { margin: 0; max-width: var(--fiviInput-width); } .fiviTwoInput.fiviPhoneControl, .fiviLongInput.fiviPhoneControl { display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-vertical) var(--gap-horizontal); flex-wrap: wrap; } .fiviLongInput.fiviPhoneControl { width: 100%; } .fiviPhoneControl.fiviTwoInput>.DefaultLabelClass, .fiviPhoneControl.fiviLongInput>.DefaultLabelClass { height: var(--input-height); font-size: var(--font-size-label); left: var(--gap-horizontal-50); font-weight: var(--font-weight-label); text-transform: none; color: var(--font-color-label); } .fiviPhoneControl.fiviTwoInput>.FocusLabelClass, .fiviPhoneControl.fiviLongInput>.FocusLabelClass { height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); left: 0; font-weight: 500; color: var(--font-color-label-focus); } .fiviPhoneControl.fiviTwoInput>.DefaultLabelClass { bottom: 0; } .fiviPhoneControl.fiviTwoInput>.FocusLabelClass { bottom: var(--input-focusLabel-offset); } .fiviPhoneControl.fiviLongInput>.DefaultLabelClass { top: var(--input-marginTop-forLabelFocusSpace); } .fiviPhoneControl.fiviLongInput>.FocusLabelClass { top: 0; } .fiviLongInput.fiviPhoneControl>input.form-control, .fiviTwoInput.fiviPhoneControl>input.form-control { max-width: var(--fiviInput-width-partial-main) !important; width: 100%; } .fiviPhoneControl>.fiviCheckBox, .fiviPhoneControl>select.form-control { max-width: var(--fiviInput-width-partial-alt) !important; width: 100%; } .fiviPhoneControl>.fiviCheckBox { background: transparent; border: none !important; box-shadow: none; padding: 0; } .fiviSMSOptInOut { width: 100%; } .fiviSMSOptions { width: 100%; background: var(--background-color) !important; border: solid 1px var(--border-color); border-radius: 5px; gap: var(--gap-vertical); padding: var(--gap-horizontal) !important; min-width: unset !important; } .fiviSMSOptionsButtonPanel .fiviInput { flex: 1 0 0; } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviTwoInput.fiviPhoneControl { max-width: var(--column-width-6); width: 100%; } .fiviTwoInput.fiviPhoneControl>input.form-control, .fiviTwoInput.fiviPhoneControl>select.form-control { max-width: var(--column-width-3); } .fiviLongInput.fiviPhoneControl>.fiviCheckBox { margin-top: 0; max-width: 100%; } .fiviLongInput.fiviPhoneControl>label.DefaultLabelClass { bottom: calc(var(--input-height) + var(--gap-horizontal-25)); } .fiviLongInput.fiviPhoneControl>label.DefaultLabelClass.FocusLabelClass { bottom: calc(var(--input-focusLabel-offset) + calc(var(--input-height) + var(--gap-horizontal-25))); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviTwoInput.fiviPhoneControl>input.form-control, .fiviTwoInput.fiviPhoneControl>select.form-control { max-width: var(--column-width-2); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviTwoInput.fiviPhoneControl { gap: var(--gap-horizontal-25) var(--gap-vertical); } .fiviTwoInput.fiviPhoneControl>input.form-control, .fiviLongInput.fiviPhoneControl>input.form-control, .fiviTwoInput.fiviPhoneControl>select.form-control, .fiviLongInput.fiviPhoneControl>select.form-control { max-width: 100% !important; } .fiviTwoInput.fiviPhoneControl>select.form-control, .fiviLongInput.fiviPhoneControl>select.form-control { /* margin-top: 0px; */ } .fiviPhoneControl>.fiviCheckBox { margin-top: 0; max-width: 100%; } .fiviTwoInput.fiviPhoneControl>label.DefaultLabelClass { /*! bottom: calc(var(--input-height) + var(--gap-horizontal-25)); */ } .fiviTwoInput.fiviPhoneControl>label.DefaultLabelClass.FocusLabelClass { /* bottom: calc(var(--input-focusLabel-offset) + calc(var(--input-height) + var(--gap-horizontal-25))); */ } .fiviLongInput.fiviPhoneControl>label.DefaultLabelClass { bottom: calc(calc(var(--input-height) + var(--gap-horizontal-25)) * 2); } .fiviLongInput.fiviPhoneControl>label.DefaultLabelClass.FocusLabelClass { bottom: calc(var(--input-focusLabel-offset) + calc(calc(var(--input-height) + var(--gap-horizontal-25)) * 2)); } } /* 8.6 fiVISION_IDTypeV2 */ .fiviIDType { max-width: calc(calc(var(--fiviInput-width) * 2) + var(--column-spacer)); } #statesDiv:has(+ #countriesDiv[style="display: none"]) { display: block !important; } .fiviIDType>div[id*="issueDateDiv"], .fiviIDType>div[id*="expirationDateDiv"] { max-width: var(--fiviInput-width-half); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviIDType>div[id*="issueDateDiv"], .fiviIDType>div[id*="expirationDateDiv"] { max-width: var(--fiviInput-width); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviIDType { max-width: var(--fiviInput-width); } .fiviIDType>div[id*="issueDateDiv"], .fiviIDType>div[id*="expirationDateDiv"] { max-width: var(--fiviInput-width-half); } } /* 8.7 fiVISION_HousingDurationHistory */ .fiviHousingDurationHistory { max-width: var(--column-width-full); } .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width-half); } .fiviHousingDurationHistory center { width: var(--fiviInput-width); } .fiviHousingDurationHistory .DefaultAddressVerifyingClass { width: var(--fiviInput-width); } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .fiviHousingDurationHistory center { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width); } .fiviHousingDurationHistory .DefaultAddressVerifyingClass { width: var(--column-width-4); } .fiviHousingDurationHistory center { width: var(--fiviInput-width); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width-half); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width-half); } } /* 8.8 fiVISION_EmploymentHistory */ .fiviEmpHistoryControl { max-width: var(--column-width-full); width: 100%; } .fiviEmpHistoryControl center { width: var(--fiviInput-width); } .fiviEmpHistoryControl .fiviInput>input { color: inherit !important; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .fiviEmpHistoryControl center { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviEmpHistoryControl center { width: var(--fiviInput-width); } } /* 8.9 fiVISION_IndividualIncome */ .fiviIncomeControl { max-width: var(--column-width-full); } .fiviIncomeControl .fiviMultiSeperator { display: none; } .fiviIncomeControl .fiviMultiInput>.fiviInput { max-width: var(--fiviInput-width-half); } .fiviIncomeControl>.fiviMultiContainer>div:has(span[id*="btnAddIncome"]) { width: var(--fiviInput-width); } .fiviIncomeControl .fiviRemoveBtn { position: relative; left: unset; align-self: center; order: 2; margin-top: var(--input-marginTop-forLabelFocusSpace); } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .fiviIncomeControl .fiviMultiInput>.fiviInput { max-width: var(--fiviInput-width); } .fiviIncomeControl>.fiviMultiContainer>div:has(span[id*="btnAddIncome"]) { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviIncomeControl>.fiviMultiContainer>div:has(span[id*="btnAddIncome"]) { width: var(--fiviInput-width); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviIncomeControl .fiviMultiSeperator { display: block; } .fiviIncomeControl .fiviRemoveBtn { position: absolute; left: var(--fiviInput-width-half); align-self: unset; order: 0; height: unset; } } /* 8.10 fiVISION_IndividualDetails */ .fiviIndDetails { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .fiviIndDetails>div { display: flex; gap: var(--gap-horizontal-50); padding-left: var(--gap-horizontal-200); } .fiviIndDetails>div:not(.fiviIndDetailsSection):not(.fiviIndDetailsName):before { content: "\f111"; font-family: "Font Awesome 5 Free"; font-size: 6px; } .fiviIndDetails>.fiviIndDetailsSection { padding-left: var(--gap-horizontal); font-style: italic; } .fiviIndDetailsSection>b { font-weight: 500; } .fiviIndDetails>.fiviIndDetailsName { font-size: var(--font-size); font-weight: 500; padding-left: var(--gap-horizontal-50); border-left: 2px solid var(--color-primary-normal); } .fiviIndDetails>.fiviIndDetailsName:not(:first-of-type) { margin-top: var(--gap-vertical-75); } /* 8.11 fiVISION_ProductsAndServicesSelected */ .fiviProdServiceSelected>div { margin: 0 !important; display: flex; flex-direction: column; gap: var(--gap-vertical-75); font-size: calc(var(--font-size) + 2px); font-weight: 600; } .fiviProdServiceSelected>div>ul { padding: 0; list-style: none; display: flex; gap: var(--gap-vertical-25) 1px; flex-wrap: wrap; font-weight: 400; font-size: var(--font-size); flex-direction: row; } .fiviProdServiceSelected>div>ul>i { margin-left: var(--gap-horizontal); } .fiviProdServiceSelected>div>ul>li { margin: var(--gap-vertical-25) 0 0 0; font-size: var(--font-size); width: 100%; border-left: 2px solid var(--color-primary-normal); padding-left: var(--gap-horizontal-50); } .fiviProdServiceSelected>div>ul>li>b { font-weight: 500; } .fiviProdServiceSelected>div>ul>li:first-of-type { margin-top: 0; } .fiviProdServiceSelected>div>ul>ul { margin: 0; width: 100%; margin-left: var(--gap-horizontal); } .fiviProdServiceSelected>div>br+ul>li { margin-left: var(--gap-horizontal-25); font-size: var(--font-size); margin-top: 0; } .fiviProdServiceSelected>div>br+ul>li>b { font-weight: 500; } /* 8.12 fiVISION_ProductRelationships */ .fiviProductRelationship { display: block; overflow-x: auto; white-space: nowrap; border: 1px solid var(--color-secondary-dark); border-radius: 5px; max-width: 100%; width: fit-content; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; } .fiviProductRelationship table { overflow-x: auto; white-space: nowrap; border: none; margin: 0; } .fiviProductRelationship tr { display: flex; flex-wrap: nowrap; padding: 0 var(--column-spacer); border-bottom: 1px solid var(--color-white-dark); } .fiviProductRelationship tr:nth-of-type(odd) { background-color: white !important; } .fiviProductRelationship tr:nth-of-type(even) { background-color: transparent !important; } .fiviProductRelationship tr:last-of-type { border: none; } .fiviProductRelationship td { display: flex; justify-content: center; align-items: center; width: var(--column-width-2); height: calc(var(--font-size) * 3); text-wrap: wrap; padding: 0 !important; line-height: var(--font-lineheight); background-color: transparent !important; border: none !important; font-size: var(--font-size); } .fiviProductRelationship tr>td:first-of-type { justify-content: flex-start; font-weight: 600; width: var(--column-width-3); } .fiviProductRelationship tr[id*="_ServiceRow"]>td:first-of-type { padding-left: var(--column-spacer) !important; font-weight: 400; } .fiviProductRelationship tr:first-of-type>td { font-weight: bold; text-align: left !important; border: none; } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviProductRelationship tr { gap: 0 var(--column-spacer); } .fiviProductRelationship td { width: var(--column-width); } .fiviProductRelationship tr>td:first-of-type { width: var(--column-width-2); } .fiviProductRelationship tr:first-of-type>td { text-align: center !important; } } /* 8.13 fiVISION_DocumentListV2 */ .fiviDocumentList { width: 100%; display: flex; flex-direction: column-reverse; gap: var(--gap-vertical-75); align-items: center; } .fividocumentlist>span { display: flex; flex-direction: column; gap: var(--gap-vertical); } .fiviDocumentList>input:first-of-type { align-self: center; } .fiviDocumentList>span:has(> table), .fiviDocumentList>div:has(> table) { width: 100%; } .fiviDocumentList table { display: block; width: 100%; margin: 0; border: 1px solid var(--border-color); border-radius: 5px; /* box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; */ } .fiviDocumentList table>thead, .fiviDocumentList table>tbody { display: flex; flex-direction: column; width: 100%; } .fividocumentlist table>thead>tr, .fiviDocumentList table>tbody>tr { display: flex; flex-wrap: nowrap; position: relative; padding: 0 var(--column-spacer); border: none; border-radius: 5px; border-bottom: 1px solid var(--color-white-dark); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .fividocumentlist table>thead>tr { justify-content: stretch; width: 100%; } .fiviDocumentList table>thead>tr:nth-of-type(odd), .fiviDocumentList table>.DocUploadGridClass>tr:nth-of-type(odd) { background-color: var(--background-color-alt); } .fiviDocumentList table>thead>tr:nth-of-type(even), .fiviDocumentList table>.DocUploadGridClass>tr:nth-of-type(even) { background-color: transparent !important; } .fiviDocumentList table>tbody>tr:last-of-type { border: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .fiviDocumentList table>thead>tr>th, .fiviDocumentList table>thead>tr>td, .fiviDocumentList table>tbody>tr>th, .fiviDocumentList table>tbody>tr>td { display: flex; align-items: center; justify-content: flex-start; max-width: var(--column-width-3); width: 100% !important; padding: calc(var(--gap-horizontal) / 2) 0 !important; background-color: transparent !important; border-top: none; border-bottom: none; flex: 1 1 0; } .fiviDocumentList table td { border: none !important; } .fiviDocumentList table th:first-of-type, .fiviDocumentList table.V3StatusCenterTableClass tr>th:nth-child(2), .fiviDocumentList table td:first-of-type, .fiviDocumentList table.V3StatusCenterTableClass tr>td:nth-child(2) { justify-content: flex-start; } .fiviDocumentList table th:last-of-type, .fiviDocumentList table td:last-of-type { display: flex; flex-direction: row; max-width: var(--column-width-4); width: 100%; background-color: transparent !important; } .fiviDocumentList table td:last-of-type>br { display: none; } .fiviDocumentList .button-link, .fiviDocumentList .button-upload { text-align: center; min-width: inherit; } .fiviDocumentList .DefaultTooltipClass { display: flex; align-items: center; justify-content: center; width: var(--column-spacer); /* height: var(--input-height); */ margin: var(--gap-vertical-50) var(--gap-horizontal-50) !important; /* position: absolute; */ right: 0; } #UploadCompleted { line-height: 1.5em; padding: 1em 0; font-size: 18px; } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviDocumentList .DocUploadHeadClass { display: none; } .fiviDocumentList table>thead>tr, .fiviDocumentList table>tbody>tr { flex-direction: row; padding: 0; gap: var(--gap-vertical-50); flex-wrap: wrap; } .fiviDocumentList table td:first-of-type { justify-content: center; } .fiviDocumentList table>thead>tr>th, .fiviDocumentList table>tbody>tr>td { display: flex; flex-direction: row; align-items: center; justify-content: center; max-width: 100%; padding: var(--gap-vertical-25) var(--gap-horizontal-50) !important; flex: 1 1 0; } .fiviDocumentList table>tbody>tr>td>label.button-link { min-width: 0; width: 100% !important; } .fiviDocumentList table>tbody>tr>td:nth-of-type(4) { flex-direction: row; justify-content: center; padding: var(--gap-vertical-50) 0 !important; } .fiviDocumentList .DefaultTooltipClass { position: relative; height: fit-content; margin: var(--gap-vertical-25) 0 !important; } } /* 8.14 fiVISION_DisclosuresList */ .fiviDisclosureList { display: flex; flex-direction: column; gap: var(--gap-vertical-50); position: relative; border: 1px solid var(--border-color); border-radius: 5px; padding: var(--gap-horizontal-50); margin-top: calc(var(--input-height) + var(--gap-vertical-50)); width: 100%; } .fivi-disclosure-modal .modal-header { border-top-left-radius: 5px; border-top-right-radius: 5px; } .fivi-disclosure-modal .modal-content { background-color: var(--background-color-alt); border-radius: 5px; } .fiviDisclosure-modal-button { position: absolute; top: calc(calc(var(--input-height) + var(--gap-vertical-50)) * -1); left: 0; display: flex; justify-content: center; width: 100%; } .fiviDisclosure-checkbox-container { display: flex; flex-direction: row; align-items: center; gap: var(--gap-horizontal-50); } #DisclosuresList01_DisclosureModal .back-button, #DisclosuresList01_DisclosureModal .button-primary { margin: 0 1rem; } .fiviDisclosure-checkbox-container .fa-square { display: none !important; } .fiviDisclosure-checkbox-container>label { width: unset; } .fiviDisclosure-checkbox-container>i { padding-right: unset !important; } .fiviDisclosure-checkbox-container .button-link { text-align: center; min-width: fit-content; } .fivi-disclosure-modal .modal-body>div { display: flex; flex-direction: row-reverse; justify-content: center; } .fivi-disclosure-modal .modal-body .button-link { text-align: center; } /* 8.15 fiVISION_ProductFundingV2 */ .fiviProductFunding { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: var(--gap-vertical); } .fiviProductFundingItem, .fiviFundingAmount { width: 100%; border: 1px solid var(--border-color); border-radius: 5px; position: relative; padding: var(--gap-vertical-50); margin: 0; } .fiviFundingAmount { padding: var(--gap-vertical) var(--gap-horizontal-50); } .fiviFundingAmount>b>div { padding-right: var(--gap-horizontal-50); width: var(--column-width-2); text-align: end; } .fiviFundingAmount { display: flex; justify-content: space-between; width: 100% !important; } .fiviProductFundingItem>.fiviInput { padding: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; max-width: 100%; gap: var(--gap-horizontal); } .fiviProductFundingItem>.fiviInput>label { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-right: 1px solid var(--border-color); font-weight: normal; flex: 1; gap: var(--gap-vertical-25); } .fiviProductFundingItem>.fiviInput>.form-control { width: var(--column-width-2) !important; margin-top: 0; color: var(--font-color-input) !important; } .fiviProductFundingItem>.fiviInput>.form-control:focus { color: var(--font-color-label-focus) !important; } .fiviProductFundingItem>.fiviInput>label:before { content: "* funding required"; color: var(--color-primary-dark); font-size: 10px; padding: 0 4px; font-weight: bold; border-radius: var(--border-radius); position: relative; bottom: calc(var(--gap-vertical) * 0); font-style: italic; } .fiviProductFundingItem>.fiviInput:has(> input[min="0"])>label:before { content: "funding optional"; color: var(--font-color-h3); font-style: italic; } .ProductTypes_Funding { display: none; } @media all and (max-device-width: 450px), all and (max-width: 450px) { .fiviProductFundingItem>.fiviInput { flex-direction: column; text-align: center; height: calc(var(--input-height) * 2); } .fiviProductFundingItem>.fiviInput>label { border-right: none; } .fiviProductFunding { align-items: flex-end; } .fiviFundingAmount { flex-direction: column; text-align: center; } .fiviFundingAmount>b>div { text-align: center; padding: 0; width: 100%; } } /* 8.16 fiVISION_ProveIndividualLookup */ .prove-container { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--gap-vertical); width: 100%; } .prove-container>div { width: 100%; } .fiviProveIndividualLookup { display: flex; flex-direction: column; border-radius: var(--border-radius); align-items: stretch; } .prove-direction-buttons { gap: var(--gap-horizontal); display: flex; flex-direction: row-reverse; justify-content: flex-start; width: 100%; margin-top: var(--gap-vertical); align-items: center; } /* 8.17 fiVISION_ACH */ .fiviACHControl { justify-content: center; } .fiviACHStatus { max-width: var(--fiviInput-width); display: block; } .fiviACHStatus>span { font-weight: normal !important; color: var(--font-color) !important; } .fiviACHcbCont { max-width: var(--fiviInput-width); display: flex; flex-direction: row; justify-content: space-evenly; } .fiviACHControl>.fiviCheckBox { width: 100%; } /* 8.18 fiVISION_CreditCardV2 */ .fiviCreditCardControl { display: flex; flex-direction: column; gap: var(--column-spacer); align-items: center; } .fiviCreditCardControl, .fiviCCIndInfo, .fiviCCIndNameInfo, .fiviCCIndAddy, .fiviCCCardInfo { justify-content: center; } .fiviCCIndAddy { flex-direction: row; } .fiviCCCardInfo { position: relative; } .fiviCCCardInfo>.DefaultAddressVerifyingClass { position: absolute; text-align: right; width: calc(50% - var(--fiviInput-horizontal-spacing)); font-size: var(--input-focusLabel-fontSize); height: var(--input-focusLabel-fontSize); left: 0; } .fiviCCCardInfo .fiviTwoInput { gap: 0; } .fiviCCCardInfo .TwoControls { width: 33% !important; padding: 0 0 0 0; } .fiviCCCardInfo .form-control.TwoControls { padding: 0 10px 0 10px; } .fiviCCCardInfo .TwoControls .form-control { width: 100% !important; } .fiviCCCardInfo .TwoControls .DefaultTooltipClass { right: 8px; color: var(--font-color-input); } #CreditCard_Month { border-top-right-radius: 0; border-bottom-right-radius: 0; } #CreditCard_Year { border-radius: 0; border-left: none; border-right: none; } #CreditCard_CVV { border-top-left-radius: 0; border-bottom-left-radius: 0; } .fiviCreditCardControl .loading { position: absolute; } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviCCCardInfo>.DefaultAddressVerifyingClass { right: 0; width: 100%; } } /* 8.19 fiVISION_FinicityFundingAccountVerification */ .fiviFinicity { justify-content: center; } #RealTimeInput>div { display: flex; align-items: center; justify-content: center; margin-right: 0 !important; width: 100% !important; } .fivi-verifyNow-contents { display: flex; flex-direction: column; gap: var(--gap-vertical); } .fivi-verifyNow-btn-contanier { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; gap: var(--gap-vertical); text-align: center; } /* 8.19 fiVISION_ApplicantWithdraw */ .fiviApplicantWithdraw { max-width: 100%; width: 100%; display: flex; flex-direction: column; gap: var(--gap-vertical-75); position: relative; } .fiviApplicantWithdraw>.CtlValidator { top: -3px; bottom: unset; left: -8px; } /* 8.20 fiVISION_ProgressBar */ .progress-container { display: flex; align-self: stretch; width: 100%; } .progress-container>span { display: flex; width: 100%; background-color: var(--color-secondary-normal); min-width: var(--column-width-3); } .progress-container-header>span { display: flex; width: 100%; background-color: var(--background-color-page); } .progress-container-header>span:last-child { border-bottom: 1px solid var(--border-color); } .progress-container-main>span { display: flex; width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; } .journey-bar-icons { display: none; } .journey-bar { margin-bottom: 0; display: flex; justify-content: flex-end; align-items: flex-start; width: 100%; padding: var(--gap-horizontal-150); background-color: var(--background-color); align-self: stretch; } .journey-bar>tbody>tr { display: flex; flex-direction: column; gap: var(--gap-vertical-200); } .journey-bar>tbody>tr>td { border-top: none; padding: 0; } .journey-bar .journey-bar-group { display: flex; flex-direction: row; align-items: flex-start; flex-wrap: wrap; gap: var(--gap-vertical-25); min-width: var(--column-width); } .journey-bar .journey-bar-group>span { font-size: calc(var(--font-size) - 2px); color: var(--color-gray-light); } .journey-bar .journey-bar-group:before { content: ""; font-size: calc(var(--font-size) - 2px); font-family: var(--font-family-alt); } .journey-bar .current-group:before { color: var(--color-primary-normal); font-weight: bold; } .journey-bar .journey-bar-group:has(img[alt="Start"]):before, .journey-bar .journey-bar-group:has(img[alt="TrustStart"]):before, .journey-bar .journey-bar-group:has(img[alt="BusinessStart"]):before { content: "1."; } .journey-bar .journey-bar-group:has(img[alt="Products"]):before, .journey-bar .journey-bar-group:has(img[alt="TrustInformation"]):before, .journey-bar .journey-bar-group:has(img[alt="BusinessInformation"]):before { content: "2."; } .journey-bar .journey-bar-group:has(img[alt="Details"]):before, .journey-bar .journey-bar-group:has(img[alt="AdditionalPeople"]):before, .journey-bar .journey-bar-group:has(img[alt="BusinessIndividuals"]):before { content: "3."; } .journey-bar .journey-bar-group:has(img[alt="Verification"]):before, .journey-bar .journey-bar-group:has(img[alt="TrustReview"]):before, .journey-bar .journey-bar-group:has(img[alt="BusinessReview"]):before { content: "4."; } .journey-bar .journey-bar-group:has(img[alt="Funding"]):before, .journey-bar .journey-bar-group:has(img[alt="TrustFunding"]):before, .journey-bar .journey-bar-group:has(img[alt="BusinessFunding"]):before { content: "5."; } .journey-bar .journey-bar-group:after { display: block; content: ""; width: 100%; font-size: calc(var(--font-size) - 2px); color: var(--color-gray-light); } .journey-bar .journey-bar-group:has(img[alt="Start"]):after { content: "Help us try to find your information for the fastest, smoothest experience possible!"; } .journey-bar .journey-bar-group:has(img[alt="Products"]):after { content: "Select or review your choices"; } .journey-bar .journey-bar-group:has(img[alt="Details"]):after { content: "Provide a little more information based on the accounts and services you selected"; } .journey-bar .journey-bar-group:has(img[alt="Verification"]):after { content: "Let's make sure we've dotted our i's and crossed our t's"; } .journey-bar .journey-bar-group:has(img[alt="Funding"]):after { content: "You have many options for your first deposit. Select the one that works for you!"; } .journey-bar .journey-bar-group:has(img[alt="TrustStart"]):after { content: "Help us try to find your information for the fastest, smoothest experience possible!"; } .journey-bar .journey-bar-group:has(img[alt="TrustInformation"]):after { content: "Let's gather Trust information for the accounts and services you selected."; } .journey-bar .journey-bar-group:has(img[alt="AdditionalPeople"]):after { content: "Let's gather the other individuals; your Trustees and Beneficiaries."; } .journey-bar .journey-bar-group:has(img[alt="TrustReview"]):after { content: "Let's make sure we've dotted our i's and crossed our t's."; } .journey-bar .journey-bar-group:has(img[alt="TrustFunding"]):after { content: "You have many options for your first deposit. Select the one that works for you!"; } .journey-bar .journey-bar-group:has(img[alt="BusinessStart"]):after { content: "Help us try to find your information for the fastest, smoothest experience possible!"; } .journey-bar .journey-bar-group:has(img[alt="BusinessInformation"]):after { content: "Let's gather Business information for the accounts and services you selected."; } .journey-bar .journey-bar-group:has(img[alt="BusinessIndividuals"]):after { content: "Let's gather the other individuals; your Authorized Signers and Beneficial Owners."; } .journey-bar .journey-bar-group:has(img[alt="BusinessReview"]):after { content: "Let's make sure we've dotted our i's and crossed our t's."; } .journey-bar .journey-bar-group:has(img[alt="BusinessFunding"]):after { content: "You have many options for your first deposit. Select the one that works for you!"; } .journey-bar .current-group:after { color: var(--font-color); } .journey-bar .current-group>span { font-weight: bold; color: var(--color-primary-normal); } .journey-bar .journey-bar-group.previous-group:before, .journey-bar .journey-bar-group.previous-group span { color: var(--color-primary-normal); font-weight: 600; } .journey-bar .journey-bar-group.previous-group span:hover { color: var(--color-primary-secondary); font-weight: 600; text-decoration: underline; } .journey-bar .journey-bar-group.future-group:before { color: var(--color-gray-light); } .progress-container-header .journey-bar-current, .progress-bar-outer, .progress-bar-text { display: none; } .progress-container-header { display: block; width: 100%; position: relative; width: 100%; } .progress-container-main { width: 100%; } #progbar { width: 100%; display: flex; } .progress-bar-outer { width: 100%; position: absolute; } .progress-bar-inner { background-color: var(--color-primary-normal); font-size: 0; height: 3px; } .journey-bar-current { display: flex; justify-content: stretch; align-items: flex-start; width: 100%; padding: var(--gap-vertical) var(--gap-horizontal); margin-bottom: 0; border-bottom: 1px solid var(--border-color); } .journey-bar-current>tbody, .progress-bar-outer>tbody { width: 100%; display: flex; } .journey-bar-current>tbody>tr, .progress-bar-outer>tbody>tr { display: flex; width: 100%; } .progress-bar-outer>tbody>tr>td { font-size: 0; } .journey-bar-current .journey-bar-group:not(.current-group) { display: none; } .journey-bar-current .current-group { display: flex; width: 100%; align-items: center; padding: 0; border-top: none; } .journey-bar-current .current-group>span { font-size: calc(var(--font-size-h1) + 2px); font-weight: var(--font-weight-h1); color: var(--color-primary-normal); order: -1; width: 100%; display: flex !important; align-items: center; } .journey-bar-current .journey-bar-group.current-group>span:before { content: ""; display: block; border: 3px solid var(--color-black-light); border-radius: 50%; position: absolute; /* Size of 3 letters divided by the ratio of circle width to letter width divided by offset ratio from right edge */ right: calc(var(--gap-horizontal) - calc(var(--font-size-h1) * 3 / 2.25 / 4)); width: calc(var(--font-size-h1) * 2.25); height: calc(var(--font-size-h1) * 2.25); } .journey-bar-current .journey-bar-group.current-group:before { content: "1"; font-size: var(--font-size-h1); font-weight: 800; font-family: var(--font-family-alt); color: var(--color-primary-normal); } .journey-bar-current .journey-bar-group.current-group:after { content: "/5"; font-size: var(--font-size-h1); font-family: var(--font-family-alt); color: var(--color-gray-light); width: 21px; /* Required for Firefox */ } .journey-bar-current .journey-bar-group.current-group:has(> img[alt="Start"]):before, .journey-bar-group.current-group:has(> img[alt="TrustStart"]):before, .journey-bar-group.current-group:has(> img[alt="BusinessStart"]):before { content: "1"; } .journey-bar-current .journey-bar-group.current-group:has(> img[alt="Products"]):before, .journey-bar-group.current-group:has(> img[alt="TrustInformation"]):before, .journey-bar-group.current-group:has(> img[alt="BusinessInformation"]):before { content: "2"; } .journey-bar-current .journey-bar-group.current-group:has(> img[alt="Details"]):before, .journey-bar-group.current-group:has(> img[alt="AdditionalPeople"]):before, .journey-bar-group.current-group:has(> img[alt="BusinessIndividuals"]):before { content: "3"; } .journey-bar-current .journey-bar-group.current-group:has(> img[alt="Verification"]):before, .journey-bar-group.current-group:has(> img[alt="TrustReview"]):before, .journey-bar-group.current-group:has(> img[alt="BusinessReview"]):before { content: "4"; } .journey-bar-current .journey-bar-group.current-group:has(> img[alt="Funding"]):before, .journey-bar-group.current-group:has(> img[alt="TrustFunding"]):before, .journey-bar-group.current-group:has(> img[alt="BusinessFunding"]):before { content: "5"; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .progress-container { display: none; } .progress-container-header .journey-bar-current, .progress-bar-outer { display: flex; } .progress-container-main .journey-bar-current { display: none; } } /* 8.21 fiVISON_IndividualHandler */ #IndividualHandler01 { width: 100%; } #IndividualHandler02 { width: 100%; } /* 8.22 fiVISION_EmailTextBoxV2 */ .email-container { /* position: relative; */ /* display: flex; */ /* flex-direction: row; */ /* gap: var(--fiviInput-vertical-spacing); */ /* width: 100%; */ } /* 8.23 fiVISION_CollateralHandler */ #CollateralHandler01 { flex-grow: 1; flex-basis: 0; display: flex; flex-direction: column; } #CollateralHandler01>.fivipanelcontainer { display: flex; flex-direction: column; flex: 1 1 auto; } #CollateralHandler01>.fivipanelcontainer>.flex-column { display: flex; flex-direction: column; flex: 1 1 auto; } /* 8.24 fiVISION_IDAuthentication */ .fiviIDAuth tbody { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } .fiviIDAuth .iradio_square-blue+label { display: flex; gap: var(--gap-horizontal-25); font-weight: 300; } /* 8.25 fiVISION_PlaidFundingAccountVerification */ .fiviPlaid br { display: none; } .fiviPlaid #ACHFundingAccountVerification_results { display: flex; } .fiviPlaid #RealTimeInput>div>div>div>div:last-of-type { display: flex; justify-content: center; } /* 8.26 fiVISION_WorkflowSurvey */ .fiviWorkflowSurvey { width: 100%; } .fivi-workflow-survey-item { margin-top: var(--gap-horizontal-150); } .fivi-workflow-survey-answers { display: flex; justify-content: space-around; margin: 10px; padding: 10px; } .fivi-workflow-survey-answers { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; } .fivi-workflow-survey-answers .icheckbox_square-blue+label:before, .fivi-workflow-survey-answers .iradio_square-blue+label:before, .fivi-workflow-survey-answers .iradio_square-blue+span+label:before { content: ""; margin: 0; width: 20px; height: 26px; border-radius: 40px; position: relative; cursor: pointer; background-color: var(--color-gray-light); transition-duration: 500ms; min-width: auto !important; } .fivi-workflow-survey-answers input[type="radio"] { appearance: auto; position: relative !important; width: auto !important; height: auto !important; } .fivi-workflow-survey-answers .iradio_square-blue+label:after { content: ""; position: relative !Important; background-color: white; cursor: pointer; left: 0; width: var(--column-spacer); height: var(--column-spacer); border-radius: 50%; border: 0.5px solid var(--border-color); transition-duration: 500ms; } .fivi-workflow-survey-answers .iradio_square-blue.checked+label:after { background-color: var(--color-primary-normal); left: 0 !important; } .fivi-workflow-survey-answers .iradio_square-blue+label:before { visibility: hidden; } .fivi-workflow-survey-question, .fiviWorkflowSurvey input { text-align: center; display: table; margin: 0 auto; } @media (max-width: 700px) { .fivi-workflow-survey-answers { flex-direction: column; } } /* 8.27 fiVISION_MoneyTextBoxV2 */ .fiviInput>input[id$="_MoneyTextBox"] { color: inherit !important; } /* 9. Page Specific */ /* 9.1 Default Page */ .default-thumbnail-container { display: flex; flex-direction: column; gap: var(--gap-vertical); width: 100%; } .page-Default-Content.page-container { margin-top: var(--gap-vertical); gap: var(--gap-vertical-200); } .page-Default-Content .header-container { gap: var(--gap-vertical); } .page-Default-Content .thumbnail { display: flex; flex-direction: row; align-items: center; text-align: center; gap: var(--gap-vertical); width: 100%; margin: 0; padding: 0; border-radius: 5px; border: 1px solid var(--border-color); box-shadow: none; position: relative; background-color: var(--color-white-light); color: var(--color-primary-normal); } .page-Default-Content .thumbnail:hover, .page-Default-Content .thumbnail:active, .page-Default-Content .thumbnail:focus { background-color: var(--color-white-dark); cursor: pointer; } .page-Default-Content .thumbnail .button-link { font-weight: 500; height: 100%; width: 100% !important; padding: var(--gap-vertical) calc(var(--gap-horizontal) * 2.5); margin: 0; text-decoration: none; color: inherit; white-space: normal; } .page-Default-Content .thumbnail>span { width: 100%; } .thumbnail-img { position: absolute; pointer-events: none; left: var(--gap-horizontal-50); padding: 5px; border-radius: 5px; } .thumbnail-img svg { stroke: var(--color-primary-normal); } .thumbnail .fas { position: absolute; pointer-events: none; right: var(--gap-horizontal-50); color: var(--color-tertiary-normal); } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .lets-get-started-container { max-width: var(--column-width-5); } .what-you-need { font-size: calc(var(--font-size) - 2px); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .default-thumbnail-container { max-width: 100%; width: 100%; flex-direction: row; flex-wrap: wrap; } .page-Default-Content .thumbnail {} } @media all and (max-device-width: 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/Initial */ .prove-start-container { display: flex; flex-direction: column; gap: var(--gap-vertical); flex-grow: 1; flex-basis: 0; padding-bottom: calc(var(--gap-vertical) * 3.5); } .page-ApplicantNewInitial { display: flex; flex-direction: column; gap: var(--gap-vertical); } .prove-start-container .fiviMultiInput { position: unset; } .prove-or-existing, .initial-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, .initial-new { flex-grow: 3; flex-basis: 0; min-width: 0; justify-content: center; align-self: stretch; gap: var(--gap-vertical-150); } .prove-new .fa-user-circle { font-size: 60px; color: var(--color-primary-normal); } .prove-new .fa-user-lock { font-size: 60px; color: var(--color-primary-normal); } .prove-new .fiviInput, .initial-new .fiviInput { max-width: 100%; width: 100%; } .prove-divider { display: flex; flex-direction: column; align-items: center; justify-content: stretch; gap: var(--gap-vertical-25); align-self: stretch; } .prove-existing, .initial-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, .initial-existing>span { width: 100%; display: flex; justify-content: center; flex-direction: row; } .prove-disclosure {} .prove-direction-buttons { border-top: 0.5px solid var(--border-color); padding: var(--gap-vertical) var(--gap-horizontal); position: absolute; left: 0; bottom: 0; width: 100vw; max-width: 100%; } #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; } #proveIndividualErrorMessage { color: red; } .prove-or-existing.prove-suppress-existing { justify-content: center; & .prove-divider, & .prove-existing { display: none; } & .prove-new { max-width: var(--column-width-6); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .prove-start-container .fiviInput, .prove-start-container .button-other { max-width: 100%; } .prove-or-existing, .initial-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-new, .prove-divider, .prove-existing, .prove-disclosure, .initial-new, .initial-existing { width: 100%; } .prove-disclosure { margin: 0; } .vertical-divider { height: 1px; width: 100%; border-top: 0.5px solid var(--border-color); } .initial-new .fiviTwoInput.fiviPhoneControl { max-width: 100%; &>input, &>select { max-width: calc(50% - calc(var(--column-spacer) / 2)) !important; } } .prove-or-existing.prove-suppress-existing { align-items: center; flex-direction: row; } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .prove-direction-buttons { /* flex-direction: column; */ } .prove-existing { margin-bottom: 5rem; } } @media all and (max-device-width: 520px), all and (max-width: 520px) { .prove-direction-buttons { flex-direction: column; } .prove-start-container { padding-bottom: calc(var(--gap-vertical) * 5); } } .page-ApplicantProveYouth #atbMail>.fiviSameAs { right: -45px !important } @media all and (max-device-width: 836px), all and (max-width: 836px) { .page-ApplicantProveYouth #atbMail>.fiviSameAs { right: 0 !important; bottom: 12.5em; position: absolute; width: 11em } .page-ApplicantProveYouth #atbMail>.fiviSameAs:has(.checked) { bottom: 14.5px } } @media all and (max-device-width: 808px), all and (max-width: 808px) { .page-ApplicantProveYouth #atbMail>.fiviSameAs { right: -5.1em !important; width: 10em } } @media all and (max-device-width: 628px), all and (max-width: 628px) { .page-ApplicantProveYouth #atbMail>.fiviSameAs { right: 0em !important; width: 15em } } @media all and (max-device-width: 485px), all and (max-width: 485px) { .page-ApplicantProveYouth #atbMail>.fiviSameAs { right: -3em !important; width: 10em; } } #pnlUSAddressMail .fiviSameAs { top: -8em } @media all and (max-device-width: 836px), all and (max-width: 836px) { #pnlUSAddressMail .fiviSameAs { top: 0; } } /* Resizing International Address inputs */ #atbHomeInt_City, #atbHomeInt_Province, #atbHomeInt_Country, #atbHomeInt_Zip, #atbMailInt_City, #atbMailInt_Province, #atbMailInt_Country, #atbMailInt_Zip { height: var(--input-height); padding-top: 12px !important; padding-bottom: 12px !important; } /* 9.3 Select Accounts */ .page-SelectAccount .fiviPanel { width: 100%; } /* 9.4 Disclosures */ .accept-disclosures-container { display: flex; flex-direction: row; align-items: flex-start; border: 1px solid var(--border-color); border-radius: 5px; padding: var(--gap-horizontal-50); width: 100%; } .accept-disclosures-container .flex-column { flex: 1; } .accept-disclosures-warning { flex-direction: column; } .disclosures-warn { font-size: inherit; } .disclosures-warn span:not([style="display:none"]) { padding-bottom: 2rem; } .disclosures-check { display: flex; flex-direction: row; align-items: flex-start; border-radius: 5px; width: 100%; } .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 .fiviCheckBox { /* width: 100%; */ max-width: 100%; position: relative; z-index: 1; } #pnlBackupWithholding .iradio_square-blue+label { position: relative; padding: var(--gap-vertical) var(--gap-horizontal); margin-bottom: 0; width: 100%; justify-content: center; height: calc(var(--input-height) + var(--gap-vertical-200)); cursor: pointer; color: var(--color-primary-normal); } #pnlBackupWithholding .iradio_square-blue+label:before { display: none; } #pnlBackupWithholding .iradio_square-blue+label:after { content: ""; left: 0; position: absolute; justify-content: center; align-items: center; width: 100%; min-width: fit-content; padding: var(--gap-vertical) var(--gap-horizontal-200); background-color: var(--background-input-color); color: var(--color-primary-normal); border: 1px solid var(--color-primary-normal); border-radius: 5px; font-size: 14px; line-height: 14px; font-weight: 500; box-shadow: none; transition-duration: 500ms; transition-property: color, background-color; z-index: -1; } #pnlBackupWithholding .iradio_square-blue+label:hover, #pnlBackupWithholding .iradio_square-blue.checked+label { color: var(--color-white-normal); } #pnlBackupWithholding .iradio_square-blue+label:hover:after, #pnlBackupWithholding .iradio_square-blue.checked+label:after { background-color: var(--color-primary-normal); box-shadow: none; text-decoration: none; left: 0; } #pnlBackupWithholding .iradio_square-blue.checked.disabled+label:after { cursor: not-allowed; } #pnlBackupWithholding .iradio_square-blue.checked.disabled+label:before { display: none; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fivi-disclosure-modal .modal-body div { flex-direction: column; justify-content: center; align-items: center; } .fivi-disclosure-modal .modal-body div input { margin-bottom: 1rem; } } /* 9.5 Funding */ #pnlFundingAmount, #pnlACHDetails, #pnlCreditCardDetails, #pnlMailDetails { width: 100%; } #pnlFundingMethods { position: relative; max-width: 100%; width: 100%; } #pnlFundingMethods .fiviPanel { /* max-width: 100%; */ } .funding-method-container { max-width: 100%; gap: var(--gap-horizontal-50); } .funding-method-container>span { max-width: 100%; /* border-radius: 5px; */ position: relative; flex: 1; } .funding-method .fiviCheckBox { width: 100%; max-width: 100%; position: relative; z-index: 1; gap: 0; } .funding-method-container .iradio_square-blue+label { position: relative; padding: 0 var(--gap-horizontal-25); margin-bottom: 0; width: 100%; justify-content: center; height: calc(var(--input-height)); cursor: pointer; text-align: center; color: var(--color-primary-normal); } .funding-method-container .iradio_square-blue+label:before { display: none; } .funding-method-container .iradio_square-blue+label:after { content: ""; left: 0; position: absolute; width: 100%; min-width: fit-content; padding: var(--gap-vertical) var(--gap-horizontal-200); background-color: var(--background-input-color); color: var(--color-primary-normal); border: 1px solid var(--color-primary-normal); border-radius: 5px; font-size: 14px; line-height: 14px; font-weight: 500; box-shadow: none; transition-duration: 500ms; transition-property: color, background-color; z-index: -1; } .funding-method-container .iradio_square-blue+label:hover, .funding-method-container .iradio_square-blue.checked+label { color: var(--color-white-normal); } .funding-method-container .iradio_square-blue+label:hover:after, .funding-method-container .iradio_square-blue.checked+label:after { background-color: var(--color-primary-normal); box-shadow: none; text-decoration: none; left: 0; } .funding-method-container .iradio_square-blue.checked.disabled+label:after { cursor: not-allowed; } .funding-method-container .iradio_square-blue.checked.disabled+label:before { display: none; } .funding-method-detail .fiviInput { width: calc(50% - var(--fiviInput-horizontal-spacing)); max-width: var(--fiviInput-width); } .funding-method-detail .fiviCCCardInfo .form-control.CCCVVClass { width: 100%; } .funding-method-detail .fiviCCCardInfo .form-control.TwoControls, .funding-method-detail .fiviCCCardInfo .fiviInput.TwoControls { width: 33% !important; } .funding-method-detail { display: flex; flex-direction: column; gap: var(--gap-vertical-50); border: 1px solid var(--border-color); border-radius: 5px; background-color: var(--background-color-alt); padding: var(--gap-vertical); width: 100%; } @media all and (max-device-width: 836px), all and (max-width: 836px) { .funding-method-detail .fiviInput { max-width: 100%; width: 100%; } .funding-method-detail .fiviCCCardInfo .form-control.TwoControls, .funding-method-detail .fiviCCCardInfo .fiviInput.TwoControls { width: 33% !important; max-width: 100%; } } /* 9.6 Pending/Approved/Denied */ .page-Approved .header-container, .page-Pending .header-container, .page-Denied .header-container { flex-direction: row; } .page-Approved .header-container .flex-column, .page-Pending .header-container .flex-column, .page-Denied .header-container .flex-column { flex: 1; } .application-info-container { text-align: right; } .app-status-container { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 1px solid var(--border-color); border-radius: 5px; padding: var(--gap-vertical); background-color: var(--background-color-alt); } .app-status-img svg { stroke: var(--color-primary-normal); } .app-status-container .page-text { letter-spacing: 1px; font-weight: 300; } .app-status-container .flex-row .page-text { flex: 1; } .app-status-container .fiviPanel { width: 100%; } .app-status-account-container { display: flex; flex-direction: column; gap: var(--gap-vertical); width: 100%; } .app-status-account-container .fiviProdServiceSelected { background-color: var(--background-color-page); padding: var(--gap-vertical); border-radius: 5px; border: 1px solid var(--border-color); } @media all and (max-device-width: 656px), all and (max-width: 656px) { .page-Approved .header-container, .page-Pending .header-container, .page-Denied .header-container { flex-direction: column-reverse; } .application-info-container { width: 100%; } } /* 9.7 Decline Disclosures */ .page-DeclineDisclosures .h1 { text-align: center; } /* 9.8 One Time Passcode */ .page-ApplicantExistingOTP .section-container { height: 100%; } [id$="OneTimePasscode"] .fiviPanelContainer { width: 100%; height: 100%; display: flex; flex-direction: column; gap: var(--gap-horizontal); } [id$="OneTimePasscode"] .fiviPanelContainer div:has([id*="btnResendCode"]), [id$="OneTimePasscode"].fiviPanelContainer div:has([id*="btnBack"]) { width: 100%; display: flex; justify-content: flex-end; align-items: center; margin-top: 5rem; } [id$="OneTimePasscode"] .button-link { text-align: center; } .fiviOTPButtonGroup { width: 100%; display: flex; justify-content: flex-end; align-items: center; margin-top: 5rem; gap: var(--gap-horizontal); } @media all and (max-device-width: 656px), all and (max-width: 656px) { [id$="OneTimePasscode"] .fiviPanelContainer div:has([id*="btnResendCode"]), [id$="OneTimePasscode"] .fiviPanelContainer div:has([id*="btnBack"]) { width: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: center; } } /* 9.9 Applicant Additional Information */ .additional-questions label { height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); bottom: var(--input-focusLabel-offset); color: var(--font-color-label-focus); left: 0; text-transform: none; padding-bottom: 1rem; } .additional-questions select, .additional-questions input { margin-top: calc(var(--input-marginTop-forLabelFocusSpace) + 1rem); color: var(--font-color-input); } /* 10. ControlID Specific */ [id$="tbCamera"] { display: none; /* max-width: var(--fiviInput-width); */ } [id$="tbCamera"] #lblLicenseScan { display: block; left: 0; transform: none; margin: 0 auto; width: fit-content !important; max-width: 100%; text-align: center; height: auto; } @media all and (max-device-width: 834px), all and (max-width: 834px) { [id$="tbCamera"] { display: block; max-width: var(--column-width-full); } } #pnlBackupWithholding { background-color: var(--background-color-alt); padding: var(--gap-vertical) var(--gap-horizontal); border: 1px solid var(--border-color); border-radius: 5px; } #LoanStatus { display: flex; flex-direction: column; gap: var(--gap-horizontal); width: 100%; padding: var(--gap-horizontal); background-color: var(--color-white-light); border-radius: var(--border-radius); } #UploadWrapper .flex-column { align-items: center; justify-content: center; gap: var(--gap-vertical-25); } #UploadWrapper h3, #MoreUploadOptionsModalEmailSent h3 { text-align: center; padding: var(--gap-vertical-50); color: var(--color-gray-normal); } #UploadWrapper .text-muted, #MoreUploadOptionsModalEmailSent .text-muted { font-size: var(--font-size); color: var(--color-black-light); line-height: var(--font-lineheight); } #UploadWrapper .modal-body-insideItem { align-items: stretch; } #UploadWrapper .styledInput { font-size: var(--font-size-input); color: var(--color-gray-normal); width: 100%; } #cbColorModeToggle .icheckbox_square-blue+label:before { content: ""; background-color: var(--color-primary-light); } #cbColorModeToggle .icheckbox_square-blue+label:after { content: "\f0eb"; font-family: "Font Awesome 5 Free"; display: flex; justify-content: center; align-items: center; background-color: var(--color-primary-dark); border-color: var(--color-primary-light); } #cbColorModeToggle .icheckbox_square-blue.checked+label:before { background-color: var(--color-secondary-light); } #cbColorModeToggle .icheckbox_square-blue.checked+label:after { content: "\f186"; font-family: "Font Awesome 5 Free"; display: flex; justify-content: center; align-items: center; color: var(--color-white-normal); background-color: var(--color-secondary-dark); border-color: var(--color-secondary-light); } #__asptrace, #__asptrace>span { display: block; max-width: 100vw; overflow-x: scroll; } #pnlIndividualLists { display: none; } #pnlIndividualLists:has(.fiviPanel) { display: block; } /* -----------Account Ownership Maintenance Workflow Styling ----------- */ /* Journey bar */ .journey-bar-current .journey-bar-group.current-group:has(> img[alt="Start_OM"]):after, .journey-bar-current .journey-bar-group.current-group:has(> img[alt="Accounts"]):after, .journey-bar-current .journey-bar-group.current-group:has(> img[alt="add_individuals"]):after, .journey-bar-current .journey-bar-group.current-group:has(> img[alt="Submit"]):after { content: "/4" !important; } .journey-bar-current .journey-bar-group.current-group:has(> img[alt="Start_OM"]):before { content: "1"; } .journey-bar-current .journey-bar-group.current-group:has(> img[alt="Accounts"]):before { content: "2"; } .journey-bar-current .journey-bar-group.current-group:has(> img[alt="add_individuals"]):before { content: "3"; } .journey-bar-current .journey-bar-group.current-group:has(> img[alt="Submit"]):before { content: "4"; } .journey-bar .journey-bar-group:has(img[alt="Start_OM"]):before { content: "1."; } .journey-bar .journey-bar-group:has(img[alt="Accounts"]):before { content: "2."; } .journey-bar .journey-bar-group:has(img[alt="add_individuals"]):before { content: "3."; } .journey-bar .journey-bar-group:has(img[alt="Submit"]):before { content: "4."; } .journey-bar .journey-bar-group:has(img[alt="Start_OM"]):after { content: "Verify that your information is correct"; } .journey-bar .journey-bar-group:has(img[alt="Accounts"]):after { content: "Choose your accounts"; } .journey-bar .journey-bar-group:has(img[alt="add_individuals"]):after { content: "Provide information on the Joint Owners and/or Beneficiaries"; } .journey-bar .journey-bar-group:has(img[alt="Submit"]):after { content: "Let's make sure we've dotted our i's and crossed our t's"; } /* ------- */ /* Choose Accounts Page */ #AccountSelectionCheckboxList>.fiviInput { padding: 1em; } .fivi-existing-owner-container { padding: 1em; } .ExistingAccountsLevelTwo { font-weight: 700; padding-bottom: 0.5em; } .cbButtonGroup>span { padding: 1em; } .fiviAccountSelection label { white-space: nowrap; } @media all and (max-device-width: 600px), all and (max-width: 600px) { .fiviAccountSelection label { white-space:normal; } } /* icheck styling */ /* Checked */ .icheckbox_square-blue.checked+label:after, .iradio_square-blue.checked+label:after, .iradio_square-blue.checked+span+label:after { left: 28px; } /* Update Owners */ .fiviExistingAccountOwnerList>.fivi-existing-owner-container>span>.fiVISIONInlineLabel { display: none; } /* Matches h3 header */ .fivi-existing-owner-container>[id*="existingJointOwners_Individual"]>.ListHeaderLabel { 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; } .fivi-existing-owner-container>.ExistingAccountsLevelTwo { padding: 1.3em 0; } .fivi-existing-owner-container>.ExistingAccountsLevelThree { padding-bottom: 0.7em; font-style: italic; } .ExistingAccountsLevelFour { padding: 0.6em 1em; font-style: normal; } .ExistingAccountsLevelFour>label, .IndividualProductRelationshipCSS>div>span>label { display: flex; align-items: center; justify-content: center; gap: var(--gap-horizontal-50); max-width: fit-content; flex-direction: row; } /* Benes & JOs */ .IndividualProductRelationshipCSS>div>label { padding: 1em 0; } .IndividualProductRelationshipCSS {} .IndividualProductRelationshipCSS>div>label { 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; } .fiviAccountSelection .fiviCheckBox { display: block; } /* W-8BEN Page */ #cbFTINNotReq { margin-top: 1.5em; } #cbFTINNotReq .DefaultTooltipClass, #cbTaxTreatyBenefits .DefaultTooltipClass { left: 14.5em; bottom: -12px; } #tbW8BENCitizenshipCtry>.defaulttooltipclass, #tbW8BENForeignTIN .defaulttooltipclass, #tbW8BENRefNumbers .defaulttooltipclass { right: 6px; } #atbForeignResAddr .defaulttooltipclass, #atbForeignMailAddr .defaulttooltipclass { left: 90%; top: 1.6em; } #atbForeignResAddr, #atbForeignMailAddr { margin-top: 1em; } #atbForeignResAddr_pnlAddress label { width: 80%; } #atbForeignResAddr_pnlAddress label.FocusLabelClass { bottom: 4.5em; } #tbW8BENAddress label { width: 17em; } @media all and (max-device-width: 808px), all and (max-width: 808px) { #tbW8BENAddress label { width: 15em } } /* /* Business Type */ .page-BusinessType .ineligible-business-list { font-size: 14px; padding-left: var(--gap-horizontal-150); } /* Expected Activity */ .page-ExpectedActivity .section-container.flex-gap-150 { gap: var(--gap-vertical-150) var(--gap-horizontal); } /* Beneficial Ownership */ .fiviBeneOwnership { max-width: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--gap-horizontal); & table { text-align: center; border: 1px solid var(--border-color); border-radius: 5px; border-collapse: separate; } & tbody { border: none; } & tr { border: none; border-radius: 5px; &:first-of-type { font-weight: 700; & > td { border-top: none; } } } & td { border: none; border-radius: 5px; &:has(> .iradio_square-blue) { text-align: center !important; } } & .iradio_square-blue { height: var(--column-spacer); width: calc(var(--column-spacer) * 2); position: relative; border-radius: 0; background-color: transparent; margin-left: calc(var(--column-spacer) * -1); & > input, & > ins { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; } &:before { content: ""; display: block; margin: 0; min-width: calc(var(--column-spacer) * 2); border-radius: 40px; height: var(--column-spacer); position: relative; cursor: pointer; background-color: var(--color-gray-light); transition-duration: 500ms; max-width: calc(var(--column-spacer) * 2); } &:after { content: ""; position: absolute; background-color: var(--color-black-light); cursor: pointer; left: 0; top: 0; width: var(--column-spacer); height: var(--column-spacer); border-radius: 50%; border: 0.5px solid var(--border-color); transition-duration: 500ms; } } & .iradio_square-blue.checked { &:before { background-color: var(--color-primary-light); } &:after { background-color: var(--color-primary-normal); border-color: var(--color-primary-light); left: var(--column-spacer); } } } /* Override default form-control styling */ .page-W-8BEN .form-control { flex: 0 0 auto; } #pnlW8BENPart2 .FocusLabelClass { padding-top: 0.5em; } #pnlW8BENPart2 .page-text { line-height: 2 !important; } #tbW8BENPart2CitizenshipCtry, #tbW8BENPart2ArticleParagraph { width: 15em; } #tbW8BENPart2ArticleParagraph { width: 14.5em } #tbW8BENPart2WitholdingPercent { width: 9em } #tbW8BENPart2WitholdingPercent .focuslabelclass { white-space: nowrap; } #tbW8BENPart2IncomeType { width: 15em } #tbW8BENPart2ExplainConditions { width: 18em } /* 11. 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>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%; } .AdminConsole .fiviAccountSelection .fiviCheckBox { padding: 1em 0; } .AdminContent .progress-container, .AdminContent .progress-container-main { display: none; } .AdminContent .layout-container>span { justify-content: center; align-items: center; &>.page-container { align-self: unset; margin-top: var(--gap-vertical-150); } } .AdminContent .fiviDisclosureList { margin-top: 0; } .fiviPersonSearch { width: 100%; max-width: 100%; & div:has(> .form-control) { display: flex; gap: var(--gap-vertical-25); flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-75); width: 100%; max-width: 100%; & br { display: none; } & span:has(> b) { display: none; } & .form-control { min-height: var(--input-height); width: var(--column-width-3) !important; max-width: var(--column-width-3) !important; margin-top: 0; display: block; } & div:has(> .fiviCenterBtn) { width: 100%; } & .form-inline { width: 100%; display: flex; flex-direction: row; padding-bottom: var(--gap-vertical-75); gap: 0px; } } & td:has(> .iradio_square-blue) { padding: 8px 0; height: calc(var(--column-spacer) + 16px); width: calc(var(--column-spacer) * 2); } & .iradio_square-blue { height: var(--column-spacer); width: calc(var(--column-spacer) * 2); position: relative; border-radius: 0; background-color: transparent; & > input, & > ins { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; } &:before { content: ""; display: block; margin: 0; min-width: calc(var(--column-spacer) * 2); border-radius: 40px; height: var(--column-spacer); position: relative; cursor: pointer; background-color: var(--color-gray-light); transition-duration: 500ms; max-width: calc(var(--column-spacer) * 2); } &:after { content: ""; position: absolute; background-color: var(--color-black-light); cursor: pointer; left: 0; top: 0; width: var(--column-spacer); height: var(--column-spacer); border-radius: 50%; border: 0.5px solid var(--border-color); transition-duration: 500ms; } } & .iradio_square-blue.checked { &:before { background-color: var(--color-primary-light); } &:after { background-color: var(--color-primary-normal); border-color: var(--color-primary-light); left: var(--column-spacer); } } & td > span { display: flex; width: 100%; height: 24px; align-items: center; font-size: 14px; } }