/* RXOPD Login OTP/sign-up/animation repair */
.is-hidden{display:none!important}

.rxopd-login-clean-rev37 .rxopd-public-auth-card{
  width:min(500px,100%);
}

.rxopd-login-clean-rev37 .rxopd-public-auth-logo{
  height:74px;
  margin-bottom:8px;
}

.rxopd-login-clean-rev37 .rxopd-public-auth-logo img{
  max-height:68px;
}

.rxopd-login-tabs-main{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
  max-width:360px!important;
  margin:12px auto!important;
}

.rxopd-login-tabs-main button,
.rxopd-login-signup-tab{
  min-height:36px!important;
  border-radius:999px!important;
  font-size:11.5px!important;
  font-weight:900!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-decoration:none!important;
  border:1px solid #dbe7f4!important;
  background:#f7fbff!important;
  color:#0b4bb2!important;
  padding:0 8px!important;
  line-height:1!important;
}

.rxopd-login-tabs-main button.active{
  background:#0b6ffb!important;
  color:#fff!important;
  border-color:#0b6ffb!important;
}

.rxopd-login-signup-tab{
  background:#11a76f!important;
  color:#fff!important;
  border-color:#11a76f!important;
}

.rxopd-login-secondary-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #dbe7f4;
}

.rxopd-login-secondary-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 9px;
  border-radius:999px;
  background:#f7fbff;
  border:1px solid #dbe7f4;
  color:#0b4bb2;
  text-decoration:none;
  font-size:11.3px;
  font-weight:850;
}

.rxopd-login-clean-rev37 .alert,
.rxopd-login-clean-rev37 .rxopd-server-alert{
  font-size:12.5px!important;
  line-height:1.35!important;
  text-align:left!important;
  word-break:break-word;
  margin-bottom:12px!important;
}

.rxopd-login-clean-rev37 .alert.error{
  color:#b42318!important;
  background:#fff1f0!important;
  border-color:#fecdca!important;
}

.rxopd-login-clean-rev37 .alert.success{
  color:#067647!important;
  background:#ecfff5!important;
  border-color:#abefc6!important;
}

.rxopd-login-otp-verify-block{
  display:grid;
  gap:10px;
  margin-top:4px;
}

.rxopd-otp-sent-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 11px;
  border:1px solid #abefc6;
  background:#ecfff5;
  color:#067647;
  border-radius:14px;
  font-size:12.5px;
  line-height:1.25;
}

.rxopd-otp-sent-note strong{
  white-space:nowrap;
}

.rxopd-otp-sent-note span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rxopd-login-otp-verify-form{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  align-items:end!important;
  gap:10px!important;
}

.rxopd-login-otp-verify-form label{
  margin:0!important;
}

.rxopd-login-otp-verify-form .rxopd-public-auth-submit{
  min-width:132px!important;
  height:42px!important;
  margin:0!important;
  white-space:nowrap!important;
}

.rxopd-otp-after-actions{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:center;
  gap:9px;
  min-height:32px;
}

.rxopd-login-otp-resend-form{
  margin:0!important;
  display:block!important;
}

.rxopd-login-otp-resend-form .rxopd-public-auth-linkbtn,
.rxopd-resend-otp-btn,
.rxopd-otp-reset-btn{
  height:32px!important;
  min-height:32px!important;
  border-radius:999px!important;
  padding:0 11px!important;
  font-size:11.5px!important;
  font-weight:900!important;
  white-space:nowrap!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

.rxopd-login-otp-resend-form .rxopd-public-auth-linkbtn:disabled{
  opacity:.72;
  cursor:not-allowed;
  background:#f2f4f7!important;
  color:#667085!important;
  border:1px solid #e4e7ec!important;
}

.rxopd-otp-reset-btn{
  border:1px solid #dbe7f4!important;
  background:#fff!important;
  color:#0b4bb2!important;
  cursor:pointer!important;
}

.rxopd-otp-timer-note{
  color:#667085;
  font-size:11.4px;
  font-weight:800;
  justify-self:end;
  white-space:nowrap;
}

.rxopd-otp-top-error,
.rxopd-otp-top-success{
  width:100%;
  box-sizing:border-box;
  margin:0 0 12px;
  padding:11px 13px;
  border-radius:12px;
  font-size:13px;
  line-height:1.35;
  font-weight:850;
}

.rxopd-otp-top-error{
  border:1px solid #fecdca;
  background:#fff1f0;
  color:#b42318;
}

.rxopd-otp-top-success{
  border:1px solid #abefc6;
  background:#ecfff5;
  color:#067647;
}

.rxopd-otp-top-error[hidden],
.rxopd-otp-top-success[hidden]{
  display:none!important;
}

/* animation */
.rxopd-otp-fly-bound{position:relative}

.rxopd-otp-fly-button{
  position:relative!important;
  isolation:isolate;
  display:inline-grid!important;
  place-items:center!important;
  width:108px;
  min-width:108px;
  height:40px;
  min-height:40px;
  padding:0 16px!important;
  border:0!important;
  border-radius:15px!important;
  overflow:visible!important;
  cursor:pointer;
  color:#fff!important;
  background:linear-gradient(135deg,#6a5cff,#8c45ff)!important;
  box-shadow:0 14px 30px rgba(106,92,255,.22)!important;
  font:inherit;
  font-size:12px;
  font-weight:850;
  line-height:1;
  transition:
    width .32s cubic-bezier(.22,1,.36,1),
    min-width .32s cubic-bezier(.22,1,.36,1),
    height .32s cubic-bezier(.22,1,.36,1),
    border-radius .32s cubic-bezier(.22,1,.36,1),
    background .22s ease,
    box-shadow .22s ease;
}

.rxopd-otp-fly-button[disabled]{
  cursor:wait;
  opacity:1!important;
}

.otp-fly__label,
.otp-fly__spinner,
.otp-fly__mail,
.otp-fly__success{
  grid-area:1/1;
}

.otp-fly__label{
  display:inline-flex;
  gap:6px;
  align-items:center;
  white-space:nowrap;
  transition:opacity .18s ease, transform .2s ease;
}

.otp-fly__spinner{
  width:26px;
  height:26px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.30);
  border-top-color:#fff;
  border-right-color:rgba(255,255,255,.88);
  opacity:0;
  transform:scale(.74);
}

.otp-fly__mail{
  width:29px;
  height:29px;
  opacity:0;
  filter:drop-shadow(0 8px 12px rgba(54,47,160,.24));
  pointer-events:none;
  will-change:transform,opacity;
}

.otp-fly__mail-body{fill:#fff}

.otp-fly__mail-flap,
.otp-fly__mail-line{
  fill:none;
  stroke:#6a5cff;
  stroke-width:2.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.otp-fly__success{
  width:34px;
  height:34px;
  opacity:0;
  transform:scale(.48);
}

.otp-fly__success-ring{
  fill:#e7fff3;
  stroke:#fff;
  stroke-width:3;
}

.otp-fly__success-check{
  fill:none;
  stroke:#13b76a;
  stroke-width:4.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:40;
  stroke-dashoffset:40;
}

.rxopd-otp-fly-message{
  display:block;
  margin:7px 2px 0;
  min-height:18px;
  color:#667085;
  font-size:12px;
  font-weight:700;
}

.rxopd-otp-fly-message.is-success{color:#067647;font-weight:850}
.rxopd-otp-fly-message.is-error{color:#d92d20;font-weight:850}

.rxopd-otp-fly-bound.is-checking .rxopd-otp-fly-button,
.rxopd-otp-fly-bound.is-flying .rxopd-otp-fly-button,
.rxopd-otp-fly-bound.is-success .rxopd-otp-fly-button{
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0!important;
  border-radius:999px!important;
}

.rxopd-otp-fly-bound.is-checking .rxopd-otp-fly-button,
.rxopd-otp-fly-bound.is-flying .rxopd-otp-fly-button{
  background:radial-gradient(circle at 32% 28%,#9d8cff,#6a5cff 58%,#4b32df)!important;
  box-shadow:0 0 0 0 rgba(106,92,255,.34),0 18px 38px rgba(106,92,255,.36)!important;
}

.rxopd-otp-fly-bound.is-checking .otp-fly__label,
.rxopd-otp-fly-bound.is-flying .otp-fly__label,
.rxopd-otp-fly-bound.is-success .otp-fly__label{
  opacity:0;
  transform:scale(.82);
}

.rxopd-otp-fly-bound.is-checking .otp-fly__spinner{
  opacity:1;
  transform:scale(1);
  animation:rxOtpSmoothSpin .68s linear infinite;
}

.rxopd-otp-fly-bound.is-flying .otp-fly__spinner{
  opacity:1;
  transform:scale(1);
  animation:rxOtpSmoothSpin .68s linear infinite;
}

.rxopd-otp-fly-bound.is-flying .otp-fly__mail{
  opacity:1;
  animation:rxOtpSmoothMailFly .92s cubic-bezier(.2,.86,.2,1) both;
}

.rxopd-otp-fly-bound.is-flying .rxopd-otp-fly-button::after{
  content:"";
  position:absolute;
  width:36px;
  height:2px;
  left:29px;
  top:10px;
  border-radius:99px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.72),rgba(38,199,255,0));
  transform:rotate(-20deg);
  animation:rxOtpSmoothTrail .92s ease-out both;
}

.rxopd-otp-fly-bound.is-success .rxopd-otp-fly-button{
  background:radial-gradient(circle at 32% 28%,#33e58f,#13b76a 58%,#0c8b52)!important;
  box-shadow:0 18px 38px rgba(19,183,106,.34),0 0 0 8px rgba(19,183,106,.10)!important;
  animation:rxOtpSuccessPop .32s cubic-bezier(.22,1.4,.36,1) both;
}

.rxopd-otp-fly-bound.is-success .otp-fly__mail,
.rxopd-otp-fly-bound.is-success .otp-fly__spinner{
  opacity:0;
}

.rxopd-otp-fly-bound.is-success .otp-fly__success{
  opacity:1;
  transform:scale(1);
}

.rxopd-otp-fly-bound.is-success .otp-fly__success-check{
  animation:rxOtpCheck .28s ease both;
}

.rxopd-otp-fly-bound.is-error .rxopd-otp-fly-button{
  background:linear-gradient(135deg,#ef4444,#d92d20)!important;
  animation:rxOtpShake .22s ease both;
}

@keyframes rxOtpSmoothSpin{
  to{transform:rotate(360deg) scale(1)}
}

@keyframes rxOtpSmoothMailFly{
  0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.78)}
  12%{opacity:1;transform:translate(0,0) rotate(-6deg) scale(1)}
  32%{opacity:1;transform:translate(9px,-4px) rotate(58deg) scale(.98)}
  58%{opacity:1;transform:translate(20px,-10px) rotate(148deg) scale(.9)}
  82%{opacity:.9;transform:translate(31px,-16px) rotate(228deg) scale(.74)}
  100%{opacity:0;transform:translate(42px,-22px) rotate(310deg) scale(.54)}
}

@keyframes rxOtpSmoothTrail{
  0%{opacity:0;transform:translate(0,0) rotate(-20deg) scaleX(.2)}
  25%{opacity:.72;transform:translate(8px,-3px) rotate(-20deg) scaleX(.9)}
  100%{opacity:0;transform:translate(31px,-16px) rotate(-20deg) scaleX(.25)}
}

@keyframes rxOtpSuccessPop{
  0%{transform:scale(.76)}
  70%{transform:scale(1.11)}
  100%{transform:scale(1)}
}

@keyframes rxOtpCheck{to{stroke-dashoffset:0}}

@keyframes rxOtpShake{
  0%,100%{transform:translateX(0)}
  33%{transform:translateX(-3px)}
  66%{transform:translateX(3px)}
}

@media(max-width:640px){
  .rxopd-login-clean-rev37 .rxopd-public-auth-card{
    width:min(380px,96vw);
    border-radius:22px;
    padding:14px;
  }

  .rxopd-login-tabs-main{
    max-width:100%!important;
    gap:5px!important;
  }

  .rxopd-login-tabs-main button,
  .rxopd-login-signup-tab{
    font-size:10.8px!important;
    min-height:34px!important;
    padding:0 6px!important;
  }

  .rxopd-login-secondary-links a{
    font-size:10.7px;
    min-height:28px;
    padding:0 7px;
  }

  .rxopd-login-otp-verify-form{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .rxopd-login-otp-verify-form .rxopd-public-auth-submit{
    width:100%!important;
  }

  .rxopd-otp-sent-note{
    display:grid;
    gap:3px;
  }

  .rxopd-otp-sent-note span{
    white-space:normal;
  }

  .rxopd-otp-after-actions{
    grid-template-columns:1fr!important;
    gap:7px;
  }

  .rxopd-login-otp-resend-form .rxopd-public-auth-linkbtn,
  .rxopd-resend-otp-btn,
  .rxopd-otp-reset-btn{
    width:100%!important;
  }

  .rxopd-otp-timer-note{
    justify-self:center;
    white-space:normal;
  }
}
