@import"https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap";@import"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css";*{margin:0;padding:0}body{width:100vw;height:100vh;font-family:Poppins,sans-serif;overflow:hidden;background-image:url(/images/bckg.png);background-repeat:no-repeat;background-position:center;background-size:cover;display:flex;justify-content:center}@media screen and (max-width: 600px){*{margin:0;padding:0}body{height:100vh;background-image:url(/images/bckg-phone.png);background-repeat:no-repeat;background-position:center;background-size:cover}}::-webkit-scrollbar{width:10px;border-radius:50%}::-webkit-scrollbar-track{background:#383838;border-radius:10px}::-webkit-scrollbar-thumb{background:#f7b96f;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ec8f1d}.container{width:100vw;height:100vh;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}#title{text-align:center;color:#f7b96f}.login-form{z-index:1;display:flex;flex-direction:column;align-items:center;background-color:#1a1a1a;border-radius:15px;box-shadow:inset 0 0 15px 10px #0000002f;padding:1vw 1vh;width:20vw}form{width:100%}.inputs{display:flex;flex-direction:column}.inputs input{background-color:#fff;border-radius:10px;border:1px solid transparent;outline:none;font-family:Poppins,sans-serif;font-size:18px;box-shadow:inset 0 0 10px 5px #0000002f;box-shadow:none;padding:10px;transition:all ease .2s;width:95%}.inputs input[type=submit]{margin-block:1vh}input#form-input:hover{box-shadow:none}input#form-input:focus{box-shadow:none}label{margin-inline:10px}.buttons{width:100%;display:flex;justify-content:space-around;margin-top:10px}button.btn{font-family:Poppins,sans-serif;font-weight:700;font-size:20px;background-color:#fff;color:#0f0f0f;border:none;outline:none;cursor:pointer;border-radius:10px;width:45%;padding:5px;box-shadow:inset 0 0 10px 5px #0000002f;transition:all ease .2s}#sgnp,#lgn{background-color:#0f0f0f;color:#fff;box-shadow:none}button.btn:hover{box-shadow:none;scale:105%}#eyeIcon{right:1vw;color:#0f0f0f;font-size:22px;cursor:pointer;padding-inline:10px}.paswInput{width:99%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;background-color:#fff;border-radius:10px;border:1px solid transparent}.paswInput:focus{border:1px solid #f38f15}@media screen and (max-width: 600px){#title{font-size:large}.login-form{width:auto;scale:80%}form,.inputs{width:100%}#eye-icon{padding-inline:3vw}}.loading-screen{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}@keyframes loading{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.loading div{position:absolute;animation:loading .5s linear infinite;width:152px;height:152px;top:24px;left:24px;border-radius:50%;box-shadow:0 6.800000000000001px #f7b96f;transform-origin:76px 79.4px}.loading-spinner{width:200px;height:200px;display:inline-block;overflow:hidden;background:#fff0}.loading{width:100%;height:100%;position:relative;transform:translateZ(0) scale(1);backface-visibility:hidden;transform-origin:0 0}.loading div{box-sizing:content-box}@keyframes appearingEffect{0%{scale:0%}to{scale:100%}}@keyframes dissappearEffect{0%{scale:100%}to{scale:0%;display:none}}.home{width:100vw;height:100vh;display:flex;justify-content:center}.home-container{height:100vh;display:flex;flex-direction:column;justify-content:center;color:#f7b96f}.home-container>header:first-child{position:absolute;top:0}header{width:100dvw;padding:10px 20px;border-bottom:3px solid #F7B96F;display:flex;flex-direction:row;justify-content:space-between;align-items:center;box-sizing:border-box}.color-pick-title{display:flex;flex-direction:row;color:#f7b96f}.thin-title{font-weight:lighter}.logout-btn{font-family:Poppins,sans-serif;font-weight:700;font-size:20px;background-color:#fff;border:none;outline:none;cursor:pointer;border-radius:10px;width:7vw;padding:5px;box-shadow:inset 0 0 10px 5px #0000002f;transition:all ease .2s;z-index:2}.logout-btn:hover{scale:110%}.logout-btn:active{scale:100%}.addBtn{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#1e1e1e;border:5px solid #F7B96F;border-style:dashed;cursor:pointer;border-radius:20px;padding:30px;transition:all ease .1s}.addBtn:hover{scale:110%}.addBtn:active{scale:100%}.addBtn h1{font-family:Radio Canada Big,sans-serif;font-weight:lighter;font-size:100px;transform:translateY(10px)}.spyder-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#1e1e1e;border-radius:20px;padding:30px 50px;cursor:pointer;margin:10px 20px;border:none;transition:all ease .2s}.spyder-btn:hover{scale:110%}.spyder-btn:active{scale:100%}.spyder-btn h1{font-family:Radio Canada Big,sans-serif;font-size:30px}.spyder-btn p{font-size:20px}.spyder-btn img{width:150px;height:150px}.addBtn p{font-size:30px;transform:translateY(-20px)}.color-list{transform:translateY(15vh);overflow-y:auto;height:50vh;width:90vw;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);place-items:center;gap:50px 50px;margin-bottom:20px;padding-block:50px;z-index:1}.color-button-wrapper{width:250px;height:250px;display:flex;justify-content:center;align-items:center}.color-button{background-color:#1e1e1e;border-radius:20px;width:250px;height:250px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:transform .2s ease,border .2s ease;will-change:transform}.active{border:5px solid #F7B96F}.color-button:hover{transform:scale(1.1);border:5px solid #F7B96F}.color-button:active{transform:scale(1)}#carbon{box-shadow:0 0 15px 10px #ffc4008c;z-index:2}.color-button h1{color:#fff;transform:translateY(-25px)}#colorPreview{width:70px;height:70px;border-radius:10px}.Red{background-color:red}.Green{background-color:green}.Blue{background-color:#00f}.Yellow{background-color:#ff0}.Black{background-color:#000}.White{background-color:#fff}.Carbon{background:url(/images/carbon-img.jpg)}.spyders{width:100vw;height:50vh;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,1fr);place-items:center;gap:10px 10px;margin-bottom:20px;padding-block:50px;overflow:auto}@media screen and (max-width: 600px){.addBtn{display:none}.spyders{display:flex;flex-direction:column;justify-content:center;align-items:center;overflow-y:auto;height:50vh}.spyder-btn{scale:70%;margin:0;transition:all ease .25s}.spyder-btn:active{scale:80%}}.device-container{width:100%;height:80%;display:flex;justify-content:center;align-items:center}.device-box{color:#fff;background-color:#1e1e1e;display:flex;flex-direction:column;width:30vw;padding:10px 30px}.device-header{display:flex;flex-direction:column;justify-content:center;align-items:center}.device-header h1{color:#f7b96f;padding-block:10px}.device-legend{display:flex;flex-direction:row;align-items:center;justify-content:center;border-top:3px solid #F7B96F;border-bottom:3px solid #F7B96F;width:100%;padding-block:10px}.device-legend p{padding-inline:20px}.device-list{margin:10px;padding-inline:10px;display:flex;flex-direction:column;align-items:center;height:25vh;overflow-y:auto;overflow-x:hidden}.brd{width:3px;height:3vh;background-color:#f7b96f;border-radius:10px}#dvcBrd{transform:translate(-.7rem)}.device{background-color:#141414;border-radius:5px;color:#fff;display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;padding-block:10px;margin:5px 0;cursor:pointer;transition:all ease .2s}.device:hover{background-color:#0a0a0a}.device p{width:49%}.device p:first-child{text-align:right;transform:translate(-2rem)}.device p:last-child{text-align:left;transform:translate(.5rem)}#secondInputs form{display:flex;flex-direction:column;justify-content:center;align-items:center}#secondPass{display:flex;flex-direction:row;justify-content:space-between;align-items:center}#portBtn{width:20%}@keyframes rotate-settings{0%{rotate:0deg}to{rotate:180deg}}@keyframes unrotate-settings{0%{rotate:180deg}to{rotate:0deg}}.delete-container{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.delete-box header{width:20vw}.delete-box header button{width:fit-content;padding-inline:10px}.delete-box{position:relative;color:#fff}#spyder{width:300px;height:300px;position:relative;top:100px;left:-50px}#fan{width:50px;height:50px}.work-station{width:100%;height:80vh;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.side{display:flex;flex-direction:column;justify-content:space-between;height:85vh;z-index:1}p.dtm-title{color:#fff;font-weight:700;font-size:20px}input#l-eye-color,input#r-eye-color{background-color:transparent;border:none;width:0px;height:0px}.central{height:80vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.down{height:50vh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;top:0;left:-50px}.fan-sliders{display:flex;flex-direction:column;justify-content:space-between;align-items:center;transform:translate(50%)}.vertical{display:flex;flex-direction:column;justify-content:space-between;align-items:center;transform:rotate(90deg)}.hide{display:none}.overlay{position:absolute;left:-3vw;width:150%;height:95%;z-index:1;background-color:#00000096}.fan-slider{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:20px 10px}input[type=range]{transform:rotate(180deg);margin-inline:10px}.vertical .fan-slider:first-child,.vertical .fan-slider:last-child{transform:translate(-50px)}.block{background-color:#1e1e1e;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:10px 20px}#value{font-weight:700;color:#fff}.eye{width:fit-content;height:fit-content;cursor:pointer;position:relative;top:50px}input[type=date],input[type=time]{background-color:#fff;font-family:Poppins,sans-serif;padding:5px 10px;outline:none;border:none;border-radius:5px;margin:10px}p.subtitle{color:#fff;font-weight:700}.switch{position:relative;display:inline-block;width:80px;height:35px}.switch input[type=checkbox]{width:0;height:0;opacity:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;-webkit-transition:.4s;transition:.4s;background-color:#ce0000}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s;content:"M";font-family:Poppins,sans-serif;display:flex;justify-content:center;align-items:center;font-weight:700}.switch input:not(:checked)+.slider-false:before{content:"M";font-family:Poppins,sans-serif}.switch input:checked+.slider:before{content:"A";font-family:Poppins,sans-serif}.switch input:checked+.slider{background-color:#02bb58}.switch input:focus+.slider{box-shadow:0 0 1px #02bb58}.switch input:checked+.slider:before{-webkit-transform:translateX(45px);-ms-transform:translateX(45px);transform:translate(45px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.values,.bar{display:flex;flex-direction:column;justify-content:space-between;align-items:center}.bar img{margin-block:1px}.bar img#airPointer,#value{position:relative}#modeBar{width:10vw;transform:translate(45%)}input[type=range]{-webkit-appearance:none;width:130px;height:30px;--progress: 50%;background:linear-gradient(to right,#007bff var(--progress),#ddd var(--progress));outline:none;transition:all ease-in .1s;cursor:pointer;border-radius:5px}input[type=range]:before{content:"";height:10px;background:#007bff;position:absolute;border-radius:5px;top:0;left:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:2px;height:50px;background:transparent;cursor:pointer;border-radius:5px}input#s5{transform:rotate(0)}.canv{transform:translateY(20%) translate(15%)}.action-buttons{z-index:2;display:flex;flex-direction:row;justify-content:center;align-items:center}.settings-btn,.settings-btn-active{font-size:25px;padding:10px;border-radius:10px;border:none;background-color:#ffffff1e;color:#fff;cursor:pointer;z-index:3;transition:all ease .2s}.settings-btn>i{animation:unrotate-settings 1.5s forwards}.settings-btn:hover,.settings-btn-active{background-color:#ffffff96}.settings-btn-active>i{animation:rotate-settings 1.5s forwards}.spyder-settings-false{display:none}.spyder-settings{padding:15px;margin-bottom:15px;border-radius:10px;background-color:#00000096;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;position:absolute;right:11%;top:2%}.wifi-props{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin-block:10px}.wifi-props input{font-family:Poppins,sans-serif;background-color:#49494996;color:#fff;border:none;border-radius:5px;padding:10px;font-size:18px}.settings-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.trash-btn{color:#8a0000;background-color:#000000c2;font-size:18px;border:1px solid #8a0000;border-radius:10px;padding:10px;cursor:pointer;transition:all ease-in .2s}.trash-btn:hover,.trash-btnL:focus{color:red;border-color:red}.eye-circle{width:40px;height:40px;border-radius:50%;background-color:#fff}#l-zenica{position:relative;top:40%;left:30%}#r-zenica{position:relative;top:40%;left:50%}.fan-sliders-false{display:none}@media screen and (max-width: 1920px) and (min-width: 601px){.down{height:50vh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;top:0;left:-50px;transform:translateY(15vh);scale:80%}}@media screen and (max-width: 600px){.interface-container,header,.central{width:100vw;height:100dvh}header{height:fit-content}header h1{font-size:x-large}.work-station{width:100vw;height:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.central{height:90%;width:50%;z-index:3;margin:0;padding:0}.side{width:20%;height:85%;margin:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding-block:2vh}.down{z-index:5;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;width:100%;transform:translate(8vw)}.fan-sliders{z-index:6;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:translate(9vw)}img#fan{scale:50%;z-index:7}.fan-slider{height:1vh}.color-input{width:50px;height:50px}.block{font-size:smaller;scale:60%;display:flex;flex-direction:column}#modeBar{scale:80%;padding:10px 30px}.side .block:last-child{font-size:larger;position:relative;right:40px}.wifi-props{z-index:7}.logout-btn{width:fit-content;font-size:smaller}input[type=range]{-webkit-appearance:none;width:100%;--progress: 50%;height:10px;background:linear-gradient(to right,#007bff var(--progress),#ddd var(--progress))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:24px;width:24px;background:#007bff;border-radius:50%;cursor:pointer;margin-top:-10px}input[type=range]::-webkit-slider-runnable-track{height:4px;width:100%;background:transparent;border-radius:2px}}