ul.stepper {
    padding: 0 1.5rem;
    padding: 1.5rem;
    margin: 1em -1.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    counter-reset: section
}

    ul.stepper li {
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content
    }

        ul.stepper li a {
            padding: 1.5rem;
            text-align: center
        }

            ul.stepper li a .circle {
                display: inline-block;
                width: 2rem;
                height: 2rem;
                margin-right: .5rem;
                line-height: 2.1rem;
                color: #fff;
                text-align: center;
                background: rgba(0,0,0,0.38);
                border-radius: 50%
            }

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

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

.stepper-horizontal {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

    .stepper-horizontal li {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-transition: .5s;
        transition: .5s
    }

        .stepper-horizontal li a .label {
            margin-top: .63rem
        }

        .stepper-horizontal li:not(:last-child):after {
            position: relative;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            height: 1px;
            margin: .5rem 0 0 0;
            content: "";
            background-color: rgba(0,0,0,0.1)
        }

        .stepper-horizontal li:not(:first-child):before {
            position: relative;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            height: 1px;
            margin: .5rem 0 0 0;
            content: "";
            background-color: rgba(0,0,0,0.1)
        }

        .stepper-horizontal li:hover {
            background-color: rgba(0,0,0,0.06)
        }

a:hover {
    text-decoration: none;
}

.pasifButon {
    background-color: #5a6268 !important;
    color: #fff !important;
}

.basariliButon {
    background-color: #28a745 !important;
}

.aktifButon {
    background-color: #F6CD26 !important;
    color: #000 !important;
}