@title: inherit;
@percent: inherit;
@per-size: inherit;
@size: 0;

.iw-so-circle {

	.iw-so-circle-title {
		color: @title;
	}

	.iw-so-circle-chart {
		position: relative;
		min-height: (@size + 10px);

		canvas {
			max-width: 100%;
		}

	}

	.iw-so-circle-percent {
		position: absolute;
		top: 50%;
		left: 50%;
		-moz-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		margin: 0;
		font-size: @per-size;
		color: @percent;
	}

}