/* body {
  overflow: hidden;
} */
#chart {
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
}

svg {
	font-family: Arial, sans-serif;
	overflow-x: scroll;
}

rect {
	fill: rgb(255, 255, 255);
	transition: fill 0.8s ease-in-out;
}

rect:hover {
	fill: #000;
}

.axis text {
	font-size: 14px; /* Größe der Achsenbeschriftungen */
	fill: #ffffff; /* Textfarbe */
}

/* Style für die Y-Achsen-Beschriftung */
.axis text.y-axis-label {
	font-size: 14px;
	font-weight: bold;
	fill: #ffffff;
}

/* Style für den Tooltip */
.tooltip {
	position: absolute;
	border: 1px solid #d3d3d3;
	padding: 5px;
	font-size: 12px;
	pointer-events: none;
	opacity: 0; /* Initial unsichtbar */
	transition: opacity 0.3s ease-in-out; /* Weiche Einblendung */
}

/* Sichtbarkeit des Tooltips erhöhen, wenn aktiv */
.tooltip.active {
	opacity: 1; /* Tooltip sichtbar, wenn aktiv */
}

/* Drehe die X-Achsenbeschriftungen leicht */
.axis-x text {
	transform: rotate(36deg);
	text-anchor: end;
	font-size: 12px;
}