.chart-container-top {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 2ex;
    margin-bottom: 2ex;
}
.chart-table-l2 {
	display: flex;
	justify-content: center;
	flex-grow: 1;
	max-height: 31em;
}
.chart-table-l1 {
	margin-right: 2em;
	margin-left: 2em;
	margin-top: 3ex;
	max-height: 30em;
	overflow-x: auto;
}
.chart-table {
	border: none;
	border-collapse: collapse;
	font-family: Roboto;
}
.chart-table td {
	border: solid thin #e3e3e3;
	border-collapse: collapse;
	padding: 4px;
	text-align: center;
}
.chart-table th {
	padding: 8px;
	border: solid thin #e3e3e3;
	font-weight: normal;
}
.chart-table td.col-0 {
	text-align: left;
	padding: 0 12px 0 4px;
}
.chart-table th.col-0 {
	max-width: 6em;
}
.chart-l1 {
	display: flex;
	flex-wrap: wrap-reverse;
	width: 70%;
	min-width: 350px;
	max-width: 960px;
	align-items: flex-end;
	align-content: flex-end;
}
.chart-container-l2 {
	display: flex;
	flex-direction: column;
	justify-content: start;
	flex-grow: 9999;
	min-width: 350px;
	min-height: 350px;
	max-width: 900px;
	max-height: 500px;
}
#chart-container {
	width: 95%;
	height: 100%;
	flex-grow: 1;
}
@media (max-width: 500px) {
	.chart-container-l2 {
		min-height: 400px;
	}
}