#edit-pass .password-strength,
#edit-pass div.password-confirm {
  margin-top: 1em;
  color: #8d8d8d;
  font-size: 80%;
  padding-bottom: 1rem;
  position: relative;
  max-width: 23rem;
}

.password-strength__meter {
  height: 3px;
  width: 100%;
  position: absolute;
  margin-top: 2em;
  background-color: #adadad;
}

.password-strength__indicator {
  height: 100%;
  width: 0;
  transition: width 0.5s ease-out;
}

.password-confirm-match {
  visibility: hidden;
}

.password-suggestions {
  color: #777777;
  padding: 0 1em;
  font-size: 14px;
}

.password-suggestions ul {
  margin: 1em 0;
  padding-left: 30px;
}

.password-suggestions ul li {
  list-style: square outside;
  line-height: 1.5;
}

.password-confirm .ok,
.password-confirm .error {
  font-weight: 500;
}

@media (min-width: 600px) {
  .section-password {
    display: flex;
    flex-wrap: wrap;
  }
  .form-group--password {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  #edit-pass .password-strength,
  #edit-pass div.password-confirm {
    position: absolute;
    left: 100%;
    bottom: 5px;
    width: 250px;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
  }
  .password-suggestions {
    flex: 100%;
  }
}