/* member-viewport-v2: contain scrolling; the menu and footer share a normal flex layout. */
html.member-viewport-document,
html.member-viewport-document body,
html.member-viewport-document #app {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  overscroll-behavior-y: none;
}

.app-wrapper.member-viewport-frame {
  display: flex;
  flex-direction: column;
  height: var(--member-frame-height, 100%) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.app-wrapper > .page-container.member-viewport-container {
  position: relative !important;
  inset: auto !important;
  flex: 1 1 0%;
  min-height: 0 !important;
  height: auto !important;
  order: 1;
  padding-bottom: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  will-change: auto !important;
  transform: none !important;
  transition: none !important;
}

.member-viewport-container > .member-new-page.member-viewport-layout {
  --member-layout-version: member-viewport-v2;
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  padding-bottom: 20px !important;
  box-sizing: border-box;
}

.app-wrapper.member-viewport-frame > .v5-footer.member-viewport-footer {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto;
  order: 2;
  /* Keep the full navigation height in addition to the home-indicator inset. */
  height: 71px !important;
  height: calc(71px + constant(safe-area-inset-bottom)) !important;
  height: calc(71px + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: 0 !important;
  padding-bottom: constant(safe-area-inset-bottom) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  box-sizing: border-box;
}