:root {
  --changePvToHouse: -200;
  --changeFromGrid: -200;
  --changePVtoGrid: -200;
  --changeHouse2batt: -200;
  --changeEM: -100;
  --changeBatt2grid: 0;
  --timeAnim: 10s;
}

body{
	margin: 0;
	padding: 0;
	/* background-color: rgb(17, 18, 23); */
	background-color: black;
	overflow: hidden; /* Hide scrollbars */
	caret-color: transparent;
}

p { display: inline }

table.tg{
	width: 100%;
	height: 100%;
	border: 1;
}

table.tg, tr.tg, td.tg {
	color: black;
	text-align: center; 
	vertical-align: middle;
	border: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: bold;
	
	/* height: 100%; */
}

table.wohnung, tr.wohnung, td.wohnung {
	/* border: 1px solid black; */
	color: white;
	/* text-align: center;  */
	/* vertical-align: middle; */
	/* font-family: Arial, Helvetica, sans-serif; */
	/* font-weight: bold; */
	line-height: 3px;
	
	font-size: 5px;
	/* font-size-adjust: 0.1; */
	/* letter-spacing: -1px; */
}


iframe {
	// overflow: scroll;
	// width: 80%;
	// height: 100%;
	// border: 1px solid black;
}

.link_grafana{
	cursor: pointer;
}

.link_openhab{
	cursor: pointer;
}

.goTofuture{
	cursor: pointer;
}

.goTopast{
	cursor: pointer;
}

.refresh{
	cursor: pointer;
}
		
.prev{
	text-align: left; 
	padding-left: 10px;
	cursor: pointer;
}

svg {
    pointer-events: none;
}

#navi{
	color: white;
	/* width: 100%; */
	/* height: 100%; */
	position: absolute;
	/* top: 0; */
	/* left: 0; */
	margin-top: 50px;
	margin-left: 30px;
	float: left;
}

.naviB{
	float: left;
	width: 100px;
	font-size: 20px;	
	color: white;
	border: 1px solid white;
	background: none;
	cursor:pointer;
}

/* .naviB{ */
	/* background-color: #4CAF50; */
/* } */

.next{
	text-align: right; 
	padding-right: 10px;
	cursor: pointer;
}

.pathPVtoHouse {
	stroke-dasharray: 5;
	animation: dashdrawPVtoHouse var(--timeAnim) linear infinite;
}

.pathFromGrid {
	stroke-dasharray: 5;
	animation: dashdrawFromGrid var(--timeAnim) linear infinite;
}

.pathPVtoGrid {
	stroke-dasharray: 5;
	animation: dashdrawPVtoGrid var(--timeAnim) linear infinite;
}

.carTire {
	stroke-dasharray: 2;
	animation: carTiredrwa var(--timeAnim) linear infinite;
}

.pathHouse2batt {
	stroke-dasharray: 5;
	animation: dashdrawHouse2batt var(--timeAnim) linear infinite;
}

.pathEM {
	stroke-dasharray: 5;
	animation: dashdrawEM var(--timeAnim) linear infinite;
}

.pathBatt2grid {
	stroke-dasharray: 5;
	animation: dashdrawBatt2grid var(--timeAnim) linear infinite;
}

.outer {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.inner {
	/* background-color: black; */
	position: absolute;
	height: 95%;
	width: 100%;
	overflow: hidden;
}

.imgbox {
	position: absolute;
	/* display: grid; */
	/* display: table; */
	height: 95%;
	width: 100%;
}

.imgbox2 {
	/* position: absolute; */
	/* display: grid; */
	height: 95%;
	/* width: 100%; */
}

.center-fit {
	max-width: 100%;
	max-height: 90vh;
	vertical-align: top;
	margin: 0 auto;	
	display: block;
	float:left;
	/* width:100px; */
}

@keyframes dashdrawPVtoHouse {to {stroke-dashoffset: var(--changePvToHouse);}}
@keyframes dashdrawFromGrid {to {stroke-dashoffset: var(--changeFromGrid);}}
@keyframes dashdrawPVtoGrid {to {stroke-dashoffset: var(--changePVtoGrid);}}
@keyframes dashdrawHouse2batt {to {stroke-dashoffset: var(--changeHouse2batt);}}
@keyframes dashdrawEM {to {stroke-dashoffset: var(--changeEM);}}
@keyframes dashdrawBatt2grid {to {stroke-dashoffset: var(--changeBatt2grid);}}

@keyframes carTiredrwa {to {stroke-dashoffset: -400;}}