/* Style the container for inputs */

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

.message p {
	padding: 10px 35px;
	font-size: 1.125em;
}

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

.valid:before {
	position: relative;
	left: -35px;
	content: '✔';
}

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

.invalid:before {
	position: relative;
	left: -35px;
	content: '✖';
}