body {
	font-family: "Montserrat", sans-serif;
	min-width: 1000px;
	overflow-x: auto;
}
body.dark {
	background-color: #343338;
}
body.dark h1,
body.dark h3 {
	color: white;
}

span {
	color: black;
}

body.dark span {
	color: white;
}

.tooltip {
	background-color: white;
}

rect {
	stroke: black;
}

text {
	fill: black;
}
.dark text {
	fill: white;
}

p {
	font-family: "Lato", sans-serif;
}

#myxscale,
#myyscale {
	stroke: black;
}

#myxscale path,
#myyscale path {
	stroke: black;
}

.dark #myxscale,
.dark #myyscale {
	stroke: white;
}

.dark #myxscale path,
.dark #myyscale path {
	stroke: white;
}

.dark #mybars0,
.dark #mybars {
	fill: white;
	stroke: white;
}
#container {
	min-width: 800px;
	width: 60vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
}

#toggleButton {
	/* padding: 10px;
				cursor: pointer;
				background-color: #888888;
				color: #fff;
				border: none;
				border-radius: 5px;
				outline: none;
				margin-bottom: 10px; */
	position: absolute;
	top: 24px;
	left: 50px;
}
#toggleDarkMode {
	/* padding: 10px;
				cursor: pointer;
				background-color: #888888;
				color: #fff;
				border: none;
				border-radius: 5px;
				outline: none;
				margin-bottom: 10px; */
	position: absolute;
	top: 60px;
	left: 50px;
}

/* Style for the "active" state
			#toggleButton.active,
			#toggleDarkMode.active {
				background-color: #2ecc71;
			} */

#barchart-container {
	padding: 20px 56px;
	border: 1px solid black;
	margin: 10px;
	min-width: 650px;

	width: 40vw;
}

.dark #barchart-container {
	border-color: transparent;
}

#my_dataviz {
	text-align: center;
}

#buttonsContainer {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: start;
	row-gap: 50px;
}
.center {
	display: flex;
	justify-content: center;
	align-items: start;
	margin-top: 50px;
	height: calc(100vh - 100px);
	min-height: 600px;
	width: fit-content;
}

.variable {
	padding: 8px 12px;
	cursor: pointer;
	border: black 1px solid;
	border-radius: 4px;
	transition: all 0.3s ease;
}
.variable:hover {
	scale: 0.95;
}

.activeVariable {
	background-color: #45b39b;
	font-weight: 500;
	scale: 0.94;
}

g line,
g text {
	stroke: none;
}

.toggle-container {
	display: flex;
	align-items: center;
}

.toggle-label {
	margin-left: 10px;
}
.dark .toggle-label {
	color: white;
}

.toggle-switch {
	position: relative;
	display: inline-block;
	width: 48px;
	height: 24px;
}

.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	border-radius: 34px;
	transition: 0.4s;
}

.toggle-slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 4px;
	bottom: 3px;
	background-color: white;
	border-radius: 50%;
	transition: 0.4s;
}

#toggleButton.active .toggle-slider,
#toggleDarkMode.active .toggle-slider {
	background-color: #2196f3;
}
#toggleButton.active .toggle-slider:before,
#toggleDarkMode.active .toggle-slider:before {
	transform: translateX(22px);
}

.left-section {
	width: 400px;
}

.text-maladie {
	text-align: justify;
	color: black;
}

.dark .text-maladie {
	color: white;
}

h2 {
	color: black;
}
.dark h2 {
	color: white;
}

.feedback {
	position: fixed;
	bottom: 0;
	right: 0;
	padding: 8px;
	background-color: #2ecc71;
	color: white;
	border-radius: 5px 0 0 0;
	text-decoration: none;
	transition: all;
}

.feedback:hover {
	background-color: #27ae60;
	scale: 0.95;
}

.color-key {
	font-size: 12px;
}

.color-container {
	display: flex;
	flex-direction: row;
}

.color-box {
	width: 12px;
	height: 12px;
	display: inline-block;
	margin-right: 5px;
	vertical-align: middle;
	border-radius: 2px;
	transition: all 0.3s ease;
	transition-delay: 0.2s;
}

.color-label {
	display: inline-block;
	vertical-align: middle;
}

.description-maladie {
	margin: auto 30px;
}