/* Shared password requirements for signup and account recovery. */
.password-rules{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  margin:10px 0 18px;
}
.password-rules span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:rgba(255,246,236,.48);
  font-size:.68rem;
  font-weight:700;
  line-height:1;
  transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease;
}
.password-rules span i{
  width:14px;
  height:14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  color:transparent;
  font-size:.48rem;
  transition:all .18s ease;
}
.password-rules span.is-met{
  border-color:rgba(122,215,137,.22);
  background:rgba(89,190,107,.055);
  color:rgba(205,242,211,.88);
}
.password-rules span.is-met i{
  border-color:rgba(122,215,137,.35);
  background:rgba(89,190,107,.12);
  color:#a8e8b3;
}
.signup-password-rules{margin:12px 0 0;}
@media(max-width:575.98px){
  .password-rules{gap:7px;margin-bottom:16px}
  .password-rules span{font-size:.64rem;padding:7px 9px}
}

/* v3.20.0: optically center the status glyph inside requirement circles. */
.password-rules span i{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 14px;
  line-height:0!important;
  vertical-align:middle;
}
.password-rules span i::before{
  display:block;
  line-height:1!important;
  margin:0!important;
  transform:none!important;
}

/* v3.21.0: use a CSS-drawn check so the status mark is truly centered on every page/font stack. */
.password-rules span i{
  position:relative!important;
  box-sizing:border-box!important;
  display:inline-block!important;
  width:14px!important;
  height:14px!important;
  min-width:14px!important;
  flex:0 0 14px!important;
  line-height:0!important;
  font-size:0!important;
  overflow:visible;
}
.password-rules span i::before{
  content:""!important;
  display:none!important;
}
.password-rules span i::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:7px;
  border-right:1.6px solid transparent;
  border-bottom:1.6px solid transparent;
  transform:translate(-50%,-58%) rotate(45deg);
  transform-origin:center;
  opacity:0;
  transition:opacity .16s ease,border-color .16s ease;
}
.password-rules span.is-met i::after{
  border-right-color:#a8e8b3;
  border-bottom-color:#a8e8b3;
  opacity:1;
}