/* 
    Created on : 23.11.2015
    Author     : Crumina
	Styles for : Piechart module
*/

.dfd-piecharts {
	position: relative;
	text-align: center;
	canvas {
		.abs();
		max-width: 100%;
		top: 0;
		left: 50%;
		.translate(-50%; 0);
	}
	.delimiter {
		display: inline-block;
		padding-bottom: 5px;
		margin-bottom: 5px;
		border-bottom: 1px solid fade(#000, 10%);
		width: 80%;
	}
	.piecharts-number {
		font-style: @widget-title-h1-font-style;
		font-weight: @widget-title-h1-font-weight;
		font-family: @widget-title-h1-font-family;
		color: @widget-title-h1-color;
		font-size: 27px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		display: inline-block;
	}
	.inner-circle {
		.rel();
		width: 150px;
		max-width: 100%;
		height: 150px;
		line-height: 150px;
		margin: 0 auto;
		margin-bottom: 20px;
		> * {
			line-height: inherit
		}
		i {
			font-size: 36px;
			color: @widget-title-h1-color;
		}
	}
	&.layout-3 {
		.inner-circle i {
			font-size: 27px;
			margin-right: 13px;
		}
		.piecharts-number,
		.featured-icon{
			position: relative;
			vertical-align: middle;
		}
	}
	&.layout-4 {
		.module-icon{
			margin-right: 20px;
		}
		.module-icon i{
			font-size: 42px;
			color:@widget-title-h1-color;
		}
		.delimiter {
			width: 100%;
		}
		.title-wrap {
			text-align: left;
		}
		.module-icon,
		.title-wrap {
			display: inline-block;
			vertical-align: middle;
		}
	}
	&.counterclock-wise-animation {
		canvas{
			.transform(rotateY(180deg) translateX(50%));
		}
	}
}