/* The message box is shown when the user clicks on the password field */

.pswd_info {
    display: none;
    position: absolute;
    bottom: 90px;
    bottom: -115px\9; /* IE Specific */
    right: 55px;
    width: 250px;
    padding: 15px;
    background: #fefefe;
    font-size: .875em;
    border-radius: 5px;
    box-shadow: 0 1px 3px #ccc;
    border: 1px solid #ddd;
}


    .pswd_info::before {
        content: "\25B2";
        position: absolute;
        top: -12px;
        left: 45%;
        font-size: 14px;
        line-height: 14px;
        color: #ddd;
        text-shadow: none;
        display: block;
    }


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

    .valid:before {
        position: relative;
        left: -5px;
        content: "✓";
    }

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

    .invalid:before {
        position: relative;
        left: -5px;
        content: "✘";
    }