.pass-summary {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 9999;
  margin-top: 4px;
  background: var(--border-gray);
  border: 1px solid var(--border-gray);
  border-radius: 8px;
  padding: 12px;
}
.pass-summary .password-rules {
  list-style: none;
  padding: 0;
  font-size: 14px;
  margin-block: 20px 0;
}
.pass-summary .password-rules li {
  position: relative;
  padding-left: 28px;
  color: var(--header-text-color);
}
.pass-summary .password-rules li.invalid::before,
.pass-summary .password-rules li.valid::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  display: inline-block;
  mask-repeat: no-repeat;
  mask-size: 16px 16px;
  background-color: currentColor;
}
.pass-summary .password-rules li.invalid::before {
  mask-image: url('../images/circle-xmark.svg');
  color: #e53935;
}
.pass-summary .password-rules li.valid::before {
  mask-image: url('../images/circle-check.svg');
  color: #4caf50;
}
.takeda-password:focus ~ .password-rules,
.takeda-password:active ~ .password-rules {
  display: block !important;
}