@scope (#reservationApp) {
  :scope.availability-check-app { text-align: left; }
  .availabilityHero { padding-bottom: 44px; }
  .availabilityHero h1,
  .availabilityHero p,
  .checkMain,
  .checkMain .heading,
  .checkMain .heading h2,
  .checkMain .heading p { text-align: left !important; }
  .checkMain { padding-top: 48px; }
  .availabilityLegend { justify-content: flex-start; }
  .availabilityMark {
    display: grid;
    place-items: center;
    width: 100%;
    height: 48px;
    color: var(--green);
    font-weight: bold;
    user-select: none;
  }
  .availabilityMark.busy,
  .availabilityMark.hold { background: #f5f6f5; color: #97a39f; }
  .csvUpdatedAt { margin: 6px 4px 0; color: #99a5a1; font-size: 10px; line-height: 1.4; text-align: right; }
  .availabilityNote { margin: 14px 3px 0; color: var(--muted); font-size: 11px; text-align: left; }
  #loading { min-height: 150px; }

  @media (max-width: 850px) {
    .availabilityHero { padding-bottom: 34px; }
    .checkMain { padding-top: 38px; }
  }

  @media (max-width: 560px) {
    .availabilityHero { padding-bottom: 30px; }
    .availabilityHero h1 { font-size: 34px; }
    .checkMain { padding-top: 32px; }
    .availabilityMark { height: 46px; }
  }
}