/* Load animation */
@-webkit-keyframes load{0%{stroke-dashoffset:0}}
@keyframes load{0%{stroke-dashoffset:0}}
@-webkit-keyframes loadbar{
   0% {left: 0px;width: 300px;}
}
@keyframes loadbar{
    0% {left: 0px; width: 300px;}
}
@-webkit-keyframes loadbarschedule{
   0% {left: 0px;width: 100px;}
}
@keyframes loadbarschedule{
    0% {left: 0px; width: 100px;}
}

/* Container */

.progress {    
    position: relative;
    display: inline-block;
    padding: 0;
    text-align: center;    
    color: #93A2AC;
    font-family: 'Open Sans', sans-serif;
}
.progress>.dtotal{    
    position: absolute;
    width: 100%;
    top: 2.5rem;
    left: 0;
    color: #93A2AC;
    font-size: 1.2rem;
    text-align: center;
}

/* Item */
.progress>li {
    display: inline-block;
    position: relative;
    text-align: center;    
    font-weight:100;
}
.progress>li:before {
    content: attr(data-name);
    position: absolute;
    width: 100%;
    top: 6.5rem;
    left: 0;
    font-size: 1.2rem;
    text-align: center;
}
.progress>li:after {
    content: attr(data-percent);
    position: absolute;
    width: 100%;
    top: 4.5rem;
    left: 0;
    font-size: 2rem;
    text-align: center;
}
.progress svg {
    width: 10rem;
    height: 10rem;
}
.progress svg:nth-child(2) {
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
    fill: none;
    stroke-width: 25;
    stroke-dasharray: 629;
    stroke: rgba(251, 243, 234, 0.9);
    -webkit-animation: load 5s;
    -moz-animation: load 5s;
    -o-animation: load 5s;
    animation: load 5s;
}

.progressbar {
    position: relative;
    display: inline-block;
    padding: 0;
    text-align: center;    
    font-size: 14px;
    line-height: 14px;
}
/* Item */
.progressbar>li {
    display: block;
    position: relative;        
    padding: 2px 0px;
}
.progressbar>li:before {
    content: attr(data-name);
    position: relative;
    display: inline-table;
    width: 150px;
    text-align: left;
    color: #4d4d4d;
    
}
.progressbar>li:after {
    font-size: 11px;
    content: attr(data-percent);
    position: relative;
    display: inline-table;
    right:0; 
    top :0;
}
.progressbar .group{
    position: relative;
    display: inline-table;
}
.progressbar .bar-back,
.progressbar .bar-back-red{
    position: relative;
    width: 300px;
    height: 5px;
    background-color: #96ca4e;
    background: -webkit-linear-gradient(#94c84a, #8ac142); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#94c84a, #8ac142); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#94c84a, #8ac142); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#94c84a, #8ac142); /* Standard syntax */
    
     border-radius: 3px;
}
.progressbar .bar-back{    
    background-color: #96ca4e;
    background: -webkit-linear-gradient(#94c84a, #65a018); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#94c84a, #65a018); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#94c84a, #65a018); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#94c84a, #65a018); /* Standard syntax */   
}
.progressbar .bar-back-red{    
    background-color: #f7464a;
    background: -webkit-linear-gradient(#f7464a, #c1292c); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#f7464a, #c1292c); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#f7464a, #c1292c); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#f7464a, #c1292c); /* Standard syntax */   
}
.progressbar .bar-front{ 
    display: inline-table;
    position: absolute;   
    height: 5px;
    top: 0px; 
    
    background: -webkit-linear-gradient(#f3f4f6, #edf1f2); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#f3f4f6, #edf1f2); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#f3f4f6, #edf1f2); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#f3f4f6, #edf1f2); /* Standard syntax */
      
    border: 1px solid #d4d5d7;
    border-radius:3px;
    -webkit-animation: loadbar 5s;
    -moz-animation: loadbar 5s;
    -o-animation: loadbar 5s;
    animation: loadbar 5s;
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards;     
}



.progressschedule {
    position: relative;
    display: inline-block;
    padding: 0;
    text-align: center;    
}
.progressschedule>div {
    display: block;
    position: relative;      
    padding: 2px 0px;
}
.progressschedule>div:after {
/*    font-size: 11px;*/
    content: attr(data-percent);
    position: relative;
    display: inline-table;
    right:0; 
    top :0;
}
.progressschedule .group{
    position: relative;
    display: inline-table;
}
.progressschedule .bar-back{
    position: relative;
    width: 100px;
    height: 5px; 
    background-color: #96ca4e;
    background: -webkit-linear-gradient(#94c84a, #65a018); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#94c84a, #65a018); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#94c84a, #65a018); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#94c84a, #65a018); /* Standard syntax */   
    
     border-radius: 3px;
}

.progressschedule .bar-front{ 
    display: inline-table;
    position: absolute;   
    height: 5px;
    top: 0px; 
    
    background: -webkit-linear-gradient(#f3f4f6, #edf1f2); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#f3f4f6, #edf1f2); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#f3f4f6, #edf1f2); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#f3f4f6, #edf1f2); /* Standard syntax */
      
    border: 1px solid #d4d5d7;
    border-radius:3px;
    -webkit-animation: loadbarschedule 5s;
    -moz-animation: loadbarschedule normal 5s;
    -o-animation: loadbarschedule 5s;
    animation: loadbarschedule 5s;
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards;     
}