/*
 * Secure 1003 site styles, layered on Bootstrap 5.3.8 (css/bootstrap-5.3.8.min.css).
 * Replaces styler.css, css/style.css and css/responsive.css from the Bootstrap 2 layout.
 */

:root {
  --site-accent: #22a0f8;
  --site-accent-hover: #0066ff;
  --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bs-link-color-rgb: 34, 160, 248;
  --bs-link-hover-color-rgb: 0, 102, 255;
}

/* Links: the site's accent colour, bold, not underlined. */
a {
  font-weight: bold;
  text-decoration: none;
}

.accent_color {
  color: var(--site-accent);
}

/* Headings stay bold, as in the Bootstrap 2 layout (Bootstrap 5 uses 500). */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
}

/* ---- Header ---------------------------------------------------------- */
.site-header {
  box-shadow: 0 4px 3px -3px #dddddd;
}

.site-header .logo img {
  max-width: 100%;
  height: auto;
}

.site-header .phone {
  font-size: 18px;
}

.site-header .shield img {
  width: 40px;
}

/* Footer with the lender's details (loanofficerlogin.php). */
.site-footer {
  box-shadow: 0 -2px 4px 0 #dddddd;
  margin-top: 30px;
}

/* ---- Side menu (navmenu.php) ---------------------------------------- */
.menu p {
  font-size: 16px;
  line-height: 30px;
}

.menu span {
  font-weight: bold;
}

.navm_td {
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 30px;
  padding-top: 30px;
}

.navm_link {
  display: block;
  line-height: 30px;
  position: relative;
  padding-right: 32px;
}

.navm_link::after {
  content: '';
  position: absolute;
  right: 0;
  width: 30px;
  height: 30px;
  background-image: url('../Images/c_next@2x.png');
  background-size: cover;
}

.navm_td h5 {
  margin-top: 0;
  word-break: break-all;
}

/* ---- Landing page (index.php) ------------------------------------------ */
.landing-box {
  min-height: 22rem;
}
.btn-big {
  --bs-btn-padding-x: 18px;
  --bs-btn-padding-y: 15px;
  --bs-btn-font-size: 18px;
  --bs-btn-font-weight: 700;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.btn-big.blue {
  --bs-btn-bg: #0d212e;
  --bs-btn-border-color: #0d212e;
  --bs-btn-hover-bg: #303f46;
  --bs-btn-hover-border-color: #303f46;
  --bs-btn-active-bg: #303f46;
  --bs-btn-active-border-color: #303f46;
}

.btn-big.green {
  --bs-btn-bg: var(--site-accent);
  --bs-btn-border-color: var(--site-accent);
  --bs-btn-hover-bg: #2092e1;
  --bs-btn-hover-border-color: #2092e1;
  --bs-btn-active-bg: #2092e1;
  --bs-btn-active-border-color: #2092e1;
}

/* ---- Forms ----------------------------------------------------------- */
/* Bootstrap's default checkbox/radio border (#dee2e6) almost vanishes on the bg-light cards. */
.form-check-input {
  border-color: #adb5bd;
}

/* Messages written by jquery.validate.unobtrusive (and the PHP pages) under a field. */
.field-validation-error {
  display: block;
  width: 100%;
  margin-top: .25rem;
  font-size: .875em;
  color: var(--bs-form-invalid-color);
}

/* Fields flagged by jquery.validate.unobtrusive get Bootstrap's invalid look. */
.form-control.input-validation-error,
.form-select.input-validation-error,
.form-check-input.input-validation-error {
  border-color: var(--bs-form-invalid-border-color);
}

/* While focused, a field that fails its HTML constraints (e.g. required and empty) glows red
   instead of blue, for text boxes, selects, checkboxes and radio buttons alike. */
.form-control:focus:invalid,
.form-select:focus:invalid,
.form-check-input:focus:invalid,
.form-control.input-validation-error:focus,
.form-select.input-validation-error:focus,
.form-check-input.input-validation-error:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
}

/* Section headings inside a form card. */
.form-section-title {
  margin-top: .5rem;
  margin-bottom: 1rem;
}

/* Narrow inputs for short values (unit numbers, zip codes, years and months). */
.input-xs {
  max-width: 7rem;
}

.input-sm-group {
  max-width: 10rem;
}

.input-zip-group {
  max-width: 14rem;
}

/* "Government monitoring" option columns on 8-government.php. */
.gov {
  float: left;
  margin-right: 8px;
}