/* Keep the pharmacy sidebar flush with the visible browser viewport. */

@media (min-width: 821px) {
  html,
  body,
  #app,
  .app-shell.mrph-medcore-layout {
    min-height: var(--mrph-visible-viewport-height, 100dvh) !important;
  }

  .app-shell.mrph-medcore-layout {
    align-items: start !important;
  }

  #sidebar.sidebar.mrph-medcore-sidebar {
    position: sticky !important;
    top: 0 !important;
    bottom: auto !important;
    align-self: start !important;
    height: var(--mrph-visible-viewport-height, 100dvh) !important;
    min-height: var(--mrph-visible-viewport-height, 100dvh) !important;
    max-height: var(--mrph-visible-viewport-height, 100dvh) !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }
}

@media (max-width: 820px) {
  #sidebar.sidebar {
    height: var(--mrph-visible-viewport-height, 100dvh) !important;
    min-height: var(--mrph-visible-viewport-height, 100dvh) !important;
    max-height: var(--mrph-visible-viewport-height, 100dvh) !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
  }
}