.watt {
	vertical-align: top;
	font-size: 100px;
	font-weight:bold;
}

.emoji {
	font-size: 75px;
	display: inline-block;
}

.bar {
  height: 20px;
  width: 80px;
  background-color: #f5f5f5;
  margin: 0 auto;
  border: 1px solid #c0c0c0;
}

.bar::before {
  content: '';
  display: flex;
  justify-content: end;
  width: calc(var(--percent) * 1%);
  height: 100%;
  background: #2486ff;
  white-space: nowrap;

  background-image: linear-gradient(green, green),
    linear-gradient(lightgreen, lightgreen),
    linear-gradient(yellow, yellow),
    linear-gradient(orange, orange),
    linear-gradient(red, red);
  background-size: calc((var(--percent) - 80) * 100%) 100%,
    calc((var(--percent) - 60) * 100%) 100%,
    calc((var(--percent) - 40) * 100%) 100%,
    calc((var(--percent) - 20) * 100%) 100%,
    100% 100%;
}

.history_header {
	margin: 50px 0px 20px 0px;
	font-size: 30px;
	font-weight: bold;
}
				
.history {
	margin: 0px auto;
	overflow-y: auto;
	width: 625px;
	height: 410px;
	border: 1px solid #c0c0c0;
}

.history_header {
	margin: 30px auto 5px auto;
	width: 600px;
	font-size: 26px;
	font-weight: bold;
	text-align: left;
}

.history table {
	border-collapse: collapse;
	background-color: #ffffff;
	width: 100%;
}

.history th, .history td {
	font-size: 23px;
	padding: 4px;
	border: 1px solid #c0c0c0;
}

.history thead th {
	position: sticky;
	top: 0px;
	border: 1px solid #c0c0c0;
	background-color: #aaaaaa;
}

.total {
	border-collapse: collapse;
	background-color: #ffffff;
	width: 625px;
	border: 1px solid #c0c0c0;
	margin: 10px auto;
}

.total td, .total th {
	font-size: 26px;
	padding: 5px;
	border: 1px solid #c0c0c0;
}

.total .value {
	text-align: right;
}

.content {
	font-family: Tahoma, Calibri, Verdana, Geneva, sans-serif;
	text-align: center;
	margin: 0px auto;
	width: 95%;
}

.chartcontainer {
    max-width: 1000px;
    height: 385px;
    margin: 15px auto;
    border: 1px solid #c0c0c0;
}

body {
	background-color: #F0F0F0;
}


.stromkosten {
	width: 500px;
	margin: auto; 
	text-align:left; 
	border: 1px solid #c0c0c0;
	border-collapse: collapse;
}

.stromkosten th, .stromkosten td {
	border: 1px solid #c0c0c0;
	padding: 3px;
	text-align: center;
}