/*! * Material Design for Bootstrap 4 * Version: MDB PRO 4.2.0 * * * Copyright: Material Design for Bootstrap * http://mdbootstrap.com/ * * Read the license: http://mdbootstrap.com/license/ * * * Documentation: http://mdbootstrap.com/ * * Getting started: http://mdbootstrap.com/getting-started/ * * Tutorials: http://mdbootstrap.com/bootstrap-tutorial/ * * Templates: http://mdbootstrap.com/templates/ * * Support: http://mdbootstrap.com/forums/forum/support/ * * Contact: office@mdbootstrap.com * * Atribution: Animate CSS, Twitter Bootstrap, Materialize CSS, Normalize CSS, Waves JS, WOW JS, Toastr, Chart.js , Hammer.js * */

.stepper li.warning a .circle {
    background-color: #f44 !important
}

.stepper li.active a .circle, .stepper li.completed a .circle {
    background-color: var(--main-color-one) !important;
}

.stepper li a, .stepper li a .circle {
        text-align: center
    }

.blue-skin .stepper li.active a .circle, .blue-skin .stepper li.completed a .circle, .stepper li.active a .blue-skin .circle, .stepper li.completed a .blue-skin .circle {
    background-color: #062A64 !important
}

.red-skin .stepper li.active a .circle, .red-skin .stepper li.completed a .circle, .stepper li.active a .red-skin .circle, .stepper li.completed a .red-skin .circle {
    background-color: #79000C !important
}

 .green-skin .stepper li.active a .circle, .green-skin .stepper li.completed a .circle, .stepper li.active a .green-skin .circle, .stepper li.completed a .green-skin .circle {
    background-color: #003830 !important
}

 .purple-skin .stepper li.active a .circle, .purple-skin .stepper li.completed a .circle, .stepper li.active a .purple-skin .circle, .stepper li.completed a .purple-skin .circle {
    background-color: #650696 !important
}

.dark-skin .stepper li.active a .circle, .dark-skin .stepper li.completed a .circle, .stepper li.active a .dark-skin .circle, .stepper li.completed a .dark-skin .circle {
    background-color: #2E2E2E !important
}

 .grey-skin .stepper li.active a .circle, .grey-skin .stepper li.completed a .circle, .stepper li.active a .grey-skin .circle, .stepper li.completed a .grey-skin .circle {
    background-color: #4B515D !important
}

.mdb-skin .stepper li.active a .circle, .mdb-skin .stepper li.completed a .circle, .stepper li.active a .mdb-skin .circle, .stepper li.completed a .mdb-skin .circle {
    background-color: #3F729B !important
}

.deep-orange-skin .stepper li.active a .circle, .deep-orange-skin .stepper li.completed a .circle, .stepper li.active a .deep-orange-skin .circle, .stepper li.completed a .deep-orange-skin .circle {
    background-color: #8A1A00 !important
}

.graphite-skin .stepper li.active a .circle, .graphite-skin .stepper li.completed a .circle, .stepper li.active a .graphite-skin .circle, .stepper li.completed a .graphite-skin .circle {
    background-color: #37474F !important
}

.pink-skin .stepper li.active a .circle, .pink-skin .stepper li.completed a .circle, .stepper li.active a .pink-skin .circle, .stepper li.completed a .pink-skin .circle {
    background-color: #880e4f !important
}

.light-grey-skin .stepper li.active a .circle, .light-grey-skin .stepper li.completed a .circle, .stepper li.active a .light-grey-skin .circle, .stepper li.completed a .light-grey-skin .circle {
    background-color: #353535 !important
}

.stepper li a {
    padding: 24px;
    font-size: 14px
}

    .stepper li a .circle {
        display: inline-block;
        color: #fff;
        border-radius: 50%;
        background: rgba(0,0,0,.38);
        width: 24px;
        height: 24px;
        line-height: 24px;
        margin-right: 8px
    }

    .stepper li a .label {
        display: inline-block;
        color: rgba(0,0,0,.38)
    }

.stepper li.active a .label, .stepper li.completed a .label {
    font-weight: 600;
    color: rgba(0,0,0,.87)
}

.stepper-horizontal {
    justify-content: space-between
}

    .stepper-horizontal li {
        display: flex;
        align-items: center;
        flex: 1
    }

        .stepper-horizontal li a .label {
            margin-top: 10px
        }

        .stepper-horizontal li:not(:first-child):before, .stepper-horizontal li:not(:last-child):after {
            content: '';
            position: relative;
            flex: 1;
            margin: 0;
            height: 1px;
            background-color: rgba(0,0,0,.1)
        }

        .stepper-horizontal li:hover {
            background: #ddd
        }

.stepper-vertical {
    flex-direction: column;
    justify-content: space-between
}

    .stepper-vertical li {
        align-items: center;
        flex: 1;
        flex-direction: column
    }

        .stepper-vertical li a {
            align-self: flex-start
        }

            .stepper-vertical li a .circle {
                order: 1
            }

            .stepper-vertical li a .label {
                flex-flow: column nowrap;
                order: 2
            }

        .stepper-vertical li.completed a .label {
            font-weight: 500
        }

        .stepper-vertical li .step-content {
            display: block;
            margin-top: 0;
            margin-left: 50px;
            padding: 15px
        }

            .stepper-vertical li .step-content p {
                font-size: .875rem
            }

        .stepper-vertical li:not(:last-child):after {
            content: " ";
            position: absolute;
            width: 1px;
            height: calc(100% - 40px);
            left: 35px;
            top: 55px;
            background-color: rgba(0,0,0,.1)
        }
        .stepper-horizontal, .stepper-vertical, .stepper-vertical li, .stepper-vertical li a {
            display: flex;
            position: relative;
        }