.bi {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

/* The message box is shown when the user clicks on the password field */
#message {
  display: none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 20px;
  margin-top: 10px;
}

#message span {
  padding: 0px 15px;
}

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

.valid:before {
  position: relative;
  left: -15px;
  content: "✔";
}

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

.invalid:before {
  position: relative;
  left: -15px;
  content: "✖";
}

.field {
  margin-bottom: .5rem;
}

.text-error {
  width: 100%;
  margin-bottom: 1rem;
  font-size: .875em;
  color: #dc3545;
}

.bad input,
.bad select,
.bad textarea {
  border: 1px solid #CE5454;
  box-shadow: 0 0 4px -2px #CE5454;
  position: relative;
  left: 0;
  -moz-animation: .4s 1 shake ease;
  -webkit-animation: 0.4s 1 shake ease;
}