html {
  -webkit-text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[dir='rtl'] body {
  direction: rtl;
}

html[dir='ltr'] body {
  direction: ltr;
}

#root,
#root > div {
  min-height: 100dvh;
}

#alosim-top-bar {
  padding-top: env(safe-area-inset-top, 0px);
}

#alosim-drawer-panel {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

#alosim-flow-sheet {
  display: flex !important;
  flex-direction: column !important;
  max-height: min(920px, calc(100dvh - env(safe-area-inset-top, 0px))) !important;
  height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px))) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

#alosim-flow-scroll,
#alosim-flow-plans {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 430px) {
  #alosim-top-bar {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 360px) {
  #alosim-top-bar {
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 900px) {
  #alosim-flow-sheet {
    border-top-left-radius: 28px !important;
    border-top-right-radius: 28px !important;
  }
}