.service-state {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(21, 39, 44, .16);
  border-radius: 18px;
  display: flex;
  gap: 14px;
  margin: 24px 0;
  padding: 18px;
}

.service-state-dot {
  background: #8a6b00;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #8a6b00;
  flex: 0 0 16px;
  height: 16px;
  width: 16px;
}

.service-state[data-state="available"] .service-state-dot {
  background: #167044;
  box-shadow: 0 0 0 2px #167044;
}

.service-state[data-state="unavailable"] .service-state-dot {
  background: #a32921;
  box-shadow: 0 0 0 2px #a32921;
}

.service-state strong,
.service-state span {
  display: block;
}

.service-state span {
  color: #435357;
  font-size: .92rem;
  margin-top: 3px;
}

.service-table {
  border-collapse: collapse;
  margin: 18px 0 28px;
  width: 100%;
}

.service-table caption {
  font-weight: 700;
  margin-bottom: 10px;
  text-align: left;
}

.service-table th,
.service-table td {
  border-bottom: 1px solid rgba(21, 39, 44, .18);
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}

.service-table th {
  color: #243b40;
}

.document-note {
  background: #fff8df;
  border-left: 4px solid #8a6b00;
  border-radius: 8px;
  margin: 18px 0;
  padding: 14px 16px;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #125e69;
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .service-table {
    display: block;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .service-state-dot {
    forced-color-adjust: none;
  }
}