/* .password-strength-group .password-strength-meter {
    width: 100%;
    transition: height 0.3s;
    display: flex;
    justify-content: stretch;
  }
  .password-strength-group .password-strength-meter .meter-block {
    height: 4px;
    background: #ccc;
    margin-right: 6px;
    flex-grow: 1;
  }
  .password-strength-group .password-strength-meter .meter-block:last-child {
    margin: 0;
  }
  .password-strength-group[data-strength="1"] .meter-block:nth-child(-n+1) {
    background: #cc3d04;
  }
  .password-strength-group[data-strength="1"] .message-item:nth-child(1) {
    opacity: 1;
  }
  .password-strength-group[data-strength="2"] .meter-block:nth-child(-n+2) {
    background: #ffc43b;
  }
  .password-strength-group[data-strength="2"] .message-item:nth-child(2) {
    opacity: 1;
  }
  .password-strength-group[data-strength="3"] .meter-block:nth-child(-n+3) {
    background: #9ea60a;
  }
  .password-strength-group[data-strength="3"] .message-item:nth-child(3) {
    opacity: 1;
  }
  .password-strength-group[data-strength="4"] .meter-block:nth-child(-n+4) {
    background: #289116;
  }
  .password-strength-group[data-strength="4"] .message-item:nth-child(4) {
    opacity: 1;
  } */


/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: #33DD88;
}

.valid:before {
  position: relative;
  content: "✓";
  margin-right: 4px;
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: #DD3333;
}

.invalid:before {
  position: relative;
  content: "•";
  margin-right: 4px;
}