.password-strength-group .password-strength-meter {
    width: 100%;
    transition: height 0.3s;
    display: flex;
    justify-content: stretch;
}
.password-strength-group .password-strength-meter .meter-block {
    height: 4px;
    background: #ccc;
    margin-right: 6px;
    flex-grow: 1;
}
.password-strength-group .password-strength-meter .meter-block:last-child {
    margin: 0;
}
.password-strength-group .password-strength-message {
    font-weight: 20px;
    height: 1em;
    text-align: right;
    transition: all 0.5s;
    margin-top: 3px;
    position: relative;
}
.password-strength-group .password-strength-message .message-item {
    font-size: 12px;
    position: absolute;
    right: 0;
    opacity: 0;
    transition: opacity 0.2s;
}
.password-strength-group[data-strength="1"] .meter-block:nth-child(-n + 1) {
    background: #cc3d04;
}
.password-strength-group[data-strength="1"] .message-item:nth-child(1) {
    opacity: 1;
}
.password-strength-group[data-strength="2"] .meter-block:nth-child(-n + 2) {
    background: #ffc43b;
}
.password-strength-group[data-strength="2"] .message-item:nth-child(2) {
    opacity: 1;
}
.password-strength-group[data-strength="3"] .meter-block:nth-child(-n + 3) {
    background: #9ea60a;
}
.password-strength-group[data-strength="3"] .message-item:nth-child(3) {
    opacity: 1;
}
.password-strength-group[data-strength="4"] .meter-block:nth-child(-n + 4) {
    background: #289116;
}
.password-strength-group[data-strength="4"] .message-item:nth-child(4) {
    opacity: 1;
}