html, body {
	background: var(--col_dashboard_background) !important;
}

:root {
	--gridSize: 200px;
	--widgetMargin: 10px;
}

.dummy_container {
	width: 		100%;
   	height: 	100%;
    z-index: 	5000;
    position: 	relative;
    position: 	absolute;
    top: 		0;
	display:	none;
	opacity: 	0;
	transition: all 500ms;
}
.dummy_container .dummy_msg {
	position: absolute;
	top: 50px;
	font-size: 3vw;
	font-family: arial;
	color: white;
	border: 2px solid;
	padding: 10px;
	border-radius: 18px;
	background: #aaaaaac0;
	left: 50%;
	translate: -50%;
	z-index: 200000;
}
.dummy_container .dummy_img {
	width: 100%;
}
.signedIn .dummy_container {
	display: none
}
.view_ctrlTime .dummy_container {
	display: none
}
.signedIn #btn_view_dummy {
	display: none !important;
}
.signedOut.view_dummyDashboard #btn_eval {
	display: none;
}
.signedOut.view_dummyDashboard .dummy_container {
	display: block;
	opacity: 1;
}
.signedOut.view_dummyDashboard .icon-dummy-dashboard {
	display: none;
}
.signedOut:not(.view_dummyDashboard) .icon-dummy-house {
	display: none;
}

.scheme-light1:root {		/* Minimalistisch (Dunkel auf Hell) */
    --col_dashboard_background: #F5F5F5;
    --col_widget: #FFFFFF;
    --col_widgetBorder: #DDDDDD;
    --col_widgetTitleColor: #1E1E1E;
    --col_widgetTitleColorSub: #1E1E1E;
    --col_widgetTextColor: #4A4A4A;
    --col_widgetGrouping: #efd4dd;
    --def_widgetShadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.scheme-light2:root {		/* grey and blue */
    --col_dashboard_background: #ECEFF1;
    --col_widget: #FFFFFF;
    --col_widgetBorder: #CFD8DC;
    --col_widgetTitleColor: #263238;
    --col_widgetTitleColorSub: #263238;
    --col_widgetTextColor: #455A64;
    --col_widgetGrouping: #ede3f7;
    --def_widgetShadow: 0px 4px 6px rgba(38, 50, 56, 0.2);
}
.scheme-light3:root {
	--col_dashboard_background: #F9FAFB;
    --col_widget: #FFFFFF;
    --col_widgetBorder: #E0E0E0;
    --col_widgetTitleColor: #1976D2;
    --col_widgetTitleColorSub: #1976D2;
    --col_widgetTextColor: #43A047;
    --col_widgetGrouping: #f3d5af;
    --def_widgetShadow: 0px 4px 10px rgba(0, 0, 0, 0.1), inset 0px 1px 3px rgba(255, 255, 255, 0.8);
}

.scheme-lila:root {    /* Elegantes Lila mit Gold */
    --col_dashboard_background: #F9F5FF;
    --col_widget: #EEE8FF;
    --col_widgetBorder: #DCC4F4;
    --col_widgetTitleColor: #3E0066;
    --col_widgetTitleColorSub: #3E0066;
    --col_widgetTextColor: #4A0099;
    --col_widgetGrouping: #C6A9E0;
    --def_widgetShadow: 0px 4px 6px rgba(62, 0, 102, 0.2);
}

.scheme-green:root {		/* Naturgrün mit Akzenten */
    --col_dashboard_background: #F6FFF5;
    --col_widget: #DFFFE5;
    --col_widgetBorder: #7FB88E;
    --col_widgetTitleColor: #0A3D00;
    --col_widgetTitleColorSub: #0A3D00;
    --col_widgetTextColor: #145A00;
    --col_widgetGrouping: #A9D8B0;
    --def_widgetShadow: 0px 4px 6px rgba(10, 61, 0, 0.2);
}

.scheme-dark1:root {		/* Minimalistisch (Hell auf Dunkel) */
    --col_dashboard_background: #1E1E1E;
    --col_widget: #2C2C2C;
    --col_widgetBorder: #555555;
    --col_widgetTitleColor: #FFFFFF;
    --col_widgetTitleColorSub: #FFFFFF;
    --col_widgetTextColor: #B3B3B3;
    --col_widgetGrouping: #444444;
    --def_widgetShadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}


.scheme-earth:root {		/* Erdtöne */
    --col_dashboard_background: #FFF7E6;
    --col_widget: #FFF3E0;
    --col_widgetBorder: #BCAAA4;
    --col_widgetTitleColor: #4E342E;
    --col_widgetTitleColorSub: #4E342E;
    --col_widgetTextColor: #6D4C41;
    --col_widgetGrouping: #D7CCC8;
    --def_widgetShadow: 0px 4px 6px rgba(78, 52, 46, 0.2);
}

.scheme-dark2:root {		/* Elegantes Dunkel mit Goldakzenten */
    --col_dashboard_background: #1B1B1B;
    --col_widget: #2C2C2C;
    --col_widgetBorder: #666666;
    --col_widgetTitleColor: #FFD700;
    --col_widgetTitleColorSub: #FFD700;
    --col_widgetTextColor: #E1B12C;
    --col_widgetGrouping: #555555;
    --def_widgetShadow: 0px 4px 6px rgba(255, 215, 0, 0.2);
}
.scheme-dark3:root {
	--col_dashboard_background: #181A1B;
    --col_widget: #232629;
    --col_widgetBorder: #383C40;
    --col_widgetTitleColor: #FFC300;
    --col_widgetTitleColorSub: #FFC300;
    --col_widgetTextColor: #00D1FF;
    --col_widgetGrouping: #46595d;
    --def_widgetShadow: 0px 4px 10px rgba(0, 0, 0, 0.4), inset 0px 1px 3px rgba(255, 255, 255, 0.1);
}
.scheme-pink:root {		/* Lebendiges Pink und Lila */
    --col_dashboard_background: #FFF0F6;
    --col_widget: #FFE6F0;
    --col_widgetBorder: #E1BEE7;
    --col_widgetTitleColor: #9C27B0;
    --col_widgetTitleColorSub: #9C27B0;
    --col_widgetTextColor: #D81B60;
    --col_widgetGrouping: #F8BBD0;
    --def_widgetShadow: 0px 4px 6px rgba(156, 39, 176, 0.2);
}

.scheme-blue:root {		/* Kühl und professionell (Blau-Grün) */
    --col_dashboard_background: #F5FAFD;
    --col_widget: #E8F4F8;
    --col_widgetBorder: #BFE4EB;
    --col_widgetTitleColor: #003C58;
    --col_widgetTitleColorSub: #003C58;
    --col_widgetTextColor: #007C91;
    --col_widgetGrouping: #A3D6DF;
    --def_widgetShadow:  0px 4px 6px rgba(0, 60, 88, 0.2);
}

circle.start >*  {
	animation-play-state: running; 
}
circle.stop >*  {
	animation-play-state: paused; 
}
circle.backward >* {
	keyPoints: 	"1;0";
	keyTimes:	"0;1";
}

.energy-ball {
	offset-path: path('m 138.6,161.9 c 5.7,5.7 -4.9,10.4 -9.5,9.4 -12.3,-2.8 -14.3,-18.7 -9.3,-28.3 9,-17.2 32.1,-19.1 47.2,-9.2 22,14.4 23.9,45.6 9.1,65.9 -19.8,27.1 -59.3,29 -84.77,9.1 C 59.27,183.7 57.37,135.8 82.38,105.2 112.6,68 169,66.1 204.8,96.2 c 42.1,35.5 44,100.4 8.8,141.3 C 172.9,285 99.64,286.5 53.57,246.2 1.203,200.4 -0.5627,118.6 44.87,67.3 95.88,9.8 186.2,8.1 242.5,58.7 305.1,115 306.8,213.9 251,275.3');
	offset-path: var(--path);
	animation: energy-ball-animation 10s;
	width: 	10px;
	height: 10px;
	border-radius: 5px;
	position: absolute;
}
@keyframes energy-ball-animation {
    0%   { offset-distance:    0;}
    100% { offset-distance: 100%;}
 }

svg:hover circle animateMotion {
	animation-name: rotate;
	animation-duration: 0.7s;
	animation-direction: reverse;
}

html {
	scrollbar-width: auto;					 /* firefox */
	scrollbar-color: auto;		 /* firefox */
	scrollbar-gutter: auto;				 /* firefox */
}
body {
	overflow-y: overlay;
	position: relative;
}
body::-webkit-scrollbar {
  width: 4px;               /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
  background: #50505000;        /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
  background-color: #a0a0a050;    /* color of the scroll thumb */
  border-radius: 6px;       /* roundness of the scroll thumb */
  border: 3px solid #a0a0a000;  /* creates padding around scroll thumb */
}

nav {
	position: absolute;
    top: 30px;
    left: 30px;
    font-size: 14px;
    background: #ddd;
    border: 2px black solid;
	
	z-index: 3100;
}
nav.backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	z-index: 3000;
	display: none;
	background: none;
	border: 0px;
}
nav div {
	padding: 5px
}
nav div:hover {
	background: #999;
}
nav div.type-divider {
    border-top: 2px solid black;
    height: 0;
    padding: 0;
}

.highcharts-credits {
    display: none;
}
.highcharts-legend-item {
	font-family: arial;
	color: var(--col_widgetTextColor);
}
.highcharts-title {
	font-family: arial;
	text-transform: unset !important;
	color: var(--col_widgetTextColor);
}
.highcharts-container text {
	font-family: arial;
    color: 	var(--col_widgetTextColor) !important;
    fill: 	var(--col_widgetTextColor) !important;
}
.widget_container.chart .widget_content > div,
.highcharts-container {
	background: var(--col_widget);
}
.highcharts-button-box {
	display: none
}
.highcharts-button-hover .highcharts-button-box {
	display: block !important;
}

#house3D {
	touch-action: none;
	position: absolute;
	left: 0;
	top: 0;
	height: 100% !important;
	width: 100% !important;
	margin:0 !important
}
.view_dashboard #house3D {	
   --noCols: 	1;

    position: 	absolute;
    left: 		0;
    top: 		0;
	
	height:	 	calc(var(--gridSize) * var(--noCols) + 2 * (var(--noCols) - 1) * var(--widgetMargin)) !important;
    width: 		calc(var(--gridSize) * var(--noCols) + 2 * (var(--noCols) - 1) * var(--widgetMargin)) !important;
	margin: 	var(--widgetMargin) !important;
	
	z-index: 1000
}
.view_transition #house3D {
	transition: all 500ms;
}
.view_house.signedIn #btn_view_dummy {
	display: none
}
.view_house.signedOut #btn_view {
	display: none
}

.sortable-chosen:after {
	content: "";
	border: 2px #aaaaaa solid !important;
}
.sortable-chosen.noSorting:after {
	border: 2px #000000 solid !important;
}
.sortable-ghost .widget_content {
	background: #333333 !important;
	opacity: 0.3
}

#dashboard {
	display: flex;
	position: relative;
    flex-wrap: wrap;
	transition: opacity 500ms;
}
#dashboard > .widget_container {
	font-size: calc( var(--gridSize) / 20);
	position: relative;
	background: var(--col_widget);
}
#dashboard.fadeOut {
	opacity: 0;
}
#dashboard.hidden {
	display: none;
}

.widget_container {
	width: 100%;
	height: 100%;
	display: inline-block;
	float: right;
	    
	overflow: hidden;
    border-radius: 10px;
}
.widget_container.widget_containerRoot {
	box-shadow: var(--def_widgetShadow);
}
.widget_content {
	width: 			calc(100% - 0px);
	height: 		calc(100% - 0px);	
	border-radius: 	0;
}
.widget_content .widget_title {
	position: 		absolute;
	top:			5px;
	pointer-events:	none;
	text-align:		center;
    color: 			var(--col_widgetTitleColor);
	font-size:		1.2em;
	
	z-index: 100;
	width: 4.5em;
}
.widget_container:not(.widget-multiColWidget) .widget_content .widget_title svg {
	scale: 0.8;
    margin-top: -10px;
    margin-left: -10px
}

.widget_container {
	min-height: var(--gridSize) !important;
    min-width:  var(--gridSize) !important;
	height: 	var(--gridSize) !important;
    width:  	var(--gridSize) !important;

	margin: 	var(--widgetMargin);

	float:		left !important;
	font-family:arial
}
.widget_container.oneWidgetForced .widget_content .widget_container:first-child,
.widget_container.oneWidgetOnly .widget_content .widget_container:first-child{
	--relWidth: 100% !important;
}
.widget_container.oneWidgetForced .widget_content .widget_container:not(:first-child),
.widget_container.oneWidgetOnly .widget_content .widget_container:not(:first-child){
	display: none;
}
.widget_container.oneWidgetForced .widget_button_Split {
	display: none;
}

.view_dashboard .widget_content {
	background: var(--col_widget);
	
	width: 		100%;
	height: 	100%;	

    position: 	relative;
}
.view_dashboard .widget_content.top-buttons {
	height: 	calc(100% - 30px);
	margin-top:	30px;
}

.view_dashboard .widget_container:after{
	content: 	"";
	position:absolute;
	top: 	0;
	left: 0;
	right: 0;
	bottom: 0;
	
	border: 		2px var(--col_widgetBorder) solid;
	box-shadow: 	rgb(0 0 0 / 35%) 5px 10px 10px 0px;
	border-radius: 	10px;
	
	pointer-events: none;
}
.view_dashboard .widget_container.context-selected:after {
	border: 		solid #eeeeee !important;
}

.view_dashboard .ctrlContainer {
	opacity: 0.3
}
.view_dashboard .ctrlContainer:hover {
	opacity: 1 !important
}

.widget-multiColWidget {
	width: calc(var(--gridSize) * var(--noCols) + 2 * (var(--noCols) - 1) * var(--widgetMargin)) !important;
	min-width: calc(var(--gridSize) * var(--noCols) + 2 * (var(--noCols) - 1) * var(--widgetMargin)) !important;
}
.widget-multiColWidget .widget_container {
	margin: 0
}
.widget-multiColWidget>.widget_content>.widget_title {
    left: calc(var(--gridSize) + var(--widgetMargin)) !important;
    right: unset;
    transform: translateX(-50%);
}
.widget-multiColWidget>.widget_content .widget_container:not(:last-child) {
	margin-right: calc(2 * var(--widgetMargin) );
}
.widget-multiColWidget .widget_content .widget_container:after {
	content: unset !important;
    border: 	none;
    box-shadow: none;
}
.widget-multiColWidget .widget_content .widget_content .widget_title{
    color: 	var(--col_widgetTitleColorSub);
}
.widget-multiColWidget .widget_content .widget_container:last-child .widget_title {
    left:  unset;
	right: 5px;
	float: right;
}

.widget-grid .widget-grid-cols {
	display: inline-block
}
.widget-grid .widget-grid-cols .widget_container {
	min-height: 100% !important;
	height: 100% !important;
	min-width: 100% !important;
	width: 100% !important;
}

.widget-gauge {
	--noRows: 1;
	--noCols: 1;
}
.gauge_wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gauge_wrapper .gauge {
	height: 90%;
    width: 90%;
    position: relative;
}
.gauge_wrapper .gauge_svg {
	width:100%;
	height: 100%;
	position:	absolute;
	z-index: 200;
	scale: 90%;
}
.gauge_wrapper .gauge_scale {
	height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
    border-radius: 50%;
	scale: 90%;
}
.gauge_wrapper .gauge_info_box {
	text-align: center;
    color: var(--col_widgetTextColor);
    font-size: 2.4em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 200;	
}
.gauge_wrapper .gauge_note_main,
.gauge_wrapper .gauge_inf_main {
	
}
.gauge_wrapper .gauge_inf_sub {
	
}
.gauge_wrapper .gauge_note_box {
	text-align: center;
    color: #aaaaaa;
    font-size: 1.6em;

    position: absolute;
    bottom: 25%;
    left: 50%;
    z-index: 200;
	
    transform: translate(-50%, 50%);
}
.gauge_wrapper svg text {
	text-anchor: middle;
    alignment-baseline: central;
    fill: #aaaaaa;
}
.widget_houseOverview .info .note_Eneutral,
.gauge_wrapper .gauge_note_box .note_Eneutral {
	color: #bbbbbb
}
.widget_houseOverview .info .note_Egood,
.gauge_wrapper .gauge_note_box .note_Egood {
	color: #52bd52
}
.widget_houseOverview .info .note_Eworse,
.gauge_wrapper .gauge_note_box .note_Eworse {
	color: #e76262
}
.widget_houseOverview .info .note_enlarge,
.gauge_wrapper .gauge_note_box .note_enlarge {
	font-size: 1.3em
}
.widget_content .widget_houseOverview:before {
    position: absolute;
	content: "";
    right: 6px;
    bottom: 2px;
    top: 5px;
    width: calc( 33% - 8px);
    border-radius: 40px;
    background: #bbbbbb30
}

.widget_houseStatistics {
	height: 100%
}
.widget_houseStatistics .row {
	height: calc(100% / var(--no-rows));
	margin-bottom: -3px;
	display: flex;
}
.widget_houseStatistics .row.row_title {
	font-size: 0.8em;
	height: unset;
}
.widget_houseStatistics .colImg {}
.widget_houseStatistics .col_imgEmpty {
	width: 37.25px;
}

.widget_houseStatistics .col_title,
.widget_houseStatistics .col_value {
    width: calc(30%);
    text-align: right;
    font-size: 1.1em;
    color: var(--col_widgetTextColor);
    padding-right: 5px;
    padding-top: 8px;
}
.widget_houseStatistics .col_title {
	color: var(--col_widgetTextColor);
	opacity: 0.6;
}

.widget-pv_string1, .widget-pv_string2, .widget-pv_string3 {
	border-radius: 0;
}

.pv_group_1 .widget-pv .widget-pv_string1 .widget_content:before {
	content:	"";
	position: 	absolute;
	background: var(--col_widgetGrouping);
	top:		0;
	bottom:		0;
	left:		0;
	right:		0;
}
.pv_group_2 .widget-pv .widget-pv_string2 .widget_content:before {
	content:	"";
	position: 	absolute;
	background: var(--col_widgetGrouping);
	top:		0;
	bottom:		0;
	left:		0;
	right:		0;
}
.pv_group_3 .widget-pv .widget-pv_string3 .widget_content:before {
	content:	"";
	position: 	absolute;
	background: var(--col_widgetGrouping);
	top:		0;
	bottom:		0;
	left:		0;
	right:		0;
}

#app.grid-importing 		.widget_houseOverview 	#flow_grid:after 	{	border-color: var(--col_grid_in);		}
#app.grid-exporting 		.widget_houseOverview 	#flow_grid:after 	{	border-color: var(--col_grid_out);		}
#app.sun-shining    		.widget_houseOverview	#flow_pv:after 		{	border-color: var(--col_pv_out);		}
#app.battery-discharging	.widget_houseOverview 	#flow_bat:after 	{	border-color: var(--col_battery_out);	}
#app.battery-charging		.widget_houseOverview	#flow_bat:after 	{	border-color: var(--col_battery_in);	}
#app.house-consumption		.widget_houseOverview	#flow_house:after 	{	border-color: var(--col_house_in);		}

#app.grid-exporting 										#flow_pv2grid		{ display:none						}
#app.grid-exporting 										#flow_grid2house	{ stroke: var(--col_grid_out)		}
#app.grid-exporting.battery-discharging 					#flow_bat2house 	{ stroke: var(--col_battery_out)	}
#app.grid-exporting.battery-discharging 					#flow_grid2bat 		{ display:none						}
#app.grid-exporting.battery-charging 						#flow_grid2bat 		{ stroke: var(--col_grid_out)		}
#app.sun-shining 											#flow_pv2house		{ stroke: var(--col_pv_out)			}
#app.sun-shining.grid-importing.battery-charging			#flow_pv2bat		{ stroke: var(--col_pv_out);		}
#app.sun-shining.grid-importing.battery-charging			#flow_pv2grid		{ stroke: var(--col_pv_out);		}
#app.sun-shining.grid-importing:not(.battery-discharging)	#flow_pv2grid		{ stroke: var(--col_pv_out);		}
#app.battery-discharging 									#flow_pv2bat		{ display:none						}
#app.battery-charging										#flow_bat2house		{ display:none						}
#app.battery-discharging.pv-exceeds-house					#flow_bat2house		{ display:none						}
#app.battery-discharging.pv-exceeds-house					#flow_pv2grid		{ stroke: var(--col_pv_out);		}
#app.battery-charging:not(.sun-shining)						#flow_grid2bat 		{ stroke: var(--col_grid_out)		}
#app:not(.battery-discharging):not(.battery-charging)		#flow_bat2house		{ display:none						}
#app:not(.battery-discharging):not(.battery-charging)		#flow_grid2bat 		{ display:none						}
#app:not(.battery-discharging):not(.battery-charging)		#flow_pv2bat 		{ display:none						}
#app:not(.sun-shining)										#flow_pv2house		{ display:none						}
#app.grid-importing											#flow_grid2house	{ display:none						}
#app.grid-importing.battery-charging						#flow_grid2bat 		{ display:none						}
#app.grid-exporting.pv-exceeds-house						#flow_grid2house	{ display:none						}
#app:not(.pv-exceeds-house)									#flow_pv2grid		{ display:none 						}
#app:not(.pv-exceeds-house)									#flow_pv2bat		{ display:none 						}
#app.battery-charging.pv-exceeds-house						#flow_pv2bat		{ stroke: var(--col_pv_out)			}
#app.battery-discharging:not(.pv-exceeds-house)				#flow_bat2house		{ stroke: var(--col_battery_out)	}
#app.grid-importing.battery-discharging						#flow_grid2bat		{ stroke: var(--col_battery_out)	}


.Xgauge_wrapper .gauge:after {
	content: "";
    border: 1px red solid;
	
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.Xgauge_wrapper:after {
	content: "";
    border: 5px green solid;
	
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.widget_houseOverview {
    width: 100%;
    height: 100%;	
	margin-top: -2px;
}
.widget_houseOverview svg {
	position: absolute;
    top: 	  0;
    right: 	  0;
    bottom:   0;
    left: 	  0;
}
.widget_houseOverview svg path {
	fill:			none;
	stroke:			#000000;
	stroke-width:	0.264583px;
	stroke-linecap:	butt;
	stroke-linejoin:miter;
	stroke-opacity:	1;
}
.widget_houseOverview .circle {
	position: 		relative;
    display: 		inline-block;
    width: 			calc( 33% - 15px);
    height: 		calc( 33% - 15px);
    border-radius: 	50%;
    margin: 		7.5px;	
	background: 	var(--col_widgetGrouping);
    text-align: 	center;
    vertical-align: top;
}
.widget_houseOverview .circle > div {
	position: 		relative;
}
.widget_houseOverview .circle svg {
	position: 		relative;
	height: 		50%;
	top: 			4px;
	margin-bottom:	3px;
}
.widget_houseOverview .circle .info {
	color:	 	#52bd52;
    display: 	inline-block;
    font-size: 	0.8em;
	margin-top:	-2px;
	width:		100%;
	height:		100%;
}
.widget_houseOverview .circle:after {
    content:	"";
	
	position: 	absolute;
	left: 		0px;
	right:		0px;
	top:		0px;
	bottom:		0px;
	
	border: 		2px solid grey;
	border-radius: 	50%
}
.widget_houseOverview .empty {
    display: inline-block;
    width: calc( 33% - 20px);
    height: calc( 33% - 20px);
	margin: 10px;	
}
.widget_houseOverview .info > div {
	position: absolute;
	top: 0;
	right:0;
	left: 0;
}
.widget_houseOverview .info .notes {
	position: absolute;
	top: 0;
	right:0;
	left: 0;
	transition: opacity 500ms;
	opacity: 0;
}
.widget_houseOverview .info .notes.active {
	opacity: 1 !important;
}
.widget_houseOverview .flow_balls {
	position: relative;
}

.widget_weather24hrs,
.widget_weatherDaily {
	position: relative;
}

.widget_weather24hrs .fc_day,
.widget_weatherDaily .fc_day {
	width: 		calc( 100% / var(--no-days) );	
	display: 	inline-block;
	text-align: center;
}
.widget_weather24hrs .fc_name,
.widget_weatherDaily .fc_name {
	font-size:  0.6em;
	padding: 	0 5px;
	color: 		var(--col_widgetTitleColor);
}
.widget_weather24hrs .fc_icon,
.widget_weatherDaily .fc_icon {
	font-size:  0.8em;
	padding: 	0 5px;
}
.widget_weather24hrs .fc_info,
.widget_weatherDaily .fc_info {
	font-size:  0.5em;
	padding: 	0 5px;
	color: 		var(--col_widgetTitleColor);
}

.widget_weather24hrs .subContainer,
.widget_weatherDaily .subContainer {
	width: 	calc(100% - 20px);
	height: calc(100% - 20px);
	margin: 10px
}

.widget_weatherDaily .subContainer {
	margin-top: 5px !important;
	position: relative;
}
.widget_weather24hrs .subContainer {
	margin-bottom: 20px !important;
}
.widget_weather24hrs .widget_content {
	background: unset;
}
.widget_weather24hrs:before {
	content: "";
    position: absolute;
    top: 0px;
    bottom: 8px;
    right: 10px;
    left: 10px;
    background: var(--col_widgetGrouping);
	border-top-right-radius: 12px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
}
.widget_weatherDaily .widget_content:before {
	content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: calc(100% / var(--no-days));
    left: 10px;
    background: var(--col_widgetGrouping);
	border-top-right-radius: 6px;
	border-top-left-radius: 6px;
}

.widget-curvedBar {
	--noRows: 1;
	--noCols: 1;
}
.widget-curvedBar .curvedGrid {
	position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.widget-curvedBar .curvedGrid path { 
	fill: none
}
.widget-curvedBar .curvedGrid text { 
	font-size: 			25px;
	text-anchor: 		middle;
	alignment-baseline:	central;
	fill: 				#aaaaaa;
}
.widget-curvedBar .curvedBar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
	z-index: 100;
}
.widget-curvedBar .curvedBar path {
	stroke-opacity: 1;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 4;
	filter: brightness(0.8);
}
.widget-curvedBar .curvedBar.active path {
	filter: unset;
}
.widget-curvedBar .curvedText {
    position: 		absolute;
    width: 			100%;
    top: 			50%;
    transform: 		translateY(-50%);
    text-align: 	center;
    color: 			var(--col_widgetTextColor);
    font-size: 		2em;
	pointer-events:	none;
}
.widget-curvedBar .curvedText .subText {
	font-size:  	0.5em;
	pointer-events: none;
}
.widget-curvedBar .curvedLegend {
	position:			absolute;
	left: 				5px;
	bottom:				5px;
	font-size:			0.75em;
	pointer-events: 	none;
}

.widget-keyValue .keyvalue {
	font-size: 		1.7em;
    color: 			var(--col_widgetTextColor);
}
.widget-keyValue .keyvalue .key {
	text-align: 	left;
	display:		inline-block;
	margin-left: 	1em;
	position: 		relative;
}
.widget-keyValue .keyvalue.keyvalue-level-0 {
	padding-top: 	0.4em;
	position: 		relative;	
}
.widget-keyValue .keyvalue.keyvalue-level-1 .key{
	padding-left: 	0.7em;
	position: 		relative;
}
.widget-keyValue .keyvalue .value {
	text-align: 	right;
	display:		inline-block;
	float: 			right;
	margin-right:	1em;
	position: 		relative;
}

.widget-relWidth {
    width: var(--relWidth) !important;
	height: calc(var(--noRows) * var(--gridSize)) !important;
}
.widget-relWidth>.widget_content>.widget_container {
    width: 		var(--relWidth) !important;
	min-width: 	var(--relWidth) !important;

	height: 	var(--relHeight) !important;
	min-height: var(--relHeight) !important;

	margin: 0;
}
.widget-relWidth>.widget_content {
	--gridSize: calc(100% - 2 * var(--widgetMargin));
}

.btn_reset_resolution {
	display: inline-flex;
	position: 	absolute;
	left:		3px;
	top:		3px;
	z-index: 	1000;
	
	font-size: 11px;
	
	opacity: 0.2;
	display: none
}
.widget_container.chart.subMinute .btn_reset_resolution {
	display: block;
}
.btn_reset_resolution:hover {
	opacity: 1;
    color: #333;
    background: #aaa;
}
.btn_reset_resolution:hover text {
	fill: black !important;
}

.widget_button_container {
    display: inline-flex;
	position: 	absolute;
	left:		3px;
	top:		3px;
	z-index: 	1000;
	
	font-size: 11px;
	
	opacity: 0.2;
}
.widget_button_container:hover {
	opacity: 1;
}
.widget_button_container:hover .widget_button {
    color: var(--col_widget);
    background: var(--col_widgetTitleColor);
}
.widget_button_container .widget_button,
.widget_button_container .widget_noButton {
	margin: 		3px;
	border: 		1px black solid;
	border-radius: 	3px;
    height: 		2em;
	padding:		1px 3px;
	display: 		inline-block;

	display: 		inline-flex;
	align-items: 	center;
	justify-content:center;
	
	background: var(--col_widgetTitleColor);
    color: var(--col_widget);
	
	cursor: pointer;
}
.widget_button_inner {
	font-size:		1.0em;
}

.widget_container.chart .showChartSelector > div:not(.chartSelector) {
	filter: blur(5px);
	pointer-events: none;
}
.widget_container.chart .chartSelector {
	position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    
    border-radius: 6px;
    border: 1px solid black;
    padding: 5px;
    background: #333333;
    color: #eeeeee;
	
	display: none;
}
.widget_container.chart .showChartSelector .chartSelector {
	display: block;
}
.widget_container.chart .showChartSelector .categories {
	display: inline-block;
    vertical-align: top;
}
.widget_container.chart .showChartSelector .chartSel_category {
	display: inline-block;
    vertical-align: top;	
	margin-left: 2%;
	margin-right: 2%
}
.widget_container.chart .showChartSelector .chartSel_head {
    font-size: 1.8em;
    margin-bottom: 14px;
}
.widget_container.chart .showChartSelector .chartSel_chart {
    font-size: 1.1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
	
	padding: 3px 10px 3px 1.4em;
	border-radius: 3px
}
.widget_container.chart .showChartSelector .chartSel_chart:hover {
	background: #444444;
}
.widget_container.chart .showChartSelector .chartSel_chart:hover:before {
	content: "";
	position: absolute;
	top:	1px;
	bottom: 1px;
	left: 	1px;
	right: 	1px;
	
	border: 1px solid #AAAAAA;
	border-radius: 3px
}
.widget_container.chart .showChartSelector .chartSel_chart:after {
	content: "";
	position: absolute;
	top:	0.4em;
	left: 	0.3em;
	height: 0.6em;
	width: 	0.6em;
	
	border: 1px solid #AAAAAA;
	border-radius: 50%
}
.widget_container.chart .showChartSelector .chartSel_chart.selected:after {
	background: white;
}

.chartMode_specBtns {
	position: relative;
}
.chartMode_specBtns .chartMode_dayDetailed {
	display: none;
}
.chartMode_specBtns .chartMode_day {
	display: none;
}
.chartMode_specBtns .chartMode_month {
	display: none;
}
.chartMode_specBtns .active {
	display: block !important;
}
.chartMode_specBtns .activeValue {
	color: #ffffff;
	border-color: #ffffff;
}


.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
	background: #ddd !important;
}
.datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
	background: #eee !important;
}
.datepicker-cell:not(.disabled):hover {
	background-color: #eee !important;
    color: #eeeeee !important;
}
.datepicker-cell.selected, .datepicker-cell.selected:hover {
	background-color: #555 !important;
    color: #eee !important;
}
.datepicker-cell:not(.disabled):hover {
	color: #000 !important;
	background:	#ddd !important;
}
.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover { 
	background:	#ccc !important;
}

.sym_grid .icon_direction	 						   {	display:none  }
.sym-grid-importing .sym_grid .icon_direction.icon_in  {	display: block}
.sym-grid-exporting .sym_grid .icon_direction.icon_out {	display: block}

.sym_battery .icon_direction 									{ display:none 	}
.sym_battery .icon_state 										{ display:none 	}
.sym-battery-charging 	 .sym_battery .icon_direction.icon_in 	{ display: block}
.sym-battery-discharging .sym_battery .icon_direction.icon_out 	{ display: block}
.sym-battery-state_20  	 .sym_battery .icon_state.icon_20 		{ display:block}
.sym-battery-state_40  	 .sym_battery .icon_state.icon_40  		{ display:block}
.sym-battery-state_60  	 .sym_battery .icon_state.icon_60  		{ display:block}
.sym-battery-state_80  	 .sym_battery .icon_state.icon_80  		{ display:block}
.sym-battery-state_100 	 .sym_battery .icon_state.icon_100 		{ display:block}

.sym_pv .icon_direction 										{ display:none 		}
.sym-sun-shining .sym_pv .icon_direction.icon_out 				{ display: block	}

.icon_grid .icon_direction 							{	display:none  }
.grid-importing .icon_grid .icon_direction.icon_in  {	display: block}
.grid-exporting .icon_grid .icon_direction.icon_out {	display: block}

.icon_battery .icon_direction 								{ display:none 	}
.icon_battery .icon_state 									{ display:none 	}
.battery-charging .icon_battery .icon_direction.icon_in 	{ display: block 	}
.battery-discharging .icon_battery .icon_direction.icon_out { display: block	}
.battery-state_20  .icon_battery .icon_state.icon_20  		{ display:block		}
.battery-state_40  .icon_battery .icon_state.icon_40  		{ display:block		}
.battery-state_60  .icon_battery .icon_state.icon_60  		{ display:block		}
.battery-state_80  .icon_battery .icon_state.icon_80  		{ display:block		}
.battery-state_100 .icon_battery .icon_state.icon_100 		{ display:block		}

.icon_pv .icon_direction 									{ display:none 		}
.sun-shining .icon_pv .icon_direction.icon_out 				{ display: block	}

.icon_house .icon_direction {
	display:none
}
.house-consumption .icon_house .icon_direction.icon_in,
.house-highConsumption .icon_house .icon_direction.icon_in,
.house-veryHighConsumption .icon_house .icon_direction.icon_in {
	display: block
}
.house-highConsumption .icon_house .icon_direction.icon_inHigh,
.house-veryHighConsumption .icon_house .icon_direction.icon_inHigh {
	display: block
}

			.controlSummary {
				display: inline-block;
				float: left;
				clear: both;
			}
			
			#simu_back {
				display: inline-block;
				float: left;
				clear: both;
				pointer-events: all;
			}
			#simu_back:hover {
			    background: #aaaaaaa0 !important;
			}
	
.orientation_portrait .infoBox.landscape { 
	display: none !important
}
.orientation_portrait #btn_eval {
	display: none
}
.orientation_landscape .infoBox.portrait  { 
	display: none !important
}
	
.infoContainer .key {
	text-align: 	left;
	display:		inline-block;
	margin-right: 	30px;
}
.infoContainer .value {
	text-align: 	right;
	display:		inline-block;
	float: 			right;
}
.infoContainer .sub_keyvalue {
	font-size: 0.7em;
	line-height: 1.1;
	opacity: 0.7;
	margin-top: 0.1em
}
.infoContainer .sub_keyvalue .key{
	padding-left: 1.2em;
}			
.infoContainer .title_keyvalue {
	margin-top: 0.5em;
	line-height: 1.0;
}
.infoContainer .seperator {
	font-size: 		0.7em;
	text-align: 	center;
	margin-bottom: -1em;
	margin-top:		0.1em;
	position:		relative;
}
.infoContainer .seperator:after {
	content:	"";
	position:	absolute;
	left: 		0;
	right:		0;
	top:		0;
	height:		2px;
	background: #aaaaaac0;
}
	
.orientation_portrait .infoBox {
    vertical-align: top;
    font-size: 16px
}
.orientation_portrait .infoContainer {
	bottom: 20px;
    top: unset;
}
.orientation_portrait .infoContainer .column {
	display: inline-block;
    vertical-align: top;
	margin-right: 10px;
}
.orientation_portrait .seperator {
	text-align: center;
    margin-bottom: unset;
    position: relative;
	font-size: unset;
	margin-top: unset;
}	
	
			.bottomContainer {
				position: absolute;
				bottom: 20px;
				left: 20px;
				right: 20px;
				font-size:20px;			
				line-height: 1.5em;
				z-index: 1000;
				pointer-events: none;
				
				transition: opacity 500ms;
				opactiy: 1;		
			}
			.bottomContainer.fadeOut {
				opacity: 0;
			}
			.bottomContainer.hide {
				display: none;
			}
			.infoContainer {
				position: absolute;
				top: 20px;
				left: 20px;
				z-index: 1000;
				pointer-events: none;
				
				transition: opacity 500ms;
				opactiy: 1;
				
				font-size: 24px;
			}
			.infoContainer.fadeOut {
				opacity: 0;
			}
			.infoContainer.hide {
				display: none;
			}
			
			.infoBox {
				border-radius: 12px;
				background: #aaaaaa50;
				padding: 10px;
				color: white;
				font-family: arial;
				margin-bottom: 15px;
				
				box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
			}
			.infoBox.controlTime {
			    pointer-events: all;
			}
			.ctrl_time, .ctrl_date {
				position: relative;
			}
			.ctrl_date {
				margin-bottom: 15px;
			}
			.ctrl_name, .ctrl_units, .ctrl_equals, .ctrl_result {
				display: inline-block;
				position: relative;
			}
			
			.ctrl_phaseIndicator {
			    width: 30px;
				background: blue;
				position: absolute;
				top: 0;
				bottom: 0;
				z-index: -10;
			    opacity: 0.5;
			}
			.ctrl_controller {
			    width: 10px;
				background: black;
				position: absolute;
				border: 1px white solid;
				top: -5px;
				bottom: -5px;
			}
			.ctrl_equals {
				text-align: right;
			}
			.ctrl_result {
				text-align: right;
			}
			.ctrl_units {
				text-align: center;
			}
			.ctrl_units:after {
				content: "";
				position: absolute;
				left: 0px;
				right: 0px;
				top:20%;
				bottom:20%;
				border: 1px solid white;
				border-top-width: 0px;
				border-bottom-width: 0px;
			}
			
			#indi_night1, #indi_night2 {
				background: black
			}
			#indi_dawn, #indi_dusk {
				background: lightblue;
			}
			#indi_day {
				background: yellow;
			}

			
			.view_dashboard .icon-house {
				display: block !important;
			}
			.view_dashboard .icon-dashboard,
			.view_ctrlTime .icon-dashboard {
				display: none !important;
			}			
			.view_house .icon-dashboard {
				display: block !important;
			}
			.view_house .icon-house {
				display: none !important;
			}
			
			.widget_gauge_container {
				text-align: center;
				color: #d0d0d0;
				font-size: 2em;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(50%);
			}
			.widget_gauge_value {
				display: block;
			}
			.widget_gauge_unit {
				display: block;
			}