@media (max-width: 801px) {
	#pie_chart_pane {
		overflow-y: hidden;
		width: 100% !important;
	}
}

@media (max-width: 480px) {
	.nvtooltip table {
		margin: 2px !important;
	}
	
	.nvtooltip table td {
		padding: 1px 3px 1px 0 !important;
	}
}

@media (min-width:321px) and (max-width: 480px) {
	.nvtooltip table td {
		max-width: 90px;
	}
	.nvtooltip table td.value {
		max-width: 70px;
	}
}
@media (max-width: 380px) {
	.nvtooltip table td {
		max-width: 60px;
	}
	.nvtooltip table td.value {
		max-width: 50px;
	}
}
/* First X axis stroke to be more darker */
.nvd3 .nv-y .zero line {
	stroke: #404040 !important;
}

#trend-chart-tab, #column-chart-tab, #pie-chart-tab {
	height: calc(100% + 32px)!important;
}

#trend_chart_pane {
	padding-top: 32px;
}

#pie_chart_pane, #trend_chart_pane, #column_chart_pane {
	width: auto;
	height:100% !important;
}


/* *** Separate chart legend container - October 2017 *** */
@media (max-width: 500px), (max-height: 500px)  {
	
	#chart-legend-toggle {
		position: absolute;
		top: 5px;
		right: 8px;
		border-width: 1px;
		z-index: 21;
	}
	
	#chart-legend-container {
		position: absolute;
		top: 8px;
		left: 8px;
		right: 8px;
		border-radius: 2px;
		border: 1px solid #cccccc;
		box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.1);
		padding: 8px;
		text-align: left;
		background-color: #FFFFFF;
		display: none;
		max-height: calc(100vh - 210px);
		overflow-y: auto;
	}
	
	#chart-legend-container.open {
		display: block;
	}
	
	#chart-legend-toggle.hidden {
		display: none;
	}

	#chart-legend-container li {
		display: flex;
		align-items: center;
		padding-top: 3px;
		padding-bottom: 3px;
	}

	#chart-legend-container li svg {
		flex: none;
	}

	#chart-legend-container li span {
		text-align: left;
		flex: 1 1;
		margin-top: auto;
		margin-bottom: auto;
	}

	#chart-legend-container.trend {
		top: 32px;
	}

	#chart-legend-container.pie {
		top: 0;
	}
}

@media (min-width: 501px) and (min-height: 501px)  {
	#chart-legend-container {
		display: none;
	}
	#chart-legend-toggle {
		display: none;
	}
}