/* timezone-select.css -- the manual timezone override tucked into the
   footer's bottom bar (footer.html's .sm-tz-select--footer). Auto-detect
   is applied silently by default (see timezone-select.js); this is only
   there for the cases auto-detect gets wrong or a visitor deliberately
   wants a different zone, so it's kept low-profile rather than living in
   the nav. See get_form_data.py/makeHTML_unified_v23.py's
   render_matchup_datetime() and soccer/data.py's format_kickoff() for the
   server side. */

.sm-tz-select--footer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.sm-tz-select--footer label {
  color: #9fb3cc;
}

.sm-tz-select--footer .sm-tz-select__input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(159, 179, 204, 0.5);
  color: #dbe6f3;
  font-family: inherit;
  font-size: inherit;
  padding: 0 2px 1px;
  cursor: pointer;
  max-width: 168px;
}

.sm-tz-select--footer .sm-tz-select__input:hover,
.sm-tz-select--footer .sm-tz-select__input:focus-visible {
  border-bottom-color: var(--sm-color-brand-accent, #00b4d8);
  outline: none;
}

.sm-tz-select--footer .sm-tz-select__input option {
  color: #13233a;
  background: #ffffff;
}

@media (max-width: 720px) {
  .sm-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 0;
  }

  .sm-tz-select--footer {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
  }
}