:root{
	--wrapper_height: var(--table_cell_height);
	--wrapper_width: var(--table_cell_width);
	--graph_margin: 60px;
	--margin: 0px;
	--height_graph: calc(var(--wrapper_height) - 2 * var(--graph_margin));
	--width_graph: calc(var(--wrapper_width) - 2 * var(--graph_margin));

	--y_lines: 16;
	--x_lines: 10;

	--graph_wrapper_background: var(--color_60);

	--bar_background: #438a8c;
	--bar_background_mouseover: #af5020;

	--graph_background: var(--color_60);

	--text_color: var(--color_5);

	--axis_y_color: var(--color_5);
	--axis_y_font: 8pt Consolas;

	--axis_title_x_font: 10pt Consolas;
	--axis_title_x_color: var(--color_5);

	--title_font: bold 14pt Helvetica;
	--title_color: var(--color_5);

	--data_font: bold 10pt Helvetica;
	--data_color: var(--color_5);

	--data_length: 100;
}

body{
	background-color: var(--stats-table-cell-background);
}

.graph_wrapper{
	position: relative;
	display: grid;
	grid-template-columns: 
		var(--graph_margin)
		var(--width_graph)
		var(--graph_margin);
	grid-template-rows: 
		var(--graph_margin)
		calc(var(--height_graph)/4)
		calc(var(--height_graph)/4)
		calc(var(--height_graph)/4)
		calc(var(--height_graph)/4)
		var(--graph_margin);
 	grid-gap: 0px;

	/*filter: drop-shadow(0px 0px 4px #000000);*/
}

.graph{
	display: grid;
	position: relative;
	grid-template-columns: repeat(var(--data_length), calc(100%/var(--data_length)));
	grid-template-rows: 100%;
	grid-gap: 0px;

	grid-column: 2/3;
	grid-row: 2/6;

	height: var(--height_graph);
	width: var(--width_graph);
	z-index: 0;
	
	border-width: 1px;
	border-color: white;
	border-style: dotted;
	background: var(--graph_background);
}

.axis_y, .graph_origin{
	display: grid;
	position: relative;
	grid-column: 1/2;
	z-index: 1;

	text-align: center;
	color: var(--axis_y_color);
	font: var(--axis_y_font);
	height: calc(var(--height_graph) / 5);
}

.graph_line_y{
	display: none;
	z-index: 2;
	position: relative;
	grid-column: 2/3;
	height: 1px;
	margin-top: calc(var(--height_graph)/var(--y_lines) - 1px);
	width: auto;
	
	border-top: dotted 1px white; 
}

.graph_line_x{
	display: none;
	z-index: 2;
	position: relative;
	grid-row: 2/6;
	height: auto;
	width: 1px;
	margin-right: calc(var(--width_graph)/var(--x_lines) - 1px);
	
	border-right: dotted 1px white; 
}

.axis_title_x{
	display: grid;
	position: relative;
	grid-column: 2 / 3;
	grid-row: 6 / 7;

	height: var(--graph_margin);
}

.axis_title_x p{
	text-align: center;
	position: relative;
	color: var(--axis_title_x_color);	
	font: var(--axis_title_x_font);
}

.graph_bar{
	z-index: 0;
	display: grid;
	position: relative;
	grid-row: 1/2;
	transform-origin: top left;
	
	width: auto;
	padding: 0;

	background: var(--bar_background);

	border-width: 1px;
	border-color: var(--body_background);
	border-style: solid;
	border-bottom-style: none;
	border-top-style: none;
	border-left-style: none;
}

.graph_bar[mouseover="true"]{
	background: var(--bar_background_mouseover);
	z-index: 3;
}

.bar_data{
	display: grid;
}

.graph_header{
	display: grid;
	position: relative;
	grid-column: 1 / 3;
	grid-row: 1 / 2;
	grid-template-columns: 
		100%;
	grid-template-rows: 
		50%
		50%;
 	grid-gap: 0px;
	height: var(--graph_margin);
}

.graph_title{
	grid-column: 1 / 2;
	grid-row: 1/ 2;

	text-align: center;
	color: var(--title_color);
	font: var(--title_font);
}

.bar_data{
	grid-column: 1 / 2;
	grid-row: 2 / 3;

	text-align: center;
	color: var(--data_color);
	font: var(--data_font);
}