.chart-container {
    display: grid;
    gap: 1em;
    grid-template-rows: min-content minmax(0, 1fr) min-content;
    grid-template-columns: 1fr minmax(0, 3fr);
    grid-template-areas: "a h"
                         "a c"
                         "a f";
    width: calc(100vw - 2em); /* not necessary, but just to be explicit */
    height: calc(100vh - 2em);
	margin: 1em;
   }

	
.btn_colors {
    position: relative;
    left: 10%;
    right: 10%;
    width: 80%;
}

.indicator {
    color:  #a3be8c ;
    float: right;
}

.color_btn:hover {
    cursor: pointer;
}

.infobox {
    text-align: center;
    position: relative;
    margin-top: 80vh;
    margin-bottom: 10%;
}
#infobox-header{
	text-align: center !important; 
}

table {
    left: calc(5% + 1px);
    right: calc(5% + 1px);
    overflow-x: auto;
    display: block;
	border-collapse: collapse;
}

.table-mobile{
	width:100%;
}



th {
    border: 3px;
	border-style: none  none solid none;
}
td {
    padding: .5rem;
  }


.infotext {
    display: none;
	overflow-x: auto;
}

.spacer {
    height: 140vh;
    margin: 0 0 -50px 0;
    background: transparent; /* you'll need this if #container's parent element has a different background from #container itself */
}

.logo {
	float: right;
	vertical-align: middle;
	height: 60px;
	margin-right:1rem;
	border-radius: 7px;
	filter: drop-shadow(7px 5px 1px #2E3440);
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}