form .indicator {
    height: 10px;
    display: none;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
}

form .indicator span {
    width: 100%;
    height: 100%;
    background: lightgray;
    border-radius: 5px;
    position: relative;
}

form .indicator span.medium {
    margin: 0 3px;
}

form .indicator span::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

form .indicator span.active.weak::before {
    background-color: #ff4757;
}

form .indicator span.active.medium::before {
    background-color: orange;
}

form .indicator span.active.strong::before {
    background-color: #23ad5c;
}

form .indicator-text {
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    display: none;
}

form .indicator-text.weak {
    color: #ff4757;
}

form .indicator-text.medium {
    color: orange;
}

form .indicator-text.strong {
    color: #23ad5c;
}