@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.

  © 2020 Borrower Center. All Rights Reserved.
*/
/*!
 * Bootstrap v4.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/* ==========================================================================
  Resources
	- Bootstrap 4 documentation: https://getbootstrap.com/docs/4.5/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 manupilating 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(../../Content);" and replace below
   ========================================================================== */
/* Google Font */

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

     LighterGray:  #f9f9f9;
     LightGray:    #BCC5C3;
     Gray:         #CCCCCC;
     DarkGray:     #727779;

     lavendar:      #CDA3D9;
     Navy:         #272F59
     light blue:   #6A86D9;
     margin-top:   #62D9D9;
     light gray:   #F2F2F2;

     ErrorRed:     #da291c;
     WarningYellow: #eaaa00;
     SuccessGreen: #4CAF50;
     InfoBlue:     #007ea8;
     ======================================================================== */
/* ==========================================================================
   Bootstrap 4 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 {
  font-size: 1.6rem;
  color: #0065aa;
  background-color: #fff; }

/*article, aside, footer, header, main, nav, section {}*/
/*p {}*/
small, .small {
  font-size: 1.4rem; }

a {
  color: #006688
  text-decoration: none; }

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

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

/*button {}*/
/*button:focus {}*/
/*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; }

.display-1 {
  font-size: 6rem; }

.display-2 {
  font-size: 5.5rem; }

.display-3 {
  font-size: 4.5rem; }

.display-4 {
  font-size: 3.5rem; }

hr {
  margin-top: 1.5rem;
  border-top: 1px solid #CCC; }

/* ==========================================================================
   Bootstrap 4 Table Styles
   Location:
   	- Rate and Payment modal accessible from link on product card
   	- Loan Progress Tracker view details modal
   ========================================================================== */
.table,
.table-hover tbody tr:hover {
  color: #0065aa; }

.table th,
.table td,
.table-bordered
.table-bordered th,
.table-bordered td {
  border-top: 1px solid #CCC; }

.table thead th,
.table tbody + tbody {
  border-bottom: 2px solid #CCC; }

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05); }

.table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.075); }

/*.table-responsive {}*/
/* ==========================================================================
   Bootstrap 4 Form Styles
   Location:
   	- Any page with form fields
   ========================================================================== */
.form-control, .form-control:focus, select.form-control:focus::-ms-value {
  color: #495057; }

.form-control:focus {
  border-color: #29c9ff;
  box-shadow: 0 0 0 0.2rem rgba(0, 126, 168, 0.25); }

.form-control:disabled, .form-control[readonly] {
  background-color: #e9ecef; }

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

/* ==========================================================================
   Bootstrap 4 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 .custom-select:invalid, .custom-select.is-invalid,
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus,
.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus,
.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label,
.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before,
.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before,
.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
  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 .custom-select:invalid:focus, .custom-select.is-invalid:focus,
.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label,
.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(218, 41, 28, 0.25);
  /*This box-shadow highlights which field is focused. The color should be a lighter version of the main error state color*/ }

.invalid-feedback,
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label,
.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-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 .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
  border-color: #e74e42;
  background-color: #e74e42; }

/* ==========================================================================
   Bootstrap 4 Button Styles
   ========================================================================== */
.btn, .btn:hover {
  color: #812986; }

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

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

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

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 145, 181, 0.5); }

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

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

/*We recommend using the same active color for btn-toggle and btn-secondary*/
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.btn-toggle:not(:disabled):not(.disabled):active, .btn-toggle:not(:disabled):not(.disabled).active {
  background-color: #812986;
  border-color: #812986; }

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-toggle:not(:disabled):not(.disabled):active:focus, .btn-toggle:not(:disabled):not(.disabled).active:focus {
  box-shadow: 0 0 0 0.2rem rgba(87, 101, 131, 0.5); }

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

.btn-success:hover, .btn-success:focus, .btn-success.focus {
  background-color: #812986;
  border-color: #812986; }

.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active {
  background-color: #285d2a;
  border-color: #285d2a; }

.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus {
  box-shadow: 0 0 0 0.2rem rgba(86, 147, 88, 0.5); }

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

.btn-warning:hover, .btn-warning:focus, .btn-warning.focus {
  background-color: #812986;
  border-color: #812986; }

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

.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus {
  box-shadow: 0 0 0 0.2rem rgba(164, 130, 38, 0.5); }

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

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

.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus {
  box-shadow: 0 0 0 0.2rem rgba(224, 73, 62, 0.5); }

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

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

.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active {
  background-color: #dfdfdf;
  border-color: #d8d8d8; }

.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus {
  box-shadow: 0 0 0 0.2rem rgba(216, 216, 217, 0.5); }

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

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

.btn-tertiary:not(:disabled):not(.disabled):active, .btn-tertiary:not(:disabled):not(.disabled).active {
  background-color: #d0d5d8;
  border-color: #c9cfd2; }

.btn-tertiary:not(:disabled):not(.disabled):active:focus, .btn-tertiary:not(:disabled):not(.disabled).active:focus {
  box-shadow: 0 0 0 0.2rem rgba(206, 208, 209, 0.5); }

.btn-outline-secondary, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
  color: #0065aa;
  border-color: #0065aa; }

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

.btn-outline-secondary:focus, .btn-outline-secondary.focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus {
  box-shadow: 0 0 0 0.2rem rgba(57, 74, 109, 0.5); }

.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-outline-danger:focus, .btn-outline-danger.focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus {
  box-shadow: 0 0 0 0.2rem rgba(218, 41, 28, 0.5); }

.btn-link {
  color: #0065aa;
  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; }

.btn-lg, .btn-group-lg > .btn {
  font-size: 1.8rem; }

.btn-sm, .btn-group-sm > .btn {
  font-size: 1.4rem; }

/* ==========================================================================
   Bootstrap 4 Custom Control Styles
   Location:
   	- Throughout the application, mainly for checkboxes and radio buttons
   ========================================================================== */
/*.custom-control {}*/
/*.custom-control-inline {}*/
/*.custom-control-input {}*/
.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  color: #fff; }

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #007EA8;
  background-color: #007EA8; }

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 126, 168, 0.25); }

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #29c9ff; }

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  background-color: #5cd6ff;
  border-color: #5cd6ff; }

.custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
  color: #6c757d; }

.custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
  background-color: #e9ecef; }

/*.custom-control-label {}*/
.custom-control-label::before {
  background-color: #fff;
  border: #adb5bd solid 1px; }

/*.custom-checkbox .custom-control-label::before {}*/
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before,
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 126, 168, 0.5); }

/*.custom-radio .custom-control-label::before {}*/
/* ==========================================================================
   Bootstrap 4 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: #6c757d; }

/*.nav-pills .nav-link {}*/
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #eceeef; }

.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: rgba(0, 0, 0, 0.9); }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.navbar-light .navbar-nav .nav-link {
  color: #0065aa; }

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7); }

.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 4 Card Styles
   Location:
   	- Universal App (Authorizations, Accounts, Assets, Liabilities, Product Eligbility, 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-header {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid #CCC; }

.card-footer {
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid #CCC; }

/* ==========================================================================
   Bootstrap 4 Jumbotron Styles
   Location:
   	- Home Page
   ========================================================================== */
.jumbotron {
  background-color: #e9ecef; }

/* ==========================================================================
   Bootstrap 4 Alert Styles
   ========================================================================== */
.alert {
  border: 1px solid transparent; }

/*.alert-dismissible {}*/
.alert-success {
  color: #38803a;
  border-color: #38803a; }

.alert-info {
  color: #007ea8;
  border-color: #007ea8; }

.alert-warning {
  color: #946c00;
  border-color: #946c00; }

.alert-danger {
  color: #da291c;
  border-color: #da291c; }

/* ==========================================================================
   Bootstrap 4 Progress Bar Styles
   Location:
   	- Shown when saving or loading data
   ========================================================================== */
.progress {
  font-size: 1.2rem;
  background-color: #e9ecef; }

.progress-bar {
  color: #fff;
  background-color: #007EA8; }

/*.progress-bar-striped {}*/
/* ==========================================================================
   Bootstrap 4 Modal Styles
   ========================================================================== */
/*.modal-open {}*/
/*.modal-open .modal {}*/
/*.modal {}*/
/*.modal-dialog {}*/
.modal-content {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2); }

.modal-header {
  border-bottom: 1px solid #CCC; }

/*.modal-title {}*/
/*.modal-body {}*/
.modal-footer {
  border-top: 1px solid #CCC; }

/* ==========================================================================
   Bootstrap 4 Tooltip Styles
   Location:
   	- Footer
   	- Loan Progress Tracker
   ========================================================================== */
.tooltip {
  font-size: 1.4rem; }

.tooltip-inner {
  color: #fff;
  background-color: #000; }

/* ==========================================================================
   Bootstrap 4 Popover Styles
   Location:
   	- Information icon beside field labels
   ========================================================================== */
.popover {
  font-size: 1.4rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2); }

.popover-header {
  font-size: 1.6rem;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb; }

.popover-body {
  color: #0065aa; }

/* ==========================================================================
   Bootstrap 4 Background Styles
   ========================================================================== */
.bg-success {
  background-color: #38803A !important; }

.bg-warning {
  background-color: #946C00 !important; }

.bg-light {
  background-color: #f8f8f8 !important; }

.bg-dark {
  background-color: #343a40 !important; }

.bg-primary-brand {
  background-color: #071d49 !important; }

.bg-tertiary {
  background-color: #eceeef !important; }

.bg-white {
  background-color: #fff !important; }

/* ==========================================================================
   Bootstrap 4 Popover Styles
   ========================================================================== */
.text-white {
  color: #fff !important; }

.text-primary {
  color: #007EA8 !important; }

.text-secondary {
  color: #0065aa !important; }

.text-success {
  color: #38803A !important; }

.text-info {
  color: #007EA8 !important; }

.text-warning {
  color: #946C00 !important; }

.text-danger {
  color: #DA291C !important; }

.text-muted {
  color: #6c757d !important; }

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

.border-primary {
  border-color: #0065aa !important; }

.border-secondary {
  border-color: #0065aa !important; }

.border-success {
  border-color: #38803A !important; }

.border-info {
  border-color: #007EA8 !important; }

.border-warning {
  border-color: #946C00 !important; }

.border-danger {
  border-color: #DA291C !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 4 Badge Styles
   Location:
   	- Loan Dashboard
   	- Tasks Page
   ========================================================================== */
.badge {
  font-size: 1.4rem; }

.badge-success {
  background-color: #38803A; }

.badge-info {
  background-color: #007EA8; }

/* ==========================================================================
Borrower Center Accordion Colors
========================================================================== */
.accordion-body {
  background-color: #fff; }

.accordion.Borrower {
  margin-bottom: 30px; }
  .accordion.Borrower .AccordionButton {
    font-size: 24px; }
    .accordion.Borrower .AccordionButton .HeaderIcon {
      margin-right: 10px;
      font-size: 24px; }
    @media screen and (max-width: 768px) {
      .accordion.Borrower .AccordionButton {
        /*makes submit button full width below 768px*/ }
        .accordion.Borrower .AccordionButton h2 {
          font-size: 20px; } }

.AccordionSmall .AccordionButton {
  font-size: 14px; }

.AccordionSmall .HeaderIcon {
  font-size: 18px; }

.AccordionListHeader {
  border-color: #727779; }

.accordion-group {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); }

/* ==========================================================================
   Borrower Center Badge Animation Colors
   Location:
	- Loan Dashboard
	- Tasks Page

	Replace the color insider rgba with your corresponding theme color.
   ========================================================================== */
@keyframes pulseinfo {
  0% {
    box-shadow: 0 0 0 0.56em rgba(0, 126, 168, 0); }
  25% {
    box-shadow: 0 0 0 0.14em rgba(0, 126, 168, 0.8); }
  50% {
    box-shadow: 0 0 0 1.05em rgba(0, 126, 168, 0); }
  100% {
    box-shadow: 0 0 0 0em rgba(0, 126, 168, 0); } }

@keyframes pulsesuccess {
  0% {
    box-shadow: 0 0 0 0.56em rgba(56, 128, 58, 0); }
  25% {
    box-shadow: 0 0 0 0.14em rgba(56, 128, 58, 0.8); }
  50% {
    box-shadow: 0 0 0 1.05em rgba(56, 128, 58, 0); }
  100% {
    box-shadow: 0 0 0 0em rgba(56, 128, 58, 0); } }

@keyframes pulsewarning {
  0% {
    box-shadow: 0 0 0 0.56em rgba(148, 108, 0, 0); }
  25% {
    box-shadow: 0 0 0 0.14em rgba(148, 108, 0, 0.8); }
  50% {
    box-shadow: 0 0 0 1.05em rgba(148, 108, 0, 0); }
  100% {
    box-shadow: 0 0 0 0em rgba(148, 108, 0, 0); } }

@keyframes pulseerror {
  0% {
    box-shadow: 0 0 0 0.56em rgba(218, 41, 28, 0); }
  25% {
    box-shadow: 0 0 0 0.14em rgba(218, 41, 28, 0.8); }
  50% {
    box-shadow: 0 0 0 1.05em rgba(218, 41, 28, 0); }
  100% {
    box-shadow: 0 0 0 0em rgba(218, 41, 28, 0); } }

/* ==========================================================================
   Borrower Center Card Colors
   ========================================================================== */
.pipeline-card__row {
  font-size: 12px; }
  .pipeline-card__row__icon {
    color: #007EA8; }
    .pipeline-card__row__icon:hover, .pipeline-card__row__icon:focus {
      color: #003242; }
    .pipeline-card__row__icon.in-active {
      color: #adb5bd; }
      .pipeline-card__row__icon.in-active:hover, .pipeline-card__row__icon.in-active:focus {
        color: #748290; }
  .pipeline-card__row__link {
    font-size: 12px; }

.product-card.selected .product-card__main-icon-container {
  background-color: #38803A;
  color: #fff; }

.product-card__main-icon-container {
  background-color: #fff; }

.product-card__main-icon {
  font-size: 37px; }

.product-card__favorite-icon {
  /*This color should match the color for product-filter__favorite-icon*/
  color: #007EA8;
  font-size: 30px; }

.product-card__description {
  font-size: 14px; }

/* ==========================================================================
   Borrower Center Demographic Information Addendum Colors
   Location:
   	- Quick Start Application
   	- Full Application
   ========================================================================== */
#gmiForm .is-invalid legend, #gmiForm .is-invalid label, #gmiForm .is-invalid p, #gmiForm .is-invalid span, #gmiForm .is-invalid small {
  color: #DA291C; }

/* ==========================================================================
   Borrower Center Modal Colors
   ========================================================================== */
/*#ModalContainer {}*/
.ModalBody {
  background-color: #fff; }

.modal-header, .ModalHeader {
  background-color: #f8f8f8;
  border-color: #eceeef;
  color: #0065aa; }

.ModalWarning .ModalHeader {
  background-color: #946C00; }

.ModalFooter {
  border-top-color: #eceeef; }

.ModalBackgroundMask {
  background-color: rgba(0, 0, 0, 0.5); }

.ModalDialogContainer {
  background-color: #fff; }

#ModalHeaderTitle:focus {
  outline: 0px solid transparent; }

/* ==========================================================================
   Borrower Center Navigation Colors
   ========================================================================== */
.nav-pills .nav-link:hover {
  background-color: #eceeef; }

/* ==========================================================================
   Borrower Center Product Eligibility Colors
   ========================================================================== */
/*The background color for product-list__sort and product-list__nav should match
  the background color of the page*/
.product-list__sort {
  background-color: #fff; }


.product-list__nav {
}

.product-filter__favorite-icon {
  /*This color should match the color for product-card__favorite-icon*/
  color: #007EA8; }

/* ==========================================================================
   Borrower Center Progress Meter Colors
   Location:
   	- Quick Start Application Sidebar
   	- Full Application Sidebar
   ========================================================================== */
.ProgressMeter .circle.disabled {
  border-color: #727779; }

.ProgressMeter .circle:not(.disabled) {
  border-color: #38803A; }

.ProgressMeter .SectionLine {
  border-left-color: #727779; }

/* ==========================================================================
   Borrower Center Radio Colors
   ========================================================================== */
.custom-radio .custom-radio-input:checked ~ .custom-radio-label:after,
.custom-radio .custom-radio-input:not(:checked) ~ .custom-radio-label:after {
  background: #007EA8; }

/* ==========================================================================
   Borrower Center Slider Control Colors
   Location:
   	- Sidebar of Eligible Products page
   ========================================================================== */
.rzslider .rz-bar {
  background: #d5dce9; }

.rzslider .rz-selection {
  background: #0065aa; }

.rzslider .rz-pointer {
  background-color: #0065aa; }

/* ==========================================================================
   Borrower Center Toastr Notification Colors
   Location:
   	- Appear at the top right of the application after certain actions e.g. saving
   ========================================================================== */
.toast {
  font-size: 14px; }

.toast-success {
  background-color: #38803A; }

.toast-error {
  background-color: #DA291C; }

.toast-info {
  background-color: #007EA8; }

.toast-warning {
  background-color: #946C00; }

/* ==========================================================================
   Added Classes
   ========================================================================== */

#ViewOrUploadDocumentsBtn {
	color: #fff;
	background-color: #812986;
	border-color: #812986;
}

#btnEligibility {
	font-weight: bold;
}