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

    #message p {
        padding: 10px 35px;
        font-size: 18px;
    }

    #message h3 {
        padding: 0 !important;
    }

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

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

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

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