@import"https://unpkg.com/leaflet/dist/leaflet.css";@import"https://api.fontshare.com/css?f[]=satoshi@400,500,700&display=swap";html,body,#root{height:100%}body{margin:0;padding:0;font-family:Satoshi,sans-serif;background-image:url(/assets/init_logo-0KefWKgX.png),url(/assets/EU_logo_side-BS4xcsTv.jpg),url(/assets/1-11264-scaled-e1708871219534-BnAG6GPh.jpg);background-repeat:no-repeat,no-repeat,no-repeat;background-position:top 5px left 5px,bottom 5px left 5px,center;background-size:175px auto,180px auto,cover;color:#fff}.app-container{display:flex;justify-content:center;align-items:center;transform:scale(1.7);transform-origin:top left;width:calc(100% / 1.7);height:calc(100vh / 1.7);overflow:hidden}@media (min-width: 1024px) and (max-width: 1366px){.app-container{transform:scale(1.3);width:calc(100% / 1.3);height:calc(100vh / 1.3);overflow:hidden}body{background-size:140px auto,140px auto,cover;background-position:top 8px left 8px,bottom 8px left 8px,center}}@media (max-width: 1023px) and (orientation: landscape){:root{--sat: env(safe-area-inset-top);--sab: env(safe-area-inset-bottom);--sal: env(safe-area-inset-left);--sar: env(safe-area-inset-right)}.app-container{transform:scale(.8);width:125%;height:calc((100vh - var(--sat) - var(--sab)) / .8);overflow:hidden}@supports (height: 100dvh){.app-container{height:calc((100dvh - var(--sat) - var(--sab)) / .8)}}body{background-size:110px auto,110px auto,cover;background-position:top calc(var(--sat) + 5px) left calc(var(--sal) + 5px),bottom calc(var(--sab) + 5px) left calc(var(--sal) + 5px),center;background-repeat:no-repeat,no-repeat,no-repeat}}.rotate-popup{color:#000}.app-box{background-color:#fff;color:#000;padding:0;border-radius:16px;box-shadow:0 4px 16px #0000004d;width:700px;height:350px;display:flex;align-items:stretch;overflow:hidden;transition:opacity .6s ease}.app-box.fade-out{opacity:0}.wizard-layout{display:flex;width:100%;height:100%}.steps-column{display:flex;flex-direction:column;width:90px;height:100%;padding:0;margin:0}.step-rect-button{height:20%;width:100%;border:none;background-color:#0000000d;color:#444;font-size:.85rem;cursor:pointer;transition:background-color .2s;padding:0 .5rem;margin:0;display:flex;align-items:center;justify-content:center}.step-rect-button:hover{background-color:#0000001a}.step-rect-button.active{background-color:#333;color:#fff}.content-column{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:1rem 1.5rem}.step-content{flex:1;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch}.scroll-area{flex:1;overflow-y:auto}.nav-buttons-row{display:flex;justify-content:space-between;align-items:flex-end;position:relative}.nav-button{padding:.5rem 1rem;font-size:1.5rem;cursor:pointer;border:none;background-color:#333;color:#fff;border-radius:8px;transition:background-color .2s}.nav-button:hover{background-color:#555}.spacer{flex-grow:1}.app-title{text-align:center;font-size:1.8rem;margin:0 0 1rem}.instructions{text-align:left;font-size:.95rem;line-height:1.5;max-width:100%;margin-top:-20px;scale:.9}.instructions .nav-button.right{font-size:.9rem;padding:2px 6px;vertical-align:middle}.demand-inputs{display:flex;flex-direction:column;align-items:center;gap:.8rem;width:100%;transform-origin:top center}.demand-mode .nav-button.left,.demand-mode .nav-button.right{position:relative;top:-50px}.demand-scroll-area .scaled-inputs{transform:scale(.9);transform-origin:top center}.input-row{display:flex;align-items:center;width:100%;max-width:500px}.input-row label{width:240px;font-size:.95rem;text-align:left;white-space:nowrap}.input-row input{width:100px;padding:.4rem .6rem;font-size:.9rem;border:1px solid #ccc;border-radius:6px;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;margin-left:1rem}.input-row-spaced{margin-top:1rem}.input-row input::-webkit-outer-spin-button,.input-row input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.electricity-mode .electricity-columns{display:flex;flex-direction:row;align-items:flex-start;gap:1.5rem;margin-left:2;margin-top:1.5rem}.electricity-mode .content-column{padding-left:.3rem}.electricity-column{display:flex;flex-direction:column;align-items:flex-start}.column-header{display:flex;align-items:center;font-weight:700;font-size:.95rem;margin-bottom:1rem}.column-header .info-icon{margin-left:.5rem}.pv-header{transform:translate(7px)}.wind-header{transform:translate(15px)}.battery-header{transform:translate(40px)}.electricity-column .input-row{display:flex;align-items:center;margin-bottom:.2rem}.electricity-column .input-row label{width:120px;margin-right:-.8rem;font-size:.85rem}.electricity-column .input-row input{width:40px;flex:0;font-size:.9rem}.electricity-mode .steps-column{width:100px}.electricity-mode .nav-button.left{position:relative;top:-10px;left:20px}.electricity-mode .nav-button.right{position:relative;top:-10px;right:20px}.electricity-mode .simulate-radio-centered{margin-top:20px}.simulate-radio-centered{display:flex;justify-content:center;align-items:center;font-size:.95rem;position:relative;top:-3px}.simulate-radio label{display:inline-flex;align-items:center;gap:.5rem;line-height:1}.circle-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border:2px solid #666;border-radius:50%;display:inline-block;vertical-align:middle;position:relative;top:-1.5px;left:-5px;cursor:pointer;margin:0}.circle-radio:checked:before{content:"";position:absolute;top:3px;left:3px;width:6px;height:6px;background-color:#333;border-radius:50%}.info-icon{background-color:#ccc;color:#fff;border:none;border-radius:50%;font-weight:700;font-size:.9rem;width:24px;height:24px;margin-left:.5rem;cursor:pointer;transition:background-color .2s}.info-icon:hover{background-color:#999}.with-margin-top{margin-top:2rem}.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0000004d;display:flex;justify-content:center;align-items:center;z-index:1000}.popup{background:#fff;padding:2rem;border-radius:12px;width:300px;max-width:90%;position:relative;text-align:center;box-shadow:0 8px 20px #0000004d}.popup-close{position:absolute;top:.5rem;right:.75rem;background:none;border:none;font-size:1.2rem;cursor:pointer;color:#888}.popup-close:hover{color:#000}.thermal-mode .simulate-radio-centered{margin-top:70px}.thermal-mode .nav-button.left,.thermal-mode .nav-button.right{position:relative;top:-8px}.thermal-mode .nav-button.right{background:linear-gradient(to left,green 50%,#333 50%);background-size:200% 100%;background-position:right bottom;transition:background-position .3s ease-out}.thermal-mode .nav-button.right:hover{background-position:left bottom}.return-button{font-size:1.1rem;padding:4px 10px;position:relative;top:-3px;left:15px}.thermal-columns{display:flex;flex-direction:row;justify-content:center;gap:4rem;margin-top:1.5rem}.thermal-column{display:flex;flex-direction:column;align-items:flex-start}.heatpump-header,.storage-header{display:flex;align-items:center;font-weight:700;font-size:.95rem;margin-bottom:1rem}.heatpump-header,.storage-header{transform:translate(7px)}.thermal-column .input-row label{width:140px;margin-right:-.8rem;font-size:.85rem}.thermal-column .input-row input{width:40px;flex:0;font-size:.9rem}.thermal-column .input-row{margin-bottom:.3rem}.map-container{width:100%;height:auto;margin-bottom:1rem}.leaflet-container{height:200px;width:100%;border-radius:8px}.location-coordinates{display:flex;justify-content:center;gap:2rem;margin-bottom:1rem;margin-top:-10px}.location-input{display:flex;align-items:center}.location-input label{margin-right:.5rem;white-space:nowrap}.location-input input{width:100px;-moz-appearance:textfield}.location-input .info-icon{margin-left:.5rem}.location-input input::-webkit-inner-spin-button,.location-input input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.location-mode .simulate-radio-centered{margin-top:0}.location-mode .nav-button.left,.location-mode .nav-button.right{position:relative;top:-38px}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#fff9;display:flex;justify-content:center;align-items:center;z-index:9999}.loading-spinner{width:60px;height:60px}.data-source{font-size:.85em;font-style:italic;display:block;margin-top:5px}.results-explanation{font-size:.8rem;line-height:1.3}.popup-text-small,.popup-text-small-heating{font-size:.9rem;line-height:1.3}.result-wrapper{position:relative;flex:1}.result-wrapper .app-title{transform:translateY(-10px)}.result-header{display:flex;align-items:center;transform:translate(100px);gap:0px}.fig6-mode .result-header,.fig7-mode .result-header,.fig8-mode .result-header,.fig9-mode .result-header{transform:translate(55px)}.fig10-mode .result-header{transform:translate(200px)}.co2-results{position:absolute;top:10px;right:-70px;text-align:left}.financial-results{position:absolute;top:10px;left:20px;text-align:left}.result-info-icon{position:relative;top:-17px}.result-placeholder-box{position:absolute;top:0;left:0;transform:translate(-50%);width:500px;height:240px;border:1px solid #aaaaaa00;display:flex;justify-content:center;align-items:center;transform:translate(-10px,30px)}.fig3-mode .result-placeholder-box:before{content:"PV Generation [kWh]";position:absolute;top:50%;left:-50px;transform:translateY(-50%) rotate(-90deg);transform-origin:center;font-size:12px;white-space:nowrap}.fig3-mode .result-placeholder-box:after{content:"Hour of Year";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);font-size:12px;white-space:nowrap}.pv-chart-wrapper{position:relative;width:500px;height:240px}.custom-legend{position:absolute;top:-10px;left:503px;max-width:110px;font-size:10px;display:flex;align-items:flex-start;background-color:#fff;padding:2px 6px;border-radius:4px;box-sizing:border-box}.legend-color-box{width:10px;height:10px;background-color:#e5ed09;border-radius:2px;margin-right:6px;flex-shrink:0;margin-top:2px}.fig1-mode .result-placeholder-box:before{content:"Electricity Demand [kWh]";position:absolute;top:50%;left:-50px;transform:translateY(-50%) rotate(-90deg);transform-origin:center;font-size:12px;white-space:nowrap}.fig1-mode .result-placeholder-box:after{content:"Hour of the Day";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);font-size:12px;white-space:nowrap}.elec-chart-wrapper{position:relative;width:500px;height:240px}.legend-color-box.orange{background-color:#ff8000}.fig2-mode .result-placeholder-box:before{content:"Heating Demand [kWh]";position:absolute;top:50%;left:-50px;transform:translateY(-50%) rotate(-90deg);transform-origin:center;font-size:12px;white-space:nowrap}.fig2-mode .result-placeholder-box:after{content:"Hour of Year";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);font-size:12px;white-space:nowrap}.heat-chart-wrapper{position:relative;width:500px;height:240px}.fig4-mode .result-placeholder-box:before{content:"Wind Generation [kWh]";position:absolute;top:50%;left:-50px;transform:translateY(-50%) rotate(-90deg);transform-origin:center;font-size:12px;white-space:nowrap}.fig4-mode .result-placeholder-box:after{content:"Hour of Year";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);font-size:12px;white-space:nowrap}.wind-chart-wrapper{position:relative;width:500px;height:240px}.legend-color-box.wind{background-color:#2f52fe}.fig5-mode .result-placeholder-box:before{content:"Energy Flows [kWh]";position:absolute;top:50%;left:-50px;transform:translateY(-50%) rotate(-90deg);transform-origin:center;font-size:12px;white-space:nowrap}.fig5-mode .result-placeholder-box:after{content:"Hour of the Day";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);font-size:12px;white-space:nowrap}.fig5-chart-wrapper{position:relative;width:500px;height:240px}.custom-legend.multi{position:absolute;top:-5px;left:503px;font-size:10px;background-color:#fff;padding:4px 6px;border-radius:4px;box-sizing:border-box;display:flex;flex-direction:column;gap:2px}.legend-row{display:flex;align-items:center;line-height:1.2}.legend-color-box{width:10px;height:10px;border-radius:2px;margin-right:6px;flex-shrink:0;margin-top:1px}.legend-color-box.gray{background-color:gray}.legend-color-box.purple{background-color:purple}.fig6-mode .result-placeholder-box:before{content:"Energy Flows [kWh]";position:absolute;top:50%;left:-50px;transform:translateY(-50%) rotate(-90deg);transform-origin:center;font-size:12px;white-space:nowrap}.fig6-mode .result-placeholder-box:after{content:"Hour of the Day";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);font-size:12px;white-space:nowrap}.fig6-chart-wrapper{position:relative;width:500px;height:240px}.fig7-mode .result-placeholder-box:before{content:"Energy Flows [kWh]";position:absolute;top:50%;left:-50px;transform:translateY(-50%) rotate(-90deg);transform-origin:center;font-size:12px;white-space:nowrap}.fig7-mode .result-placeholder-box:after{content:"Hour of the Week";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);font-size:12px;white-space:nowrap}.fig7-chart-wrapper{position:relative;width:500px;height:240px}.legend-color-box.firebrick{background-color:#b22222}.legend-color-box.darkblue{background-color:#00008b}.legend-color-box.darkgreen{background-color:#006400}.fig8-mode .result-placeholder-box:before{content:"Energy Flows [kWh]";position:absolute;top:50%;left:-50px;transform:translateY(-50%) rotate(-90deg);transform-origin:center;font-size:12px;white-space:nowrap}.fig8-mode .result-placeholder-box:after{content:"Hour of the Days";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);font-size:12px;white-space:nowrap}.fig8-chart-wrapper{position:relative;width:500px;height:240px}.legend-color-box.black{background-color:#000}.legend-color-box.blue{background-color:#00f}.legend-color-box.orange{background-color:orange}.fig9-mode .result-placeholder-box:before{content:"Euros [€]";position:absolute;top:50%;left:-20px;transform:translateY(-50%) rotate(-90deg);transform-origin:center;font-size:12px;white-space:nowrap}.fig9-mode .result-placeholder-box:after{content:"Hour of Year";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);font-size:12px;white-space:nowrap}.fig9-chart-wrapper{position:relative;width:500px;height:240px}.legend-color-box.purple{background-color:#8884d8}.legend-color-box.green{background-color:green}.legend-color-box.red{background-color:red}.download-button{position:absolute;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;top:140px;left:340px;z-index:10;background-color:#10793f;color:#fff;border:none;padding:10px 20px;font-size:14px;border-radius:6px;cursor:pointer;transform:scale(.6);transform-origin:top left}.download-button:hover{background-color:#45a049}
