html{
    background: #f7f7f7;
    font-family: "Arial", sans-serif; 
    color: #6d6d6d;
}
/* termina los tamaños de las columnas */
table tr:nth-child(even) {
    background-color: #eee;
}
table tr:nth-child(odd) {
   background-color:#fff;
}

/* progress bar */
.progress{
  -webkit-animation: progress 1s linear infinite;
	-moz-animation: progress 1s linear infinite;
	animation: progress 1s linear infinite;
	background-repeat: repeat-x;
	background-size: 30px 30px;
	background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-color: CornflowerBlue;
	box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3);
    /*background-image: url(pbar-ani-m.gif)*/
}
.progress-min{
    -webkit-animation: progress 1s linear infinite;
	-moz-animation: progress 1s linear infinite;
	animation: progress 1s linear infinite;
	background-repeat: repeat-x;
	background-size: 30px 30px;
	background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-color: #d43535;
	box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3);
    /*background-image: url(pbar-ani-orange.gif)*/
}

.progress-mid{
    -webkit-animation: progress 1s linear infinite;
	-moz-animation: progress 1s linear infinite;
	animation: progress 1s linear infinite;
	background-repeat: repeat-x;
	background-size: 30px 30px;
	background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-color: #ea8209;
	box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3);
    /*background-image: url(pbar-ani.gif)*/
}
.progress-average{
    -webkit-animation: progress 1s linear infinite;
	-moz-animation: progress 1s linear infinite;
	animation: progress 1s linear infinite;
	background-repeat: repeat-x;
	background-size: 30px 30px;
	background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-color: #00cb08;
	box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3);
    /*background-image: url(pbar-ani-green.gif)*/
}
@-webkit-keyframes progress
{
to {background-position: 30px 0;}
}
@-moz-keyframes progress
{
to {background-position: 30px 0;}
}

@keyframes progress
{
to {background-position: 30px 0;}
}
.progressBar {
    width: 300px;
    height: 30px;
    margin: 0 auto;
    border: 1pt solid #111;
    border-radius: 4px;
	background: #404040;
	border: 1px solid #272727;
	overflow: hidden;
    box-shadow: rgb(96, 96, 96) 0 0px 20px -1px;
}
.progressBar div {
    height: 300px;
    color: #404040;
    text-align: right;
    line-height: 30px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
	border-right: 1px solid #272727;
    /*background-image: url(pbar-ani.gif);*/
}