/***********************************************
 * Styles for Password Strength Meter popup
 ***********************************************/

.password-evaluator {
    width: 250px;
    font-family: 'OpenSans';
    font-weight: normal;
}

.password-evaluator .evaluation {
    font-size: 12px;
    margin-bottom: 5px;
}

.password-evaluator .label {
    margin-right: 5px;
}

.password-evaluator .strength {
    display: none;
    font-weight: bold;
    font-family: 'OpenSans';
    font-weight: bold;
}

.password-evaluator.try-harder .strength.try-harder {
    display: inline;
}

.password-evaluator.too-short .strength.too-short {
    color: #676767;
    display: inline;
}

.password-evaluator.weak .strength.weak {
    color: #AA0033;
    display: inline;
}

.password-evaluator.fair .strength.fair {
    color: #C39000;
    display: inline;
}

.password-evaluator.good .strength.good {
    color: #6699CC;
    display: inline;
}

.password-evaluator.strong .strength.strong {
    color: #008000;
    display: inline;
}

.password-evaluator .meter {
    border: 1px solid black;
    border-radius: 3px;
    height: 4px;
    width: 100%;
}

.password-evaluator .strength-bar {
    border-radius: 3px;
    height: 100%;
    width: 0;
}

.password-evaluator.try-harder .strength-bar {
    width: 15%;
    background-color: #AA0033;
}

.password-evaluator.weak .strength-bar {
    width: 25%;
    background-color: #AA0033;
}

.password-evaluator.fair .strength-bar {
    width: 50%;
    background-color: #D3A300;
}

.password-evaluator.good .strength-bar {
    width: 75%;
    background-color: #6699CC;
}

.password-evaluator.strong .strength-bar {
    width: 100%;
    background-color: #008000;
}

.password-evaluator .password-advice {
    margin-top: 5px;
}