.rect-auto, .db-state-circle.db-state-3 .slice, .db-state-circle.db-state-4 .slice
	{
	clip: rect(auto, auto, auto, auto);
}

.pie, .db-state-circle .bar, .db-state-circle.db-state-3 .fill,
	.db-state-circle.db-state-4 .fill {
	position: absolute;
	border: 0.15em solid #307bbb;
	width: 0.70em;
	height: 0.70em;
	clip: rect(0em, 0.5em, 1em, 0em);
	border-radius: 50%;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

.pie-fill, .db-state-circle.db-state-3 .bar:after, .db-state-circle.db-state-3 .fill,
	.db-state-circle.db-state-4 .bar:after, .db-state-circle.db-state-4 .fill
	{
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.db-state-circle {
	position: relative;
	font-size: 140px;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background-color: #ececed;
}

.db-state-circle *, .db-state-circle *:before, .db-state-circle *:after
	{
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.db-state-circle.center {
	float: none;
	margin: 0 auto;
}

.db-state-circle>span {
	position: absolute;
	width: 100%;
	z-index: 1;
	left: 0;
	top: 0;
	width: 5em;
	line-height: 5em;
	font-size: 0.2em;
	color: #d7d7d7;
	display: block;
	text-align: center;
	white-space: nowrap;
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	transition-property: all;
	-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;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.db-state-circle:after {
	position: absolute;
	top: 0.15em;
	left: 0.15em;
	display: block;
	content: " ";
	border-radius: 50%;
	background-color: #fff;
	width: 0.70em;
	height: 0.70em;
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in;
	-moz-transition-timing-function: ease-in;
	-o-transition-timing-function: ease-in;
	transition-timing-function: ease-in;
}

.db-state-circle .slice {
	position: absolute;
	width: 1em;
	height: 1em;
	clip: rect(0em, 1em, 1em, 0.5em);
}

.db-state-circle.db-state-1 .bar {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.db-state-circle.db-state-2 .bar {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.db-state-circle.db-state-3 .bar {
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
}

.db-state-circle.db-state-4 .bar {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}

.db-state-circle.db-state-1 .bar, .db-state-circle.db-state-1 .fill {
	border-color: #d1d1d1 !important;
}

.db-state-circle.db-state-2 .bar, .db-state-circle.db-state-2 .fill {
	border-color: #ffc902 !important;
}

.db-state-circle.db-state-3 .bar, .db-state-circle.db-state-3 .fill {
	border-color: #0093dc !important;
}

.db-state-circle.db-state-4 .bar, .db-state-circle.db-state-4 .fill {
	border-color: #329f2f !important;
}

.db-state-circle.db-state-1 {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.db-state-circle.db-state-2 {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.db-state-circle.db-state-3 {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.db-state-circle.db-state-4 {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}