@import url('_Color.css');

text {
	font-family: 'Open Sans';
}

.barSvg {
	overflow: visible;
}

.barRect {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity .7s ease;
    stroke-width: .4px;
}

.barRect:hover,
.barRect:focus {
  opacity: 1.0;
}

.barText
{
	font-family: 'Open Sans';
	font-size: clamp(1.0em, 0.7vw, 1rem);
}

.barText:hover
{
	/*font-weight: bold;*/
}

.chartContent 
{
	overflow: visible;
}

.barOverallRect {
	fill: none; 
	stroke:#efefef;

	stroke-dasharray: 2 4;
}

.barGroupSvg {
	overflow: visible;
}

.textRuler {
	font-family: 'Open Sans'; 
	font-size: clamp(1em, 1.0vw, 2rem);
}

/* //////////////////////////// */



.ChartFilters {
	display: table;
	width: 100%;
}

select.ChartFilter {
	/*border: 1px solid #95C51B;
	width: 150px;
*/
	margin: 4px;
	float: left;
	
	background-image:linear-gradient( #fbfbfb, white );
	font-family: 'Open Sans';
	font-size: 15px;
	padding: 8px 0px 8px 12px;
	border-radius: 20px;
}

select.ChartFilterSelected {
	/*background-image:linear-gradient( var(--color-light) 100%, white 50% );*/
	background-image: linear-gradient( var(--color-bright), var(--color-light) );
	color: white;
	background-color: var(--color-dark);
}

.SvgChart {
	width: auto;
	height: 80%;
	border: 2px solid var(--color-light);
}

@media ( max-width: 900px ) 
{
	.SvgChart
	{
		width: 100%;
		height: auto;
	}
}