* {
    box-sizing: border-box
}

.tab {
    display: none;
    width: 100%;
    height: 50%;
    margin: 0 auto
}

.current {
    display: block
}

button {
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 17px;
    font-family: Raleway;
    cursor: pointer
}

button:hover {
    opacity: .8
}

.previous {
    background-color: #bbb
}
.step{
    display: flex;
    gap: 10px;
}
.step .step-number{
    height: 37px;
    width: 37px;
    cursor: pointer;
    margin: 0 2px;
    color: var(--primary-color);
    background-color: #fff;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: .8;
    padding: 5px;
    text-align: center;
    position: relative;
    z-index: 5;
    
}

.step-active .step-number{
    opacity: 1;
    background-color: #69c769
}

.step.finish {
    background-color: #4caf50
}

.error {
    color: red
}

.active-text-color h5,
.active-text-color p {
    color: #fff
}