/* Keep transformed mobile drawers out of the Android WebView scroll geometry. */
@media (max-width:980px) {
  html,
  body {
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden !important;
    overscroll-behavior-x:none;
  }

  body:not([data-route="/login.php"]):not([data-route="/register.php"]) .sx-app,
  body:not([data-route="/login.php"]):not([data-route="/register.php"]) .sx-shell,
  body:not([data-route="/login.php"]):not([data-route="/register.php"]) .sx-content {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-inline:0 !important;
  }

  body:not([data-route="/login.php"]):not([data-route="/register.php"]) .sx-app {
    position:relative;
    overflow-x:clip;
  }

  body:not([data-route="/login.php"]):not([data-route="/register.php"]) .sx-shell {
    position:relative;
    transform:none !important;
  }

  body:not([data-route="/login.php"]):not([data-route="/register.php"]) .sx-sidebar {
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;
    width:min(330px,88vw) !important;
    max-width:88vw !important;
    height:100dvh;
    margin:0 !important;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transform:translate3d(100%,0,0) !important;
    transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .18s ease,visibility 0s linear .25s !important;
    contain:layout paint;
    will-change:transform;
  }

  body.menu-open:not([data-route="/login.php"]):not([data-route="/register.php"]) {
    overflow:hidden !important;
    touch-action:none;
  }

  body.menu-open:not([data-route="/login.php"]):not([data-route="/register.php"]) .sx-sidebar {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:translate3d(0,0,0) !important;
    transition-delay:0s !important;
    touch-action:pan-y;
  }

  body:not([data-route="/login.php"]):not([data-route="/register.php"]) .sx-menu-scrim {
    position:fixed !important;
    z-index:75 !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    margin:0 !important;
  }

  body:not(.menu-open) .sx-menu-scrim {
    display:none !important;
    pointer-events:none !important;
  }

  img,
  video,
  iframe,
  canvas,
  svg {
    max-width:100%;
  }
}