@import '~assets/scss/_variables.scss';
.stepper {
    margin-top: 30px;
    display: inline-flex;
    padding: 0 0 0 50px;
}

.step-circle {
    width: 30px;
    height: 30px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: $highlight-lock-color;
    position: absolute;
    img {
        width: 100%;
        height: 100%;
        max-width: 12px;
        max-height: 15px;
    }
    .offer-hand {
        width: 100%;
        height: 100%;
        max-width: 19px;
        max-height: 12px;
    }
}

.stepper-text {
    vertical-align: middle;
    opacity: 0.5;
    color: $text-dark-color;
    font-size: 12px;
    line-height: 16px;
    top: 37px;
    right: 15px;
}

.stepper-text.all-done {
    right: 7px;
}

.stepper-text.pc-color,
.stepper-text.cc-color,
.stepper-text.wd-color,
.stepper-text.lc-color {
    opacity: 1;
}

.stepper-text.task-failed-color {
    color: $failure-color;
    opacity: 1;
}

.stepper-text.all-done {
    opacity: 1;
}

.stepper-text.lc-ready {
    opacity: 1;
}

.stepper-inline {
    display: inline-flex;
    left: 13px;
}

.stepper-text-margin {
    margin-left: -15px;
}

.stepper-bar {
    height: 1px;
    width: 74px;
    border-radius: 2px;
    background-color: $light-background-color;
    position: absolute;
    top: 15px;
    left: 37px;
}

.lock-box-color-dissable {
    background-color: $light-background-color;
}

.lock-box-color-dissable.all-done {
    width: 40px;
    height: 40px;
    margin-top: -6px;
    background-color: #7ED321;
    img {
        margin-top: 16px;
    }
}

.lock-box-color-enabled {
    background-color: $light-blue;
}

.lock-box-color-passed {
    background-color: $highlight-lock-color;
}

.lock-box-color-failed {
    background-color: $failure-color;
    img {
        margin-top: 2px;
    }
}