/*
 * Side-by-side authentication pages keep the visual panel fixed while only
 * the form panel scrolls. Scrollbars are hidden without disabling scrolling.
 */
html,
body {
  height: 100%;
  overflow: hidden;
}

.split-wrap {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.split-wrap > .left-pane,
.split-wrap > .right-pane {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}

.split-wrap > .left-pane {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/*
 * This spacer is part of the scrollable content, so it remains visible at the
 * furthest scroll position instead of being consumed by the panel's fixed box.
 */
.split-wrap > .left-pane > .auth-card::after {
  display: block;
  height: max(88px, calc(64px + env(safe-area-inset-bottom)));
  content: "";
}

.split-wrap > .left-pane::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.split-wrap > .right-pane {
  overflow: hidden;
}

@media (max-width: 991px) {
  .split-wrap > .left-pane {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }
}