body { 
    margin: 0;
    height: 100%;
    background-color: lightblue;
}
.canvas {
    border: 1px dotted red;
}
.chart-container {
	width: 70vw;
	height: 55vh;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.row {
    display: flex;
}
.fullrow{
    display: flex;
    width: 100vw; /* 100vw Zorgt ervoor dat de container de volledige breedte inneemt */
}
.mijn-div {
    flex: 1; /* Verdeelt de beschikbare ruimte gelijkmatig over de divs */
    display: flex; /* Maakt de tekstcentrering mogelijk */
    justify-content: center; /* Centreert de tekst horizontaal */
    align-items: center; /* Centreert de tekst verticaal */
}

.button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.knop25 {
    flex: 1; /* Verdeelt de beschikbare ruimte gelijkmatig over de divs */
    display: flex; /* Maakt de tekstcentrering mogelijk */
    justify-content: center; /* Centreert de tekst horizontaal */
    align-items: center; /* Centreert de tekst verticaal */
    border: 5px ; /* Optionele rand om de divs te visualiseren */
    font-size: 23px;
    font-weight: bold;
    margin: 5px; /* 20px padding aan alle zijden */
    vertical-align: middle;
	text-align: center;
}
.knop12 {
    flex: 1; /* Verdeelt de beschikbare ruimte gelijkmatig over de divs */ display: flex; /* Maakt de tekstcentrering mogelijk */
    justify-content: center; /* Centreert de tekst horizontaal */  
	align-items: center; /* Centreert de tekst verticaal */
    border: 5px ; /* Optionele rand om de divs te visualiseren */
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    margin: 5px; /* 20px padding aan alle zijden */
    vertical-align: middle;
	text-align: center;
}
.maand {
    color: Black;
    background-color: LimeGreen;
}
.maand.active {
    color: black;
	background-color: Red;
}
.graf_data {
    color: black;
	background-color: lightsalmon;
    vertical-align: middle;
	text-align: center;
	}
.graf_data.active {
    color: black;
	background-color: Gold;
    vertical-align: middle;
	text-align: center;
	}
.graf_wijze1 {
    color: black;
	background-color: Gold;
}
.graf_wijze2 {
    color: black;
	background-color: DarkGrey;
}
.graf_wijze3 {
    background-color: Blue;
    color: White;
}
.graf_wijze4 {
    color: black;
    background-color: Yellow;
}
.graf_wijze.active {
    background-color: Orange;
}
.huidig_verbruik {
    color: black;
    background-color: Red;
    font-size: 60px;
	}
.dag_data_import {
    color: white;
    background-color: Red;
}
.dag_data_export {
    color: black;
    background-color: LimeGreen;
}
.dag_data_gas {
    color: black;
    background-color: Yellow;
}
.dag_data_water {
    color: black;
    background-color: Orange;
}
.Knop_Totalen {
    color: Black;
    background-color: Yellow;
}
.Knop_Timer1 {
    color: white;
    background-color: DarkGrey;
}
.Knop_Timer2 {
    color: white;
    background-color: DarkGrey;
}
.Knop_Timer3 {
    color: white;
    background-color: DarkGrey;
}
.Knop_Timer4 {
    color: white;
    background-color: DarkGrey;
}
.Knop_Timer5 {
    color: white;
    background-color: DarkGrey;
}
.Knop_Timer6 {
    color: black;
    background-color: White;
}
.Bat1_Label {
    color: White;
    background-color: Red;
}
.Bat2_Label {
    color: White;
    background-color: Red;
}
.Bat3_Label {
    color: White;
    background-color: Red;
}
.dag_data_blank {
    color: Lightblue;
    background-color: Lightblue;
}
#jaarselect {
    text-indent: 20px;
    color: Black;
    background-color: Yellow;
}
.mijnsam{
    flex:1;
    flex-direction: column;
    display: grid;
    height: 100%;
    grid-template-rows: 30% 70%;
}
.mijnsamtext {
    flex: 1; /* Verdeelt de beschikbare ruimte gelijkmatig over de divs */
    display: flex; /* Maakt de tekstcentrering mogelijk */
    justify-content: center; /* Centreert de tekst horizontaal */
    align-items: center; /* Centreert de tekst verticaal */
    border: 5px ; /* Optionele rand om de divs te visualiseren */
    font-size: 15px;
    font-weight: bold;
    margin: 5px; /* 20px padding aan alle zijden */
}