/****************************************************************
 *
 * CSS Percentage Circle
 * Based on CSS provided by Andre Firchow
 *
*****************************************************************/

.prog-circle .slice {
  position : absolute;
  width    : 1em;
  height   : 1em;
  clip     : rect(0em, 1em, 1em, 0.5em);
}
.prog-circle .slice.clipauto {
  clip : rect(auto, auto, auto, auto);
}
.prog-circle .fill, .prog-circle .bar {
  position              : absolute;
  border                : none!important;/*0.00em solid #90c844;*/
  width                 : 1em!important;
  height                : 1em!important;
  clip                  : rect(0em, .5em, 1em, 0em);
  -webkit-border-radius : 50%;
  -moz-border-radius    : 50%;
  -ms-border-radius     : 50%;
  -o-border-radius      : 50%;
  border-radius         : 50%;
  -webkit-transform     : rotate(20deg);
  -moz-transform        : rotate(20deg);
  -ms-transform         : rotate(20deg);
  -o-transform          : rotate(20deg);
  transform             : rotate(20deg);
}
.fillprogressblue {
	box-shadow:inset 0px 0px 0px 0 #eeeeee ;
	background: #31b0d5;
	background: -moz-linear-gradient(top, #31b0d5 0%, #31b0d5 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, #31b0d5), color-stop(100%, #31b0d5));
	background: -webkit-linear-gradient(top, #31b0d5 0%, #31b0d5 100%);
	background: -o-linear-gradient(top, #31b0d5 0%, #31b0d5 100%);
	background: -ms-linear-gradient(top, #31b0d5 0%, #31b0d5 100%);
	background: linear-gradient(top, #31b0d5 0%, #31b0d5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#31b0d5', endColorstr='#31b0d5', GradientType=1 );
}
.fillprogressred {
	box-shadow:inset 0px 0px 0px 0 #eeeeee ;
	background: #ff7158;
	background: -moz-linear-gradient(top, #ff7158 0%, #ff7158 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, #ff7158), color-stop(100%, #ff7158));
	background: -webkit-linear-gradient(top, #ff7158 0%, #ff7158 100%);
	background: -o-linear-gradient(top, #ff7158 0%, #ff7158 100%);
	background: -ms-linear-gradient(top, #ff7158 0%, #ff7158 100%);
	background: linear-gradient(top, #ff7158 0%, #ff7158 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7158', endColorstr='#ff7158', GradientType=1 );
}
.prog-circle {
  position              : relative;
  font-size             : 120px;
  width                 : 1em;
  height                : 1em;
  -webkit-border-radius : 50%;
  -moz-border-radius    : 50%;
  -ms-border-radius     : 50%;
  -o-border-radius      : 50%;
  border-radius         : 50%;
  float                 : left;
  margin                : 0 0.1em 0.1em 0;
  background-color      : #eeeeee;
}
.prog-circle .percenttext {
  position                           : absolute;
  width                              : 100%;
  height                             : 1em;
  z-index                            : 1;
  margin                             : auto;
  top                                : 0;
  left                               : 0;
  right                              : 0;
  bottom                             : 0;
  font-size                          : 0.2em;
  font-weight:700;
  color                              : #31b0d5;
  display                            : block;
  text-align                         : center;
  white-space                        : nowrap;
  line-height                        : 100%;
  -webkit-transition-duration        : 0.2s;
  -moz-transition-duration           : 0.2s;
  -o-transition-duration             : 0.2s;
  transition-duration                : 0.2s;
  -webkit-transition-timing-function : ease-out;
  -moz-transition-timing-function    : ease-out;
  -o-transition-timing-function      : ease-out;
  transition-timing-function         : ease-out;
}

.prog-circle .percenttext::after {font-size                          : 0.7em;content               : " %";}

.prog-circle .after {
	position              : absolute;
	top                   : 0.08em;
	left                  : 0.08em;
	display               : block;
	content               : " %";
	-webkit-border-radius : 50%;
	-moz-border-radius    : 50%;
	-ms-border-radius     : 50%;
	-o-border-radius      : 50%;
	border-radius         : 50%;
	width                 : 0.84em;
	height                : 0.84em;
	background-color:#eeeeee;
	box-shadow:inset 2px 2px 15px 1px #b9babc ;
}

.progressblue,
.progressblue div,
.progressred,
.progressred div
{
	/*box-sizing:content-box;*/
}
.progressblue .prog-circle .percenttext{
	color:#31b0d5;font-weight:bold;
}
.progressred .prog-circle .percenttext{
	color:#ff7158;font-weight:bold;
}

.circle-progress-wrapper {
	margin:5px auto 20px auto;
	border-radius:50%;
	padding:10px;
	width:130px;
	height:130px;
	/*box-shadow:inset 0 5px 10px 1px #b9babc ;*/
	background:transparent;
	/*
	background: #fefefe;
	background: -moz-linear-gradient(45deg, #fefefe 0%, #d2d3d7 100%);
	background: -webkit-gradient(left bottom, right top, color-stop(0%, #fefefe), color-stop(100%, #d2d3d7));
	background: -webkit-linear-gradient(45deg, #fefefe 0%, #d2d3d7 100%);
	background: -o-linear-gradient(45deg, #fefefe 0%, #d2d3d7 100%);
	background: -ms-linear-gradient(45deg, #fefefe 0%, #d2d3d7 100%);
	background: linear-gradient(45deg, #fefefe 0%, #d2d3d7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#d2d3d7', GradientType=1 );
	*/
}