.strength-meter {
    border-radius: 2px;
    position: relative;
    height: 3px;
    background: #ddd;
    border-radius: 2px;
    overflow: hidden;
}
.strength-meter-dark {
    border-radius: 2px;
    position: relative;
    height: 3px;
    background: #294d7a;
    border-radius: 2px;
    overflow: hidden;
}

.strength-meter:before,
.strength-meter:after {
    content: '';
    height: inherit;
    background: transparent;
    display: block;
    border-color: #fff;
    border-style: solid;
    border-width: 0 6px 0;
    position: absolute;
    width: calc(20% + 6px);
    z-index: 10;
}
.strength-meter-dark:before,
.strength-meter-dark:after {
    content: '';
    height: inherit;
    background: transparent;
    display: block;
    border-color: #000;
    border-style: solid;
    border-width: 0 6px 0;
    position: absolute;
    width: calc(20% + 6px);
    z-index: 10;
}
.strength-meter:before,
.strength-meter-dark:before {
    left: calc(20% - 3px);
}
.strength-meter:after,
.strength-meter-dark:after {
    right: calc(20% - 3px);
}

.strength-meter-fill {
    background: transparent;
    height: inherit;
    position: absolute;
    width: 0;
    transition: width 0.5s ease-in-out, background 0.25s;
}
.strength-meter-fill[data-strength='0'] {
    width: 20%;
    background: darkred;
}
.strength-meter-fill[data-strength='1'] {
    width: 40%;
    background: orangered;
}
.strength-meter-fill[data-strength='2'] {
    width: 60%;
    background: orange;
}
.strength-meter-fill[data-strength='3'] {
    width: 80%;
    background: yellowgreen;
}
.strength-meter-fill[data-strength='4'] {
    width: 100%;
    background: green;
}
.password-count {
    bottom: 16px;
    right: 10px;
    font-size: 1rem;
}
.badge-success {
    color: white;
    background-color: green;
}
.badge-warning {
    color: white;
    background-color: orange;
}
.badge-danger {
    color: white;
    background-color: red;
}
.badge {
    font-size: 0.8rem;
    padding: 1px 0;
}
.badge-pill {
    padding-right: 9px;
    padding-left: 8px;
    border-radius: 10px;
}
.password-red {
    font-size: small;
    font-weight: bold;
    color: red;
    margin: auto 0;
}
.password-orange {
    font-size: small;
    font-weight: bold;
    color: orange;
    margin: auto 0;
}
.password-green {
    font-size: small;
    font-weight: bold;
    color: green;
    margin: auto 0;
}
.password-message {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 15px;
}
