.chart-box {
	color: $color_dark;
	
	.pie {
		width: 130px;
		height: 130px;
		margin: 0 auto 20px;
		position: relative;

		canvas {
			position: relative;
			z-index: 4;
		}
	}

	.pie-content {
		width: 128px;
		height: 128px;
		border-radius: 50%;
		line-height: 126px;
		font-weight: bold;
		font-size: 30px;
		text-align: center;
		position: absolute;
		top: 1px;
		left: 1px;
		z-index: 2;

		h4, span {
			color: inherit;
		}

		span, span:before {
			line-height: inherit;
		}

		.icon,
		.icon-large {
			vertical-align: middle;
			font-size: 110%;
		}

		.icon-large {
			font-size: 46px;
			vertical-align: -10px;
		}
	}

	.percent-wrap {
		vertical-align: 0px;
		margin-bottom: 10px;
		display: inline-block;

		h4 {
			display: inline;
			font-weight: 600;
			font-size: 28px;
		}
	}

	.content {
		text-align: center;
	}

	.subtitle {
		font-size: $font_small-size;
	}

	h3 {
		font-size: $font_main-size;
	}

	// Right & Left content
	&.chart-right,
	&.chart-left {
		position: relative;

		.pie {
			position: absolute;
			top: 50%;
			left: 0px;
			margin-top: -65px;
		}

		.content {
			min-height: 140px;
			height: 140px;
			margin-left: 145px;
			text-align: left;
			display: table;
			
			.wrap {
				display: table-cell;
				vertical-align: middle;
			}
		}
	}

	&.chart-left {
		text-align: right;
		overflow: hidden;

		.pie {
			left: auto;
			right: 0;
		}

		.content {
			margin-left: 0;
			margin-right: 145px;
			text-align: right;
			float: right;
		}
	}
}