/*------------------------------------------------*/
/*	Chart
/*------------------------------------------------*/

/* easy pie chart */
.easy-pie-chart {
	position: relative;
	width: 110px;
	margin: 0 auto;
	margin-bottom: 15px;
	text-align: center;

	canvas {
		position: absolute;
		top: 0;
		left: 0;
	}

	.percent {
		@include inline-block;

		line-height: 110px;
		z-index: 2;

		&:after {
			content: '%';
			margin-left: 0.1em;
			font-size: .8em;
		}
	}

	&#cpu-usage {
		width: 130px;

		.percent {
			line-height: 128px;
		}
	}

}

/* chart navigation */
.chart-nav {
	margin-bottom: 40px;

	@include max-screen($break-xsmall) {
		strong {
			display: block;
		}
	}

	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: inline;
		border-bottom: none;
		margin-bottom: 30px;

		li {
			margin: 0;
			padding: 0;
			display: inline;

			a {
				font-size: 0.9em;
				border: none;
				padding: 5px 8px;
				color: $base-font-color-dark;

				&:hover, a:focus {
					border: none;
					text-decoration: none;
					background-color: $body-bg-color;
					border-bottom: 1px solid #E1E1E1;
					text-decoration: none;
				}
			}

			&.active {
				a, a:hover, a:focus {
					background-color: $body-bg-color;
					border-bottom: 1px solid #E1E1E1;
					text-decoration: none;
				}
			}
		}
	}
}

.chart-content {
	margin-bottom: 15px;
}

#line-chart1 {
	height: 250px;
}

/* flot chart */
.flot-tooltip {
	border: 1px solid #ccc;
	background-color: rgba(#fff, 0.7);
	color: #aaa;
}

#flotTip {
	@include border-radius(0 !important);

	background-color: #f3f3f3 !important;
	color: $base-font-color-dark !important;
	border-color: darken(#f3f3f3, 20%) !important;
}

.sales-chart,
.demo-flot-chart {
	width: 100%;
	height: 350px;
}

#visit-chart {
	height: 300px;
}

#investment-donut-chart {
	height: 300px;
}

.widget.real-time-chart {
	.widget-content {
		padding-right: 40px;
	}

	#demo-real-time-chart {
		font-size: 12px;
		padding-right: 40px;

		@include max-screen($break-small) {
			.flot-x-axis .flot-tick-label {
				display: none;
			}
		}
	}
}


.donut-label {
	font-size: 12px;
	color: #FFF;
	background: rgba(0, 0, 0, 0.5);
	text-align: center;
	padding: 3px;
}

.secondary-stat {
	padding: 20px 0;

	.secondary-stat-item {
		color: #506167;
		padding: 5px 20px 0 20px;

		.data {
			float: left;
			margin-bottom: 0;
		}

		.inlinesparkline {
			@include inline-block;

			position: absolute;
			left: 15px;
			bottom: 0;
		}
	}
}

/* sparkline tooltip fix */
.jqstooltip {
	@extend #flotTip;

	width: auto !important;
	height: auto !important;
}

.jqsfield {
	color: $base-font-color-dark !important;
}

.widget-sparkline {
	.sparkline-stat-item {
		padding: 8px 0;
		margin-bottom: 30px;

		strong {
			display: block;
			font-size: 1.5em;
			font-weight: 300;
		}
	}
}

/* dashboard mini pie chart */
.panel-pie-chart {
	.panel-body {
		text-align: center;
	}

	ul {
		@include inline-block;
		margin-bottom: 0;

		> li {
			text-align: center;
			font-size: 0.85em;
			padding-right: 24px;
			margin-bottom: 5px;
		}
	}
}

/* big number with sparkline */
.big-number {
	font-family: $secondary-font-family-light;
	font-size: 3.5em;
}

.big-number-stat {
	span {
		@include inline-block;
	}

	em {
		display: block;
		font-style: normal;
	}

	.col-left {
		float: left;
		margin-right: 10px;
		line-height: 1.8;
	}

	.col-right {
		float: right;
		position: relative;
		top: 1.5em;

		@include max-screen($break-xsmall) {
			float: none;
		}
	}

	@include max-screen($break-xsmall) {
		span {
			display: block;
		}

		.col-left {
			float: none;
		}

		.col-right {
			top: 0;
			margin-bottom: 15px;
		}
	}
}

/* interactive charts, choices toggle checkbox */
.widget-chart-toggle-series {
	#choices {
		@include max-screen($break-medium) {
			margin-top: 30px;

			> div {
				@include inline-block;
			}
		}
	}
}

/* d3 heatmap */
#demo-d3-heatmap svg {
	max-width: 100%;
	max-height: 100%;
}

rect.bordered {
	stroke: #E6E6E6;
	stroke-width: 1px;
}

text {
	&.mono {
		font-size: 12px;
		fill: #aaa;
	}

	&.axis-workweek {
		fill: #000;
	}

	&.axis-worktime {
		fill: #000;
	}
}

/* d3 barchart */
#demo-d3-barchart svg {
	max-width: 100%;
	max-height: 100%;
}

.bar {
	&.positive {
		fill: #1D92AF;
	}

	&.negative {
		fill: #BD0026;
	}
}

.axis {
	text {
		font-size: 10px;
	}

	path,
	line {
		fill: none;
		stroke: #646464;
		shape-rendering: crispEdges;
	}
}

/* number-chart widget, number on the left and chart on the right */
.number-chart {
	padding: 15px 0 0 0;
	margin: 0 30px;
	border-bottom: 2px solid $line-color;

	@include max-screen($break-xsmall) {
		width: auto;
	}

	.number {
		height: 103px;
		min-width: 105px;
		padding-top: 1.5em;
		font-weight: 300;

		@include max-screen($break-xsmall) {
			float: none !important;
			text-align: center;
			height: 70px;
		}
		
		> span {
			font-size: 22px;
			line-height: 1.4;

			+ span {
				display: block;
				font-size: 14px;
				font-weight: normal;
				line-height: 2;
			}
		}

		i {
			font-size: 12px;
		}
	}

	.mini-stat {
		padding: 20px 0;
		text-align: center;

		p {
			margin-bottom: 0;
			margin-top: 5px;
			font-size: 11px;
		}

		i {
			margin-right: 2px;
			font-size: 18px;
			position: relative;
			top: 2px;
		}
	}
}


