/* Ligaê QR - visitor calling page. Layout/tokens live in Tailwind (config in
   index.html); this file only holds what utility classes can't express. */

html,
body {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pt-safe {
  padding-top: env(safe-area-inset-top, 0px);
}

/* Each screen renders one wrapper div as #screen's only child - center it
   vertically in the space between header/footer. margin:auto (not
   justify-center on #screen) so a screen taller than the viewport still
   starts at the top and scrolls, instead of clipping off-screen. */
#screen > :only-child {
  margin-top: auto;
  margin-bottom: auto;
}

::-webkit-scrollbar {
  display: none;
}

.hidden {
  display: none !important;
}

video#remoteVideo,
video#localVideo {
  display: block;
}