@media(max-width:900px){
  .vx-header-tools > a.vx-tool-icon[data-page="profile"]{
    transition:
      transform .22s cubic-bezier(.2,.8,.2,1),
      border-color .22s ease,
      background .22s ease,
      box-shadow .22s ease,
      color .22s ease!important;
    will-change:transform;
  }

  .vx-header-tools > a.vx-tool-icon[data-page="profile"]:active{
    transform:scale(.94)!important;
  }

  body.vx-mobile-account-open .vx-header-tools > a.vx-tool-icon[data-page="profile"]{
    color:#efffff!important;
    border-color:rgba(53,229,212,.54)!important;
    background:
      radial-gradient(circle at 48% 18%,rgba(53,229,212,.28),transparent 42%),
      linear-gradient(145deg,rgba(23,51,52,.98),rgba(8,15,19,.96))!important;
    box-shadow:
      0 0 0 1px rgba(53,229,212,.10),
      0 14px 32px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.08)!important;
    transform:translateY(-1px)!important;
  }

  #vx-mobile-account-panel{
    transform-origin:calc(100% - 38px) 0!important;
    transition:
      opacity .26s cubic-bezier(.2,.8,.2,1),
      transform .26s cubic-bezier(.2,.8,.2,1),
      visibility .26s step-end!important;
    will-change:opacity,transform;
  }

  body.vx-mobile-account-open #vx-mobile-account-panel{
    transition:
      opacity .26s cubic-bezier(.2,.8,.2,1),
      transform .26s cubic-bezier(.2,.8,.2,1),
      visibility .01s step-start!important;
    animation:vxMobileAccountPanelIn .28s cubic-bezier(.2,.8,.2,1) both!important;
  }

  body:not(.vx-mobile-account-open) #vx-mobile-account-panel{
    animation:vxMobileAccountPanelOut .18s ease both;
  }

  .vx-mobile-account-head,
  .vx-mobile-account-grid,
  .vx-mobile-account-action{
    transition:opacity .24s ease,transform .24s ease!important;
  }

  body.vx-mobile-account-open .vx-mobile-account-head{
    animation:vxMobileAccountItemIn .22s .04s ease both!important;
  }

  body.vx-mobile-account-open .vx-mobile-account-grid{
    animation:vxMobileAccountItemIn .22s .08s ease both!important;
  }

  body.vx-mobile-account-open .vx-mobile-account-action{
    animation:vxMobileAccountItemIn .22s .12s ease both!important;
  }

  .order-modal-mask[style*="flex"] .order-modal,
  .login-modal-mask[style*="flex"] .login-modal,
  .contract-modal-mask.is-open .contract-modal{
    animation:vxMobilePopupRise .24s cubic-bezier(.2,.8,.2,1) both!important;
  }

  .order-modal-mask[style*="flex"],
  .login-modal-mask[style*="flex"],
  .contract-modal-mask.is-open{
    animation:vxMobilePopupFade .18s ease both!important;
  }
}

@keyframes vxMobileAccountPanelIn{
  from{opacity:0;transform:translateY(-12px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes vxMobileAccountPanelOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(-8px) scale(.975)}
}

@keyframes vxMobileAccountItemIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes vxMobilePopupFade{
  from{opacity:.78}
  to{opacity:1}
}

@keyframes vxMobilePopupRise{
  from{opacity:0;transform:translateY(14px) scale(.975)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media(prefers-reduced-motion:reduce){
  #vx-mobile-account-panel,
  .vx-header-tools > a.vx-tool-icon[data-page="profile"],
  .vx-mobile-account-head,
  .vx-mobile-account-grid,
  .vx-mobile-account-action,
  .order-modal,
  .login-modal,
  .contract-modal{
    transition:none!important;
    animation:none!important;
  }
}

@media(max-width:900px){
  #vx-mobile-account-panel{
    top:calc(66px + env(safe-area-inset-top,0px))!important;
    left:12px!important;
    right:12px!important;
    max-height:calc(100dvh - 86px - env(safe-area-inset-top,0px))!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    transform:translate3d(0,-10px,0) scale(.985)!important;
    transform-origin:calc(100% - 38px) 0!important;
    backface-visibility:hidden!important;
    contain:layout paint!important;
    will-change:opacity,transform!important;
    transition:
      opacity .18s ease,
      transform .18s cubic-bezier(.2,.8,.2,1),
      visibility 0s linear .18s!important;
    animation:none!important;
  }

  body.vx-mobile-account-open #vx-mobile-account-panel{
    transform:translate3d(0,0,0) scale(1)!important;
    transition:
      opacity .18s ease,
      transform .18s cubic-bezier(.2,.8,.2,1),
      visibility 0s linear 0s!important;
    animation:none!important;
  }

  body:not(.vx-mobile-account-open) #vx-mobile-account-panel,
  body.vx-mobile-account-open .vx-mobile-account-head,
  body.vx-mobile-account-open .vx-mobile-account-grid,
  body.vx-mobile-account-open .vx-mobile-account-action{
    animation:none!important;
  }

  body.vx-mobile-account-open .vx-header-tools > a.vx-tool-icon[data-page="profile"]{
    transform:none!important;
  }

  .vx-mobile-account-head,
  .vx-mobile-account-grid,
  .vx-mobile-account-action{
    transition:none!important;
  }
}