:root{
  --efuel-safe-top:env(safe-area-inset-top, 0px);
  --efuel-safe-right:env(safe-area-inset-right, 0px);
  --efuel-safe-bottom:env(safe-area-inset-bottom, 0px);
  --efuel-safe-left:env(safe-area-inset-left, 0px);
}

html.is-pwa-standalone{
  background:#020617;
}

html.is-pwa-standalone body{
  box-sizing:border-box;
  padding-top:var(--efuel-safe-top)!important;
  padding-left:var(--efuel-safe-left)!important;
  padding-right:var(--efuel-safe-right)!important;
  min-height:100dvh;
  overflow-x:hidden;
}

html.is-pwa-standalone .top,
html.is-pwa-standalone .header-card,
html.is-pwa-standalone .admin-topbar,
html.is-pwa-standalone header{
  scroll-margin-top:var(--efuel-safe-top);
}

html.is-pwa-standalone .overlay,
html.is-pwa-standalone .modal,
html.is-pwa-standalone .drawer,
html.is-pwa-standalone .mini-modal{
  box-sizing:border-box!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:100vw!important;
  max-height:100dvh!important;
  overflow:hidden!important;
  padding:
    max(8px, var(--efuel-safe-top))
    max(8px, var(--efuel-safe-right))
    max(8px, var(--efuel-safe-bottom))
    max(8px, var(--efuel-safe-left))!important;
}

html.is-pwa-standalone .modal.open,
html.is-pwa-standalone .drawer.open,
html.is-pwa-standalone .mini-modal.open,
html.is-pwa-standalone .overlay.open{
  align-items:flex-start!important;
  justify-content:center!important;
}

html.is-pwa-standalone .modal .sheet,
html.is-pwa-standalone .drawer .sheet,
html.is-pwa-standalone .modal .box,
html.is-pwa-standalone .mini-modal .box,
html.is-pwa-standalone .overlay .box{
  box-sizing:border-box!important;
  width:min(100%, calc(100vw - var(--efuel-safe-left) - var(--efuel-safe-right) - 16px))!important;
  max-width:calc(100vw - var(--efuel-safe-left) - var(--efuel-safe-right) - 16px)!important;
  max-height:calc(100dvh - var(--efuel-safe-top) - var(--efuel-safe-bottom) - 16px)!important;
  margin:0!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

html.is-pwa-standalone .modal .sheet-head,
html.is-pwa-standalone .drawer .sheet-head,
html.is-pwa-standalone .mini-modal-head,
html.is-pwa-standalone .modal .box > .row:first-child{
  position:sticky;
  top:0!important;
  z-index:20;
  overflow:visible!important;
  padding-right:58px!important;
}

html.is-pwa-standalone .modal.open .sheet-head .icon-btn,
html.is-pwa-standalone .drawer.open .sheet-head .icon-btn{
  position:absolute!important;
  top:50%!important;
  right:10px!important;
  z-index:9999!important;
  display:grid!important;
  place-items:center!important;
  visibility:visible!important;
  opacity:1!important;
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  padding:0!important;
  border-radius:999px!important;
  pointer-events:auto!important;
  transform:translateY(-50%)!important;
  flex:0 0 40px!important;
}

html.is-pwa-standalone .modal .sheet-body,
html.is-pwa-standalone .drawer .sheet-body,
html.is-pwa-standalone .mini-modal .box > form{
  box-sizing:border-box;
  min-width:0;
}

@media (max-width:760px), (pointer:coarse){
  html.is-pwa-standalone .modal,
  html.is-pwa-standalone .drawer,
  html.is-pwa-standalone .mini-modal,
  html.is-pwa-standalone .overlay{
    padding:
      max(6px, var(--efuel-safe-top))
      max(6px, var(--efuel-safe-right))
      max(6px, var(--efuel-safe-bottom))
      max(6px, var(--efuel-safe-left))!important;
  }

  html.is-pwa-standalone .modal .sheet,
  html.is-pwa-standalone .drawer .sheet,
  html.is-pwa-standalone .modal .box,
  html.is-pwa-standalone .mini-modal .box,
  html.is-pwa-standalone .overlay .box{
    border-radius:14px!important;
    max-width:calc(100vw - var(--efuel-safe-left) - var(--efuel-safe-right) - 12px)!important;
    max-height:calc(100dvh - var(--efuel-safe-top) - var(--efuel-safe-bottom) - 12px)!important;
  }

  html.is-pwa-standalone .modal.open .sheet-head .icon-btn,
  html.is-pwa-standalone .drawer.open .sheet-head .icon-btn{
    top:50%!important;
    right:8px!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    transform:translateY(-50%)!important;
  }
}