@media only screen and (min-device-width:768px)and (max-device-width:1024px)and (-webkit-min-device-pixel-ratio:1){body,html{background-color:var(--colorBlack);position:fixed;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}@media only screen and (min-width:1024px)and (max-height:1366px)and (-webkit-min-device-pixel-ratio:1.5){body,html{background-color:var(--colorBlack);position:fixed;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}:root{--colorDarkGray: #121212;--colorBlue: #333333;--colorGreen: #228b22;--colorOrange: #b06b03;--colorYellow: #ffff00;--colorRed: #b00303;--colorLightBlue: #868686;--colorBlack: #000000;--colorWhite: #ffffff;--widgetBackgroundColor: var(--colorBlue);max-width:1024px}*{box-sizing:border-box;-webkit-user-select:none;-ms-user-select:none;user-select:none}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#000}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.container{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:left;height:730px;max-height:730px;width:1024px;max-width:1024px;overflow:hidden}.lightbox{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.lightboxContent{background-color:#000;padding:1rem;height:inherit;width:inherit}.widget{color:var(--colorWhite);width:330px;margin:5px;align-items:center;justify-content:center;display:flex}.camImage{border:2px solid var(--widgetBackgroundColor);object-fit:fill}.camLiveView{height:100%;width:845px;border:0px;background-color:var(--colorBlack);overflow:hidden;display:block}.camImageInv{opacity:.3;filter:gray;-webkit-filter:grayscale(1);filter:grayscale(1)}.cam{height:172px;background-color:var(--colorDarkGray)}.liveCam{height:172px;background-color:var(--colorDarkGray);overflow:hidden}.liveCam iframe{border:none;overflow:hidden;background:transparent;width:100%;height:100%;scrollbar-width:none;-ms-overflow-style:none}.liveCam iframe::-webkit-scrollbar{display:none}.camFullScreen{width:100%;height:100%}.camFullScreen .overlay{position:absolute;width:50px;top:50%;transform:translateY(-50%);z-index:1000;color:#000;line-height:50px;text-align:center}.camFullScreen img{width:100%;height:100%;object-fit:contain}.camFullScreen .overlay.left{left:15px}.camFullScreen .overlay.right{right:15px}.forecastFrame{width:100%;height:145px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;align-content:flex-start;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.forecast{padding-left:11px;padding-right:11px;height:120px;text-align:center;border-right:1px solid black}.forecast.night{color:#aaa}.energydiagram{height:330px;background-color:var(--widgetBackgroundColor);position:relative}.energyLineHomeToGrid{position:absolute;top:150px;width:120px;left:100px;z-index:2;fill:"red";stroke:"red"}.energyLinePVToLoad{position:absolute;top:85px;width:80px;left:51px;z-index:2;transform:rotate(-45deg)}.energyLinePVToGrid{position:absolute;top:85px;width:80px;left:199px;z-index:2;transform:rotate(225deg)}.circlePV{font-size:1.25em;font-weight:500;position:absolute;top:10px;left:115px;width:100px;height:100px;background-color:var(--colorYellow);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--colorBlack);flex-direction:column;text-align:center;z-index:1}.circleLoad{font-size:1.25em;font-weight:500;position:absolute;top:130px;left:10px;width:100px;height:100px;background-color:var(--colorGreen);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--colorWhite);flex-direction:column;text-align:center;z-index:1}.circleGrid{font-size:1.25em;font-weight:500;position:absolute;top:130px;left:220px;width:100px;height:100px;background-color:var(--colorOrange);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--colorWhite);flex-direction:column;text-align:center;z-index:1}.productionBar{position:absolute;top:260px;left:10px;width:80%;height:20px;max-height:20px;overflow:hidden;font-size:.9em;padding-left:5px}.consumptionBar{position:absolute;top:285px;left:10px;height:20px;max-height:20px;width:100%;overflow:hidden;font-size:.9em;padding-left:5px}.energyUpdate{position:absolute;top:295px;left:10px}.weatherForecast{display:flex;flex-direction:column;align-items:center;height:330px}.forecastRow{display:flex;justify-content:center;width:100%;height:50px}.forecastColumn{border:2px solid black;display:flex;align-items:center;justify-content:center;background-color:var(--widgetBackgroundColor);color:var(--colorWhite);font-size:1.2em}.forecastColumn:nth-child(1){flex:1}.forecastColumn:nth-child(2),.forecastColumn:nth-child(5),.forecastColumn:nth-child(6){width:40px}.forecastColumn:nth-child(3){width:90px}.forecastColumn:nth-child(4){width:75px}.forecastColumn>img{width:25px;height:25px}.radar{display:flex;justify-content:center;align-items:center;overflow:hidden;width:330px;height:330px}.radarLoading{display:flex;justify-content:center;align-items:center}.radarFrame{pointer-events:none;position:relative;width:330px;height:330px}.radarFrame iframe{pointer-events:none;background:transparent;transform:scale(1.13)}.sunFrame iframe{pointer-events:none;background:transparent}.forecastFrame{position:relative;width:330px;height:330px}.forecastFrame iframe{pointer-events:none;background:transparent}.weather{height:720px;background:transparent;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:stretch}.energy{height:330px;background:transparent;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;background-color:red}.weather>.info{background-color:var(--widgetBackgroundColor);display:flex;width:50%;height:144px;border:2px solid black;justify-content:center;align-items:center;flex-direction:column;text-align:center}.defaultIconSize{width:35px;height:35px}.homediagram{background-color:var(--widgetBackgroundColor);display:flex;width:100%;border:2px solid black;justify-content:center;align-items:center;flex-direction:column;text-align:center;flex-basis:content;position:relative}.pfLoad{color:#fff;position:absolute;left:59px;top:200px;max-width:40px;width:40px;font-size:.8em}.pfSummary{font-size:.8rem}.pfPV{color:#000;position:absolute;left:86px;top:50px;max-width:104px;width:104px;font-weight:700;font-size:1.2em;text-align:center}.pfGrid{color:#fff;position:absolute;left:188px;top:200px;max-width:40px;width:40px;font-size:.8em}.pfProduction{color:#000;position:absolute;left:4px;top:303px;max-width:63px;width:63px;font-size:.8em}.pfConsumptie{color:#000;position:absolute;left:75px;top:303px;max-width:63px;width:63px;font-size:.8em}.pfZelfconsumptie{color:#000;position:absolute;left:137px;top:303px;max-width:63px;width:63px;font-size:.8em}.pfTeruggeleverd{color:#000;position:absolute;left:195px;top:303px;max-width:63px;width:63px;font-size:.8em}.pfIngekocht{color:#000;position:absolute;left:255px;top:303px;max-width:63px;width:63px;font-size:.8em}.barProduction{color:#000;position:absolute;left:0;top:262px;width:100%;max-width:100%;font-size:.7em;height:32px}.barConsumption{color:#000;position:absolute;left:0;top:294px;width:100%;max-width:100%;font-size:.7em;height:32px}.barToHome{background-color:#48eb98;float:left;height:100%;width:50%;max-width:100%}.barToGrid{background-color:#01b0c1;float:left;height:100%;width:50%;max-width:100%}.barFromSolar{background-color:#87adfe;float:left;height:100%;width:50%;max-width:100%}.barFromGrid{background-color:#fba66f;float:left;height:100%;width:50%;max-width:100%}.pfProduction{color:#000;position:absolute;left:242px;top:70px;max-width:80px;width:80px;font-size:.8em}.pfConsumption{color:#000;position:absolute;left:242px;top:110px;max-width:80px;width:80px;font-size:.8em}.pfIsExporting{color:#03d862;position:absolute;left:226px;top:216px;max-width:63px;width:63px;font-size:.8em}.spinning{animation:App-logo-spin infinite 1s linear}.spinFor10sec{animation:App-logo-spin 10s linear 1 forwards}.pfExportingWarning{color:orange;position:absolute;left:241px;top:18px;max-width:80px;width:80px;font-size:.8em;animation:blink-animation 1s steps(5,start) infinite;-webkit-animation:blink-animation 1s steps(5,start) infinite}.blinking{animation:blink-animation 1s steps(5,start) infinite;-webkit-animation:blink-animation 1s steps(5,start) infinite}@keyframes blink-animation{to{visibility:hidden}}@-webkit-keyframes blink-animation{to{visibility:hidden}}.pfIsImporting{color:#03d862;position:absolute;left:141px;top:216px;max-width:63px;width:63px;font-size:.8em}.homediagram>img{width:100%}.weather .value{margin-top:5px;font-size:1.8em}.icon{float:left;margin-right:5px}.statusbar{height:40px;background-color:var(--widgetBackgroundColor);border:2px solid black;display:flex;justify-content:center;flex-direction:column;flex-wrap:wrap;align-items:center}.statusbarIcon{width:25px;height:25px;color:red;margin-top:7px}.chartWidget{display:flex;background-color:#000;flex-direction:column;align-items:stretch;color:gray;text-align:right}.chart{width:100%;flex-wrap:wrap;flex-grow:1;flex-shrink:1;flex-basis:auto}.shelly{height:100%;display:flex;flex:1;justify-content:center;align-items:center;flex-direction:row;text-align:center}.shelly.on{background-color:green}.shelly.off{background-color:#ff00009a}#notificationPlayer{display:none}.weatherDialogFrame{width:100%;height:100%}.messagesDialog{width:100%;height:100%;color:var(--colorWhite);font-size:.7rem}.messageTable{float:left;border-collapse:collapse;border:1px solid #ccc;font-family:Arial,sans-serif;margin:5px}.messageTable td,.messageTable th{border:1px solid #ccc;padding:8px 12px;text-align:left}.messageTable th{background-color:var(--colorOrange)}.messageTable tr{background-color:var(--colorBlue)}.spin{-webkit-animation:spin 1.5s linear infinite;-moz-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}@-moz-keyframes spin{to{-moz-transform:rotate(360deg)}}@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg)}}@keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@media(max-width:404px){body,html{overflow-x:hidden;max-width:100vw;touch-action:manipulation}.widget{width:392px}.container{height:initial;max-height:initial;width:402px;max-width:402px}.cam{height:initial}}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media(prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin infinite 20s linear}}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}