.progress-bar {
    background-color: #ffffff;
    height: 8px;
    padding: 5px;
    width: 60px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 15px #5d6f7c inset, 0 1px 0 #5d6f7c;
    -webkit-box-shadow: 0 1px 15px #5d6f7c inset, 0 1px 0 #5d6f7c;
    box-shadow: 0 1px 15px #5d6f7c inset, 0 1px 0 #5d6f7c;
}

.progress-bar span {
    display: inline-block;
    background-color: #5576c3;
    height: 100%;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .5) inset;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .5) inset;
    -webkit-transition: width .4s ease-in-out;
    -moz-transition: width .4s ease-in-out;
    -ms-transition: width .4s ease-in-out;
    -o-transition: width .4s ease-in-out;
    transition: width .4s ease-in-out;
}

.progress-barRed {
    background-color: #ffffff;
    height: 8px;
    padding: 5px;
    width: 60px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 15px #5d6f7c inset, 0 1px 0 #5d6f7c;
    -webkit-box-shadow: 0 1px 15px #5d6f7c inset, 0 1px 0 #5d6f7c;
    box-shadow: 0 1px 15px #5d6f7c inset, 0 1px 0 #5d6f7c;
}

.progress-barRed span {
    display: inline-block;
    background-color:#afafaf;
    height: 100%;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .5) inset;
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5) inset;
    box-shadow: 0 0 0 rgba(0, 0, 0, .5) inset;
    -webkit-transition: width .4s ease-in-out;
    -moz-transition: width .4s ease-in-out;
    -ms-transition: width .4s ease-in-out;
    -o-transition: width .4s ease-in-out;
    transition: width .4s ease-in-out;
}