:root{--blue-background:#daf3ff;--blue-background-light:#eaf9ff;--blue-border:#88f;--green-background:#efe;--green-border:#4a4;--red-background:#fee;--red-border:#a44;--white-background:#eee;--grey-borer:#888;--text-secondary:#444;--text-ternary:#888}html{width:100%;height:100%;margin:0;padding:0}body{margin:0;font-family:Montserrat,serif;font-size:14px;font-weight:500}#root{padding-bottom:1px}.bg{opacity:.5;z-index:-1;background-image:linear-gradient(-60deg,#eee 0%,#54a0ff 50%,#93d7ff 100%);animation:10s ease-in-out infinite alternate bg-slide;position:fixed;inset:0 -50%}@keyframes bg-slide{0%{transform:translate(-25%)}to{transform:translate(25%)}}input,textarea,button,select,option{font-family:Montserrat,sans-serif;font-size:16px;font-weight:500}input,textarea,select{border:1px solid var(--grey-borer);border-radius:5px;width:calc(100% - 10px);margin:5px auto 10px;padding:5px;display:block}button{border:1px solid var(--grey-borer);cursor:pointer;background:#fff;border-radius:3px;margin:20px auto;padding:10px 20px;display:block}button svg{baseline-shift:center;margin-right:3px}select{width:100%;margin-left:0;margin-right:-20px}input,textarea,button,select{background:#fff;transition:all .5s ease-in-out}input:hover,textarea:hover,select:hover{background:var(--blue-background-light);transition:all .5s ease-in-out}input:focus,textarea:focus,select:focus{background:var(--blue-background);transition:all .5s ease-in-out}button:hover{background:var(--white-background);border:1px solid var(--blue-border);box-shadow:0 4px 30px #0000001a}.button-green:focus,.button-green:hover{background:var(--green-background);border:1px solid var(--green-border)}.button-red:focus,.button-red:hover{background:var(--red-background);border:1px solid var(--red-border)}label{width:200px;margin-right:5px;display:block}.block{-webkit-backdrop-filter:blur(12px);border:1px solid var(--blue-border);background:#fffc;border-radius:16px;width:50%;margin:40px auto 0;padding:20px;position:relative;overflow:hidden;box-shadow:0 4px 30px #0000001a}.smallform .fields .field{margin-top:20px}.smallform .fields .field input{margin:6px 0 3px}.smallform .fields .field:first-of-type{margin-top:0;margin-bottom:0}.smallform .hint{color:var(--text-secondary);margin:0 0 10px;font-size:12px}.smallform .button-row{margin:40px 0 5px}.smallform{width:300px;padding:30px;font-size:16px;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}.button-row{flex-direction:row;justify-content:center;gap:10px;margin:20px 0;display:flex}.button-row button{flex-grow:0;flex-shrink:0;margin:0}.pre-button-row{text-align:center;margin:20px 0 -30px;font-size:80%}.color-selector{gap:8px;margin:5px auto 10px;display:flex}.color-selector .option{aspect-ratio:1;cursor:pointer;opacity:.3;border:1px solid #000;border-radius:3px;height:30px}.color-selector .option-active{opacity:1;box-shadow:0 0 5px #444}@media (width<=650px){.block{border-left:0;border-right:0;border-radius:0;width:calc(100% - 40px);margin-top:10px}.smallform{width:calc(100% - 60px);margin-top:5px;top:0;transform:translate(-50%)}.button-row{flex-direction:column}.button-row button{width:90%;margin:0 auto}}#main-loader{aspect-ratio:1;width:300px;margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#message-display{z-index:50;flex-direction:column;gap:10px;width:400px;font-size:16px;display:flex;position:fixed;bottom:10%;left:50%;transform:translate(-50%)}#message-display .message{border-radius:5px;width:calc(100% - 20px);padding:10px;display:flex;box-shadow:0 4px 30px #0000001a}#message-display .message-info{color:#66d;background:#fffe;border:1px solid #77e}#message-display .message-ok{color:#393;background:#dfde;border:1px solid #393}#message-display .message-error{color:#a44;background:#fdde;border:1px solid #a44}#message-display .message-warning{color:#773;background:#ffde;border:1px solid #773}#message-display .fade-out{animation:1s ease-out forwards message-fade-out}#message-display .slide-in{animation:1s ease-out forwards message-slide-in}#message-display svg{baseline-shift:center;flex-shrink:0;margin-left:3px;margin-right:6px;font-size:120%}@keyframes message-slide-in{0%{opacity:0;translate:-100vw}50%{opacity:0}to{opacity:1;translate:0}}@keyframes message-fade-out{0%{opacity:1}to{opacity:0}}@media (width<=650px){#message-display{width:90%;bottom:3%}}.loader{text-align:center;z-index:5;flex-direction:column;place-content:center;width:100%;height:100%;margin:0;padding:0;display:flex;position:absolute;top:0;left:0}.loader .loader-inner{display:block}.loader.overlay{background:#fffc}.loader .spinner-container{display:inline-block}.loader .spinner{aspect-ratio:1;border:8px solid #ccc;border-color:#ccc #0000;border-radius:50%;width:100px;animation:2s linear infinite spinner-rotate;display:grid}.loader .spinner:before,.loader .spinner:after{content:"";border:inherit;border-radius:50%;grid-area:1/1;margin:4px}.loader .spinner:before{animation:inherit;border-color:#6d89ff #0000;animation-duration:1s;animation-direction:reverse}.loader .spinner:after{margin:16px}.loader .message{margin-top:24px;font-size:24px;animation:1s linear infinite alternate message-blink}@keyframes spinner-rotate{to{transform:rotate(1turn)}}@keyframes message-blink{to{opacity:0}}#device-list{width:clamp(600px,70%,1000px);position:absolute;top:10%;left:50%;transform:translate(-50%)}#device-list-body{flex-direction:column;gap:10px;padding-top:10px;display:flex}#device-list-body .entry{flex-flow:row;justify-content:space-between;align-items:center;width:calc(100% - 40px);margin-top:0;display:flex}#device-list-body .entry div{flex-grow:0}#device-list-body .entry .display-before{width:0;height:0}#device-list-body .entry .data{flex-grow:1}#device-list-body .entry .data .name{margin-bottom:5px;font-size:140%;font-weight:700;display:block}#device-list-body .entry .data .id{color:var(--text-secondary);display:block}#device-list-body .entry .buttons{border-left:1px solid var(--text-ternary);align-items:center;height:100%;margin-left:30px;padding-left:20px;font-size:250%;display:flex}#device-list-body .entry .buttons svg{baseline-shift:center;color:var(--text-ternary);transition:all .4s}#device-list-body .entry .buttons svg:hover{color:var(--text-secondary);transition:all .4s}#device-list-bottom{margin:20px 0}@media (width<=650px){#device-list{width:100%;top:0}#device-list .entry{flex-wrap:wrap}#device-list .entry .display-before{flex-grow:1;flex-shrink:0;order:2;width:100%;height:0}#device-list .entry .display{order:3;margin:20px auto 0}#device-list .entry .display-7seg{height:85px}}.display-7seg{background-color:#444;border-radius:5px;justify-content:left;align-items:center;height:70px;padding-left:12px;padding-right:2px;display:flex}.display-7seg-inner{justify-content:space-evenly;align-items:center;height:80%;display:flex}.display-7seg-inner .end{width:20%;height:100%}.digit{aspect-ratio:.75;height:100%;position:relative}.digit .digit-inner{height:100%;margin-right:18%;position:relative;transform:scaleX(.95)scaleY(.77)translate(-23%)translateY(-12%)skew(-8deg)}.digit .digit-inner div{position:absolute}.digit .bar-1,.digit .bar-2,.digit .bar-3,.digit .bar-4,.digit .bar-5,.digit .bar-6,.digit .bar-7{border-radius:5px;width:88%;height:10%}.digit .bar-inner{background:#666;width:100%;height:100%}.digit .bar-1{left:30%}.digit .bar-1 .bar-inner{clip-path:polygon(0 0,100% 0,80% 100%,20% 100%)}.digit .bar-2{top:27.5%;left:70%;transform:rotate(90deg)}.digit .bar-2 .bar-inner{clip-path:polygon(0 0,100% 0,80% 100%,20% 100%)}.digit .bar-3{top:88%;left:70%;transform:rotate(90deg)}.digit .bar-3 .bar-inner{clip-path:polygon(0 0,100% 0,80% 100%,20% 100%)}.digit .bar-4{top:115%;left:30%}.digit .bar-4 .bar-inner{clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}.digit .bar-5{top:88%;left:-10%;transform:rotate(90deg)}.digit .bar-5 .bar-inner{clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}.digit .bar-6{top:27.5%;left:-10%;transform:rotate(90deg)}.digit .bar-6 .bar-inner{clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}.digit .bar-7{top:58%;left:30%}.digit .bar-7 .bar-inner{clip-path:polygon(80% 0,100% 50%,80% 100%,20% 100%,0 50%,20% 0)}.digit .bar-dot{aspect-ratio:1;width:12%;position:absolute;top:88%;left:77%}.digit .bar-dot .bar-inner{border-radius:50%}.display-7seg-red .active{filter:drop-shadow(0 0 3px #ff0000b3)}.display-7seg-red .active .bar-inner{background-color:red}.display-7seg-yellow .active{filter:drop-shadow(0 0 3px #ffa500b3)}.display-7seg-yellow .active .bar-inner{background-color:orange}.display-7seg-greenyellow .active{filter:drop-shadow(0 0 3px #d0ff00b3)}.display-7seg-greenyellow .active .bar-inner{background-color:#d0ff00}.display-7seg-green .active{filter:drop-shadow(0 0 3px #00ff51b3)}.display-7seg-green .active .bar-inner{background-color:#00ff51}.display-7seg-blue .active{filter:drop-shadow(0 0 3px #0080ffb3)}.display-7seg-blue .active .bar-inner{background-color:#0080ff}.display-7seg-white .active{filter:drop-shadow(0 0 3px #ffffffb3)}.display-7seg-white .active .bar-inner{background-color:#fff}#device-editor{width:50%;margin:40px auto}#device-editor label{width:80%;margin-right:3px;display:inline-block}#device-editor .hint{color:var(--text-secondary);margin:-2px 0 10px;font-size:12px}#device-editor .edit-block{border-bottom:1px solid #ccc;padding:10px 0 5px}#device-editor .edit-block-last{border-bottom:none}#device-editor .edit-block{transition:all .5s}#device-editor .edit-block-inactive{opacity:.4;transition:all .5s}#device-editor h2{display:inline-block}.title-block{font-size:20px}.title-block h2{margin:0;font-size:100%}.mode-select{color:#444;aspect-ratio:1;cursor:pointer;background:#f8f8f8;border:1px solid #444;border-radius:3px;height:1em;margin-left:10px;padding:5px;display:inline-block}.mode-select:after{content:"KIVÁLASZT"}.mode-select-active{color:#228b22;background:#aeffae;border:1px solid #228b22}.mode-select-active:after{content:"AKTÍV"}@media (width<=650px){#device-editor{width:calc(100% - 40px);margin-top:5px;margin-bottom:5px}}