﻿
@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 1rem 0
    }

    to {
        background-position: 0 0
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 1rem 0
    }

    to {
        background-position: 0 0
    }
}

.progress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: .25rem;
    -moz-border-radius: .25rem
}

.comment-left-box .progress-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    background-color: #bdbdbd;
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease
}

.comment-left-box progress {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    height: 10px;
    width: 100%;
    margin: 10px 10px 10px 10px
}

.comment-left-box .progressWrapper {
    width: 100%;
    margin: auto;
    padding: 1px 0
}

    .comment-left-box .progressWrapper .progressBar {
        margin-top: 5px;
        height: 2px;
        background-color: #bdbdbd
    }

    .comment-left-box .progressWrapper .now {
        position: relative;
        top: -8px;
        height: 12px;
        width: 2%;
        background-color: #f5a623;
        transition-duration: 3s
    }

.payment-header .progressWrapper {
    width: 100%;
    margin: auto;
    padding: 1px 0;
    margin-top: 25px
}

    .payment-header .progressWrapper .progressBar {
        margin-top: 5px;
        height: 2px;
        background-color: #bdbdbd
    }

    .payment-header .progressWrapper .now {
        position: relative;
        top: -4px;
        height: 5px;
        width: 35%;
        background-color: #f5a623;
        transition-duration: 1s
    }

.progress-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    background-color: #a3a3a3;
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease
}
