/*
    Yet Another Password Validator
    jquery.YAPV.js

    // HTML
    //<div class="row panel-collapse collapse" id="passReqs">
    //    <div class="col-md-2"></div>
    //    <div class="col-md-8">
    //        <p></p>
    //        <p id="capsCheck" class="hidden">  <span class="fa fa-exclamation-triangle"></span> <strong>Warning:</strong> Caps Lock is on</p>
    //        <p>Your password must contain the following:</p>
    //        <p id="letter" class="invalid">  A <strong>lowercase</strong> letter (a-z)</p>
    //        <p id="capital" class="invalid">  A <strong>capital (uppercase)</strong> letter (A-Z)</p>
    //        <p id="number" class="invalid">  A <strong>number</strong></p>
    //        <p id="length" class="invalid">  A length of <strong>10 to 64</strong> characters</p>
    //    </div>
    //    <div class="col-md-2"></div>
    //</div>
*/

/* The message box is shown when the user clicks on the password field */
#message {
    background: #f1f1f1;
    color: #000;
    position: relative;
    padding: 20px, 20px, 20px, 20px;
}

    #message p {
        padding: 0px 60px;
        font-size: 18px;
    }

/* Add a green text color and a checkmark when the requirements are right */
.valid:before {
    position: relative;
    content: "✔";
    color: green;
}

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

.grey {
    color: grey;
}

/* Bootstrap border mimic */
.password-border {
        border-right: 0;
    }

/* Show/Hide Icon */
.password-icon {
    border-left: 0 solid transparent;
    color: #00397b;
    top: 25px !important;
}

/* Warning */
.fa-exclamation-triangle {
    color: orange;
}

/* Password strength indicator */
.password-strength {
    font-size: 12px;
    margin-top: 5px;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
}

    .password-strength.weak {
        background-color: #d9534f;
        color: white;
    }

    .password-strength.fair {
        background-color: #f0ad4e;
        color: white;
    }

    .password-strength.good {
        background-color: #5bc0de;
        color: white;
    }

    .password-strength.strong {
        background-color: #5cb85c;
        color: white;
    }

#passReqs {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    margin: 10px 0 20px;
    border: 1px solid #ddd;
}