html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body {
  position: relative;
}

body.menu-open {
  overflow: hidden;
}

main,
.wrap,
.page,
.grid,
.card,
.summaryGrid,
.metaGrid,
.formGrid,
.touchGrid,
.phonesPanel,
.phoneRow,
.addressRow,
.row,
.bar,
.brand,
.queueSectionHead,
.queueSectionFooter {
  min-width: 0;
}

main,
.page,
.card,
.modalCard,
.summaryCard {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

.controls > *,
.topbar > *,
#day,
input[type="date"],
input[type="search"] {
  min-width: 0;
  max-width: 100%;
}

#day,
input[type="date"] {
  width: 100%;
  display: block;
  appearance: none;
  -webkit-appearance: none;
}

main,
.page {
  touch-action: pan-y pinch-zoom;
}

@media (max-width: 980px) {
  .wrap {
    grid-template-columns: 1fr !important;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  aside {
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(82vw, 320px) !important;
    max-width: calc(100vw - 44px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  main {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .page {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-inline: 14px !important;
    overflow-x: hidden;
  }

  .bar {
    width: 100%;
    max-width: 100%;
    padding-inline: 14px !important;
  }
}

@media (max-width: 640px) {
  .page {
    padding: 14px 12px 18px !important;
  }

  .summaryGrid,
  .metaGrid,
  .formGrid,
  .touchGrid {
    grid-template-columns: 1fr !important;
  }

  .phoneRow,
  .addressRow,
  .row,
  .queueSectionHead,
  .queueSectionFooter {
    grid-template-columns: 1fr !important;
  }

  .phonePrimary,
  .addressPrimary,
  .phoneRemove,
  .addressMaps,
  .addressRemove {
    width: 100%;
  }

  .modalCard {
    width: min(94vw, 560px) !important;
    max-width: 94vw !important;
    margin: 0 auto;
  }
}