@keyframes fade-in {
  from {
    opacity: 0;
    visibility: hidden;
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}

#one-account-push-api, #one-account-sign-up {
  width: 100vw;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  border: none;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  z-index: -999;
}

#one-account-push-api.opened-fade-in, #one-account-sign-up.opened-fade-in {
  animation: fade-in .4s ease-in;
  animation-fill-mode: forwards;
  z-index: 9999;
}

#one-account-push-api.closed-fade-out, #one-account-sign-up.closed-fade-out {
  animation: fade-out .4s ease-out;
  animation-fill-mode: forwards;
  z-index: -999;
}

#one-account-push-api.opened, #one-account-sign-up.opened {
  opacity: 1;
  visibility: visible;
  z-index: 9999;
}

#one-account-push-api.closed, #one-account-sign-up.closed {
  opacity: 0;
  visibility: hidden;
  z-index: -999;
}