@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("");
/* ==========================================================================
   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:      #007ea8;

	 	 Focus:		    	#0061e0;
     ======================================================================== */
/* ==========================================================================
   Bootstrap 5 General Styles

   This section focuses on site-wide styles such as headings, type of font,
   paragraph text color, labels etc.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,700&display=swap');

:root {
  --blue: #325BB2;
  --indigo: #001A52;
  --purple: #4A2987;
  --pink: #D92779;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #108223;
  --teal: #92CD00;
  --cyan: #9EB1DA;
  --white: #fff;
  --gray: #797979;
  --gray-dark: #4D4D4D;
  --primary: #325BB2;
  --secondary: #F89012;
  --success: #92CD00;
  --info: #325BB2;
  --warning: #946C00;
  --danger: #DD0000;
  --light: #F7F7F7;
  --dark: #4D4D4D;
  --primary-brand: #071d49;
  --tertiary: #EFEFEF;
 }

html {
  font-family: sans-serif;
  font-size: 15px;
}

body, #StickyBottomContainer {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.0rem;
  color: #333;
  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: 0.9rem;
}

a {
  color: #325BB2;
  text-decoration: none;
}

a:hover {
  color: #F89012;
  text-decoration: none;
}

/* img {} */
/* label {} */
legend {
  font-size: 1.0rem;
  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: 1.8rem;
}

h2, .h2 {
  font-size: 1.5rem;;
}

h3, .h3 {
  font-size: 1.4rem;
}

h4, .h4 {
  font-size: 1.2rem;
}

h5, .h5 {
  font-size: 1.15rem;
}

h6, .h6 {
  font-size: 1.1rem;
}

@media (min-width: 1200px) {
  .display-1 {
    font-size: 1.0rem;
  }
}
@media (min-width: 1200px) {
  .display-2 {
    font-size: 1.0rem;
  }
}
@media (min-width: 1200px) {
  .display-3 {
    font-size: 1.0rem;
  }
}
@media (min-width: 1200px) {
  .display-4 {
    font-size: 1.0rem;
  }
}
@media (min-width: 1200px) {
  .display-5 {
    font-size: 1.0rem;
  }
}
@media (min-width: 1200px) {
  .display-6 {
    font-size: 1.0rem;
  }
}
hr {
  margin-top: 1.5rem;
  border-top: 1px dotted #92CD00;
}

/* ==========================================================================
   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: #325BB2;
}

/* 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: #394a6d;
  --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: #777;
}

@media (min-width: 1200px) {
  .form-control, .form-select {
    font-size: 1.2rem;
  }
}
.form-control, .form-select {
  border: 1px solid #94949d;
}

.form-control:focus, .form-select:focus {
  color: #333 !important;
  background-color: #fff !important;
  border-color: #B0C9FF !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.ReadOnlyFieldText {
  background-color: #bbb !important;
  border-color: #94949d !important;
  outline: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* textarea.form-control {} */
/* .form-group {} */
/* .form-text {} */
/* .form-check {} */
.form-check-input {
  font-size: 1.2rem;
}
/* .form-check-label {} */
.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label,
.form-control::placeholder {
  color: #777;
}

.form-control::placeholder{
	font-size: 1.0rem;
}

.ReactSelect__control {
  border-color: #94949d !important;
}

/* ==========================================================================
   Bootstrap 5 Form Validation Styles
   Location:
   	- Any page with form fields
   ========================================================================== */
.invalid-feedback {
  font-size: 1.0rem; /* 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: #DD0000; /* 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: #DD0000; /* 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: #394a6d;
  text-decoration: none;
	text-transform: uppercase;
	font-weight: 600 !important;
}

@media (min-width: 1200px) {
  .btn {
    font-size: 1.0rem;
  }
}
.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: #007ea8;
  border-color: #007ea8;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary.focus {
  background-color: #006b8f;
  border-color: #006586;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active {
  background-color: #006586;
  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: #394a6d;
  border-color: #394a6d;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus {
  background-color: #303f5d;
  border-color: #2e3b57;
} */

/* 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: #2e3b57;
  border-color: #2b3852;
}

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

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

.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 {
  font-size: 1.0rem;
  color: #325BB2;
  text-decoration: none;
}

.btn-link:hover, .btn-link:focus, .btn-link.focus {
  font-size: 1.0rem;
  color: #F89012;
  text-decoration: none;
}

.btn-link:disabled, .btn-link.disabled {
  color: #6c757d;
} */

/* Placing new button here */

.btn-primary,
.btn-primary:focus,
.btn-primary.focus,
.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,
.btn-secondary,
.btn-secondary:focus,
.btn-secondary.focus,
.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 !important;
	background-color: #fd7e14 !important;
	border-color: #fd7e14 !important;
	box-shadow: none !important; 
}

/* ------- */

.btn-tertiary,
.btn-tertiary:focus,
.btn-tertiary.focus,
.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: #fff !important;
  background-color: #5A7BC1 !important;
  border-color: #5A7BC1 !important;
  box-shadow: none !important;
}

/* ------- */

.btn-success,
.btn-success:focus,
.btn-success.focus,
.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: #333 !important;
  background-color: #F5F9E6 !important;
  border-color: #92CD00 !important;
  box-shadow: none !important;
}

/* ------- */

.btn-warning,
.btn-warning:focus,
.btn-warning.focus,
.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: #333 !important;
  background-color: #FEFDF2 !important;
  border-color: #E3E14A !important;
  box-shadow: none !important;
}

/* ------- */

.btn-danger,
.btn-danger:focus,
.btn-danger.focus,
.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: #333 !important;
  background-color: #FBF2F2 !important;
  border-color: #DD0000 !important;
  box-shadow: none !important;
}

/* ------- */

.btn-light,
.btn-light:focus,
.btn-light.focus,
.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: #333 !important;
  background-color: #F2F6FE !important;
  border-color: #B0C9FF !important;
  box-shadow: none !important;
}

/* ------- */

.btn-outline-secondary,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:focus,
.btn-outline-secondary.focus{
  color: #fd7e14 !important;
  background-color: #fff !important;
  border-color: #fd7e14 !important;
  box-shadow: none !important;
}

/* ------- */

.btn-outline-danger,
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.btn-outline-danger:focus,
.btn-outline-danger.focus {
  color: #DD0000 !important;
  background-color: #fff !important;
  border-color: #DD0000 !important;
  box-shadow: none !important;
}

/* ------- */

.btn-primary:hover,
.btn-secondary:hover,
.btn-tertiary:hover,
.btn-light:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-outline-danger:hover,
.btn-outline-secondary:hover{
  color: #fff !important;
  background-color: #4D4D4D !important;
  border-color: #4D4D4D !important; 
}

/* ------- */

.btn-link:disabled,
.btn-link.disabled {
  color: #333; }

.disabled,
.btn.disabled,
.btn:disabled {
	color: #fff !important;
	background-color: #333 !important;
	border-color: #333 !important;
	box-shadow: none !important;
	opacity: 0.5 ; 
}

/* End of new button styles */

@media (min-width: 1200px) {
  .btn-lg, .btn-group-lg > .btn {
    font-size: 1.0rem;
  }
}
@media (min-width: 1200px) {
  .btn-sm, .btn-group-sm > .btn {
    font-size: 1.0rem;
  }
}

.btn-link {
  font-size: 1.0rem;
  color: #325BB2;
  text-decoration: none; 
}

.btn-link:hover{
  font-size: 1.0rem;
  color: #F89012;
  text-decoration: none; 
}

button:focus,
.btn:focus,
.btn-link:focus,
.btn-link.focus {
    outline: none !important;
}

/* ==========================================================================
   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: #325BB2;
  background-color: #325BB2;
}

.form-check-input:focus:not(:checked) {
  border-color: #B0C9FF !important;
}

.form-check-input:active {
  filter: brightness(90%);
}

.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
  color: #4D4D4D;
  opacity: 1 !important;
}

.form-check-input[disabled], .form-check-input:disabled {
  background-color: #bbb;
  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: #4D4D4D;
}

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

/* .navbar {} */
.navbar-brand {
  font-size: 1rem;
}

.navbar-brand:hover, .navbar-brand:focus {
  text-decoration: none;
}

/* .navbar-nav {} */
/* .navbar-nav .nav-link {} */
/* .navbar-collapse {} */
.navbar-toggler {
  font-size: 1.5rem;
}

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

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: #fff;
  background-color: #325BB2;;
}

.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;
  background-color: transparent;
  border: 1px solid transparent;
}

.navbar-dark .navbar-toggler:hover {
  color: #062F87; /* match this with .bg-primary-brand */
  background-color: #fff;
  border: 1px solid transparent;}

.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-nav .nav-link:hover{
  text-decoration: none;
  color: #fff;
  border: 1px solid #fff;
}
#BrandLogoLink,#BrandLogoLink:hover{
  padding-top: 20px;
  text-decoration: none;
  color: unset;
  border: none;
}

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

.jumbotron-card {
  background-color: #fff;
  color: #394a6d;
}

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

.alert-success {
  color: #92CD00;
  border-color: #92CD00;
}

.alert-info {
  color: #325BB2;
  border-color: #325BB2; 
}

.alert-warning {
  color: #E3E14A;
  border-color: #E3E14A; 
}

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

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

.progress-bar {
  background-color: #325BB2;
}

/* .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;
  color: #325BB2;
  font-size: 1rem;
}

/* .modal-title {} */
.modal-body {
  font-size: 1rem;
}

.modal-footer {
  border-top: 1px solid #ccc;
  font-size: 1rem;
}

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

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

/* ==========================================================================
   Bootstrap 5 Background Styles
   ========================================================================== */
.bg-light {
  background-color: #F2F6FE !important;
}

.bg-primary-brand {
  background-color: #062F87 !important;
}

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

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

.bg-success {
  background-color: #F5F9E6 !important; 
}

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

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

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

.text-primary {
  color: #325BB2 !important;
}

.text-secondary,
.text-success,
.text-info,
.text-warning,
.text-danger {
  color: #333 !important;
}

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

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

.border-primary {
  border-color: #325BB2 !important;
}

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

.border-light {
  border-color: #ccc !important;
}

.border-dark {
  border-color: #333 !important;
}

.border-tertiary {
  border-color: #B0C9FF !important;
}

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

.border-success {
	background-color: #F5F9E6 !important;
	border-color: #92CD00 !important;
}

.border-info {
	background-color: #F2F6FE !important;
	border-color: #B0C9FF !important; 
}

.border-warning {
	background-color: #FEFDF2 !important;
	border-color: #E3E14A !important; 
}

.border-danger {
	background-color: #FBF2F2 !important;
	border-color: #DD0000 !important; 
}

/* ==========================================================================
   Bootstrap 5 Badge Styles
   Location:
   	- Loan Dashboard
   	- Tasks Page
	- Borrower Message Center
   ========================================================================== */
@media (min-width: 1200px) {
  .badge {
    font-size: 1.15rem;
  }
}

.badge-success {
	color: #2c3e00 !important;
  background-color: #92CD00; 
}

.badge-info {
	color: #333835 !important;
  background-color: #B0C9FF; 
}

/* ==========================================================================
   Added Classes
   ========================================================================== */
/* Goto Step Button Styles */
#GoToStepDropdownMenu .btn-outline-primary {
  color: #007ea8;
  border-color: #007ea8;
}

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

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

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

.accordion.Borrower .AccordionButton {
	font-size: 1.0rem; 
}

.accordion.Borrower .AccordionButton .HeaderIcon {
	margin-right: 10px;
	font-size: 1.0rem; 
}

.accordion.Borrower .AccordionButton h2 {
	font-size: 1.0rem; 
}

.AccordionSmall .AccordionButton {
	font-size: 1.0rem; 
}

.AccordionSmall .HeaderIcon {
	font-size: 1.0rem; 
}

.AccordionListHeader {
	border-color: #777; 
}

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

.product-card__main-icon {
  font-size: 1.15rem; 
}

.product-card__description {
  font-size: 1.0rem; 
}

#gmiForm .is-invalid legend,
#gmiForm .is-invalid label,
#gmiForm .is-invalid p,
#gmiForm .is-invalid span,
#gmiForm .is-invalid small {
  color: #DD0000; 
}

.custom-radio .custom-radio-input:checked ~ .custom-radio-label:after,
.custom-radio .custom-radio-input:not(:checked) ~ .custom-radio-label:after {
  background: #325BB2; 
}

.Toastify {
  font-size: 1.0rem;
}

.Toastify__toast--success {
  background-color: #92CD00; 
}

.Toastify__toast--error {
  background-color: #DD0000; 
}

.Toastify__toast--info {
  background-color: #325BB2; 
}

.Toastify__toast--warning {
  color: #333 !important;
  background-color: #E3E14A; 
}

.navbar{
	padding: 1.45rem 3rem; 
}

.navbar-nav .nav-link {
    padding: 0.5rem;}
.nav-item > a {
  font-size: 1.15rem !important; 
}

#SubNav {
	display: none !important;
}

#BorrowerHeader {
  box-shadow: 1px 1px 6px rgba(0,0,0,0.3);
  border-bottom: transparent !important;
}

#FooterSiteMap {
  display: none;
}

#Footer .container {
  max-width: none;
  padding-top: none !important; 
}

#Footer {
  width: 100%;
  margin: 75px 0 0 0;
  padding: 0;
  background-color: #e4e9f4 !important;
  border-top: none !important;
  border-bottom: 10px solid #062F85; /* must match .bg-primary-brand */ 
}

#footerCopyRight,
#footerCopyRight.col-sm-8.mb-3 {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: unset;
  max-width: unset; 
}

#MortgageFooter {
  width: 100%;
  margin: 0;
  padding: 20px 0 0 0;
  text-align: center; 
}

#FooterFlexBox1 {
  width: 100%;
  margin: 15px auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#FooterFlexBox2 {
	width: 100%;
	max-width: 1200px;
	margin: auto;
	padding: 20px 5% 15px 5%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-transform: uppercase;
	font-size: 0.85rem !important;
}

#Footer .container > p {
  margin: 0;
  width: 100%;
  font-size: 0.9rem;
  text-align: center; 
}

a#SSFCUlink,
#FooterFlexBox1 a,
#FooterFlexBox2 div {
  margin: 5px 12px;
  text-decoration: none;
  padding-bottom: 3px;
  text-align: center; 
}

a#SSFCUlink,
#FooterFlexBox1 a {
  color: #325BB2;
  background-color: transparent;
  padding: 4px 10px;
}

a#SSFCUlink:hover,
#FooterFlexBox1 a:hover {
  color: #fff;
  background-color: #325BB2;
  text-decoration: none; 
}


@media screen and (max-width: 570px){
  a#SSFCUlink,
  #FooterFlexBox1 a {
    padding: 8px;
    font-size: 1.0rem; }

  #FooterFlexBox1, #FooterFlexBox2 {
    flex-direction: column;
  }
}


/* ------------Homepage------- */

.container .jumbotron,
.container-fluid .jumbotron {
    border-radius: 0;
  }

.jumbotron {
  width: 100%;
  padding: 0 !important;
  margin: 0;
  color: unset;
  background-color: transparent;
  background-image: url("/Content/ClientContent/SSFCU/Global/Security-Service-Mortgage-Feels-Like-Home.png") !important;
  background-repeat: no-repeat;
  background-position: top right 18%;
  height: 270px !important; 
}

.jumbotron {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#JumbotronCard {
    background-color: transparent!important;
    border: transparent !important;
  }

#JumbotronCard>div {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  width: 100% !important;
  max-width: unset !important;
}

#JumbotronCard h1 {
  width: 100%;
  max-width: 550px;
  margin: 0 !important;
  color: #fff;
  font-size: 3.50rem;
  line-height: 1.2 !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.45); 
}

@media screen and (max-width: 767px){
  #HomePageContainer h1 {
    text-align: center; 
  }
  #HomePageContainer .mb-3, .my-3 {
    margin-bottom: 0!important; 
  }
}

/*@media screen and (max-width: 1206px){
	.jumbotron{background-position: top right -200px;} }
@media screen and (max-width: 700px){
  .jumbotron{background-position: top right -207px;} }*/

#HomePageContainer>div,
#HomePageContainer h1 {
	margin-bottom: 0 !important; 
}

.homeContent{
	width: 100% !important;
	max-width: 900px !important;
	margin: 0 auto !important;
	padding: 25px 15px 0 15px; 
}

.homeContent {
	font-size: 1.30rem
}

.homeCTA {
	width: 100%;
	max-width: 400px;
	margin: 50px auto 60px auto;
	background-color: #F4F4F4;
	padding: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center; 
}

.homeCTA h2 {
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  line-height: 1 !important; 
}

.homeCTA .btn {
  font-size: 1.2rem;
  margin: 1.5rem auto;
}

.homeCTAlink {
  margin-top: 20px; 
}

p.homeCallUs {
  margin-top: 100px;
  text-align: end; 
}

@media screen and (max-width: 570px){
  p.homeCallUs {
    margin-top: 30px;
    text-align: center; 
  }
}


/* -------------------------- */
#AccountSettings h3.border-bottom {
  margin-top: 30px;
  border-bottom: none !important;
  background-color: #f7f7f7;
  padding: 11px; 
}


/* -------------------------- */
.product-card .bg-primary-brand {
     background-color: #071d49 !important;
}
.card-footer .btn-tertiary {
  color: #fff !important;
  background-color: #325BB2 !important;
  border-color: #325BB2 !important;
  box-shadow: none !important; 
}

.card-footer .btn-tertiary:hover {
  color: #fff !important;
  background-color: #4d4d4d !important;
  border-color: #4d4d4d !important; 
}

.card{
  margin: 10px
 }

.card img {
    height: auto;
    object-fit: cover;
    width: 90%;
    margin: 10px auto;
}

.dropdown-menu {
  font-size: inherit !important;
}

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

.progress-meter--valid {
    background: linear-gradient(90deg, #fd7e14, #062F87); 
}

.btn:focus {
  box-shadow: 0 0 0 0.2rem rgb(0, 0, 0) !important;
}

.radio-table::before {
  top: 0 !important;
}

.radio-table::after {
  top: 0 !important;
}