/* <!-- from recovery, with extras for url --> */

/* General form control styling */
input[type="url"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="password"] {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Focused state styling */
input[type="url"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="password"]:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Optional - Disabled input styling */
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled {
  background-color: #e9ecef;
  opacity: 1;
}

/* Optional - Placeholder styling */
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder {
  color: #6c757d;
  opacity: 1;
}


/* <!-- Display and asterisk on required field labels. --> */

.required {
  color: #8B0000;
}



/* The message box is shown when the user clicks on the password field */
.formValidation {
  position: relative;
  padding: 20px;
  margin-top: 10px;
}
.formValidation p {
  margin-left: 8px!important;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: #004000;
}
.valid:before {
  content: "✔";
}
/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: #8B0000;
}
.invalid:before {
  content: "✖";
}
.valid:before,
.invalid:before {
  position: relative;
  left: -8px;
}


/* Make the field and form error messages pop. */
ul.errorlist {
  margin: auto auto auto 10px;
}
.page-panel-messages, .errorlist {
  background-color: #111 !important;
  color: #f00 !important;
  padding: 1px 4px 6px 4px;
  border-radius: 4px;
}