.password-strength__meter {
  margin-top: 0.5em;
  background-color: #e9ecef;
}

.password-strength__indicator {
  -webkit-transition: width 0.5s ease-out;
  -o-transition: width 0.5s ease-out;
  transition: width 0.5s ease-out;
  background-color: #28a745;
}

.password-strength__indicator.is-weak {
  background-color: #dc3545;
}

.password-strength__indicator.is-fair {
  background-color: #ffc107;
}

.password-strength__indicator.is-good {
  background-color: #17a2b8;
}

.password-strength__indicator.is-strong {
  background-color: #28a745;
}

.password-confirm,
.password-field,
.password-strength,
.password-confirm-match {
  width: 55%;
}

.password-suggestions {
  max-width: 34.7em;
  margin: 0.7em 0;
  padding: 0.2em 0.5em;
  border: 1px solid #dee2e6;
}

.password-suggestions ul {
  margin-bottom: 0;
}

.confirm-parent,
.password-parent {
  clear: left;
  overflow: hidden;
  max-width: 33em;
  /* LTR */
  margin: 0;
}

[dir="rtl"] .confirm-parent,
[dir="rtl"] .password-parent {
  clear: right;
}

.password-confirm .ok {
  color: #28a745;
  font-weight: bold;
}

.password-confirm .error {
  color: #dc3545;
  font-weight: bold;
}

.page-user-login main .region-content,
.page-user-password main .region-content {
  max-width: calc(3.625rem + 28.5vw);
  margin: 0 auto;
  padding: 1rem 1rem;
  border-radius: 0.3rem;
  background: white;
}

@media (min-width: 1200px) {
  .page-user-login main .region-content,
  .page-user-password main .region-content {
    max-width: 25rem;
  }
}