@media(max-width:900px){
  #main-nav.vx-mobile-body-drawer{
    width:min(82vw,330px)!important;
    min-width:236px!important;
    max-width:330px!important;
    padding:calc(18px + env(safe-area-inset-top,0px)) 14px calc(20px + env(safe-area-inset-bottom,0px))!important;
    border-radius:0 28px 28px 0!important;
    touch-action:pan-y!important;
    overscroll-behavior:contain!important;
  }

  #main-nav.vx-mobile-body-drawer .vx-drawer-brand-dynamic{
    min-height:64px!important;
    gap:11px!important;
    margin-bottom:8px!important;
    padding:4px 4px 13px!important;
  }

  #main-nav.vx-mobile-body-drawer .vx-drawer-brand-mark{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
  }

  #main-nav.vx-mobile-body-drawer .vx-drawer-brand-word{
    font-size:20px!important;
    letter-spacing:3.5px!important;
  }

  #main-nav.vx-mobile-body-drawer .vx-drawer-brand-close{
    width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
    border-radius:11px!important;
    font-size:20px!important;
  }

  #main-nav.vx-mobile-body-drawer > a,
  #main-nav.vx-mobile-body-drawer .vx-mobile-nav-tools > a{
    min-height:48px!important;
    height:auto!important;
    padding:0 42px 0 48px!important;
    border-radius:15px!important;
    font-size:14px!important;
    line-height:1.15!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:left!important;
    white-space:nowrap!important;
    position:relative!important;
    overflow:hidden!important;
  }

  #main-nav.vx-mobile-body-drawer > a::before,
  #main-nav.vx-mobile-body-drawer .vx-mobile-nav-tools > a::before{
    content:""!important;
    position:absolute!important;
    left:12px!important;
    top:50%!important;
    width:25px!important;
    height:25px!important;
    min-width:25px!important;
    flex-basis:25px!important;
    transform:translateY(-50%)!important;
    display:grid!important;
    place-items:center!important;
    border-radius:10px!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    text-indent:-9999px!important;
    overflow:hidden!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:15px 15px!important;
  }

  #main-nav.vx-mobile-body-drawer a[data-page="home"]::before,
  #main-nav.vx-mobile-body-drawer a[data-page="market"]::before,
  #main-nav.vx-mobile-body-drawer a[data-page="trade"]::before,
  #main-nav.vx-mobile-body-drawer a[data-page="contract"]::before,
  #main-nav.vx-mobile-body-drawer a[data-page="assets"]::before,
  #main-nav.vx-mobile-body-drawer a[data-page="orders"]::before,
  #main-nav.vx-mobile-body-drawer a[data-page="profile"]::before,
  #main-nav.vx-mobile-body-drawer a[data-page="news"]::before,
  #main-nav.vx-mobile-body-drawer a[data-page="about"]::before{
    content:""!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    text-indent:-9999px!important;
    speak:none!important;
  }

  #main-nav.vx-mobile-body-drawer .vx-mobile-nav-tools{
    gap:6px!important;
    margin-top:8px!important;
    padding-top:12px!important;
  }

  #vx-mobile-drawer-mask-final{
    background:rgba(1,10,12,.30)!important;
    backdrop-filter:blur(1.5px) saturate(108%)!important;
    -webkit-backdrop-filter:blur(1.5px) saturate(108%)!important;
  }
}

@media(max-width:360px){
  #main-nav.vx-mobile-body-drawer{
    width:min(84vw,286px)!important;
    min-width:224px!important;
    max-width:286px!important;
  }

  #main-nav.vx-mobile-body-drawer .vx-drawer-brand-word{
    font-size:18px!important;
    letter-spacing:2.8px!important;
  }

  #main-nav.vx-mobile-body-drawer > a,
  #main-nav.vx-mobile-body-drawer .vx-mobile-nav-tools > a{
    min-height:45px!important;
    font-size:13px!important;
  }
}

.vx-page-transition-mask{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 38%,rgba(39,230,211,.12),transparent 34%),
    rgba(2,8,12,.56);
  backdrop-filter:blur(0px) saturate(110%);
  -webkit-backdrop-filter:blur(0px) saturate(110%);
  transition:opacity .22s ease,visibility .22s ease,backdrop-filter .22s ease,-webkit-backdrop-filter .22s ease;
}

.vx-page-transition-mask.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  backdrop-filter:blur(7px) saturate(122%);
  -webkit-backdrop-filter:blur(7px) saturate(122%);
}

.vx-page-transition-card{
  display:none!important;
}

.vx-page-transition-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#27e6d3;
  box-shadow:0 0 0 7px rgba(39,230,211,.10),0 0 18px rgba(39,230,211,.56);
  animation:vxPageTransitionPulse 1.05s ease-in-out infinite;
}

body.vx-page-transitioning .page.active{
  animation:vxPageSoftRefresh .28s ease both;
}

@keyframes vxPageTransitionPulse{
  0%,100%{transform:scale(.88);opacity:.62}
  50%{transform:scale(1.08);opacity:1}
}

@keyframes vxPageSoftRefresh{
  from{opacity:.82;filter:saturate(.94)}
  to{opacity:1;filter:saturate(1)}
}

@media(prefers-reduced-motion:reduce){
  .vx-page-transition-mask,
  .vx-page-transition-card,
  body.vx-page-transitioning .page.active{
    transition:none!important;
    animation:none!important;
  }
}
