:root {

  --brand-navy: #0d3b66;

  --brand-teal: #1a6b9a;

  --brand-orange: #e86a1a;

  --brand-orange-dark: #c45512;

  --brand-text: #2b2b2b;

  --brand-muted: #6c757d;

}



.brand-logo {

  height: 36px;

  width: auto;

  max-width: 140px;

  object-fit: contain;

}



.brand-logo-sm {

  height: 24px;

  width: auto;

  max-width: 100px;

  object-fit: contain;

}



.navbar-brand.brand-lockup {

  gap: 0.75rem;

  text-decoration: none;

  color: var(--brand-text);

}



.navbar-brand.brand-lockup:hover {

  color: var(--brand-navy);

}



.brand-product-name {

  display: block;

  font-weight: 700;

  font-size: 1.15rem;

  line-height: 1.1;

  color: var(--brand-navy);

}



.brand-product-tagline {

  display: block;

  font-size: 0.75rem;

  font-weight: 500;

  color: var(--brand-muted);

  line-height: 1.2;

}



.auth-brand {

  text-align: center;

  margin-bottom: 1.5rem;

}



.auth-brand .brand-logo {

  height: 48px;

  margin-bottom: 0.75rem;

}



.auth-brand-product {

  font-size: 1.5rem;

  font-weight: 700;

  color: var(--brand-navy);

  margin: 0;

}



.auth-brand-tagline {

  color: var(--brand-muted);

  margin: 0.25rem 0 0;

  font-size: 0.95rem;

}



.auth-brand-byline {

  margin-top: 0.75rem;

  font-size: 0.8rem;

  color: var(--brand-muted);

}



.auth-brand-byline a {

  color: var(--brand-teal);

  text-decoration: none;

}



.auth-brand-byline a:hover {

  color: var(--brand-orange);

  text-decoration: underline;

}



.site-footer {

  line-height: 1.5;

  padding: 0.75rem 0;

  white-space: normal;

}



.site-footer-version {
  display: block;
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 0.15rem;
}

@media (min-width: 576px) {
  .site-footer-version {
    display: inline;
    margin-top: 0;
    margin-left: 0.5rem;
  }
}

.site-footer a {

  color: var(--brand-teal);

  text-decoration: none;

}



.site-footer a:hover {

  color: var(--brand-orange);

  text-decoration: underline;

}



.btn-primary {

  background-color: var(--brand-navy);

  border-color: var(--brand-navy);

}



.btn-primary:hover,

.btn-primary:focus {

  background-color: var(--brand-teal);

  border-color: var(--brand-teal);

}



a {

  color: var(--brand-teal);

}



a:hover {

  color: var(--brand-orange-dark);

}