.password-field{position:relative}
.password-field > input[type="password"],
.password-field > input[type="text"]{
  padding-inline-end:3.65rem !important;
}
.password-field .password-toggle{
  position:absolute;
  inset-inline-end:10px;
  inset-block-start:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:12px;
  border:1px solid var(--password-toggle-border, rgba(11,31,58,.12));
  background:var(--password-toggle-bg, rgba(255,255,255,.94));
  color:var(--password-toggle-color, var(--navy, #10213a));
  box-shadow:var(--password-toggle-shadow, 0 10px 20px rgba(11,31,58,.08));
  cursor:pointer;
  z-index:2;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.password-field .password-toggle:hover{
  transform:translateY(-50%) scale(1.03);
  background:var(--password-toggle-hover-bg, rgba(212,166,74,.12));
  border-color:var(--password-toggle-hover-border, rgba(212,166,74,.34));
}
.password-field .password-toggle:active{
  transform:translateY(-50%) scale(.98);
}
.password-field .password-toggle:focus-visible{
  outline:3px solid var(--password-toggle-focus, rgba(212,166,74,.24));
  outline-offset:2px;
}
.password-field .password-toggle svg{
  width:18px;
  height:18px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.password-field .password-toggle .password-toggle-icon-hidden{
  display:none;
}
.password-field .password-toggle.is-visible{
  background:var(--password-toggle-active-bg, var(--password-toggle-hover-bg, rgba(212,166,74,.12)));
}
.password-field .password-toggle.is-visible .password-toggle-icon-visible{
  display:none;
}
.password-field .password-toggle.is-visible .password-toggle-icon-hidden{
  display:block;
}
.password-field .password-toggle[data-flash="1"]{
  animation:password-toggle-blink .28s ease;
}
@keyframes password-toggle-blink{
  0%{transform:translateY(-50%) scale(1)}
  45%{transform:translateY(-50%) scale(.92)}
  100%{transform:translateY(-50%) scale(1)}
}
@media (max-width:640px){
  .password-field > input[type="password"],
  .password-field > input[type="text"]{
    padding-inline-end:3.2rem !important;
  }
  .password-field .password-toggle{
    width:36px;
    height:36px;
    inset-inline-end:8px;
    border-radius:11px;
  }
  .password-field .password-toggle svg{
    width:17px;
    height:17px;
  }
}