@charset "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('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap');

/* ==========================================================================
   Template for CSS colors

     LighterGray:   #f9f9f9;
     LightGray:     #bcc5c3;
     Gray:          #ccc;
     DarkGray:      #727779;

     lavendar:      #cda3d9;
     Navy:          #272f59
     light blue:    #6a86d9;
     margin-top:    #62d9d9;
     light gray:    #f2f2f2;

     ErrorRed:      #da291c;
     WarningYellow: #eaaa00;
     SuccessGreen:  #4caf50;
     InfoBlue:      #003767;

     Blue:          #003767;
     Green:         #003767;
     BlueGray:      #5f7890;
     Yellow:        #ffe55e;
     Maroon:        #764359;
	 	 Focus:		    	#0061e0;
     ======================================================================== */
/* ==========================================================================
   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: "Cabin", sans-serif;
  font-size: 1.6rem;
  color: #003767;
  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: #5f7890;
  text-decoration: none;
}

a:hover {
  color: #002d3c;
  text-decoration: underline;
}

/* img {} */
/* label {} */
legend {
  font-size: 1.5rem;
  color: inherit;
}

/* button {} */
/* button:focus {} */
button:focus::after {
  outline: 5px auto #0061e0;
}

/* 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: #003767;
}

/* 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: #071d49;
} */
.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: #003767;
  --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: #0061e0 !important;
  box-shadow: 0 0 0 0.2rem #0061e0;
}

.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: #003767;
}

@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: #003767;
  border-color: #003767;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary.focus {
  background-color: #bcc5c3;
  border-color: #bcc5c3;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active {
  background-color: #bcc5c3;
  border-color: #005f7e;
}

.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: #003767;
  border-color: #003767;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus {
  background-color: #bcc5c3;
  border-color: #bcc5c3;
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active {
  background-color: #bcc5c3;
  border-color: #2b3852;
}

.btn-toggle:not(:disabled):not(.disabled):active, .btn-toggle:not(:disabled):not(.disabled).active {
  background-color: #495057;
  border-color: #495057;
}

.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: #003767;
  border-color: #003767;
}

.btn-outline-secondary:hover, .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: #003767;
  border-color: #003767;
}

.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: #068;
  text-decoration: none;
}

.btn-link:hover, .btn-link:focus, .btn-link.focus {
  color: #002d3c;
  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: #003767;
  background-color: #003767;
}

.form-check-input:focus:not(:checked) {
  border-color: #0061e0 !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, 114, 162, 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: #003767;
}

.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: #003767;
}

/* ==========================================================================
   Bootstrap 5 Alert Styles
   ========================================================================== */
.alert {
  border-width: 1px;
}

/* ==========================================================================
   Bootstrap 5 Progress Bar Styles
   Location:
   	- Shown when saving or loading data
   ========================================================================== */
.progress-bar {
  background-color: #003767;
}

/* .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: #003767 !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: #007ea8 !important;
}

.text-secondary {
  color: #394a6d !important;
}

.text-muted {
  color: rgba(57, 74, 109, 0.75) !important;
}

/* ==========================================================================
   Bootstrap 5 Border Styles
   ========================================================================== */
.border, .border-top, .border-right, .border-bottom, .border-left {
  border-color: #ccc !important;
}

.border-primary {
  border-color: #007ea8 !important;
}

.border-secondary {
  border-color: #394a6d !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: #003767;
  border-color: #003767;
}

#GoToStepDropdownMenu .btn-outline-primary:hover, #GoToStepDropdownMenu .btn-outline-primary:active, #GoToStepDropdownMenu .btn-outline-primary:focus {
  color: #fff;
  background-color: #003767;
  border-color: #003767;
}

/* Gradient Styles */
#overlay {
  background: #003767;
  background: linear-gradient(165deg, #007ea8 0%, #38803a 100%);
}

.progress-meter--valid {
  background: linear-gradient(90deg, #007ea8, #38803a);
}

#footerSocialicons a {
  color:#003767 !important;