@charset "utf-8";

:root {
	--colorBg: #FFFFFF;
	--colorButtonLabel: #000000;	
}

body {
	margin: 0;
	font-family: "Inter Tight", sans-serif;
}

.chartContainer {
	width:90%;
	height:auto;
	max-width: 800px;
	/*max-height: 440px;	*/
	margin: 0px auto;
	position: relative;
	border-radius:5px;
	background:none;	
}
canvas {
	width: 100% !important; 
	height: 500px;
	border: none;	
	cursor: crosshair;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	background:var(--colorBg);		
}
	
.controls {
	padding:20px;	
	background: #000;
	text-align: center;
	background:var(--colorBg);	
}
button {
	padding:8px;
	margin: 0;
	font-size: 12px;
	cursor: pointer;
    background: none;
	color: var(--colorButtonLabel);
	border:#CCC 1px solid;
	border-radius: 2px;
	border-radius:5px;	
}
button.active {
	border:#ffc822 1px solid;
}

button img {
	height:10px;
	width:auto;
}
@media screen and (max-width: 720px)
{
canvas {
	height: 300px;
}	
}