body,html{padding:0;margin:0}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;padding:20px}h1{margin:0 0 20px 0}#connect{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 40px)}#connect input{margin:10px;text-align:center}#connect button,#connect input{padding:10px;border:1px solid #ccc;border-radius:5px;box-sizing:border-box;width:200px}#connect button{background:#795548;color:#fff;cursor:pointer;transition:all .3s ease}#connect button:hover{background:#5d4037}.loader{cursor:wait;width:30px;height:30px;vertical-align:middle}.loader,.loader svg{display:inline-block}.loader svg{width:100%;height:100%;overflow:visible}.loader svg .percent{stroke:green;fill:none;stroke-width:30;stroke-linecap:round}.loader svg .around{stroke:#c4c4c4;fill:none;stroke-width:30}.loader svg .loading{fill:#c4c4c4;stroke:#c4c4c4;stroke-width:15}.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}.rooms .room{border:1px solid #ccc;border-radius:10px}.rooms .room h2{margin:0;padding:5px;margin:5px;background:#795548;color:#fff;border-top-right-radius:5px;border-top-left-radius:5px}.rooms .room h3{margin:0;padding:5px;border-top:1px solid #ccc;font-size:14px}.entities{display:flex;justify-content:space-between;padding:10px}.heaters{display:flex;gap:5px}.heaters .heater{display:block}.heaters .heater svg{display:block;fill:green;height:24px}.heaters .heater[data-change=true] svg{fill:orange}.heaters .heater[data-online=false] svg{fill:red}.windows{display:flex;gap:5px}.windows .window{display:block}.windows .window svg{display:block;fill:green;height:24px}.windows .window[data-close=false] svg{fill:orange}.windows .window[data-online=false] svg{fill:red}.temperatures .temperature{display:flex;justify-content:space-between;align-items:center;padding:0 10px 10px 10px}.temperatures .temperature button{width:30px;height:40px;cursor:pointer}.temperatures .temperature .values{flex-grow:1}.temperatures .temperature .values .current{font-size:40px;font-weight:600}.temperatures .temperature .values .target{font-size:25px}.temperatures .temperature.bath button{height:20px}.temperatures .temperature.bath .values .current{font-size:18px;font-weight:600}.temperatures .temperature.bath .values .target{font-size:13px}