/* Form Progress */
.progress {
    width: 100%;
    margin: 20px auto;
    text-align: center;
    background-color: transparent !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    /*height: 130px !important;*/
    -webkit-box-shadow: none !important;
    white-space: nowrap;
}

    .progress .circle,
    .progress .bar {
        display: inline-block;
        background: #fff;
        width: 70px;
        height: 70px;
        border-radius: 40px;
        border: 1px solid #d5d5da;
        margin-bottom: 7px;
        position: relative;
    }

    .progress .half {
        width: 100px !important;
    }

    .progress .bar {
        position: relative;
        width: 140px;
        height: 6px;
        top: 0;
        margin-left: -5px;
        margin-right: -5px;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

        .progress .bar.imp {
            width: 105px !important;
        }

    .progress .circle .label {
        display: inline-block;
        width: 60px;
        height: 60px;
        line-height: 50px;
        border-radius: 32px;
        margin-top: 3px;
        color: #b5b5ba;
        font-size: 25px;
        margin-bottom: 7px;
    }

    .progress .circle .title {
        color: #b5b5ba;
        font-size: 12px;
        line-height: 1;
        margin-left: 0;
        display: block;
        margin-top: 5px;
        width: 100px;
        position: absolute;
        left: -17px;
    }

.title span {
    display: block;
}

.progress::-webkit-scrollbar {
    width: 5px;
}

.progress::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.progress::-webkit-scrollbar-thumb {
    background: #888;
}

    .progress::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

span.space-status {
    display: block;
    margin-top: 25px;
}

span.status-cancel {
    position: absolute;
    top: -27px;
    left: 0;
    right: 0;
    font-size: 12px;
    color: #CF1130;
    font-weight: 600;
}

/* Done / Active */
.progress .bar.done,
.progress .circle.done {
    background: #FFAE00;
}

.progress .bar.active {
    background: linear-gradient(to right, #EEE 40%, #FFF 60%);
}

.progress .circle.done .label {
    color: #FFF;
    background: #FFAE00;
}

.progress .circle.done .title {
    color: #777;
}

.progress .circle.active .label {
    color: #FFF;
    background: #FFAE00;
}

.progress .circle.active .title {
    color: #777;
    font-weight: 600;
}

.scrollingHotSpotLeft {
    font-size: 34px;
    padding: 0 15px 0;
    float: left;
    cursor: pointer;
}

.scrollingHotSpotRight {
    font-size: 35px;
    padding: 0 15px 0;
    cursor: pointer;
}

.setas {
    background: #E9ECEF;
    padding: 4px;
    border: 1px solid #CED4CA;
    height: 45px;
    border-radius: 0 0 4px 4px;
}