#pswd_info {
    position: absolute;
    width: 100%;
    padding: 15px;
    background: #f8f9fa;
    font-size: .875em;
    border-radius: 5px;
    box-shadow: 0 1px 3px #ccc;
    border: 1px solid #ddd;
    z-index: 9999;
    top: 20px;
    text-align: left;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

#pswd_info h4 {
    margin: 0 0 10px 0;
    padding: 0;
    font-weight: normal;
}

    #pswd_info::before {
        content: '';
        position: absolute;
        left: -10px;
        top: 20px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #f8f9fa;
        z-index: 2;
    }

    #pswd_info::after {
        content: '';
        position: absolute;
        left: -11px;
        top: 20px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #ccc;
        z-index: 1;
    }


.invalid {
    color:#ec3f41;
}
.valid {
    color:#3a7d34;
}

#pswd_info {
    display:none;
}

#pswd_info ul, li {
    margin:0;
    padding:0;
    list-style-type:none;
}

#pswd_info .valid i.fa.fa-times {
    display: none;
}

#pswd_info .invalid i.fa.fa-check {
    display: none;
}

#pswd_info meter{
    width:100%;
}

meter[value='0.1']::-webkit-meter-optimum-value,meter[value='0.2']::-webkit-meter-optimum-value,meter[value='0.3']::-webkit-meter-optimum-value
,meter[value='0.4']::-webkit-meter-optimum-value,meter[value='0.5']::-webkit-meter-optimum-value {
    background: red; /* Weak */
}

meter[value='0.6']::-webkit-meter-optimum-value,meter[value='0.7']::-webkit-meter-optimum-value,meter[value='0.8']::-webkit-meter-optimum-value
,meter[value='0.9']::-webkit-meter-optimum-value {
    background: orange; /* Medium */
}

meter[value='1']::-webkit-meter-optimum-value {
    background: green; /* Strong */
}