/*form styles*/
.steps > .steps-list {
    text-align: center;
    position: relative;
    margin-top: 20px;
    z-index: 15;
}

.steps fieldset {
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;

    /*stacking fieldsets above each other*/
    position: relative;
}

/*Hide all except first fieldset*/
.steps fieldset:not(:first-of-type) {
    display: none;
}


/*progressbar*/
ul.steps-list {
    overflow: hidden;
    color: #00a859;
}

ul.steps-list .active {
    color: #00a859;
}

ul.steps-list li {
    list-style-type: none;
    font-size: 12px;
    float: left;
    position: relative;
}

ul.steps-list li:first-child:nth-last-child(1) {
    width: 100%;
}

ul.steps-list li:first-child:nth-last-child(2),
ul.steps-list li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}
ul.steps-list li:first-child:nth-last-child(3),
ul.steps-list li:first-child:nth-last-child(3) ~ li {
    width: 33.333%;
}

ul.steps-list li:first-child:nth-last-child(4),
ul.steps-list li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

ul.steps-list li:first-child:nth-last-child(5),
ul.steps-list li:first-child:nth-last-child(5) ~ li {
    width: 20%;
}

ul.steps-list li:first-child:nth-last-child(6),
ul.steps-list li:first-child:nth-last-child(6) ~ li {
    width: 16.6666%;
}

/*ProgressBar before any progress*/
ul.steps-list li:before {
    content: attr(value);
    width: 4vh;
    height: 4vh;
    line-height: 3.5vh;
    display: block;
    font-size: 11pt;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px;
    cursor: pointer;
}

ul.steps-list li[disabled]::before{
    color: lightgrey !important;
    background: gray !important;
    cursor: default;
}

ul.steps-list li[disabled]{
    color: lightgrey !important;
}

/*ProgressBar connectors*/
ul.steps-list li:not(:first-child):after {
    content: '';
    width: 100%;
    height: 4%;
    background: lightgray;
    position: absolute;
    top: 30%;
    left: 0;
    z-index: -1;
}

ul.steps-list li:not(:first-child)[disabled]::after{
    background: gray !important;
}

/*ProgressBar connectors*/
ul.steps-list li:first-child:after {
    content: '';
    width: 100%;
    height: 4%;
    background: lightgray;
    position: absolute;
    top: 30%;
    left: 50%;
    z-index: -1;
}

/*ProgressBar connectors*/
ul.steps-list li:last-child:after {
    width: 50%;
}

/*Color number of the step and the connector before it*/
ul.steps-list li.active:before, ul.steps-list li.active:after {
    background: #00a859;
}