/* 
    Created on : 12.3.2020, 21:04:28
    Author     : TB
*/

@charset 'UTF-8';

ul.stepper {
    padding: 1.5rem;
    margin: 1em -1.5rem;
    overflow-x: visible !important;
    overflow-y: visible !important;
    counter-reset: section;
}

ul.stepper .step {
    position: relative;
    list-style: none;
}

ul.stepper .step.step-disabled {
    pointer-events: none;
}

ul.stepper > li:not(:last-of-type) {
    margin-bottom: .625rem;
    -webkit-transition: margin-bottom .4s;
    -o-transition: margin-bottom .4s;
    transition: margin-bottom .4s;
}

ul.stepper .step:not(:last-of-type).active {
    margin-bottom: 2.25rem;
}

ul.stepper .step::before {
    position: absolute;
    top: .75rem;
    counter-increment: section;
    content: counter(section);
    height: 1.75rem;
    width: 1.75rem;
    color: #fff;
    background-color: rgba(0,0,0,.3);
    -webkit-border-radius: 100%;
    border-radius: 100%;
    text-align: center;
    line-height: 1.75rem;
    font-weight: 400;
}

ul.stepper .step.active::before {
    /*background-color: #4285f4;*/
    background-color: #ffa500;
}

ul.stepper .step-title {
    margin: 0 -1.3rem;
    cursor: pointer;
    padding: .9688rem 2.75rem 1.5rem 4rem;
    padding: .9688rem 2.75rem 4.5rem 4rem;
    display: block;
}

ul.stepper .step.active .step-title {
    font-weight: 500;
}

ul.stepper .step-title::after {
    content: attr(data-step-label);
    display: block;
    position: absolute;
    font-size: .8rem;
    color: #424242;
    font-weight: 400;
}

ul.stepper .step-new-content {
    position: relative;
    display: none;
    height: calc(100% - 132px);
    width: inherit;
    overflow: visible;
    margin-left: 41px;
    margin-right: 24px;
}

ul.stepper .step-new-content .step-actions .btn:first-child {
    margin-left: 0px;
}

ul.stepper > .step.active:not(:last-child)::after {
    height: 93%;
    height: calc(100% - 12px);
}

ul.stepper > .step:not(:last-of-type)::after {
    content: '';
    position: absolute;
    top: 3.125rem;
    left: .8438rem;
    width: .0625rem;
    height: 40%;
    height: calc(100% - 38px);
    background-color: rgba(0,0,0,.1);
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}





@media (min-width: 768px) {
    
    ul.stepper .step-title {
        padding: .9688rem 2.75rem 3rem 4rem;
    }
    
}










