@charset "UTF-8";

.password-req-checker, #account_password_check_message {
  float: left;
  display: block;
  margin: 2px;
  padding: 2px;
  clear: both;
}

@media (min-width: 832px) {
  .password-req-checker, #account_password_check_message {
    margin-left: 310px;
  }
}

.password-req-checker ul {
  list-style: inherit;
  margin-left: 16px;
}

/* Setup several display/hide states */
.password-req-checker,
.password-req-checker.show-invalid-fields .valid {
  display: none; }

.password-req-checker.active,
.password-req-checker.show-invalid-fields {
  display: block; }

/* Base setup inline icons after specified requirements */
.password-req-checker.dirty .valid:after,
.password-req-checker.dirty .invalid:after,
.password-req-checker.show-invalid-fields .invalid:after {
  margin-left: .5rem;
  font-size: .95rem;
  margin-top: 2px; }

.form-group.invalid:after,
.form-group.valid:after {
  bottom: .25rem;
  right: 3rem;
  font-size: 2rem; }

/* Set icons and colors */
.password-req-checker.dirty .valid:after,
.form-group.valid:after {
  content: "ok";
  color: green; }

.password-req-checker.dirty .invalid:after,
.form-group.invalid:after,
.password-req-checker.show-invalid-fields .invalid:after {
  content: "x";
  color: red; }