.strength-container
{
    position: relative;
}
.strength-container .strength-input
{
    width: 100%;
    padding-right: 20px;
}
.strength-container .strength-meter
{
    position: absolute;
    top: 15%;
    right: 6px;

    overflow: hidden; 

    width: 4px;
    height: 70%;

    border-radius: 1px;
    background-color: #ccc;
}
.strength-container .strength-score
{
    position: absolute;
    bottom: 0;

    width: 100%;
    height: 0;

    -webkit-transition: width .6s ease 0s;
         -o-transition: width .6s ease 0s;
            transition: width .6s ease 0s; 

    color: transparent;
}
.strength-container .show-password-wrap
{
    position: absolute;
}
.strength-container .strength-invalid.strength-score
{
    height: 25%; 

    background-color: #f44336;
}
.strength-container .strength-weak.strength-score
{
    height: 50%; 

    background-color: #ff9800;
}
.strength-container .strength-good.strength-score
{
    height: 75%; 

    background-color: #00bcd4;
}
.strength-container .strength-strong.strength-score
{
    height: 100%; 

    background-color: #4caf50;
}