﻿div[ML_PageControl_Key=GraphsContainer] {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
}

div[ML_PageControl_Key=GraphContainer] {
	border: 2px solid var(--border-color-container);
	display: flex;
	flex-direction: column;
	width: 144px;
	height: 175px;
	margin: 3px;
}

	div[ML_PageControl_Key=GraphContainer] [ML_PageControl_Key=Title] {
		font-size: 16px;
		font-weight: bolder;
		color: var(--label-color-main);
		cursor: default;
		background-color: var(--background-color-container-active-header);
		border-bottom: solid 1px var(--border-color-container);
		width: 100%;
		text-align: center;
	}

div[ML_PageControl_Key=GraphContainerMultiple] {
	border: 2px solid var(--border-color-container);
	display: flex;
	flex-direction: column;
	width: auto;
	height: 100%;
}

	div[ML_PageControl_Key=GraphContainerMultiple] [ML_PageControl_Key=GraphContainerItem] {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	div[ML_PageControl_Key=GraphContainerMultiple] [ML_PageControl_Key=Title] {
		font-size: 16px;
		font-weight: bolder;
		color: var(--label-color-main);
		cursor: default;
		background-color: var(--background-color-container-active-header);
		border-bottom: solid 1px var(--border-color-container);
		width: 100%;
		text-align: center;
	}

div[ML_PageControl_Key=chartWrapper] {
	height: 140px;
	width: 140px;
	position: relative;
	margin-top: 5px;
}

	div[ML_PageControl_Key=chartWrapper] [ML_PageControl_Key=chartjs] {
		position: relative;
		z-index: 10;
		max-height: 140px;
		max-width: 140px;
	}

	div[ML_PageControl_Key=chartWrapper] [ML_PageControl_Key=tooltipGeneric] {
		font-family: Arial, sans-serif;
		font-style: normal;
		display: flex;
		justify-content: center;
		position: absolute;
		z-index: 0;
		height: 100%;
		padding: 0;
		opacity: 1 !important;
		align-items: center;
		color: var(--label-color-main) !important;
		height: 140px;
		width: 140px;
	}

	div[ML_PageControl_Key=chartWrapper] [ML_Status=tooltipNumber] {
		left: 0;
		right: 0;
		top: 0;
	}

	div[ML_PageControl_Key=chartWrapper] [ML_Status=tooltipContainer] {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
	}

		div[ML_PageControl_Key=chartWrapper] [ML_Status=tooltipContainer] [ML_PageControl_Key=tooltipText] {
			font-size: 25px !important;
			font-weight: 800 !important;
		}

		div[ML_PageControl_Key=chartWrapper] [ML_Status=tooltipContainer] [ML_PageControl_Key=tooltipLabel] {
			font-size: 12px !important;
			font-weight: 600 !important;
			width: 85px;
		}

	div[ML_PageControl_Key=chartWrapper] .Thumbs {
		font-size: 50px;
		color: green;
		padding: 20px;
		border-radius: 50%;
	}

[ML_PageControl_Key=GraphChartWrapper_External] {
	text-align: center;
}

	[ML_PageControl_Key=GraphChartWrapper_External] span[ML_PageControl_Key=Info] {
		font-size: 12px;
	}



/******************************************************************************************/
[ML_PageControl_Key=ChartsContainer] {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
}

	[ML_PageControl_Key=ChartsContainer] [ML_PageControl_Key=ChartContainer] {
		width: 300px;
		height: 180px;
	}

		[ML_PageControl_Key=ChartsContainer] [ML_PageControl_Key=ChartContainer] .highcharts-title {
			color: var(--label-color-main) !important;
		}
