.input-requirements {
  font-size: 1.3rem;
  font-style: italic;
  text-align: left;
  list-style: disc;
  list-style-position: inside;
  max-width: 400px;
  margin: 10px auto;
  color: rgb(150,150,150);
}


.input-requirements li.invalid {
	color: #e74c3c;
}
.input-requirements li.valid {
	color: #3DA19E;
}

.input-requirements li.valid:after {
	display: inline-block;
	padding-left: 10px;
	content: "\2713";
}




/* Hide and show related .input-requirements when interacting with input */

input:not([type="submit"]) + .input-requirements {
  overflow: hidden;
  max-height: 0;
  transition: max-height 1s ease-out;  
}

input:not([type="submit"]):hover + .input-requirements,
input:not([type="submit"]):focus + .input-requirements,
input:not([type="submit"]):active + .input-requirements {
  max-height: 1000px; /* any large number (bigger then the .input-requirements list) */
  transition: max-height 1s ease-in;
}

label {
    display: block;
}