.formsteps [data-step]:not(.active) {
    display: none;
}

.formsteps [data-step]:first-child.active ~ .formsteps-buttons .formsteps-btn-prev,
.formsteps [data-step].active + .formsteps-buttons .formsteps-btn-next,
.formsteps [data-step]:not(.active) + .formsteps-buttons .formsteps-btn-finish {
    display: none;
}

.formsteps .progressdots {
    display: table;
    width: calc(100% - 50px);
    margin: 0 auto;
    border-spacing: 10px;
}

.formsteps .progressdots > div:not([data-progressdots-step]) {
    display: table-cell;
    width: 50%;
    position: relative;
}

.formsteps .progressdots > div[data-progressdots-step] {
    display: table-cell;
    background-color: white;
    padding: 12px;
    width: auto;
    border-radius: 50%;
    position: relative;
    border: 3px solid gray;
    opacity: 0.5;
    transition: background-color 0.3s, opacity 0.3s;
}

.formsteps .progressdots > div[data-progressdots-step].success,
.formsteps .progressdots > div[data-progressdots-step].error,
.formsteps .progressdots > div[data-progressdots-step].active {
    opacity: 1;
}

.formsteps .progressdots > div[data-progressdots-step].success {
    cursor: pointer;
}

.formsteps .progressdots > div:not([data-progressdots-step]):before,
.formsteps .progressdots > div[data-progressdots-step]:before,
.formsteps .progressdots > div[data-progressdots-step]:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -8px;
    width: 5px;
    height: 1px;
    background-color: gray;
}

.formsteps .progressdots > div[data-progressdots-step] > div {
    position: absolute;
    width: 100%;
    text-align: center;
    padding: 5px 0;
    top: 100%;
    left: 0;
}

.formsteps .progressdots > div[data-progressdots-step]:after {
    left: initial;
    right: -8px;
}

.formsteps .progressdots > div:first-child:not([data-progressdots-step]):before {
    left: initial;
    right: -5px;
    width: calc(100% - 5px);
}

.formsteps .progressdots > div:last-child:not([data-progressdots-step]):before {
    left: -5px;
    width: calc(100% - 5px);
}