.inputRequirements {
  font-style: italic;
  text-align: left;
  list-style: disc;
  list-style-position: inside;
  /*max-width: 400px;*/
  margin: 10px auto;
  color: rgb(150,150,150);
}








/* States ------------------ */

input[disabled], button[disabled] {
  cursor: not-allowed;
}

input:focus, button:focus  {
  background-color: rgb(250,250,250);
  border-color: #000;
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover,
button:focus, input[type="button"]:focus, input[type="submit"]:focus {
  background-color: rgb(255, 219, 58);
  color: rgb(40, 40, 40);
}



.inputRequirements li.invalid {
    color: #e77c3c;
}

.inputRequirements li.valid {
    color: #76a53e;
}

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

input:not([type="submit"]):valid {
  border-color: #79a743;
}

/* Hide and show related .inputRequirements when interacting with input */

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

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

input#englishLevel {
	border: 0px !important;
	-webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,255,0) !important; 
	box-shadow: 0px 0px 0px 0px rgba(255,255,255,0) !important;
}