/* Table of Contents 1. Variables 1.1 Mobile Variables 2. General Elements & Classes 2.1 General Elements 2.2 iCheck 2.3 Flex Helper Classes 2.4 Column Helper Classes 2.5 General Helper Classes 3. Page Structure 3.1 Page Structure 3.2 Header Styling 3.3 Main Styling 3.4 Footer Styling 4. Page General Containers 5. Buttons 5.1 Button Containers 6. Accordions 7. Inputs and Labels 7.1 Labels 7.2 Inputs 7.3 Fivi Input Containers 7.4 Fivi Checkbox/Radio Buttons 7.5 Validator 7.6 Tool Tips 7.7 Seperators 7.8 Loader 7.9 Popover 8. fiVISION Controls 8.1 fiVISION_ErrorSummary 8.2 fiVISION_Panel 8.3 fiVISION_ProductsAndServicesV2 8.4 fiVISION_AddressTextBoxV2 8.5 fiVISION_PhoneTextBoxV2 8.6 fiVISION_IDTypeV2 8.7 fiVISION_HousingDurationHistory 8.8 fiVISION_EmploymentHistory 8.9 fiVISION_IndividualIncome 8.10 fiVISION_IndividualDetails 8.11 fiVISION_ProductsAndServicesSelected 8.12 fiVISION_ProductRelationships 8.13 fiVISION_DocumentListV2 8.14 fiVISION_DisclosuresList 8.15 fiVISION_IDAuthenticationQuestions 8.16 fiVISION_ProductFundingV2 8.17 fiVISION_ACH 8.18 fiVISION_CreditCardV2 8.19 fiVISION_ApplicantWithdraw 8.20 fiVISION_ProgressBar 8.21 fiVISON_IndividualHandler 8.22 Status Center Login 8.23 Status Center Summary 8.24 v3TextBox 8.25 fiVISION_FinicityFundingAccountVerification 8.26 fiVISION_OneTimePasscode 8.27 fiVISION_WorkflowSurvey 8.28 fiVISION_ProveIndividualLookup 8.29 fiVISION_ShoppingCart 9. Page Specific 9.1 Default Page 9.2 Status Center - Default 9.3 Status Center - Status Center 9.4 Funding Method 9.5 eSign Agreement 9.6 Disclosure 9.7 Select Category 9.8 Select Product 9.9 Approved 9.10 Required Documents 9.11 Application Summary 9.12 Pending 9.13 Eligibility 10. ControlID Specific 11. Admin Console Mobile Reference Media Queries for stepping down Assumes column width 66px and column spacer 24px @media all and (max-device-width: 1106px), all and (max-width: 1106px) { } @media all and (max-device-width: 836px), all and (max-width: 836px) { } @media all and (max-device-width: 656px), all and (max-width: 656px) { } @media all and (max-device-width: 452px), all and (max-width: 452px) { } */ /* 1. Variables */ :root { /*colors*/ /*gray scale*/ --color-white-light: #fff; --color-white-normal: #fff; --color-white-dark: #fff; --color-gray-light: #f8f8f8; --color-gray-normal: #f6f9fc; --color-gray-dark: #d6d5d4; --color-black-light: #0b0731; --color-black-normal: #000; --color-black-dark: #000; /*client colors*/ --color-primary: #0a1724; --color-secondary: #1923dc; --color-secondary-alt1: #258bff; --color-secondary-alt2: #8bd1ff; --color-secondary-alt3: #59d2fe; --color-accent-onahau: #cff1f9; --color-accent-hawkes-blue: #d7e7ff; --color-accent-alt2: #fbf5fe; --color-accent-alt3: #e6eceb; /*font family*/ --font-family-pri: "Inter", sans-serif; --font-family-alt: "Inter", sans-serif; /*fonts*/ /*default font*/ --font-size: 14px; --font-lineheight: 24px; --font-color: var(--color-primary); --font-weight: 300; --font-family: var(--font-family-pri); /*input font*/ --font-size-input: 16px; --font-lineheight-input: 22px; --font-color-input: var(--font-color); --font-weight-input: 500; --font-family-input: var(--font-family); /*label font*/ --font-size-label: 20px; --font-lineheight-label: var(--font-lineheight); --font-color-label: var(--font-color); --font-weight-label: 300; --font-family-label: var(--font-family-alt); /*h1 font*/ --font-size-h1: 30px; --font-lineheight-h1: 42px; --font-color-h1: var(--color-primary); --font-weight-h1: 700; --font-family-h1: var(--font-family-alt); /*h2 font*/ --font-size-h2: 24px; --font-lineheight-h2: 26px; --font-color-h2: var(--font-color-h1); --font-weight-h2: 600; --font-family-h2: var(--font-family-input); /*h3 font*/ --font-size-h3: 20px; --font-lineheight-h3: 22px; --font-color-h3: var(--color-primary); --font-weight-h3: 400; --font-family-h3: var(--font-family); /*h4 font*/ --font-size-h4: 16px; --font-lineheight-h4: 18px; --font-color-h4: var(--font-color-h1); --font-weight-h4: 500; --font-family-h4: var(--font-family); /*page structure*/ --column-width: 66px; --column-spacer: 24px; --column-width-half: calc(var(--column-width) / 2); /*33px*/ --column-width-2: calc(calc(var(--column-width) * 2) + var(--column-spacer)); /*156px*/ --column-width-3: calc( calc(var(--column-width) * 3) + calc(var(--column-spacer) * 2) ); /*246px*/ --column-width-4: calc( calc(var(--column-width) * 4) + calc(var(--column-spacer) * 3) ); /*336px*/ --column-width-5: calc( calc(var(--column-width) * 5) + calc(var(--column-spacer) * 4) ); /*426px*/ --column-width-6: calc( calc(var(--column-width) * 6) + calc(var(--column-spacer) * 5) ); /*516px*/ --column-width-7: calc( calc(var(--column-width) * 7) + calc(var(--column-spacer) * 6) ); /*606px*/ --column-width-8: calc( calc(var(--column-width) * 8) + calc(var(--column-spacer) * 7) ); /*696px*/ --column-width-9: calc( calc(var(--column-width) * 9) + calc(var(--column-spacer) * 8) ); /*786px*/ --column-width-10: calc( calc(var(--column-width) * 10) + calc(var(--column-spacer) * 9) ); /*876px*/ --column-width-11: calc( calc(var(--column-width) * 11) + calc(var(--column-spacer) * 10) ); /*966px*/ --column-width-12: calc( calc(var(--column-width) * 12) + calc(var(--column-spacer) * 11) ); /*1056px*/ --column-width-full: 100%; /*flex properties*/ --gap-vertical: var(--column-spacer); --gap-vertical-25: calc(var(--gap-vertical) * 0.25); --gap-vertical-50: calc(var(--gap-vertical) * 0.5); --gap-vertical-75: calc(var(--gap-vertical) * 0.75); --gap-vertical-150: calc(var(--gap-vertical) * 1.5); --gap-vertical-200: calc(var(--gap-vertical) * 2); --gap-horizontal: var(--column-spacer); --gap-horizontal-25: calc(var(--gap-horizontal) * 0.25); --gap-horizontal-50: calc(var(--gap-horizontal) * 0.5); --gap-horizontal-75: calc(var(--gap-horizontal) * 0.75); --gap-horizontal-150: calc(var(--gap-horizontal) * 1.5); --gap-horizontal-200: calc(var(--gap-horizontal) * 2); /*input and label structure*/ --fiviInput-width: var(--column-width-6); --fiviInput-width-half: calc( calc(var(--fiviInput-width) - var(--column-spacer)) / 2 ); --fiviInput-width-double: calc( calc(var(--fiviInput-width) * 2) + var(--column-spacer) ); /*the below two should add to the above, sometimes 3+2 or 2+2 or 2+1, main is always >= alt*/ --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-3); --input-height: 60px; --input-focusLabel-fontSize: 12px; --input-focusLabel-offset: calc( var(--input-height) - calc(var(--input-focusLabel-fontSize) / 2) ); --input-marginTop-forLabelFocusSpace: 0; /* how much space between each input */ --fiviInput-vertical-spacing: var(--gap-vertical-150); --fiviInput-horizontal-spacing: var(--gap-horizontal); } /* 1.1 Mobile Variables We are going to do a step down approach. We need to account for the head/main/foot left/right padding of column width (*2 as there are left and right). add a couple pixels for good measure. */ @media all and (max-device-width: 1106px), all and (max-width: 1106px) { /* @1056px+96px+2px = 1106px -12 columns -> 8 columns -fiviInput-width goes to 4 columns -should accomidate 2 inputs per row */ :root { --font-size-input: 18px; --font-size-label: 18px; --font-lineheight-label: var(--font-lineheight); --column-width-11: 100%; --column-width-12: 100%; --column-width-10: 100%; --fiviInput-width: var(--column-width-4); --fiviInput-width-partial-main: var(--column-width-2); --fiviInput-width-partial-alt: var(--column-width-2); --fiviInput-width-half: var(--column-width-2); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { /* @786px+48px+2px = 836px -9 columns -> 6 columns -fiviInput-width goes to 3 columns -should accomidate 2 inputs per row */ :root { --font-size: 14px; --font-size-h1: 30px; --font-lineheight-h1: 32px; --font-size-h2: 22px; --font-lineheight-h2: 24px; --font-size-h3: 18px; --font-lineheight-h3: 20px; --column-width-8: 100%; --column-width-9: 100%; --fiviInput-width: var(--column-width-6); --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-3); --fiviInput-width-half: calc( calc(var(--fiviInput-width) - var(--column-spacer)) / 2 ); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { /* @606px+48+2px = 656px -7 columns -> 4 columns -fiviInput-width goes to 4 columns -accomidate 1 input, with an exception or two, inputs go 1 per row */ :root { --column-width-6: 100%; --column-width-7: 100%; --fiviInput-width: var(--column-width-5); --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-2); --fiviInput-width-half: calc( calc(var(--fiviInput-width) - var(--column-spacer)) / 2 ); } } @media (max-device-width: 452px), (max-width: 452px) { /* @426px+24px+2px = 452px - any column width > 2 goes to 100% */ :root { /* --column-width-3: 100%; */ --column-width-4: 100%; --column-width-5: 100%; --fiviInput-width-half: calc(50% - calc(var(--column-spacer) / 2)); } } /* 2. General Elements & Classes */ /* 2.1 General Elements */ html, body { font-size: var(--font-size); line-height: var(--font-lineheight); color: var(--font-color); font-weight: var(--font-weight); font-family: var(--font-family); width: 100%; height: 100%; margin: 0px; padding: 0px; overflow-x: hidden; } h1, h2, h3, h4, .h1, .h2, .h3, .h4, p, label, input, select, textarea, form { margin: 0; margin-block: 0; padding: 0; padding-block: 0; width: 100%; } b { font-weight: 500; } h1, .h1 { font-size: var(--font-size-h1); line-height: var(--font-lineheight-h1); color: var(--font-color-h1); font-weight: var(--font-weight-h1); font-family: var(--font-family-h1); text-align: left; } h2, .h2 { font-size: var(--font-size-h2); line-height: var(--font-lineheight-h2); color: var(--font-color-h2); font-weight: var(--font-weight-h2); font-family: var(--font-family-h2); text-align: left; } h3, .h3 { font-size: var(--font-size-h3); line-height: var(--font-lineheight-h3); color: var(--font-color-h3); font-weight: var(--font-weight-h3); font-family: var(--font-family-h3); text-align: left; /* text-transform: uppercase; */ } h4, .h4 { font-size: var(--font-size-h4); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: var(--font-weight-h4); font-family: var(--font-family-h4); text-align: left; } legend { display: none; } a { color: var(--color-primary); text-decoration: underline; } a:visited { color: var(--color-primary); } a:hover { text-decoration: underline; color: var(--color-primary); } 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-column.flex-align-horizontal-center { align-items: center; } .flex-row.flex-space-between { justify-content: space-between; } .flex-column.flex-space-between { align-items: space-between; } /* gap is almost always going to govern the vertical, horizontal should rarely be modified, if ever. If you need to, add/modify a custom class. */ .flex-gap-25 { gap: var(--gap-vertical-25) var(--gap-horizontal) !important; } .flex-gap-50 { gap: var(--gap-vertical-50) var(--gap-horizontal) !important; } .flex-gap-75 { gap: var(--gap-vertical-75) var(--gap-horizontal) !important; } .flex-gap-100 { gap: var(--gap-vertical) var(--gap-horizontal) !important; } .flex-gap-150 { gap: var(--gap-vertical-150) var(--gap-horizontal) !important; } .flex-gap-200 { gap: var(--gap-vertical-200) var(--gap-horizontal) !important; } /* 2.4 Column Helper Classes */ .column-width-fiviInput { max-width: var(--fiviInput-width); width: 100vw; } .column-width-1 { max-width: var(--column-width); width: 100vw; } .column-width-2 { max-width: var(--column-width-2); width: 100vw; } .column-width-3 { max-width: var(--column-width-3); width: 100vw; } .column-width-4 { max-width: var(--column-width-4); width: 100vw; } .column-width-5 { max-width: var(--column-width-5); width: 100vw; } .column-width-6 { max-width: var(--column-width-6); width: 100vw; } .column-width-7 { max-width: var(--column-width-7); width: 100vw; } .column-width-8 { max-width: var(--column-width-8); width: 100vw; } .column-width-9 { max-width: var(--column-width-9); width: 100vw; } .column-width-10 { max-width: var(--column-width-10); width: 100vw; } .column-width-11 { max-width: var(--column-width-11); width: 100vw; } .column-width-12 { max-width: var(--column-width-12); width: 100vw; } .column-width-full { max-width: 100%; width: 100vw; } /* 2.5 General Helper Classes */ .page-text { font-size: calc(var(--font-size) + 2px); line-height: var(--font-lineheight); font-weight: 300; color: var(--font-color); width: 100%; } .page-text-small { font-size: calc(var(--font-size) - 2px); line-height: var(--font-lineheight); font-weight: var(--font-weight); color: var(--font-color); width: 100%; } .page-text-large { /* font-size: calc(var(--font-size) + 2px); line-height: calc(var(--font-lineheight) + 3px); width: 100%; */ font-size: calc(var(--font-size) + 2px); line-height: var(--font-lineheight); font-weight: var(--font-weight); color: var(--font-color); width: 100%; } .no-wrap { white-space: nowrap; text-wrap: nowrap; width: fit-content; } .spacer-vertical { /* no height is required here, gap should handle it, will double the space between the previous and next elements */ width: 100%; } .fiviHide { display: none !important; } .fi-name > i { padding-right: 1px; margin-left: -2px; } /* 3. Page Structure */ /* 3.1 Page Structure */ .layout { background-color: var(--color-accent-hawkes-blue); width: 100%; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } header, main, footer { width: 100%; display: flex; margin: 0; padding: var(--gap-vertical) var(--gap-horizontal); text-align: left; } header { box-shadow: none; background-color: var(--color-white-dark); padding-top: 0; padding-bottom: 0; } main { flex-grow: 1; margin-bottom: auto; align-items: flex-start; height: 100%; flex-direction: column; padding: 0; } footer { background-color: white; padding-left: 0; padding-right: 0; } header > .layout-container, main > .layout-container, footer > .layout-container { max-width: var(--column-width-12); width: 100%; margin: 0 auto; min-height: 62px; } @media all and (max-device-width: 452px), all and (max-width: 452px) { .layout { gap: 0; } header, main, footer { padding: var(--gap-vertical-50) var(--gap-horizontal-50); } header > .layout-container { min-height: 50px; /* flex-direction: column; */ justify-content: center; } } /* 3.2 Header Styling */ header { /* border-bottom: 2px solid var(--color-secondary-alt2); */ z-index: unset; } header .layout-container { /* max-height: 135px; */ /* height: 135px; */ margin-bottom: 1rem; /* overflow: hidden; */ align-content: center; } .header-logo { width: 300px; /* position: absolute; */ } @media all and (max-device-width: 836px), all and (max-width: 836px) { header > .layout-container { /* flex-direction: column; */ justify-content: center; gap: var(--gap-horizontal-50); padding-top: 2em; } } @media all and (max-device-width: 723px), all and (max-width: 723px) { .header-logo { width: 200px; justify-content: center; } } .bold { font-weight: 600; } .footer-bottom-links a { text-decoration: none; } .line { padding: 0px 6px 0 6px; } /* 3.3 Main Styling */ main > .layout-container { flex-grow: 1; height: 100%; padding: var(--gap-vertical-150) var(--column-spacer) var(--gap-vertical-75) var(--column-spacer); max-width: calc(var(--column-width-12) + calc(var(--column-spacer) * 2)); background-color: var(--color-white-normal); /* outline: 1px solid var(--color-secondary-alt2); */ margin-top: 5em; margin-bottom: 5em; border-radius: 10px; } main > .layout-container > span { /* this is span that start the fivision_PageContent */ display: flex; width: 100%; height: 100%; flex-direction: column; } main .logo-container, main .app-container { width: fit-content; align-self: center; align-items: center; gap: var(--gap-horizontal-75); } main .logo-app-container { padding: var(--gap-vertical-200) 0 0 0; max-width: calc(var(--column-width-12) + calc(var(--column-spacer) * 2)); width: 100%; margin: 0 auto; background-color: white; /* padding-bottom: var(--gap-vertical-75); */ } main .logo-container img { height: 25px; } main .logo-container img.footer-twit-logo { height: 20px; } main .logo-app-container img.footer-in-logo { height: 28px; } main .app-container img { height: 40px; } main .app-container img.footer-itunes-logo { height: 44px; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { main > .layout-container { padding: var(--gap-vertical-150) calc(var(--column-spacer) / 2); max-width: calc(var(--column-width-8) + var(--column-spacer)); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { main > .layout-container { max-width: calc(var(--column-width-6) + var(--column-spacer)); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { main > .layout-container { max-width: calc(var(--column-width-5) + var(--column-spacer)); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { } /* 3.4 Footer Styling */ footer { font-size: 14px; line-height: 24px; font-weight: 300; padding-bottom: 0; padding-top: 0; } footer > .layout-container { font-size: var(--font-size); max-width: 100%; width: 100%; gap: 0; background: var(--color-accent-alt2); } footer > .layout-container > div { display: flex; align-items: center; } footer .primary-footer { background-color: var(--color-primary); color: var(--color-white-normal); padding-top: calc(var(--gap-vertical) * 3); align-items: center; justify-content: center; } footer .primary-footer .footer-item { width: fit-content; max-width: var(--column-width-3); } footer .primary-footer .footer-item:nth-of-type(1) { width: var(--column-width-4); max-width: var(--column-width-4); } footer .primary-footer .footer-header, footer .primary-footer a { color: var(--color-white-normal); text-wrap: nowrap; word-wrap: none; } footer .footer-lower { gap: 0; margin-bottom: calc(var(--gap-horizontal-200) * 2); } footer .footer-divider { flex-wrap: nowrap; align-items: center; padding: 0 2em; } footer .footer-divider > .footer-line { width: 100%; height: 2px; background-color: var(--color-accent-alt); } footer .footer-divider > img { height: 125px; } footer .footer-lower-content { gap: var(--gap-vertical-50); font-size: 12px; padding: 0 2em; } footer .footer-ncua-ehl { align-items: center; } footer .footer-ncua-ehl > img { height: 40px; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .footer-upper { width: var(--column-width-8); padding: 0 2em; } footer { padding: 0; } } @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) { } .app-container-reverse { display: flex; flex-direction: row-reverse; } .logo-app-container > .flex-row { justify-content: center; } /* 4. Page General Containers */ .page-container, #IndividualHandler01 { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-150); width: 100%; } .header-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-50); max-width: var(--column-width-12); width: 100%; /* text-align: center; */ } .section-container { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-vertical); max-width: var(--column-width-12); width: 100%; } .section-header { display: flex; align-items: center; gap: var(--gap-vertical-50); font-size: 22px; /* text-transform: uppercase; */ font-weight: 500; letter-spacing: 1px; text-wrap: nowrap; white-space: nowrap; color: var(--color-primary); border-bottom: 2px solid var(--color-accent-hawkes-blue); padding: 8px; } .section-header:after { /* content: ""; width: 100%; height: 1px; background-color: var(--color-accent-hawkes-blue); */ } .page-navigation-container { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; width: var(--column-width-12); margin-top: var(--gap-vertical-200); } .page-navigation-container .button-link { text-transform: none; } .navigation-forward-container { display: flex; flex-direction: row; align-items: center; gap: var(--gap-horizontal); } .navigation-other-container { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } @media all and (max-device-width: 656px), all and (max-width: 656px) { .page-navigation-container { flex-direction: column; align-items: center; gap: var(--gap-vertical); } .navigation-forward-container { flex-direction: column-reverse; } .navigation-other-container { align-items: center; gap: var(--gap-vertical); } .navigation-other-container .button-link { text-align: center; } } /* 5. Buttons */ .button-primary, .fiviDocumentList #email-submit-btn, .V3StatusCenterLogin .DefaultNextButton { display: inline-flex !important; justify-content: center; align-items: center; min-width: var(--column-width-2); width: fit-content !important; /* height: calc(var(--gap-vertical-200) + 10px); */ height: 46.8px; margin: 0; padding: 0 20px; color: white; font-size: 16px; line-height: 16px; font-weight: 500; background-color: var(--color-primary); border: 2px solid var(--color-primary); border-radius: 3px; text-transform: uppercase; text-decoration: none; } .button-primary:visited { color: white; } .button-primary:hover:not(:disabled), .button-primary:active:not(:disabled), .button-primary:focus:not(:disabled), .fiviDocumentList #email-submit-btn:hover:not(:disabled), .fiviDocumentList #email-submit-btn:active:not(:disabled), .fiviDocumentList #email-submit-btn:focus:not(:disabled), .V3StatusCenterLogin .DefaultNextButton:hover:not(:disabled), .V3StatusCenterLogin .DefaultNextButton:active:not(:disabled), .V3StatusCenterLogin .DefaultNextButton:hover:not(:disabled) { background-color: transparent; color: var(--color-primary); font-weight: 600; box-shadow: none; text-decoration: none; } .button-primary:disabled, .fiviDocumentList #email-submit-btn:disabled { opacity: 0.5; } .button-other, .MinorButton, .fiviAddAnotherButton > a, .fiviDocumentList .modal-footer > button, .V3SummaryButtons.active, .V3SummaryControl .fiviDocumentList .fiviFileUpload + .btn-default, .V3SummaryControl .btn-primary, .fiviDocumentList .btn-default, .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] label { display: inline-flex; justify-content: center; align-items: center; max-width: var(--fiviInput-width); min-width: var(--column-width-2); width: fit-content !important; height: var(--gap-vertical-150); line-height: calc(var(--gap-vertical-150) - 4px); margin: 0; padding: 0 10px; color: var(--color-primary); font-size: 14px; font-weight: 600; background-color: transparent; border: 2px solid var(--color-primary); border-radius: 5px; box-shadow: none; text-transform: lowercase; text-decoration: none; text-align: center; &:hover:not(:disabled), &:active:not(:disabled), &:focus:not(:disabled) { background-color: var(--color-primary); color: white; border-color: var(--color-primary); font-weight: 600; box-shadow: none; text-decoration: none; } &:disabled { opacity: 0.5; } } .button-link, .button-link-alt, .V3StatusCenterLogin .btn-link, .V3SummaryControl .btn-link, .V3SummaryControl .LinkClass, .fiviRemoveBtn:before { /* min-width: var(--column-width-2); */ text-align: left; background-color: transparent; border: none; font-size: 16px; line-height: 18px; font-weight: 600; color: var(--color-primary); text-transform: uppercase; width: fit-content !important; padding: 0; text-decoration: underline; } .button-link-alt { text-transform: uppercase; font-weight: 600; } .button-link:hover:not(:disabled), .button-link:active:not(:disabled), .button-link:focus:not(:disabled), .button-link-alt:hover:not(:disabled), .button-link-alt:active:not(:disabled), .button-link-alt:focus:not(:disabled), .V3StatusCenterLogin .btn-link:hover:not(:disabled), .V3StatusCenterLogin .btn-link:active:not(:disabled), .V3StatusCenterLogin .btn-link:focus:not(:disabled), .V3SummaryControl .btn-link:hover:not(:disabled), .V3SummaryControl .btn-link:active:not(:disabled), .V3SummaryControl .btn-link:focus:not(:disabled), .V3SummaryControl .LinkClass:hover:not(:disabled), .V3SummaryControl .LinkClass:active:not(:disabled), .V3SummaryControl .LinkClass:focus:not(:disabled) { text-decoration: none; font-weight: 600; color: var(--color-primary); } .button-other:disabled, .button-other-alt:disabled, .V3StatusCenterLogin .btn-link:disabled, .V3SummaryControl .btn-link:disabled, .V3SummaryControl .LinkClass:disabled { opacity: 0.5; } .fiviRemoveBtn { color: var(--color-primary); cursor: default; width: 0; max-width: 100%; margin-right: 100%; display: flex; align-items: flex-start; justify-content: flex-start; order: 2; align-self: flex-end; } .fiviRemoveBtn.fa-2x { font-size: var(--font-size); } .fiviRemoveBtn + .tooltip { display: none !important; } .fiviRemoveBtn:before { content: "remove"; cursor: pointer; font-family: var(--font-family); text-transform: none; white-space: nowrap; text-wrap: nowrap; } .fiviRemoveBtn:hover:not(:disabled):before, .fiviRemoveBtn:active:not(:disabled):before, .fiviRemoveBtn:focus:not(:disabled):before { text-decoration: underline; font-weight: 600; color: var(--color-primary); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviRemoveBtn { margin-right: auto; margin-left: auto; justify-content: center; } } #btnNonMember, .start-application > .button-link, .start-application > .button-primary { text-transform: none; } .start-application > .button-link { max-width: 250px; word-wrap: break-word; white-space: normal; text-align: center; } /* 5.1 Button Containers */ .add-another-individual-container { display: flex; align-items: center; justify-content: center; width: 100%; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .add-another-individual-container { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .add-another-individual-container { width: var(--fiviInput-width); } } /* 6. Accordions */ #accordion { display: flex; flex-direction: column; max-width: var(--column-width-12); width: 100%; gap: var(--gap-vertical); } #accordion > .panel { outline: none; padding: 0 0 0 0; border: none; border-radius: 2px; background-color: transparent; box-shadow: none; margin: 0; } #accordion > .panel:has(> .panel-heading.collapsed) { outline: 1px solid var(--color-gray-dark); box-shadow: none; } #accordion > .panel > .panel-heading { display: flex; align-items: center; height: var(--input-height); padding: 0 var(--column-spacer) 0 0; background: white; border: none; border-radius: 5px; padding-left: 20px; } #accordion > .panel > .panel-heading > .panel-title { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; flex-wrap: wrap; position: relative; text-transform: none; padding-left: 20px; } #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-75); border: none; border-radius: 5px; padding: 0 0 var(--column-spacer) 0; padding-left: 20px; } .panel-body::before, .panel-body::after { display: none; } /* this is the accordion open */ #accordion > .panel > .panel-heading:has(+ .collapse.in) { padding-left: 0; background: transparent; transition: padding-left 0.5s ease-in-out; padding-left: 20px; } #accordion > .panel > .panel-heading:has(+ .collapse.in) > .panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); transition: font-size 0.5s ease-in-out; padding-left: 20px; } /* this is the accordion opening */ #accordion > .panel > .panel-heading:has(+ .collapsing) { padding-left: 0; background: transparent; outline: none; transition: padding-left 0.5s ease-in-out; padding-left: 20px; } #accordion > .panel > .panel-heading:has(+ .collapsing) > .panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); outline: none; transition: font-size 0.5s ease-in-out; padding-left: 20px; } /* this is with the accordion closed */ #accordion > .panel > .panel-heading.collapsed:has(+ .collapse:not(.in)) { padding-left: var(--column-spacer); transition: padding-left 0.5s ease-in-out; padding-left: 20px; } #accordion > .panel > .panel-heading.collapsed:has(+ .collapse:not(.in)) > .panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); transition: font-size 0.5s ease-in-out; padding-left: 20px; } /* this is with the accordion closing */ #accordion > .panel > .panel-heading.collapsed:has(+ .collapsing) { padding-left: var(--column-spacer); outline: none; transition: padding-left 0.5s ease-in-out; padding-left: 20px; } #accordion > .panel > .panel-heading.collapsed:has(+ .collapsing) > .panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); outline: none; transition: font-size 0.5s ease-in-out; padding-left: 20px; } /* 7. Inputs and Labels */ /* 7.1 Labels */ label { font-weight: var(--font-weight-label); display: inline; padding: 0 5px; } .DefaultLabelClass, .DefaultLabelClassV3 { display: flex; align-items: center; height: var(--input-height); position: absolute; left: var(--gap-horizontal-50); bottom: 0; font-size: var(--font-size-input); font-weight: var(--font-weight-input); line-height: var(--font-size-label); color: var(--font-color-label); font-family: var(--font-family-label); transition: bottom 0.25s ease-in-out, left 0.25s ease-in-out, font-size 0.25s ease-in-out, font-weight 0.25s ease-in-out; pointer-events: none; width: fit-content; } .FocusLabelClass, .fiviCCCardInfo .fiviTwoInput .defaultlabelclass { height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); bottom: var(--input-focusLabel-offset); left: var(--gap-horizontal-50); font-weight: 600; text-transform: uppercase; padding: 0 5px; background-color: var(--color-white-normal); } .FocusLabelClass:has(+ input:disabled) { background: linear-gradient(var(--color-white-normal) 50%, #eee 50%); } /* v3 specific */ .fiviLabelContainer { display: flex; } .fiviControl > .fiviLabelContainer { position: absolute; height: 100%; width: 100%; pointer-events: none; } .DefaultLabelClassV3, .fiviStaticLabel { display: flex; align-items: center; height: var(--input-height); margin: 0 !important; position: absolute !important; left: var(--gap-horizontal-50) !important; top: unset !important; bottom: 0; font-size: var(--font-size-input) !important; font-weight: var(--font-weight-input); line-height: var(--font-size-label) !important; color: var(--font-color-label); font-family: var(--font-family-label); transition: bottom 0.25s ease-in-out, left 0.25s ease-in-out, font-size 0.25s ease-in-out, font-weight 0.25s ease-in-out !important; } .DefaultLabelClassV3.FocusLabelClass, .fiviStaticLabel { height: var(--input-focusLabel-fontSize); bottom: var(--input-focusLabel-offset) !important; font-size: var(--input-focusLabel-fontSize) !important; left: 0 !important; font-weight: 600; color: var(--font-color-label) !important; text-transform: uppercase; } /* 7.2 Inputs */ .fiviInput, .fiviSCDropDown { display: inline-flex; width: 100vw; /*oh my vw actually worked*/ max-width: var(--fiviInput-width); position: relative; /* flex-grow: 1; */ } .form-control { display: flex; align-items: center; width: 100% !important; height: var(--input-height); padding: 0 var(--gap-horizontal-50); margin-top: var(--input-marginTop-forLabelFocusSpace); font-size: var(--font-size-input); font-weight: var(--font-weight-input); line-height: var(--font-lineheight-input); color: var(--font-color-input); font-family: var(--font-family-input); border: 1px solid var(--color-primary) !important; border-radius: 10px; } .form-control:focus { box-shadow: none; border-width: 2px !important; } .fiviTransparent { color: transparent; } /* v3 specific */ .DefaultFormControlClassV3 { margin-left: 0; margin-right: 0; margin-bottom: 0px; } .fiviNewLine { display: none !important; } /* 7.3 Fivi Input Containers */ .fiviTwoInput, .fiviLongInput { /* can container either input elements or fiviInput containers */ display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-vertical-25) var(--gap-horizontal); flex-wrap: wrap; } .fiviTwoInput > input, .fiviTwoInput > .fiviInput { max-width: var(--fiviInput-width-half); } .fiviTwoInput > .DefaultLabelClass { height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); bottom: var(--input-focusLabel-offset); left: 0; font-weight: 600; text-transform: uppercase; } /* these containers normally contain a bunch of .fiviInput containers */ .fiviMultiInput { display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); flex-wrap: wrap; max-width: 100%; width: 100%; position: relative; } .fiviMultiContainer { display: flex; flex-direction: column; max-width: var(--column-width-full); width: 100%; gap: var(--gap-vertical) var(--gap-horizontal); } .fiviTwoInputContainer { /* Use this when you want two .fiviInputs to take up half the normal width and behave like a standard width .fiviInput. */ display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); flex-wrap: wrap; max-width: var(--fiviInput-width); width: 100vw; position: relative; } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviTwoInput > input { max-width: var(--fiviInput-width-half); } .fiviMultiInput { max-width: var(--fiviInput-width); width: 100%; } } /* v3 specific containers */ .fiviParentControl { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-vertical); max-width: var(--column-width-12); width: 100%; margin: 0; } .fiviControl { display: inline-flex; padding: 0 !important; width: 100% !important; margin-bottom: calc( calc(var(--font-size) - 4px) + var(--gap-vertical-25) ) !important; } /* 7.4 Fivi Checkbox/Radio Buttons */ .fiviCheckBox, .fiviCheckBox > span { display: flex; align-items: center; gap: var(--gap-horizontal-50); max-width: fit-content; } .fiviCheckBox > label, .fiviCheckBox > span > label { text-indent: -3px; font-weight: 500; font-size: calc(var(--font-size-label) - 4px); line-height: var(--font-lineheight-input); } /* v3 checkbox */ .fiviCheckBox:has(> input[type="checkbox"]) { margin: 0 !important; } .fiviCheckBox > input[type="checkbox"] { width: fit-content; margin: 0; } /* 7.5 Validator */ .CtlValidator { position: absolute; line-height: var(--input-height); bottom: -3px; left: 3.5px; z-index: 5; } /* 7.6 Tool Tips */ .DefaultTooltipClass { position: absolute; width: fit-content; } .tooltip-arrow { display: none; } .tooltip-inner { width: max-content; max-width: 300px !important; text-align: left; } /* 7.7 Seperators */ .fiviMultiSeperator { width: 100%; height: 2px; margin: calc(var(--fiviInput-vertical-spacing) - 14px) 0 0 0; } .fiviMultiSeperator::after { content: ""; display: block; width: 100%; height: 100%; max-width: 100%; background-color: var(--color-gray-dark); } .divider { display: flex; align-items: center; justify-content: center; width: 100%; height: 1px; } .divider::before { content: ""; display: block; width: var(--column-width-3); height: 1px; background-color: var(--color-gray-dark); } /* 7.8 Loader */ .section-container > .loader { position: relative; left: unset; right: unset; top: unset; margin: 0 auto; } /* 7.9 Popover v2: .popover v3: .fivisionpopover */ .popover > .arrow, .fivisionpopover > .arrow { display: none; } .fivisionpopover .popover-content { font-size: calc(var(--font-size) - 4px); font-weight: 500; color: red; padding: 0; } .fivisionpopover { position: absolute !important; top: calc( var(--input-height) + var(--input-marginTop-forLabelFocusSpace) ) !important; box-shadow: none; border: none; background-color: transparent; margin-top: var(--gap-vertical-25) !important; } /* 8. fiVISION Controls */ /* 8.1 fiVISION_ErrorSummary v2: #ErrorSummary v3: .fiviErrorSummary */ #ErrorSummary1, .fiviErrorSummary { display: none; } #ErrorSummary1:has(li) { display: block; max-width: var(--column-width-6); width: 100%; margin: 0 auto; } .fiviErrorSummary:has(div) { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } #ErrorSummary1 ul { padding-left: 0; } #ErrorSummary1 li, .fiviErrorSummary > div { font-size: var(--font-size); line-height: var(--font-lineheight); font-weight: 500; color: red; margin-bottom: 0; list-style: none; text-align: center; } /* 8.2 fiVISION_Panel */ .fiviPanel { display: inline-flex; flex-direction: unset; flex-wrap: unset; width: unset; justify-content: unset; } .fiviPanel, .fiviPanel > .fiviPanelContainer { max-width: 100%; /* width: 100%; */ } .page-container > .fiviPanel, .section-container > .fiviPanel, .header-container > .fiviPanel { width: 100%; } /* 8.3 fiVISION_ProductsAndServicesV2 */ .fiviProdServControl { display: flex; flex-wrap: wrap; max-width: var(--column-width-12); width: 100%; gap: var(--gap-vertical); } .fiviProdServControl .DefaultTooltipClass { top: 0; right: 0; } .fiviProdContainer { max-width: var(--column-width-4); width: 100%; min-height: 100px; padding: var(--gap-horizontal-75); position: relative; background: white; border: 2px solid var(--color-gray-dark); border-radius: 3px; box-shadow: none; } .fiviProdContainer:has(input[id*="_ProductCheckbox_"]:checked), .fiviProdContainer:has(input[id*="_GeneralService"]:checked) { background-color: var(--color-accent-hawkes-blue); } .fiviProdServ { display: flex; flex-direction: column; gap: 0; height: 100%; } .fiviProdServ > .fiviCheckBox, .fiviProdServ > .fiviCheckBox > span { flex-direction: row; justify-content: space-between; align-items: center; max-width: 100%; width: 100%; } .fiviProdServ > .fiviCheckBox > div:first-child, .fiviProdServ > .fiviCheckBox > span > div:first-child { order: 3; } .fiviProdServ > .fiviCheckBox > .DefaultTooltipClass, .fiviProdServ > .fiviCheckBox > span > .DefaultTooltipClass { /* position:relative; order: 2; */ left: 305px; bottom: 120px !important; } .fiviProdServ > .fiviCheckBox > label, .fiviProdServ > .fiviCheckBox > span > label { font-size: var(--font-size-label); font-weight: 600; margin-left: -3px; width: fit-content; /* text-wrap: nowrap; */ /* white-space: nowrap; */ text-wrap: wrap; white-space: break-spaces; order: 1; margin-top: 15px; padding: 0 10px; } .fiviProdServ .fiviAddAnotherButton { display: none; width: fit-content; align-self: center; justify-content: flex-end; } .fiviProdContainer:has(input[id*="_ProductCheckbox_"]:checked) .fiviAddAnotherButton { display: flex; } .fiviProdServ .fiviAddAnotherButton > a { text-align: center; display: flex; align-items: center; justify-content: center; margin-top: auto; } .fiviProdPanel { max-width: 100%; display: flex; flex-direction: column; } .fiviProdPanel:has(*):before { content: ""; display: block; height: 2px; width: calc(100% + var(--gap-horizontal-150)); margin-left: calc(var(--gap-horizontal-75) * -1); background-color: var(--color-gray-dark); } .fiviProdPanel > .fiviInput { max-width: 100%; } .fiviProdPanel > .fiviProdInnerPanel:first-of-type, .fiviProdPanel > .fiviInput { margin-top: var(--gap-vertical); } .fiviProdPanel > .fiviProdInnerPanel:not(:first-of-type) { margin-top: var(--gap-vertical); } .fiviProdInnerPanel { display: flex; flex-direction: column; gap: var(--gap-vertical-50) 0; flex-wrap: wrap; width: 100%; padding: 0; position: relative; } .Service_MoreInfo { width: 100%; font-size: 14px; padding: 8px 10px; text-align: center; } .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%; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviProdContainer { max-width: 100%; } .fiviProdServ > .fiviCheckBox > .DefaultTooltipClass, .fiviProdServ > .fiviCheckBox > span > .DefaultTooltipClass { left: 10px; } } /* 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) var(--fiviInput-horizontal-spacing); width: 100%; } .fiviAddress > .fiviSameAs { max-width: calc(calc(var(--fiviInput-width) / 2) - var(--column-spacer)); position: absolute; top: -49px; right: 0; background: var(--color-white-normal); width: fit-content; padding: 0 5px; } .fiviAddress > .fiviSameAs label { font-size: calc(var(--font-size-label) - 4px); line-height: var(--font-lineheight); } .fiviAddress > .DefaultAddressVerifyingClass { font-size: calc(var(--font-size) - 2px); line-height: var(--font-lineheight); font-weight: 500; text-align: center; } @media all and (max-device-width: 836px), all and (max-width: 836px) { .address-container { max-width: 100%; } .address-container > h3 { max-width: 100%; } .fiviAddress > .fiviSameAs { max-width: 100%; position: relative; top: unset; right: unset; } } /* 8.5 fiVISION_PhoneTextBoxV2 --fiviLongInput has the phone field, phone type, and preferred --fiviTwoInput has the phone field and either phone type or preferred --else its just the phone field */ .fiviPhoneControl { margin: 0; max-width: var(--fiviInput-width); } .fiviTwoInput.fiviPhoneControl, .fiviLongInput.fiviPhoneControl { display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-horizontal-25) var(--gap-vertical); flex-wrap: wrap; } .fiviLongInput.fiviPhoneControl { max-width: 100%; width: 100%; } .fiviPhoneControl .CtlValidator { top: calc(var(--input-marginTop-forLabelFocusSpace) + 3px); bottom: unset; } .fiviLongInput.fiviPhoneControl > input.form-control, .fiviTwoInput.fiviPhoneControl > input.form-control { max-width: var(--fiviInput-width-partial-main) !important; width: 100%; } .fiviPhoneControl > .fiviCheckBox, .fiviPhoneControl > select.form-control { max-width: var(--fiviInput-width-partial-alt); width: 100%; } .fiviPhoneControl > .fiviCheckBox { background: transparent; border: none !important; box-shadow: none; padding: 0; } .fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) { flex-wrap: wrap; gap: var(--gap-vertical-50); } .fiviTwoInput.fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass, .fiviLongInput.fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass { top: 0; } .fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass { top: var(--input-marginTop-forLabelFocusSpace); transition: top 0.25s ease-in-out, left 0.25s ease-in-out, font-size 0.25s ease-in-out, font-weight 0.25s ease-in-out; } .fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass.FocusLabelClass { top: 0; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] { width: 100%; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] br { display: none; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_smsOptionsDiv"] { background-color: var(--color-gray-normal) !important; padding: var(--gap-horizontal) !important; display: flex !important; gap: var(--gap-vertical); flex-direction: column; min-width: unset !important; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_smsOptionsDiv"] > span { display: block; width: 100%; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_messageIconDiv"] { display: none; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] { display: flex; gap: var(--gap-horizontal); width: 100%; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] div.form-element { width: calc(calc(100% - var(--gap-horizontal)) / 2); height: fit-content; padding: 0; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] div.form-element > span { width: 100%; height: 100%; display: block; padding: 0; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] label { min-width: unset; width: 100% !important; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] div.form-element > span > input:checked + label { border: 2px solid var(--color-primary-normal); background: var(--color-primary-normal); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviTwoInput.fiviPhoneControl { max-width: var(--column-width-6); width: 100%; } .fiviTwoInput.fiviPhoneControl > input.form-control, .fiviTwoInput.fiviPhoneControl > select.form-control { max-width: var(--column-width-3); } .fiviLongInput.fiviPhoneControl > .fiviCheckBox { margin-top: 0; max-width: 100%; } .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass { bottom: calc(var(--input-height) + var(--gap-horizontal-25)); } .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass { bottom: calc( var(--input-focusLabel-offset) + calc(var(--input-height) + var(--gap-horizontal-25)) ); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviTwoInput.fiviPhoneControl > input.form-control, .fiviTwoInput.fiviPhoneControl > select.form-control { max-width: var(--column-width-2); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviTwoInput.fiviPhoneControl { gap: var(--gap-horizontal-25) var(--gap-vertical); } .fiviTwoInput.fiviPhoneControl > input.form-control, .fiviLongInput.fiviPhoneControl > input.form-control, .fiviTwoInput.fiviPhoneControl > select.form-control, .fiviLongInput.fiviPhoneControl > select.form-control { max-width: 100% !important; } .fiviTwoInput.fiviPhoneControl > select.form-control, .fiviLongInput.fiviPhoneControl > select.form-control { margin-top: 0px; } .fiviPhoneControl > .fiviCheckBox { margin-top: 0; max-width: 100%; } .fiviTwoInput.fiviPhoneControl > label.DefaultLabelClass { bottom: calc(var(--input-height) + var(--gap-horizontal-25)); } .fiviTwoInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass { bottom: calc( var(--input-focusLabel-offset) + calc(var(--input-height) + var(--gap-horizontal-25)) ); } .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass { bottom: calc(calc(var(--input-height) + var(--gap-horizontal-25)) * 2); } .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass { bottom: calc( var(--input-focusLabel-offset) + calc(calc(var(--input-height) + var(--gap-horizontal-25)) * 2) ); } } /* 8.6 fiVISION_IDTypeV2 */ .fiviIDType { max-width: calc(calc(var(--fiviInput-width) * 2) + var(--column-spacer)); } .fiviIDType > div[id*="issueDateDiv"], .fiviIDType > div[id*="expirationDateDiv"] { max-width: var(--fiviInput-width-half); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviIDType > div[id*="issueDateDiv"], .fiviIDType > div[id*="expirationDateDiv"] { max-width: var(--fiviInput-width); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviIDType { max-width: var(--fiviInput-width); } .fiviIDType > div[id*="issueDateDiv"], .fiviIDType > div[id*="expirationDateDiv"] { max-width: var(--fiviInput-width-half); } } /* 8.7 fiVISION_HousingDurationHistory */ .fiviHousingDurationHistory { max-width: var(--column-width-full); } .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width-half); } .fiviHousingDurationHistory center { width: var(--fiviInput-width); } .fiviHousingDurationHistory .DefaultAddressVerifyingClass { width: var(--fiviInput-width); } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .fiviHousingDurationHistory center { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width); } .fiviHousingDurationHistory .DefaultAddressVerifyingClass { width: var(--column-width-4); } .fiviHousingDurationHistory center { width: var(--fiviInput-width); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width-half); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width-half); } } /* 8.8 fiVISION_EmploymentHistory */ .fiviEmpHistoryControl { max-width: var(--column-width-full); } .fiviEmpHistoryControl center { width: 100%; } .fiviEmpHistoryControl .fiviRemoveBtn:before { content: "Remove Prior Employer"; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .fiviEmpHistoryControl center { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviEmpHistoryControl center { width: var(--fiviInput-width); } } /* 8.9 fiVISION_IndividualIncome */ .fiviIncomeControl { max-width: 100%; width: 100%; } .fiviIncomeControl > .fiviMultiContainer { flex-direction: row; flex-wrap: wrap; max-width: 100%; } .fiviIncomeControl > .fiviMultiContainer > div { max-width: 100%; width: 100vw; } .fiviIncomeControl .fiviMultiInput { gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); } .fiviIncomeControl .fiviMultiInput .fiviInput { max-width: var(--fiviInput-width-half); } .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) { display: flex; width: 100%; max-width: 100%; } .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) > span { width: 100%; } .fiviIncomeControl .fiviRemoveBtn:before { content: "Remove Optional Income"; } .fiviIncomeControl input[id*="ntbHoursPerWeek"]::placeholder { color: transparent; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .fiviIncomeControl .fiviMultiInput > .fiviInput, .fiviIncomeControl .fiviMultiInput > .fiviInput > .fiviInput { max-width: var(--fiviInput-width); } .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) { width: var(--fiviInput-width-double); } .fiviIncomeControl .fiviRemoveBtn { left: var(--fiviInput-width); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) { width: var(--fiviInput-width); } .fiviIncomeControl .fiviRemoveBtn { top: var(--input-marginTop-forLabelFocusSpace); left: unset; right: var(--gap-horizontal-25); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { } /* 8.10 fiVISION_IndividualDetails */ .fiviIndividualDetails { width: 100%; } .fiviIndDetails { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } .fiviIndDetails > div { margin-left: var(--gap-horizontal-25); font-weight: 400; } .fiviIndDetails > .fiviIndDetailsSection { margin-left: 0; } .fiviIndDetailsSection > b { font-weight: 500; } .fiviIndDetails > .fiviIndDetailsName { font-size: calc(var(--font-size) + 2px); font-weight: 500; margin-bottom: var(--gap-vertical-25); margin-left: 0; } .fiviIndDetails > .fiviIndDetailsName:not(:first-of-type) { margin-top: var(--gap-vertical-75); } /* 8.11 fiVISION_ProductsAndServicesSelected */ .fiviProdServiceSelected > div { margin: 0 !important; display: flex; flex-direction: column; gap: var(--gap-vertical-75); font-size: calc(var(--font-size) + 2px); font-weight: 500; } .fiviProdServiceSelected > div > ul { padding: 0; list-style: none; display: flex; gap: var(--gap-vertical-25) 1px; flex-wrap: wrap; font-weight: 400; font-size: var(--font-size); } .fiviProdServiceSelected > div > ul > i { margin-left: var(--gap-horizontal-25); } .fiviProdServiceSelected > div > ul > li { margin: var(--gap-vertical-25) 0 0 0; width: 100%; font-size: calc(var(--font-size) + 2px); } .fiviProdServiceSelected > div > ul > li:first-of-type { margin-top: 0; } .fiviProdServiceSelected > div > ul > ul { margin: 0; width: 100%; } .fiviProdServiceSelected > div > br + ul { list-style: unset; margin-left: var(--gap-horizontal-75); margin-top: calc(var(--gap-horizontal-25) * -1); } .fiviProdServiceSelected > div > br + ul > li { margin-left: var(--gap-horizontal-25); font-size: var(--font-size); margin-top: 0; } .fiviProdServiceSelected > div > br + ul > li > b { font-weight: 500; } /* 8.12 fiVISION_ProductRelationships */ .fiviProductRelationship { display: block; overflow-x: auto; white-space: nowrap; border: 1px solid var(--color-gray-dark); border-radius: 5px; max-width: 100%; width: fit-content; box-shadow: none; } .fiviProductRelationship table { overflow-x: auto; white-space: nowrap; border: none; margin: 0; } .fiviProductRelationship tr { display: flex; flex-wrap: nowrap; padding: 0 var(--column-spacer); border-bottom: 1px solid var(--color-gray-dark); } .fiviProductRelationship tr:nth-of-type(odd) { background-color: white !important; } .fiviProductRelationship tr:nth-of-type(even) { background-color: transparent !important; } .fiviProductRelationship tr:last-of-type { border: none; } .fiviProductRelationship td { display: flex; justify-content: center; align-items: center; width: var(--column-width-2); height: calc(var(--font-size) * 3); text-wrap: wrap; white-space: nowrap; padding: 0 !important; line-height: var(--font-lineheight); background-color: transparent !important; border: none !important; font-size: var(--font-size); } .fiviProductRelationship tr > td:first-of-type { justify-content: flex-start; font-weight: 600; width: var(--column-width-3); } .fiviProductRelationship tr[id*="_ServiceRow"] > td:first-of-type { padding-left: var(--column-spacer) !important; font-weight: 400; } .fiviProductRelationship tr:first-of-type > td { font-weight: bold; text-align: left !important; border: none; } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviProductRelationship tr { gap: 0 var(--column-spacer); } .fiviProductRelationship td { width: var(--column-width); } .fiviProductRelationship tr > td:first-of-type { width: var(--column-width-2); } .fiviProductRelationship tr:first-of-type > td { text-align: center !important; } } /* 8.13 fiVISION_DocumentListV2 */ .fiviDocumentList { max-width: var(--column-width-10); width: 100%; display: flex; flex-direction: column-reverse; gap: var(--gap-vertical-75); } .V3SummaryControl .fiviDocumentList { max-width: var(--column-width-12); } .fiviDocumentList > input:first-of-type { align-self: center; } .fiviDocumentList table { /* display: block; */ width: 100%; margin: 0; border: 1px solid var(--color-gray-dark); border-radius: 5px; box-shadow: none; } .fiviDocumentList table > tbody, .fiviDocumentList table > thead { display: flex; flex-direction: column; width: 100%; } .fiviDocumentList table > tbody > tr, .fiviDocumentList table > thead > tr { display: flex; flex-wrap: nowrap; position: relative; padding: 0 var(--column-spacer); border: none; border-radius: 5px; border-bottom: 1px solid var(--color-gray-dark); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .fiviDocumentList table > tbody > tr:nth-of-type(odd) { background-color: white !important; } .fiviDocumentList table > tbody > tr:nth-of-type(even) { background-color: transparent !important; } .fiviDocumentList table > tbody > tr:last-of-type { border: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .fiviDocumentList table th, .fiviDocumentList table td { display: flex; align-items: center; justify-content: center; max-width: var(--column-width-3); width: 100%; padding: var(--gap-horizontal) 0 !important; background-color: transparent !important; } .V3MessagesHeaderClass th { max-width: var(--column-width-3) !important; width: 100% !important; } .fiviDocumentList table td, .fiviDocumentList .V3MessagesHeaderClass th { border: none !important; } .fiviDocumentList table th:first-of-type, .fiviDocumentList table td:first-of-type { justify-content: flex-start; } .fiviDocumentList table th:last-of-type, .fiviDocumentList table td:last-of-type { display: flex; flex-direction: column; align-items: center; max-width: var(--column-width-4); width: 100%; background-color: transparent !important; } .fiviDocumentList table td:last-of-type br { display: none; } .fiviDocumentList table td:last-of-type > span:has(.btn-default) { display: flex; align-items: center; text-align: center; justify-content: center; margin-top: var(--gap-vertical-25); } .fiviDocumentList table td:last-of-type > div[id*="UploadProgressBar_"] { max-width: var(--fiviInput-width); min-width: var(--column-width-2); width: fit-content; display: flex; align-items: center; gap: var(--gap-horizontal-25); margin-top: var(--gap-vertical-25); } .fiviDocumentList .DefaultTooltipClass { display: flex; align-items: center; justify-content: center; width: var(--column-spacer); height: 100%; margin: 0 !important; position: absolute; top: 0; right: var(--gap-horizontal-25); } .fiviDocumentList .ng-modal-dialog { left: 0; width: var(--column-width-6) !important; } .fiviDocumentList .ng-modal-dialog-content { padding: var(--column-spacer); } .fiviDocumentList .ModalContent > div { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .fiviDocumentList .ModalContent br { display: none; } .fiviDocumentList .ModalContent > div > .modal-header { padding: 0; } .fiviDocumentList .ModalContent > div > .modal-header .close { font-size: var(--font-size-h1); color: var(--color-black-dark); opacity: 1; } .fiviDocumentList .ModalContent > div > .modal-header .close:hover { opacity: 0.5; } .fiviDocumentList .ModalContent > div .modal-body-insideItem { text-align: left; margin: 0 !important; display: flex; flex-direction: column; gap: var(--gap-horizontal-50); } .fiviDocumentList .ModalContent > div .text-muted { font-size: var(--font-size); color: var(--font-color); line-height: var(--font-lineheight); } .fiviDocumentList .ModalContent > div .text-muted > br { display: inline-block; } .fiviDocumentList .ModalContent #qrcode { margin: 0 !important; } .fiviDocumentList .ModalContent #UploadWrapper > div:nth-of-type(2) { margin: 0 !important; height: auto !important; border: none !important; text-align: left !important; } .fiviDocumentList .ModalContent #UploadWrapper > div:nth-of-type(2) > span { font-size: var(--font-size-h2) !important; color: var(--font-color-h2) !important; line-height: var(--font-lineheight-h2) !important; font-weight: var(--font-weight-h2); padding: 0 !important; text-align: left !important; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviDocumentList tbody > tr:first-of-type { display: none; } .fiviDocumentList table > tbody > tr { flex-direction: column; padding: calc(var(--column-spacer) / 2); gap: calc(var(--column-spacer) / 2); } .fiviDocumentList table > tbody > tr > td { display: flex; flex-direction: column; align-items: center; font-size: var(--font-size-h3); max-width: 100%; padding: 0 !important; width: 100%; } .fiviDocumentList table > tbody > tr > td::before { font-size: var(--font-size-h4); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: 600; font-family: var(--font-family-h4); } .fiviDocumentList table > tbody > tr > td:nth-of-type(1):before { content: "Applicant Name"; } .fiviDocumentList table > tbody > tr > td:nth-of-type(2):before { content: "Document Type"; } /* status center column names */ .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(1):before { content: "Application Number"; } .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(2):before { content: "Individual"; } .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(3):before { content: "Document Type"; } .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(4):before { content: "Upload"; } .fiviDocumentList table > tbody > tr > td:nth-of-type(3), .fiviDocumentList table td:last-of-type { max-width: 100%; } .fiviDocumentList .DefaultTooltipClass { position: relative; height: fit-content; width: 100%; margin: var(--gap-vertical-25) 0 !important; } .fiviDocumentList > input:first-of-type { /* display: none !important; */ } } /* 8.14 fiVISION_DisclosuresList */ .fiviDisclosureList { display: flex; flex-direction: column; gap: var(--gap-vertical-50); width: 100%; padding-left: var(--gap-horizontal-150); } .fivi-disclosure-modal > .fiviDisclosure-checkbox-container { display: flex; gap: var(--gap-horizontal-50); align-items: center; } .fivi-disclosure-modal > .fiviDisclosure-checkbox-container label { font-weight: 500; font-size: calc(var(--font-size) + 2px); width: fit-content; } .fivi-disclosure-modal > .fiviDisclosure-modal-button { margin-bottom: var(--gap-vertical-50); } .fivi-disclosure-modal > .fiviDisclosure-checkbox-container > i { padding: 0 !important; } .fivi-disclosure-modal .modal-body > div:last-of-type { display: flex; flex-direction: row-reverse; justify-content: space-between; padding: 0 var(--gap-horizontal); } .fivi-disclosure-modal .modal-header { font-size: var(--font-size-h3); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: var(--font-weight-h4); font-family: var(--font-family-h4); } /* 8.15 fiVISION_IDAuthenticationQuestions */ .fiviIDAuth { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap-vertical-75) var(--gap-horizontal-25); width: 100%; } .fiviIDAuth br { display: none; } .fiviIDAuth > span:has(label) { display: flex; gap: var(--gap-horizontal-25); max-width: 95%; width: fit-content; font-size: var(--font-size-h4); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: var(--font-weight-h4); font-family: var(--font-family-h4); text-align: left; } .fiviIDAuth > span > label { font-weight: 400; font-size: calc(var(--font-size-label) - 2px); } .fiviIDAuth > span:has(b) { width: fit-content; } .fiviIDAuth > div:has(table) { width: 100%; } .fiviIDAuth tbody { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } .fiviIDAuth tbody td { display: flex; align-items: center; gap: var(--gap-horizontal-25); } .fiviIDAuth tbody td > label { font-size: calc(var(--font-size-label) - 2px); font-weight: 300; line-height: var(--font-size-label); color: var(--font-color-label); font-family: var(--font-family-label); } /* 8.16 fiVISION_ProductFundingV2 */ .fiviProductFunding { display: flex; flex-direction: column; gap: var(--gap-vertical-75); max-width: var(--column-width-10); width: 100%; align-self: center; } .fiviProductFunding > .fiviProductFundingItem, .fiviProductFunding > .fiviFundingAmount { margin: 0; padding: 0; width: 100%; } .fiviProductFunding > .fiviProductFundingItem > .fiviInput { max-width: 100%; align-items: center; justify-content: space-between; gap: var(--column-spacer); } .fiviProductFunding > .fiviProductFundingItem > .fiviInput > input, .fiviProductFunding > .fiviProductFundingItem > .fiviInput > label { margin-top: 0; max-width: var(--column-width-3); } .fiviProductFunding > .fiviProductFundingItem > .fiviInput > label { display: flex; flex-direction: column; gap: var(--gap-vertical-50); font-size: var(--font-size-label); font-weight: 500; } .fiviProductFundingItem > .fiviInput > label:after { content: "funding required"; color: red; font-size: calc(var(--font-size) - 2px); font-style: italic; padding-left: var(--gap-horizontal-50); } .fiviProductFundingItem > .fiviInput:has(> input[min="0"]) > label:after { content: "funding optional"; color: var(--color-primary-normal); } .fiviProductFunding > .fiviProductFundingItem > .fiviInput > .CtlValidator { left: -5px; } .fiviProductFunding > .fiviFundingAmount { display: flex; justify-content: space-between; border-top: 1px solid var(--color-gray-dark); padding-top: var(--gap-vertical-50); } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviProductFunding > .fiviProductFundingItem > .fiviInput { flex-direction: column; gap: var(--gap-vertical-50); } } /* 8.17 fiVISION_ACH */ .fiviACHControl > span[id*="_Consent"] { max-width: 100%; width: 100%; order: 7; } .fiviACHControl > span[id*="_tbFirstName"] { order: 1; } .fiviACHControl > span[id*="_tbLastName"] { order: 2; } .fiviACHControl > span[id*="_tbRoutingNumber"] { order: 3; } .fiviACHControl > span[id*="_tbAccountNumber"] { order: 4; } .fiviACHControl > .fiviACHStatus { order: 5; } .fiviACHControl > .fiviACHcbCont { order: 6; } .fiviACHControl > .fiviACHStatus, .fiviACHControl > .fiviACHcbCont { max-width: var(--fiviInput-width); width: 100%; } .fiviACHControl > .fiviACHStatus > span { font-size: calc(var(--font-size) - 2px); line-height: var(--font-lineheight); font-weight: 400 !important; font-style: italic; } .fiviACHControl > .fiviACHcbCont { display: flex; flex-direction: row; gap: var(--column-spacer); } .fiviACHControl > .CtlValidator { top: var(--input-marginTop-forLabelFocusSpace); bottom: unset; z-index: 5; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviACHControl > span[id*="_tbAccountNumber"] { order: 5; } .fiviACHControl > .fiviACHStatus { order: 4; } .fiviACHControl > .fiviACHcbCont { order: 6; } } /* 8.18 fiVISION_CreditCardV2 */ .fiviCreditCardControl > .fiviCCCardInfo > .DefaultAddressVerifyingClass { position: absolute; left: var(--fiviInput-width); transform: translateX(-100%); font-size: calc(var(--font-size) - 2px); width: 100%; text-align: right; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput { gap: var(--gap-vertical-25) 0; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > label { /* position: relative; */ /* bottom: unset; */ } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > select, .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > .TwoControls { width: calc(100% / 3) !important; margin: 0; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > .TwoControls > .DefaultTooltipClass { right: var(--gap-horizontal-25); height: var(--input-height); display: flex; align-items: center; justify-content: center; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > select:nth-of-type(1) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-color: transparent !important; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > select:nth-of-type(2) { border-radius: 0; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > .TwoControls > input { margin: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: transparent !important; } /* 8.19 fiVISION_ApplicantWithdraw */ .fiviApplicantWithdraw { max-width: 100%; width: 100%; display: flex; flex-direction: column; gap: var(--gap-vertical-75); position: relative; } .fiviApplicantWithdraw > .CtlValidator { top: -3px; bottom: unset; left: -8px; } /* 8.20 fiVISION_ProgressBar */ .progress-container { flex-grow: 1; } .journey-bar-icons { display: none; } .journey-bar { margin-bottom: 0; display: flex; justify-content: flex-end; align-items: flex-end; width: 100%; } .journey-bar > tbody > tr { display: flex; gap: var(--gap-horizontal-50); } .journey-bar > tbody > tr > td { border-top: none; padding: 0; } .journey-bar-group { display: flex; flex-direction: column-reverse; align-items: center; min-width: var(--column-width); gap: var(--gap-vertical-25); } .journey-bar-group > span { opacity: 33%; } .journey-bar-group > span { padding: 0 var(--gap-horizontal-25); font-size: calc(var(--font-size) - 2px); font-weight: 500; } .journey-bar-group:after { content: " "; width: 100%; height: 10px; border-radius: 5px; } .journey-bar-group.previous-group:after { background-color: color-mix( in srgb, var(--color-secondary-alt2) 66%, transparent ); } .journey-bar-group.current-group:after { background-color: var(--color-secondary-alt1); } .journey-bar-group.current-group > span { opacity: 100%; } .journey-bar-group.future-group:after { background-color: color-mix( in srgb, var(--color-secondary-alt1) 20%, transparent ); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .journey-bar { justify-content: flex-start; } .journey-bar-group > span { display: none; } } @media all and (max-device-width: 638px), all and (max-width: 638px) { .journey-bar { justify-content: center; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .progress-container { width: 100%; /* display: none; */ flex-grow: unset; } .journey-bar { justify-content: center; } .journey-bar > tbody { width: 100%; } .journey-bar > tbody > tr { width: 100%; } .journey-bar-group { min-width: calc(calc(100% / 5) - var(--gap-horizontal-50)); } } /* 8.21 fiVISON_IndividualHandler */ #IndividualHandler01 { width: 100%; } /* 8.22 Status Center Login (v3) */ .V3StatusCenterLogin { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-vertical-150); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .V3StatusCenterLogin div, .V3StatusCenterLogin > div > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-vertical); } .V3StatusCenterLogin > div span:has(> .btn-link) { display: block; } .V3StatusCenterLogin br { display: none; } .V3StatusCenterLogin > #pnlShowMFACode .fiviCheckBox { display: flex; } /* 8.23 Status Center Summary (v3) */ .V3SummaryControl { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-150); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .V3SummaryControl span:has(> button.btn-link) { /* we need to add some structure to spans that have buttons. */ display: inline-flex; align-items: center; } .V3SummaryControl br { display: none; } .V3StatusCenterLogin > #pnlEnterPassword, .V3StatusCenterLogin > #pnlShowCreatePass, .V3StatusCenterLogin > #pnlShowMFACode, .V3StatusCenterLogin > #pnlShowMFADropdown { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-vertical); max-width: var(--column-width-12); width: 100%; margin: 0; } @media all and (max-device-width: 769px), all and (max-width: 769px) { .V3SummaryControl { gap: var(--gap-vertical); } } /* 8.23.1 SC Summary Header (v3) */ .V3SummaryControl > header { display: block; box-shadow: none; padding: 0; background-color: transparent; border-bottom: none; } .V3SummaryHeader { background-image: none; background-color: transparent; border: none; box-shadow: none; } .V3SummaryHeader:before, .V3SummaryHeader:after { display: none; } /* 8.23.1.1 SC Summary Header Mobile Badge Hiding this and handling mobile styling differently. If you want to use it un-display-none the navbar-header and uncomment out the commented out bits. */ .V3SummaryHeader > #navbar-header { display: none !important; } /* .V3SummaryHeader > #navbar-header .V3SummaryCollapsedMenuButton { border: 2px solid var(--color-secondary-light); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; margin: 0 var(--gap-horizontal-50) 0 0; } .V3SummaryHeader > #navbar-header .V3SummaryCollapsedMenuButton > .icon-bar { background-color: var(--color-primary); } .V3SummaryHeader > #navbar-header .V3SummaryBadge { right: var(--gap-vertical-25); left: unset; background-color: var(--color-secondary-dark); z-index: 2; } .V3SummaryHeader > #navbar-header #mobile-badge.V3SummaryBadge { top: calc(var(--gap-vertical-50) * -1); } */ /* 8.23.1.2 SC Summary Header Icons/Navigation id of topNav */ .V3SummaryHeader > #topNav { display: block !important; width: 100%; padding: 0; } .V3SummaryHeader > #topNav > ul { display: flex; width: 100%; justify-content: center; gap: var(--gap-horizontal) var(--gap-vertical); } .V3SummaryHeader > #topNav:before, .V3SummaryHeader > #topNav:after, .V3SummaryHeader > #topNav > ul:before, .V3SummaryHeader > #topNav > ul:after { display: none; } .V3SummaryHeader > #topNav > ul > .nav-item { margin: 0; padding: var(--gap-vertical-75); min-width: 100px; } .V3SummaryHeader > #topNav > ul > .nav-item.active { border: 1px solid var(--color-secondary-light); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; } .V3SummaryHeader > #topNav > ul > .nav-item > a { display: flex; flex-direction: column; gap: var(--gap-vertical-25); padding: 0; margin: 0; font-size: calc(var(--font-size) + 2px); font-weight: 500; color: var(--color-primary) !important; fill: var(--color-primary) !important; } .V3SummaryHeader > #topNav > ul > .nav-item.active > a { background-image: none; background-color: transparent; box-shadow: none; color: var(--color-secondary-dark) !important; fill: var(--color-secondary-dark) !important; } .V3SummaryHeader > #topNav > ul > .nav-item .badge { right: var(--gap-vertical-25); left: unset; background-color: var(--color-secondary-dark); z-index: 2; } .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge { right: var(--gap-vertical-75); } @media all and (max-device-width: 992px), all and (max-width: 992px) { .V3SummaryHeader > #topNav > ul > .nav-item { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--gap-horizontal-25); } .V3SummaryHeader > #topNav > ul > .nav-item .badge, .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge { position: relative; width: fit-content; height: fit-content; right: unset; } .V3SummaryHeader > #topNav > ul > .nav-item > a { flex-direction: row; } .V3SummaryHeader > #topNav > ul > .nav-item > a > svg { margin: 0 0 0 0; } } @media all and (max-device-width: 769px), all and (max-width: 769px) { .V3SummaryHeader > #topNav { border: none; } .V3SummaryHeader > #topNav > ul { flex-wrap: wrap; margin: 0; gap: var(--gap-vertical-25); border: none; justify-content: space-between; } .V3SummaryHeader > #topNav > ul > .nav-item { width: calc(50% - var(--gap-vertical-25)); justify-content: center; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .V3SummaryHeader > #topNav > ul > .nav-item { justify-content: center; padding: var(--gap-vertical-50); } .V3SummaryHeader > #topNav > ul > .nav-item > a { flex-direction: column; justify-content: center; } .V3SummaryHeader > #topNav > ul > .nav-item .badge, .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge { position: absolute; right: var(--gap-vertical-25); top: var(--gap-vertical-50); left: unset; background-color: var(--color-secondary-dark); z-index: 2; } } /* 8.23.2 SC Summary Content */ .V3SummaryControl > article { margin: 0; } .V3SummaryControl .container-fluid { padding: 0; } .V3SummaryControl .container-fluid:before, .V3SummaryControl .container-fluid:after { display: none; } .V3SummaryControl .container-fluid > div { display: flex; flex-direction: column; gap: var(--gap-vertical-75); } .V3SummaryControl .headline-container { padding: 0; background: transparent; margin: 0; text-align: left; } .V3SummaryControl .headline-container > h1 { font-size: var(--font-size-h1); text-transform: capitalize; font-weight: var(--font-weight-h1); text-align: center; } /* 8.23.2.1 SC Summary Content Home */ .V3SummaryControl .container-fluid > div > .task { display: flex; justify-content: flex-start; align-items: center; gap: var(--gap-horizontal-50); margin: 0; border: 1px solid var(--color-secondary-light); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; } .V3SummaryControl .container-fluid > div > .task > .task-icon { fill: var(--color-primary); } .V3SummaryControl .container-fluid > div > .task > .task-content { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-horizontal-50); margin: 0; } .V3SummaryControl .container-fluid > div > .task .task-text { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } .V3SummaryControl .container-fluid > div > .task .task-title { color: var(--color-primary); font-size: var(--font-size-h3); text-transform: capitalize; margin: 0; } .V3SummaryControl .container-fluid > div > .task .task-description { font-size: var(--font-size); color: var(--font-color); } /* 8.23.2.2 SC Summary Content Messages */ .V3SummaryControl header:has(#nav-messages.active) + article .headline-container, .V3SummaryControl header:has(#nav-messages.active) + article .headline-container > span { display: flex; flex-direction: column; gap: var(--gap-vertical-150); align-items: center; } .V3SummaryControl header:has(#nav-messages.active) + article .headline-container > span div:has(.btn-primary) { margin-bottom: var(--gap-vertical-150); text-align: center; } .V3SummaryControl .fiviSCSendMessage > div { display: flex; flex-direction: column; gap: var(--gap-vertical-75); } @media all and (max-device-width: 452px), all and (max-width: 452px) { .V3SummaryControl .container-fluid > div > .task > .task-icon { display: none; } } /* 8.24 v3TextBox ***MOVE TO TOP OF fivi Controls when converting to v3*** its a base level control, it should be first in the hierarchy of controls for now its only SC so here is fine. */ .fiviTextBox { flex-wrap: nowrap; } /* 8.25 fiVISION_FinicityFundingAccountVerification */ .fiviFinicity, .fiviFinicity #RealTimeInput, .fiviFinicity .fivi-verifyNow-contents { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-vertical-50); font-size: calc(var(--font-size) + 2px); } .fiviFinicity #RealTimeInput > div { width: 100% !important; text-align: center; } .fivi-verifyNow-btn-contanier button:disabled { display: none; } #FinicityStatusLabel { font-weight: 600 !important; color: var(--color-primary); } /* 8.26 fiVISION_OneTimePasscode */ .fiviOneTimePasscode .fiviPanelContainer { width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: var(--gap-horizontal); } .fiviOneTimePasscode .fiviOTPButtonGroup { display: flex; align-items: center; justify-content: flex-end; gap: var(--gap-horizontal); margin-top: var(--gap-horizontal-50); } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviOneTimePasscode .fiviOTPButtonGroup { flex-direction: column-reverse; gap: var(--gap-vertical); } } /* 8.27 fiVISION_WorkflowSurvey */ .fiviWorkflowSurvey { width: 100%; max-width: 100%; } .fiviWorkflowSurvey > div { width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: var(--gap-horizontal); } .fivi-workflow-survey-item { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .fivi-workflow-survey-question > label { font-weight: 600; } .fivi-workflow-survey-answers { display: flex; flex-direction: column; gap: var(--gap-vertical-25); padding-left: var(--gap-horizontal); } .fivi-workflow-survey-answers .fiviCheckBox > label { font-weight: 400; } .ErrorMessage.fivi-workflow-survey-error { font-weight: 600; font-size: calc(var(--font-size) - 2px); } /* 8.28 fiVISION_ProveIndividualLookup */ .fiviProveIndividualLookup { justify-content: center; } .fiviProveIndividualLookup .prove-direction-buttons { display: flex; flex-direction: row-reverse; justify-content: space-between; width: var(--fiviInput-width); } @media all and (max-device-width: 453px), all and (max-width: 453px) { .prove-container { width: 100%; } } /* 8.29 fiVISION_ShoppingCart */ .shopping-container .shoppingCart-img-container { position: relative; display: flex; height: 30px; width: fit-content; display: none; } .shopping-container .shoppingCart-img-container > .shoppingCart-img { height: 30px; filter: invert(17%) sepia(88%) saturate(7378%) hue-rotate(243deg) brightness(84%) contrast(109%); } .shopping-container .shoppingCart-img-container > label { position: absolute; width: fit-content; z-index: 1; bottom: -5px; right: -15px; overflow: visible; font-weight: 500; } .shopping-container .modal-dialog { max-width: var(--column-width-6); width: 100%; } .shopping-container .modal-content { padding: var(--gap-vertical-50) var(--gap-horizontal-75); display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .shopping-container .DefaultModalHeaderClass { display: flex; text-wrap: nowrap; white-space: nowrap; font-size: var(--font-size-h3); font-weight: var(--font-weight-h2); border-bottom: 2px solid var(--color-accent-alt); padding: 0 0 var(--gap-vertical-50) 0; } .shopping-container .DefaultModalHeaderClass > label { margin-left: var(--gap-horizontal-25); font-size: var(--font-size-h3); font-weight: var(--font-weight-h2); } .shopping-container .modal-body { padding: 0; display: flex; flex-direction: row; gap: var(--gap-vertical-50); flex-wrap: wrap; justify-content: space-between; } .shopping-container .modal-body hr, .shopping-container .modal-body br { display: none; } .shopping-container .modal-body span:has(> input) { display: flex; align-items: center; } .shopping-container .modal-body #shoppingCartOneProductRequiredMessage { width: 100%; } .shopping-container .modal-body #shoppingCartOneProductRequiredMessage > center { text-align: left; font-size: var(--font-size); padding-bottom: var(--gap-vertical-50); border-bottom: 1px solid var(--color-accent-alt); } .shopping-container .modal-body > div[id*="ShoppingCartIcon"], .shopping-container .modal-body > div[id*="scShoppingCart"] { width: 100% !important; background-color: unset !important; padding: 0 0 var(--gap-vertical-50) 0 !important; height: fit-content !important; display: flex; flex-direction: row; border-bottom: 1px solid var(--color-accent-alt); } .shopping-container .modal-body > div[id*="ShoppingCartIcon"]:has(> .pull-right), .shopping-container .modal-body > div[id*="scShoppingCart"]:has(> .pull-right) { flex-wrap: wrap; } .shopping-container .modal-body > div[id*="ShoppingCartIcon"] > span:first-of-type, .shopping-container .modal-body > div[id*="scShoppingCart"] > span:first-of-type { width: 100%; text-wrap: nowrap; white-space: nowrap; font-size: var(--font-color-h3); font-weight: var(--font-weight-h3); display: flex; align-items: center; } .shopping-container .modal-body > div .pull-right:disabled { display: none; } .shopping-container .modal-body #btnCartChange { display: flex; align-items: center; } /* 9. Page Specific */ /* 9.1 Default Page */ main > .layout-container:has(.page-Default-Content) { background-color: unset; outline: none; } main > .layout-container:has(.page-Default-Content) .logo-app-container { background-color: var(--color-accent-hawkes-blue); } .page-Default-Content .default-start { justify-content: flex-end; position: relative; margin: var(--gap-vertical-150) 0 var(--gap-vertical-200) 0; } .page-Default-Content .start-application { background-color: var(--color-accent-alt); padding: var(--gap-vertical) var(--gap-vertical-200); border-radius: 10px; gap: var(--gap-vertical-75); align-items: center; position: absolute; z-index: 2; left: -20px; top: 71px; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .page-Default-Content .start-hero-container { display: flex; } .start-application { z-index: 3 !important; } } .page-Default-Content .start-application .button-primary, .page-Default-Content .start-application #IndividualHandler01 { width: var(--column-width-3) !important; align-self: center; height: 46.8px; } .page-Default-Content .start-hero-container { background-image: url("/_assets/layoutcontent/20082/default/mom-dad-child-sitting.jpg"); height: 400px; background-position: 65%; background-size: auto 100%; border-radius: 10px; position: relative; } .page-Default-Content .start-hero-container img.hero-mini-logo { height: 125px; position: absolute; top: -3px; left: -5px; z-index: 2; } .page-Default-Content .start-hero-container img.hero-image { display: none; } /* Remove hero img and center start-application */ @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .page-Default-Content .start-hero-container { display: none; } .default-start { margin: 0 !important; } .page-Default-Content .default-start { justify-content: center; } .page-Default-Content .start-application { position: relative; top: 0; left: 0; width: 100%; } .lets-get-started-container { max-width: var(--column-width-5); } .page-Default-Content .thumbnail { max-width: var(--column-width-4); } .what-you-need { font-size: calc(var(--font-size) - 2px); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .lets-get-started-container { max-width: 100%; height: fit-content; } .lets-get-started-container > #IndividualHandler01 { align-items: flex-start; } .default-thumbnail-container { max-width: 100%; width: 100%; flex-direction: row; flex-wrap: nowrap; } .page-Default-Content .thumbnail { max-width: 100%; min-height: fit-content; } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .default-thumbnail-container { flex-wrap: wrap; } .default-thumbnail-container > .thumbnail { min-height: fit-content; } .thumbnail-call-to-action, .thumbnail-call-to-action > #IndividualHandler01 { flex-direction: row; justify-content: flex-end; } .what-you-need { font-size: var(--font-size); } .what-you-need-header, .what-you-need { display: none; } .lets-get-started-container > h2 > .DefaultTooltipClass { display: inline; } } @media all and (max-device-width: 525px), all and (max-width: 525px) { } @media all and (max-device-width: 452px), all and (max-width: 452px) { .page-Default-Content .thumbnail { max-width: var(--column-width-4); } .lets-get-started-container { align-items: center; } .lets-get-started-container > #IndividualHandler01 { align-items: center; } } /* 9.2 Status Center - Default */ .page-StatusCenterDefault { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-200); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .page-StatusCenterDefault > .page-navigation-container { flex-direction: column; align-items: center; margin-top: 0; } /* 9.3 Status Center - Status Center */ .page-StatusCenter { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-200); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .page-StatusCenter > .page-navigation-container { flex-direction: column; align-items: center; margin-top: 0; } /* 9.4 Funding Method */ .funding-method-container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: var(--column-width-12); gap: var(--gap-vertical) var(--gap-horizontal); } .funding-method-container > .fiviPanel > .fiviMultiInput, .funding-method-container > .fiviPanel { width: 100%; max-width: var(--column-width-3); } .funding-method-container .fiviCheckBox > div { display: none; } .funding-method-container .fiviCheckBox > label { display: flex; align-items: center; justify-content: center; width: var(--column-width-3); height: var(--input-height); border: 2px solid var(--color-gray-dark); border-radius: 2px; padding: 0 var(--column-spacer); text-align: center; cursor: pointer; } .funding-method-container .fiviCheckBox > div.checked + label { color: #fff; border-color: var(--color-primary); background-color: var(--color-primary); } .funding-method-container .fiviCheckBox > label:hover { color: var(--color-primary-normal); border-color: var(--color-primary-normal); } #pnlSelectFundingMethodDetails .fiviPanel { width: 100%; } .funding-detail { padding: var(--column-spacer); outline: 2px solid var(--color-gray-dark); gap: var(--gap-vertical-50); width: 100%; max-width: calc(var(--fiviInput-width) + calc(var(--column-spacer) * 2)); margin: 0 auto; } .funding-detail .section-header, .funding-detail .page-text-small, .funding-detail .page-text, .funding-detail .page-text-large { text-align: center; } .funding-detail .section-header:before { /* content: ""; */ /*display: inline;*/ /* width: 100%;*/ /* height: 1px;*/ /* background-color: var(--color-gray-dark); */ } .funding-detail .section-header { display: flex; justify-content: center; } .funding-detail .fiviInput, .funding-detail .fiviTwoInput { width: 100%; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .funding-method-container > .fiviPanel { width: 100%; max-width: calc(50% - calc(var(--column-spacer) / 2)); } .funding-method-container > .fiviPanel > .fiviMultiInput { max-width: 100%; width: 100%; } .funding-method-container > .fiviPanel > .fiviMultiInput > .rb-as-button { max-width: 100%; } .funding-method-container .fiviCheckBox > label { width: 100%; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .funding-method-container > .fiviPanel { width: 100%; max-width: 100%; } } /* 9.5 eSign Agreement */ .page-eSignAgreement #lnkESignAgreement, .page-eSignAgreement .fiviCheckBox > label { font-size: calc(var(--font-size) + 2px); } /* 9.6 Disclosure */ .page-Disclosures .page-text.disclosure-click-text { font-weight: 600; color: red; } /* 9.7 Select Category */ .product-category-container { width: 100%; max-width: var(--column-width-9); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--column-spacer); justify-content: center; } .product-category-container > div, .product-category-container > .fiviPanel div[class*="product-category-"] { display: block; width: 100%; max-width: var(--column-width-3); height: calc(var(--column-width-2) + var(--column-width-half)); } .product-category-container .fiviInput.fiviCheckBox { max-width: 100%; height: 100%; background-color: var(--color-accent-onahau); border: 2px solid transparent; border-radius: 10px; justify-content: center; &:has(> .icheckbox_square-grey.checked) { background-color: var(--color-accent-hawkes-blue); border-color: var(--color-primary); } &:has(> .icheckbox_square-grey.hover) { background-color: var(--color-accent-alt); border-color: var(--color-primary); } } .product-category-container .fiviInput.fiviCheckBox > .icheckbox_square-grey { background-image: none; background-color: transparent; position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; } .product-category-container .fiviInput.fiviCheckBox > .icheckbox_square-grey > input, .product-category-container .fiviInput.fiviCheckBox > .icheckbox_square-grey > ins { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; } .product-category-container .fiviInput.fiviCheckBox > label { text-align: center; font-size: var(--font-size-h3); display: flex; flex-direction: column; gap: var(--gap-vertical); justify-content: flex-start !important; padding-top: 3.2em; } .product-category-savings, .product-category-checking, .product-category-moneymarket, .product-category-certificates, .product-category-clubaccounts { text-align: center; } .category-icon { width: 45px; color: var(--color-primary); padding-top: 1em; position: relative; top: 90px; z-index: 10; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .product-category-container { justify-content: center; } .product-category-container > div, .product-category-container > .fiviPanel div[class*="product-category-"] { max-width: var(--column-width-2); height: var(--column-width-2); } .category-icon { top: 80px; } .product-category-container .fiviInput.fiviCheckBox > label { padding-top: 3.25em; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .product-category-container > div, .product-category-container > .fiviPanel div[class*="product-category-"] { max-width: 100%; height: var(--column-width-2); } } /* 9.8 Select Product */ .requested-products-container { width: 100%; display: flex; align-items: flex-start; justify-content: flex-start; } .requested-products-banner { position: relative; display: flex; flex-direction: column; width: 100%; gap: 0; max-width: var(--column-width-5); padding: calc(var(--column-spacer) * 0.5) var(--column-spacer); background-color: var(--color-accent-alt2); border-radius: 10px; transition: all 0.75s ease; border: 2px solid var(--color-accent); display: none; } .requested-products-banner:has(> .fivi-expanded) { gap: var(--gap-vertical); } .requested-products-banner > h3 { text-align: center; text-transform: none; font-weight: 500; } .requested-products-banner > .requested-products { display: flex; flex-direction: column; gap: var(--gap-vertical-50); height: 0; overflow: hidden; padding-top: 0; transition: all 0.5s ease; } .requested-products-banner > .requested-products .product-requested-item { display: flex; justify-content: space-between; align-items: center; border-top: 2px solid var(--color-accent); padding-top: var(--gap-vertical-50); } .requested-products-banner > .requested-products .requested-product-label { font-size: var(--font-size-h4); font-weight: 500; } .requested-products-banner .requested-expander { position: absolute; font-weight: 400; font-size: 30px; cursor: pointer; top: calc(var(--column-spacer) * 0.25); right: calc(var(--column-spacer) * 0.25); } .products-container .fiviProdContainer { padding: 0; border: none; border-radius: 10px; position: relative; padding-bottom: var(--gap-vertical-200); background-color: var(--color-accent-onahau); } .products-container .fiviProdServ > .fiviCheckBox .icheckbox_square-grey { background-image: none; background-color: transparent; position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; display: none; } .products-container .fiviProdServ > .fiviCheckBox .icheckbox_square-grey > input, .products-container .fiviProdServ > .fiviCheckBox .icheckbox_square-grey > ins { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; } .products-container .fiviProdServ > .fiviCheckBox, .products-container .fiviProdServ > .fiviCheckBox > span:disabled { width: 100%; background-color: transparent; } .products-container .fiviProdServ:has(> .Product_MoreInfo) > .fiviCheckBox, .products-container .fiviProdServ:has(> .Product_MoreInfo) > .fiviCheckBox > span:disabled, .products-container .fiviProdServ:has(> .fiviProdPanel) > .fiviCheckBox, .products-container .fiviProdServ:has(> .fiviProdPanel) > .fiviCheckBox > span:disabled { padding-bottom: var(--gap-vertical); } .products-container .fiviProdServ > .fiviCheckBox label { display: flex; flex-direction: column; text-indent: 0; margin-left: 0; gap: var(--gap-horizontal-75); align-items: center; width: 100%; padding-top: var(--column-spacer); cursor: pointer; } .products-container .fiviProdServ > .fiviCheckBox label:has(> img) { padding-top: 0; } .products-container .fiviProdServ > .fiviCheckBox label > img { width: 100%; padding: var(--gap-vertical-50) var(--gap-vertical-50) 0 var(--gap-vertical-50); } .products-container .fiviProdServ > .fiviCheckBox label:after { content: "Add"; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; bottom: calc(calc(var(--gap-vertical-200) * -1) - 1px); width: 100%; height: var(--gap-vertical-200); background-color: var(--color-accent-alt); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; cursor: pointer; font-weight: 400; } .products-container .fiviProdServ > .fiviCheckBox:has(.checked) label:after { content: "Remove"; background-color: var(--color-primary); color: white; } .products-container .fiviProdContainer:hover .fiviProdServ > .fiviCheckBox label:after { border: 2px solid var(--color-primary); } .products-container .fiviProdContainer:hover .fiviProdServ > .fiviCheckBox:has(.checked) label:after { border: 2px solid var(--color-accent-alt); } .products-container .fiviProdServ > .fiviCheckBox:has(.checked.disabled) label:after { content: "Required"; background-color: var(--color-primary); color: white; cursor: default; } .products-container .Product_MoreInfo { padding: 0 var(--column-spacer) var(--gap-vertical) var(--column-spacer); } .products-container .fiviProdServControl .DefaultTooltipClass { top: var(--column-spacer); right: var(--column-spacer); } .products-container .Product_MoreInfo > span { display: flex; flex-direction: column; gap: var(--gap-vertical-75); } .products-container .fiviProdPanel:has(*):before { width: calc(100% - calc(var(--column-spacer) * 2)); margin-left: 0; margin: 0 var(--column-spacer); background-color: var(--color-accent); } .products-container .fiviProdPanel { padding: 0 var(--column-spacer) var(--gap-vertical) var(--column-spacer); } @media all and (min-device-width: 836px), all and (min-width: 836px) { .page-container.page-SelectProduct { position: relative; } .requested-products-container { position: absolute; top: 0; align-items: flex-end; } } @media screen and (max-device-width: 836px), all and (max-width: 836px) { .requested-products-container { position: relative; align-items: center; } } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .requested-products-banner { max-width: var(--column-width-4); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .requested-products-container { align-items: center; margin-top: var(--gap-vertical); } .fiviProdServControl { justify-content: center; } } @media (max-device-width: 656px), (max-width: 656px) { .requested-products-container > .requested-products-banner { max-width: 100%; } } @media (max-device-width: 452px), (max-width: 452px) { .requested-products-banner { padding-left: var(--gap-horizontal-25); padding-right: var(--gap-horizontal-25); } .requested-products-banner .product-requested-item { flex-direction: column; gap: var(--gap-horizontal-25); } .requested-products-banner label { text-align: center; } } /* 9.9 Approved */ .printable-card-container { /* width: fit-content; */ width: 100%; display: flex; flex-direction: column; gap: var(--gap-vertical-50); align-items: center; } .printable-card { height: 310px; width: 500px; background-color: var(--color-accent-alt) !important; border-radius: 20px; color: var(--color-primary); margin: 20px; font-size: 20px; font-weight: 400; box-shadow: 2px 2px 20px #707070; display: flex; flex-direction: column; justify-content: space-between; padding: 0 var(--column-spacer) var(--column-spacer) var(--column-spacer); } .printable-card .printable-card-top { width: 100%; display: flex; justify-content: space-between; } .printable-card .printable-card-contact { margin-top: var(--gap-vertical); text-align: right; } .printable-card .printable-card-contact > div { font-size: 18px; font-weight: 500; } .printable-card .printable-card-contact > div:first-child { font-weight: 500; font-size: 20px; width: 100%; } .printable-card img { width: 200px; } .printable-card .printable-card-middle { display: flex; flex-direction: column; } .printable-card .printable-card-middle > div { font-size: 26px; font-weight: 600; } .printable-card .printable-card-middle > div:first-child { font-size: 18px; font-weight: 500; } .printable-card-bottom { font-size: 26px; font-weight: 600; } @media print { body:has(.printable-card) { visibility: hidden; } .printable-card { visibility: visible; position: fixed; left: 0; top: 0; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; } } .page-Approved > .section-container > .section-header { display: none; } @media all and (max-device-width: 657px), all and (max-width: 657px) { .printable-card { height: 210px; width: 300px; } .printable-card img { width: 130px; height: 60px; margin-top: 10px; } .printable-card .printable-card-contact > div:first-child { font-size: 12px; } .printable-card .printable-card-contact > div { font-size: 11px; } .printable-card .printable-card-middle > div:first-child { font-size: 13px; } } /* 9.10 Required Documents */ .panel-heading { /* background-color: pink!important; */ } .panel-title-container { display: flex !important; flex-direction: row !important; justify-content: space-between !important; padding-top: 10px; } .fas { font-size: 2.5em; padding-right: 0.5em; /* background: orange; */ } .panelArrow { padding: 0.5em 0 0 0.5em !important; } .panel-title { padding-top: 6px; font-size: 16px; } .id-title { padding: 1em 0; } .id-heading { display: block !important; } .panel-body { margin-left: 15px; } .doc-icon-container { width: 3em; margin-right: 1em; } .doc-icon { } /* Old styles */ /* .fas { font-size: 4.5em; } */ /* .id-container { display: flex; padding-bottom: 1.5em; .hero-mini-logo-1, .hero-mini-logo-2 { width: 150px; height: 150px; position: relative; } */ /* .hero-mini-logo-1 { bottom: -27.5%; left: 96%; clip-path: inset(0 45% 42% 0); } */ /* .hero-mini-logo-2 { bottom: 8.5%; right: 35%; clip-path: inset(0 0 45% 43%); } */ /* .flex-column { border-radius: 10px; margin: 0 2em; padding: 2.5em; width: 450px; height: 450px; } */ /* .h4 { font-size: 24px; padding-top: 0.5em; } */ /* .flex-column:nth-child(1) { background-color: var(--color-accent); border-bottom-right-radius: 0; } .flex-column:nth-child(2) { background-color: var(--color-accent-alt); border-bottom-left-radius: 0; } } */ /* @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .id-container { flex-direction: column; .flex-column { margin: 1.5em 0; } .hero-mini-logo-1 { width: 150px; height: 150px; position: relative; top: 27.5%; left: 95%; clip-path: inset(0 42% 42% 0); } } } */ /* @media all and (max-device-width: 455px), all and (max-width: 455px) { .id-container { justify-content: center; align-items: center; .flex-column { width: 350px; height: 450px; } .hero-mini-logo-1 { top: 28.5%; left: 94%; } .hero-mini-logo-2 { bottom: 12.5%; right: 46%; } } } */ /* 9.11 Application Summary */ .page-ApplicationSummary { gap: var(--gap-horizontal-200); } #pnlApplicationSummaryJointOwnersList, #pnlApplicationSummaryBeneficiariesList { padding-top: 1.5em; } .summary-img-container { background-image: url(/_assets/layoutcontent/20082/default/mom-dad-child-sitting.jpg); height: 300px; width: 350px; background-position: 90%; background-size: auto 100%; border-radius: 10px; position: relative; } .no-wrap-2 { flex-wrap: nowrap; } @media all and (max-device-width: 834px), all and (max-width: 834px) { .summary-img-container { height: 200px; width: 250px; } } @media all and (max-device-width: 453px), all and (max-width: 453px) { .summary-img-container { display: none; } } /*9.12 Pending */ /*Hiding survey section */ .page-Pending > .section-container > .section-header { display: none; } .pending-img-container { display: flex; width: 100%; } .pending-image { width: 100%; border-radius: 10px; } /* 9.13 Eligibility */ #rbCity, #rbSSA, #rbCMS, #rbACC, #rbCompany, #rbExisting, #rbEligible { /* background-color: red; */ } .page-applicanteligibility .section-container .flex-column { display: flex; justify-items: center; align-items: center; } .page-applicanteligibility .section-container .flex-column .fiviCheckBox > label, .page-applicanteligibility .section-container .flex-column .fiviCheckBox > span > label { text-indent: 0; } .page-applicanteligibility .section-container .flex-column .fiviCheckBox { background-color: var(--color-accent-onahau); padding: 20px 20px; font-family: sans-serif, Arial; font-size: 16px; border: 1.9px solid #0a172470; border-radius: 6px; width: 25em; -webkit-box-shadow: 1px 3px 24px -6px rgba(0, 0, 0, 0.26); -moz-box-shadow: 1px 3px 24px -6px rgba(0, 0, 0, 0.26); box-shadow: 1px 3px 24px -6px rgba(0, 0, 0, 0.26); } #rbCompany { padding: 20px 30px; } /* 10. ControlID Specific */ #tbCamera { display: none; max-width: var(--fiviInput-width); width: 100%; } #tbCamera #lblLicenseScan { display: block; left: 0; transform: none; margin: 0 auto; } #pnlDocuments { width: 100%; } #lblLicenseScan { width: auto; height: auto; padding: 1em; } @media all and (max-device-width: 834px), all and (max-width: 834px) { #tbCamera { display: block; max-width: var(--column-width-full); width: fit-content !important; } } /* 11. Admin Console */ .AdminContent .aspNetDisabled { display: flex; width: fit-content; align-items: center; min-width: 200px; } .AdminContent .aspNetDisabled > input { width: 20px; } .layout.AdminConsole { min-height: auto; } .layout.AdminConsole > header, .layout.AdminConsole > footer { display: none; } .layout.AdminConsole > main { padding: 40px 10px; } .layout.AdminConsole > main > .layout-container { width: 100%; max-width: calc(980px - 40px); } .layout.AdminConsole .page-navigation-container { max-width: 100%; } /* Table of Contents 1. Variables 1.1 Mobile Variables 2. General Elements & Classes 2.1 General Elements 2.2 iCheck 2.3 Flex Helper Classes 2.4 Column Helper Classes 2.5 General Helper Classes 3. Page Structure 3.1 Page Structure 3.2 Header Styling 3.3 Main Styling 3.4 Footer Styling 4. Page General Containers 5. Buttons 5.1 Button Containers 6. Accordions 7. Inputs and Labels 7.1 Labels 7.2 Inputs 7.3 Fivi Input Containers 7.4 Fivi Checkbox/Radio Buttons 7.5 Validator 7.6 Tool Tips 7.7 Seperators 7.8 Loader 7.9 Popover 8. fiVISION Controls 8.1 fiVISION_ErrorSummary 8.2 fiVISION_Panel 8.3 fiVISION_ProductsAndServicesV2 8.4 fiVISION_AddressTextBoxV2 8.5 fiVISION_PhoneTextBoxV2 8.6 fiVISION_IDTypeV2 8.7 fiVISION_HousingDurationHistory 8.8 fiVISION_EmploymentHistory 8.9 fiVISION_IndividualIncome 8.10 fiVISION_IndividualDetails 8.11 fiVISION_ProductsAndServicesSelected 8.12 fiVISION_ProductRelationships 8.13 fiVISION_DocumentListV2 8.14 fiVISION_DisclosuresList 8.15 fiVISION_IDAuthenticationQuestions 8.16 fiVISION_ProductFundingV2 8.17 fiVISION_ACH 8.18 fiVISION_CreditCardV2 8.19 fiVISION_ApplicantWithdraw 8.20 fiVISION_ProgressBar 8.21 fiVISON_IndividualHandler 8.22 Status Center Login 8.23 Status Center Summary 8.24 v3TextBox 8.25 fiVISION_FinicityFundingAccountVerification 8.26 fiVISION_OneTimePasscode 8.27 fiVISION_WorkflowSurvey 8.28 fiVISION_ProveIndividualLookup 8.29 fiVISION_ShoppingCart 9. Page Specific 9.1 Default Page 9.2 Status Center - Default 9.3 Status Center - Status Center 9.4 Funding Method 9.5 eSign Agreement 9.6 Disclosure 9.7 Select Category 9.8 Select Product 9.9 Approved 9.10 Required Documents 9.11 Application Summary 9.12 Pending 9.13 Eligibility 10. ControlID Specific 11. Admin Console Mobile Reference Media Queries for stepping down Assumes column width 66px and column spacer 24px @media all and (max-device-width: 1106px), all and (max-width: 1106px) { } @media all and (max-device-width: 836px), all and (max-width: 836px) { } @media all and (max-device-width: 656px), all and (max-width: 656px) { } @media all and (max-device-width: 452px), all and (max-width: 452px) { } */ /* 1. Variables */ :root { /*colors*/ /*gray scale*/ --color-white-light: #fff; --color-white-normal: #fff; --color-white-dark: #fff; --color-gray-light: #f8f8f8; --color-gray-normal: #f6f9fc; --color-gray-dark: #d6d5d4; --color-black-light: #0b0731; --color-black-normal: #000; --color-black-dark: #000; /*client colors*/ --color-primary: #0a1724; --color-secondary: #1923dc; --color-secondary-alt1: #258bff; --color-secondary-alt2: #8bd1ff; --color-secondary-alt3: #59d2fe; --color-accent-onahau: #cff1f9; --color-accent-hawkes-blue: #d7e7ff; --color-accent-alt2: #fbf5fe; --color-accent-alt3: #e6eceb; /*font family*/ --font-family-pri: "Inter", sans-serif; --font-family-alt: "Inter", sans-serif; /*fonts*/ /*default font*/ --font-size: 14px; --font-lineheight: 24px; --font-color: var(--color-primary); --font-weight: 300; --font-family: var(--font-family-pri); /*input font*/ --font-size-input: 16px; --font-lineheight-input: 22px; --font-color-input: var(--font-color); --font-weight-input: 500; --font-family-input: var(--font-family); /*label font*/ --font-size-label: 20px; --font-lineheight-label: var(--font-lineheight); --font-color-label: var(--font-color); --font-weight-label: 300; --font-family-label: var(--font-family-alt); /*h1 font*/ --font-size-h1: 30px; --font-lineheight-h1: 42px; --font-color-h1: var(--color-primary); --font-weight-h1: 700; --font-family-h1: var(--font-family-alt); /*h2 font*/ --font-size-h2: 24px; --font-lineheight-h2: 26px; --font-color-h2: var(--font-color-h1); --font-weight-h2: 600; --font-family-h2: var(--font-family-input); /*h3 font*/ --font-size-h3: 20px; --font-lineheight-h3: 22px; --font-color-h3: var(--color-primary); --font-weight-h3: 400; --font-family-h3: var(--font-family); /*h4 font*/ --font-size-h4: 16px; --font-lineheight-h4: 18px; --font-color-h4: var(--font-color-h1); --font-weight-h4: 500; --font-family-h4: var(--font-family); /*page structure*/ --column-width: 66px; --column-spacer: 24px; --column-width-half: calc(var(--column-width) / 2); /*33px*/ --column-width-2: calc(calc(var(--column-width) * 2) + var(--column-spacer)); /*156px*/ --column-width-3: calc( calc(var(--column-width) * 3) + calc(var(--column-spacer) * 2) ); /*246px*/ --column-width-4: calc( calc(var(--column-width) * 4) + calc(var(--column-spacer) * 3) ); /*336px*/ --column-width-5: calc( calc(var(--column-width) * 5) + calc(var(--column-spacer) * 4) ); /*426px*/ --column-width-6: calc( calc(var(--column-width) * 6) + calc(var(--column-spacer) * 5) ); /*516px*/ --column-width-7: calc( calc(var(--column-width) * 7) + calc(var(--column-spacer) * 6) ); /*606px*/ --column-width-8: calc( calc(var(--column-width) * 8) + calc(var(--column-spacer) * 7) ); /*696px*/ --column-width-9: calc( calc(var(--column-width) * 9) + calc(var(--column-spacer) * 8) ); /*786px*/ --column-width-10: calc( calc(var(--column-width) * 10) + calc(var(--column-spacer) * 9) ); /*876px*/ --column-width-11: calc( calc(var(--column-width) * 11) + calc(var(--column-spacer) * 10) ); /*966px*/ --column-width-12: calc( calc(var(--column-width) * 12) + calc(var(--column-spacer) * 11) ); /*1056px*/ --column-width-full: 100%; /*flex properties*/ --gap-vertical: var(--column-spacer); --gap-vertical-25: calc(var(--gap-vertical) * 0.25); --gap-vertical-50: calc(var(--gap-vertical) * 0.5); --gap-vertical-75: calc(var(--gap-vertical) * 0.75); --gap-vertical-150: calc(var(--gap-vertical) * 1.5); --gap-vertical-200: calc(var(--gap-vertical) * 2); --gap-horizontal: var(--column-spacer); --gap-horizontal-25: calc(var(--gap-horizontal) * 0.25); --gap-horizontal-50: calc(var(--gap-horizontal) * 0.5); --gap-horizontal-75: calc(var(--gap-horizontal) * 0.75); --gap-horizontal-150: calc(var(--gap-horizontal) * 1.5); --gap-horizontal-200: calc(var(--gap-horizontal) * 2); /*input and label structure*/ --fiviInput-width: var(--column-width-6); --fiviInput-width-half: calc( calc(var(--fiviInput-width) - var(--column-spacer)) / 2 ); --fiviInput-width-double: calc( calc(var(--fiviInput-width) * 2) + var(--column-spacer) ); /*the below two should add to the above, sometimes 3+2 or 2+2 or 2+1, main is always >= alt*/ --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-3); --input-height: 60px; --input-focusLabel-fontSize: 12px; --input-focusLabel-offset: calc( var(--input-height) - calc(var(--input-focusLabel-fontSize) / 2) ); --input-marginTop-forLabelFocusSpace: 0; /* how much space between each input */ --fiviInput-vertical-spacing: var(--gap-vertical-150); --fiviInput-horizontal-spacing: var(--gap-horizontal); } /* 1.1 Mobile Variables We are going to do a step down approach. We need to account for the head/main/foot left/right padding of column width (*2 as there are left and right). add a couple pixels for good measure. */ @media all and (max-device-width: 1106px), all and (max-width: 1106px) { /* @1056px+96px+2px = 1106px -12 columns -> 8 columns -fiviInput-width goes to 4 columns -should accomidate 2 inputs per row */ :root { --font-size-input: 18px; --font-size-label: 18px; --font-lineheight-label: var(--font-lineheight); --column-width-11: 100%; --column-width-12: 100%; --column-width-10: 100%; --fiviInput-width: var(--column-width-4); --fiviInput-width-partial-main: var(--column-width-2); --fiviInput-width-partial-alt: var(--column-width-2); --fiviInput-width-half: var(--column-width-2); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { /* @786px+48px+2px = 836px -9 columns -> 6 columns -fiviInput-width goes to 3 columns -should accomidate 2 inputs per row */ :root { --font-size: 14px; --font-size-h1: 30px; --font-lineheight-h1: 32px; --font-size-h2: 22px; --font-lineheight-h2: 24px; --font-size-h3: 18px; --font-lineheight-h3: 20px; --column-width-8: 100%; --column-width-9: 100%; --fiviInput-width: var(--column-width-6); --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-3); --fiviInput-width-half: calc( calc(var(--fiviInput-width) - var(--column-spacer)) / 2 ); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { /* @606px+48+2px = 656px -7 columns -> 4 columns -fiviInput-width goes to 4 columns -accomidate 1 input, with an exception or two, inputs go 1 per row */ :root { --column-width-6: 100%; --column-width-7: 100%; --fiviInput-width: var(--column-width-5); --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-2); --fiviInput-width-half: calc( calc(var(--fiviInput-width) - var(--column-spacer)) / 2 ); } } @media (max-device-width: 452px), (max-width: 452px) { /* @426px+24px+2px = 452px - any column width > 2 goes to 100% */ :root { /* --column-width-3: 100%; */ --column-width-4: 100%; --column-width-5: 100%; --fiviInput-width-half: calc(50% - calc(var(--column-spacer) / 2)); } } /* 2. General Elements & Classes */ /* 2.1 General Elements */ html, body { font-size: var(--font-size); line-height: var(--font-lineheight); color: var(--font-color); font-weight: var(--font-weight); font-family: var(--font-family); width: 100%; height: 100%; margin: 0px; padding: 0px; overflow-x: hidden; } h1, h2, h3, h4, .h1, .h2, .h3, .h4, p, label, input, select, textarea, form { margin: 0; margin-block: 0; padding: 0; padding-block: 0; width: 100%; } b { font-weight: 500; } h1, .h1 { font-size: var(--font-size-h1); line-height: var(--font-lineheight-h1); color: var(--font-color-h1); font-weight: var(--font-weight-h1); font-family: var(--font-family-h1); text-align: left; } h2, .h2 { font-size: var(--font-size-h2); line-height: var(--font-lineheight-h2); color: var(--font-color-h2); font-weight: var(--font-weight-h2); font-family: var(--font-family-h2); text-align: left; } h3, .h3 { font-size: var(--font-size-h3); line-height: var(--font-lineheight-h3); color: var(--font-color-h3); font-weight: var(--font-weight-h3); font-family: var(--font-family-h3); text-align: left; /* text-transform: uppercase; */ } h4, .h4 { font-size: var(--font-size-h4); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: var(--font-weight-h4); font-family: var(--font-family-h4); text-align: left; } legend { display: none; } a { color: var(--color-primary); text-decoration: underline; } a:visited { color: var(--color-primary); } a:hover { text-decoration: underline; color: var(--color-primary); } 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-column.flex-align-horizontal-center { align-items: center; } .flex-row.flex-space-between { justify-content: space-between; } .flex-column.flex-space-between { align-items: space-between; } /* gap is almost always going to govern the vertical, horizontal should rarely be modified, if ever. If you need to, add/modify a custom class. */ .flex-gap-25 { gap: var(--gap-vertical-25) var(--gap-horizontal) !important; } .flex-gap-50 { gap: var(--gap-vertical-50) var(--gap-horizontal) !important; } .flex-gap-75 { gap: var(--gap-vertical-75) var(--gap-horizontal) !important; } .flex-gap-100 { gap: var(--gap-vertical) var(--gap-horizontal) !important; } .flex-gap-150 { gap: var(--gap-vertical-150) var(--gap-horizontal) !important; } .flex-gap-200 { gap: var(--gap-vertical-200) var(--gap-horizontal) !important; } /* 2.4 Column Helper Classes */ .column-width-fiviInput { max-width: var(--fiviInput-width); width: 100vw; } .column-width-1 { max-width: var(--column-width); width: 100vw; } .column-width-2 { max-width: var(--column-width-2); width: 100vw; } .column-width-3 { max-width: var(--column-width-3); width: 100vw; } .column-width-4 { max-width: var(--column-width-4); width: 100vw; } .column-width-5 { max-width: var(--column-width-5); width: 100vw; } .column-width-6 { max-width: var(--column-width-6); width: 100vw; } .column-width-7 { max-width: var(--column-width-7); width: 100vw; } .column-width-8 { max-width: var(--column-width-8); width: 100vw; } .column-width-9 { max-width: var(--column-width-9); width: 100vw; } .column-width-10 { max-width: var(--column-width-10); width: 100vw; } .column-width-11 { max-width: var(--column-width-11); width: 100vw; } .column-width-12 { max-width: var(--column-width-12); width: 100vw; } .column-width-full { max-width: 100%; width: 100vw; } /* 2.5 General Helper Classes */ .page-text { font-size: calc(var(--font-size) + 2px); line-height: var(--font-lineheight); font-weight: 300; color: var(--font-color); width: 100%; } .page-text-small { font-size: calc(var(--font-size) - 2px); line-height: var(--font-lineheight); font-weight: var(--font-weight); color: var(--font-color); width: 100%; } .page-text-large { /* font-size: calc(var(--font-size) + 2px); line-height: calc(var(--font-lineheight) + 3px); width: 100%; */ font-size: calc(var(--font-size) + 2px); line-height: var(--font-lineheight); font-weight: var(--font-weight); color: var(--font-color); width: 100%; } .no-wrap { white-space: nowrap; text-wrap: nowrap; width: fit-content; } .spacer-vertical { /* no height is required here, gap should handle it, will double the space between the previous and next elements */ width: 100%; } .fiviHide { display: none !important; } .fi-name > i { padding-right: 1px; margin-left: -2px; } /* 3. Page Structure */ /* 3.1 Page Structure */ .layout { background-color: var(--color-accent-hawkes-blue); width: 100%; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } header, main, footer { width: 100%; display: flex; margin: 0; padding: var(--gap-vertical) var(--gap-horizontal); text-align: left; } header { box-shadow: none; background-color: var(--color-white-dark); padding-top: 0; padding-bottom: 0; } main { flex-grow: 1; margin-bottom: auto; align-items: flex-start; height: 100%; flex-direction: column; padding: 0; } footer { background-color: white; padding-left: 0; padding-right: 0; } header > .layout-container, main > .layout-container, footer > .layout-container { max-width: var(--column-width-12); width: 100%; margin: 0 auto; min-height: 62px; } @media all and (max-device-width: 452px), all and (max-width: 452px) { .layout { gap: 0; } header, main, footer { padding: var(--gap-vertical-50) var(--gap-horizontal-50); } header > .layout-container { min-height: 50px; /* flex-direction: column; */ justify-content: center; } } /* 3.2 Header Styling */ header { /* border-bottom: 2px solid var(--color-secondary-alt2); */ z-index: unset; } header .layout-container { /* max-height: 135px; */ /* height: 135px; */ margin-bottom: 1rem; /* overflow: hidden; */ align-content: center; } .header-logo { width: 300px; /* position: absolute; */ } @media all and (max-device-width: 836px), all and (max-width: 836px) { header > .layout-container { /* flex-direction: column; */ justify-content: center; gap: var(--gap-horizontal-50); padding-top: 2em; } } @media all and (max-device-width: 723px), all and (max-width: 723px) { .header-logo { width: 200px; justify-content: center; } } .bold { font-weight: 600; } .footer-bottom-links a { text-decoration: none; } .line { padding: 0px 6px 0 6px; } /* 3.3 Main Styling */ main > .layout-container { flex-grow: 1; height: 100%; padding: var(--gap-vertical-150) var(--column-spacer) var(--gap-vertical-75) var(--column-spacer); max-width: calc(var(--column-width-12) + calc(var(--column-spacer) * 2)); background-color: var(--color-white-normal); /* outline: 1px solid var(--color-secondary-alt2); */ margin-top: 5em; margin-bottom: 5em; border-radius: 10px; } main > .layout-container > span { /* this is span that start the fivision_PageContent */ display: flex; width: 100%; height: 100%; flex-direction: column; } main .logo-container, main .app-container { width: fit-content; align-self: center; align-items: center; gap: var(--gap-horizontal-75); } main .logo-app-container { padding: var(--gap-vertical-200) 0 0 0; max-width: calc(var(--column-width-12) + calc(var(--column-spacer) * 2)); width: 100%; margin: 0 auto; background-color: white; /* padding-bottom: var(--gap-vertical-75); */ } main .logo-container img { height: 25px; } main .logo-container img.footer-twit-logo { height: 20px; } main .logo-app-container img.footer-in-logo { height: 28px; } main .app-container img { height: 40px; } main .app-container img.footer-itunes-logo { height: 44px; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { main > .layout-container { padding: var(--gap-vertical-150) calc(var(--column-spacer) / 2); max-width: calc(var(--column-width-8) + var(--column-spacer)); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { main > .layout-container { max-width: calc(var(--column-width-6) + var(--column-spacer)); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { main > .layout-container { max-width: calc(var(--column-width-5) + var(--column-spacer)); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { } /* 3.4 Footer Styling */ footer { font-size: 14px; line-height: 24px; font-weight: 300; padding-bottom: 0; padding-top: 0; } footer > .layout-container { font-size: var(--font-size); max-width: 100%; width: 100%; gap: 0; background: var(--color-accent-alt2); } footer > .layout-container > div { display: flex; align-items: center; } footer .primary-footer { background-color: var(--color-primary); color: var(--color-white-normal); padding-top: calc(var(--gap-vertical) * 3); align-items: center; justify-content: center; } footer .primary-footer .footer-item { width: fit-content; max-width: var(--column-width-3); } footer .primary-footer .footer-item:nth-of-type(1) { width: var(--column-width-4); max-width: var(--column-width-4); } footer .primary-footer .footer-header, footer .primary-footer a { color: var(--color-white-normal); text-wrap: nowrap; word-wrap: none; } footer .footer-lower { gap: 0; margin-bottom: calc(var(--gap-horizontal-200) * 2); } footer .footer-divider { flex-wrap: nowrap; align-items: center; padding: 0 2em; } footer .footer-divider > .footer-line { width: 100%; height: 2px; background-color: var(--color-accent-alt); } footer .footer-divider > img { height: 125px; } footer .footer-lower-content { gap: var(--gap-vertical-50); font-size: 12px; padding: 0 2em; } footer .footer-ncua-ehl { align-items: center; } footer .footer-ncua-ehl > img { height: 40px; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .footer-upper { width: var(--column-width-8); padding: 0 2em; } footer { padding: 0; } } @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) { } .app-container-reverse { display: flex; flex-direction: row-reverse; } .logo-app-container > .flex-row { justify-content: center; } /* 4. Page General Containers */ .page-container, #IndividualHandler01 { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-150); width: 100%; } .header-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-50); max-width: var(--column-width-12); width: 100%; /* text-align: center; */ } .section-container { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-vertical); max-width: var(--column-width-12); width: 100%; } .section-header { display: flex; align-items: center; gap: var(--gap-vertical-50); font-size: 22px; /* text-transform: uppercase; */ font-weight: 500; letter-spacing: 1px; text-wrap: nowrap; white-space: nowrap; color: var(--color-primary); border-bottom: 2px solid var(--color-accent-hawkes-blue); padding: 8px; } .section-header:after { /* content: ""; width: 100%; height: 1px; background-color: var(--color-accent-hawkes-blue); */ } .page-navigation-container { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; width: var(--column-width-12); margin-top: var(--gap-vertical-200); } .page-navigation-container .button-link { text-transform: none; } .navigation-forward-container { display: flex; flex-direction: row; align-items: center; gap: var(--gap-horizontal); } .navigation-other-container { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } @media all and (max-device-width: 656px), all and (max-width: 656px) { .page-navigation-container { flex-direction: column; align-items: center; gap: var(--gap-vertical); } .navigation-forward-container { flex-direction: column-reverse; } .navigation-other-container { align-items: center; gap: var(--gap-vertical); } .navigation-other-container .button-link { text-align: center; } } /* 5. Buttons */ .button-primary, .fiviDocumentList #email-submit-btn, .V3StatusCenterLogin .DefaultNextButton { display: inline-flex !important; justify-content: center; align-items: center; min-width: var(--column-width-2); width: fit-content !important; /* height: calc(var(--gap-vertical-200) + 10px); */ height: 46.8px; margin: 0; padding: 0 20px; color: white; font-size: 16px; line-height: 16px; font-weight: 500; background-color: var(--color-primary); border: 2px solid var(--color-primary); border-radius: 3px; text-transform: uppercase; text-decoration: none; } .button-primary:visited { color: white; } .button-primary:hover:not(:disabled), .button-primary:active:not(:disabled), .button-primary:focus:not(:disabled), .fiviDocumentList #email-submit-btn:hover:not(:disabled), .fiviDocumentList #email-submit-btn:active:not(:disabled), .fiviDocumentList #email-submit-btn:focus:not(:disabled), .V3StatusCenterLogin .DefaultNextButton:hover:not(:disabled), .V3StatusCenterLogin .DefaultNextButton:active:not(:disabled), .V3StatusCenterLogin .DefaultNextButton:hover:not(:disabled) { background-color: transparent; color: var(--color-primary); font-weight: 600; box-shadow: none; text-decoration: none; } .button-primary:disabled, .fiviDocumentList #email-submit-btn:disabled { opacity: 0.5; } .button-other, .MinorButton, .fiviAddAnotherButton > a, .fiviDocumentList .modal-footer > button, .V3SummaryButtons.active, .V3SummaryControl .fiviDocumentList .fiviFileUpload + .btn-default, .V3SummaryControl .btn-primary, .fiviDocumentList .btn-default, .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] label { display: inline-flex; justify-content: center; align-items: center; max-width: var(--fiviInput-width); min-width: var(--column-width-2); width: fit-content !important; height: var(--gap-vertical-150); line-height: calc(var(--gap-vertical-150) - 4px); margin: 0; padding: 0 10px; color: var(--color-primary); font-size: 14px; font-weight: 600; background-color: transparent; border: 2px solid var(--color-primary); border-radius: 5px; box-shadow: none; text-transform: lowercase; text-decoration: none; text-align: center; &:hover:not(:disabled), &:active:not(:disabled), &:focus:not(:disabled) { background-color: var(--color-primary); color: white; border-color: var(--color-primary); font-weight: 600; box-shadow: none; text-decoration: none; } &:disabled { opacity: 0.5; } } .button-link, .button-link-alt, .V3StatusCenterLogin .btn-link, .V3SummaryControl .btn-link, .V3SummaryControl .LinkClass, .fiviRemoveBtn:before { /* min-width: var(--column-width-2); */ text-align: left; background-color: transparent; border: none; font-size: 16px; line-height: 18px; font-weight: 600; color: var(--color-primary); text-transform: uppercase; width: fit-content !important; padding: 0; text-decoration: underline; } .button-link-alt { text-transform: uppercase; font-weight: 600; } .button-link:hover:not(:disabled), .button-link:active:not(:disabled), .button-link:focus:not(:disabled), .button-link-alt:hover:not(:disabled), .button-link-alt:active:not(:disabled), .button-link-alt:focus:not(:disabled), .V3StatusCenterLogin .btn-link:hover:not(:disabled), .V3StatusCenterLogin .btn-link:active:not(:disabled), .V3StatusCenterLogin .btn-link:focus:not(:disabled), .V3SummaryControl .btn-link:hover:not(:disabled), .V3SummaryControl .btn-link:active:not(:disabled), .V3SummaryControl .btn-link:focus:not(:disabled), .V3SummaryControl .LinkClass:hover:not(:disabled), .V3SummaryControl .LinkClass:active:not(:disabled), .V3SummaryControl .LinkClass:focus:not(:disabled) { text-decoration: none; font-weight: 600; color: var(--color-primary); } .button-other:disabled, .button-other-alt:disabled, .V3StatusCenterLogin .btn-link:disabled, .V3SummaryControl .btn-link:disabled, .V3SummaryControl .LinkClass:disabled { opacity: 0.5; } .fiviRemoveBtn { color: var(--color-primary); cursor: default; width: 0; max-width: 100%; margin-right: 100%; display: flex; align-items: flex-start; justify-content: flex-start; order: 2; align-self: flex-end; } .fiviRemoveBtn.fa-2x { font-size: var(--font-size); } .fiviRemoveBtn + .tooltip { display: none !important; } .fiviRemoveBtn:before { content: "remove"; cursor: pointer; font-family: var(--font-family); text-transform: none; white-space: nowrap; text-wrap: nowrap; } .fiviRemoveBtn:hover:not(:disabled):before, .fiviRemoveBtn:active:not(:disabled):before, .fiviRemoveBtn:focus:not(:disabled):before { text-decoration: underline; font-weight: 600; color: var(--color-primary); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviRemoveBtn { margin-right: auto; margin-left: auto; justify-content: center; } } #btnNonMember, .start-application > .button-link, .start-application > .button-primary { text-transform: none; } .start-application > .button-link { max-width: 250px; word-wrap: break-word; white-space: normal; text-align: center; } /* 5.1 Button Containers */ .add-another-individual-container { display: flex; align-items: center; justify-content: center; width: 100%; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .add-another-individual-container { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .add-another-individual-container { width: var(--fiviInput-width); } } /* 6. Accordions */ #accordion { display: flex; flex-direction: column; max-width: var(--column-width-12); width: 100%; gap: var(--gap-vertical); } #accordion > .panel { outline: none; padding: 0 0 0 0; border: none; border-radius: 2px; background-color: transparent; box-shadow: none; margin: 0; } #accordion > .panel:has(> .panel-heading.collapsed) { outline: 1px solid var(--color-gray-dark); box-shadow: none; } #accordion > .panel > .panel-heading { display: flex; align-items: center; height: var(--input-height); padding: 0 var(--column-spacer) 0 0; background: white; border: none; border-radius: 5px; padding-left: 20px; } #accordion > .panel > .panel-heading > .panel-title { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; flex-wrap: wrap; position: relative; text-transform: none; padding-left: 20px; } #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-75); border: none; border-radius: 5px; padding: 0 0 var(--column-spacer) 0; padding-left: 20px; } .panel-body::before, .panel-body::after { display: none; } /* this is the accordion open */ #accordion > .panel > .panel-heading:has(+ .collapse.in) { padding-left: 0; background: transparent; transition: padding-left 0.5s ease-in-out; padding-left: 20px; } #accordion > .panel > .panel-heading:has(+ .collapse.in) > .panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); transition: font-size 0.5s ease-in-out; padding-left: 20px; } /* this is the accordion opening */ #accordion > .panel > .panel-heading:has(+ .collapsing) { padding-left: 0; background: transparent; outline: none; transition: padding-left 0.5s ease-in-out; padding-left: 20px; } #accordion > .panel > .panel-heading:has(+ .collapsing) > .panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); outline: none; transition: font-size 0.5s ease-in-out; padding-left: 20px; } /* this is with the accordion closed */ #accordion > .panel > .panel-heading.collapsed:has(+ .collapse:not(.in)) { padding-left: var(--column-spacer); transition: padding-left 0.5s ease-in-out; padding-left: 20px; } #accordion > .panel > .panel-heading.collapsed:has(+ .collapse:not(.in)) > .panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); transition: font-size 0.5s ease-in-out; padding-left: 20px; } /* this is with the accordion closing */ #accordion > .panel > .panel-heading.collapsed:has(+ .collapsing) { padding-left: var(--column-spacer); outline: none; transition: padding-left 0.5s ease-in-out; padding-left: 20px; } #accordion > .panel > .panel-heading.collapsed:has(+ .collapsing) > .panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); outline: none; transition: font-size 0.5s ease-in-out; padding-left: 20px; } /* 7. Inputs and Labels */ /* 7.1 Labels */ label { font-weight: var(--font-weight-label); display: inline; padding: 0 5px; } .DefaultLabelClass, .DefaultLabelClassV3 { display: flex; align-items: center; height: var(--input-height); position: absolute; left: var(--gap-horizontal-50); bottom: 0; font-size: var(--font-size-input); font-weight: var(--font-weight-input); line-height: var(--font-size-label); color: var(--font-color-label); font-family: var(--font-family-label); transition: bottom 0.25s ease-in-out, left 0.25s ease-in-out, font-size 0.25s ease-in-out, font-weight 0.25s ease-in-out; pointer-events: none; width: fit-content; } .FocusLabelClass, .fiviCCCardInfo .fiviTwoInput .defaultlabelclass { height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); bottom: var(--input-focusLabel-offset); left: var(--gap-horizontal-50); font-weight: 600; text-transform: uppercase; padding: 0 5px; background-color: var(--color-white-normal); } .FocusLabelClass:has(+ input:disabled) { background: linear-gradient(var(--color-white-normal) 50%, #eee 50%); } /* v3 specific */ .fiviLabelContainer { display: flex; } .fiviControl > .fiviLabelContainer { position: absolute; height: 100%; width: 100%; pointer-events: none; } .DefaultLabelClassV3, .fiviStaticLabel { display: flex; align-items: center; height: var(--input-height); margin: 0 !important; position: absolute !important; left: var(--gap-horizontal-50) !important; top: unset !important; bottom: 0; font-size: var(--font-size-input) !important; font-weight: var(--font-weight-input); line-height: var(--font-size-label) !important; color: var(--font-color-label); font-family: var(--font-family-label); transition: bottom 0.25s ease-in-out, left 0.25s ease-in-out, font-size 0.25s ease-in-out, font-weight 0.25s ease-in-out !important; } .DefaultLabelClassV3.FocusLabelClass, .fiviStaticLabel { height: var(--input-focusLabel-fontSize); bottom: var(--input-focusLabel-offset) !important; font-size: var(--input-focusLabel-fontSize) !important; left: 0 !important; font-weight: 600; color: var(--font-color-label) !important; text-transform: uppercase; } /* 7.2 Inputs */ .fiviInput, .fiviSCDropDown { display: inline-flex; width: 100vw; /*oh my vw actually worked*/ max-width: var(--fiviInput-width); position: relative; /* flex-grow: 1; */ } .form-control { display: flex; align-items: center; width: 100% !important; height: var(--input-height); padding: 0 var(--gap-horizontal-50); margin-top: var(--input-marginTop-forLabelFocusSpace); font-size: var(--font-size-input); font-weight: var(--font-weight-input); line-height: var(--font-lineheight-input); color: var(--font-color-input); font-family: var(--font-family-input); border: 1px solid var(--color-primary) !important; border-radius: 10px; } .form-control:focus { box-shadow: none; border-width: 2px !important; } .fiviTransparent { color: transparent; } /* v3 specific */ .DefaultFormControlClassV3 { margin-left: 0; margin-right: 0; margin-bottom: 0px; } .fiviNewLine { display: none !important; } /* 7.3 Fivi Input Containers */ .fiviTwoInput, .fiviLongInput { /* can container either input elements or fiviInput containers */ display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-vertical-25) var(--gap-horizontal); flex-wrap: wrap; } .fiviTwoInput > input, .fiviTwoInput > .fiviInput { max-width: var(--fiviInput-width-half); } .fiviTwoInput > .DefaultLabelClass { height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); bottom: var(--input-focusLabel-offset); left: 0; font-weight: 600; text-transform: uppercase; } /* these containers normally contain a bunch of .fiviInput containers */ .fiviMultiInput { display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); flex-wrap: wrap; max-width: 100%; width: 100%; position: relative; } .fiviMultiContainer { display: flex; flex-direction: column; max-width: var(--column-width-full); width: 100%; gap: var(--gap-vertical) var(--gap-horizontal); } .fiviTwoInputContainer { /* Use this when you want two .fiviInputs to take up half the normal width and behave like a standard width .fiviInput. */ display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); flex-wrap: wrap; max-width: var(--fiviInput-width); width: 100vw; position: relative; } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviTwoInput > input { max-width: var(--fiviInput-width-half); } .fiviMultiInput { max-width: var(--fiviInput-width); width: 100%; } } /* v3 specific containers */ .fiviParentControl { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-vertical); max-width: var(--column-width-12); width: 100%; margin: 0; } .fiviControl { display: inline-flex; padding: 0 !important; width: 100% !important; margin-bottom: calc( calc(var(--font-size) - 4px) + var(--gap-vertical-25) ) !important; } /* 7.4 Fivi Checkbox/Radio Buttons */ .fiviCheckBox, .fiviCheckBox > span { display: flex; align-items: center; gap: var(--gap-horizontal-50); max-width: fit-content; } .fiviCheckBox > label, .fiviCheckBox > span > label { text-indent: -3px; font-weight: 500; font-size: calc(var(--font-size-label) - 4px); line-height: var(--font-lineheight-input); } /* v3 checkbox */ .fiviCheckBox:has(> input[type="checkbox"]) { margin: 0 !important; } .fiviCheckBox > input[type="checkbox"] { width: fit-content; margin: 0; } /* 7.5 Validator */ .CtlValidator { position: absolute; line-height: var(--input-height); bottom: -3px; left: 3.5px; z-index: 5; } /* 7.6 Tool Tips */ .DefaultTooltipClass { position: absolute; width: fit-content; } .tooltip-arrow { display: none; } .tooltip-inner { width: max-content; max-width: 300px !important; text-align: left; } /* 7.7 Seperators */ .fiviMultiSeperator { width: 100%; height: 2px; margin: calc(var(--fiviInput-vertical-spacing) - 14px) 0 0 0; } .fiviMultiSeperator::after { content: ""; display: block; width: 100%; height: 100%; max-width: 100%; background-color: var(--color-gray-dark); } .divider { display: flex; align-items: center; justify-content: center; width: 100%; height: 1px; } .divider::before { content: ""; display: block; width: var(--column-width-3); height: 1px; background-color: var(--color-gray-dark); } /* 7.8 Loader */ .section-container > .loader { position: relative; left: unset; right: unset; top: unset; margin: 0 auto; } /* 7.9 Popover v2: .popover v3: .fivisionpopover */ .popover > .arrow, .fivisionpopover > .arrow { display: none; } .fivisionpopover .popover-content { font-size: calc(var(--font-size) - 4px); font-weight: 500; color: red; padding: 0; } .fivisionpopover { position: absolute !important; top: calc( var(--input-height) + var(--input-marginTop-forLabelFocusSpace) ) !important; box-shadow: none; border: none; background-color: transparent; margin-top: var(--gap-vertical-25) !important; } /* 8. fiVISION Controls */ /* 8.1 fiVISION_ErrorSummary v2: #ErrorSummary v3: .fiviErrorSummary */ #ErrorSummary1, .fiviErrorSummary { display: none; } #ErrorSummary1:has(li) { display: block; max-width: var(--column-width-6); width: 100%; margin: 0 auto; } .fiviErrorSummary:has(div) { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } #ErrorSummary1 ul { padding-left: 0; } #ErrorSummary1 li, .fiviErrorSummary > div { font-size: var(--font-size); line-height: var(--font-lineheight); font-weight: 500; color: red; margin-bottom: 0; list-style: none; text-align: center; } /* 8.2 fiVISION_Panel */ .fiviPanel { display: inline-flex; flex-direction: unset; flex-wrap: unset; width: unset; justify-content: unset; } .fiviPanel, .fiviPanel > .fiviPanelContainer { max-width: 100%; /* width: 100%; */ } .page-container > .fiviPanel, .section-container > .fiviPanel, .header-container > .fiviPanel { width: 100%; } /* 8.3 fiVISION_ProductsAndServicesV2 */ .fiviProdServControl { display: flex; flex-wrap: wrap; max-width: var(--column-width-12); width: 100%; gap: var(--gap-vertical); } .fiviProdServControl .DefaultTooltipClass { top: 0; right: 0; } .fiviProdContainer { max-width: var(--column-width-4); width: 100%; min-height: 100px; padding: var(--gap-horizontal-75); position: relative; background: white; border: 2px solid var(--color-gray-dark); border-radius: 3px; box-shadow: none; } .fiviProdContainer:has(input[id*="_ProductCheckbox_"]:checked), .fiviProdContainer:has(input[id*="_GeneralService"]:checked) { background-color: var(--color-accent-hawkes-blue); } .fiviProdServ { display: flex; flex-direction: column; gap: 0; height: 100%; } .fiviProdServ > .fiviCheckBox, .fiviProdServ > .fiviCheckBox > span { flex-direction: row; justify-content: space-between; align-items: center; max-width: 100%; width: 100%; } .fiviProdServ > .fiviCheckBox > div:first-child, .fiviProdServ > .fiviCheckBox > span > div:first-child { order: 3; } .fiviProdServ > .fiviCheckBox > .DefaultTooltipClass, .fiviProdServ > .fiviCheckBox > span > .DefaultTooltipClass { /* position:relative; order: 2; */ left: 305px; bottom: 120px !important; } .fiviProdServ > .fiviCheckBox > label, .fiviProdServ > .fiviCheckBox > span > label { font-size: var(--font-size-label); font-weight: 600; margin-left: -3px; width: fit-content; /* text-wrap: nowrap; */ /* white-space: nowrap; */ text-wrap: wrap; white-space: break-spaces; order: 1; margin-top: 15px; padding: 0 10px; } .fiviProdServ .fiviAddAnotherButton { display: none; width: fit-content; align-self: center; justify-content: flex-end; } .fiviProdContainer:has(input[id*="_ProductCheckbox_"]:checked) .fiviAddAnotherButton { display: flex; } .fiviProdServ .fiviAddAnotherButton > a { text-align: center; display: flex; align-items: center; justify-content: center; margin-top: auto; } .fiviProdPanel { max-width: 100%; display: flex; flex-direction: column; } .fiviProdPanel:has(*):before { content: ""; display: block; height: 2px; width: calc(100% + var(--gap-horizontal-150)); margin-left: calc(var(--gap-horizontal-75) * -1); background-color: var(--color-gray-dark); } .fiviProdPanel > .fiviInput { max-width: 100%; } .fiviProdPanel > .fiviProdInnerPanel:first-of-type, .fiviProdPanel > .fiviInput { margin-top: var(--gap-vertical); } .fiviProdPanel > .fiviProdInnerPanel:not(:first-of-type) { margin-top: var(--gap-vertical); } .fiviProdInnerPanel { display: flex; flex-direction: column; gap: var(--gap-vertical-50) 0; flex-wrap: wrap; width: 100%; padding: 0; position: relative; } .Service_MoreInfo { width: 100%; font-size: 14px; padding: 8px 10px; text-align: center; } .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%; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviProdContainer { max-width: 100%; } .fiviProdServ > .fiviCheckBox > .DefaultTooltipClass, .fiviProdServ > .fiviCheckBox > span > .DefaultTooltipClass { left: 10px; } } /* 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) var(--fiviInput-horizontal-spacing); width: 100%; } .fiviAddress > .fiviSameAs { max-width: calc(calc(var(--fiviInput-width) / 2) - var(--column-spacer)); position: absolute; top: -49px; right: 0; background: var(--color-white-normal); width: fit-content; padding: 0 5px; } .fiviAddress > .fiviSameAs label { font-size: calc(var(--font-size-label) - 4px); line-height: var(--font-lineheight); } .fiviAddress > .DefaultAddressVerifyingClass { font-size: calc(var(--font-size) - 2px); line-height: var(--font-lineheight); font-weight: 500; text-align: center; } @media all and (max-device-width: 836px), all and (max-width: 836px) { .address-container { max-width: 100%; } .address-container > h3 { max-width: 100%; } .fiviAddress > .fiviSameAs { max-width: 100%; position: relative; top: unset; right: unset; } } /* 8.5 fiVISION_PhoneTextBoxV2 --fiviLongInput has the phone field, phone type, and preferred --fiviTwoInput has the phone field and either phone type or preferred --else its just the phone field */ .fiviPhoneControl { margin: 0; max-width: var(--fiviInput-width); } .fiviTwoInput.fiviPhoneControl, .fiviLongInput.fiviPhoneControl { display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-horizontal-25) var(--gap-vertical); flex-wrap: wrap; } .fiviLongInput.fiviPhoneControl { max-width: 100%; width: 100%; } .fiviPhoneControl .CtlValidator { top: calc(var(--input-marginTop-forLabelFocusSpace) + 3px); bottom: unset; } .fiviLongInput.fiviPhoneControl > input.form-control, .fiviTwoInput.fiviPhoneControl > input.form-control { max-width: var(--fiviInput-width-partial-main) !important; width: 100%; } .fiviPhoneControl > .fiviCheckBox, .fiviPhoneControl > select.form-control { max-width: var(--fiviInput-width-partial-alt); width: 100%; } .fiviPhoneControl > .fiviCheckBox { background: transparent; border: none !important; box-shadow: none; padding: 0; } .fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) { flex-wrap: wrap; gap: var(--gap-vertical-50); } .fiviTwoInput.fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass, .fiviLongInput.fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass { top: 0; } .fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass { top: var(--input-marginTop-forLabelFocusSpace); transition: top 0.25s ease-in-out, left 0.25s ease-in-out, font-size 0.25s ease-in-out, font-weight 0.25s ease-in-out; } .fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass.FocusLabelClass { top: 0; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] { width: 100%; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] br { display: none; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_smsOptionsDiv"] { background-color: var(--color-gray-normal) !important; padding: var(--gap-horizontal) !important; display: flex !important; gap: var(--gap-vertical); flex-direction: column; min-width: unset !important; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_smsOptionsDiv"] > span { display: block; width: 100%; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_messageIconDiv"] { display: none; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] { display: flex; gap: var(--gap-horizontal); width: 100%; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] div.form-element { width: calc(calc(100% - var(--gap-horizontal)) / 2); height: fit-content; padding: 0; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] div.form-element > span { width: 100%; height: 100%; display: block; padding: 0; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] label { min-width: unset; width: 100% !important; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] div.form-element > span > input:checked + label { border: 2px solid var(--color-primary-normal); background: var(--color-primary-normal); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviTwoInput.fiviPhoneControl { max-width: var(--column-width-6); width: 100%; } .fiviTwoInput.fiviPhoneControl > input.form-control, .fiviTwoInput.fiviPhoneControl > select.form-control { max-width: var(--column-width-3); } .fiviLongInput.fiviPhoneControl > .fiviCheckBox { margin-top: 0; max-width: 100%; } .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass { bottom: calc(var(--input-height) + var(--gap-horizontal-25)); } .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass { bottom: calc( var(--input-focusLabel-offset) + calc(var(--input-height) + var(--gap-horizontal-25)) ); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviTwoInput.fiviPhoneControl > input.form-control, .fiviTwoInput.fiviPhoneControl > select.form-control { max-width: var(--column-width-2); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviTwoInput.fiviPhoneControl { gap: var(--gap-horizontal-25) var(--gap-vertical); } .fiviTwoInput.fiviPhoneControl > input.form-control, .fiviLongInput.fiviPhoneControl > input.form-control, .fiviTwoInput.fiviPhoneControl > select.form-control, .fiviLongInput.fiviPhoneControl > select.form-control { max-width: 100% !important; } .fiviTwoInput.fiviPhoneControl > select.form-control, .fiviLongInput.fiviPhoneControl > select.form-control { margin-top: 0px; } .fiviPhoneControl > .fiviCheckBox { margin-top: 0; max-width: 100%; } .fiviTwoInput.fiviPhoneControl > label.DefaultLabelClass { bottom: calc(var(--input-height) + var(--gap-horizontal-25)); } .fiviTwoInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass { bottom: calc( var(--input-focusLabel-offset) + calc(var(--input-height) + var(--gap-horizontal-25)) ); } .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass { bottom: calc(calc(var(--input-height) + var(--gap-horizontal-25)) * 2); } .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass { bottom: calc( var(--input-focusLabel-offset) + calc(calc(var(--input-height) + var(--gap-horizontal-25)) * 2) ); } } /* 8.6 fiVISION_IDTypeV2 */ .fiviIDType { max-width: calc(calc(var(--fiviInput-width) * 2) + var(--column-spacer)); } .fiviIDType > div[id*="issueDateDiv"], .fiviIDType > div[id*="expirationDateDiv"] { max-width: var(--fiviInput-width-half); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviIDType > div[id*="issueDateDiv"], .fiviIDType > div[id*="expirationDateDiv"] { max-width: var(--fiviInput-width); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviIDType { max-width: var(--fiviInput-width); } .fiviIDType > div[id*="issueDateDiv"], .fiviIDType > div[id*="expirationDateDiv"] { max-width: var(--fiviInput-width-half); } } /* 8.7 fiVISION_HousingDurationHistory */ .fiviHousingDurationHistory { max-width: var(--column-width-full); } .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width-half); } .fiviHousingDurationHistory center { width: var(--fiviInput-width); } .fiviHousingDurationHistory .DefaultAddressVerifyingClass { width: var(--fiviInput-width); } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .fiviHousingDurationHistory center { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width); } .fiviHousingDurationHistory .DefaultAddressVerifyingClass { width: var(--column-width-4); } .fiviHousingDurationHistory center { width: var(--fiviInput-width); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width-half); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width-half); } } /* 8.8 fiVISION_EmploymentHistory */ .fiviEmpHistoryControl { max-width: var(--column-width-full); } .fiviEmpHistoryControl center { width: 100%; } .fiviEmpHistoryControl .fiviRemoveBtn:before { content: "Remove Prior Employer"; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .fiviEmpHistoryControl center { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviEmpHistoryControl center { width: var(--fiviInput-width); } } /* 8.9 fiVISION_IndividualIncome */ .fiviIncomeControl { max-width: 100%; width: 100%; } .fiviIncomeControl > .fiviMultiContainer { flex-direction: row; flex-wrap: wrap; max-width: 100%; } .fiviIncomeControl > .fiviMultiContainer > div { max-width: 100%; width: 100vw; } .fiviIncomeControl .fiviMultiInput { gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); } .fiviIncomeControl .fiviMultiInput .fiviInput { max-width: var(--fiviInput-width-half); } .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) { display: flex; width: 100%; max-width: 100%; } .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) > span { width: 100%; } .fiviIncomeControl .fiviRemoveBtn:before { content: "Remove Optional Income"; } .fiviIncomeControl input[id*="ntbHoursPerWeek"]::placeholder { color: transparent; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .fiviIncomeControl .fiviMultiInput > .fiviInput, .fiviIncomeControl .fiviMultiInput > .fiviInput > .fiviInput { max-width: var(--fiviInput-width); } .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) { width: var(--fiviInput-width-double); } .fiviIncomeControl .fiviRemoveBtn { left: var(--fiviInput-width); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) { width: var(--fiviInput-width); } .fiviIncomeControl .fiviRemoveBtn { top: var(--input-marginTop-forLabelFocusSpace); left: unset; right: var(--gap-horizontal-25); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { } /* 8.10 fiVISION_IndividualDetails */ .fiviIndividualDetails { width: 100%; } .fiviIndDetails { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } .fiviIndDetails > div { margin-left: var(--gap-horizontal-25); font-weight: 400; } .fiviIndDetails > .fiviIndDetailsSection { margin-left: 0; } .fiviIndDetailsSection > b { font-weight: 500; } .fiviIndDetails > .fiviIndDetailsName { font-size: calc(var(--font-size) + 2px); font-weight: 500; margin-bottom: var(--gap-vertical-25); margin-left: 0; } .fiviIndDetails > .fiviIndDetailsName:not(:first-of-type) { margin-top: var(--gap-vertical-75); } /* 8.11 fiVISION_ProductsAndServicesSelected */ .fiviProdServiceSelected > div { margin: 0 !important; display: flex; flex-direction: column; gap: var(--gap-vertical-75); font-size: calc(var(--font-size) + 2px); font-weight: 500; } .fiviProdServiceSelected > div > ul { padding: 0; list-style: none; display: flex; gap: var(--gap-vertical-25) 1px; flex-wrap: wrap; font-weight: 400; font-size: var(--font-size); } .fiviProdServiceSelected > div > ul > i { margin-left: var(--gap-horizontal-25); } .fiviProdServiceSelected > div > ul > li { margin: var(--gap-vertical-25) 0 0 0; width: 100%; font-size: calc(var(--font-size) + 2px); } .fiviProdServiceSelected > div > ul > li:first-of-type { margin-top: 0; } .fiviProdServiceSelected > div > ul > ul { margin: 0; width: 100%; } .fiviProdServiceSelected > div > br + ul { list-style: unset; margin-left: var(--gap-horizontal-75); margin-top: calc(var(--gap-horizontal-25) * -1); } .fiviProdServiceSelected > div > br + ul > li { margin-left: var(--gap-horizontal-25); font-size: var(--font-size); margin-top: 0; } .fiviProdServiceSelected > div > br + ul > li > b { font-weight: 500; } /* 8.12 fiVISION_ProductRelationships */ .fiviProductRelationship { display: block; overflow-x: auto; white-space: nowrap; border: 1px solid var(--color-gray-dark); border-radius: 5px; max-width: 100%; width: fit-content; box-shadow: none; } .fiviProductRelationship table { overflow-x: auto; white-space: nowrap; border: none; margin: 0; } .fiviProductRelationship tr { display: flex; flex-wrap: nowrap; padding: 0 var(--column-spacer); border-bottom: 1px solid var(--color-gray-dark); } .fiviProductRelationship tr:nth-of-type(odd) { background-color: white !important; } .fiviProductRelationship tr:nth-of-type(even) { background-color: transparent !important; } .fiviProductRelationship tr:last-of-type { border: none; } .fiviProductRelationship td { display: flex; justify-content: center; align-items: center; width: var(--column-width-2); height: calc(var(--font-size) * 3); text-wrap: wrap; white-space: nowrap; padding: 0 !important; line-height: var(--font-lineheight); background-color: transparent !important; border: none !important; font-size: var(--font-size); } .fiviProductRelationship tr > td:first-of-type { justify-content: flex-start; font-weight: 600; width: var(--column-width-3); } .fiviProductRelationship tr[id*="_ServiceRow"] > td:first-of-type { padding-left: var(--column-spacer) !important; font-weight: 400; } .fiviProductRelationship tr:first-of-type > td { font-weight: bold; text-align: left !important; border: none; } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviProductRelationship tr { gap: 0 var(--column-spacer); } .fiviProductRelationship td { width: var(--column-width); } .fiviProductRelationship tr > td:first-of-type { width: var(--column-width-2); } .fiviProductRelationship tr:first-of-type > td { text-align: center !important; } } /* 8.13 fiVISION_DocumentListV2 */ .fiviDocumentList { max-width: var(--column-width-10); width: 100%; display: flex; flex-direction: column-reverse; gap: var(--gap-vertical-75); } .V3SummaryControl .fiviDocumentList { max-width: var(--column-width-12); } .fiviDocumentList > input:first-of-type { align-self: center; } .fiviDocumentList table { /* display: block; */ width: 100%; margin: 0; border: 1px solid var(--color-gray-dark); border-radius: 5px; box-shadow: none; } .fiviDocumentList table > tbody, .fiviDocumentList table > thead { display: flex; flex-direction: column; width: 100%; } .fiviDocumentList table > tbody > tr, .fiviDocumentList table > thead > tr { display: flex; flex-wrap: nowrap; position: relative; padding: 0 var(--column-spacer); border: none; border-radius: 5px; border-bottom: 1px solid var(--color-gray-dark); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .fiviDocumentList table > tbody > tr:nth-of-type(odd) { background-color: white !important; } .fiviDocumentList table > tbody > tr:nth-of-type(even) { background-color: transparent !important; } .fiviDocumentList table > tbody > tr:last-of-type { border: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .fiviDocumentList table th, .fiviDocumentList table td { display: flex; align-items: center; justify-content: center; max-width: var(--column-width-3); width: 100%; padding: var(--gap-horizontal) 0 !important; background-color: transparent !important; } .V3MessagesHeaderClass th { max-width: var(--column-width-3) !important; width: 100% !important; } .fiviDocumentList table td, .fiviDocumentList .V3MessagesHeaderClass th { border: none !important; } .fiviDocumentList table th:first-of-type, .fiviDocumentList table td:first-of-type { justify-content: flex-start; } .fiviDocumentList table th:last-of-type, .fiviDocumentList table td:last-of-type { display: flex; flex-direction: column; align-items: center; max-width: var(--column-width-4); width: 100%; background-color: transparent !important; } .fiviDocumentList table td:last-of-type br { display: none; } .fiviDocumentList table td:last-of-type > span:has(.btn-default) { display: flex; align-items: center; text-align: center; justify-content: center; margin-top: var(--gap-vertical-25); } .fiviDocumentList table td:last-of-type > div[id*="UploadProgressBar_"] { max-width: var(--fiviInput-width); min-width: var(--column-width-2); width: fit-content; display: flex; align-items: center; gap: var(--gap-horizontal-25); margin-top: var(--gap-vertical-25); } .fiviDocumentList .DefaultTooltipClass { display: flex; align-items: center; justify-content: center; width: var(--column-spacer); height: 100%; margin: 0 !important; position: absolute; top: 0; right: var(--gap-horizontal-25); } .fiviDocumentList .ng-modal-dialog { left: 0; width: var(--column-width-6) !important; } .fiviDocumentList .ng-modal-dialog-content { padding: var(--column-spacer); } .fiviDocumentList .ModalContent > div { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .fiviDocumentList .ModalContent br { display: none; } .fiviDocumentList .ModalContent > div > .modal-header { padding: 0; } .fiviDocumentList .ModalContent > div > .modal-header .close { font-size: var(--font-size-h1); color: var(--color-black-dark); opacity: 1; } .fiviDocumentList .ModalContent > div > .modal-header .close:hover { opacity: 0.5; } .fiviDocumentList .ModalContent > div .modal-body-insideItem { text-align: left; margin: 0 !important; display: flex; flex-direction: column; gap: var(--gap-horizontal-50); } .fiviDocumentList .ModalContent > div .text-muted { font-size: var(--font-size); color: var(--font-color); line-height: var(--font-lineheight); } .fiviDocumentList .ModalContent > div .text-muted > br { display: inline-block; } .fiviDocumentList .ModalContent #qrcode { margin: 0 !important; } .fiviDocumentList .ModalContent #UploadWrapper > div:nth-of-type(2) { margin: 0 !important; height: auto !important; border: none !important; text-align: left !important; } .fiviDocumentList .ModalContent #UploadWrapper > div:nth-of-type(2) > span { font-size: var(--font-size-h2) !important; color: var(--font-color-h2) !important; line-height: var(--font-lineheight-h2) !important; font-weight: var(--font-weight-h2); padding: 0 !important; text-align: left !important; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviDocumentList tbody > tr:first-of-type { display: none; } .fiviDocumentList table > tbody > tr { flex-direction: column; padding: calc(var(--column-spacer) / 2); gap: calc(var(--column-spacer) / 2); } .fiviDocumentList table > tbody > tr > td { display: flex; flex-direction: column; align-items: center; font-size: var(--font-size-h3); max-width: 100%; padding: 0 !important; width: 100%; } .fiviDocumentList table > tbody > tr > td::before { font-size: var(--font-size-h4); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: 600; font-family: var(--font-family-h4); } .fiviDocumentList table > tbody > tr > td:nth-of-type(1):before { content: "Applicant Name"; } .fiviDocumentList table > tbody > tr > td:nth-of-type(2):before { content: "Document Type"; } /* status center column names */ .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(1):before { content: "Application Number"; } .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(2):before { content: "Individual"; } .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(3):before { content: "Document Type"; } .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(4):before { content: "Upload"; } .fiviDocumentList table > tbody > tr > td:nth-of-type(3), .fiviDocumentList table td:last-of-type { max-width: 100%; } .fiviDocumentList .DefaultTooltipClass { position: relative; height: fit-content; width: 100%; margin: var(--gap-vertical-25) 0 !important; } } @media all and (min-device-width: 656px), all and (min-width: 656px) { .fiviDocumentList > input:first-of-type { display: none !important; } } /* 8.14 fiVISION_DisclosuresList */ .fiviDisclosureList { display: flex; flex-direction: column; gap: var(--gap-vertical-50); width: 100%; padding-left: var(--gap-horizontal-150); } .fivi-disclosure-modal > .fiviDisclosure-checkbox-container { display: flex; gap: var(--gap-horizontal-50); align-items: center; } .fivi-disclosure-modal > .fiviDisclosure-checkbox-container label { font-weight: 500; font-size: calc(var(--font-size) + 2px); width: fit-content; } .fivi-disclosure-modal > .fiviDisclosure-modal-button { margin-bottom: var(--gap-vertical-50); } .fivi-disclosure-modal > .fiviDisclosure-checkbox-container > i { padding: 0 !important; } .fivi-disclosure-modal .modal-body > div:last-of-type { display: flex; flex-direction: row-reverse; justify-content: space-between; padding: 0 var(--gap-horizontal); } .fivi-disclosure-modal .modal-header { font-size: var(--font-size-h3); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: var(--font-weight-h4); font-family: var(--font-family-h4); } .agreement-confirmation { width: 100%; padding: 1em; } .disclosure-ul { padding: 1em 3em 0 3em; margin-bottom: -1em; } .disclosure-ul > ul > li:nth-child(3) { padding-bottom: 1em; } .W-8BEN-text { margin: -1em 0; padding-left: 2.8em; } /* 8.15 fiVISION_IDAuthenticationQuestions */ .fiviIDAuth { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap-vertical-75) var(--gap-horizontal-25); width: 100%; } .fiviIDAuth br { display: none; } .fiviIDAuth > span:has(label) { display: flex; gap: var(--gap-horizontal-25); max-width: 95%; width: fit-content; font-size: var(--font-size-h4); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: var(--font-weight-h4); font-family: var(--font-family-h4); text-align: left; } .fiviIDAuth > span > label { font-weight: 400; font-size: calc(var(--font-size-label) - 2px); } .fiviIDAuth > span:has(b) { width: fit-content; } .fiviIDAuth > div:has(table) { width: 100%; } .fiviIDAuth tbody { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } .fiviIDAuth tbody td { display: flex; align-items: center; gap: var(--gap-horizontal-25); } .fiviIDAuth tbody td > label { font-size: calc(var(--font-size-label) - 2px); font-weight: 300; line-height: var(--font-size-label); color: var(--font-color-label); font-family: var(--font-family-label); } /* 8.16 fiVISION_ProductFundingV2 */ .fiviProductFunding { display: flex; flex-direction: column; gap: var(--gap-vertical-75); max-width: var(--column-width-10); width: 100%; align-self: center; } .fiviProductFunding > .fiviProductFundingItem, .fiviProductFunding > .fiviFundingAmount { margin: 0; padding: 0; width: 100%; } .fiviProductFunding > .fiviProductFundingItem > .fiviInput { max-width: 100%; align-items: center; justify-content: space-between; gap: var(--column-spacer); } .fiviProductFunding > .fiviProductFundingItem > .fiviInput > input, .fiviProductFunding > .fiviProductFundingItem > .fiviInput > label { margin-top: 0; max-width: var(--column-width-3); } .fiviProductFunding > .fiviProductFundingItem > .fiviInput > label { display: flex; flex-direction: column; gap: var(--gap-vertical-50); font-size: var(--font-size-label); font-weight: 500; } .fiviProductFundingItem > .fiviInput > label:after { content: "funding required"; color: red; font-size: calc(var(--font-size) - 2px); font-style: italic; padding-left: var(--gap-horizontal-50); } .fiviProductFundingItem > .fiviInput:has(> input[min="0"]) > label:after { content: "funding optional"; color: var(--color-primary-normal); } .fiviProductFunding > .fiviProductFundingItem > .fiviInput > .CtlValidator { left: -5px; } .fiviProductFunding > .fiviFundingAmount { display: flex; justify-content: space-between; border-top: 1px solid var(--color-gray-dark); padding-top: var(--gap-vertical-50); } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviProductFunding > .fiviProductFundingItem > .fiviInput { flex-direction: column; gap: var(--gap-vertical-50); } } /* 8.17 fiVISION_ACH */ .fiviACHControl > span[id*="_Consent"] { max-width: 100%; width: 100%; order: 7; } .fiviACHControl > span[id*="_tbFirstName"] { order: 1; } .fiviACHControl > span[id*="_tbLastName"] { order: 2; } .fiviACHControl > span[id*="_tbRoutingNumber"] { order: 3; } .fiviACHControl > span[id*="_tbAccountNumber"] { order: 4; } .fiviACHControl > .fiviACHStatus { order: 5; } .fiviACHControl > .fiviACHcbCont { order: 6; } .fiviACHControl > .fiviACHStatus, .fiviACHControl > .fiviACHcbCont { max-width: var(--fiviInput-width); width: 100%; } .fiviACHControl > .fiviACHStatus > span { font-size: calc(var(--font-size) - 2px); line-height: var(--font-lineheight); font-weight: 400 !important; font-style: italic; } .fiviACHControl > .fiviACHcbCont { display: flex; flex-direction: row; gap: var(--column-spacer); } .fiviACHControl > .CtlValidator { top: var(--input-marginTop-forLabelFocusSpace); bottom: unset; z-index: 5; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviACHControl > span[id*="_tbAccountNumber"] { order: 5; } .fiviACHControl > .fiviACHStatus { order: 4; } .fiviACHControl > .fiviACHcbCont { order: 6; } } /* 8.18 fiVISION_CreditCardV2 */ .fiviCreditCardControl > .fiviCCCardInfo > .DefaultAddressVerifyingClass { position: absolute; left: var(--fiviInput-width); transform: translateX(-100%); font-size: calc(var(--font-size) - 2px); width: 100%; text-align: right; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput { gap: var(--gap-vertical-25) 0; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > label { /* position: relative; */ /* bottom: unset; */ } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > select, .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > .TwoControls { width: calc(100% / 3) !important; margin: 0; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > .TwoControls > .DefaultTooltipClass { right: var(--gap-horizontal-25); height: var(--input-height); display: flex; align-items: center; justify-content: center; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > select:nth-of-type(1) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-color: transparent !important; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > select:nth-of-type(2) { border-radius: 0; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > .TwoControls > input { margin: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: transparent !important; } /* 8.19 fiVISION_ApplicantWithdraw */ .fiviApplicantWithdraw { max-width: 100%; width: 100%; display: flex; flex-direction: column; gap: var(--gap-vertical-75); position: relative; } .fiviApplicantWithdraw > .CtlValidator { top: -3px; bottom: unset; left: -8px; } /* 8.20 fiVISION_ProgressBar */ .progress-container { flex-grow: 1; } .journey-bar-icons { display: none; } .journey-bar { margin-bottom: 0; display: flex; justify-content: flex-end; align-items: flex-end; width: 100%; } .journey-bar > tbody > tr { display: flex; gap: var(--gap-horizontal-50); } .journey-bar > tbody > tr > td { border-top: none; padding: 0; } .journey-bar-group { display: flex; flex-direction: column-reverse; align-items: center; min-width: var(--column-width); gap: var(--gap-vertical-25); } .journey-bar-group > span { opacity: 33%; } .journey-bar-group > span { padding: 0 var(--gap-horizontal-25); font-size: calc(var(--font-size) - 2px); font-weight: 500; } .journey-bar-group:after { content: " "; width: 100%; height: 10px; border-radius: 5px; } .journey-bar-group.previous-group:after { background-color: color-mix( in srgb, var(--color-secondary-alt2) 66%, transparent ); } .journey-bar-group.current-group:after { background-color: var(--color-secondary-alt1); } .journey-bar-group.current-group > span { opacity: 100%; } .journey-bar-group.future-group:after { background-color: color-mix( in srgb, var(--color-secondary-alt1) 20%, transparent ); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .journey-bar { justify-content: flex-start; } .journey-bar-group > span { display: none; } } @media all and (max-device-width: 638px), all and (max-width: 638px) { .journey-bar { justify-content: center; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .progress-container { width: 100%; /* display: none; */ flex-grow: unset; } .journey-bar { justify-content: center; } .journey-bar > tbody { width: 100%; } .journey-bar > tbody > tr { width: 100%; } .journey-bar-group { min-width: calc(calc(100% / 5) - var(--gap-horizontal-50)); } } /* 8.21 fiVISON_IndividualHandler */ #IndividualHandler01 { width: 100%; } /* 8.22 Status Center Login (v3) */ .V3StatusCenterLogin { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-vertical-150); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .V3StatusCenterLogin div, .V3StatusCenterLogin > div > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-vertical); } .V3StatusCenterLogin > div span:has(> .btn-link) { display: block; } .V3StatusCenterLogin br { display: none; } .V3StatusCenterLogin > #pnlShowMFACode .fiviCheckBox { display: flex; } /* 8.23 Status Center Summary (v3) */ .V3SummaryControl { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-150); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .V3SummaryControl span:has(> button.btn-link) { /* we need to add some structure to spans that have buttons. */ display: inline-flex; align-items: center; } .V3SummaryControl br { display: none; } .V3StatusCenterLogin > #pnlEnterPassword, .V3StatusCenterLogin > #pnlShowCreatePass, .V3StatusCenterLogin > #pnlShowMFACode, .V3StatusCenterLogin > #pnlShowMFADropdown { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-vertical); max-width: var(--column-width-12); width: 100%; margin: 0; } @media all and (max-device-width: 769px), all and (max-width: 769px) { .V3SummaryControl { gap: var(--gap-vertical); } } /* 8.23.1 SC Summary Header (v3) */ .V3SummaryControl > header { display: block; box-shadow: none; padding: 0; background-color: transparent; border-bottom: none; } .V3SummaryHeader { background-image: none; background-color: transparent; border: none; box-shadow: none; } .V3SummaryHeader:before, .V3SummaryHeader:after { display: none; } /* 8.23.1.1 SC Summary Header Mobile Badge Hiding this and handling mobile styling differently. If you want to use it un-display-none the navbar-header and uncomment out the commented out bits. */ .V3SummaryHeader > #navbar-header { display: none !important; } /* .V3SummaryHeader > #navbar-header .V3SummaryCollapsedMenuButton { border: 2px solid var(--color-secondary-light); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; margin: 0 var(--gap-horizontal-50) 0 0; } .V3SummaryHeader > #navbar-header .V3SummaryCollapsedMenuButton > .icon-bar { background-color: var(--color-primary); } .V3SummaryHeader > #navbar-header .V3SummaryBadge { right: var(--gap-vertical-25); left: unset; background-color: var(--color-secondary-dark); z-index: 2; } .V3SummaryHeader > #navbar-header #mobile-badge.V3SummaryBadge { top: calc(var(--gap-vertical-50) * -1); } */ /* 8.23.1.2 SC Summary Header Icons/Navigation id of topNav */ .V3SummaryHeader > #topNav { display: block !important; width: 100%; padding: 0; } .V3SummaryHeader > #topNav > ul { display: flex; width: 100%; justify-content: center; gap: var(--gap-horizontal) var(--gap-vertical); } .V3SummaryHeader > #topNav:before, .V3SummaryHeader > #topNav:after, .V3SummaryHeader > #topNav > ul:before, .V3SummaryHeader > #topNav > ul:after { display: none; } .V3SummaryHeader > #topNav > ul > .nav-item { margin: 0; padding: var(--gap-vertical-75); min-width: 100px; } .V3SummaryHeader > #topNav > ul > .nav-item.active { border: 1px solid var(--color-secondary-light); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; } .V3SummaryHeader > #topNav > ul > .nav-item > a { display: flex; flex-direction: column; gap: var(--gap-vertical-25); padding: 0; margin: 0; font-size: calc(var(--font-size) + 2px); font-weight: 500; color: var(--color-primary) !important; fill: var(--color-primary) !important; } .V3SummaryHeader > #topNav > ul > .nav-item.active > a { background-image: none; background-color: transparent; box-shadow: none; color: var(--color-secondary-dark) !important; fill: var(--color-secondary-dark) !important; } .V3SummaryHeader > #topNav > ul > .nav-item .badge { right: var(--gap-vertical-25); left: unset; background-color: var(--color-secondary-dark); z-index: 2; } .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge { right: var(--gap-vertical-75); } @media all and (max-device-width: 992px), all and (max-width: 992px) { .V3SummaryHeader > #topNav > ul > .nav-item { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--gap-horizontal-25); } .V3SummaryHeader > #topNav > ul > .nav-item .badge, .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge { position: relative; width: fit-content; height: fit-content; right: unset; } .V3SummaryHeader > #topNav > ul > .nav-item > a { flex-direction: row; } .V3SummaryHeader > #topNav > ul > .nav-item > a > svg { margin: 0 0 0 0; } } @media all and (max-device-width: 769px), all and (max-width: 769px) { .V3SummaryHeader > #topNav { border: none; } .V3SummaryHeader > #topNav > ul { flex-wrap: wrap; margin: 0; gap: var(--gap-vertical-25); border: none; justify-content: space-between; } .V3SummaryHeader > #topNav > ul > .nav-item { width: calc(50% - var(--gap-vertical-25)); justify-content: center; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .V3SummaryHeader > #topNav > ul > .nav-item { justify-content: center; padding: var(--gap-vertical-50); } .V3SummaryHeader > #topNav > ul > .nav-item > a { flex-direction: column; justify-content: center; } .V3SummaryHeader > #topNav > ul > .nav-item .badge, .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge { position: absolute; right: var(--gap-vertical-25); top: var(--gap-vertical-50); left: unset; background-color: var(--color-secondary-dark); z-index: 2; } } /* 8.23.2 SC Summary Content */ .V3SummaryControl > article { margin: 0; } .V3SummaryControl .container-fluid { padding: 0; } .V3SummaryControl .container-fluid:before, .V3SummaryControl .container-fluid:after { display: none; } .V3SummaryControl .container-fluid > div { display: flex; flex-direction: column; gap: var(--gap-vertical-75); } .V3SummaryControl .headline-container { padding: 0; background: transparent; margin: 0; text-align: left; } .V3SummaryControl .headline-container > h1 { font-size: var(--font-size-h1); text-transform: capitalize; font-weight: var(--font-weight-h1); text-align: center; } /* 8.23.2.1 SC Summary Content Home */ .V3SummaryControl .container-fluid > div > .task { display: flex; justify-content: flex-start; align-items: center; gap: var(--gap-horizontal-50); margin: 0; border: 1px solid var(--color-secondary-light); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; } .V3SummaryControl .container-fluid > div > .task > .task-icon { fill: var(--color-primary); } .V3SummaryControl .container-fluid > div > .task > .task-content { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-horizontal-50); margin: 0; } .V3SummaryControl .container-fluid > div > .task .task-text { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } .V3SummaryControl .container-fluid > div > .task .task-title { color: var(--color-primary); font-size: var(--font-size-h3); text-transform: capitalize; margin: 0; } .V3SummaryControl .container-fluid > div > .task .task-description { font-size: var(--font-size); color: var(--font-color); } /* 8.23.2.2 SC Summary Content Messages */ .V3SummaryControl header:has(#nav-messages.active) + article .headline-container, .V3SummaryControl header:has(#nav-messages.active) + article .headline-container > span { display: flex; flex-direction: column; gap: var(--gap-vertical-150); align-items: center; } .V3SummaryControl header:has(#nav-messages.active) + article .headline-container > span div:has(.btn-primary) { margin-bottom: var(--gap-vertical-150); text-align: center; } .V3SummaryControl .fiviSCSendMessage > div { display: flex; flex-direction: column; gap: var(--gap-vertical-75); } @media all and (max-device-width: 452px), all and (max-width: 452px) { .V3SummaryControl .container-fluid > div > .task > .task-icon { display: none; } } /* 8.24 v3TextBox ***MOVE TO TOP OF fivi Controls when converting to v3*** its a base level control, it should be first in the hierarchy of controls for now its only SC so here is fine. */ .fiviTextBox { flex-wrap: nowrap; } /* 8.25 fiVISION_FinicityFundingAccountVerification */ .fiviFinicity, .fiviFinicity #RealTimeInput, .fiviFinicity .fivi-verifyNow-contents { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-vertical-50); font-size: calc(var(--font-size) + 2px); } .fiviFinicity #RealTimeInput > div { width: 100% !important; text-align: center; } .fivi-verifyNow-btn-contanier button:disabled { display: none; } #FinicityStatusLabel { font-weight: 600 !important; color: var(--color-primary); } /* 8.26 fiVISION_OneTimePasscode */ .fiviOneTimePasscode .fiviPanelContainer { width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: var(--gap-horizontal); } .fiviOneTimePasscode .fiviOTPButtonGroup { display: flex; align-items: center; justify-content: flex-end; gap: var(--gap-horizontal); margin-top: var(--gap-horizontal-50); } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviOneTimePasscode .fiviOTPButtonGroup { flex-direction: column-reverse; gap: var(--gap-vertical); } } /* 8.27 fiVISION_WorkflowSurvey */ .fiviWorkflowSurvey { width: 100%; max-width: 100%; } .fiviWorkflowSurvey > div { width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: var(--gap-horizontal); } .fivi-workflow-survey-item { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .fivi-workflow-survey-question > label { font-weight: 600; } .fivi-workflow-survey-answers { display: flex; flex-direction: column; gap: var(--gap-vertical-25); padding-left: var(--gap-horizontal); } .fivi-workflow-survey-answers .fiviCheckBox > label { font-weight: 400; } .ErrorMessage.fivi-workflow-survey-error { font-weight: 600; font-size: calc(var(--font-size) - 2px); } /* 8.28 fiVISION_ProveIndividualLookup */ .fiviProveIndividualLookup { justify-content: center; } .fiviProveIndividualLookup .prove-direction-buttons { display: flex; flex-direction: row-reverse; justify-content: space-between; width: var(--fiviInput-width); } @media all and (max-device-width: 453px), all and (max-width: 453px) { .prove-container { width: 100%; } } /* 8.29 fiVISION_ShoppingCart */ .shopping-container .shoppingCart-img-container { position: relative; display: flex; height: 30px; width: fit-content; display: none; } .shopping-container .shoppingCart-img-container > .shoppingCart-img { height: 30px; filter: invert(17%) sepia(88%) saturate(7378%) hue-rotate(243deg) brightness(84%) contrast(109%); } .shopping-container .shoppingCart-img-container > label { position: absolute; width: fit-content; z-index: 1; bottom: -5px; right: -15px; overflow: visible; font-weight: 500; } .shopping-container .modal-dialog { max-width: var(--column-width-6); width: 100%; } .shopping-container .modal-content { padding: var(--gap-vertical-50) var(--gap-horizontal-75); display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .shopping-container .DefaultModalHeaderClass { display: flex; text-wrap: nowrap; white-space: nowrap; font-size: var(--font-size-h3); font-weight: var(--font-weight-h2); border-bottom: 2px solid var(--color-accent-alt); padding: 0 0 var(--gap-vertical-50) 0; } .shopping-container .DefaultModalHeaderClass > label { margin-left: var(--gap-horizontal-25); font-size: var(--font-size-h3); font-weight: var(--font-weight-h2); } .shopping-container .modal-body { padding: 0; display: flex; flex-direction: row; gap: var(--gap-vertical-50); flex-wrap: wrap; justify-content: space-between; } .shopping-container .modal-body hr, .shopping-container .modal-body br { display: none; } .shopping-container .modal-body span:has(> input) { display: flex; align-items: center; } .shopping-container .modal-body #shoppingCartOneProductRequiredMessage { width: 100%; } .shopping-container .modal-body #shoppingCartOneProductRequiredMessage > center { text-align: left; font-size: var(--font-size); padding-bottom: var(--gap-vertical-50); border-bottom: 1px solid var(--color-accent-alt); } .shopping-container .modal-body > div[id*="ShoppingCartIcon"], .shopping-container .modal-body > div[id*="scShoppingCart"] { width: 100% !important; background-color: unset !important; padding: 0 0 var(--gap-vertical-50) 0 !important; height: fit-content !important; display: flex; flex-direction: row; border-bottom: 1px solid var(--color-accent-alt); } .shopping-container .modal-body > div[id*="ShoppingCartIcon"]:has(> .pull-right), .shopping-container .modal-body > div[id*="scShoppingCart"]:has(> .pull-right) { flex-wrap: wrap; } .shopping-container .modal-body > div[id*="ShoppingCartIcon"] > span:first-of-type, .shopping-container .modal-body > div[id*="scShoppingCart"] > span:first-of-type { width: 100%; text-wrap: nowrap; white-space: nowrap; font-size: var(--font-color-h3); font-weight: var(--font-weight-h3); display: flex; align-items: center; } .shopping-container .modal-body > div .pull-right:disabled { display: none; } .shopping-container .modal-body #btnCartChange { display: flex; align-items: center; } /* 9. Page Specific */ /* 9.1 Default Page */ main > .layout-container:has(.page-Default-Content) { background-color: unset; outline: none; } main > .layout-container:has(.page-Default-Content) .logo-app-container { background-color: var(--color-accent-hawkes-blue); } .page-Default-Content .default-start { justify-content: flex-end; position: relative; margin: var(--gap-vertical-150) 0 var(--gap-vertical-200) 0; } .page-Default-Content .start-application { background-color: var(--color-accent-alt); padding: var(--gap-vertical) var(--gap-vertical-200); border-radius: 10px; gap: var(--gap-vertical-75); align-items: center; position: absolute; z-index: 2; left: -20px; top: 71px; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .page-Default-Content .start-hero-container { display: flex; } .start-application { z-index: 3 !important; } } .page-Default-Content .start-application .button-primary, .page-Default-Content .start-application #IndividualHandler01 { width: var(--column-width-3) !important; align-self: center; height: 46.8px; } .page-Default-Content .start-hero-container { background-image: url("/_assets/layoutcontent/20082/default/mom-dad-child-sitting.jpg"); height: 400px; background-position: 65%; background-size: auto 100%; border-radius: 10px; position: relative; } .page-Default-Content .start-hero-container img.hero-mini-logo { height: 125px; position: absolute; top: -3px; left: -5px; z-index: 2; } .page-Default-Content .start-hero-container img.hero-image { display: none; } /* Remove hero img and center start-application */ @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .page-Default-Content .start-hero-container { display: none; } .default-start { margin: 0 !important; } .page-Default-Content .default-start { justify-content: center; } .page-Default-Content .start-application { position: relative; top: 0; left: 0; width: 100%; } .lets-get-started-container { max-width: var(--column-width-5); } .page-Default-Content .thumbnail { max-width: var(--column-width-4); } .what-you-need { font-size: calc(var(--font-size) - 2px); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .lets-get-started-container { max-width: 100%; height: fit-content; } .lets-get-started-container > #IndividualHandler01 { align-items: flex-start; } .default-thumbnail-container { max-width: 100%; width: 100%; flex-direction: row; flex-wrap: nowrap; } .page-Default-Content .thumbnail { max-width: 100%; min-height: fit-content; } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .default-thumbnail-container { flex-wrap: wrap; } .default-thumbnail-container > .thumbnail { min-height: fit-content; } .thumbnail-call-to-action, .thumbnail-call-to-action > #IndividualHandler01 { flex-direction: row; justify-content: flex-end; } .what-you-need { font-size: var(--font-size); } .what-you-need-header, .what-you-need { display: none; } .lets-get-started-container > h2 > .DefaultTooltipClass { display: inline; } } @media all and (max-device-width: 525px), all and (max-width: 525px) { } @media all and (max-device-width: 452px), all and (max-width: 452px) { .page-Default-Content .thumbnail { max-width: var(--column-width-4); } .lets-get-started-container { align-items: center; } .lets-get-started-container > #IndividualHandler01 { align-items: center; } } /* 9.2 Status Center - Default */ .page-StatusCenterDefault { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-200); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .page-StatusCenterDefault > .page-navigation-container { flex-direction: column; align-items: center; margin-top: 0; } /* 9.3 Status Center - Status Center */ .page-StatusCenter { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-200); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .page-StatusCenter > .page-navigation-container { flex-direction: column; align-items: center; margin-top: 0; } /* 9.4 Funding Method */ .funding-method-container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: var(--column-width-12); gap: var(--gap-vertical) var(--gap-horizontal); } .funding-method-container > .fiviPanel > .fiviMultiInput, .funding-method-container > .fiviPanel { width: 100%; max-width: var(--column-width-3); } .funding-method-container .fiviCheckBox > div { display: none; } .funding-method-container .fiviCheckBox > label { display: flex; align-items: center; justify-content: center; width: var(--column-width-3); height: var(--input-height); border: 2px solid var(--color-gray-dark); border-radius: 2px; padding: 0 var(--column-spacer); text-align: center; cursor: pointer; } .funding-method-container .fiviCheckBox > div.checked + label { color: #fff; border-color: var(--color-primary); background-color: var(--color-primary); } .funding-method-container .fiviCheckBox > label:hover { color: var(--color-primary-normal); border-color: var(--color-primary-normal); } #pnlSelectFundingMethodDetails .fiviPanel { width: 100%; } .funding-detail { padding: var(--column-spacer); outline: 2px solid var(--color-gray-dark); gap: var(--gap-vertical-50); width: 100%; max-width: calc(var(--fiviInput-width) + calc(var(--column-spacer) * 2)); margin: 0 auto; } .funding-detail .section-header, .funding-detail .page-text-small, .funding-detail .page-text, .funding-detail .page-text-large { text-align: center; text-wrap:auto; } .funding-detail .section-header:before { /* content: ""; */ /*display: inline;*/ /* width: 100%;*/ /* height: 1px;*/ /* background-color: var(--color-gray-dark); */ } .funding-detail .section-header { display: flex; justify-content: center; } .funding-detail .fiviInput, .funding-detail .fiviTwoInput { width: 100%; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .funding-method-container > .fiviPanel { width: 100%; max-width: calc(50% - calc(var(--column-spacer) / 2)); } .funding-method-container > .fiviPanel > .fiviMultiInput { max-width: 100%; width: 100%; } .funding-method-container > .fiviPanel > .fiviMultiInput > .rb-as-button { max-width: 100%; } .funding-method-container .fiviCheckBox > label { width: 100%; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .funding-method-container > .fiviPanel { width: 100%; max-width: 100%; } } /* 9.5 eSign Agreement */ .page-eSignAgreement #lnkESignAgreement, .page-eSignAgreement .fiviCheckBox > label { font-size: calc(var(--font-size) + 2px); } /* 9.6 Disclosure */ .page-Disclosures .page-text.disclosure-click-text { font-weight: 600; color: red; } /* 9.7 Select Category */ .product-category-container { width: 100%; max-width: var(--column-width-9); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--column-spacer); justify-content: center; } .product-category-container > div, .product-category-container > .fiviPanel div[class*="product-category-"] { display: block; width: 100%; max-width: var(--column-width-3); height: calc(var(--column-width-2) + var(--column-width-half)); } .product-category-container .fiviInput.fiviCheckBox { max-width: 100%; height: 100%; background-color: var(--color-accent-onahau); border: 2px solid transparent; border-radius: 10px; justify-content: center; &:has(> .icheckbox_square-grey.checked) { background-color: var(--color-accent-hawkes-blue); border-color: var(--color-primary); } &:has(> .icheckbox_square-grey.hover) { background-color: var(--color-accent-alt); border-color: var(--color-primary); } } .product-category-container .fiviInput.fiviCheckBox > .icheckbox_square-grey { background-image: none; background-color: transparent; position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; } .product-category-container .fiviInput.fiviCheckBox > .icheckbox_square-grey > input, .product-category-container .fiviInput.fiviCheckBox > .icheckbox_square-grey > ins { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; } .product-category-container .fiviInput.fiviCheckBox > label { text-align: center; font-size: var(--font-size-h3); display: flex; flex-direction: column; gap: var(--gap-vertical); justify-content: flex-start !important; padding-top: 3.2em; } .product-category-savings, .product-category-checking, .product-category-moneymarket, .product-category-certificates, .product-category-clubaccounts { text-align: center; } .category-icon { width: 45px; color: var(--color-primary); padding-top: 1em; position: relative; top: 90px; z-index: 10; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .product-category-container { justify-content: center; } .product-category-container > div, .product-category-container > .fiviPanel div[class*="product-category-"] { max-width: var(--column-width-2); height: var(--column-width-2); } .category-icon { top: 80px; } .product-category-container .fiviInput.fiviCheckBox > label { padding-top: 3.25em; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .product-category-container > div, .product-category-container > .fiviPanel div[class*="product-category-"] { max-width: 100%; height: var(--column-width-2); } } /* 9.8 Select Product */ .requested-products-container { width: 100%; display: flex; align-items: flex-start; justify-content: flex-start; } .requested-products-banner { position: relative; display: flex; flex-direction: column; width: 100%; gap: 0; max-width: var(--column-width-5); padding: calc(var(--column-spacer) * 0.5) var(--column-spacer); background-color: var(--color-accent-alt2); border-radius: 10px; transition: all 0.75s ease; border: 2px solid var(--color-accent); display: none; } .requested-products-banner:has(> .fivi-expanded) { gap: var(--gap-vertical); } .requested-products-banner > h3 { text-align: center; text-transform: none; font-weight: 500; } .requested-products-banner > .requested-products { display: flex; flex-direction: column; gap: var(--gap-vertical-50); height: 0; overflow: hidden; padding-top: 0; transition: all 0.5s ease; } .requested-products-banner > .requested-products .product-requested-item { display: flex; justify-content: space-between; align-items: center; border-top: 2px solid var(--color-accent); padding-top: var(--gap-vertical-50); } .requested-products-banner > .requested-products .requested-product-label { font-size: var(--font-size-h4); font-weight: 500; } .requested-products-banner .requested-expander { position: absolute; font-weight: 400; font-size: 30px; cursor: pointer; top: calc(var(--column-spacer) * 0.25); right: calc(var(--column-spacer) * 0.25); } .products-container .fiviProdContainer { padding: 0; border: none; border-radius: 10px; position: relative; padding-bottom: var(--gap-vertical-200); background-color: var(--color-accent-onahau); } .products-container .fiviProdServ > .fiviCheckBox .icheckbox_square-grey { background-image: none; background-color: transparent; position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; display: none; } .products-container .fiviProdServ > .fiviCheckBox .icheckbox_square-grey > input, .products-container .fiviProdServ > .fiviCheckBox .icheckbox_square-grey > ins { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; } .products-container .fiviProdServ > .fiviCheckBox, .products-container .fiviProdServ > .fiviCheckBox > span:disabled { width: 100%; background-color: transparent; } .products-container .fiviProdServ:has(> .Product_MoreInfo) > .fiviCheckBox, .products-container .fiviProdServ:has(> .Product_MoreInfo) > .fiviCheckBox > span:disabled, .products-container .fiviProdServ:has(> .fiviProdPanel) > .fiviCheckBox, .products-container .fiviProdServ:has(> .fiviProdPanel) > .fiviCheckBox > span:disabled { padding-bottom: var(--gap-vertical); } .products-container .fiviProdServ > .fiviCheckBox label { display: flex; flex-direction: column; text-indent: 0; margin-left: 0; gap: var(--gap-horizontal-75); align-items: center; width: 100%; padding-top: var(--column-spacer); cursor: pointer; } .products-container .fiviProdServ > .fiviCheckBox label:has(> img) { padding-top: 0; } .products-container .fiviProdServ > .fiviCheckBox label > img { width: 100%; padding: var(--gap-vertical-50) var(--gap-vertical-50) 0 var(--gap-vertical-50); } .products-container .fiviProdServ > .fiviCheckBox label:after { content: "Add"; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; bottom: calc(calc(var(--gap-vertical-200) * -1) - 1px); width: 100%; height: var(--gap-vertical-200); background-color: var(--color-accent-alt); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; cursor: pointer; font-weight: 400; } .products-container .fiviProdServ > .fiviCheckBox:has(.checked) label:after { content: "Remove"; background-color: var(--color-primary); color: white; } .products-container .fiviProdContainer:hover .fiviProdServ > .fiviCheckBox label:after { border: 2px solid var(--color-primary); } .products-container .fiviProdContainer:hover .fiviProdServ > .fiviCheckBox:has(.checked) label:after { border: 2px solid var(--color-accent-alt); } .products-container .fiviProdServ > .fiviCheckBox:has(.checked.disabled) label:after { content: "Included"; background-color: var(--color-primary); color: white; cursor: default; } .products-container .Product_MoreInfo { padding: 0 var(--column-spacer) var(--gap-vertical) var(--column-spacer); } .products-container .fiviProdServControl .DefaultTooltipClass { top: var(--column-spacer); right: var(--column-spacer); } .products-container .Product_MoreInfo > span { display: flex; flex-direction: column; gap: var(--gap-vertical-75); } .products-container .fiviProdPanel:has(*):before { width: calc(100% - calc(var(--column-spacer) * 2)); margin-left: 0; margin: 0 var(--column-spacer); background-color: var(--color-accent); } .products-container .fiviProdPanel { padding: 0 var(--column-spacer) var(--gap-vertical) var(--column-spacer); } @media all and (min-device-width: 836px), all and (min-width: 836px) { .page-container.page-SelectProduct { position: relative; } .requested-products-container { position: absolute; top: 0; align-items: flex-end; } } @media screen and (max-device-width: 836px), all and (max-width: 836px) { .requested-products-container { position: relative; align-items: center; } } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .requested-products-banner { max-width: var(--column-width-4); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .requested-products-container { align-items: center; margin-top: var(--gap-vertical); } .fiviProdServControl { justify-content: center; } } @media (max-device-width: 656px), (max-width: 656px) { .requested-products-container > .requested-products-banner { max-width: 100%; } } @media (max-device-width: 452px), (max-width: 452px) { .requested-products-banner { padding-left: var(--gap-horizontal-25); padding-right: var(--gap-horizontal-25); } .requested-products-banner .product-requested-item { flex-direction: column; gap: var(--gap-horizontal-25); } .requested-products-banner label { text-align: center; } } /* 9.9 Approved */ .printable-card-container { /* width: fit-content; */ width: 100%; display: flex; flex-direction: column; gap: var(--gap-vertical-50); align-items: center; } .printable-card { height: 310px; width: 500px; background-color: var(--color-accent-alt) !important; border-radius: 20px; color: var(--color-primary); margin: 20px; font-size: 20px; font-weight: 400; box-shadow: 2px 2px 20px #707070; display: flex; flex-direction: column; justify-content: space-between; padding: 0 var(--column-spacer) var(--column-spacer) var(--column-spacer); } .printable-card .printable-card-top { width: 100%; display: flex; justify-content: space-between; } .printable-card .printable-card-contact { margin-top: var(--gap-vertical); text-align: right; } .printable-card .printable-card-contact > div { font-size: 18px; font-weight: 500; } .printable-card .printable-card-contact > div:first-child { font-weight: 500; font-size: 20px; width: 100%; } .printable-card img { width: 200px; } .printable-card .printable-card-middle { display: flex; flex-direction: column; } .printable-card .printable-card-middle > div { font-size: 26px; font-weight: 600; } .printable-card .printable-card-middle > div:first-child { font-size: 18px; font-weight: 500; } .printable-card-bottom { font-size: 26px; font-weight: 600; } @media print { body:has(.printable-card) { visibility: hidden; } .printable-card { visibility: visible; position: fixed; left: 0; top: 0; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; } } .page-Approved > .section-container > .section-header { display: none; } @media all and (max-device-width: 657px), all and (max-width: 657px) { .printable-card { height: 210px; width: 300px; } .printable-card img { width: 130px; height: 60px; margin-top: 10px; } .printable-card .printable-card-contact > div:first-child { font-size: 12px; } .printable-card .printable-card-contact > div { font-size: 11px; } .printable-card .printable-card-middle > div:first-child { font-size: 13px; } } /* 9.10 Required Documents */ .panel-heading { /* background-color: pink!important; */ } .panel-title-container { display: flex !important; flex-direction: row !important; justify-content: space-between !important; padding-top: 10px; } .fas { font-size: 2.5em; padding-right: 0.5em; /* background: orange; */ } .panelArrow { padding: 0.5em 0 0 0.5em !important; } .panel-title { padding-top: 6px; font-size: 16px; } .id-title { padding: 1em 0; } .id-heading { display: block !important; } .panel-body { margin-left: 15px; } .doc-icon-container { width: 3em; margin-right: 1em; } .doc-icon { } /* Old styles */ /* .fas { font-size: 4.5em; } */ /* .id-container { display: flex; padding-bottom: 1.5em; .hero-mini-logo-1, .hero-mini-logo-2 { width: 150px; height: 150px; position: relative; } */ /* .hero-mini-logo-1 { bottom: -27.5%; left: 96%; clip-path: inset(0 45% 42% 0); } */ /* .hero-mini-logo-2 { bottom: 8.5%; right: 35%; clip-path: inset(0 0 45% 43%); } */ /* .flex-column { border-radius: 10px; margin: 0 2em; padding: 2.5em; width: 450px; height: 450px; } */ /* .h4 { font-size: 24px; padding-top: 0.5em; } */ /* .flex-column:nth-child(1) { background-color: var(--color-accent); border-bottom-right-radius: 0; } .flex-column:nth-child(2) { background-color: var(--color-accent-alt); border-bottom-left-radius: 0; } } */ /* @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .id-container { flex-direction: column; .flex-column { margin: 1.5em 0; } .hero-mini-logo-1 { width: 150px; height: 150px; position: relative; top: 27.5%; left: 95%; clip-path: inset(0 42% 42% 0); } } } */ /* @media all and (max-device-width: 455px), all and (max-width: 455px) { .id-container { justify-content: center; align-items: center; .flex-column { width: 350px; height: 450px; } .hero-mini-logo-1 { top: 28.5%; left: 94%; } .hero-mini-logo-2 { bottom: 12.5%; right: 46%; } } } */ /* 9.11 Application Summary */ .page-ApplicationSummary { gap: var(--gap-horizontal-200); } #pnlApplicationSummaryJointOwnersList, #pnlApplicationSummaryBeneficiariesList { padding-top: 1.5em; } .summary-img-container { background-image: url(/_assets/layoutcontent/20082/default/mom-dad-child-sitting.jpg); height: 300px; width: 350px; background-position: 90%; background-size: auto 100%; border-radius: 10px; position: relative; } .no-wrap-2 { flex-wrap: nowrap; } @media all and (max-device-width: 834px), all and (max-width: 834px) { .summary-img-container { height: 200px; width: 250px; } } @media all and (max-device-width: 453px), all and (max-width: 453px) { .summary-img-container { display: none; } } /*9.12 Pending */ /*Hiding survey section */ .page-Pending > .section-container > .section-header { display: none; } .pending-img-container { display: flex; width: 100%; } .pending-image { width: 100%; border-radius: 10px; } /* 9.13 Eligibility */ #rbCity, #rbSSA, #rbCMS, #rbACC, #rbCompany, #rbExisting, #rbEligible { /* background-color: red; */ } .page-applicanteligibility .section-container .flex-column { display: flex; justify-items: center; align-items: center; } .page-applicanteligibility .section-container .flex-column .fiviCheckBox > label, .page-applicanteligibility .section-container .flex-column .fiviCheckBox > span > label { text-indent: 0; } .page-applicanteligibility .section-container .flex-column .fiviCheckBox { background-color: var(--color-accent-onahau); padding: 20px 20px; font-family: sans-serif, Arial; font-size: 16px; border: 1.9px solid #0a172470; border-radius: 6px; width: 25em; -webkit-box-shadow: 1px 3px 24px -6px rgba(0, 0, 0, 0.26); -moz-box-shadow: 1px 3px 24px -6px rgba(0, 0, 0, 0.26); box-shadow: 1px 3px 24px -6px rgba(0, 0, 0, 0.26); } #rbCompany { padding: 20px 30px; } /* 10. ControlID Specific */ #tbCamera { display: none; max-width: var(--fiviInput-width); width: 100%; } #tbCamera #lblLicenseScan { display: block; left: 0; transform: none; margin: 0 auto; } #pnlDocuments { width: 100%; } @media all and (max-device-width: 834px), all and (max-width: 834px) { #tbCamera { display: block; max-width: var(--column-width-full); width: fit-content !important; } } /* 11. Admin Console */ .AdminContent .aspNetDisabled { display: flex; width: fit-content; align-items: center; min-width: 200px; } .AdminContent .aspNetDisabled > input { width: 20px; } .layout.AdminConsole { min-height: auto; } .layout.AdminConsole > header, .layout.AdminConsole > footer { display: none; } .layout.AdminConsole > main { padding: 40px 10px; } .layout.AdminConsole > main > .layout-container { width: 100%; max-width: calc(980px - 40px); } .layout.AdminConsole .page-navigation-container { max-width: 100%; } /* Table of Contents 1. Variables 1.1 Mobile Variables 2. General Elements & Classes 2.1 General Elements 2.2 iCheck 2.3 Flex Helper Classes 2.4 Column Helper Classes 2.5 General Helper Classes 3. Page Structure 3.1 Page Structure 3.2 Header Styling 3.3 Main Styling 3.4 Footer Styling 4. Page General Containers 5. Buttons 5.1 Button Containers 6. Accordions 7. Inputs and Labels 7.1 Labels 7.2 Inputs 7.3 Fivi Input Containers 7.4 Fivi Checkbox/Radio Buttons 7.5 Validator 7.6 Tool Tips 7.7 Seperators 7.8 Loader 7.9 Popover 8. fiVISION Controls 8.1 fiVISION_ErrorSummary 8.2 fiVISION_Panel 8.3 fiVISION_ProductsAndServicesV2 8.4 fiVISION_AddressTextBoxV2 8.5 fiVISION_PhoneTextBoxV2 8.6 fiVISION_IDTypeV2 8.7 fiVISION_HousingDurationHistory 8.8 fiVISION_EmploymentHistory 8.9 fiVISION_IndividualIncome 8.10 fiVISION_IndividualDetails 8.11 fiVISION_ProductsAndServicesSelected 8.12 fiVISION_ProductRelationships 8.13 fiVISION_DocumentListV2 8.14 fiVISION_DisclosuresList 8.15 fiVISION_IDAuthenticationQuestions 8.16 fiVISION_ProductFundingV2 8.17 fiVISION_ACH 8.18 fiVISION_CreditCardV2 8.19 fiVISION_ApplicantWithdraw 8.20 fiVISION_ProgressBar 8.21 fiVISON_IndividualHandler 8.22 Status Center Login 8.23 Status Center Summary 8.24 v3TextBox 8.25 fiVISION_FinicityFundingAccountVerification 8.26 fiVISION_OneTimePasscode 8.27 fiVISION_WorkflowSurvey 8.28 fiVISION_ProveIndividualLookup 8.29 fiVISION_ShoppingCart 9. Page Specific 9.1 Default Page 9.2 Status Center - Default 9.3 Status Center - Status Center 9.4 Funding Method 9.5 eSign Agreement 9.6 Disclosure 9.7 Select Category 9.8 Select Product 9.9 Approved 9.10 Required Documents 9.11 Application Summary 9.12 Pending 9.13 Eligibility 10. ControlID Specific 11. Admin Console Mobile Reference Media Queries for stepping down Assumes column width 66px and column spacer 24px @media all and (max-device-width: 1106px), all and (max-width: 1106px) { } @media all and (max-device-width: 836px), all and (max-width: 836px) { } @media all and (max-device-width: 656px), all and (max-width: 656px) { } @media all and (max-device-width: 452px), all and (max-width: 452px) { } */ /* 1. Variables */ :root { /*colors*/ /*gray scale*/ --color-white-light: #fff; --color-white-normal: #fff; --color-white-dark: #fff; --color-gray-light: #f8f8f8; --color-gray-normal: #f6f9fc; --color-gray-dark: #d6d5d4; --color-black-light: #0b0731; --color-black-normal: #000; --color-black-dark: #000; /*client colors*/ --color-primary: #0a1724; --color-secondary: #1923dc; --color-secondary-alt1: #258bff; --color-secondary-alt2: #8bd1ff; --color-secondary-alt3: #59d2fe; --color-accent-onahau: #cff1f9; --color-accent-hawkes-blue: #d7e7ff; --color-accent-alt2: #fbf5fe; --color-accent-alt3: #e6eceb; /*font family*/ --font-family-pri: "Inter", sans-serif; --font-family-alt: "Inter", sans-serif; /*fonts*/ /*default font*/ --font-size: 14px; --font-lineheight: 24px; --font-color: var(--color-primary); --font-weight: 300; --font-family: var(--font-family-pri); /*input font*/ --font-size-input: 16px; --font-lineheight-input: 22px; --font-color-input: var(--font-color); --font-weight-input: 500; --font-family-input: var(--font-family); /*label font*/ --font-size-label: 20px; --font-lineheight-label: var(--font-lineheight); --font-color-label: var(--font-color); --font-weight-label: 300; --font-family-label: var(--font-family-alt); /*h1 font*/ --font-size-h1: 30px; --font-lineheight-h1: 42px; --font-color-h1: var(--color-primary); --font-weight-h1: 700; --font-family-h1: var(--font-family-alt); /*h2 font*/ --font-size-h2: 24px; --font-lineheight-h2: 26px; --font-color-h2: var(--font-color-h1); --font-weight-h2: 600; --font-family-h2: var(--font-family-input); /*h3 font*/ --font-size-h3: 20px; --font-lineheight-h3: 22px; --font-color-h3: var(--color-primary); --font-weight-h3: 400; --font-family-h3: var(--font-family); /*h4 font*/ --font-size-h4: 16px; --font-lineheight-h4: 18px; --font-color-h4: var(--font-color-h1); --font-weight-h4: 500; --font-family-h4: var(--font-family); /*page structure*/ --column-width: 66px; --column-spacer: 24px; --column-width-half: calc(var(--column-width) / 2); /*33px*/ --column-width-2: calc(calc(var(--column-width) * 2) + var(--column-spacer)); /*156px*/ --column-width-3: calc( calc(var(--column-width) * 3) + calc(var(--column-spacer) * 2) ); /*246px*/ --column-width-4: calc( calc(var(--column-width) * 4) + calc(var(--column-spacer) * 3) ); /*336px*/ --column-width-5: calc( calc(var(--column-width) * 5) + calc(var(--column-spacer) * 4) ); /*426px*/ --column-width-6: calc( calc(var(--column-width) * 6) + calc(var(--column-spacer) * 5) ); /*516px*/ --column-width-7: calc( calc(var(--column-width) * 7) + calc(var(--column-spacer) * 6) ); /*606px*/ --column-width-8: calc( calc(var(--column-width) * 8) + calc(var(--column-spacer) * 7) ); /*696px*/ --column-width-9: calc( calc(var(--column-width) * 9) + calc(var(--column-spacer) * 8) ); /*786px*/ --column-width-10: calc( calc(var(--column-width) * 10) + calc(var(--column-spacer) * 9) ); /*876px*/ --column-width-11: calc( calc(var(--column-width) * 11) + calc(var(--column-spacer) * 10) ); /*966px*/ --column-width-12: calc( calc(var(--column-width) * 12) + calc(var(--column-spacer) * 11) ); /*1056px*/ --column-width-full: 100%; /*flex properties*/ --gap-vertical: var(--column-spacer); --gap-vertical-25: calc(var(--gap-vertical) * 0.25); --gap-vertical-50: calc(var(--gap-vertical) * 0.5); --gap-vertical-75: calc(var(--gap-vertical) * 0.75); --gap-vertical-150: calc(var(--gap-vertical) * 1.5); --gap-vertical-200: calc(var(--gap-vertical) * 2); --gap-horizontal: var(--column-spacer); --gap-horizontal-25: calc(var(--gap-horizontal) * 0.25); --gap-horizontal-50: calc(var(--gap-horizontal) * 0.5); --gap-horizontal-75: calc(var(--gap-horizontal) * 0.75); --gap-horizontal-150: calc(var(--gap-horizontal) * 1.5); --gap-horizontal-200: calc(var(--gap-horizontal) * 2); /*input and label structure*/ --fiviInput-width: var(--column-width-6); --fiviInput-width-half: calc( calc(var(--fiviInput-width) - var(--column-spacer)) / 2 ); --fiviInput-width-double: calc( calc(var(--fiviInput-width) * 2) + var(--column-spacer) ); /*the below two should add to the above, sometimes 3+2 or 2+2 or 2+1, main is always >= alt*/ --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-3); --input-height: 60px; --input-focusLabel-fontSize: 12px; --input-focusLabel-offset: calc( var(--input-height) - calc(var(--input-focusLabel-fontSize) / 2) ); --input-marginTop-forLabelFocusSpace: 0; /* how much space between each input */ --fiviInput-vertical-spacing: var(--gap-vertical-150); --fiviInput-horizontal-spacing: var(--gap-horizontal); } /* 1.1 Mobile Variables We are going to do a step down approach. We need to account for the head/main/foot left/right padding of column width (*2 as there are left and right). add a couple pixels for good measure. */ @media all and (max-device-width: 1106px), all and (max-width: 1106px) { /* @1056px+96px+2px = 1106px -12 columns -> 8 columns -fiviInput-width goes to 4 columns -should accomidate 2 inputs per row */ :root { --font-size-input: 18px; --font-size-label: 18px; --font-lineheight-label: var(--font-lineheight); --column-width-11: 100%; --column-width-12: 100%; --column-width-10: 100%; --fiviInput-width: var(--column-width-4); --fiviInput-width-partial-main: var(--column-width-2); --fiviInput-width-partial-alt: var(--column-width-2); --fiviInput-width-half: var(--column-width-2); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { /* @786px+48px+2px = 836px -9 columns -> 6 columns -fiviInput-width goes to 3 columns -should accomidate 2 inputs per row */ :root { --font-size: 14px; --font-size-h1: 30px; --font-lineheight-h1: 32px; --font-size-h2: 22px; --font-lineheight-h2: 24px; --font-size-h3: 18px; --font-lineheight-h3: 20px; --column-width-8: 100%; --column-width-9: 100%; --fiviInput-width: var(--column-width-6); --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-3); --fiviInput-width-half: calc( calc(var(--fiviInput-width) - var(--column-spacer)) / 2 ); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { /* @606px+48+2px = 656px -7 columns -> 4 columns -fiviInput-width goes to 4 columns -accomidate 1 input, with an exception or two, inputs go 1 per row */ :root { --column-width-6: 100%; --column-width-7: 100%; --fiviInput-width: var(--column-width-5); --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-2); --fiviInput-width-half: calc( calc(var(--fiviInput-width) - var(--column-spacer)) / 2 ); } } @media (max-device-width: 452px), (max-width: 452px) { /* @426px+24px+2px = 452px - any column width > 2 goes to 100% */ :root { /* --column-width-3: 100%; */ --column-width-4: 100%; --column-width-5: 100%; --fiviInput-width-half: calc(50% - calc(var(--column-spacer) / 2)); } } /* 2. General Elements & Classes */ /* 2.1 General Elements */ html, body { font-size: var(--font-size); line-height: var(--font-lineheight); color: var(--font-color); font-weight: var(--font-weight); font-family: var(--font-family); width: 100%; height: 100%; margin: 0px; padding: 0px; overflow-x: hidden; } h1, h2, h3, h4, .h1, .h2, .h3, .h4, p, label, input, select, textarea, form { margin: 0; margin-block: 0; padding: 0; padding-block: 0; width: 100%; } b { font-weight: 500; } h1, .h1 { font-size: var(--font-size-h1); line-height: var(--font-lineheight-h1); color: var(--font-color-h1); font-weight: var(--font-weight-h1); font-family: var(--font-family-h1); text-align: left; } h2, .h2 { font-size: var(--font-size-h2); line-height: var(--font-lineheight-h2); color: var(--font-color-h2); font-weight: var(--font-weight-h2); font-family: var(--font-family-h2); text-align: left; } h3, .h3 { font-size: var(--font-size-h3); line-height: var(--font-lineheight-h3); color: var(--font-color-h3); font-weight: var(--font-weight-h3); font-family: var(--font-family-h3); text-align: left; /* text-transform: uppercase; */ } h4, .h4 { font-size: var(--font-size-h4); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: var(--font-weight-h4); font-family: var(--font-family-h4); text-align: left; } legend { display: none; } a { color: var(--color-primary); text-decoration: underline; } a:visited { color: var(--color-primary); } a:hover { text-decoration: underline; color: var(--color-primary); } 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-column.flex-align-horizontal-center { align-items: center; } .flex-row.flex-space-between { justify-content: space-between; } .flex-column.flex-space-between { align-items: space-between; } /* gap is almost always going to govern the vertical, horizontal should rarely be modified, if ever. If you need to, add/modify a custom class. */ .flex-gap-25 { gap: var(--gap-vertical-25) var(--gap-horizontal) !important; } .flex-gap-50 { gap: var(--gap-vertical-50) var(--gap-horizontal) !important; } .flex-gap-75 { gap: var(--gap-vertical-75) var(--gap-horizontal) !important; } .flex-gap-100 { gap: var(--gap-vertical) var(--gap-horizontal) !important; } .flex-gap-150 { gap: var(--gap-vertical-150) var(--gap-horizontal) !important; } .flex-gap-200 { gap: var(--gap-vertical-200) var(--gap-horizontal) !important; } /* 2.4 Column Helper Classes */ .column-width-fiviInput { max-width: var(--fiviInput-width); width: 100vw; } .column-width-1 { max-width: var(--column-width); width: 100vw; } .column-width-2 { max-width: var(--column-width-2); width: 100vw; } .column-width-3 { max-width: var(--column-width-3); width: 100vw; } .column-width-4 { max-width: var(--column-width-4); width: 100vw; } .column-width-5 { max-width: var(--column-width-5); width: 100vw; } .column-width-6 { max-width: var(--column-width-6); width: 100vw; } .column-width-7 { max-width: var(--column-width-7); width: 100vw; } .column-width-8 { max-width: var(--column-width-8); width: 100vw; } .column-width-9 { max-width: var(--column-width-9); width: 100vw; } .column-width-10 { max-width: var(--column-width-10); width: 100vw; } .column-width-11 { max-width: var(--column-width-11); width: 100vw; } .column-width-12 { max-width: var(--column-width-12); width: 100vw; } .column-width-full { max-width: 100%; width: 100vw; } /* 2.5 General Helper Classes */ .page-text { font-size: calc(var(--font-size) + 2px); line-height: var(--font-lineheight); font-weight: 300; color: var(--font-color); width: 100%; } .page-text-small { font-size: calc(var(--font-size) - 2px); line-height: var(--font-lineheight); font-weight: var(--font-weight); color: var(--font-color); width: 100%; } .page-text-large { /* font-size: calc(var(--font-size) + 2px); line-height: calc(var(--font-lineheight) + 3px); width: 100%; */ font-size: calc(var(--font-size) + 2px); line-height: var(--font-lineheight); font-weight: var(--font-weight); color: var(--font-color); width: 100%; } .no-wrap { white-space: nowrap; text-wrap: nowrap; width: fit-content; } .spacer-vertical { /* no height is required here, gap should handle it, will double the space between the previous and next elements */ width: 100%; } .fiviHide { display: none !important; } .fi-name > i { padding-right: 1px; margin-left: -2px; } /* 3. Page Structure */ /* 3.1 Page Structure */ .layout { background-color: var(--color-accent-hawkes-blue); width: 100%; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } header, main, footer { width: 100%; display: flex; margin: 0; padding: var(--gap-vertical) var(--gap-horizontal); text-align: left; } header { box-shadow: none; background-color: var(--color-white-dark); padding-top: 0; padding-bottom: 0; } main { flex-grow: 1; margin-bottom: auto; align-items: flex-start; height: 100%; flex-direction: column; padding: 0; } footer { background-color: white; padding-left: 0; padding-right: 0; } header > .layout-container, main > .layout-container, footer > .layout-container { max-width: var(--column-width-12); width: 100%; margin: 0 auto; min-height: 62px; } @media all and (max-device-width: 452px), all and (max-width: 452px) { .layout { gap: 0; } header, main, footer { padding: var(--gap-vertical-50) var(--gap-horizontal-50); } header > .layout-container { min-height: 50px; /* flex-direction: column; */ justify-content: center; } } /* 3.2 Header Styling */ header { /* border-bottom: 2px solid var(--color-secondary-alt2); */ z-index: unset; } header .layout-container { /* max-height: 135px; */ /* height: 135px; */ margin-bottom: 1rem; /* overflow: hidden; */ align-content: center; } .header-logo { width: 300px; /* position: absolute; */ } @media all and (max-device-width: 836px), all and (max-width: 836px) { header > .layout-container { /* flex-direction: column; */ justify-content: center; gap: var(--gap-horizontal-50); padding-top: 2em; } } @media all and (max-device-width: 723px), all and (max-width: 723px) { .header-logo { width: 200px; justify-content: center; } } .bold { font-weight: 600; } .footer-bottom-links a { text-decoration: none; } .line { padding: 0px 6px 0 6px; } /* 3.3 Main Styling */ main > .layout-container { flex-grow: 1; height: 100%; padding: var(--gap-vertical-150) var(--column-spacer) var(--gap-vertical-75) var(--column-spacer); max-width: calc(var(--column-width-12) + calc(var(--column-spacer) * 2)); background-color: var(--color-white-normal); /* outline: 1px solid var(--color-secondary-alt2); */ margin-top: 5em; margin-bottom: 5em; border-radius: 10px; } main > .layout-container > span { /* this is span that start the fivision_PageContent */ display: flex; width: 100%; height: 100%; flex-direction: column; } main .logo-container, main .app-container { width: fit-content; align-self: center; align-items: center; gap: var(--gap-horizontal-75); } main .logo-app-container { padding: var(--gap-vertical-200) 0 0 0; max-width: calc(var(--column-width-12) + calc(var(--column-spacer) * 2)); width: 100%; margin: 0 auto; background-color: white; /* padding-bottom: var(--gap-vertical-75); */ } main .logo-container img { height: 25px; } main .logo-container img.footer-twit-logo { height: 20px; } main .logo-app-container img.footer-in-logo { height: 28px; } main .app-container img { height: 40px; } main .app-container img.footer-itunes-logo { height: 44px; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { main > .layout-container { padding: var(--gap-vertical-150) calc(var(--column-spacer) / 2); max-width: calc(var(--column-width-8) + var(--column-spacer)); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { main > .layout-container { max-width: calc(var(--column-width-6) + var(--column-spacer)); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { main > .layout-container { max-width: calc(var(--column-width-5) + var(--column-spacer)); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { } /* 3.4 Footer Styling */ footer { font-size: 14px; line-height: 24px; font-weight: 300; padding-bottom: 0; padding-top: 0; } footer > .layout-container { font-size: var(--font-size); max-width: 100%; width: 100%; gap: 0; background: var(--color-accent-alt2); } footer > .layout-container > div { display: flex; align-items: center; } footer .primary-footer { background-color: var(--color-primary); color: var(--color-white-normal); padding-top: calc(var(--gap-vertical) * 3); align-items: center; justify-content: center; } footer .primary-footer .footer-item { width: fit-content; max-width: var(--column-width-3); } footer .primary-footer .footer-item:nth-of-type(1) { width: var(--column-width-4); max-width: var(--column-width-4); } footer .primary-footer .footer-header, footer .primary-footer a { color: var(--color-white-normal); text-wrap: nowrap; word-wrap: none; } footer .footer-lower { gap: 0; margin-bottom: calc(var(--gap-horizontal-200) * 2); } footer .footer-divider { flex-wrap: nowrap; align-items: center; padding: 0 2em; } footer .footer-divider > .footer-line { width: 100%; height: 2px; background-color: var(--color-accent-alt); } footer .footer-divider > img { height: 125px; } footer .footer-lower-content { gap: var(--gap-vertical-50); font-size: 12px; padding: 0 2em; } footer .footer-ncua-ehl { align-items: center; } footer .footer-ncua-ehl > img { height: 40px; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .footer-upper { width: var(--column-width-8); padding: 0 2em; } footer { padding: 0; } } @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) { } .app-container-reverse { display: flex; flex-direction: row-reverse; } .logo-app-container > .flex-row { justify-content: center; } /* 4. Page General Containers */ .page-container, #IndividualHandler01 { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-150); width: 100%; } .header-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-50); max-width: var(--column-width-12); width: 100%; /* text-align: center; */ } .section-container { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-vertical); max-width: var(--column-width-12); width: 100%; } .section-header { display: flex; align-items: center; gap: var(--gap-vertical-50); font-size: 22px; /* text-transform: uppercase; */ font-weight: 500; letter-spacing: 1px; text-wrap: nowrap; white-space: nowrap; color: var(--color-primary); border-bottom: 2px solid var(--color-accent-hawkes-blue); padding: 8px; } .section-header:after { /* content: ""; width: 100%; height: 1px; background-color: var(--color-accent-hawkes-blue); */ } .page-navigation-container { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; width: var(--column-width-12); margin-top: var(--gap-vertical-200); } .page-navigation-container .button-link { text-transform: none; } .navigation-forward-container { display: flex; flex-direction: row; align-items: center; gap: var(--gap-horizontal); } .navigation-other-container { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } @media all and (max-device-width: 656px), all and (max-width: 656px) { .page-navigation-container { flex-direction: column; align-items: center; gap: var(--gap-vertical); } .navigation-forward-container { flex-direction: column-reverse; } .navigation-other-container { align-items: center; gap: var(--gap-vertical); } .navigation-other-container .button-link { text-align: center; } } /* 5. Buttons */ .button-primary, .fiviDocumentList #email-submit-btn, .V3StatusCenterLogin .DefaultNextButton { display: inline-flex !important; justify-content: center; align-items: center; min-width: var(--column-width-2); width: fit-content !important; /* height: calc(var(--gap-vertical-200) + 10px); */ height: 46.8px; margin: 0; padding: 0 20px; color: white; font-size: 16px; line-height: 16px; font-weight: 500; background-color: var(--color-primary); border: 2px solid var(--color-primary); border-radius: 3px; text-transform: uppercase; text-decoration: none; } .button-primary:visited { color: white; } .button-primary:hover:not(:disabled), .button-primary:active:not(:disabled), .button-primary:focus:not(:disabled), .fiviDocumentList #email-submit-btn:hover:not(:disabled), .fiviDocumentList #email-submit-btn:active:not(:disabled), .fiviDocumentList #email-submit-btn:focus:not(:disabled), .V3StatusCenterLogin .DefaultNextButton:hover:not(:disabled), .V3StatusCenterLogin .DefaultNextButton:active:not(:disabled), .V3StatusCenterLogin .DefaultNextButton:hover:not(:disabled) { background-color: transparent; color: var(--color-primary); font-weight: 600; box-shadow: none; text-decoration: none; } .button-primary:disabled, .fiviDocumentList #email-submit-btn:disabled { opacity: 0.5; } .button-other, .MinorButton, .fiviAddAnotherButton > a, .fiviDocumentList .modal-footer > button, .V3SummaryButtons.active, .V3SummaryControl .fiviDocumentList .fiviFileUpload + .btn-default, .V3SummaryControl .btn-primary, .fiviDocumentList .btn-default, .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] label { display: inline-flex; justify-content: center; align-items: center; max-width: var(--fiviInput-width); min-width: var(--column-width-2); width: fit-content !important; height: var(--gap-vertical-150); line-height: calc(var(--gap-vertical-150) - 4px); margin: 0; padding: 0 10px; color: var(--color-primary); font-size: 14px; font-weight: 600; background-color: transparent; border: 2px solid var(--color-primary); border-radius: 5px; box-shadow: none; text-transform: lowercase; text-decoration: none; text-align: center; &:hover:not(:disabled), &:active:not(:disabled), &:focus:not(:disabled) { background-color: var(--color-primary); color: white; border-color: var(--color-primary); font-weight: 600; box-shadow: none; text-decoration: none; } &:disabled { opacity: 0.5; } } .button-link, .button-link-alt, .V3StatusCenterLogin .btn-link, .V3SummaryControl .btn-link, .V3SummaryControl .LinkClass, .fiviRemoveBtn:before { /* min-width: var(--column-width-2); */ text-align: left; background-color: transparent; border: none; font-size: 16px; line-height: 18px; font-weight: 600; color: var(--color-primary); text-transform: uppercase; width: fit-content !important; padding: 0; text-decoration: underline; } .button-link-alt { text-transform: uppercase; font-weight: 600; } .button-link:hover:not(:disabled), .button-link:active:not(:disabled), .button-link:focus:not(:disabled), .button-link-alt:hover:not(:disabled), .button-link-alt:active:not(:disabled), .button-link-alt:focus:not(:disabled), .V3StatusCenterLogin .btn-link:hover:not(:disabled), .V3StatusCenterLogin .btn-link:active:not(:disabled), .V3StatusCenterLogin .btn-link:focus:not(:disabled), .V3SummaryControl .btn-link:hover:not(:disabled), .V3SummaryControl .btn-link:active:not(:disabled), .V3SummaryControl .btn-link:focus:not(:disabled), .V3SummaryControl .LinkClass:hover:not(:disabled), .V3SummaryControl .LinkClass:active:not(:disabled), .V3SummaryControl .LinkClass:focus:not(:disabled) { text-decoration: none; font-weight: 600; color: var(--color-primary); } .button-other:disabled, .button-other-alt:disabled, .V3StatusCenterLogin .btn-link:disabled, .V3SummaryControl .btn-link:disabled, .V3SummaryControl .LinkClass:disabled { opacity: 0.5; } .fiviRemoveBtn { color: var(--color-primary); cursor: default; width: 0; max-width: 100%; margin-right: 100%; display: flex; align-items: flex-start; justify-content: flex-start; order: 2; align-self: flex-end; } .fiviRemoveBtn.fa-2x { font-size: var(--font-size); } .fiviRemoveBtn + .tooltip { display: none !important; } .fiviRemoveBtn:before { content: "remove"; cursor: pointer; font-family: var(--font-family); text-transform: none; white-space: nowrap; text-wrap: nowrap; } .fiviRemoveBtn:hover:not(:disabled):before, .fiviRemoveBtn:active:not(:disabled):before, .fiviRemoveBtn:focus:not(:disabled):before { text-decoration: underline; font-weight: 600; color: var(--color-primary); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviRemoveBtn { margin-right: auto; margin-left: auto; justify-content: center; } } #btnNonMember, .start-application > .button-link, .start-application > .button-primary { text-transform: none; } .start-application > .button-link { max-width: 250px; word-wrap: break-word; white-space: normal; text-align: center; } /* 5.1 Button Containers */ .add-another-individual-container { display: flex; align-items: center; justify-content: center; width: 100%; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .add-another-individual-container { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .add-another-individual-container { width: var(--fiviInput-width); } } /* 6. Accordions */ #accordion { display: flex; flex-direction: column; max-width: var(--column-width-12); width: 100%; gap: var(--gap-vertical); } #accordion > .panel { outline: none; padding: 0 0 0 0; border: none; border-radius: 2px; background-color: transparent; box-shadow: none; margin: 0; } #accordion > .panel:has(> .panel-heading.collapsed) { outline: 1px solid var(--color-gray-dark); box-shadow: none; } #accordion > .panel > .panel-heading { display: flex; align-items: center; height: var(--input-height); padding: 0 var(--column-spacer) 0 0; background: white; border: none; border-radius: 5px; padding-left: 20px; } #accordion > .panel > .panel-heading > .panel-title { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; flex-wrap: wrap; position: relative; text-transform: none; padding-left: 20px; } #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-75); border: none; border-radius: 5px; padding: 0 0 var(--column-spacer) 0; padding-left: 20px; } .panel-body::before, .panel-body::after { display: none; } /* this is the accordion open */ #accordion > .panel > .panel-heading:has(+ .collapse.in) { padding-left: 0; background: transparent; transition: padding-left 0.5s ease-in-out; padding-left: 20px; } #accordion > .panel > .panel-heading:has(+ .collapse.in) > .panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); transition: font-size 0.5s ease-in-out; padding-left: 20px; } /* this is the accordion opening */ #accordion > .panel > .panel-heading:has(+ .collapsing) { padding-left: 0; background: transparent; outline: none; transition: padding-left 0.5s ease-in-out; padding-left: 20px; } #accordion > .panel > .panel-heading:has(+ .collapsing) > .panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); outline: none; transition: font-size 0.5s ease-in-out; padding-left: 20px; } /* this is with the accordion closed */ #accordion > .panel > .panel-heading.collapsed:has(+ .collapse:not(.in)) { padding-left: var(--column-spacer); transition: padding-left 0.5s ease-in-out; padding-left: 20px; } #accordion > .panel > .panel-heading.collapsed:has(+ .collapse:not(.in)) > .panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); transition: font-size 0.5s ease-in-out; padding-left: 20px; } /* this is with the accordion closing */ #accordion > .panel > .panel-heading.collapsed:has(+ .collapsing) { padding-left: var(--column-spacer); outline: none; transition: padding-left 0.5s ease-in-out; padding-left: 20px; } #accordion > .panel > .panel-heading.collapsed:has(+ .collapsing) > .panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); outline: none; transition: font-size 0.5s ease-in-out; padding-left: 20px; } /* 7. Inputs and Labels */ /* 7.1 Labels */ label { font-weight: var(--font-weight-label); display: inline; padding: 0 5px; } .DefaultLabelClass, .DefaultLabelClassV3 { display: flex; align-items: center; height: var(--input-height); position: absolute; left: var(--gap-horizontal-50); bottom: 0; font-size: var(--font-size-input); font-weight: var(--font-weight-input); line-height: var(--font-size-label); color: var(--font-color-label); font-family: var(--font-family-label); transition: bottom 0.25s ease-in-out, left 0.25s ease-in-out, font-size 0.25s ease-in-out, font-weight 0.25s ease-in-out; pointer-events: none; width: fit-content; } .FocusLabelClass, .fiviCCCardInfo .fiviTwoInput .defaultlabelclass { height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); bottom: var(--input-focusLabel-offset); left: var(--gap-horizontal-50); font-weight: 600; text-transform: uppercase; padding: 0 5px; background-color: var(--color-white-normal); } .FocusLabelClass:has(+ input:disabled) { background: linear-gradient(var(--color-white-normal) 50%, #eee 50%); } /* v3 specific */ .fiviLabelContainer { display: flex; } .fiviControl > .fiviLabelContainer { position: absolute; height: 100%; width: 100%; pointer-events: none; } .DefaultLabelClassV3, .fiviStaticLabel { display: flex; align-items: center; height: var(--input-height); margin: 0 !important; position: absolute !important; left: var(--gap-horizontal-50) !important; top: unset !important; bottom: 0; font-size: var(--font-size-input) !important; font-weight: var(--font-weight-input); line-height: var(--font-size-label) !important; color: var(--font-color-label); font-family: var(--font-family-label); transition: bottom 0.25s ease-in-out, left 0.25s ease-in-out, font-size 0.25s ease-in-out, font-weight 0.25s ease-in-out !important; } .DefaultLabelClassV3.FocusLabelClass, .fiviStaticLabel { height: var(--input-focusLabel-fontSize); bottom: var(--input-focusLabel-offset) !important; font-size: var(--input-focusLabel-fontSize) !important; left: 0 !important; font-weight: 600; color: var(--font-color-label) !important; text-transform: uppercase; } /* 7.2 Inputs */ .fiviInput, .fiviSCDropDown { display: inline-flex; width: 100vw; /*oh my vw actually worked*/ max-width: var(--fiviInput-width); position: relative; /* flex-grow: 1; */ } .form-control { display: flex; align-items: center; width: 100% !important; height: var(--input-height); padding: 0 var(--gap-horizontal-50); margin-top: var(--input-marginTop-forLabelFocusSpace); font-size: var(--font-size-input); font-weight: var(--font-weight-input); line-height: var(--font-lineheight-input); color: var(--font-color-input); font-family: var(--font-family-input); border: 1px solid var(--color-primary) !important; border-radius: 10px; } .form-control:focus { box-shadow: none; border-width: 2px !important; } .fiviTransparent { color: transparent; } /* v3 specific */ .DefaultFormControlClassV3 { margin-left: 0; margin-right: 0; margin-bottom: 0px; } .fiviNewLine { display: none !important; } /* 7.3 Fivi Input Containers */ .fiviTwoInput, .fiviLongInput { /* can container either input elements or fiviInput containers */ display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-vertical-25) var(--gap-horizontal); flex-wrap: wrap; } .fiviTwoInput > input, .fiviTwoInput > .fiviInput { max-width: var(--fiviInput-width-half); } .fiviTwoInput > .DefaultLabelClass { height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); bottom: var(--input-focusLabel-offset); left: 0; font-weight: 600; text-transform: uppercase; } /* these containers normally contain a bunch of .fiviInput containers */ .fiviMultiInput { display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); flex-wrap: wrap; max-width: 100%; width: 100%; position: relative; } .fiviMultiContainer { display: flex; flex-direction: column; max-width: var(--column-width-full); width: 100%; gap: var(--gap-vertical) var(--gap-horizontal); } .fiviTwoInputContainer { /* Use this when you want two .fiviInputs to take up half the normal width and behave like a standard width .fiviInput. */ display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); flex-wrap: wrap; max-width: var(--fiviInput-width); width: 100vw; position: relative; } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviTwoInput > input { max-width: var(--fiviInput-width-half); } .fiviMultiInput { max-width: var(--fiviInput-width); width: 100%; } } /* v3 specific containers */ .fiviParentControl { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-vertical); max-width: var(--column-width-12); width: 100%; margin: 0; } .fiviControl { display: inline-flex; padding: 0 !important; width: 100% !important; margin-bottom: calc( calc(var(--font-size) - 4px) + var(--gap-vertical-25) ) !important; } /* 7.4 Fivi Checkbox/Radio Buttons */ .fiviCheckBox, .fiviCheckBox > span { display: flex; align-items: center; gap: var(--gap-horizontal-50); max-width: fit-content; } .fiviCheckBox > label, .fiviCheckBox > span > label { text-indent: -3px; font-weight: 500; font-size: calc(var(--font-size-label) - 4px); line-height: var(--font-lineheight-input); } /* v3 checkbox */ .fiviCheckBox:has(> input[type="checkbox"]) { margin: 0 !important; } .fiviCheckBox > input[type="checkbox"] { width: fit-content; margin: 0; } /* 7.5 Validator */ .CtlValidator { position: absolute; line-height: var(--input-height); bottom: -3px; left: 3.5px; z-index: 5; } /* 7.6 Tool Tips */ .DefaultTooltipClass { position: absolute; width: fit-content; } .tooltip-arrow { display: none; } .tooltip-inner { width: max-content; max-width: 300px !important; text-align: left; } /* 7.7 Seperators */ .fiviMultiSeperator { width: 100%; height: 2px; margin: calc(var(--fiviInput-vertical-spacing) - 14px) 0 0 0; } .fiviMultiSeperator::after { content: ""; display: block; width: 100%; height: 100%; max-width: 100%; background-color: var(--color-gray-dark); } .divider { display: flex; align-items: center; justify-content: center; width: 100%; height: 1px; } .divider::before { content: ""; display: block; width: var(--column-width-3); height: 1px; background-color: var(--color-gray-dark); } /* 7.8 Loader */ .section-container > .loader { position: relative; left: unset; right: unset; top: unset; margin: 0 auto; } /* 7.9 Popover v2: .popover v3: .fivisionpopover */ .popover > .arrow, .fivisionpopover > .arrow { display: none; } .fivisionpopover .popover-content { font-size: calc(var(--font-size) - 4px); font-weight: 500; color: red; padding: 0; } .fivisionpopover { position: absolute !important; top: calc( var(--input-height) + var(--input-marginTop-forLabelFocusSpace) ) !important; box-shadow: none; border: none; background-color: transparent; margin-top: var(--gap-vertical-25) !important; } /* 8. fiVISION Controls */ /* 8.1 fiVISION_ErrorSummary v2: #ErrorSummary v3: .fiviErrorSummary */ #ErrorSummary1, .fiviErrorSummary { display: none; } #ErrorSummary1:has(li) { display: block; max-width: var(--column-width-6); width: 100%; margin: 0 auto; } .fiviErrorSummary:has(div) { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } #ErrorSummary1 ul { padding-left: 0; } #ErrorSummary1 li, .fiviErrorSummary > div { font-size: var(--font-size); line-height: var(--font-lineheight); font-weight: 500; color: red; margin-bottom: 0; list-style: none; text-align: center; } /* 8.2 fiVISION_Panel */ .fiviPanel { display: inline-flex; flex-direction: unset; flex-wrap: unset; width: unset; justify-content: unset; } .fiviPanel, .fiviPanel > .fiviPanelContainer { max-width: 100%; /* width: 100%; */ } .page-container > .fiviPanel, .section-container > .fiviPanel, .header-container > .fiviPanel { width: 100%; } /* 8.3 fiVISION_ProductsAndServicesV2 */ .fiviProdServControl { display: flex; flex-wrap: wrap; max-width: var(--column-width-12); width: 100%; gap: var(--gap-vertical); } .fiviProdServControl .DefaultTooltipClass { top: 0; right: 0; } .fiviProdContainer { max-width: var(--column-width-4); width: 100%; min-height: 100px; padding: var(--gap-horizontal-75); position: relative; background: white; border: 2px solid var(--color-gray-dark); border-radius: 3px; box-shadow: none; } .fiviProdContainer:has(input[id*="_ProductCheckbox_"]:checked), .fiviProdContainer:has(input[id*="_GeneralService"]:checked) { background-color: var(--color-accent-hawkes-blue); } .fiviProdServ { display: flex; flex-direction: column; gap: 0; height: 100%; } .fiviProdServ > .fiviCheckBox, .fiviProdServ > .fiviCheckBox > span { flex-direction: row; justify-content: space-between; align-items: center; max-width: 100%; width: 100%; } .fiviProdServ > .fiviCheckBox > div:first-child, .fiviProdServ > .fiviCheckBox > span > div:first-child { order: 3; } .fiviProdServ > .fiviCheckBox > .DefaultTooltipClass, .fiviProdServ > .fiviCheckBox > span > .DefaultTooltipClass { /* position:relative; order: 2; */ left: 305px; bottom: 120px !important; } .fiviProdServ > .fiviCheckBox > label, .fiviProdServ > .fiviCheckBox > span > label { font-size: var(--font-size-label); font-weight: 600; margin-left: -3px; width: fit-content; /* text-wrap: nowrap; */ /* white-space: nowrap; */ text-wrap: wrap; white-space: break-spaces; order: 1; margin-top: 15px; padding: 0 10px; } .fiviProdServ .fiviAddAnotherButton { display: none; width: fit-content; align-self: center; justify-content: flex-end; } .fiviProdContainer:has(input[id*="_ProductCheckbox_"]:checked) .fiviAddAnotherButton { display: flex; } .fiviProdServ .fiviAddAnotherButton > a { text-align: center; display: flex; align-items: center; justify-content: center; margin-top: auto; } .fiviProdPanel { max-width: 100%; display: flex; flex-direction: column; } .fiviProdPanel:has(*):before { content: ""; display: block; height: 2px; width: calc(100% + var(--gap-horizontal-150)); margin-left: calc(var(--gap-horizontal-75) * -1); background-color: var(--color-gray-dark); } .fiviProdPanel > .fiviInput { max-width: 100%; } .fiviProdPanel > .fiviProdInnerPanel:first-of-type, .fiviProdPanel > .fiviInput { margin-top: var(--gap-vertical); } .fiviProdPanel > .fiviProdInnerPanel:not(:first-of-type) { margin-top: var(--gap-vertical); } .fiviProdInnerPanel { display: flex; flex-direction: column; gap: var(--gap-vertical-50) 0; flex-wrap: wrap; width: 100%; padding: 0; position: relative; } .Service_MoreInfo { width: 100%; font-size: 14px; padding: 8px 10px; text-align: center; } .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%; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviProdContainer { max-width: 100%; } .fiviProdServ > .fiviCheckBox > .DefaultTooltipClass, .fiviProdServ > .fiviCheckBox > span > .DefaultTooltipClass { left: 10px; } } /* 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) var(--fiviInput-horizontal-spacing); width: 100%; } .fiviAddress > .fiviSameAs { max-width: calc(calc(var(--fiviInput-width) / 2) - var(--column-spacer)); position: absolute; top: -49px; right: 0; background: var(--color-white-normal); width: fit-content; padding: 0 5px; } .fiviAddress > .fiviSameAs label { font-size: calc(var(--font-size-label) - 4px); line-height: var(--font-lineheight); } .fiviAddress > .DefaultAddressVerifyingClass { font-size: calc(var(--font-size) - 2px); line-height: var(--font-lineheight); font-weight: 500; text-align: center; } @media all and (max-device-width: 836px), all and (max-width: 836px) { .address-container { max-width: 100%; } .address-container > h3 { max-width: 100%; } .fiviAddress > .fiviSameAs { max-width: 100%; position: relative; top: unset; right: unset; } } /* 8.5 fiVISION_PhoneTextBoxV2 --fiviLongInput has the phone field, phone type, and preferred --fiviTwoInput has the phone field and either phone type or preferred --else its just the phone field */ .fiviPhoneControl { margin: 0; max-width: var(--fiviInput-width); } .fiviTwoInput.fiviPhoneControl, .fiviLongInput.fiviPhoneControl { display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-horizontal-25) var(--gap-vertical); flex-wrap: wrap; } .fiviLongInput.fiviPhoneControl { max-width: 100%; width: 100%; } .fiviPhoneControl .CtlValidator { top: calc(var(--input-marginTop-forLabelFocusSpace) + 3px); bottom: unset; } .fiviLongInput.fiviPhoneControl > input.form-control, .fiviTwoInput.fiviPhoneControl > input.form-control { max-width: var(--fiviInput-width-partial-main) !important; width: 100%; } .fiviPhoneControl > .fiviCheckBox, .fiviPhoneControl > select.form-control { max-width: var(--fiviInput-width-partial-alt); width: 100%; } .fiviPhoneControl > .fiviCheckBox { background: transparent; border: none !important; box-shadow: none; padding: 0; } .fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) { flex-wrap: wrap; gap: var(--gap-vertical-50); } .fiviTwoInput.fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass, .fiviLongInput.fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass { top: 0; } .fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass { top: var(--input-marginTop-forLabelFocusSpace); transition: top 0.25s ease-in-out, left 0.25s ease-in-out, font-size 0.25s ease-in-out, font-weight 0.25s ease-in-out; } .fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass.FocusLabelClass { top: 0; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] { width: 100%; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] br { display: none; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_smsOptionsDiv"] { background-color: var(--color-gray-normal) !important; padding: var(--gap-horizontal) !important; display: flex !important; gap: var(--gap-vertical); flex-direction: column; min-width: unset !important; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_smsOptionsDiv"] > span { display: block; width: 100%; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_messageIconDiv"] { display: none; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] { display: flex; gap: var(--gap-horizontal); width: 100%; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] div.form-element { width: calc(calc(100% - var(--gap-horizontal)) / 2); height: fit-content; padding: 0; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] div.form-element > span { width: 100%; height: 100%; display: block; padding: 0; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] label { min-width: unset; width: 100% !important; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] div.form-element > span > input:checked + label { border: 2px solid var(--color-primary-normal); background: var(--color-primary-normal); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviTwoInput.fiviPhoneControl { max-width: var(--column-width-6); width: 100%; } .fiviTwoInput.fiviPhoneControl > input.form-control, .fiviTwoInput.fiviPhoneControl > select.form-control { max-width: var(--column-width-3); } .fiviLongInput.fiviPhoneControl > .fiviCheckBox { margin-top: 0; max-width: 100%; } .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass { bottom: calc(var(--input-height) + var(--gap-horizontal-25)); } .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass { bottom: calc( var(--input-focusLabel-offset) + calc(var(--input-height) + var(--gap-horizontal-25)) ); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviTwoInput.fiviPhoneControl > input.form-control, .fiviTwoInput.fiviPhoneControl > select.form-control { max-width: var(--column-width-2); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviTwoInput.fiviPhoneControl { gap: var(--gap-horizontal-25) var(--gap-vertical); } .fiviTwoInput.fiviPhoneControl > input.form-control, .fiviLongInput.fiviPhoneControl > input.form-control, .fiviTwoInput.fiviPhoneControl > select.form-control, .fiviLongInput.fiviPhoneControl > select.form-control { max-width: 100% !important; } .fiviTwoInput.fiviPhoneControl > select.form-control, .fiviLongInput.fiviPhoneControl > select.form-control { margin-top: 0px; } .fiviPhoneControl > .fiviCheckBox { margin-top: 0; max-width: 100%; } .fiviTwoInput.fiviPhoneControl > label.DefaultLabelClass { bottom: calc(var(--input-height) + var(--gap-horizontal-25)); } .fiviTwoInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass { bottom: calc( var(--input-focusLabel-offset) + calc(var(--input-height) + var(--gap-horizontal-25)) ); } .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass { bottom: calc(calc(var(--input-height) + var(--gap-horizontal-25)) * 2); } .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass { bottom: calc( var(--input-focusLabel-offset) + calc(calc(var(--input-height) + var(--gap-horizontal-25)) * 2) ); } } /* 8.6 fiVISION_IDTypeV2 */ .fiviIDType { max-width: calc(calc(var(--fiviInput-width) * 2) + var(--column-spacer)); } .fiviIDType > div[id*="issueDateDiv"], .fiviIDType > div[id*="expirationDateDiv"] { max-width: var(--fiviInput-width-half); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviIDType > div[id*="issueDateDiv"], .fiviIDType > div[id*="expirationDateDiv"] { max-width: var(--fiviInput-width); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviIDType { max-width: var(--fiviInput-width); } .fiviIDType > div[id*="issueDateDiv"], .fiviIDType > div[id*="expirationDateDiv"] { max-width: var(--fiviInput-width-half); } } /* 8.7 fiVISION_HousingDurationHistory */ .fiviHousingDurationHistory { max-width: var(--column-width-full); } .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width-half); } .fiviHousingDurationHistory center { width: var(--fiviInput-width); } .fiviHousingDurationHistory .DefaultAddressVerifyingClass { width: var(--fiviInput-width); } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .fiviHousingDurationHistory center { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width); } .fiviHousingDurationHistory .DefaultAddressVerifyingClass { width: var(--column-width-4); } .fiviHousingDurationHistory center { width: var(--fiviInput-width); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width-half); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width-half); } } /* 8.8 fiVISION_EmploymentHistory */ .fiviEmpHistoryControl { max-width: var(--column-width-full); } .fiviEmpHistoryControl center { width: 100%; } .fiviEmpHistoryControl .fiviRemoveBtn:before { content: "Remove Prior Employer"; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .fiviEmpHistoryControl center { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviEmpHistoryControl center { width: var(--fiviInput-width); } } /* 8.9 fiVISION_IndividualIncome */ .fiviIncomeControl { max-width: 100%; width: 100%; } .fiviIncomeControl > .fiviMultiContainer { flex-direction: row; flex-wrap: wrap; max-width: 100%; } .fiviIncomeControl > .fiviMultiContainer > div { max-width: 100%; width: 100vw; } .fiviIncomeControl .fiviMultiInput { gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); } .fiviIncomeControl .fiviMultiInput .fiviInput { max-width: var(--fiviInput-width-half); } .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) { display: flex; width: 100%; max-width: 100%; } .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) > span { width: 100%; } .fiviIncomeControl .fiviRemoveBtn:before { content: "Remove Optional Income"; } .fiviIncomeControl input[id*="ntbHoursPerWeek"]::placeholder { color: transparent; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .fiviIncomeControl .fiviMultiInput > .fiviInput, .fiviIncomeControl .fiviMultiInput > .fiviInput > .fiviInput { max-width: var(--fiviInput-width); } .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) { width: var(--fiviInput-width-double); } .fiviIncomeControl .fiviRemoveBtn { left: var(--fiviInput-width); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) { width: var(--fiviInput-width); } .fiviIncomeControl .fiviRemoveBtn { top: var(--input-marginTop-forLabelFocusSpace); left: unset; right: var(--gap-horizontal-25); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { } /* 8.10 fiVISION_IndividualDetails */ .fiviIndividualDetails { width: 100%; } .fiviIndDetails { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } .fiviIndDetails > div { margin-left: var(--gap-horizontal-25); font-weight: 400; } .fiviIndDetails > .fiviIndDetailsSection { margin-left: 0; } .fiviIndDetailsSection > b { font-weight: 500; } .fiviIndDetails > .fiviIndDetailsName { font-size: calc(var(--font-size) + 2px); font-weight: 500; margin-bottom: var(--gap-vertical-25); margin-left: 0; } .fiviIndDetails > .fiviIndDetailsName:not(:first-of-type) { margin-top: var(--gap-vertical-75); } /* 8.11 fiVISION_ProductsAndServicesSelected */ .fiviProdServiceSelected > div { margin: 0 !important; display: flex; flex-direction: column; gap: var(--gap-vertical-75); font-size: calc(var(--font-size) + 2px); font-weight: 500; } .fiviProdServiceSelected > div > ul { padding: 0; list-style: none; display: flex; gap: var(--gap-vertical-25) 1px; flex-wrap: wrap; font-weight: 400; font-size: var(--font-size); } .fiviProdServiceSelected > div > ul > i { margin-left: var(--gap-horizontal-25); } .fiviProdServiceSelected > div > ul > li { margin: var(--gap-vertical-25) 0 0 0; width: 100%; font-size: calc(var(--font-size) + 2px); } .fiviProdServiceSelected > div > ul > li:first-of-type { margin-top: 0; } .fiviProdServiceSelected > div > ul > ul { margin: 0; width: 100%; } .fiviProdServiceSelected > div > br + ul { list-style: unset; margin-left: var(--gap-horizontal-75); margin-top: calc(var(--gap-horizontal-25) * -1); } .fiviProdServiceSelected > div > br + ul > li { margin-left: var(--gap-horizontal-25); font-size: var(--font-size); margin-top: 0; } .fiviProdServiceSelected > div > br + ul > li > b { font-weight: 500; } /* 8.12 fiVISION_ProductRelationships */ .fiviProductRelationship { display: block; overflow-x: auto; white-space: nowrap; border: 1px solid var(--color-gray-dark); border-radius: 5px; max-width: 100%; width: fit-content; box-shadow: none; } .fiviProductRelationship table { overflow-x: auto; white-space: nowrap; border: none; margin: 0; } .fiviProductRelationship tr { display: flex; flex-wrap: nowrap; padding: 0 var(--column-spacer); border-bottom: 1px solid var(--color-gray-dark); } .fiviProductRelationship tr:nth-of-type(odd) { background-color: white !important; } .fiviProductRelationship tr:nth-of-type(even) { background-color: transparent !important; } .fiviProductRelationship tr:last-of-type { border: none; } .fiviProductRelationship td { display: flex; justify-content: center; align-items: center; width: var(--column-width-2); height: calc(var(--font-size) * 3); text-wrap: wrap; white-space: nowrap; padding: 0 !important; line-height: var(--font-lineheight); background-color: transparent !important; border: none !important; font-size: var(--font-size); } .fiviProductRelationship tr > td:first-of-type { justify-content: flex-start; font-weight: 600; width: var(--column-width-3); } .fiviProductRelationship tr[id*="_ServiceRow"] > td:first-of-type { padding-left: var(--column-spacer) !important; font-weight: 400; } .fiviProductRelationship tr:first-of-type > td { font-weight: bold; text-align: left !important; border: none; } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviProductRelationship tr { gap: 0 var(--column-spacer); } .fiviProductRelationship td { width: var(--column-width); } .fiviProductRelationship tr > td:first-of-type { width: var(--column-width-2); } .fiviProductRelationship tr:first-of-type > td { text-align: center !important; } } /* 8.13 fiVISION_DocumentListV2 */ .fiviDocumentList { max-width: var(--column-width-10); width: 100%; display: flex; flex-direction: column-reverse; gap: var(--gap-vertical-75); } .V3SummaryControl .fiviDocumentList { max-width: var(--column-width-12); } .fiviDocumentList > input:first-of-type { align-self: center; } .fiviDocumentList table { /* display: block; */ width: 100%; margin: 0; border: 1px solid var(--color-gray-dark); border-radius: 5px; box-shadow: none; } .fiviDocumentList table > tbody, .fiviDocumentList table > thead { display: flex; flex-direction: column; width: 100%; } .fiviDocumentList table > tbody > tr, .fiviDocumentList table > thead > tr { display: flex; flex-wrap: nowrap; position: relative; padding: 0 var(--column-spacer); border: none; border-radius: 5px; border-bottom: 1px solid var(--color-gray-dark); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .fiviDocumentList table > tbody > tr:nth-of-type(odd) { background-color: white !important; } .fiviDocumentList table > tbody > tr:nth-of-type(even) { background-color: transparent !important; } .fiviDocumentList table > tbody > tr:last-of-type { border: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .fiviDocumentList table th, .fiviDocumentList table td { display: flex; align-items: center; justify-content: center; max-width: var(--column-width-3); width: 100%; padding: var(--gap-horizontal) 0 !important; background-color: transparent !important; } .V3MessagesHeaderClass th { max-width: var(--column-width-3) !important; width: 100% !important; } .fiviDocumentList table td, .fiviDocumentList .V3MessagesHeaderClass th { border: none !important; } .fiviDocumentList table th:first-of-type, .fiviDocumentList table td:first-of-type { justify-content: flex-start; } .fiviDocumentList table th:last-of-type, .fiviDocumentList table td:last-of-type { display: flex; flex-direction: column; align-items: center; max-width: var(--column-width-4); width: 100%; background-color: transparent !important; } .fiviDocumentList table td:last-of-type br { display: none; } .fiviDocumentList table td:last-of-type > span:has(.btn-default) { display: flex; align-items: center; text-align: center; justify-content: center; margin-top: var(--gap-vertical-25); } .fiviDocumentList table td:last-of-type > div[id*="UploadProgressBar_"] { max-width: var(--fiviInput-width); min-width: var(--column-width-2); width: fit-content; display: flex; align-items: center; gap: var(--gap-horizontal-25); margin-top: var(--gap-vertical-25); } .fiviDocumentList .DefaultTooltipClass { display: flex; align-items: center; justify-content: center; width: var(--column-spacer); height: 100%; margin: 0 !important; position: absolute; top: 0; right: var(--gap-horizontal-25); } .fiviDocumentList .ng-modal-dialog { left: 0; width: var(--column-width-6) !important; } .fiviDocumentList .ng-modal-dialog-content { padding: var(--column-spacer); } .fiviDocumentList .ModalContent > div { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .fiviDocumentList .ModalContent br { display: none; } .fiviDocumentList .ModalContent > div > .modal-header { padding: 0; } .fiviDocumentList .ModalContent > div > .modal-header .close { font-size: var(--font-size-h1); color: var(--color-black-dark); opacity: 1; } .fiviDocumentList .ModalContent > div > .modal-header .close:hover { opacity: 0.5; } .fiviDocumentList .ModalContent > div .modal-body-insideItem { text-align: left; margin: 0 !important; display: flex; flex-direction: column; gap: var(--gap-horizontal-50); } .fiviDocumentList .ModalContent > div .text-muted { font-size: var(--font-size); color: var(--font-color); line-height: var(--font-lineheight); } .fiviDocumentList .ModalContent > div .text-muted > br { display: inline-block; } .fiviDocumentList .ModalContent #qrcode { margin: 0 !important; } .fiviDocumentList .ModalContent #UploadWrapper > div:nth-of-type(2) { margin: 0 !important; height: auto !important; border: none !important; text-align: left !important; } .fiviDocumentList .ModalContent #UploadWrapper > div:nth-of-type(2) > span { font-size: var(--font-size-h2) !important; color: var(--font-color-h2) !important; line-height: var(--font-lineheight-h2) !important; font-weight: var(--font-weight-h2); padding: 0 !important; text-align: left !important; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviDocumentList tbody > tr:first-of-type { display: none; } .fiviDocumentList table > tbody > tr { flex-direction: column; padding: calc(var(--column-spacer) / 2); gap: calc(var(--column-spacer) / 2); } .fiviDocumentList table > tbody > tr > td { display: flex; flex-direction: column; align-items: center; font-size: var(--font-size-h3); max-width: 100%; padding: 0 !important; width: 100%; } .fiviDocumentList table > tbody > tr > td::before { font-size: var(--font-size-h4); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: 600; font-family: var(--font-family-h4); } .fiviDocumentList table > tbody > tr > td:nth-of-type(1):before { content: "Applicant Name"; } .fiviDocumentList table > tbody > tr > td:nth-of-type(2):before { content: "Document Type"; } /* status center column names */ .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(1):before { content: "Application Number"; } .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(2):before { content: "Individual"; } .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(3):before { content: "Document Type"; } .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(4):before { content: "Upload"; } .fiviDocumentList table > tbody > tr > td:nth-of-type(3), .fiviDocumentList table td:last-of-type { max-width: 100%; } .fiviDocumentList .DefaultTooltipClass { position: relative; height: fit-content; width: 100%; margin: var(--gap-vertical-25) 0 !important; } .fiviDocumentList > input:first-of-type { /* display: none !important; */ } } /* 8.14 fiVISION_DisclosuresList */ .fiviDisclosureList { display: flex; flex-direction: column; gap: var(--gap-vertical-50); width: 100%; padding-left: var(--gap-horizontal-150); } .fivi-disclosure-modal > .fiviDisclosure-checkbox-container { display: flex; gap: var(--gap-horizontal-50); align-items: center; } .fivi-disclosure-modal > .fiviDisclosure-checkbox-container label { font-weight: 500; font-size: calc(var(--font-size) + 2px); width: fit-content; } .fivi-disclosure-modal > .fiviDisclosure-modal-button { margin-bottom: var(--gap-vertical-50); } .fivi-disclosure-modal > .fiviDisclosure-checkbox-container > i { padding: 0 !important; } .fivi-disclosure-modal .modal-body > div:last-of-type { display: flex; flex-direction: row-reverse; justify-content: space-between; padding: 0 var(--gap-horizontal); } .fivi-disclosure-modal .modal-header { font-size: var(--font-size-h3); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: var(--font-weight-h4); font-family: var(--font-family-h4); } /* 8.15 fiVISION_IDAuthenticationQuestions */ .fiviIDAuth { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap-vertical-75) var(--gap-horizontal-25); width: 100%; } .fiviIDAuth br { display: none; } .fiviIDAuth > span:has(label) { display: flex; gap: var(--gap-horizontal-25); max-width: 95%; width: fit-content; font-size: var(--font-size-h4); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: var(--font-weight-h4); font-family: var(--font-family-h4); text-align: left; } .fiviIDAuth > span > label { font-weight: 400; font-size: calc(var(--font-size-label) - 2px); } .fiviIDAuth > span:has(b) { width: fit-content; } .fiviIDAuth > div:has(table) { width: 100%; } .fiviIDAuth tbody { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } .fiviIDAuth tbody td { display: flex; align-items: center; gap: var(--gap-horizontal-25); } .fiviIDAuth tbody td > label { font-size: calc(var(--font-size-label) - 2px); font-weight: 300; line-height: var(--font-size-label); color: var(--font-color-label); font-family: var(--font-family-label); } /* 8.16 fiVISION_ProductFundingV2 */ .fiviProductFunding { display: flex; flex-direction: column; gap: var(--gap-vertical-75); max-width: var(--column-width-10); width: 100%; align-self: center; } .fiviProductFunding > .fiviProductFundingItem, .fiviProductFunding > .fiviFundingAmount { margin: 0; padding: 0; width: 100%; } .fiviProductFunding > .fiviProductFundingItem > .fiviInput { max-width: 100%; align-items: center; justify-content: space-between; gap: var(--column-spacer); } .fiviProductFunding > .fiviProductFundingItem > .fiviInput > input, .fiviProductFunding > .fiviProductFundingItem > .fiviInput > label { margin-top: 0; max-width: var(--column-width-3); } .fiviProductFunding > .fiviProductFundingItem > .fiviInput > label { display: flex; flex-direction: column; gap: var(--gap-vertical-50); font-size: var(--font-size-label); font-weight: 500; } .fiviProductFundingItem > .fiviInput > label:after { content: "funding required"; color: red; font-size: calc(var(--font-size) - 2px); font-style: italic; padding-left: var(--gap-horizontal-50); } .fiviProductFundingItem > .fiviInput:has(> input[min="0"]) > label:after { content: "funding optional"; color: var(--color-primary-normal); } .fiviProductFunding > .fiviProductFundingItem > .fiviInput > .CtlValidator { left: -5px; } .fiviProductFunding > .fiviFundingAmount { display: flex; justify-content: space-between; border-top: 1px solid var(--color-gray-dark); padding-top: var(--gap-vertical-50); } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviProductFunding > .fiviProductFundingItem > .fiviInput { flex-direction: column; gap: var(--gap-vertical-50); } } /* 8.17 fiVISION_ACH */ .fiviACHControl > span[id*="_Consent"] { max-width: 100%; width: 100%; order: 7; } .fiviACHControl > span[id*="_tbFirstName"] { order: 1; } .fiviACHControl > span[id*="_tbLastName"] { order: 2; } .fiviACHControl > span[id*="_tbRoutingNumber"] { order: 3; } .fiviACHControl > span[id*="_tbAccountNumber"] { order: 4; } .fiviACHControl > .fiviACHStatus { order: 5; } .fiviACHControl > .fiviACHcbCont { order: 6; } .fiviACHControl > .fiviACHStatus, .fiviACHControl > .fiviACHcbCont { max-width: var(--fiviInput-width); width: 100%; } .fiviACHControl > .fiviACHStatus > span { font-size: calc(var(--font-size) - 2px); line-height: var(--font-lineheight); font-weight: 400 !important; font-style: italic; } .fiviACHControl > .fiviACHcbCont { display: flex; flex-direction: row; gap: var(--column-spacer); } .fiviACHControl > .CtlValidator { top: var(--input-marginTop-forLabelFocusSpace); bottom: unset; z-index: 5; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviACHControl > span[id*="_tbAccountNumber"] { order: 5; } .fiviACHControl > .fiviACHStatus { order: 4; } .fiviACHControl > .fiviACHcbCont { order: 6; } } /* 8.18 fiVISION_CreditCardV2 */ .fiviCreditCardControl > .fiviCCCardInfo > .DefaultAddressVerifyingClass { position: absolute; left: var(--fiviInput-width); transform: translateX(-100%); font-size: calc(var(--font-size) - 2px); width: 100%; text-align: right; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput { gap: var(--gap-vertical-25) 0; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > label { /* position: relative; */ /* bottom: unset; */ } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > select, .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > .TwoControls { width: calc(100% / 3) !important; margin: 0; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > .TwoControls > .DefaultTooltipClass { right: var(--gap-horizontal-25); height: var(--input-height); display: flex; align-items: center; justify-content: center; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > select:nth-of-type(1) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-color: transparent !important; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > select:nth-of-type(2) { border-radius: 0; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > .TwoControls > input { margin: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: transparent !important; } /* 8.19 fiVISION_ApplicantWithdraw */ .fiviApplicantWithdraw { max-width: 100%; width: 100%; display: flex; flex-direction: column; gap: var(--gap-vertical-75); position: relative; } .fiviApplicantWithdraw > .CtlValidator { top: -3px; bottom: unset; left: -8px; } /* 8.20 fiVISION_ProgressBar */ .progress-container { flex-grow: 1; } .journey-bar-icons { display: none; } .journey-bar { margin-bottom: 0; display: flex; justify-content: flex-end; align-items: flex-end; width: 100%; } .journey-bar > tbody > tr { display: flex; gap: var(--gap-horizontal-50); } .journey-bar > tbody > tr > td { border-top: none; padding: 0; } .journey-bar-group { display: flex; flex-direction: column-reverse; align-items: center; min-width: var(--column-width); gap: var(--gap-vertical-25); } .journey-bar-group > span { opacity: 33%; } .journey-bar-group > span { padding: 0 var(--gap-horizontal-25); font-size: calc(var(--font-size) - 2px); font-weight: 500; } .journey-bar-group:after { content: " "; width: 100%; height: 10px; border-radius: 5px; } .journey-bar-group.previous-group:after { background-color: color-mix( in srgb, var(--color-secondary-alt2) 66%, transparent ); } .journey-bar-group.current-group:after { background-color: var(--color-secondary-alt1); } .journey-bar-group.current-group > span { opacity: 100%; } .journey-bar-group.future-group:after { background-color: color-mix( in srgb, var(--color-secondary-alt1) 20%, transparent ); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .journey-bar { justify-content: flex-start; } .journey-bar-group > span { display: none; } } @media all and (max-device-width: 638px), all and (max-width: 638px) { .journey-bar { justify-content: center; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .progress-container { width: 100%; /* display: none; */ flex-grow: unset; } .journey-bar { justify-content: center; } .journey-bar > tbody { width: 100%; } .journey-bar > tbody > tr { width: 100%; } .journey-bar-group { min-width: calc(calc(100% / 5) - var(--gap-horizontal-50)); } } /* 8.21 fiVISON_IndividualHandler */ #IndividualHandler01 { width: 100%; } /* 8.22 Status Center Login (v3) */ .V3StatusCenterLogin { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-vertical-150); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .V3StatusCenterLogin div, .V3StatusCenterLogin > div > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-vertical); } .V3StatusCenterLogin > div span:has(> .btn-link) { display: block; } .V3StatusCenterLogin br { display: none; } .V3StatusCenterLogin > #pnlShowMFACode .fiviCheckBox { display: flex; } /* 8.23 Status Center Summary (v3) */ .V3SummaryControl { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-150); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .V3SummaryControl span:has(> button.btn-link) { /* we need to add some structure to spans that have buttons. */ display: inline-flex; align-items: center; } .V3SummaryControl br { display: none; } .V3StatusCenterLogin > #pnlEnterPassword, .V3StatusCenterLogin > #pnlShowCreatePass, .V3StatusCenterLogin > #pnlShowMFACode, .V3StatusCenterLogin > #pnlShowMFADropdown { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-vertical); max-width: var(--column-width-12); width: 100%; margin: 0; } @media all and (max-device-width: 769px), all and (max-width: 769px) { .V3SummaryControl { gap: var(--gap-vertical); } } /* 8.23.1 SC Summary Header (v3) */ .V3SummaryControl > header { display: block; box-shadow: none; padding: 0; background-color: transparent; border-bottom: none; } .V3SummaryHeader { background-image: none; background-color: transparent; border: none; box-shadow: none; } .V3SummaryHeader:before, .V3SummaryHeader:after { display: none; } /* 8.23.1.1 SC Summary Header Mobile Badge Hiding this and handling mobile styling differently. If you want to use it un-display-none the navbar-header and uncomment out the commented out bits. */ .V3SummaryHeader > #navbar-header { display: none !important; } /* .V3SummaryHeader > #navbar-header .V3SummaryCollapsedMenuButton { border: 2px solid var(--color-secondary-light); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; margin: 0 var(--gap-horizontal-50) 0 0; } .V3SummaryHeader > #navbar-header .V3SummaryCollapsedMenuButton > .icon-bar { background-color: var(--color-primary); } .V3SummaryHeader > #navbar-header .V3SummaryBadge { right: var(--gap-vertical-25); left: unset; background-color: var(--color-secondary-dark); z-index: 2; } .V3SummaryHeader > #navbar-header #mobile-badge.V3SummaryBadge { top: calc(var(--gap-vertical-50) * -1); } */ /* 8.23.1.2 SC Summary Header Icons/Navigation id of topNav */ .V3SummaryHeader > #topNav { display: block !important; width: 100%; padding: 0; } .V3SummaryHeader > #topNav > ul { display: flex; width: 100%; justify-content: center; gap: var(--gap-horizontal) var(--gap-vertical); } .V3SummaryHeader > #topNav:before, .V3SummaryHeader > #topNav:after, .V3SummaryHeader > #topNav > ul:before, .V3SummaryHeader > #topNav > ul:after { display: none; } .V3SummaryHeader > #topNav > ul > .nav-item { margin: 0; padding: var(--gap-vertical-75); min-width: 100px; } .V3SummaryHeader > #topNav > ul > .nav-item.active { border: 1px solid var(--color-secondary-light); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; } .V3SummaryHeader > #topNav > ul > .nav-item > a { display: flex; flex-direction: column; gap: var(--gap-vertical-25); padding: 0; margin: 0; font-size: calc(var(--font-size) + 2px); font-weight: 500; color: var(--color-primary) !important; fill: var(--color-primary) !important; } .V3SummaryHeader > #topNav > ul > .nav-item.active > a { background-image: none; background-color: transparent; box-shadow: none; color: var(--color-secondary-dark) !important; fill: var(--color-secondary-dark) !important; } .V3SummaryHeader > #topNav > ul > .nav-item .badge { right: var(--gap-vertical-25); left: unset; background-color: var(--color-secondary-dark); z-index: 2; } .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge { right: var(--gap-vertical-75); } @media all and (max-device-width: 992px), all and (max-width: 992px) { .V3SummaryHeader > #topNav > ul > .nav-item { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--gap-horizontal-25); } .V3SummaryHeader > #topNav > ul > .nav-item .badge, .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge { position: relative; width: fit-content; height: fit-content; right: unset; } .V3SummaryHeader > #topNav > ul > .nav-item > a { flex-direction: row; } .V3SummaryHeader > #topNav > ul > .nav-item > a > svg { margin: 0 0 0 0; } } @media all and (max-device-width: 769px), all and (max-width: 769px) { .V3SummaryHeader > #topNav { border: none; } .V3SummaryHeader > #topNav > ul { flex-wrap: wrap; margin: 0; gap: var(--gap-vertical-25); border: none; justify-content: space-between; } .V3SummaryHeader > #topNav > ul > .nav-item { width: calc(50% - var(--gap-vertical-25)); justify-content: center; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .V3SummaryHeader > #topNav > ul > .nav-item { justify-content: center; padding: var(--gap-vertical-50); } .V3SummaryHeader > #topNav > ul > .nav-item > a { flex-direction: column; justify-content: center; } .V3SummaryHeader > #topNav > ul > .nav-item .badge, .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge { position: absolute; right: var(--gap-vertical-25); top: var(--gap-vertical-50); left: unset; background-color: var(--color-secondary-dark); z-index: 2; } } /* 8.23.2 SC Summary Content */ .V3SummaryControl > article { margin: 0; } .V3SummaryControl .container-fluid { padding: 0; } .V3SummaryControl .container-fluid:before, .V3SummaryControl .container-fluid:after { display: none; } .V3SummaryControl .container-fluid > div { display: flex; flex-direction: column; gap: var(--gap-vertical-75); } .V3SummaryControl .headline-container { padding: 0; background: transparent; margin: 0; text-align: left; } .V3SummaryControl .headline-container > h1 { font-size: var(--font-size-h1); text-transform: capitalize; font-weight: var(--font-weight-h1); text-align: center; } /* 8.23.2.1 SC Summary Content Home */ .V3SummaryControl .container-fluid > div > .task { display: flex; justify-content: flex-start; align-items: center; gap: var(--gap-horizontal-50); margin: 0; border: 1px solid var(--color-secondary-light); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; } .V3SummaryControl .container-fluid > div > .task > .task-icon { fill: var(--color-primary); } .V3SummaryControl .container-fluid > div > .task > .task-content { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-horizontal-50); margin: 0; } .V3SummaryControl .container-fluid > div > .task .task-text { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } .V3SummaryControl .container-fluid > div > .task .task-title { color: var(--color-primary); font-size: var(--font-size-h3); text-transform: capitalize; margin: 0; } .V3SummaryControl .container-fluid > div > .task .task-description { font-size: var(--font-size); color: var(--font-color); } /* 8.23.2.2 SC Summary Content Messages */ .V3SummaryControl header:has(#nav-messages.active) + article .headline-container, .V3SummaryControl header:has(#nav-messages.active) + article .headline-container > span { display: flex; flex-direction: column; gap: var(--gap-vertical-150); align-items: center; } .V3SummaryControl header:has(#nav-messages.active) + article .headline-container > span div:has(.btn-primary) { margin-bottom: var(--gap-vertical-150); text-align: center; } .V3SummaryControl .fiviSCSendMessage > div { display: flex; flex-direction: column; gap: var(--gap-vertical-75); } @media all and (max-device-width: 452px), all and (max-width: 452px) { .V3SummaryControl .container-fluid > div > .task > .task-icon { display: none; } } /* 8.24 v3TextBox ***MOVE TO TOP OF fivi Controls when converting to v3*** its a base level control, it should be first in the hierarchy of controls for now its only SC so here is fine. */ .fiviTextBox { flex-wrap: nowrap; } /* 8.25 fiVISION_FinicityFundingAccountVerification */ .fiviFinicity, .fiviFinicity #RealTimeInput, .fiviFinicity .fivi-verifyNow-contents { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-vertical-50); font-size: calc(var(--font-size) + 2px); } .fiviFinicity #RealTimeInput > div { width: 100% !important; text-align: center; } .fivi-verifyNow-btn-contanier button:disabled { display: none; } #FinicityStatusLabel { font-weight: 600 !important; color: var(--color-primary); } /* 8.26 fiVISION_OneTimePasscode */ .fiviOneTimePasscode .fiviPanelContainer { width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: var(--gap-horizontal); } .fiviOneTimePasscode .fiviOTPButtonGroup { display: flex; align-items: center; justify-content: flex-end; gap: var(--gap-horizontal); margin-top: var(--gap-horizontal-50); } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviOneTimePasscode .fiviOTPButtonGroup { flex-direction: column-reverse; gap: var(--gap-vertical); } } /* 8.27 fiVISION_WorkflowSurvey */ .fiviWorkflowSurvey { width: 100%; max-width: 100%; } .fiviWorkflowSurvey > div { width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: var(--gap-horizontal); } .fivi-workflow-survey-item { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .fivi-workflow-survey-question > label { font-weight: 600; } .fivi-workflow-survey-answers { display: flex; flex-direction: column; gap: var(--gap-vertical-25); padding-left: var(--gap-horizontal); } .fivi-workflow-survey-answers .fiviCheckBox > label { font-weight: 400; } .ErrorMessage.fivi-workflow-survey-error { font-weight: 600; font-size: calc(var(--font-size) - 2px); } /* 8.28 fiVISION_ProveIndividualLookup */ .fiviProveIndividualLookup { justify-content: center; } .fiviProveIndividualLookup .prove-direction-buttons { display: flex; flex-direction: row-reverse; justify-content: space-between; width: var(--fiviInput-width); } @media all and (max-device-width: 453px), all and (max-width: 453px) { .prove-container { width: 100%; } } /* 8.29 fiVISION_ShoppingCart */ .shopping-container .shoppingCart-img-container { position: relative; display: flex; height: 30px; width: fit-content; display: none; } .shopping-container .shoppingCart-img-container > .shoppingCart-img { height: 30px; filter: invert(17%) sepia(88%) saturate(7378%) hue-rotate(243deg) brightness(84%) contrast(109%); } .shopping-container .shoppingCart-img-container > label { position: absolute; width: fit-content; z-index: 1; bottom: -5px; right: -15px; overflow: visible; font-weight: 500; } .shopping-container .modal-dialog { max-width: var(--column-width-6); width: 100%; } .shopping-container .modal-content { padding: var(--gap-vertical-50) var(--gap-horizontal-75); display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .shopping-container .DefaultModalHeaderClass { display: flex; text-wrap: nowrap; white-space: nowrap; font-size: var(--font-size-h3); font-weight: var(--font-weight-h2); border-bottom: 2px solid var(--color-accent-alt); padding: 0 0 var(--gap-vertical-50) 0; } .shopping-container .DefaultModalHeaderClass > label { margin-left: var(--gap-horizontal-25); font-size: var(--font-size-h3); font-weight: var(--font-weight-h2); } .shopping-container .modal-body { padding: 0; display: flex; flex-direction: row; gap: var(--gap-vertical-50); flex-wrap: wrap; justify-content: space-between; } .shopping-container .modal-body hr, .shopping-container .modal-body br { display: none; } .shopping-container .modal-body span:has(> input) { display: flex; align-items: center; } .shopping-container .modal-body #shoppingCartOneProductRequiredMessage { width: 100%; } .shopping-container .modal-body #shoppingCartOneProductRequiredMessage > center { text-align: left; font-size: var(--font-size); padding-bottom: var(--gap-vertical-50); border-bottom: 1px solid var(--color-accent-alt); } .shopping-container .modal-body > div[id*="ShoppingCartIcon"], .shopping-container .modal-body > div[id*="scShoppingCart"] { width: 100% !important; background-color: unset !important; padding: 0 0 var(--gap-vertical-50) 0 !important; height: fit-content !important; display: flex; flex-direction: row; border-bottom: 1px solid var(--color-accent-alt); } .shopping-container .modal-body > div[id*="ShoppingCartIcon"]:has(> .pull-right), .shopping-container .modal-body > div[id*="scShoppingCart"]:has(> .pull-right) { flex-wrap: wrap; } .shopping-container .modal-body > div[id*="ShoppingCartIcon"] > span:first-of-type, .shopping-container .modal-body > div[id*="scShoppingCart"] > span:first-of-type { width: 100%; text-wrap: nowrap; white-space: nowrap; font-size: var(--font-color-h3); font-weight: var(--font-weight-h3); display: flex; align-items: center; } .shopping-container .modal-body > div .pull-right:disabled { display: none; } .shopping-container .modal-body #btnCartChange { display: flex; align-items: center; } /* 9. Page Specific */ /* 9.1 Default Page */ main > .layout-container:has(.page-Default-Content) { background-color: unset; outline: none; } main > .layout-container:has(.page-Default-Content) .logo-app-container { background-color: var(--color-accent-hawkes-blue); } .page-Default-Content .default-start { justify-content: flex-end; position: relative; margin: var(--gap-vertical-150) 0 var(--gap-vertical-200) 0; } .page-Default-Content .start-application { background-color: var(--color-accent-alt); padding: var(--gap-vertical) var(--gap-vertical-200); border-radius: 10px; gap: var(--gap-vertical-75); align-items: center; position: absolute; z-index: 2; left: -20px; top: 71px; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .page-Default-Content .start-hero-container { display: flex; } .start-application { z-index: 3 !important; } } .page-Default-Content .start-application .button-primary, .page-Default-Content .start-application #IndividualHandler01 { width: var(--column-width-3) !important; align-self: center; height: 46.8px; } .page-Default-Content .start-hero-container { background-image: url("/_assets/layoutcontent/20082/default/mom-dad-child-sitting.jpg"); height: 400px; background-position: 65%; background-size: auto 100%; border-radius: 10px; position: relative; } .page-Default-Content .start-hero-container img.hero-mini-logo { height: 125px; position: absolute; top: -3px; left: -5px; z-index: 2; } .page-Default-Content .start-hero-container img.hero-image { display: none; } /* Remove hero img and center start-application */ @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .page-Default-Content .start-hero-container { display: none; } .default-start { margin: 0 !important; } .page-Default-Content .default-start { justify-content: center; } .page-Default-Content .start-application { position: relative; top: 0; left: 0; width: 100%; } .lets-get-started-container { max-width: var(--column-width-5); } .page-Default-Content .thumbnail { max-width: var(--column-width-4); } .what-you-need { font-size: calc(var(--font-size) - 2px); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .lets-get-started-container { max-width: 100%; height: fit-content; } .lets-get-started-container > #IndividualHandler01 { align-items: flex-start; } .default-thumbnail-container { max-width: 100%; width: 100%; flex-direction: row; flex-wrap: nowrap; } .page-Default-Content .thumbnail { max-width: 100%; min-height: fit-content; } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .default-thumbnail-container { flex-wrap: wrap; } .default-thumbnail-container > .thumbnail { min-height: fit-content; } .thumbnail-call-to-action, .thumbnail-call-to-action > #IndividualHandler01 { flex-direction: row; justify-content: flex-end; } .what-you-need { font-size: var(--font-size); } .what-you-need-header, .what-you-need { display: none; } .lets-get-started-container > h2 > .DefaultTooltipClass { display: inline; } } @media all and (max-device-width: 525px), all and (max-width: 525px) { } @media all and (max-device-width: 452px), all and (max-width: 452px) { .page-Default-Content .thumbnail { max-width: var(--column-width-4); } .lets-get-started-container { align-items: center; } .lets-get-started-container > #IndividualHandler01 { align-items: center; } } /* 9.2 Status Center - Default */ .page-StatusCenterDefault { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-200); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .page-StatusCenterDefault > .page-navigation-container { flex-direction: column; align-items: center; margin-top: 0; } /* 9.3 Status Center - Status Center */ .page-StatusCenter { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-200); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .page-StatusCenter > .page-navigation-container { flex-direction: column; align-items: center; margin-top: 0; } /* 9.4 Funding Method */ .funding-method-container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: var(--column-width-12); gap: var(--gap-vertical) var(--gap-horizontal); } .funding-method-container > .fiviPanel > .fiviMultiInput, .funding-method-container > .fiviPanel { width: 100%; max-width: var(--column-width-3); } .funding-method-container .fiviCheckBox > div { display: none; } .funding-method-container .fiviCheckBox > label { display: flex; align-items: center; justify-content: center; width: var(--column-width-3); height: var(--input-height); border: 2px solid var(--color-gray-dark); border-radius: 2px; padding: 0 var(--column-spacer); text-align: center; cursor: pointer; } .funding-method-container .fiviCheckBox > div.checked + label { color: #fff; border-color: var(--color-primary); background-color: var(--color-primary); } .funding-method-container .fiviCheckBox > label:hover { color: var(--color-primary-normal); border-color: var(--color-primary-normal); } #pnlSelectFundingMethodDetails .fiviPanel { width: 100%; } .funding-detail { padding: var(--column-spacer); outline: 2px solid var(--color-gray-dark); gap: var(--gap-vertical-50); width: 100%; max-width: calc(var(--fiviInput-width) + calc(var(--column-spacer) * 2)); margin: 0 auto; } .funding-detail .section-header, .funding-detail .page-text-small, .funding-detail .page-text, .funding-detail .page-text-large { text-align: center; } .funding-detail .section-header:before { /* content: ""; */ /*display: inline;*/ /* width: 100%;*/ /* height: 1px;*/ /* background-color: var(--color-gray-dark); */ } .funding-detail .section-header { display: flex; justify-content: center; } .funding-detail .fiviInput, .funding-detail .fiviTwoInput { width: 100%; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .funding-method-container > .fiviPanel { width: 100%; max-width: calc(50% - calc(var(--column-spacer) / 2)); } .funding-method-container > .fiviPanel > .fiviMultiInput { max-width: 100%; width: 100%; } .funding-method-container > .fiviPanel > .fiviMultiInput > .rb-as-button { max-width: 100%; } .funding-method-container .fiviCheckBox > label { width: 100%; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .funding-method-container > .fiviPanel { width: 100%; max-width: 100%; } } /* 9.5 eSign Agreement */ .page-eSignAgreement #lnkESignAgreement, .page-eSignAgreement .fiviCheckBox > label { font-size: calc(var(--font-size) + 2px); } /* 9.6 Disclosure */ .page-Disclosures .page-text.disclosure-click-text { font-weight: 600; color: red; } /* 9.7 Select Category */ .product-category-container { width: 100%; max-width: var(--column-width-9); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--column-spacer); justify-content: center; } .product-category-container > div, .product-category-container > .fiviPanel div[class*="product-category-"] { display: block; width: 100%; max-width: var(--column-width-3); height: calc(var(--column-width-2) + var(--column-width-half)); } .product-category-container .fiviInput.fiviCheckBox { max-width: 100%; height: 100%; background-color: var(--color-accent-onahau); border: 2px solid transparent; border-radius: 10px; justify-content: center; &:has(> .icheckbox_square-grey.checked) { background-color: var(--color-accent-hawkes-blue); border-color: var(--color-primary); } &:has(> .icheckbox_square-grey.hover) { background-color: var(--color-accent-alt); border-color: var(--color-primary); } } .product-category-container .fiviInput.fiviCheckBox > .icheckbox_square-grey { background-image: none; background-color: transparent; position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; } .product-category-container .fiviInput.fiviCheckBox > .icheckbox_square-grey > input, .product-category-container .fiviInput.fiviCheckBox > .icheckbox_square-grey > ins { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; } .product-category-container .fiviInput.fiviCheckBox > label { text-align: center; font-size: var(--font-size-h3); display: flex; flex-direction: column; gap: var(--gap-vertical); justify-content: flex-start !important; padding-top: 3.2em; } .product-category-savings, .product-category-checking, .product-category-moneymarket, .product-category-certificates, .product-category-clubaccounts { text-align: center; } .category-icon { width: 45px; color: var(--color-primary); padding-top: 1em; position: relative; top: 90px; z-index: 10; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .product-category-container { justify-content: center; } .product-category-container > div, .product-category-container > .fiviPanel div[class*="product-category-"] { max-width: var(--column-width-2); height: var(--column-width-2); } .category-icon { top: 80px; } .product-category-container .fiviInput.fiviCheckBox > label { padding-top: 3.25em; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .product-category-container > div, .product-category-container > .fiviPanel div[class*="product-category-"] { max-width: 100%; height: var(--column-width-2); } } /* 9.8 Select Product */ .requested-products-container { width: 100%; display: flex; align-items: flex-start; justify-content: flex-start; } .requested-products-banner { position: relative; display: flex; flex-direction: column; width: 100%; gap: 0; max-width: var(--column-width-5); padding: calc(var(--column-spacer) * 0.5) var(--column-spacer); background-color: var(--color-accent-alt2); border-radius: 10px; transition: all 0.75s ease; border: 2px solid var(--color-accent); display: none; } .requested-products-banner:has(> .fivi-expanded) { gap: var(--gap-vertical); } .requested-products-banner > h3 { text-align: center; text-transform: none; font-weight: 500; } .requested-products-banner > .requested-products { display: flex; flex-direction: column; gap: var(--gap-vertical-50); height: 0; overflow: hidden; padding-top: 0; transition: all 0.5s ease; } .requested-products-banner > .requested-products .product-requested-item { display: flex; justify-content: space-between; align-items: center; border-top: 2px solid var(--color-accent); padding-top: var(--gap-vertical-50); } .requested-products-banner > .requested-products .requested-product-label { font-size: var(--font-size-h4); font-weight: 500; } .requested-products-banner .requested-expander { position: absolute; font-weight: 400; font-size: 30px; cursor: pointer; top: calc(var(--column-spacer) * 0.25); right: calc(var(--column-spacer) * 0.25); } .products-container .fiviProdContainer { padding: 0; border: none; border-radius: 10px; position: relative; padding-bottom: var(--gap-vertical-200); background-color: var(--color-accent-onahau); } .products-container .fiviProdServ > .fiviCheckBox .icheckbox_square-grey { background-image: none; background-color: transparent; position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; display: none; } .products-container .fiviProdServ > .fiviCheckBox .icheckbox_square-grey > input, .products-container .fiviProdServ > .fiviCheckBox .icheckbox_square-grey > ins { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; } .products-container .fiviProdServ > .fiviCheckBox, .products-container .fiviProdServ > .fiviCheckBox > span:disabled { width: 100%; background-color: transparent; } .products-container .fiviProdServ:has(> .Product_MoreInfo) > .fiviCheckBox, .products-container .fiviProdServ:has(> .Product_MoreInfo) > .fiviCheckBox > span:disabled, .products-container .fiviProdServ:has(> .fiviProdPanel) > .fiviCheckBox, .products-container .fiviProdServ:has(> .fiviProdPanel) > .fiviCheckBox > span:disabled { padding-bottom: var(--gap-vertical); } .products-container .fiviProdServ > .fiviCheckBox label { display: flex; flex-direction: column; text-indent: 0; margin-left: 0; gap: var(--gap-horizontal-75); align-items: center; width: 100%; padding-top: var(--column-spacer); cursor: pointer; } .products-container .fiviProdServ > .fiviCheckBox label:has(> img) { padding-top: 0; } .products-container .fiviProdServ > .fiviCheckBox label > img { width: 100%; padding: var(--gap-vertical-50) var(--gap-vertical-50) 0 var(--gap-vertical-50); } .products-container .fiviProdServ > .fiviCheckBox label:after { content: "Add"; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; bottom: calc(calc(var(--gap-vertical-200) * -1) - 1px); width: 100%; height: var(--gap-vertical-200); background-color: var(--color-accent-alt); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; cursor: pointer; font-weight: 400; } .products-container .fiviProdServ > .fiviCheckBox:has(.checked) label:after { content: "Remove"; background-color: var(--color-primary); color: white; } .products-container .fiviProdContainer:hover .fiviProdServ > .fiviCheckBox label:after { border: 2px solid var(--color-primary); } .products-container .fiviProdContainer:hover .fiviProdServ > .fiviCheckBox:has(.checked) label:after { border: 2px solid var(--color-accent-alt); } .products-container .fiviProdServ > .fiviCheckBox:has(.checked.disabled) label:after { content: "Required"; background-color: var(--color-primary); color: white; cursor: default; } .products-container .Product_MoreInfo { padding: 0 var(--column-spacer) var(--gap-vertical) var(--column-spacer); } .products-container .fiviProdServControl .DefaultTooltipClass { top: var(--column-spacer); right: var(--column-spacer); } .products-container .Product_MoreInfo > span { display: flex; flex-direction: column; gap: var(--gap-vertical-75); } .products-container .fiviProdPanel:has(*):before { width: calc(100% - calc(var(--column-spacer) * 2)); margin-left: 0; margin: 0 var(--column-spacer); background-color: var(--color-accent); } .products-container .fiviProdPanel { padding: 0 var(--column-spacer) var(--gap-vertical) var(--column-spacer); } @media all and (min-device-width: 836px), all and (min-width: 836px) { .page-container.page-SelectProduct { position: relative; } .requested-products-container { position: absolute; top: 0; align-items: flex-end; } } @media screen and (max-device-width: 836px), all and (max-width: 836px) { .requested-products-container { position: relative; align-items: center; } } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .requested-products-banner { max-width: var(--column-width-4); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .requested-products-container { align-items: center; margin-top: var(--gap-vertical); } .fiviProdServControl { justify-content: center; } } @media (max-device-width: 656px), (max-width: 656px) { .requested-products-container > .requested-products-banner { max-width: 100%; } } @media (max-device-width: 452px), (max-width: 452px) { .requested-products-banner { padding-left: var(--gap-horizontal-25); padding-right: var(--gap-horizontal-25); } .requested-products-banner .product-requested-item { flex-direction: column; gap: var(--gap-horizontal-25); } .requested-products-banner label { text-align: center; } } /* 9.9 Approved */ .printable-card-container { /* width: fit-content; */ width: 100%; display: flex; flex-direction: column; gap: var(--gap-vertical-50); align-items: center; } .printable-card { height: 310px; width: 500px; background-color: var(--color-accent-alt) !important; border-radius: 20px; color: var(--color-primary); margin: 20px; font-size: 20px; font-weight: 400; box-shadow: 2px 2px 20px #707070; display: flex; flex-direction: column; justify-content: space-between; padding: 0 var(--column-spacer) var(--column-spacer) var(--column-spacer); } .printable-card .printable-card-top { width: 100%; display: flex; justify-content: space-between; } .printable-card .printable-card-contact { margin-top: var(--gap-vertical); text-align: right; } .printable-card .printable-card-contact > div { font-size: 18px; font-weight: 500; } .printable-card .printable-card-contact > div:first-child { font-weight: 500; font-size: 20px; width: 100%; } .printable-card img { width: 200px; } .printable-card .printable-card-middle { display: flex; flex-direction: column; } .printable-card .printable-card-middle > div { font-size: 26px; font-weight: 600; } .printable-card .printable-card-middle > div:first-child { font-size: 18px; font-weight: 500; } .printable-card-bottom { font-size: 26px; font-weight: 600; } @media print { body:has(.printable-card) { visibility: hidden; } .printable-card { visibility: visible; position: fixed; left: 0; top: 0; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; } } .page-Approved > .section-container > .section-header { display: none; } @media all and (max-device-width: 657px), all and (max-width: 657px) { .printable-card { height: 210px; width: 300px; } .printable-card img { width: 130px; height: 60px; margin-top: 10px; } .printable-card .printable-card-contact > div:first-child { font-size: 12px; } .printable-card .printable-card-contact > div { font-size: 11px; } .printable-card .printable-card-middle > div:first-child { font-size: 13px; } } /* 9.10 Required Documents */ .panel-heading { /* background-color: pink!important; */ } .panel-title-container { display: flex !important; flex-direction: row !important; justify-content: space-between !important; padding-top: 10px; } .fas { font-size: 2.5em; padding-right: 0.5em; /* background: orange; */ } .panelArrow { padding: 0.5em 0 0 0.5em !important; } .panel-title { padding-top: 6px; font-size: 16px; } .id-title { padding: 1em 0; } .id-heading { display: block !important; } .panel-body { margin-left: 15px; } .doc-icon-container { width: 3em; margin-right: 1em; } .doc-icon { } /* Old styles */ /* .fas { font-size: 4.5em; } */ /* .id-container { display: flex; padding-bottom: 1.5em; .hero-mini-logo-1, .hero-mini-logo-2 { width: 150px; height: 150px; position: relative; } */ /* .hero-mini-logo-1 { bottom: -27.5%; left: 96%; clip-path: inset(0 45% 42% 0); } */ /* .hero-mini-logo-2 { bottom: 8.5%; right: 35%; clip-path: inset(0 0 45% 43%); } */ /* .flex-column { border-radius: 10px; margin: 0 2em; padding: 2.5em; width: 450px; height: 450px; } */ /* .h4 { font-size: 24px; padding-top: 0.5em; } */ /* .flex-column:nth-child(1) { background-color: var(--color-accent); border-bottom-right-radius: 0; } .flex-column:nth-child(2) { background-color: var(--color-accent-alt); border-bottom-left-radius: 0; } } */ /* @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .id-container { flex-direction: column; .flex-column { margin: 1.5em 0; } .hero-mini-logo-1 { width: 150px; height: 150px; position: relative; top: 27.5%; left: 95%; clip-path: inset(0 42% 42% 0); } } } */ /* @media all and (max-device-width: 455px), all and (max-width: 455px) { .id-container { justify-content: center; align-items: center; .flex-column { width: 350px; height: 450px; } .hero-mini-logo-1 { top: 28.5%; left: 94%; } .hero-mini-logo-2 { bottom: 12.5%; right: 46%; } } } */ /* 9.11 Application Summary */ .page-ApplicationSummary { gap: var(--gap-horizontal-200); } #pnlApplicationSummaryJointOwnersList, #pnlApplicationSummaryBeneficiariesList { padding-top: 1.5em; } .summary-img-container { background-image: url(/_assets/layoutcontent/20082/default/mom-dad-child-sitting.jpg); height: 300px; width: 350px; background-position: 90%; background-size: auto 100%; border-radius: 10px; position: relative; } .no-wrap-2 { flex-wrap: nowrap; } @media all and (max-device-width: 834px), all and (max-width: 834px) { .summary-img-container { height: 200px; width: 250px; } } @media all and (max-device-width: 453px), all and (max-width: 453px) { .summary-img-container { display: none; } } /*9.12 Pending */ /*Hiding survey section */ .page-Pending > .section-container > .section-header { display: none; } .pending-img-container { display: flex; width: 100%; } .pending-image { width: 100%; border-radius: 10px; } /* 9.13 Eligibility */ #rbCity, #rbSSA, #rbCMS, #rbACC, #rbCompany, #rbExisting, #rbEligible { /* background-color: red; */ } .page-applicanteligibility .section-container .flex-column { display: flex; justify-items: center; align-items: center; } .page-applicanteligibility .section-container .flex-column .fiviCheckBox > label, .page-applicanteligibility .section-container .flex-column .fiviCheckBox > span > label { text-indent: 0; } .page-applicanteligibility .section-container .flex-column .fiviCheckBox { background-color: var(--color-accent-onahau); padding: 20px 20px; font-family: sans-serif, Arial; font-size: 16px; border: 1.9px solid #0a172470; border-radius: 6px; width: 25em; -webkit-box-shadow: 1px 3px 24px -6px rgba(0, 0, 0, 0.26); -moz-box-shadow: 1px 3px 24px -6px rgba(0, 0, 0, 0.26); box-shadow: 1px 3px 24px -6px rgba(0, 0, 0, 0.26); } #rbCompany { padding: 20px 30px; } /* 10. ControlID Specific */ #tbCamera { display: none; max-width: var(--fiviInput-width); width: 100%; } #tbCamera #lblLicenseScan { display: block; left: 0; transform: none; margin: 0 auto; } #pnlDocuments { width: 100%; } #lblLicenseScan { width: auto; height: auto; padding: 1em; } @media all and (max-device-width: 834px), all and (max-width: 834px) { #tbCamera { display: block; max-width: var(--column-width-full); width: fit-content !important; } } /* 11. Admin Console */ .AdminContent .aspNetDisabled { display: flex; width: fit-content; align-items: center; min-width: 200px; } .AdminContent .aspNetDisabled > input { width: 20px; } .layout.AdminConsole { min-height: auto; } .layout.AdminConsole > header, .layout.AdminConsole > footer { display: none; } .layout.AdminConsole > main { padding: 40px 10px; } .layout.AdminConsole > main > .layout-container { width: 100%; max-width: calc(980px - 40px); } .layout.AdminConsole .page-navigation-container { max-width: 100%; } /* Table of Contents 1. Variables 1.1 Mobile Variables 2. General Elements & Classes 2.1 General Elements 2.2 iCheck 2.3 Flex Helper Classes 2.4 Column Helper Classes 2.5 General Helper Classes 3. Page Structure 3.1 Page Structure 3.2 Header Styling 3.3 Main Styling 3.4 Footer Styling 4. Page General Containers 5. Buttons 5.1 Button Containers 6. Accordions 7. Inputs and Labels 7.1 Labels 7.2 Inputs 7.3 Fivi Input Containers 7.4 Fivi Checkbox/Radio Buttons 7.5 Validator 7.6 Tool Tips 7.7 Seperators 7.8 Loader 7.9 Popover 8. fiVISION Controls 8.1 fiVISION_ErrorSummary 8.2 fiVISION_Panel 8.3 fiVISION_ProductsAndServicesV2 8.4 fiVISION_AddressTextBoxV2 8.5 fiVISION_PhoneTextBoxV2 8.6 fiVISION_IDTypeV2 8.7 fiVISION_HousingDurationHistory 8.8 fiVISION_EmploymentHistory 8.9 fiVISION_IndividualIncome 8.10 fiVISION_IndividualDetails 8.11 fiVISION_ProductsAndServicesSelected 8.12 fiVISION_ProductRelationships 8.13 fiVISION_DocumentListV2 8.14 fiVISION_DisclosuresList 8.15 fiVISION_IDAuthenticationQuestions 8.16 fiVISION_ProductFundingV2 8.17 fiVISION_ACH 8.18 fiVISION_CreditCardV2 8.19 fiVISION_ApplicantWithdraw 8.20 fiVISION_ProgressBar 8.21 fiVISON_IndividualHandler 8.22 Status Center Login 8.23 Status Center Summary 8.24 v3TextBox 8.25 fiVISION_FinicityFundingAccountVerification 8.26 fiVISION_OneTimePasscode 8.27 fiVISION_WorkflowSurvey 8.28 fiVISION_ProveIndividualLookup 8.29 fiVISION_ShoppingCart 9. Page Specific 9.1 Default Page 9.2 Status Center - Default 9.3 Status Center - Status Center 9.4 Funding Method 9.5 eSign Agreement 9.6 Disclosure 9.7 Select Category 9.8 Select Product 9.9 Approved 9.10 Required Documents 9.11 Application Summary 9.12 Pending 9.13 Eligibility 10. ControlID Specific 11. Admin Console Mobile Reference Media Queries for stepping down Assumes column width 66px and column spacer 24px @media all and (max-device-width: 1106px), all and (max-width: 1106px) { } @media all and (max-device-width: 836px), all and (max-width: 836px) { } @media all and (max-device-width: 656px), all and (max-width: 656px) { } @media all and (max-device-width: 452px), all and (max-width: 452px) { } */ /* 1. Variables */ :root { /*colors*/ /*gray scale*/ --color-white-light: #fff; --color-white-normal: #fff; --color-white-dark: #fff; --color-gray-light: #f8f8f8; --color-gray-normal: #f6f9fc; --color-gray-dark: #d6d5d4; --color-black-light: #0b0731; --color-black-normal: #000; --color-black-dark: #000; /*client colors*/ --color-primary: #0a1724; --color-secondary: #1923dc; --color-secondary-alt1: #258bff; --color-secondary-alt2: #8bd1ff; --color-secondary-alt3: #59d2fe; --color-accent-onahau: #cff1f9; --color-accent-hawkes-blue: #d7e7ff; --color-accent-alt2: #fbf5fe; --color-accent-alt3: #e6eceb; /*font family*/ --font-family-pri: "Inter", sans-serif; --font-family-alt: "Inter", sans-serif; /*fonts*/ /*default font*/ --font-size: 14px; --font-lineheight: 24px; --font-color: var(--color-primary); --font-weight: 300; --font-family: var(--font-family-pri); /*input font*/ --font-size-input: 16px; --font-lineheight-input: 22px; --font-color-input: var(--font-color); --font-weight-input: 500; --font-family-input: var(--font-family); /*label font*/ --font-size-label: 20px; --font-lineheight-label: var(--font-lineheight); --font-color-label: var(--font-color); --font-weight-label: 300; --font-family-label: var(--font-family-alt); /*h1 font*/ --font-size-h1: 30px; --font-lineheight-h1: 42px; --font-color-h1: var(--color-primary); --font-weight-h1: 700; --font-family-h1: var(--font-family-alt); /*h2 font*/ --font-size-h2: 24px; --font-lineheight-h2: 26px; --font-color-h2: var(--font-color-h1); --font-weight-h2: 600; --font-family-h2: var(--font-family-input); /*h3 font*/ --font-size-h3: 20px; --font-lineheight-h3: 22px; --font-color-h3: var(--color-primary); --font-weight-h3: 400; --font-family-h3: var(--font-family); /*h4 font*/ --font-size-h4: 16px; --font-lineheight-h4: 18px; --font-color-h4: var(--font-color-h1); --font-weight-h4: 500; --font-family-h4: var(--font-family); /*page structure*/ --column-width: 66px; --column-spacer: 24px; --column-width-half: calc(var(--column-width) / 2); /*33px*/ --column-width-2: calc(calc(var(--column-width) * 2) + var(--column-spacer)); /*156px*/ --column-width-3: calc( calc(var(--column-width) * 3) + calc(var(--column-spacer) * 2) ); /*246px*/ --column-width-4: calc( calc(var(--column-width) * 4) + calc(var(--column-spacer) * 3) ); /*336px*/ --column-width-5: calc( calc(var(--column-width) * 5) + calc(var(--column-spacer) * 4) ); /*426px*/ --column-width-6: calc( calc(var(--column-width) * 6) + calc(var(--column-spacer) * 5) ); /*516px*/ --column-width-7: calc( calc(var(--column-width) * 7) + calc(var(--column-spacer) * 6) ); /*606px*/ --column-width-8: calc( calc(var(--column-width) * 8) + calc(var(--column-spacer) * 7) ); /*696px*/ --column-width-9: calc( calc(var(--column-width) * 9) + calc(var(--column-spacer) * 8) ); /*786px*/ --column-width-10: calc( calc(var(--column-width) * 10) + calc(var(--column-spacer) * 9) ); /*876px*/ --column-width-11: calc( calc(var(--column-width) * 11) + calc(var(--column-spacer) * 10) ); /*966px*/ --column-width-12: calc( calc(var(--column-width) * 12) + calc(var(--column-spacer) * 11) ); /*1056px*/ --column-width-full: 100%; /*flex properties*/ --gap-vertical: var(--column-spacer); --gap-vertical-25: calc(var(--gap-vertical) * 0.25); --gap-vertical-50: calc(var(--gap-vertical) * 0.5); --gap-vertical-75: calc(var(--gap-vertical) * 0.75); --gap-vertical-150: calc(var(--gap-vertical) * 1.5); --gap-vertical-200: calc(var(--gap-vertical) * 2); --gap-horizontal: var(--column-spacer); --gap-horizontal-25: calc(var(--gap-horizontal) * 0.25); --gap-horizontal-50: calc(var(--gap-horizontal) * 0.5); --gap-horizontal-75: calc(var(--gap-horizontal) * 0.75); --gap-horizontal-150: calc(var(--gap-horizontal) * 1.5); --gap-horizontal-200: calc(var(--gap-horizontal) * 2); /*input and label structure*/ --fiviInput-width: var(--column-width-6); --fiviInput-width-half: calc( calc(var(--fiviInput-width) - var(--column-spacer)) / 2 ); --fiviInput-width-double: calc( calc(var(--fiviInput-width) * 2) + var(--column-spacer) ); /*the below two should add to the above, sometimes 3+2 or 2+2 or 2+1, main is always >= alt*/ --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-3); --input-height: 60px; --input-focusLabel-fontSize: 12px; --input-focusLabel-offset: calc( var(--input-height) - calc(var(--input-focusLabel-fontSize) / 2) ); --input-marginTop-forLabelFocusSpace: 0; /* how much space between each input */ --fiviInput-vertical-spacing: var(--gap-vertical-150); --fiviInput-horizontal-spacing: var(--gap-horizontal); } /* 1.1 Mobile Variables We are going to do a step down approach. We need to account for the head/main/foot left/right padding of column width (*2 as there are left and right). add a couple pixels for good measure. */ @media all and (max-device-width: 1106px), all and (max-width: 1106px) { /* @1056px+96px+2px = 1106px -12 columns -> 8 columns -fiviInput-width goes to 4 columns -should accomidate 2 inputs per row */ :root { --font-size-input: 18px; --font-size-label: 18px; --font-lineheight-label: var(--font-lineheight); --column-width-11: 100%; --column-width-12: 100%; --column-width-10: 100%; --fiviInput-width: var(--column-width-4); --fiviInput-width-partial-main: var(--column-width-2); --fiviInput-width-partial-alt: var(--column-width-2); --fiviInput-width-half: var(--column-width-2); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { /* @786px+48px+2px = 836px -9 columns -> 6 columns -fiviInput-width goes to 3 columns -should accomidate 2 inputs per row */ :root { --font-size: 14px; --font-size-h1: 30px; --font-lineheight-h1: 32px; --font-size-h2: 22px; --font-lineheight-h2: 24px; --font-size-h3: 18px; --font-lineheight-h3: 20px; --column-width-8: 100%; --column-width-9: 100%; --fiviInput-width: var(--column-width-6); --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-3); --fiviInput-width-half: calc( calc(var(--fiviInput-width) - var(--column-spacer)) / 2 ); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { /* @606px+48+2px = 656px -7 columns -> 4 columns -fiviInput-width goes to 4 columns -accomidate 1 input, with an exception or two, inputs go 1 per row */ :root { --column-width-6: 100%; --column-width-7: 100%; --fiviInput-width: var(--column-width-5); --fiviInput-width-partial-main: var(--column-width-3); --fiviInput-width-partial-alt: var(--column-width-2); --fiviInput-width-half: calc( calc(var(--fiviInput-width) - var(--column-spacer)) / 2 ); } } @media (max-device-width: 452px), (max-width: 452px) { /* @426px+24px+2px = 452px - any column width > 2 goes to 100% */ :root { /* --column-width-3: 100%; */ --column-width-4: 100%; --column-width-5: 100%; --fiviInput-width-half: calc(50% - calc(var(--column-spacer) / 2)); } } /* 2. General Elements & Classes */ /* 2.1 General Elements */ html, body { font-size: var(--font-size); line-height: var(--font-lineheight); color: var(--font-color); font-weight: var(--font-weight); font-family: var(--font-family); width: 100%; height: 100%; margin: 0px; padding: 0px; overflow-x: hidden; } h1, h2, h3, h4, .h1, .h2, .h3, .h4, p, label, input, select, textarea, form { margin: 0; margin-block: 0; padding: 0; padding-block: 0; width: 100%; } b { font-weight: 500; } h1, .h1 { font-size: var(--font-size-h1); line-height: var(--font-lineheight-h1); color: var(--font-color-h1); font-weight: var(--font-weight-h1); font-family: var(--font-family-h1); text-align: left; } h2, .h2 { font-size: var(--font-size-h2); line-height: var(--font-lineheight-h2); color: var(--font-color-h2); font-weight: var(--font-weight-h2); font-family: var(--font-family-h2); text-align: left; } h3, .h3 { font-size: var(--font-size-h3); line-height: var(--font-lineheight-h3); color: var(--font-color-h3); font-weight: var(--font-weight-h3); font-family: var(--font-family-h3); text-align: left; /* text-transform: uppercase; */ } h4, .h4 { font-size: var(--font-size-h4); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: var(--font-weight-h4); font-family: var(--font-family-h4); text-align: left; } legend { display: none; } a { color: var(--color-primary); text-decoration: underline; } a:visited { color: var(--color-primary); } a:hover { text-decoration: underline; color: var(--color-primary); } 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-column.flex-align-horizontal-center { align-items: center; } .flex-row.flex-space-between { justify-content: space-between; } .flex-column.flex-space-between { align-items: space-between; } /* gap is almost always going to govern the vertical, horizontal should rarely be modified, if ever. If you need to, add/modify a custom class. */ .flex-gap-25 { gap: var(--gap-vertical-25) var(--gap-horizontal) !important; } .flex-gap-50 { gap: var(--gap-vertical-50) var(--gap-horizontal) !important; } .flex-gap-75 { gap: var(--gap-vertical-75) var(--gap-horizontal) !important; } .flex-gap-100 { gap: var(--gap-vertical) var(--gap-horizontal) !important; } .flex-gap-150 { gap: var(--gap-vertical-150) var(--gap-horizontal) !important; } .flex-gap-200 { gap: var(--gap-vertical-200) var(--gap-horizontal) !important; } /* 2.4 Column Helper Classes */ .column-width-fiviInput { max-width: var(--fiviInput-width); width: 100vw; } .column-width-1 { max-width: var(--column-width); width: 100vw; } .column-width-2 { max-width: var(--column-width-2); width: 100vw; } .column-width-3 { max-width: var(--column-width-3); width: 100vw; } .column-width-4 { max-width: var(--column-width-4); width: 100vw; } .column-width-5 { max-width: var(--column-width-5); width: 100vw; } .column-width-6 { max-width: var(--column-width-6); width: 100vw; } .column-width-7 { max-width: var(--column-width-7); width: 100vw; } .column-width-8 { max-width: var(--column-width-8); width: 100vw; } .column-width-9 { max-width: var(--column-width-9); width: 100vw; } .column-width-10 { max-width: var(--column-width-10); width: 100vw; } .column-width-11 { max-width: var(--column-width-11); width: 100vw; } .column-width-12 { max-width: var(--column-width-12); width: 100vw; } .column-width-full { max-width: 100%; width: 100vw; } /* 2.5 General Helper Classes */ .page-text { font-size: calc(var(--font-size) + 2px); line-height: var(--font-lineheight); font-weight: 300; color: var(--font-color); width: 100%; } .page-text-small { font-size: calc(var(--font-size) - 2px); line-height: var(--font-lineheight); font-weight: var(--font-weight); color: var(--font-color); width: 100%; } .page-text-large { /* font-size: calc(var(--font-size) + 2px); line-height: calc(var(--font-lineheight) + 3px); width: 100%; */ font-size: calc(var(--font-size) + 2px); line-height: var(--font-lineheight); font-weight: var(--font-weight); color: var(--font-color); width: 100%; } .no-wrap { white-space: nowrap; text-wrap: nowrap; width: fit-content; } .spacer-vertical { /* no height is required here, gap should handle it, will double the space between the previous and next elements */ width: 100%; } .fiviHide { display: none !important; } .fi-name > i { padding-right: 1px; margin-left: -2px; } /* 3. Page Structure */ /* 3.1 Page Structure */ .layout { background-color: var(--color-accent-hawkes-blue); width: 100%; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } header, main, footer { width: 100%; display: flex; margin: 0; padding: var(--gap-vertical) var(--gap-horizontal); text-align: left; } header { box-shadow: none; background-color: var(--color-white-dark); padding-top: 0; padding-bottom: 0; } main { flex-grow: 1; margin-bottom: auto; align-items: flex-start; height: 100%; flex-direction: column; padding: 0; } footer { background-color: white; padding-left: 0; padding-right: 0; } header > .layout-container, main > .layout-container, footer > .layout-container { max-width: var(--column-width-12); width: 100%; margin: 0 auto; min-height: 62px; } @media all and (max-device-width: 452px), all and (max-width: 452px) { .layout { gap: 0; } header, main, footer { padding: var(--gap-vertical-50) var(--gap-horizontal-50); } header > .layout-container { min-height: 50px; /* flex-direction: column; */ justify-content: center; } } /* 3.2 Header Styling */ header { /* border-bottom: 2px solid var(--color-secondary-alt2); */ z-index: unset; } header .layout-container { /* max-height: 135px; */ /* height: 135px; */ margin-bottom: 1rem; /* overflow: hidden; */ align-content: center; } .header-logo { width: 300px; /* position: absolute; */ } @media all and (max-device-width: 836px), all and (max-width: 836px) { header > .layout-container { /* flex-direction: column; */ justify-content: center; gap: var(--gap-horizontal-50); padding-top: 2em; } } @media all and (max-device-width: 723px), all and (max-width: 723px) { .header-logo { width: 200px; justify-content: center; } } .bold { font-weight: 600; } .footer-bottom-links a { text-decoration: none; } .line { padding: 0px 6px 0 6px; } /* 3.3 Main Styling */ main > .layout-container { flex-grow: 1; height: 100%; padding: var(--gap-vertical-150) var(--column-spacer) var(--gap-vertical-75) var(--column-spacer); max-width: calc(var(--column-width-12) + calc(var(--column-spacer) * 2)); background-color: var(--color-white-normal); /* outline: 1px solid var(--color-secondary-alt2); */ margin-top: 5em; margin-bottom: 5em; border-radius: 10px; } main > .layout-container > span { /* this is span that start the fivision_PageContent */ display: flex; width: 100%; height: 100%; flex-direction: column; } main .logo-container, main .app-container { width: fit-content; align-self: center; align-items: center; gap: var(--gap-horizontal-75); } main .logo-app-container { padding: var(--gap-vertical-200) 0 0 0; max-width: calc(var(--column-width-12) + calc(var(--column-spacer) * 2)); width: 100%; margin: 0 auto; background-color: white; /* padding-bottom: var(--gap-vertical-75); */ } main .logo-container img { height: 25px; } main .logo-container img.footer-twit-logo { height: 20px; } main .logo-app-container img.footer-in-logo { height: 28px; } main .app-container img { height: 40px; } main .app-container img.footer-itunes-logo { height: 44px; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { main > .layout-container { padding: var(--gap-vertical-150) calc(var(--column-spacer) / 2); max-width: calc(var(--column-width-8) + var(--column-spacer)); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { main > .layout-container { max-width: calc(var(--column-width-6) + var(--column-spacer)); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { main > .layout-container { max-width: calc(var(--column-width-5) + var(--column-spacer)); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { } /* 3.4 Footer Styling */ footer { font-size: 14px; line-height: 24px; font-weight: 300; padding-bottom: 0; padding-top: 0; } footer > .layout-container { font-size: var(--font-size); max-width: 100%; width: 100%; gap: 0; background: var(--color-accent-alt2); } footer > .layout-container > div { display: flex; align-items: center; } footer .primary-footer { background-color: var(--color-primary); color: var(--color-white-normal); padding-top: calc(var(--gap-vertical) * 3); align-items: center; justify-content: center; } footer .primary-footer .footer-item { width: fit-content; max-width: var(--column-width-3); } footer .primary-footer .footer-item:nth-of-type(1) { width: var(--column-width-4); max-width: var(--column-width-4); } footer .primary-footer .footer-header, footer .primary-footer a { color: var(--color-white-normal); text-wrap: nowrap; word-wrap: none; } footer .footer-lower { gap: 0; margin-bottom: calc(var(--gap-horizontal-200) * 2); } footer .footer-divider { flex-wrap: nowrap; align-items: center; padding: 0 2em; } footer .footer-divider > .footer-line { width: 100%; height: 2px; background-color: var(--color-accent-alt); } footer .footer-divider > img { height: 125px; } footer .footer-lower-content { gap: var(--gap-vertical-50); font-size: 12px; padding: 0 2em; } footer .footer-ncua-ehl { align-items: center; } footer .footer-ncua-ehl > img { height: 40px; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .footer-upper { width: var(--column-width-8); padding: 0 2em; } footer { padding: 0; } } @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) { } .app-container-reverse { display: flex; flex-direction: row-reverse; } .logo-app-container > .flex-row { justify-content: center; } /* 4. Page General Containers */ .page-container, #IndividualHandler01 { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-150); width: 100%; } .header-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-50); max-width: var(--column-width-12); width: 100%; /* text-align: center; */ } .section-container { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-vertical); max-width: var(--column-width-12); width: 100%; } .section-header { display: flex; align-items: center; gap: var(--gap-vertical-50); font-size: 22px; /* text-transform: uppercase; */ font-weight: 500; letter-spacing: 1px; text-wrap: nowrap; white-space: nowrap; color: var(--color-primary); border-bottom: 2px solid var(--color-accent-hawkes-blue); padding: 8px; } .section-header:after { /* content: ""; width: 100%; height: 1px; background-color: var(--color-accent-hawkes-blue); */ } .page-navigation-container { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; width: var(--column-width-12); margin-top: var(--gap-vertical-200); } .page-navigation-container .button-link { text-transform: none; } .navigation-forward-container { display: flex; flex-direction: row; align-items: center; gap: var(--gap-horizontal); } .navigation-other-container { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } @media all and (max-device-width: 656px), all and (max-width: 656px) { .page-navigation-container { flex-direction: column; align-items: center; gap: var(--gap-vertical); } .navigation-forward-container { flex-direction: column-reverse; } .navigation-other-container { align-items: center; gap: var(--gap-vertical); } .navigation-other-container .button-link { text-align: center; } } /* 5. Buttons */ .button-primary, .fiviDocumentList #email-submit-btn, .V3StatusCenterLogin .DefaultNextButton { display: inline-flex !important; justify-content: center; align-items: center; min-width: var(--column-width-2); width: fit-content !important; /* height: calc(var(--gap-vertical-200) + 10px); */ height: 46.8px; margin: 0; padding: 0 20px; color: white; font-size: 16px; line-height: 16px; font-weight: 500; background-color: var(--color-primary); border: 2px solid var(--color-primary); border-radius: 3px; text-transform: uppercase; text-decoration: none; } .button-primary:visited { color: white; } .button-primary:hover:not(:disabled), .button-primary:active:not(:disabled), .button-primary:focus:not(:disabled), .fiviDocumentList #email-submit-btn:hover:not(:disabled), .fiviDocumentList #email-submit-btn:active:not(:disabled), .fiviDocumentList #email-submit-btn:focus:not(:disabled), .V3StatusCenterLogin .DefaultNextButton:hover:not(:disabled), .V3StatusCenterLogin .DefaultNextButton:active:not(:disabled), .V3StatusCenterLogin .DefaultNextButton:hover:not(:disabled) { background-color: transparent; color: var(--color-primary); font-weight: 600; box-shadow: none; text-decoration: none; } .button-primary:disabled, .fiviDocumentList #email-submit-btn:disabled { opacity: 0.5; } .button-other, .MinorButton, .fiviAddAnotherButton > a, .fiviDocumentList .modal-footer > button, .V3SummaryButtons.active, .V3SummaryControl .fiviDocumentList .fiviFileUpload + .btn-default, .V3SummaryControl .btn-primary, .fiviDocumentList .btn-default, .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] label { display: inline-flex; justify-content: center; align-items: center; max-width: var(--fiviInput-width); min-width: var(--column-width-2); width: fit-content !important; height: var(--gap-vertical-150); line-height: calc(var(--gap-vertical-150) - 4px); margin: 0; padding: 0 10px; color: var(--color-primary); font-size: 14px; font-weight: 600; background-color: transparent; border: 2px solid var(--color-primary); border-radius: 5px; box-shadow: none; text-transform: lowercase; text-decoration: none; text-align: center; &:hover:not(:disabled), &:active:not(:disabled), &:focus:not(:disabled) { background-color: var(--color-primary); color: white; border-color: var(--color-primary); font-weight: 600; box-shadow: none; text-decoration: none; } &:disabled { opacity: 0.5; } } .button-link, .button-link-alt, .V3StatusCenterLogin .btn-link, .V3SummaryControl .btn-link, .V3SummaryControl .LinkClass, .fiviRemoveBtn:before { /* min-width: var(--column-width-2); */ text-align: left; background-color: transparent; border: none; font-size: 16px; line-height: 18px; font-weight: 600; color: var(--color-primary); text-transform: uppercase; width: fit-content !important; padding: 0; text-decoration: underline; } .button-link-alt { text-transform: uppercase; font-weight: 600; } .button-link:hover:not(:disabled), .button-link:active:not(:disabled), .button-link:focus:not(:disabled), .button-link-alt:hover:not(:disabled), .button-link-alt:active:not(:disabled), .button-link-alt:focus:not(:disabled), .V3StatusCenterLogin .btn-link:hover:not(:disabled), .V3StatusCenterLogin .btn-link:active:not(:disabled), .V3StatusCenterLogin .btn-link:focus:not(:disabled), .V3SummaryControl .btn-link:hover:not(:disabled), .V3SummaryControl .btn-link:active:not(:disabled), .V3SummaryControl .btn-link:focus:not(:disabled), .V3SummaryControl .LinkClass:hover:not(:disabled), .V3SummaryControl .LinkClass:active:not(:disabled), .V3SummaryControl .LinkClass:focus:not(:disabled) { text-decoration: none; font-weight: 600; color: var(--color-primary); } .button-other:disabled, .button-other-alt:disabled, .V3StatusCenterLogin .btn-link:disabled, .V3SummaryControl .btn-link:disabled, .V3SummaryControl .LinkClass:disabled { opacity: 0.5; } .fiviRemoveBtn { color: var(--color-primary); cursor: default; width: 0; max-width: 100%; margin-right: 100%; display: flex; align-items: flex-start; justify-content: flex-start; order: 2; align-self: flex-end; } .fiviRemoveBtn.fa-2x { font-size: var(--font-size); } .fiviRemoveBtn + .tooltip { display: none !important; } .fiviRemoveBtn:before { content: "remove"; cursor: pointer; font-family: var(--font-family); text-transform: none; white-space: nowrap; text-wrap: nowrap; } .fiviRemoveBtn:hover:not(:disabled):before, .fiviRemoveBtn:active:not(:disabled):before, .fiviRemoveBtn:focus:not(:disabled):before { text-decoration: underline; font-weight: 600; color: var(--color-primary); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviRemoveBtn { margin-right: auto; margin-left: auto; justify-content: center; } } #btnNonMember, .start-application > .button-link, .start-application > .button-primary { text-transform: none; } .start-application > .button-link { max-width: 250px; word-wrap: break-word; white-space: normal; text-align: center; } /* 5.1 Button Containers */ .add-another-individual-container { display: flex; align-items: center; justify-content: center; width: 100%; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .add-another-individual-container { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .add-another-individual-container { width: var(--fiviInput-width); } } /* 6. Accordions */ #accordion { display: flex; flex-direction: column; max-width: var(--column-width-12); width: 100%; gap: var(--gap-vertical); } #accordion > .panel { outline: none; padding: 0 0 0 0; border: none; border-radius: 2px; background-color: transparent; box-shadow: none; margin: 0; } #accordion > .panel:has(> .panel-heading.collapsed) { outline: 1px solid var(--color-gray-dark); box-shadow: none; } #accordion > .panel > .panel-heading { display: flex; align-items: center; height: var(--input-height); padding: 0 var(--column-spacer) 0 0; background: white; border: none; border-radius: 5px; padding-left: 20px; } #accordion > .panel > .panel-heading > .panel-title { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; flex-wrap: wrap; position: relative; text-transform: none; padding-left: 20px; } #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-75); border: none; border-radius: 5px; padding: 0 0 var(--column-spacer) 0; padding-left: 20px; } .panel-body::before, .panel-body::after { display: none; } /* this is the accordion open */ #accordion > .panel > .panel-heading:has(+ .collapse.in) { padding-left: 0; background: transparent; transition: padding-left 0.5s ease-in-out; padding-left: 20px; } #accordion > .panel > .panel-heading:has(+ .collapse.in) > .panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); transition: font-size 0.5s ease-in-out; padding-left: 20px; } /* this is the accordion opening */ #accordion > .panel > .panel-heading:has(+ .collapsing) { padding-left: 0; background: transparent; outline: none; transition: padding-left 0.5s ease-in-out; padding-left: 20px; } #accordion > .panel > .panel-heading:has(+ .collapsing) > .panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); outline: none; transition: font-size 0.5s ease-in-out; padding-left: 20px; } /* this is with the accordion closed */ #accordion > .panel > .panel-heading.collapsed:has(+ .collapse:not(.in)) { padding-left: var(--column-spacer); transition: padding-left 0.5s ease-in-out; padding-left: 20px; } #accordion > .panel > .panel-heading.collapsed:has(+ .collapse:not(.in)) > .panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); transition: font-size 0.5s ease-in-out; padding-left: 20px; } /* this is with the accordion closing */ #accordion > .panel > .panel-heading.collapsed:has(+ .collapsing) { padding-left: var(--column-spacer); outline: none; transition: padding-left 0.5s ease-in-out; padding-left: 20px; } #accordion > .panel > .panel-heading.collapsed:has(+ .collapsing) > .panel-title { font-size: var(--font-size-h3); line-height: var(--font-size-h3); outline: none; transition: font-size 0.5s ease-in-out; padding-left: 20px; } /* 7. Inputs and Labels */ /* 7.1 Labels */ label { font-weight: var(--font-weight-label); display: inline; padding: 0 5px; } .DefaultLabelClass, .DefaultLabelClassV3 { display: flex; align-items: center; height: var(--input-height); position: absolute; left: var(--gap-horizontal-50); bottom: 0; font-size: var(--font-size-input); font-weight: var(--font-weight-input); line-height: var(--font-size-label); color: var(--font-color-label); font-family: var(--font-family-label); transition: bottom 0.25s ease-in-out, left 0.25s ease-in-out, font-size 0.25s ease-in-out, font-weight 0.25s ease-in-out; pointer-events: none; width: fit-content; } .FocusLabelClass, .fiviCCCardInfo .fiviTwoInput .defaultlabelclass { height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); bottom: var(--input-focusLabel-offset); left: var(--gap-horizontal-50); font-weight: 600; text-transform: uppercase; padding: 0 5px; background-color: var(--color-white-normal); } .FocusLabelClass:has(+ input:disabled) { background: linear-gradient(var(--color-white-normal) 50%, #eee 50%); } /* v3 specific */ .fiviLabelContainer { display: flex; } .fiviControl > .fiviLabelContainer { position: absolute; height: 100%; width: 100%; pointer-events: none; } .DefaultLabelClassV3, .fiviStaticLabel { display: flex; align-items: center; height: var(--input-height); margin: 0 !important; position: absolute !important; left: var(--gap-horizontal-50) !important; top: unset !important; bottom: 0; font-size: var(--font-size-input) !important; font-weight: var(--font-weight-input); line-height: var(--font-size-label) !important; color: var(--font-color-label); font-family: var(--font-family-label); transition: bottom 0.25s ease-in-out, left 0.25s ease-in-out, font-size 0.25s ease-in-out, font-weight 0.25s ease-in-out !important; } .DefaultLabelClassV3.FocusLabelClass, .fiviStaticLabel { height: var(--input-focusLabel-fontSize); bottom: var(--input-focusLabel-offset) !important; font-size: var(--input-focusLabel-fontSize) !important; left: 0 !important; font-weight: 600; color: var(--font-color-label) !important; text-transform: uppercase; } /* 7.2 Inputs */ .fiviInput, .fiviSCDropDown { display: inline-flex; width: 100vw; /*oh my vw actually worked*/ max-width: var(--fiviInput-width); position: relative; /* flex-grow: 1; */ } .form-control { display: flex; align-items: center; width: 100% !important; height: var(--input-height); padding: 0 var(--gap-horizontal-50); margin-top: var(--input-marginTop-forLabelFocusSpace); font-size: var(--font-size-input); font-weight: var(--font-weight-input); line-height: var(--font-lineheight-input); color: var(--font-color-input); font-family: var(--font-family-input); border: 1px solid var(--color-primary) !important; border-radius: 10px; } .form-control:focus { box-shadow: none; border-width: 2px !important; } .fiviTransparent { color: transparent; } /* v3 specific */ .DefaultFormControlClassV3 { margin-left: 0; margin-right: 0; margin-bottom: 0px; } .fiviNewLine { display: none !important; } /* 7.3 Fivi Input Containers */ .fiviTwoInput, .fiviLongInput { /* can container either input elements or fiviInput containers */ display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-vertical-25) var(--gap-horizontal); flex-wrap: wrap; } .fiviTwoInput > input, .fiviTwoInput > .fiviInput { max-width: var(--fiviInput-width-half); } .fiviTwoInput > .DefaultLabelClass { height: var(--input-focusLabel-fontSize); font-size: var(--input-focusLabel-fontSize); bottom: var(--input-focusLabel-offset); left: 0; font-weight: 600; text-transform: uppercase; } /* these containers normally contain a bunch of .fiviInput containers */ .fiviMultiInput { display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); flex-wrap: wrap; max-width: 100%; width: 100%; position: relative; } .fiviMultiContainer { display: flex; flex-direction: column; max-width: var(--column-width-full); width: 100%; gap: var(--gap-vertical) var(--gap-horizontal); } .fiviTwoInputContainer { /* Use this when you want two .fiviInputs to take up half the normal width and behave like a standard width .fiviInput. */ display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); flex-wrap: wrap; max-width: var(--fiviInput-width); width: 100vw; position: relative; } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviTwoInput > input { max-width: var(--fiviInput-width-half); } .fiviMultiInput { max-width: var(--fiviInput-width); width: 100%; } } /* v3 specific containers */ .fiviParentControl { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-vertical); max-width: var(--column-width-12); width: 100%; margin: 0; } .fiviControl { display: inline-flex; padding: 0 !important; width: 100% !important; margin-bottom: calc( calc(var(--font-size) - 4px) + var(--gap-vertical-25) ) !important; } /* 7.4 Fivi Checkbox/Radio Buttons */ .fiviCheckBox, .fiviCheckBox > span { display: flex; align-items: center; gap: var(--gap-horizontal-50); max-width: fit-content; } .fiviCheckBox > label, .fiviCheckBox > span > label { text-indent: -3px; font-weight: 500; font-size: calc(var(--font-size-label) - 4px); line-height: var(--font-lineheight-input); } /* v3 checkbox */ .fiviCheckBox:has(> input[type="checkbox"]) { margin: 0 !important; } .fiviCheckBox > input[type="checkbox"] { width: fit-content; margin: 0; } /* 7.5 Validator */ .CtlValidator { position: absolute; line-height: var(--input-height); bottom: -3px; left: 3.5px; z-index: 5; } /* 7.6 Tool Tips */ .DefaultTooltipClass { position: absolute; width: fit-content; } .tooltip-arrow { display: none; } .tooltip-inner { width: max-content; max-width: 300px !important; text-align: left; } /* 7.7 Seperators */ .fiviMultiSeperator { width: 100%; height: 2px; margin: calc(var(--fiviInput-vertical-spacing) - 14px) 0 0 0; } .fiviMultiSeperator::after { content: ""; display: block; width: 100%; height: 100%; max-width: 100%; background-color: var(--color-gray-dark); } .divider { display: flex; align-items: center; justify-content: center; width: 100%; height: 1px; } .divider::before { content: ""; display: block; width: var(--column-width-3); height: 1px; background-color: var(--color-gray-dark); } /* 7.8 Loader */ .section-container > .loader { position: relative; left: unset; right: unset; top: unset; margin: 0 auto; } /* 7.9 Popover v2: .popover v3: .fivisionpopover */ .popover > .arrow, .fivisionpopover > .arrow { display: none; } .fivisionpopover .popover-content { font-size: calc(var(--font-size) - 4px); font-weight: 500; color: red; padding: 0; } .fivisionpopover { position: absolute !important; top: calc( var(--input-height) + var(--input-marginTop-forLabelFocusSpace) ) !important; box-shadow: none; border: none; background-color: transparent; margin-top: var(--gap-vertical-25) !important; } /* 8. fiVISION Controls */ /* 8.1 fiVISION_ErrorSummary v2: #ErrorSummary v3: .fiviErrorSummary */ #ErrorSummary1, .fiviErrorSummary { display: none; } #ErrorSummary1:has(li) { display: block; max-width: var(--column-width-6); width: 100%; margin: 0 auto; } .fiviErrorSummary:has(div) { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } #ErrorSummary1 ul { padding-left: 0; } #ErrorSummary1 li, .fiviErrorSummary > div { font-size: var(--font-size); line-height: var(--font-lineheight); font-weight: 500; color: red; margin-bottom: 0; list-style: none; text-align: center; } /* 8.2 fiVISION_Panel */ .fiviPanel { display: inline-flex; flex-direction: unset; flex-wrap: unset; width: unset; justify-content: unset; } .fiviPanel, .fiviPanel > .fiviPanelContainer { max-width: 100%; /* width: 100%; */ } .page-container > .fiviPanel, .section-container > .fiviPanel, .header-container > .fiviPanel { width: 100%; } /* 8.3 fiVISION_ProductsAndServicesV2 */ .fiviProdServControl { display: flex; flex-wrap: wrap; max-width: var(--column-width-12); width: 100%; gap: var(--gap-vertical); } .fiviProdServControl .DefaultTooltipClass { top: 0; right: 0; } .fiviProdContainer { max-width: var(--column-width-4); width: 100%; min-height: 100px; padding: var(--gap-horizontal-75); position: relative; background: white; border: 2px solid var(--color-gray-dark); border-radius: 3px; box-shadow: none; } .fiviProdContainer:has(input[id*="_ProductCheckbox_"]:checked), .fiviProdContainer:has(input[id*="_GeneralService"]:checked) { background-color: var(--color-accent-hawkes-blue); } .fiviProdServ { display: flex; flex-direction: column; gap: 0; height: 100%; } .fiviProdServ > .fiviCheckBox, .fiviProdServ > .fiviCheckBox > span { flex-direction: row; justify-content: space-between; align-items: center; max-width: 100%; width: 100%; } .fiviProdServ > .fiviCheckBox > div:first-child, .fiviProdServ > .fiviCheckBox > span > div:first-child { order: 3; } .fiviProdServ > .fiviCheckBox > .DefaultTooltipClass, .fiviProdServ > .fiviCheckBox > span > .DefaultTooltipClass { /* position:relative; order: 2; */ left: 305px; bottom: 120px !important; } .fiviProdServ > .fiviCheckBox > label, .fiviProdServ > .fiviCheckBox > span > label { font-size: var(--font-size-label); font-weight: 600; margin-left: -3px; width: fit-content; /* text-wrap: nowrap; */ /* white-space: nowrap; */ text-wrap: wrap; white-space: break-spaces; order: 1; margin-top: 15px; padding: 0 10px; } .fiviProdServ .fiviAddAnotherButton { display: none; width: fit-content; align-self: center; justify-content: flex-end; } .fiviProdContainer:has(input[id*="_ProductCheckbox_"]:checked) .fiviAddAnotherButton { display: flex; } .fiviProdServ .fiviAddAnotherButton > a { text-align: center; display: flex; align-items: center; justify-content: center; margin-top: auto; } .fiviProdPanel { max-width: 100%; display: flex; flex-direction: column; } .fiviProdPanel:has(*):before { content: ""; display: block; height: 2px; width: calc(100% + var(--gap-horizontal-150)); margin-left: calc(var(--gap-horizontal-75) * -1); background-color: var(--color-gray-dark); } .fiviProdPanel > .fiviInput { max-width: 100%; } .fiviProdPanel > .fiviProdInnerPanel:first-of-type, .fiviProdPanel > .fiviInput { margin-top: var(--gap-vertical); } .fiviProdPanel > .fiviProdInnerPanel:not(:first-of-type) { margin-top: var(--gap-vertical); } .fiviProdInnerPanel { display: flex; flex-direction: column; gap: var(--gap-vertical-50) 0; flex-wrap: wrap; width: 100%; padding: 0; position: relative; } .Service_MoreInfo { width: 100%; font-size: 14px; padding: 8px 10px; text-align: center; } .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%; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviProdContainer { max-width: 100%; } .fiviProdServ > .fiviCheckBox > .DefaultTooltipClass, .fiviProdServ > .fiviCheckBox > span > .DefaultTooltipClass { left: 10px; } } /* 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) var(--fiviInput-horizontal-spacing); width: 100%; } .fiviAddress > .fiviSameAs { max-width: calc(calc(var(--fiviInput-width) / 2) - var(--column-spacer)); position: absolute; top: -49px; right: 0; background: var(--color-white-normal); width: fit-content; padding: 0 5px; } .fiviAddress > .fiviSameAs label { font-size: calc(var(--font-size-label) - 4px); line-height: var(--font-lineheight); } .fiviAddress > .DefaultAddressVerifyingClass { font-size: calc(var(--font-size) - 2px); line-height: var(--font-lineheight); font-weight: 500; text-align: center; } @media all and (max-device-width: 836px), all and (max-width: 836px) { .address-container { max-width: 100%; } .address-container > h3 { max-width: 100%; } .fiviAddress > .fiviSameAs { max-width: 100%; position: relative; top: unset; right: unset; } } /* 8.5 fiVISION_PhoneTextBoxV2 --fiviLongInput has the phone field, phone type, and preferred --fiviTwoInput has the phone field and either phone type or preferred --else its just the phone field */ .fiviPhoneControl { margin: 0; max-width: var(--fiviInput-width); } .fiviTwoInput.fiviPhoneControl, .fiviLongInput.fiviPhoneControl { display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-horizontal-25) var(--gap-vertical); flex-wrap: wrap; } .fiviLongInput.fiviPhoneControl { max-width: 100%; width: 100%; } .fiviPhoneControl .CtlValidator { top: calc(var(--input-marginTop-forLabelFocusSpace) + 3px); bottom: unset; } .fiviLongInput.fiviPhoneControl > input.form-control, .fiviTwoInput.fiviPhoneControl > input.form-control { max-width: var(--fiviInput-width-partial-main) !important; width: 100%; } .fiviPhoneControl > .fiviCheckBox, .fiviPhoneControl > select.form-control { max-width: var(--fiviInput-width-partial-alt); width: 100%; } .fiviPhoneControl > .fiviCheckBox { background: transparent; border: none !important; box-shadow: none; padding: 0; } .fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) { flex-wrap: wrap; gap: var(--gap-vertical-50); } .fiviTwoInput.fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass, .fiviLongInput.fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass { top: 0; } .fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass { top: var(--input-marginTop-forLabelFocusSpace); transition: top 0.25s ease-in-out, left 0.25s ease-in-out, font-size 0.25s ease-in-out, font-weight 0.25s ease-in-out; } .fiviPhoneControl:has(> div[id*="_pnlSMSOptInOut"]) > .DefaultLabelClass.FocusLabelClass { top: 0; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] { width: 100%; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] br { display: none; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_smsOptionsDiv"] { background-color: var(--color-gray-normal) !important; padding: var(--gap-horizontal) !important; display: flex !important; gap: var(--gap-vertical); flex-direction: column; min-width: unset !important; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_smsOptionsDiv"] > span { display: block; width: 100%; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_messageIconDiv"] { display: none; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] { display: flex; gap: var(--gap-horizontal); width: 100%; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] div.form-element { width: calc(calc(100% - var(--gap-horizontal)) / 2); height: fit-content; padding: 0; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] div.form-element > span { width: 100%; height: 100%; display: block; padding: 0; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] label { min-width: unset; width: 100% !important; } .fiviPhoneControl > div[id*="_pnlSMSOptInOut"] div[id*="_outerButtonDiv"] div.form-element > span > input:checked + label { border: 2px solid var(--color-primary-normal); background: var(--color-primary-normal); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviTwoInput.fiviPhoneControl { max-width: var(--column-width-6); width: 100%; } .fiviTwoInput.fiviPhoneControl > input.form-control, .fiviTwoInput.fiviPhoneControl > select.form-control { max-width: var(--column-width-3); } .fiviLongInput.fiviPhoneControl > .fiviCheckBox { margin-top: 0; max-width: 100%; } .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass { bottom: calc(var(--input-height) + var(--gap-horizontal-25)); } .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass { bottom: calc( var(--input-focusLabel-offset) + calc(var(--input-height) + var(--gap-horizontal-25)) ); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviTwoInput.fiviPhoneControl > input.form-control, .fiviTwoInput.fiviPhoneControl > select.form-control { max-width: var(--column-width-2); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviTwoInput.fiviPhoneControl { gap: var(--gap-horizontal-25) var(--gap-vertical); } .fiviTwoInput.fiviPhoneControl > input.form-control, .fiviLongInput.fiviPhoneControl > input.form-control, .fiviTwoInput.fiviPhoneControl > select.form-control, .fiviLongInput.fiviPhoneControl > select.form-control { max-width: 100% !important; } .fiviTwoInput.fiviPhoneControl > select.form-control, .fiviLongInput.fiviPhoneControl > select.form-control { margin-top: 0px; } .fiviPhoneControl > .fiviCheckBox { margin-top: 0; max-width: 100%; } .fiviTwoInput.fiviPhoneControl > label.DefaultLabelClass { bottom: calc(var(--input-height) + var(--gap-horizontal-25)); } .fiviTwoInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass { bottom: calc( var(--input-focusLabel-offset) + calc(var(--input-height) + var(--gap-horizontal-25)) ); } .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass { bottom: calc(calc(var(--input-height) + var(--gap-horizontal-25)) * 2); } .fiviLongInput.fiviPhoneControl > label.DefaultLabelClass.FocusLabelClass { bottom: calc( var(--input-focusLabel-offset) + calc(calc(var(--input-height) + var(--gap-horizontal-25)) * 2) ); } } /* 8.6 fiVISION_IDTypeV2 */ .fiviIDType { max-width: calc(calc(var(--fiviInput-width) * 2) + var(--column-spacer)); } .fiviIDType > div[id*="issueDateDiv"], .fiviIDType > div[id*="expirationDateDiv"] { max-width: var(--fiviInput-width-half); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviIDType > div[id*="issueDateDiv"], .fiviIDType > div[id*="expirationDateDiv"] { max-width: var(--fiviInput-width); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviIDType { max-width: var(--fiviInput-width); } .fiviIDType > div[id*="issueDateDiv"], .fiviIDType > div[id*="expirationDateDiv"] { max-width: var(--fiviInput-width-half); } } /* 8.7 fiVISION_HousingDurationHistory */ .fiviHousingDurationHistory { max-width: var(--column-width-full); } .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width-half); } .fiviHousingDurationHistory center { width: var(--fiviInput-width); } .fiviHousingDurationHistory .DefaultAddressVerifyingClass { width: var(--fiviInput-width); } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .fiviHousingDurationHistory center { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width); } .fiviHousingDurationHistory .DefaultAddressVerifyingClass { width: var(--column-width-4); } .fiviHousingDurationHistory center { width: var(--fiviInput-width); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width-half); } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviHousingDurationHistory .fiviInput[id$="HousingTypeInput"], .fiviHousingDurationHistory .fiviInput[id$="HousingPaymentMoneyTextBoxInput"] { max-width: var(--fiviInput-width-half); } } /* 8.8 fiVISION_EmploymentHistory */ .fiviEmpHistoryControl { max-width: var(--column-width-full); } .fiviEmpHistoryControl center { width: 100%; } .fiviEmpHistoryControl .fiviRemoveBtn:before { content: "Remove Prior Employer"; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .fiviEmpHistoryControl center { width: var(--fiviInput-width-double); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviEmpHistoryControl center { width: var(--fiviInput-width); } } /* 8.9 fiVISION_IndividualIncome */ .fiviIncomeControl { max-width: 100%; width: 100%; } .fiviIncomeControl > .fiviMultiContainer { flex-direction: row; flex-wrap: wrap; max-width: 100%; } .fiviIncomeControl > .fiviMultiContainer > div { max-width: 100%; width: 100vw; } .fiviIncomeControl .fiviMultiInput { gap: var(--fiviInput-vertical-spacing) var(--fiviInput-horizontal-spacing); } .fiviIncomeControl .fiviMultiInput .fiviInput { max-width: var(--fiviInput-width-half); } .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) { display: flex; width: 100%; max-width: 100%; } .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) > span { width: 100%; } .fiviIncomeControl .fiviRemoveBtn:before { content: "Remove Optional Income"; } .fiviIncomeControl input[id*="ntbHoursPerWeek"]::placeholder { color: transparent; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .fiviIncomeControl .fiviMultiInput > .fiviInput, .fiviIncomeControl .fiviMultiInput > .fiviInput > .fiviInput { max-width: var(--fiviInput-width); } .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) { width: var(--fiviInput-width-double); } .fiviIncomeControl .fiviRemoveBtn { left: var(--fiviInput-width); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviIncomeControl > .fiviMultiContainer > div:has(span[id*="btnAddIncome"]) { width: var(--fiviInput-width); } .fiviIncomeControl .fiviRemoveBtn { top: var(--input-marginTop-forLabelFocusSpace); left: unset; right: var(--gap-horizontal-25); } } @media all and (max-device-width: 656px), all and (max-width: 656px) { } /* 8.10 fiVISION_IndividualDetails */ .fiviIndividualDetails { width: 100%; } .fiviIndDetails { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } .fiviIndDetails > div { margin-left: var(--gap-horizontal-25); font-weight: 400; } .fiviIndDetails > .fiviIndDetailsSection { margin-left: 0; } .fiviIndDetailsSection > b { font-weight: 500; } .fiviIndDetails > .fiviIndDetailsName { font-size: calc(var(--font-size) + 2px); font-weight: 500; margin-bottom: var(--gap-vertical-25); margin-left: 0; } .fiviIndDetails > .fiviIndDetailsName:not(:first-of-type) { margin-top: var(--gap-vertical-75); } /* 8.11 fiVISION_ProductsAndServicesSelected */ .fiviProdServiceSelected > div { margin: 0 !important; display: flex; flex-direction: column; gap: var(--gap-vertical-75); font-size: calc(var(--font-size) + 2px); font-weight: 500; } .fiviProdServiceSelected > div > ul { padding: 0; list-style: none; display: flex; gap: var(--gap-vertical-25) 1px; flex-wrap: wrap; font-weight: 400; font-size: var(--font-size); } .fiviProdServiceSelected > div > ul > i { margin-left: var(--gap-horizontal-25); } .fiviProdServiceSelected > div > ul > li { margin: var(--gap-vertical-25) 0 0 0; width: 100%; font-size: calc(var(--font-size) + 2px); } .fiviProdServiceSelected > div > ul > li:first-of-type { margin-top: 0; } .fiviProdServiceSelected > div > ul > ul { margin: 0; width: 100%; } .fiviProdServiceSelected > div > br + ul { list-style: unset; margin-left: var(--gap-horizontal-75); margin-top: calc(var(--gap-horizontal-25) * -1); } .fiviProdServiceSelected > div > br + ul > li { margin-left: var(--gap-horizontal-25); font-size: var(--font-size); margin-top: 0; } .fiviProdServiceSelected > div > br + ul > li > b { font-weight: 500; } /* 8.12 fiVISION_ProductRelationships */ .fiviProductRelationship { display: block; overflow-x: auto; white-space: nowrap; border: 1px solid var(--color-gray-dark); border-radius: 5px; max-width: 100%; width: fit-content; box-shadow: none; } .fiviProductRelationship table { overflow-x: auto; white-space: nowrap; border: none; margin: 0; } .fiviProductRelationship tr { display: flex; flex-wrap: nowrap; padding: 0 var(--column-spacer); border-bottom: 1px solid var(--color-gray-dark); } .fiviProductRelationship tr:nth-of-type(odd) { background-color: white !important; } .fiviProductRelationship tr:nth-of-type(even) { background-color: transparent !important; } .fiviProductRelationship tr:last-of-type { border: none; } .fiviProductRelationship td { display: flex; justify-content: center; align-items: center; width: var(--column-width-2); height: calc(var(--font-size) * 3); text-wrap: wrap; white-space: nowrap; padding: 0 !important; line-height: var(--font-lineheight); background-color: transparent !important; border: none !important; font-size: var(--font-size); } .fiviProductRelationship tr > td:first-of-type { justify-content: flex-start; font-weight: 600; width: var(--column-width-3); } .fiviProductRelationship tr[id*="_ServiceRow"] > td:first-of-type { padding-left: var(--column-spacer) !important; font-weight: 400; } .fiviProductRelationship tr:first-of-type > td { font-weight: bold; text-align: left !important; border: none; } @media all and (max-device-width: 836px), all and (max-width: 836px) { .fiviProductRelationship tr { gap: 0 var(--column-spacer); } .fiviProductRelationship td { width: var(--column-width); } .fiviProductRelationship tr > td:first-of-type { width: var(--column-width-2); } .fiviProductRelationship tr:first-of-type > td { text-align: center !important; } } /* 8.13 fiVISION_DocumentListV2 */ .fiviDocumentList { max-width: var(--column-width-10); width: 100%; display: flex; flex-direction: column-reverse; gap: var(--gap-vertical-75); } .V3SummaryControl .fiviDocumentList { max-width: var(--column-width-12); } .fiviDocumentList > input:first-of-type { align-self: center; } .fiviDocumentList table { /* display: block; */ width: 100%; margin: 0; border: 1px solid var(--color-gray-dark); border-radius: 5px; box-shadow: none; } .fiviDocumentList table > tbody, .fiviDocumentList table > thead { display: flex; flex-direction: column; width: 100%; } .fiviDocumentList table > tbody > tr, .fiviDocumentList table > thead > tr { display: flex; flex-wrap: nowrap; position: relative; padding: 0 var(--column-spacer); border: none; border-radius: 5px; border-bottom: 1px solid var(--color-gray-dark); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .fiviDocumentList table > tbody > tr:nth-of-type(odd) { background-color: white !important; } .fiviDocumentList table > tbody > tr:nth-of-type(even) { background-color: transparent !important; } .fiviDocumentList table > tbody > tr:last-of-type { border: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .fiviDocumentList table th, .fiviDocumentList table td { display: flex; align-items: center; justify-content: center; max-width: var(--column-width-3); width: 100%; padding: var(--gap-horizontal) 0 !important; background-color: transparent !important; } .V3MessagesHeaderClass th { max-width: var(--column-width-3) !important; width: 100% !important; } .fiviDocumentList table td, .fiviDocumentList .V3MessagesHeaderClass th { border: none !important; } .fiviDocumentList table th:first-of-type, .fiviDocumentList table td:first-of-type { justify-content: flex-start; } .fiviDocumentList table th:last-of-type, .fiviDocumentList table td:last-of-type { display: flex; flex-direction: column; align-items: center; max-width: var(--column-width-4); width: 100%; background-color: transparent !important; } .fiviDocumentList table td:last-of-type br { display: none; } .fiviDocumentList table td:last-of-type > span:has(.btn-default) { display: flex; align-items: center; text-align: center; justify-content: center; margin-top: var(--gap-vertical-25); } .fiviDocumentList table td:last-of-type > div[id*="UploadProgressBar_"] { max-width: var(--fiviInput-width); min-width: var(--column-width-2); width: fit-content; display: flex; align-items: center; gap: var(--gap-horizontal-25); margin-top: var(--gap-vertical-25); } .fiviDocumentList .DefaultTooltipClass { display: flex; align-items: center; justify-content: center; width: var(--column-spacer); height: 100%; margin: 0 !important; position: absolute; top: 0; right: var(--gap-horizontal-25); } .fiviDocumentList .ng-modal-dialog { left: 0; width: var(--column-width-6) !important; } .fiviDocumentList .ng-modal-dialog-content { padding: var(--column-spacer); } .fiviDocumentList .ModalContent > div { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .fiviDocumentList .ModalContent br { display: none; } .fiviDocumentList .ModalContent > div > .modal-header { padding: 0; } .fiviDocumentList .ModalContent > div > .modal-header .close { font-size: var(--font-size-h1); color: var(--color-black-dark); opacity: 1; } .fiviDocumentList .ModalContent > div > .modal-header .close:hover { opacity: 0.5; } .fiviDocumentList .ModalContent > div .modal-body-insideItem { text-align: left; margin: 0 !important; display: flex; flex-direction: column; gap: var(--gap-horizontal-50); } .fiviDocumentList .ModalContent > div .text-muted { font-size: var(--font-size); color: var(--font-color); line-height: var(--font-lineheight); } .fiviDocumentList .ModalContent > div .text-muted > br { display: inline-block; } .fiviDocumentList .ModalContent #qrcode { margin: 0 !important; } .fiviDocumentList .ModalContent #UploadWrapper > div:nth-of-type(2) { margin: 0 !important; height: auto !important; border: none !important; text-align: left !important; } .fiviDocumentList .ModalContent #UploadWrapper > div:nth-of-type(2) > span { font-size: var(--font-size-h2) !important; color: var(--font-color-h2) !important; line-height: var(--font-lineheight-h2) !important; font-weight: var(--font-weight-h2); padding: 0 !important; text-align: left !important; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviDocumentList tbody > tr:first-of-type { display: none; } .fiviDocumentList table > tbody > tr { flex-direction: column; padding: calc(var(--column-spacer) / 2); gap: calc(var(--column-spacer) / 2); } .fiviDocumentList table > tbody > tr > td { display: flex; flex-direction: column; align-items: center; font-size: var(--font-size-h3); max-width: 100%; padding: 0 !important; width: 100%; } .fiviDocumentList table > tbody > tr > td::before { font-size: var(--font-size-h4); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: 600; font-family: var(--font-family-h4); } .fiviDocumentList table > tbody > tr > td:nth-of-type(1):before { content: "Applicant Name"; } .fiviDocumentList table > tbody > tr > td:nth-of-type(2):before { content: "Document Type"; } /* status center column names */ .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(1):before { content: "Application Number"; } .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(2):before { content: "Individual"; } .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(3):before { content: "Document Type"; } .fiviDocumentList table.V3StatusCenterTableClass > tbody > tr > td:nth-of-type(4):before { content: "Upload"; } .fiviDocumentList table > tbody > tr > td:nth-of-type(3), .fiviDocumentList table td:last-of-type { max-width: 100%; } .fiviDocumentList .DefaultTooltipClass { position: relative; height: fit-content; width: 100%; margin: var(--gap-vertical-25) 0 !important; } } @media all and (min-device-width: 656px), all and (min-width: 656px) { .fiviDocumentList > input:first-of-type { display: none !important; } } /* 8.14 fiVISION_DisclosuresList */ .fiviDisclosureList { display: flex; flex-direction: column; gap: var(--gap-vertical-50); width: 100%; padding-left: var(--gap-horizontal-150); } .fivi-disclosure-modal > .fiviDisclosure-checkbox-container { display: flex; gap: var(--gap-horizontal-50); align-items: center; } .fivi-disclosure-modal > .fiviDisclosure-checkbox-container label { font-weight: 500; font-size: calc(var(--font-size) + 2px); width: fit-content; } .fivi-disclosure-modal > .fiviDisclosure-modal-button { margin-bottom: var(--gap-vertical-50); } .fivi-disclosure-modal > .fiviDisclosure-checkbox-container > i { padding: 0 !important; } .fivi-disclosure-modal .modal-body > div:last-of-type { display: flex; flex-direction: row-reverse; justify-content: space-between; padding: 0 var(--gap-horizontal); } .fivi-disclosure-modal .modal-header { font-size: var(--font-size-h3); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: var(--font-weight-h4); font-family: var(--font-family-h4); } .agreement-confirmation { width: 100%; padding: 1em; } .disclosure-ul { padding: 1em 3em 0 3em; margin-bottom: -1em; } .disclosure-ul > ul > li:nth-child(3) { padding-bottom: 1em; } .W-8BEN-text { margin: -1em 0; padding-left: 2.8em; } /* 8.15 fiVISION_IDAuthenticationQuestions */ .fiviIDAuth { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap-vertical-75) var(--gap-horizontal-25); width: 100%; } .fiviIDAuth br { display: none; } .fiviIDAuth > span:has(label) { display: flex; gap: var(--gap-horizontal-25); max-width: 95%; width: fit-content; font-size: var(--font-size-h4); line-height: var(--font-lineheight-h4); color: var(--font-color-h4); font-weight: var(--font-weight-h4); font-family: var(--font-family-h4); text-align: left; } .fiviIDAuth > span > label { font-weight: 400; font-size: calc(var(--font-size-label) - 2px); } .fiviIDAuth > span:has(b) { width: fit-content; } .fiviIDAuth > div:has(table) { width: 100%; } .fiviIDAuth tbody { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } .fiviIDAuth tbody td { display: flex; align-items: center; gap: var(--gap-horizontal-25); } .fiviIDAuth tbody td > label { font-size: calc(var(--font-size-label) - 2px); font-weight: 300; line-height: var(--font-size-label); color: var(--font-color-label); font-family: var(--font-family-label); } /* 8.16 fiVISION_ProductFundingV2 */ .fiviProductFunding { display: flex; flex-direction: column; gap: var(--gap-vertical-75); max-width: var(--column-width-10); width: 100%; align-self: center; } .fiviProductFunding > .fiviProductFundingItem, .fiviProductFunding > .fiviFundingAmount { margin: 0; padding: 0; width: 100%; } .fiviProductFunding > .fiviProductFundingItem > .fiviInput { max-width: 100%; align-items: center; justify-content: space-between; gap: var(--column-spacer); } .fiviProductFunding > .fiviProductFundingItem > .fiviInput > input, .fiviProductFunding > .fiviProductFundingItem > .fiviInput > label { margin-top: 0; max-width: var(--column-width-3); } .fiviProductFunding > .fiviProductFundingItem > .fiviInput > label { display: flex; flex-direction: column; gap: var(--gap-vertical-50); font-size: var(--font-size-label); font-weight: 500; } .fiviProductFundingItem > .fiviInput > label:after { content: "funding required"; color: red; font-size: calc(var(--font-size) - 2px); font-style: italic; padding-left: var(--gap-horizontal-50); } .fiviProductFundingItem > .fiviInput:has(> input[min="0"]) > label:after { content: "funding optional"; color: var(--color-primary-normal); } .fiviProductFunding > .fiviProductFundingItem > .fiviInput > .CtlValidator { left: -5px; } .fiviProductFunding > .fiviFundingAmount { display: flex; justify-content: space-between; border-top: 1px solid var(--color-gray-dark); padding-top: var(--gap-vertical-50); } @media all and (max-device-width: 452px), all and (max-width: 452px) { .fiviProductFunding > .fiviProductFundingItem > .fiviInput { flex-direction: column; gap: var(--gap-vertical-50); } } /* 8.17 fiVISION_ACH */ .fiviACHControl > span[id*="_Consent"] { max-width: 100%; width: 100%; order: 7; } .fiviACHControl > span[id*="_tbFirstName"] { order: 1; } .fiviACHControl > span[id*="_tbLastName"] { order: 2; } .fiviACHControl > span[id*="_tbRoutingNumber"] { order: 3; } .fiviACHControl > span[id*="_tbAccountNumber"] { order: 4; } .fiviACHControl > .fiviACHStatus { order: 5; } .fiviACHControl > .fiviACHcbCont { order: 6; } .fiviACHControl > .fiviACHStatus, .fiviACHControl > .fiviACHcbCont { max-width: var(--fiviInput-width); width: 100%; } .fiviACHControl > .fiviACHStatus > span { font-size: calc(var(--font-size) - 2px); line-height: var(--font-lineheight); font-weight: 400 !important; font-style: italic; } .fiviACHControl > .fiviACHcbCont { display: flex; flex-direction: row; gap: var(--column-spacer); } .fiviACHControl > .CtlValidator { top: var(--input-marginTop-forLabelFocusSpace); bottom: unset; z-index: 5; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviACHControl > span[id*="_tbAccountNumber"] { order: 5; } .fiviACHControl > .fiviACHStatus { order: 4; } .fiviACHControl > .fiviACHcbCont { order: 6; } } /* 8.18 fiVISION_CreditCardV2 */ .fiviCreditCardControl > .fiviCCCardInfo > .DefaultAddressVerifyingClass { position: absolute; left: var(--fiviInput-width); transform: translateX(-100%); font-size: calc(var(--font-size) - 2px); width: 100%; text-align: right; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput { gap: var(--gap-vertical-25) 0; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > label { /* position: relative; */ /* bottom: unset; */ } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > select, .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > .TwoControls { width: calc(100% / 3) !important; margin: 0; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > .TwoControls > .DefaultTooltipClass { right: var(--gap-horizontal-25); height: var(--input-height); display: flex; align-items: center; justify-content: center; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > select:nth-of-type(1) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-color: transparent !important; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > select:nth-of-type(2) { border-radius: 0; } .fiviCreditCardControl > .fiviCCCardInfo > .fiviTwoInput > .TwoControls > input { margin: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: transparent !important; } /* 8.19 fiVISION_ApplicantWithdraw */ .fiviApplicantWithdraw { max-width: 100%; width: 100%; display: flex; flex-direction: column; gap: var(--gap-vertical-75); position: relative; } .fiviApplicantWithdraw > .CtlValidator { top: -3px; bottom: unset; left: -8px; } /* 8.20 fiVISION_ProgressBar */ .progress-container { flex-grow: 1; } .journey-bar-icons { display: none; } .journey-bar { margin-bottom: 0; display: flex; justify-content: flex-end; align-items: flex-end; width: 100%; } .journey-bar > tbody > tr { display: flex; gap: var(--gap-horizontal-50); } .journey-bar > tbody > tr > td { border-top: none; padding: 0; } .journey-bar-group { display: flex; flex-direction: column-reverse; align-items: center; min-width: var(--column-width); gap: var(--gap-vertical-25); } .journey-bar-group > span { opacity: 33%; } .journey-bar-group > span { padding: 0 var(--gap-horizontal-25); font-size: calc(var(--font-size) - 2px); font-weight: 500; } .journey-bar-group:after { content: " "; width: 100%; height: 10px; border-radius: 5px; } .journey-bar-group.previous-group:after { background-color: color-mix( in srgb, var(--color-secondary-alt2) 66%, transparent ); } .journey-bar-group.current-group:after { background-color: var(--color-secondary-alt1); } .journey-bar-group.current-group > span { opacity: 100%; } .journey-bar-group.future-group:after { background-color: color-mix( in srgb, var(--color-secondary-alt1) 20%, transparent ); } @media all and (max-device-width: 836px), all and (max-width: 836px) { .journey-bar { justify-content: flex-start; } .journey-bar-group > span { display: none; } } @media all and (max-device-width: 638px), all and (max-width: 638px) { .journey-bar { justify-content: center; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .progress-container { width: 100%; /* display: none; */ flex-grow: unset; } .journey-bar { justify-content: center; } .journey-bar > tbody { width: 100%; } .journey-bar > tbody > tr { width: 100%; } .journey-bar-group { min-width: calc(calc(100% / 5) - var(--gap-horizontal-50)); } } /* 8.21 fiVISON_IndividualHandler */ #IndividualHandler01 { width: 100%; } /* 8.22 Status Center Login (v3) */ .V3StatusCenterLogin { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-vertical-150); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .V3StatusCenterLogin div, .V3StatusCenterLogin > div > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-vertical); } .V3StatusCenterLogin > div span:has(> .btn-link) { display: block; } .V3StatusCenterLogin br { display: none; } .V3StatusCenterLogin > #pnlShowMFACode .fiviCheckBox { display: flex; } /* 8.23 Status Center Summary (v3) */ .V3SummaryControl { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-150); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .V3SummaryControl span:has(> button.btn-link) { /* we need to add some structure to spans that have buttons. */ display: inline-flex; align-items: center; } .V3SummaryControl br { display: none; } .V3StatusCenterLogin > #pnlEnterPassword, .V3StatusCenterLogin > #pnlShowCreatePass, .V3StatusCenterLogin > #pnlShowMFACode, .V3StatusCenterLogin > #pnlShowMFADropdown { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-vertical); max-width: var(--column-width-12); width: 100%; margin: 0; } @media all and (max-device-width: 769px), all and (max-width: 769px) { .V3SummaryControl { gap: var(--gap-vertical); } } /* 8.23.1 SC Summary Header (v3) */ .V3SummaryControl > header { display: block; box-shadow: none; padding: 0; background-color: transparent; border-bottom: none; } .V3SummaryHeader { background-image: none; background-color: transparent; border: none; box-shadow: none; } .V3SummaryHeader:before, .V3SummaryHeader:after { display: none; } /* 8.23.1.1 SC Summary Header Mobile Badge Hiding this and handling mobile styling differently. If you want to use it un-display-none the navbar-header and uncomment out the commented out bits. */ .V3SummaryHeader > #navbar-header { display: none !important; } /* .V3SummaryHeader > #navbar-header .V3SummaryCollapsedMenuButton { border: 2px solid var(--color-secondary-light); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; margin: 0 var(--gap-horizontal-50) 0 0; } .V3SummaryHeader > #navbar-header .V3SummaryCollapsedMenuButton > .icon-bar { background-color: var(--color-primary); } .V3SummaryHeader > #navbar-header .V3SummaryBadge { right: var(--gap-vertical-25); left: unset; background-color: var(--color-secondary-dark); z-index: 2; } .V3SummaryHeader > #navbar-header #mobile-badge.V3SummaryBadge { top: calc(var(--gap-vertical-50) * -1); } */ /* 8.23.1.2 SC Summary Header Icons/Navigation id of topNav */ .V3SummaryHeader > #topNav { display: block !important; width: 100%; padding: 0; } .V3SummaryHeader > #topNav > ul { display: flex; width: 100%; justify-content: center; gap: var(--gap-horizontal) var(--gap-vertical); } .V3SummaryHeader > #topNav:before, .V3SummaryHeader > #topNav:after, .V3SummaryHeader > #topNav > ul:before, .V3SummaryHeader > #topNav > ul:after { display: none; } .V3SummaryHeader > #topNav > ul > .nav-item { margin: 0; padding: var(--gap-vertical-75); min-width: 100px; } .V3SummaryHeader > #topNav > ul > .nav-item.active { border: 1px solid var(--color-secondary-light); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; } .V3SummaryHeader > #topNav > ul > .nav-item > a { display: flex; flex-direction: column; gap: var(--gap-vertical-25); padding: 0; margin: 0; font-size: calc(var(--font-size) + 2px); font-weight: 500; color: var(--color-primary) !important; fill: var(--color-primary) !important; } .V3SummaryHeader > #topNav > ul > .nav-item.active > a { background-image: none; background-color: transparent; box-shadow: none; color: var(--color-secondary-dark) !important; fill: var(--color-secondary-dark) !important; } .V3SummaryHeader > #topNav > ul > .nav-item .badge { right: var(--gap-vertical-25); left: unset; background-color: var(--color-secondary-dark); z-index: 2; } .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge { right: var(--gap-vertical-75); } @media all and (max-device-width: 992px), all and (max-width: 992px) { .V3SummaryHeader > #topNav > ul > .nav-item { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--gap-horizontal-25); } .V3SummaryHeader > #topNav > ul > .nav-item .badge, .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge { position: relative; width: fit-content; height: fit-content; right: unset; } .V3SummaryHeader > #topNav > ul > .nav-item > a { flex-direction: row; } .V3SummaryHeader > #topNav > ul > .nav-item > a > svg { margin: 0 0 0 0; } } @media all and (max-device-width: 769px), all and (max-width: 769px) { .V3SummaryHeader > #topNav { border: none; } .V3SummaryHeader > #topNav > ul { flex-wrap: wrap; margin: 0; gap: var(--gap-vertical-25); border: none; justify-content: space-between; } .V3SummaryHeader > #topNav > ul > .nav-item { width: calc(50% - var(--gap-vertical-25)); justify-content: center; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .V3SummaryHeader > #topNav > ul > .nav-item { justify-content: center; padding: var(--gap-vertical-50); } .V3SummaryHeader > #topNav > ul > .nav-item > a { flex-direction: column; justify-content: center; } .V3SummaryHeader > #topNav > ul > .nav-item .badge, .V3SummaryHeader > #topNav > ul > #nav-apps.nav-item .badge { position: absolute; right: var(--gap-vertical-25); top: var(--gap-vertical-50); left: unset; background-color: var(--color-secondary-dark); z-index: 2; } } /* 8.23.2 SC Summary Content */ .V3SummaryControl > article { margin: 0; } .V3SummaryControl .container-fluid { padding: 0; } .V3SummaryControl .container-fluid:before, .V3SummaryControl .container-fluid:after { display: none; } .V3SummaryControl .container-fluid > div { display: flex; flex-direction: column; gap: var(--gap-vertical-75); } .V3SummaryControl .headline-container { padding: 0; background: transparent; margin: 0; text-align: left; } .V3SummaryControl .headline-container > h1 { font-size: var(--font-size-h1); text-transform: capitalize; font-weight: var(--font-weight-h1); text-align: center; } /* 8.23.2.1 SC Summary Content Home */ .V3SummaryControl .container-fluid > div > .task { display: flex; justify-content: flex-start; align-items: center; gap: var(--gap-horizontal-50); margin: 0; border: 1px solid var(--color-secondary-light); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; } .V3SummaryControl .container-fluid > div > .task > .task-icon { fill: var(--color-primary); } .V3SummaryControl .container-fluid > div > .task > .task-content { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-horizontal-50); margin: 0; } .V3SummaryControl .container-fluid > div > .task .task-text { display: flex; flex-direction: column; gap: var(--gap-vertical-25); } .V3SummaryControl .container-fluid > div > .task .task-title { color: var(--color-primary); font-size: var(--font-size-h3); text-transform: capitalize; margin: 0; } .V3SummaryControl .container-fluid > div > .task .task-description { font-size: var(--font-size); color: var(--font-color); } /* 8.23.2.2 SC Summary Content Messages */ .V3SummaryControl header:has(#nav-messages.active) + article .headline-container, .V3SummaryControl header:has(#nav-messages.active) + article .headline-container > span { display: flex; flex-direction: column; gap: var(--gap-vertical-150); align-items: center; } .V3SummaryControl header:has(#nav-messages.active) + article .headline-container > span div:has(.btn-primary) { margin-bottom: var(--gap-vertical-150); text-align: center; } .V3SummaryControl .fiviSCSendMessage > div { display: flex; flex-direction: column; gap: var(--gap-vertical-75); } @media all and (max-device-width: 452px), all and (max-width: 452px) { .V3SummaryControl .container-fluid > div > .task > .task-icon { display: none; } } /* 8.24 v3TextBox ***MOVE TO TOP OF fivi Controls when converting to v3*** its a base level control, it should be first in the hierarchy of controls for now its only SC so here is fine. */ .fiviTextBox { flex-wrap: nowrap; } /* 8.25 fiVISION_FinicityFundingAccountVerification */ .fiviFinicity, .fiviFinicity #RealTimeInput, .fiviFinicity .fivi-verifyNow-contents { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-vertical-50); font-size: calc(var(--font-size) + 2px); } .fiviFinicity #RealTimeInput > div { width: 100% !important; text-align: center; } .fivi-verifyNow-btn-contanier button:disabled { display: none; } #FinicityStatusLabel { font-weight: 600 !important; color: var(--color-primary); } /* 8.26 fiVISION_OneTimePasscode */ .fiviOneTimePasscode .fiviPanelContainer { width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: var(--gap-horizontal); } .fiviOneTimePasscode .fiviOTPButtonGroup { display: flex; align-items: center; justify-content: flex-end; gap: var(--gap-horizontal); margin-top: var(--gap-horizontal-50); } @media all and (max-device-width: 656px), all and (max-width: 656px) { .fiviOneTimePasscode .fiviOTPButtonGroup { flex-direction: column-reverse; gap: var(--gap-vertical); } } /* 8.27 fiVISION_WorkflowSurvey */ .fiviWorkflowSurvey { width: 100%; max-width: 100%; } .fiviWorkflowSurvey > div { width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: var(--gap-horizontal); } .fivi-workflow-survey-item { display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .fivi-workflow-survey-question > label { font-weight: 600; } .fivi-workflow-survey-answers { display: flex; flex-direction: column; gap: var(--gap-vertical-25); padding-left: var(--gap-horizontal); } .fivi-workflow-survey-answers .fiviCheckBox > label { font-weight: 400; } .ErrorMessage.fivi-workflow-survey-error { font-weight: 600; font-size: calc(var(--font-size) - 2px); } /* 8.28 fiVISION_ProveIndividualLookup */ .fiviProveIndividualLookup { justify-content: center; } .fiviProveIndividualLookup .prove-direction-buttons { display: flex; flex-direction: row-reverse; justify-content: space-between; width: var(--fiviInput-width); } @media all and (max-device-width: 453px), all and (max-width: 453px) { .prove-container { width: 100%; } } /* 8.29 fiVISION_ShoppingCart */ .shopping-container .shoppingCart-img-container { position: relative; display: flex; height: 30px; width: fit-content; display: none; } .shopping-container .shoppingCart-img-container > .shoppingCart-img { height: 30px; filter: invert(17%) sepia(88%) saturate(7378%) hue-rotate(243deg) brightness(84%) contrast(109%); } .shopping-container .shoppingCart-img-container > label { position: absolute; width: fit-content; z-index: 1; bottom: -5px; right: -15px; overflow: visible; font-weight: 500; } .shopping-container .modal-dialog { max-width: var(--column-width-6); width: 100%; } .shopping-container .modal-content { padding: var(--gap-vertical-50) var(--gap-horizontal-75); display: flex; flex-direction: column; gap: var(--gap-vertical-50); } .shopping-container .DefaultModalHeaderClass { display: flex; text-wrap: nowrap; white-space: nowrap; font-size: var(--font-size-h3); font-weight: var(--font-weight-h2); border-bottom: 2px solid var(--color-accent-alt); padding: 0 0 var(--gap-vertical-50) 0; } .shopping-container .DefaultModalHeaderClass > label { margin-left: var(--gap-horizontal-25); font-size: var(--font-size-h3); font-weight: var(--font-weight-h2); } .shopping-container .modal-body { padding: 0; display: flex; flex-direction: row; gap: var(--gap-vertical-50); flex-wrap: wrap; justify-content: space-between; } .shopping-container .modal-body hr, .shopping-container .modal-body br { display: none; } .shopping-container .modal-body span:has(> input) { display: flex; align-items: center; } .shopping-container .modal-body #shoppingCartOneProductRequiredMessage { width: 100%; } .shopping-container .modal-body #shoppingCartOneProductRequiredMessage > center { text-align: left; font-size: var(--font-size); padding-bottom: var(--gap-vertical-50); border-bottom: 1px solid var(--color-accent-alt); } .shopping-container .modal-body > div[id*="ShoppingCartIcon"], .shopping-container .modal-body > div[id*="scShoppingCart"] { width: 100% !important; background-color: unset !important; padding: 0 0 var(--gap-vertical-50) 0 !important; height: fit-content !important; display: flex; flex-direction: row; border-bottom: 1px solid var(--color-accent-alt); } .shopping-container .modal-body > div[id*="ShoppingCartIcon"]:has(> .pull-right), .shopping-container .modal-body > div[id*="scShoppingCart"]:has(> .pull-right) { flex-wrap: wrap; } .shopping-container .modal-body > div[id*="ShoppingCartIcon"] > span:first-of-type, .shopping-container .modal-body > div[id*="scShoppingCart"] > span:first-of-type { width: 100%; text-wrap: nowrap; white-space: nowrap; font-size: var(--font-color-h3); font-weight: var(--font-weight-h3); display: flex; align-items: center; } .shopping-container .modal-body > div .pull-right:disabled { display: none; } .shopping-container .modal-body #btnCartChange { display: flex; align-items: center; } /* 9. Page Specific */ /* 9.1 Default Page */ main > .layout-container:has(.page-Default-Content) { background-color: unset; outline: none; } main > .layout-container:has(.page-Default-Content) .logo-app-container { background-color: var(--color-accent-hawkes-blue); } .page-Default-Content .default-start { justify-content: flex-end; position: relative; margin: var(--gap-vertical-150) 0 var(--gap-vertical-200) 0; } .page-Default-Content .start-application { background-color: var(--color-accent-alt); padding: var(--gap-vertical) var(--gap-vertical-200); border-radius: 10px; gap: var(--gap-vertical-75); align-items: center; position: absolute; z-index: 2; left: -20px; top: 71px; } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .page-Default-Content .start-hero-container { display: flex; } .start-application { z-index: 3 !important; } } .page-Default-Content .start-application .button-primary, .page-Default-Content .start-application #IndividualHandler01 { width: var(--column-width-3) !important; align-self: center; height: 46.8px; } .page-Default-Content .start-hero-container { background-image: url("/_assets/layoutcontent/20082/default/mom-dad-child-sitting.jpg"); height: 400px; background-position: 65%; background-size: auto 100%; border-radius: 10px; position: relative; } .page-Default-Content .start-hero-container img.hero-mini-logo { height: 125px; position: absolute; top: -3px; left: -5px; z-index: 2; } .page-Default-Content .start-hero-container img.hero-image { display: none; } /* Remove hero img and center start-application */ @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .page-Default-Content .start-hero-container { display: none; } .default-start { margin: 0 !important; } .page-Default-Content .default-start { justify-content: center; } .page-Default-Content .start-application { position: relative; top: 0; left: 0; width: 100%; } .lets-get-started-container { max-width: var(--column-width-5); } .page-Default-Content .thumbnail { max-width: var(--column-width-4); } .what-you-need { font-size: calc(var(--font-size) - 2px); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .lets-get-started-container { max-width: 100%; height: fit-content; } .lets-get-started-container > #IndividualHandler01 { align-items: flex-start; } .default-thumbnail-container { max-width: 100%; width: 100%; flex-direction: row; flex-wrap: nowrap; } .page-Default-Content .thumbnail { max-width: 100%; min-height: fit-content; } } @media all and (max-device-width: 656px), all and (max-width: 656px) { .default-thumbnail-container { flex-wrap: wrap; } .default-thumbnail-container > .thumbnail { min-height: fit-content; } .thumbnail-call-to-action, .thumbnail-call-to-action > #IndividualHandler01 { flex-direction: row; justify-content: flex-end; } .what-you-need { font-size: var(--font-size); } .what-you-need-header, .what-you-need { display: none; } .lets-get-started-container > h2 > .DefaultTooltipClass { display: inline; } } @media all and (max-device-width: 525px), all and (max-width: 525px) { } @media all and (max-device-width: 452px), all and (max-width: 452px) { .page-Default-Content .thumbnail { max-width: var(--column-width-4); } .lets-get-started-container { align-items: center; } .lets-get-started-container > #IndividualHandler01 { align-items: center; } } /* 9.2 Status Center - Default */ .page-StatusCenterDefault { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-200); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .page-StatusCenterDefault > .page-navigation-container { flex-direction: column; align-items: center; margin-top: 0; } /* 9.3 Status Center - Status Center */ .page-StatusCenter { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-vertical-200); max-width: var(--column-width-12); width: 100%; line-height: var(--font-lineheight); } .page-StatusCenter > .page-navigation-container { flex-direction: column; align-items: center; margin-top: 0; } /* 9.4 Funding Method */ .funding-method-container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: var(--column-width-12); gap: var(--gap-vertical) var(--gap-horizontal); } .funding-method-container > .fiviPanel > .fiviMultiInput, .funding-method-container > .fiviPanel { width: 100%; max-width: var(--column-width-3); } .funding-method-container .fiviCheckBox > div { display: none; } .funding-method-container .fiviCheckBox > label { display: flex; align-items: center; justify-content: center; width: var(--column-width-3); height: var(--input-height); border: 2px solid var(--color-gray-dark); border-radius: 2px; padding: 0 var(--column-spacer); text-align: center; cursor: pointer; } .funding-method-container .fiviCheckBox > div.checked + label { color: #fff; border-color: var(--color-primary); background-color: var(--color-primary); } .funding-method-container .fiviCheckBox > label:hover { color: var(--color-primary-normal); border-color: var(--color-primary-normal); } #pnlSelectFundingMethodDetails .fiviPanel { width: 100%; } .funding-detail { padding: var(--column-spacer); outline: 2px solid var(--color-gray-dark); gap: var(--gap-vertical-50); width: 100%; max-width: calc(var(--fiviInput-width) + calc(var(--column-spacer) * 2)); margin: 0 auto; } .funding-detail .section-header, .funding-detail .page-text-small, .funding-detail .page-text, .funding-detail .page-text-large { text-align: center; text-wrap:auto; } .funding-detail .section-header:before { /* content: ""; */ /*display: inline;*/ /* width: 100%;*/ /* height: 1px;*/ /* background-color: var(--color-gray-dark); */ } .funding-detail .section-header { display: flex; justify-content: center; } .funding-detail .fiviInput, .funding-detail .fiviTwoInput { width: 100%; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .funding-method-container > .fiviPanel { width: 100%; max-width: calc(50% - calc(var(--column-spacer) / 2)); } .funding-method-container > .fiviPanel > .fiviMultiInput { max-width: 100%; width: 100%; } .funding-method-container > .fiviPanel > .fiviMultiInput > .rb-as-button { max-width: 100%; } .funding-method-container .fiviCheckBox > label { width: 100%; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .funding-method-container > .fiviPanel { width: 100%; max-width: 100%; } } /* 9.5 eSign Agreement */ .page-eSignAgreement #lnkESignAgreement, .page-eSignAgreement .fiviCheckBox > label { font-size: calc(var(--font-size) + 2px); } /* 9.6 Disclosure */ .page-Disclosures .page-text.disclosure-click-text { font-weight: 600; color: red; } /* 9.7 Select Category */ .product-category-container { width: 100%; max-width: var(--column-width-9); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--column-spacer); justify-content: center; } .product-category-container > div, .product-category-container > .fiviPanel div[class*="product-category-"] { display: block; width: 100%; max-width: var(--column-width-3); height: calc(var(--column-width-2) + var(--column-width-half)); } .product-category-container .fiviInput.fiviCheckBox { max-width: 100%; height: 100%; background-color: var(--color-accent-onahau); border: 2px solid transparent; border-radius: 10px; justify-content: center; &:has(> .icheckbox_square-grey.checked) { background-color: var(--color-accent-hawkes-blue); border-color: var(--color-primary); } &:has(> .icheckbox_square-grey.hover) { background-color: var(--color-accent-alt); border-color: var(--color-primary); } } .product-category-container .fiviInput.fiviCheckBox > .icheckbox_square-grey { background-image: none; background-color: transparent; position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; } .product-category-container .fiviInput.fiviCheckBox > .icheckbox_square-grey > input, .product-category-container .fiviInput.fiviCheckBox > .icheckbox_square-grey > ins { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; } .product-category-container .fiviInput.fiviCheckBox > label { text-align: center; font-size: var(--font-size-h3); display: flex; flex-direction: column; gap: var(--gap-vertical); justify-content: flex-start !important; padding-top: 3.2em; } .product-category-savings, .product-category-checking, .product-category-moneymarket, .product-category-certificates, .product-category-clubaccounts { text-align: center; } .category-icon { width: 45px; color: var(--color-primary); padding-top: 1em; position: relative; top: 90px; z-index: 10; } @media all and (max-device-width: 656px), all and (max-width: 656px) { .product-category-container { justify-content: center; } .product-category-container > div, .product-category-container > .fiviPanel div[class*="product-category-"] { max-width: var(--column-width-2); height: var(--column-width-2); } .category-icon { top: 80px; } .product-category-container .fiviInput.fiviCheckBox > label { padding-top: 3.25em; } } @media all and (max-device-width: 452px), all and (max-width: 452px) { .product-category-container > div, .product-category-container > .fiviPanel div[class*="product-category-"] { max-width: 100%; height: var(--column-width-2); } } /* 9.8 Select Product */ .requested-products-container { width: 100%; display: flex; align-items: flex-start; justify-content: flex-start; } .requested-products-banner { position: relative; display: flex; flex-direction: column; width: 100%; gap: 0; max-width: var(--column-width-5); padding: calc(var(--column-spacer) * 0.5) var(--column-spacer); background-color: var(--color-accent-alt2); border-radius: 10px; transition: all 0.75s ease; border: 2px solid var(--color-accent); display: none; } .requested-products-banner:has(> .fivi-expanded) { gap: var(--gap-vertical); } .requested-products-banner > h3 { text-align: center; text-transform: none; font-weight: 500; } .requested-products-banner > .requested-products { display: flex; flex-direction: column; gap: var(--gap-vertical-50); height: 0; overflow: hidden; padding-top: 0; transition: all 0.5s ease; } .requested-products-banner > .requested-products .product-requested-item { display: flex; justify-content: space-between; align-items: center; border-top: 2px solid var(--color-accent); padding-top: var(--gap-vertical-50); } .requested-products-banner > .requested-products .requested-product-label { font-size: var(--font-size-h4); font-weight: 500; } .requested-products-banner .requested-expander { position: absolute; font-weight: 400; font-size: 30px; cursor: pointer; top: calc(var(--column-spacer) * 0.25); right: calc(var(--column-spacer) * 0.25); } .products-container .fiviProdContainer { padding: 0; border: none; border-radius: 10px; position: relative; padding-bottom: var(--gap-vertical-200); background-color: var(--color-accent-onahau); } .products-container .fiviProdServ > .fiviCheckBox .icheckbox_square-grey { background-image: none; background-color: transparent; position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; display: none; } .products-container .fiviProdServ > .fiviCheckBox .icheckbox_square-grey > input, .products-container .fiviProdServ > .fiviCheckBox .icheckbox_square-grey > ins { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; } .products-container .fiviProdServ > .fiviCheckBox, .products-container .fiviProdServ > .fiviCheckBox > span:disabled { width: 100%; background-color: transparent; } .products-container .fiviProdServ:has(> .Product_MoreInfo) > .fiviCheckBox, .products-container .fiviProdServ:has(> .Product_MoreInfo) > .fiviCheckBox > span:disabled, .products-container .fiviProdServ:has(> .fiviProdPanel) > .fiviCheckBox, .products-container .fiviProdServ:has(> .fiviProdPanel) > .fiviCheckBox > span:disabled { padding-bottom: var(--gap-vertical); } .products-container .fiviProdServ > .fiviCheckBox label { display: flex; flex-direction: column; text-indent: 0; margin-left: 0; gap: var(--gap-horizontal-75); align-items: center; width: 100%; padding-top: var(--column-spacer); cursor: pointer; } .products-container .fiviProdServ > .fiviCheckBox label:has(> img) { padding-top: 0; } .products-container .fiviProdServ > .fiviCheckBox label > img { width: 100%; padding: var(--gap-vertical-50) var(--gap-vertical-50) 0 var(--gap-vertical-50); } .products-container .fiviProdServ > .fiviCheckBox label:after { content: "Add"; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; bottom: calc(calc(var(--gap-vertical-200) * -1) - 1px); width: 100%; height: var(--gap-vertical-200); background-color: var(--color-accent-alt); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; cursor: pointer; font-weight: 400; } .products-container .fiviProdServ > .fiviCheckBox:has(.checked) label:after { content: "Remove"; background-color: var(--color-primary); color: white; } .products-container .fiviProdContainer:hover .fiviProdServ > .fiviCheckBox label:after { border: 2px solid var(--color-primary); } .products-container .fiviProdContainer:hover .fiviProdServ > .fiviCheckBox:has(.checked) label:after { border: 2px solid var(--color-accent-alt); } .products-container .fiviProdServ > .fiviCheckBox:has(.checked.disabled) label:after { content: "Included"; background-color: var(--color-primary); color: white; cursor: default; } .products-container .Product_MoreInfo { padding: 0 var(--column-spacer) var(--gap-vertical) var(--column-spacer); } .products-container .fiviProdServControl .DefaultTooltipClass { top: var(--column-spacer); right: var(--column-spacer); } .products-container .Product_MoreInfo > span { display: flex; flex-direction: column; gap: var(--gap-vertical-75); } .products-container .fiviProdPanel:has(*):before { width: calc(100% - calc(var(--column-spacer) * 2)); margin-left: 0; margin: 0 var(--column-spacer); background-color: var(--color-accent); } .products-container .fiviProdPanel { padding: 0 var(--column-spacer) var(--gap-vertical) var(--column-spacer); } @media all and (min-device-width: 836px), all and (min-width: 836px) { .page-container.page-SelectProduct { position: relative; } .requested-products-container { position: absolute; top: 0; align-items: flex-end; } } @media screen and (max-device-width: 836px), all and (max-width: 836px) { .requested-products-container { position: relative; align-items: center; } } @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .requested-products-banner { max-width: var(--column-width-4); } } @media all and (max-device-width: 836px), all and (max-width: 836px) { .requested-products-container { align-items: center; margin-top: var(--gap-vertical); } .fiviProdServControl { justify-content: center; } } @media (max-device-width: 656px), (max-width: 656px) { .requested-products-container > .requested-products-banner { max-width: 100%; } } @media (max-device-width: 452px), (max-width: 452px) { .requested-products-banner { padding-left: var(--gap-horizontal-25); padding-right: var(--gap-horizontal-25); } .requested-products-banner .product-requested-item { flex-direction: column; gap: var(--gap-horizontal-25); } .requested-products-banner label { text-align: center; } } /* 9.9 Approved */ .printable-card-container { /* width: fit-content; */ width: 100%; display: flex; flex-direction: column; gap: var(--gap-vertical-50); align-items: center; } .printable-card { height: 310px; width: 500px; background-color: var(--color-accent-alt) !important; border-radius: 20px; color: var(--color-primary); margin: 20px; font-size: 20px; font-weight: 400; box-shadow: 2px 2px 20px #707070; display: flex; flex-direction: column; justify-content: space-between; padding: 0 var(--column-spacer) var(--column-spacer) var(--column-spacer); } .printable-card .printable-card-top { width: 100%; display: flex; justify-content: space-between; } .printable-card .printable-card-contact { margin-top: var(--gap-vertical); text-align: right; } .printable-card .printable-card-contact > div { font-size: 18px; font-weight: 500; } .printable-card .printable-card-contact > div:first-child { font-weight: 500; font-size: 20px; width: 100%; } .printable-card img { width: 200px; } .printable-card .printable-card-middle { display: flex; flex-direction: column; } .printable-card .printable-card-middle > div { font-size: 26px; font-weight: 600; } .printable-card .printable-card-middle > div:first-child { font-size: 18px; font-weight: 500; } .printable-card-bottom { font-size: 26px; font-weight: 600; } @media print { body:has(.printable-card) { visibility: hidden; } .printable-card { visibility: visible; position: fixed; left: 0; top: 0; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; } } .page-Approved > .section-container > .section-header { display: none; } @media all and (max-device-width: 657px), all and (max-width: 657px) { .printable-card { height: 210px; width: 300px; } .printable-card img { width: 130px; height: 60px; margin-top: 10px; } .printable-card .printable-card-contact > div:first-child { font-size: 12px; } .printable-card .printable-card-contact > div { font-size: 11px; } .printable-card .printable-card-middle > div:first-child { font-size: 13px; } } /* 9.10 Required Documents */ .panel-heading { /* background-color: pink!important; */ } .panel-title-container { display: flex !important; flex-direction: row !important; justify-content: space-between !important; padding-top: 10px; } .fas { font-size: 2.5em; padding-right: 0.5em; /* background: orange; */ } .panelArrow { padding: 0.5em 0 0 0.5em !important; } .panel-title { padding-top: 6px; font-size: 16px; } .id-title { padding: 1em 0; } .id-heading { display: block !important; } .panel-body { margin-left: 15px; } .doc-icon-container { width: 3em; margin-right: 1em; } .doc-icon { } /* Old styles */ /* .fas { font-size: 4.5em; } */ /* .id-container { display: flex; padding-bottom: 1.5em; .hero-mini-logo-1, .hero-mini-logo-2 { width: 150px; height: 150px; position: relative; } */ /* .hero-mini-logo-1 { bottom: -27.5%; left: 96%; clip-path: inset(0 45% 42% 0); } */ /* .hero-mini-logo-2 { bottom: 8.5%; right: 35%; clip-path: inset(0 0 45% 43%); } */ /* .flex-column { border-radius: 10px; margin: 0 2em; padding: 2.5em; width: 450px; height: 450px; } */ /* .h4 { font-size: 24px; padding-top: 0.5em; } */ /* .flex-column:nth-child(1) { background-color: var(--color-accent); border-bottom-right-radius: 0; } .flex-column:nth-child(2) { background-color: var(--color-accent-alt); border-bottom-left-radius: 0; } } */ /* @media all and (max-device-width: 1106px), all and (max-width: 1106px) { .id-container { flex-direction: column; .flex-column { margin: 1.5em 0; } .hero-mini-logo-1 { width: 150px; height: 150px; position: relative; top: 27.5%; left: 95%; clip-path: inset(0 42% 42% 0); } } } */ /* @media all and (max-device-width: 455px), all and (max-width: 455px) { .id-container { justify-content: center; align-items: center; .flex-column { width: 350px; height: 450px; } .hero-mini-logo-1 { top: 28.5%; left: 94%; } .hero-mini-logo-2 { bottom: 12.5%; right: 46%; } } } */ /* 9.11 Application Summary */ .page-ApplicationSummary { gap: var(--gap-horizontal-200); } #pnlApplicationSummaryJointOwnersList, #pnlApplicationSummaryBeneficiariesList { padding-top: 1.5em; } .summary-img-container { background-image: url(/_assets/layoutcontent/20082/default/mom-dad-child-sitting.jpg); height: 300px; width: 350px; background-position: 90%; background-size: auto 100%; border-radius: 10px; position: relative; } .no-wrap-2 { flex-wrap: nowrap; } @media all and (max-device-width: 834px), all and (max-width: 834px) { .summary-img-container { height: 200px; width: 250px; } } @media all and (max-device-width: 453px), all and (max-width: 453px) { .summary-img-container { display: none; } } /*9.12 Pending */ /*Hiding survey section */ .page-Pending > .section-container > .section-header { display: none; } .pending-img-container { display: flex; width: 100%; } .pending-image { width: 100%; border-radius: 10px; } /* 9.13 Eligibility */ #rbCity, #rbSSA, #rbCMS, #rbACC, #rbCompany, #rbExisting, #rbEligible { /* background-color: red; */ } .page-applicanteligibility .section-container .flex-column { display: flex; justify-items: center; align-items: center; } .page-applicanteligibility .section-container .flex-column .fiviCheckBox > label, .page-applicanteligibility .section-container .flex-column .fiviCheckBox > span > label { text-indent: 0; } .page-applicanteligibility .section-container .flex-column .fiviCheckBox { background-color: var(--color-accent-onahau); padding: 20px 20px; font-family: sans-serif, Arial; font-size: 16px; border: 1.9px solid #0a172470; border-radius: 6px; width: 25em; -webkit-box-shadow: 1px 3px 24px -6px rgba(0, 0, 0, 0.26); -moz-box-shadow: 1px 3px 24px -6px rgba(0, 0, 0, 0.26); box-shadow: 1px 3px 24px -6px rgba(0, 0, 0, 0.26); } #rbCompany { padding: 20px 30px; } /* 10. ControlID Specific */ #tbCamera { display: none; max-width: var(--fiviInput-width); width: 100%; } #tbCamera #lblLicenseScan { display: block; left: 0; transform: none; margin: 0 auto; } #pnlDocuments { width: 100%; } @media all and (max-device-width: 834px), all and (max-width: 834px) { #tbCamera { display: block; max-width: var(--column-width-full); width: fit-content !important; } } /* 11. Admin Console */ .AdminContent .aspNetDisabled { display: flex; width: fit-content; align-items: center; min-width: 200px; } .AdminContent .aspNetDisabled > input { width: 20px; } .layout.AdminConsole { min-height: auto; } .layout.AdminConsole > header, .layout.AdminConsole > footer { display: none; } .layout.AdminConsole > main { padding: 40px 10px; } .layout.AdminConsole > main > .layout-container { width: 100%; max-width: calc(980px - 40px); } .layout.AdminConsole .page-navigation-container { max-width: 100%; } .products-container .fiviProdServ > .fiviCheckBox label { text-align: center; }