/***********************************************************************************************************

    ~PASSWORD STRENGTH METER

********************************************************************************************************** */


.testresult {
    display: block;
    height: 16px;
    transition: width 1s ease-in-out 0s;
    min-width: 20px;
}

    .testresult span {
        padding: 5px 0;
        margin: 0;
        white-space: nowrap;
        color: #333;
        font-size: 1.6rem;
        position: absolute;
        right: 0;
        top: 16px;
        font-style: italic;
        font-weight: 600;
    }

.shortPass span,
.badPass span {
    padding: 5px 30px 5px 0;
    background: url('/themes/Cokesbury/Content/images/delete_tag_x_red.svg') no-repeat;
    background-position: right 6px top 11px;
}

.goodPass span,
.strongPass span {
    padding: 5px 30px 5px 0;
    background: url('/themes/Cokesbury/Content/images/checkbox_checkmark_lg_green.svg') right center no-repeat;
    background-position: right 0 top 8px;
}

.newPasswordWrapper .passwordStrengthMeter {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom: none;
}

.shortPass {
    background: #CC0033;
}

.badPass {
    background: #e57c00;
}

.goodPass {
    background: #e1be00;
}

.strongPass {
    background: #86c402;
}

.passwordStrengthBar {
    background: #eee;
    position: relative;
}

.newPasswordWrapperActive .passwordStrengthBar {
    border: 1px solid #ccc;
}

.newPasswordWrapper {
    position: relative;
}

    .newPasswordWrapper.newPasswordWrapperActive {
        margin-bottom: 4rem;
    }