/* Circle stats
=================================================================== */
.tempStats {
	text-align: center !important;
}

.tempStatBox {
	width: 120px;
	padding: 25px 0px;
	.box-sizing(content-box);
	margin: 0 auto;
	
	.tempStat {
		position: relative;
		font-size: 34px;
		line-height: 100px;
		.border-radius(50em);
		border: 10px solid #FFF;
		background: #f9f9f9;
		height: 100px;
		width: 100px;
		text-align: center;
		margin: 0 auto;
		.box-sizing(content-box);
		
		&:before {
			content:"";
			top: -10px;
			left: -10px;
		    height: 120px;
			width: 120px;
		    position:absolute;
		   .border-radius(50em);
		    background: transparent;
		    .box-shadow-double(inset 0px 1px 1px rgba(0,0,0,.3), 0px 1px 0px #fff);
			.box-sizing(content-box);
		}

		&:after {
			content:"";
			top: 0px;
			left: 0px;
		    height: 98px;
			width: 98px;
		    position:absolute;
		   	.border-radius(50em);
			border: 1px solid #fff;
		    background: transparent;
		    .box-shadow(0px 0px 1px rgba(0,0,0,.4));
			.box-sizing(content-box);
		}
	}
	
	.tempStat.t0 {
		border-color: @lightBlue;
	}

	.tempStat.t20 {
		border-color: @green;
	}

	.tempStat.t40 {
		border-color: @yellow;
	}

	.tempStat.t60 {
		border-color: @lightOrange;
	}

	.tempStat.t80 {
		border-color: @orange;
	}

	.tempStat.t100 {
		border-color: @red;
	}
	
	span {
		width: 100%;
		text-align: center;
		display: block;
		margin-top: 10px;
		text-shadow: 0px 1px 0px #fff;
	}
}

/* Circle stats
=================================================================== */
.circleStats {text-align: center; position: relative;}
.circleStatsItem {
	position: relative;
	background: rgba(255,255,255,0.7);
	.box-shadow-double(inset 0 0px 0 2px rgba(0,0,0,.2), 0 0px 0 4px rgba(0,0,0,.1));
	.border-radius(50em);
	width:120px; 
	height: 120px;
	margin: 10px auto;
	
	
	i {
		font-size: 30px; 
		position: absolute; 
		top:30%; 
		margin-top: 0px; 
		width: 100%; 
		text-align: center
	}
	
	input {
		cursor: default;
		.box-shadow;
		border:none;
		height: auto;
		position: absolute;
		top:15px;
		left: 120px;
		padding: 5px 0px !important;
		border-color: rgba(0, 0, 0, 0.8);
		
		&:focus {
			outline: 0;
			outline: thin dotted 0;
		  	.box-shadow;
		}
	}
	
	.plus {
		font-size: 16px; 
		position: absolute; 
		top:55%; 
		margin-left: 30px;
	}

	.percent {
		font-size: 14px;
		position: absolute;
		top:57%; 
		margin-left: 78px;
	}
}

.circleStatsItem.orange, .circleStatsItem.orange i {color:@orange; }
.circleStatsItem.lightorange, .circleStatsItem.lightorange i {color:@lightOrange; }
.circleStatsItem.blue, .circleStatsItem.blue i {color:@blue; }
.circleStatsItem.green, .circleStatsItem.green i {color:@green; }
.circleStatsItem.yellow, .circleStatsItem.yellow i {color:@yellow; }
.circleStatsItem.pink, .circleStatsItem.pink i {color:@pink; }

.circleStatsItemBox {
	position: relative;
	background: @lightBlue;
	width:100%;
	min-width: 130px; 
	height: 160px;
	margin: 10px auto;
	padding-top: 40px;
	.box-sizing(content-box);
	
	.header {
		background: rgba(255,255,255,0.2);
		color: rgba(255,255,255,0.9);
		width: 100%; 
		height: 20px;
		padding: 5px 0px;
		position: absolute;
		top: 0px;
		.box-sizing(content-box);
	}
	
	.footer {
		background: rgba(0,0,0,0.1);
		color: rgba(255,255,255,0.9);
		width: 100%; 
		height: 20px;
		padding: 5px 0px;
		position: absolute;
		bottom: 0px;
		.box-sizing(content-box);
		
		.count{
			font-size: 10px;
		}
		
		.value{
			font-weight: bold;
		}	
	}
	
	.percent {
		font-size: 12px;
		position: absolute;
		top:110px; 
		width: 100%; 
		left: 0px;
		text-align: center;
		color: rgba(255,255,255,0.9);
	}
	
	input {
		cursor: default;
		.box-shadow;
		border:none;
		height: auto;
		position: absolute;
		top:30px;
		padding: 5px 0px !important;
		border-color: rgba(0, 0, 0, 0.8);
		
		&:focus {
			outline: 0;
			outline: thin dotted 0;
		  	.box-shadow;
		}
		
	}
	
}