/** using CSS nesting - to ensure browser backward compatibility,
  * we use postcss & postcss-nested
  * start every first line of a new selector with & and it will 
  * be nested under the parent selector .s-chart-container
  */

figure.graph-composition.svelte-4xeca3.svelte-4xeca3 {
	overflow: visible;
}

div.s-chart-container {
	--hovered-barchart-color: green;
	--axisText-color: black;
	--barchart-color: #3b6de6;
	--marker-color: black;
	--linechart-color1: yellow;
	--shadow-color: 286deg 36% 56%;
	--body-font: 'Lato', Sans-serif;
	--tooltip-color: black;
	font-family: 'Lato', Sans-serif;
	font-size: 12px;
	line-height: 1;
	font-weight: 400;
	box-shadow: none;
	border: none;
	border-radius: 0;
	background: none;
	padding: 0;
	/* linechart overrides */
	& path.linechart
{
	stroke: var(--ActiveGreen);
}

	/* optional to add an outline to the line */
	/* & path.linechart-bg {
		stroke: white;
		stroke-width: 3px;
	} */

	/* bar chart overrides */
& rect.bar {
	fill: var(--HoverButtonBackground) !important;
}

& .active rect.bar {
	fill: var(--ActiveGreen) !important;
}
	& .axis text {
		font-family: inherit;
		text-anchor: middle;
		font-size: 10px;
		user-select: none;
		fill: var(--StandardText);
	}

& .fade:not(.show) {
	opacity: 1;
}

	/* y axis gridlines overrides */
	line.gridline {
		stroke: rgba(0, 0, 0, 0.1);
	}

	/* linechart marker / circle overrides */
	#linechart-marker {
		stroke: white;
		stroke-width: 2px;
		fill: var(--marker-color);
	}


#canvas-controller {
	fill: var(--Background);
}
	/* tooltip overrides */
	.chart-tooltip {
	background: var(--color-bg-default);
	backdrop-filter: blur(2px);
	border-radius: 4px;
	color: var(--color-fg-default);
}

	/* y-axis left/right */

#y-axis.main text {
	fill: var(--StandardText);
}

#y-axis.side text {
	fill: var(--StandardText);
}

	/** for comapct view (below 450px width
    * adjust font sizes etc
  */
	& .graph-composition.compact {
		& #x-axis-ticks text {
			font-size: 12px;
		}

		.chart-tooltip {
			padding: 4px;
		}
	}
}


.chartHeader {
	text-align: center;
	font-size: 16px;
	width: 530px;
	font-weight: bold;
	margin: 5px auto;
}

main.svelte-1wtg6dj {
	width: 550px;

}