@media (min-width: 576px) {
  html {
    scrollbar-gutter: stable both-edges;
  }
}

header img.banner {
  object-fit: cover;
  height: 7rem;
  width: 100%;
}

@media (min-width: 576px) {
  header img.banner {
    height: 8rem;
  }
}

@media (min-width: 768px) {
  header img.banner {
    height: 9.5rem;
  }
}

@media (min-width: 992px) {
  header img.banner {
    height: 100%;
  }
}

header img.logo {
  height: 2rem;
}

@media (min-width: 576px) {
  #loginForm {
    width: 25rem;
  }
}

nav#steps {
  margin-top: -1rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 992px) {
  nav#steps>a.nav-link:not(:only-child):first-child {
    box-shadow: inset -1px 0 0 0 #e9ecef;
  }

  nav#steps>a.nav-link:not(:only-child) {
    box-shadow: inset 1px 0 0 0 #e9ecef, inset -1px 0 0 0 #e9ecef;
  }

  nav#steps>a.nav-link:not(:only-child):last-child {
    box-shadow: inset 1px 0 0 0 #e9ecef;
  }
}

nav#steps>a.nav-link {
  border-bottom: 4px solid #dee2e6;
}

nav#steps>a.nav-link.active {
  border-bottom-color: #dc3545;
}

nav#steps>a.nav-link:is(:focus, :hover) {
  background-color: #f9fafb;
  border-bottom-color: #e35d6a;
}

nav#steps>a.nav-link>span {
  column-gap: 0.5rem;
}

[data-ri-requires].disabled>label {
  opacity: 0.5;
}

span.material-icons {
  display: inline;
  vertical-align: middle;
}

.text-spanish {
  color: #4472c4;
}

.text-separator {
  color: #6c757d;
  font-weight: 300;
}

.text-english {
  color: #c00000;
  font-style: italic !important;
}

.text-required {
  color: #ff0000;
  font-weight: 700;
  padding-left: 0.15rem;
  padding-right: 0.15rem;
  cursor: help;
}

:is(.form-text, .invalid-feedback, .alert, .btn, .tooltip, .toast) :is(.text-spanish, .text-separator, .text-english),
:not(nav#steps)>a :is(.text-spanish, .text-separator, .text-english) {
  color: inherit;
}

div.cke.is-invalid {
  border-color: #dc3545;
}

div.cke.cke_focus.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%);
}

.btn-red {
  color: #fff;
  background-color: #ee1d00;
  border-color: #ee1d00;
}

.btn-red:hover {
  color: #fff;
  background-color: #d21b00;
  border-color: #c71b00;
}

.btn-check:focus+.btn-red,
.btn-red:focus {
  color: #fff;
  background-color: #d21b00;
  border-color: #c71b00;
  box-shadow: 0 0 0 0.25rem rgba(202, 25, 0, 0.5);
}

.btn-check:checked+.btn-red,
.btn-check:active+.btn-red,
.btn-red:active,
.btn-red.active,
.show>.btn-red.dropdown-toggle {
  color: #fff;
  background-color: #f14a33;
  border-color: #c71b00;
}

.btn-check:checked+.btn-red:focus,
.btn-check:active+.btn-red:focus,
.btn-red:active:focus,
.btn-red.active:focus,
.show>.btn-red.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(202, 25, 0, 0.5);
}

.btn-red:disabled,
.btn-red.disabled {
  color: #fff;
  background-color: #ee1d00;
  border-color: #ee1d00;
}

/* Light Button */
.btn-light {
  color: #000;
  background-color: #efefef;
  border-color: #efefef;
}

.btn-light:hover {
  color: #000;
  background-color: #f1f1f1;
  border-color: #f1f1f1;
}

.btn-check:focus+.btn-light,
.btn-light:focus {
  color: #000;
  background-color: #f1f1f1;
  border-color: #f1f1f1;
  box-shadow: 0 0 0 0.25rem rgba(203, 203, 203, 0.5);
}

.btn-check:checked+.btn-light,
.btn-check:active+.btn-light,
.btn-light:active,
.btn-light.active,
.show>.btn-light.dropdown-toggle {
  color: #000;
  background-color: #f2f2f2;
  border-color: #f1f1f1;
}

.btn-check:checked+.btn-light:focus,
.btn-check:active+.btn-light:focus,
.btn-light:active:focus,
.btn-light.active:focus,
.show>.btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(203, 203, 203, 0.5);
}

.btn-light:disabled,
.btn-light.disabled {
  color: #000;
  background-color: #efefef;
  border-color: #efefef;
}

/* ===== Forms ===== */
label.form-label {
  font-weight: 700;
}

.form-control.readonly {
  background-color: #e9ecef;
  opacity: 1;
}

.form-control.readonly>ul {
  margin-bottom: 0;
}

/* ===== Material Icons ===== */

/* Rules for sizing the icon. */
.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-48 {
  font-size: 48px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
  color: rgba(0, 0, 0, 0.54);
}

.material-icons.md-dark.md-inactive {
  color: rgba(0, 0, 0, 0.26);
}

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
  color: rgba(255, 255, 255, 1);
}

.material-icons.md-light.md-inactive {
  color: rgba(255, 255, 255, 0.3);
}

.toast-header .material-icons {
  font-size: 20px;
}