.thermostat-control{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:20px;overflow:visible}.temperature-display{margin-bottom:20px}.setpoint-display,.temperature-display{color:#fff;font-size:1.5em;text-align:center}.setpoint-display{margin-top:10px}.knob-wrapper{align-items:center;display:flex;justify-content:center;left:70px;margin:0 auto;position:relative;top:10px}.error-message{color:red;font-size:1.2em}.knob{align-items:center;display:flex;justify-content:center;left:2px;position:relative;top:-2px;transform:rotate(180deg)}.knob .ticks{height:100%;left:0;position:absolute;top:0;width:100%}.knob .ticks .tick{background:#000;height:25px;position:absolute;transform-origin:center top;width:3px}.knob .ticks .tick.active{box-shadow:inset 0 0 5px 2px #509eec,0 0 0 1px #369}.knob.outer{background-image:radial-gradient(100% 70%,#666 0,#333 90%);border:solid #222;border-radius:50%;border-width:1px 1px 5px;box-shadow:0 5px 15px 2px #000,0 0 5px 3px #000,0 0 0 12px #444}.knob.inner{align-items:center;border-radius:50%;display:flex;justify-content:center}.knob.inner .grip{background:#509eec;border-radius:50%;bottom:2%;box-shadow:0 0 3px 1px #000;height:5%;left:50%;position:absolute;transform:translateX(-50%);width:5%}.knob.inner .temperature-indicator{background:orange;border-radius:50%;bottom:2%;box-shadow:0 0 3px 1px #000;color:#fff;font-size:1.2em;height:5%;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);transform:translateX(-50%);width:5%}.knob .ticks .tick.active{background-color:#509eec}.knob:hover .grip{background:#307bce}@media (max-width:600px){.setpoint-display,.temperature-display{font-size:1.2em}.knob{left:0;top:0}}.current-temperature-display{color:#fff;left:-60px;margin-top:20px;position:relative;text-align:center}