html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

header .usa-navbar {
  justify-content: space-between;
  height: 70px;
}

header .usa-navbar .usa-menu-btn {
  height: 100%;
}

header .usa-navbar .usa-logo {
  max-width: 125px;
  /*height: 70px;*/
}

.safe-and-secure {
  display: flex;
  align-items: center;
  margin: 0.5rem 0;
}

.need-help-container {
  background-color: #f3bd03;
  min-height: 100px;
  max-width: 100vw;
}

.need-help-container .need-help-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem 0;
}

.need-help-container .need-help-item a {
  text-align: center;
}

.need-help-container .need-help-item a img {
  max-width: 120px;
}

ul.fieldset-validation-errors {
  list-style: none;
  /*padding-left: 0;*/
  /*margin-top: 0.5rem;*/
}

footer.usa-footer,
footer.usa-footer .usa-footer__primary-section,
footer.usa-footer .usa-footer__secondary-section {
  background-color: #00A4A5;
}

nav.usa-footer__nav {
  max-width: 80%;
  width: 80%;
}

footer .usa-footer__primary-container {
  max-width: 80%;
  justify-content: center;
}

footer a {
  color: #000000;
}

footer .dc-mayor-logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer .dc-mayor-logo-wrapper img {
  max-width: 90%;
}

footer .dc-mayor-logo-wrapper a {
  margin: 1rem auto;
}

@media screen and (max-width: 640px) {
  footer li {
    text-align: center;
    margin: 0.5rem 0;
  }
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  display: none;
  justify-content: center;
  align-items: center;
}

.loading-overlay svg {
  max-width: 100px;
  overflow: visible;
}

.loading-overlay .spinner {
  max-width: 100px;
  fill: none; /* Make the circle hollow */
  stroke: #e52207; /* Choose a color for the stroke */
  stroke-width: 8px; /* Set the thickness of the stroke */
  stroke-dasharray: 283; /* Make the circle incomplete */
  stroke-dashoffset: 0;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  animation: spinner-animation 2s linear infinite; /* Apply the animation */
}

.loading-overlay.loading-overlay--visible {
  display: flex;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@keyframes spinner-animation {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}