@cha set "UTF-8"; /* It is recommended that only web development professionals proficient with CSS edit this file.
Use this boilerplate template as a guide and starting point to override the base CSS styles of the borrower-facing site. Provided below are a set of CSS hooks for the major elements of the site. It is recommended that this file be used for theming purposes only, focusing on brand colors, custom fonts, text sizing, links, buttons, and interaction states. *Please note: It is NOT recommended that this file be used to reorganize the layout of page elements. Major changes to layout made via the Custom Stylesheets could result in broken display or functionality as we rollout new features and updates to the borrower-facing Application. © 2023 Borrower Center. All Rights Reserved. */ /*! * Bootstrap v5.3.2 (https://getbootstrap.com/) * Copyright 2011-2023 The Bootstrap Authors * Copyright 2011-2023 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ /* ========================================================================== Resources - Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/getting-started/introduction/ - color contrast checker for accessibility: https://webaim.org/resources/contrastchecker/ - use this tool to make sure the colors you change are still WCAG (Web Content Accessibility Guidelines) compliant - online tool for manipulating colors: https://pinetools.com/c-colors/ - useful for creating consistent hover/focus colors by darkening/lightening base color by a set percentage ========================================================================== */ /* ========================================================================== Google Font Instructions - Go to fonts.google.com - view a font family, select style weights (bold, regular, etc) - make sure that the bold version is font-weight 600 to match our default font-weight - if your font isn't available with font-weight 600 or you prefer a heavier font-weight you can change the font-weight of h tags, label, legend etc to your preference: - You can target the elements you want to appear bolder like this: h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6. label, legend {font-weight: 700} - View Selected Family - top right corner, Embed tab -> Import tab - Copy "font-family:...;" and replace in body tag - Copy "@import url(./);" and replace below ========================================================================== */ /* Google Font */ @import url(""); :root { --base-font-color: #141414; --heading-color: #141414; /* optional override */ --link-color: #ffffff; /* adjust later if needed */ } /* ========================================================================== Template for CSS colors LighterGray: #f9f9f9; LightGray: #bcc5c3; Gray: #ccc; DarkGray: #727779; siggreen: #82ba51; dark green: #498349; dark gray: #141414; gray: #707372; ErrorRed: #da291c; WarningYellow: #eaaa00; SuccessGreen: #4caf50; InfoBlue: #007ea8; Focus: #000; ======================================================================== */ /* ========================================================================== Bootstrap 5 General Styles This section focuses on site-wide styles such as headings, type of font, paragraph text color, labels etc. ========================================================================== */ html { font-family: sans-serif; } body, #StickyBottomContainer { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1.6rem; color: var(--base-font-color); background-color: #f8f8f8; } @media screen and (min-width: 768px) { #StickyBottomGradient { /* This color should match the background color of the page */ background: linear-gradient(to top, #f8f8f8, rgba(248, 248, 248, 0)); } } /* article, aside, footer, header, main, nav, section {} */ /* p {} */ small, .small { font-size: 1.4rem; } a { color: var(--link-color); text-decoration: none; } a:hover { color: #707372; text-decoration: underline; } /* img {} */ /* label {} */ legend { font-size: 1.5rem; color: inherit; } /* button {} */ /* button:focus {} */ button:focus::after { outline: 5px auto #000; } /* h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {} */ h1, .h1 { font-size: 4rem; } h2, .h2 { font-size: 3.2rem; } h3, .h3 { font-size: 2.8rem; } h4, .h4 { font-size: 2.4rem; } h5, .h5 { font-size: 2rem; } h6, .h6 { font-size: 1.6rem; } @media (min-width: 1200px) { .display-1 { font-size: 5rem; } } @media (min-width: 1200px) { .display-2 { font-size: 4.5rem; } } @media (min-width: 1200px) { .display-3 { font-size: 4rem; } } @media (min-width: 1200px) { .display-4 { font-size: 3.5rem; } } @media (min-width: 1200px) { .display-5 { font-size: 3rem; } } @media (min-width: 1200px) { .display-6 { font-size: 2.5rem; } } hr { margin-top: 1.5rem; border-top: 1px solid #ccc; } /* ========================================================================== Bootstrap 5 Table Styles Location: - Rate and Payment modal accessible from link on product card - Loan Progress Tracker view details modal ========================================================================== */ .table { --bs-table-color: var(--base-font-color); } /* By default the header colors for table are linked to the primary brand color. For further customization of the background colors uncomment this next block */ /* .table th { background-color: #498349; } */ .table > :not(caption) > * > *, figure.table table > :not(caption) > * > * { border-bottom: 1px solid #ccc; } .table-bordered > :not(caption) > * > * { border: 1px solid #ccc; } .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-striped-bg: rgb(0 0 0 / 5%); } .table-hover > tbody > tr:hover > * { --bs-table-hover-color: var(--base-font-color); --bs-table-hover-bg: rgb(0 0 0 / 20%); } /* .table-responsive {} */ /* ========================================================================== Bootstrap 5 Form Styles Location: - Any page with form fields ========================================================================== */ .form-control, .form-control:focus, select.form-select:focus::-ms-value { color: #495057; } @media (min-width: 1200px) { .form-control, .form-select { font-size: 1.6rem; } } .form-control, .form-select { border: 1px solid #94949d; } .form-control:focus, .form-select:focus { border-color: #498349 !important; box-shadow: 0 0 0 0.2rem #000; } .ReadOnlyFieldText { background-color: #e9ecef !important; } /* textarea.form-control {} */ /* .form-group {} */ /* .form-text {} */ /* .form-check {} */ /* .form-check-input {} */ /* .form-check-label {} */ .form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label, .form-control::placeholder { color: #6c757d; } .ReactSelect__control { border-color: #94949d !important; } /* ========================================================================== Bootstrap 5 Form Validation Styles Location: - Any page with form fields ========================================================================== */ .invalid-feedback { font-size: 1.4rem; /* This is the error message that appears below fields in an error state. */ } /* .was-validated :invalid ~ .invalid-feedback, .is-invalid ~ .invalid-feedback {} */ .was-validated .form-control:invalid, .form-control.is-invalid, .was-validated .form-select:invalid, .form-select.is-invalid, .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus, .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus, .was-validated .form-check-input:invalid, .form-check-input.is-invalid, .was-validated .form-check-input:invalid:focus:not(:checked), .form-check-input.is-invalid:focus:not(:checked) { border-color: #da291c; /* This is visible when a field is in an error state and should match the "danger" bootstrap theme color */ } .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus, .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus, .was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus { box-shadow: 0 0 0 0.2rem #da291c; /* This box-shadow highlights which field is focused and should match the "danger" bootstrap theme color. */ } .invalid-feedback, .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { color: #da291c; /* This is the color of the error state and should match the "danger" bootstrap theme color */ } /* .was-validated .form-check-input:invalid ~ .invalid-feedback, .form-check-input.is-invalid ~ .invalid-feedback {} */ .was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked { border-color: #e74e42; background-color: #e74e42; } /* ========================================================================== Bootstrap 5 Button Styles ========================================================================== */ .btn, .btn:hover { color: #498349; } @media (min-width: 1200px) { .btn { font-size: 1.6rem; } } .btn:hover { text-decoration: none; } /* .btn.disabled, .btn:disabled {} */ /* a.btn.disabled, fieldset:disabled a.btn {} */ .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary.disabled, .btn-primary:disabled, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus { color: #fff; } .btn-primary, .btn-primary.disabled, .btn-primary:disabled { background-color: #498349; border-color: #498349; } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus { background-color: #82ba51; border-color: #82ba51; } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background-color: #498349; border-color: #498349; } .btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus, .btn-secondary.disabled, .btn-secondary:disabled, .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus { color: #fff; } .btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled { background-color: #82ba51; border-color: #82ba51; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus { background-color: #498349; border-color: #498349; } .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active { background-color: #82ba51; border-color: #82ba51; } .btn-toggle:not(:disabled):not(.disabled):active, .btn-toggle:not(:disabled):not(.disabled).active { background-color: #707372; border-color: #707372; } .btn-success, .btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success.disabled, .btn-success:disabled, .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus { color: #fff; } .btn-success, .btn-success.disabled, .btn-success:disabled { background-color: #38803a; border-color: #38803a; } .btn-success:hover, .btn-success:focus, .btn-success.focus { background-color: #306d31; border-color: #2d662e; } .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active { background-color: #2d662e; border-color: #2a602c; } .btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning.focus, .btn-warning.disabled, .btn-warning:disabled, .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus { color: #fff; } .btn-warning, .btn-warning.disabled, .btn-warning:disabled { background-color: #946c00; border-color: #946c00; } .btn-warning:hover, .btn-warning:focus, .btn-warning.focus { background-color: #7e5c00; border-color: #765600; } .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active { background-color: #765600; border-color: #6f5100; } .btn-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-danger.disabled, .btn-danger:disabled, .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus { color: #fff; } .btn-danger, .btn-danger.disabled, .btn-danger:disabled { background-color: #da291c; border-color: #da291c; } .btn-danger:hover, .btn-danger:focus, .btn-danger.focus { background-color: #b92318; border-color: #ae2116; } .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active { background-color: #ae2116; border-color: #a41f15; } .btn-light, .btn-light:hover, .btn-light:focus, .btn-light.focus, .btn-light.disabled, .btn-light:disabled, .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus { color: #000; } .btn-light, .btn-light.disabled, .btn-light:disabled { background-color: #f8f8f8; border-color: #f8f8f8; } .btn-light:hover, .btn-light:focus, .btn-light.focus { background-color: lightgrey; border-color: #c6c6c6; } .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active { background-color: #c6c6c6; border-color: #bababa; } .btn-tertiary, .btn-tertiary:hover, .btn-tertiary:focus, .btn-tertiary.focus, .btn-tertiary.disabled, .btn-tertiary:disabled, .btn-tertiary:not(:disabled):not(.disabled):active, .btn-tertiary:not(:disabled):not(.disabled).active, .btn-tertiary:not(:disabled):not(.disabled):active:focus, .btn-tertiary:not(:disabled):not(.disabled).active:focus { color: #000; } .btn-tertiary, .btn-tertiary.disabled, .btn-tertiary:disabled { background-color: #eceeef; border-color: #eceeef; } .btn-tertiary:hover, .btn-tertiary:focus, .btn-tertiary.focus { background-color: #727779; color: #fff; } .btn-tertiary:not(:disabled):not(.disabled):active, .btn-tertiary:not(:disabled):not(.disabled).active { background-color: #727779; color: #fff; } .btn-outline-secondary, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { color: #82ba51; border-color: #82ba51; } .btn-outline-secondary:hover, .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active { color: #fff; background-color: #498349; border-color: #498349; } .btn-outline-danger, .btn-outline-danger.disabled, .btn-outline-danger:disabled { color: #da291c; border-color: #da291c; } .btn-outline-danger:hover, .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active { color: #fff; background-color: #da291c; border-color: #da291c; } .btn-link { color: #000; text-decoration: none; } .btn-link:hover, .btn-link:focus, .btn-link.focus { color: #000; text-decoration: underline; } .btn-link:disabled, .btn-link.disabled { color: #6c757d; } @media (min-width: 1200px) { .btn-lg, .btn-group-lg > .btn { font-size: 1.8rem; } } @media (min-width: 1200px) { .btn-sm, .btn-group-sm > .btn { font-size: 1.4rem; } } /* ========================================================================== Bootstrap 5 Custom Control Styles Location: - Throughout the application, mainly for checkboxes and radio buttons ========================================================================== */ .form-check-input:checked, .form-check-input:not(:disabled):active { color: #fff; } .form-check-input:checked, .form-check .form-check-input:indeterminate { border-color: #498349; background-color: #498349; } .form-check-input:focus:not(:checked) { border-color: #498349 !important; } .form-check-input:active { filter: brightness(90%); } .form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label { color: #6c757d; opacity: 1 !important; } .form-check-input[disabled], .form-check-input:disabled { background-color: #e9ecef; opacity: 1 !important; } /* .form-check-input {} */ .form-check-input { background-color: #fff; border: 1px solid #94949d; } /* .form-check {} */ .form-check .form-check-input:disabled:checked, .form-check .form-check-input:disabled:indeterminate, .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(0, 0, 0, 0.5); } /* .custom-radio .custom-control-label::before {} */ .custom-radio .custom-radio-input:checked ~ .custom-radio-label::before, .custom-radio .custom-radio-input:not(:checked) ~ .custom-radio-label::before { border: 1px solid #94949d; } /* ========================================================================== Bootstrap 5 Navigation Styles Location: - Top navigation area of the app - navbar-dark is the top nav bar with links like log out, register my loan etc - navbar-light is below the navbar-dark and is a secondary nav bar - navbar-brand contains the company logo ========================================================================== */ /* .nav {} */ /* .nav-link {} */ .nav-link:hover, .nav-link:focus { text-decoration: none; } .nav-link.disabled { color: rgba(0, 0, 0, 0.3); } /* .nav-pills .nav-link {} */ .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: #dee2e6; } /* .navbar {} */ .navbar-brand { font-size: 2rem; } .navbar-brand:hover, .navbar-brand:focus { text-decoration: none; } /* .navbar-nav {} */ /* .navbar-nav .nav-link {} */ /* .navbar-collapse {} */ .navbar-toggler { font-size: 2rem; } .navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active { color: rgb(0, 0, 0); } /* .nav-pills .nav-link {} */ .nav-pills .nav-link.active, .nav-pills .show > .nav-link, .navbar-light .navbar-nav .nav-link { color: var(--base-font-color); } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: rgba(0, 0, 0, 0.8); } .navbar-light .navbar-nav .nav-link.disabled { color: rgba(0, 0, 0, 0.3); } .navbar-dark .navbar-brand, .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus, .navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-toggler { color: #fff; } /* ========================================================================== Bootstrap 5 Card Styles Location: - Universal App (Authorizations, Accounts, Assets, Liabilities, Product Eligibility, Link Loans) - Important Actions Page - Login Page, Login widget (Contact Us, Consult an Expert) - Home Page - Pre Application Page / Co-Borrower Affiliation - Apply Now Page - Account Credentials pages (Create New/ Change Password, Forgot Password/User Name, Two-factor Authentication) - Progress Tracker Details - Select Loan ========================================================================== */ .card { background-color: #fff; border: 1px solid #ccc; } /* .card-body {} */ /* .card-title {} */ .card-header { background-color: #fff; border-bottom: 1px solid #ccc; } .card-footer { background-color: #fff; border-top: 1px solid #ccc; } /* ========================================================================== Bootstrap 5 Jumbotron Styles Location: - Home Page ========================================================================== */ .jumbotron { background-color: #e9ecef; } .jumbotron-card { background-color: #fff; color: var(--base-font-color); } /* ========================================================================== Bootstrap 5 Alert Styles ========================================================================== */ .alert { border-width: 1px; } /* ========================================================================== Bootstrap 5 Progress Bar Styles Location: - Shown when saving or loading data ========================================================================== */ .progress-bar { background-color: #498349; } /* .progress-bar-striped {} */ /* ========================================================================== Bootstrap 5 Modal Styles ========================================================================== */ /* .modal-open {} */ /* .modal-open .modal {} */ /* .modal {} */ /* .modal-dialog {} */ .modal-content { background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.175); } .modal-header { border-bottom: 1px solid #ccc; } /* .modal-title {} */ /* .modal-body {} */ .modal-footer { border-top: 1px solid #ccc; } /* ========================================================================== Bootstrap 5 Tooltip Styles Location: - Footer - Loan Progress Tracker ========================================================================== */ .tooltip { font-size: 1.6rem; } .tooltip-inner { color: #fff; background-color: #000; } /* ========================================================================== Bootstrap 5 Background Styles ========================================================================== */ .bg-light { background-color: #f8f8f8 !important; } .bg-primary-brand { background-color: #498349 !important; } .bg-tertiary { background-color: #eceeef !important; } .bg-white { background-color: #fff !important; } /* ========================================================================== Bootstrap 5 Text Styles ========================================================================== */ .text-white { color: #fff !important; } .text-primary { color: var(--base-font-color) !important; } .text-secondary { color: var(--base-font-color) !important; } .text-muted { color: rgba(0, 0, 0, 0.75) !important; } /* ========================================================================== Bootstrap 5 Border Styles ========================================================================== */ .border, .border-top, .border-right, .border-bottom, .border-left { border-color: #ccc !important; } .border-primary { border-color: #498349 !important; } .border-secondary { border-color: #82ba51 !important; } .border-light { border-color: #f8f8f8 !important; } .border-dark { border-color: #343a40 !important; } .border-tertiary { border-color: #eceeef !important; } .border-white { border-color: #fff !important; } /* ========================================================================== Bootstrap 5 Badge Styles Location: - Loan Dashboard - Tasks Page - Borrower Message Center ========================================================================== */ @media (min-width: 1200px) { .badge { font-size: 1.6rem; } } /* ========================================================================== Added Classes ========================================================================== */ /* Goto Step Button Styles */ #GoToStepDropdownMenu .btn-outline-primary { color: #498349; border-color: #498349; } #GoToStepDropdownMenu .btn-outline-primary:hover, #GoToStepDropdownMenu .btn-outline-primary:active, #GoToStepDropdownMenu .btn-outline-primary:focus { color: #fff; background-color: #498349; border-color: #498349; } /* Gradient Styles */ #overlay { background: #498349; background: linear-gradient(165deg, #007ea8 0%, #38803a 100%); } .progress-meter--valid { background: linear-gradient(90deg, #007ea8, #38803a); } #footerSocialIcons a { color: #707372 !important } /* Force all form labels to use the base font color */ label, .form-label { color: var(--base-font-color) !important; } /* Make all form field borders use the base font color */ input, textarea, select, .form-control, .form-select { border-color: var(--base-font-color) !important; } /* Make all form section headers and titles use the base font color */ legend, .form-heading, .form-section-title, .card-title, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--base-font-color) !important; } /* Ensure all text inside popups, modals, and spacing divs use the base font color */ .modal, .modal-content, .modal-body, .mb-3 { color: var(--base-font-color) !important; } /* Ensure list text inside common wrappers uses the base font color */ .mb-2, .mb-2 *, ul, ol, li { color: var(--base-font-color) !important; } /* removed blanket container wildcard override */ /* Anchor color at end */ a, a:link, a:visited { color: var(--link-color) !important; } a:hover, a:focus { color: #e6e6e6 !important; } /* Light background sections should use dark link color for contrast */ .light-section a, .light-section a:link, .light-section a:visited { color: #141414 !important; } .light-section a:hover, .light-section a:focus { color: #707372 !important; } /* === Automatic link contrast on common light-background containers === */ /* Default links (on dark or colored backgrounds) */ a, a:link, a:visited { color: #ffffff !important; /* or var(--link-color) */ } a:hover, a:focus { color: #e6e6e6 !important; } /* Auto-darken links inside known light containers */ .card a, .modal-content a, .bg-light a, .bg-white a, .jumbotron a, .table a, .alert-light a, .border-light a { color: #141414 !important; } .card a:hover, .modal-content a:hover, .bg-light a:hover, .bg-white a:hover, .jumbotron a:hover, .table a:hover, .alert-light a:hover, .border-light a:hover { color: #707372 !important; } /* Keep buttons using their intended text color (typically white) */ .btn, .btn:hover, .btn:focus, .btn:active, button, button:hover, button:focus, button:active { color: #fff !important; } /* Treat .btn-link as text on light backgrounds */ .btn-link { color: #141414 !important; } .btn-link:hover, .btn-link:focus { color: #707372 !important; } /* default on dark navbars */ } .nav-link:hover, .navbar a:hover, .navbar .nav-link:hover { color: #e6e6e6 !important; } /* On light navbars, force dark nav link color */ .navbar-light .nav-link, .navbar-light .navbar-nav .nav-link { color: #141414 !important; } .navbar-light .nav-link:hover, .navbar-light .navbar-nav .nav-link:hover { color: #707372 !important; } /* === Navigation Link Colors (strong hover, no fade or auto-light) === */ .nav-link, .navbar a, .navbar .nav-link { color: #ffffff !important; /* always white on dark navbars */ } .nav-link:hover, .navbar a:hover, .navbar .nav-link:hover { color: #ffffff !important; /* no fade */ } /* Light navbars stay dark */ .navbar-light .nav-link, .navbar-light .navbar-nav .nav-link { color: #141414 !important; } .navbar-light .nav-link:hover, .navbar-light .navbar-nav .nav-link:hover { color: #141414 !important; } /* Preserve button and brand colors */ .btn, .btn:hover, .btn:focus, .btn:active, button, button:hover, button:focus, button:active { color: #fff !important; } /* === Extended: Mask buttons inside offcanvas and side drawers === */ .offcanvas .btn.maskBtn, .offcanvas .btn-toggle.maskBtn, .offcanvas .btn.btn-sm.maskBtn, .drawer .btn.maskBtn, .drawer .btn-toggle.maskBtn, .drawer .btn.btn-sm.maskBtn { background-color: #eceeef !important; color: #141414 !important; } /* Hover/Focus/Active inside offcanvas/drawers */ .offcanvas .btn.maskBtn:hover, .offcanvas .btn.maskBtn:focus, .offcanvas .btn-toggle.maskBtn:hover, .offcanvas .btn-toggle.maskBtn:focus, .drawer .btn.maskBtn:hover, .drawer .btn.maskBtn:focus, .drawer .btn-toggle.maskBtn:hover, .drawer .btn-toggle.maskBtn:focus { color: #ffffff !important; background-color: #141414 !important; } /* Active/Pressed inside offcanvas/drawers */ .offcanvas .btn.maskBtn.active, .offcanvas .btn.maskBtn[aria-pressed="true"], .offcanvas .btn-toggle.maskBtn.active, .offcanvas .btn-toggle.maskBtn[aria-pressed="true"], .drawer .btn.maskBtn.active, .drawer .btn.maskBtn[aria-pressed="true"], .drawer .btn-toggle.maskBtn.active, .drawer .btn-toggle.maskBtn[aria-pressed="true"] { color: #ffffff !important; background-color: #141414 !important; } /* === FIX: Restore dark text on light-gray buttons (#eceeef) === */ .btn-tertiary, .btn-toggle, .btn.maskBtn, .btn[style*="background-color:#eceeef"], .btn[style*="background-color: #eceeef"] { background-color: #eceeef !important; color: #141414 !important; } /* Hover/Active states remain white on dark */ .btn-tertiary:hover, .btn-tertiary:focus, .btn-toggle:hover, .btn-toggle:focus, .btn.maskBtn:hover, .btn.maskBtn:focus, .btn-tertiary.active, .btn-tertiary[aria-pressed="true"], .btn-toggle.active, .btn-toggle[aria-pressed="true"], .btn.maskBtn.active, .btn.maskBtn[aria-pressed="true"] { background-color: #141414 !important; color: #ffffff !important; } /* === Scoped swap: change brand-ish #394A6D text to #141414 inside #UniversalApplicationPage === */ /* 1) Repoint common Bootstrap text variables for this container */ #UniversalApplicationPage { --bs-body-color: #141414; --bs-heading-color: #141414; --bs-link-color: #141414; --bs-link-hover-color: #141414; } /* 2) Override likely utility/classes that map to #394A6D, without touching buttons */ #UniversalApplicationPage :where(.text-primary, .link-primary, .brand-text, .brand, .text-brand) { color: #141414 !important; } #UniversalApplicationPage a:where(.link-primary, .brand-text, .brand, .text-brand) { color: #141414 !important; } /* 3) Headings and structural text that often inherit the brand color */ #UniversalApplicationPage :where(h1,h2,h3,h4,h5,h6):not(.btn *), #UniversalApplicationPage :where(.card-title, .card-subtitle, .modal-title, .accordion-button:not(.collapsed)) { color: #141414 !important; } /* 4) Table headers/cells and generic content text, excluding anything inside a .btn */ #UniversalApplicationPage :where(th, td, p, span, li, legend, label, small, .form-text):not(.btn *):not(.text-danger):not(.text-warning):not(.text-info) { color: #141414; } /* Keep alerts, warnings, and explicitly colored utilities unchanged */ #UniversalApplicationPage :where(.text-danger, .text-warning, .text-info, .text-muted) { /* no change */ } /* === Restore Go To Step button color === */ #ProgressBarGotoStepbtn { background-color: #82ba51 !important; border-color: #82ba51 !important; color: #ffffff !important; } #ProgressBarGotoStepbtn:hover, #ProgressBarGotoStepbtn:focus, #ProgressBarGotoStepbtn:active { background-color: #6ea043 !important; border-color: #6ea043 !important; color: #ffffff !important; } /* === Fix dropdown text color inside Go To Step menu === */ #ProgressBarAppNavigation, #ProgressBarAppNavigation * { color: #141414 !important; } #ProgressBarAppNavigation .dropdown-item:hover, #ProgressBarAppNavigation .dropdown-item:focus { color: #141414 !important; background-color: #eceeef !important; } /* === Fix color for info-circle button === */ button.btn.p-0 .fa-info-circle { color: #82BA51 !important; } /* === Fix color for all 'Remove' buttons (trash icon + text) === */ button.btn.btn-link.p-0[id^="RemoveAccountBtn_"], button.btn.btn-link.p-0[id^="RemoveAdditionEmploymentBtn_"], button.btn.btn-link.p-0[id^="RemoveOtherIncomeBtn_"], button.btn.btn-link.p-0[id^="RemoveGiftOrGrantBtn_"], button.btn.btn-link.p-0[id^="RemoveOtherAssetBtn_"], button.btn.btn-link.p-0[id^="RemoveReoBtn_"], button.btn.btn-link.p-0[id^="RemoveAccountBtn_"] i.fa-trash-alt, button.btn.btn-link.p-0[id^="RemoveAdditionEmploymentBtn_"] i.fa-trash-alt, button.btn.btn-link.p-0[id^="RemoveOtherIncomeBtn_"] i.fa-trash-alt, button.btn.btn-link.p-0[id^="RemoveGiftOrGrantBtn_"] i.fa-trash-alt, button.btn.btn-link.p-0[id^="RemoveOtherAssetBtn_"] i.fa-trash-alt, button.btn.btn-link.p-0[id^="RemoveReoBtn_"] i.fa-trash-alt { color: #82BA51 !important; } /* === Fix color for chevron header icons === */ i.fa-chevron-up.HeaderIcon, i.fa-chevron-down.HeaderIcon { color: #141414 !important; } /* === Fix color for navigation link buttons === */ button.btn.btn-link.p-0[id$="Link"], button.btn.btn-link.p-0[id$="Link"] span, button.btn.btn-link.p-0[id$="Link"] i { color: #141414 !important; } /* === Fix color for Remove Liability buttons === */ button#RemoveLiabilityBtn_0, button#RemoveOtherLiabilityBtn_0, button#RemoveLiabilityBtn_0 i, button#RemoveOtherLiabilityBtn_0 i { color: #82BA51 !important; } /* === Fix color for Required Field indicators === */ i.fa.fa-asterisk.required-icon, p.text-danger.fw-bold.text-end.mb-2 i.fa.fa-asterisk.required-icon { color: #DA291C !important; } p.text-danger.fw-bold.text-end.mb-2 { color: #DA291C !important; } /* === Update text color from #394A6D to #141414 inside MainContent and ProductListContainer === */ #MainContent, #ProductListContainer { color: #141414 !important; } #MainContent *:not(button):not(.btn):not(.material-icons):not(i):not(a):not([role="button"]), #ProductListContainer *:not(button):not(.btn):not(.material-icons):not(i):not(a):not([role="button"]) { color: #141414 !important; } /* === Fix color for 'View' link buttons === */ button.btn.btn-link.p-0:has(span.visually-hidden), button.btn.btn-link.p-0:has(span.visually-hidden) span { color: #141414 !important; } /* === Fix color for right-angle icon in Continue button === */ #btnContinue i.fa.fa-angle-right { color: #141414 !important; } /* === Fix color for right-angle icon in Pricing Options Submit Application button === */ #PricingOptionsSubmitApplicationBtn i.fa.fa-angle-right { color: #141414 !important; } /* === Force hover/focus white text/icon for Return to Results button === */ button.btn.btn-tertiary.border:hover, button.btn.btn-tertiary.border:focus, button.btn.btn-tertiary.border:hover .fa, button.btn.btn-tertiary.border:focus .fa, button.btn.btn-tertiary.border:hover span, button.btn.btn-tertiary.border:focus span { color: #FFFFFF !important; } /* === Force white text/icon on hover specifically for #btnBack === */ #btnBack:hover, #btnBack:focus, #btnBack:hover .fa, #btnBack:focus .fa, #btnBack:hover span, #btnBack:focus span { color: #FFFFFF !important; } /* === V2: Force white on visible text spans for 'Return to Results' button === */ button.btn.btn-tertiary.border:hover, button.btn.btn-tertiary.border:focus { color: #FFFFFF !important; } button.btn.btn-tertiary.border:hover span.d-none.d-sm-inline.ms-1, button.btn.btn-tertiary.border:focus span.d-none.d-sm-inline.ms-1, button.btn.btn-tertiary.border:hover span.visually-hidden.d-inline.d-sm-none, button.btn.btn-tertiary.border:focus span.visually-hidden.d-inline.d-sm-none { color: #FFFFFF !important; } /* === Re-assert: force white on hover for #btnBack (text + icon) === */ #btnBack:hover, #btnBack:focus, #btnBack:hover *, #btnBack:focus * { color: #FFFFFF !important; fill: #FFFFFF !important; } /* === New: force white hover text for 'Return to Results' button (class-based, left-arrow icon) === */ button.btn.btn-tertiary.border:hover i.fa-angle-left, button.btn.btn-tertiary.border:hover i.fa-angle-left + span, button.btn.btn-tertiary.border:focus i.fa-angle-left, button.btn.btn-tertiary.border:focus i.fa-angle-left + span, button.btn.btn-tertiary.border:hover span.d-none.d-sm-inline.ms-1, button.btn.btn-tertiary.border:focus span.d-none.d-sm-inline.ms-1, button.btn.btn-tertiary.border:hover span.visually-hidden.d-inline.d-sm-none, button.btn.btn-tertiary.border:focus span.visually-hidden.d-inline d-sm-none { color: #FFFFFF !important; fill: #FFFFFF !important; } /* === Ultra-specific fix: force white hover text/icon for 'Return to Results' button inside col-6 === */ .col-6 button.btn.btn-tertiary.border:hover, .col-6 button.btn.btn-tertiary.border:focus, .col-6 button.btn.btn-tertiary.border:hover *, .col-6 button.btn.btn-tertiary.border:focus * { color: #FFFFFF !important; fill: #FFFFFF !important; } /* === V5: Container-scoped overrides to beat #MainContent/* and #ProductListContainer/* rules === */ /* For #btnBack specifically */ #MainContent #btnBack:hover, #MainContent #btnBack:focus, #MainContent #btnBack:hover *, #MainContent #btnBack:focus * { color: #FFFFFF !important; fill: #FFFFFF !important; } /* For any 'Return to Results' style button within #MainContent */ #MainContent button.btn.btn-tertiary.border:hover, #MainContent button.btn.btn-tertiary.border:focus, #MainContent button.btn.btn-tertiary.border:hover .fa, #MainContent button.btn.btn-tertiary.border:focus .fa, #MainContent button.btn.btn-tertiary.border:hover span, #MainContent button.btn.btn-tertiary.border:focus span { color: #FFFFFF !important; fill: #FFFFFF !important; } /* In case the button is within ProductListContainer */ #ProductListContainer button.btn.btn-tertiary.border:hover, #ProductListContainer button.btn.btn-tertiary.border:focus, #ProductListContainer button.btn.btn-tertiary.border:hover .fa, #ProductListContainer button.btn.btn-tertiary.border:focus .fa, #ProductListContainer button.btn.btn-tertiary.border:hover span, #ProductListContainer button.btn.btn-tertiary.border:focus span { color: #FFFFFF !important; fill: #FFFFFF !important; } /* === Ensure all text inside .modal-content uses base font color #141414 === */ .modal-content, .modal-content * { color: #141414 !important; } /* === Set #btnEligibility button text color to #141414 === */ #btnEligibility { color: #141414 !important; } /* === Set fa-sign-in-alt icon color to white === */ .fa-sign-in-alt { color: #FFFFFF !important; } /* === Set right-angle icon inside #PricingOptionsContinueApplicationBtn to #141414 === */ #PricingOptionsContinueApplicationBtn .fa-angle-right { color: #141414 !important; } /* === Set info icon color in .card-footer.bg-gray.border-top-0 to #82BA51 === */ .card-footer.bg-gray.border-top-0 .fa-info-circle { color: #82BA51 !important; } /* === Set radio button and label color for custom radio to #82BA51 === */ .custom-radio-input:checked + .form-check-label.radio-table.custom-radio-label.ms-2::before, .form-check-label.radio-table.custom-radio-label.ms-2 { color: #82BA51 !important; accent-color: #82BA51 !important; } /* === V2: Force radio control (not label text) to #82BA51 when checked === */ /* Prefer native accent-color for modern browsers */ .custom-radio .custom-radio-input { accent-color: #82BA51 !important; } /* Fallback for custom/Bootstrap-like radios that draw with ::before/::after on the label */ .custom-radio .custom-radio-input:checked + .form-check-label.radio-table.custom-radio-label.ms-2::before { border-color: #82BA51 !important; background-color: #82BA51 !important; } /* Some themes render the inner dot via ::after */ .custom-radio .custom-radio-input:checked + .form-check-label.radio-table.custom-radio-label.ms-2::after { background-color: #82BA51 !important; } /* === Custom fake radio: outer circle and inner dot using #82BA51 === */ .custom-radio .custom-radio-input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid #82BA51; border-radius: 50%; position: relative; cursor: pointer; vertical-align: middle; background-color: transparent; } .custom-radio .custom-radio-input:checked::before { content: ""; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; background-color: #82BA51; border-radius: 50%; } .form-check-label.radio-table.custom-radio-label.ms-2 { color: #141414 !important; /* keeps label text normal */ cursor: pointer; } /* === V3 Fake radios: refined dot sizing and positioning === */ .custom-radio .custom-radio-input { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important; } .custom-radio .custom-radio-input + .form-check-label.radio-table.custom-radio-label.ms-2 { position: relative; padding-left: 26px; line-height: 18px; cursor: pointer; } /* Outer ring */ .custom-radio .custom-radio-input + .form-check-label.radio-table.custom-radio-label.ms-2::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 2px solid #82BA51; border-radius: 50%; background-color: transparent; } /* Small inner dot */ .custom-radio .custom-radio-input:checked + .form-check-label.radio-table.custom-radio-label.ms-2::after { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background-color: #82BA51; border-radius: 50%; } /* === Ensure #btnContinue text and icon stay #141414 (normal + hover/focus) === */ #btnContinue, #btnContinue *, #btnContinue:hover, #btnContinue:focus, #btnContinue:hover *, #btnContinue:focus * { color: #141414 !important; fill: #141414 !important; } :root { --GreyContainer: #f8f8f8; --GreyBorder: #94949d; --DarkGreyBorder: #6d6d77; --tertiary: #eceeef; --Primary80: #394a6d; --Error: #da291c; --Focus: #0061e0; --gray-400: #ced4da; --gray-600: #6c757d; --gray-700: #495057; --ck-color-base-border: #94949d!important; --ck-border-radius: 0.5rem!important; --ck-color-focus-border-coordinates: #0061e0!important; --ck-color-focus-border: var(--ck-color-focus-border-coordinates)!important; --ck-z-modal: 1070!important; --paymentBreakoutPrincipalInterest: #539250; --paymentBreakoutMortgageInsurance: #141414; --paymentBreakoutTaxes: #82ba51; --paymentBreakoutHazardInsurance: #707372; --paymentBreakoutOther: #c1dda8 }