﻿.step-trigger { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; padding: 20px; font-size: 1rem; /*font-weight: 700;*/ line-height: 1.5; color: #a2a3a5; text-align: center; text-decoration: none; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; border: none; border-radius: 0.25rem; transition: background-color 0.15s ease-out, color 0.15s ease-out; }

@media (max-width: 520px) {
    .step-trigger { -ms-flex-direction: column; flex-direction: column; padding: 10px; }
}

.stepper-header { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }

/*.stepper-header .enable {
        cursor: pointer;
    }*/

@media (max-width: 520px) {
    .stepper-header { margin: 0 -10px; text-align: center; }
}

.stepper-circle { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-line-pack: center; align-content: center; -ms-flex-pack: center; justify-content: center; width: 2.5em; height: 2.5em; padding: .75em 0; margin: 0.25rem; line-height: 1em; color: #fff; background-color: #a2a3a5; border-radius: 50%; font-size: 14pt; }

.active .stepper-circle { background-color: #f54545; }

.enable .stepper-circle { background-color: #666; }

.stepper-label { display: inline-block; margin: 0.25rem; font-size: 15px; }

@media (max-width: 600px) {
    .stepper-label { display: none; }
}

.active .stepper-label { color: #f54545; }

.enable .stepper-label { color: #666; }

.stepper .line,
.stepper-line { -ms-flex: 1 0 32px; flex: 1 0 32px; min-width: 1px; min-height: 1px; margin: auto; background-color: rgba(0, 0, 0, 0.12); }

.active_line { background-color: #f54545; }

.enable_line { background-color: #666; }

@media (max-width: 650px) {
    .stepper .line,
    .stepper-line { -ms-flex-preferred-size: 10px; flex-basis: 10px; }
}

@media (max-width: 360px) {
    .stepper .line,
    .stepper-line { -ms-flex-preferred-size: 0px; flex-basis: 0px; }
}

.stepper-content { padding: 0 30px 30px; }

@media (max-width: 600px) {
    .stepper-content { padding: 0; }
}
