*{margin:0;padding:0;box-sizing:border-box}body,html{width:100%;height:100%;font-family:Open Sans,Verdana,Arial,sans-serif}.container{display:flex;width:100vw;height:100vh}.left{display:flex;flex-direction:column;width:420px;min-width:420px;max-width:420px;font-size:smaller;align-items:flex-start;overflow:hidden;flex-shrink:0}.right{flex-grow:1;display:flex;flex-direction:column;background-color:#fbfbfb;border-left:1px solid grey;overflow:hidden;min-height:400px;min-width:400px}.top-right{flex-grow:1;position:relative;overflow:hidden}.bottom-right{height:120px;min-height:fit-content;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 10px;overflow:hidden;border-top:1px solid grey}#joystick-container{display:flex;justify-content:space-between;align-items:center;max-width:280px;padding:5px 30px}.joystick-div{width:100px;height:100px;min-width:100px;min-height:100px;position:relative;-webkit-user-select:none;user-select:none}.joystick-div img{width:100%;height:100%;-webkit-user-select:none;user-select:none}#stick1,#stick2{position:absolute;left:50%;top:50%}#stick1 img,#stick2 img{width:100%;height:100%;-webkit-user-select:none;user-select:none;transform:translate(-50%,-50%)}.controls-section{flex-basis:33%;display:flex;justify-content:center;align-items:center;min-width:150px}.controls-section{flex-grow:1;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;align-items:center;column-gap:5px;row-gap:5px;width:100%;max-height:120px;overflow:hidden}.controls-section button{background-color:#1a0d71;color:#fff;border:none;padding:6px;cursor:pointer;font-size:12px;height:24px}.controls-section .rounded-button{border-radius:10px}.controls-section .rectangular-button{border-radius:0}.controls-section button:hover{background-color:#339}#servo-div{min-height:fit-content;min-width:fit-content;overflow-y:auto;text-align:left;padding:5px 5px 0}#servo-div table{width:100%;margin:0;border-collapse:collapse;font-size:smaller}#servo-div th,#servo-div td{border:1px solid lightgrey;padding:2px 4px;text-align:center}#servo-div th:nth-child(1),#servo-div td:nth-child(1){width:42px;min-width:42px;text-align:center}#servo-div th:nth-child(2),#servo-div td:nth-child(2){width:23px;min-width:23px;max-width:23px;text-align:center}#servo-div th:nth-child(3),#servo-div td:nth-child(3){width:130px;min-width:130px;max-width:130px;text-align:center}#servo-div th:nth-child(4),#servo-div td:nth-child(4){width:50px;min-width:50px;text-align:center}#servo-div th:nth-child(5),#servo-div td:nth-child(5){width:50px;min-width:50px;max-width:50px;text-align:center}#servo-div th:nth-child(6),#servo-div td:nth-child(6){width:50px;min-width:50px;max-width:50px;text-align:center}#servo-div th:nth-child(7),#servo-div td:nth-child(7){width:60px;min-width:60px;max-width:60px;text-align:center}#servo-div td.servo-name{background-color:#e2e7f3}#servo-div tr:hover td.servo-name{background-color:#c0cdec}#servo-div th{background-color:#10253b;color:#fff;font-weight:400}#servo-div tr:hover{background-color:#eee}#servo-div label{display:inline-block;margin-right:10px;width:30px;text-align:center}#servo-div .servo-set-angle{white-space:nowrap;min-width:120px}#servo-div .servo-set-angle div{display:flex;align-items:center;gap:5px;white-space:nowrap}#servo-div .servo-set-angle label{flex-shrink:0;min-width:30px;margin-right:5px}#servo-div .servo-set-angle input[type=range]{flex-shrink:0}#servo-div input[type=range]:hover{background:#999}#servo-div input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:80px;height:8px;background:#ccc;border-radius:5px;outline:none;opacity:.8;transition:opacity .2s;cursor:pointer}#servo-div input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:#ddd;border-radius:50%;cursor:pointer;transform:scale(calc(1 / var(--dpr)))}#servo-div input[type=range]::-moz-range-thumb{width:12px;height:12px;background:#ddd;border-radius:50%;cursor:pointer;transform:scale(calc(1 / var(--dpr)))}.servo-load.load-red{background-color:red;color:#fff}.servo-load.load-orange{background-color:orange;color:#fff}.servo-load.load-yellow{background-color:#ff0;color:#000}.servo-load.load-normal{background-color:transparent;color:inherit}.servo-temp.temp-red{background-color:red;color:#fff}.servo-temp.temp-orange{background-color:orange;color:#fff}.servo-temp.temp-yellow{background-color:#ff0;color:#000}.servo-temp.temp-normal{background-color:transparent;color:inherit}#slider-div{min-width:fit-content;overflow-y:auto;text-align:left;margin:5px}#slider-div table{width:auto;border-collapse:collapse;font-size:smaller}#slider-div th,#slider-div td{border:1px solid lightgrey;padding:2px 4px;text-align:left}#slider-div th{background-color:#10253b;color:#fff;font-weight:400}#slider-div td:nth-child(1),#slider-div th:nth-child(1){width:70px;min-width:70px;max-width:70px;text-align:center}#slider-div td:nth-child(3),#slider-div th:nth-child(3){width:60px;text-align:center}#slider-div tr:hover{background-color:#eee}#slider-div input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:80px;height:8px;background:#ccc;border-radius:5px;outline:none;opacity:.8;transition:opacity .2s;cursor:pointer}#slider-div input[type=range]:hover{background:#999}#slider-div input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:#eee;border-radius:50%;cursor:pointer;transform:scale(calc(1 / var(--dpr)))}#slider-div input[type=range]::-moz-range-thumb{width:12px;height:12px;background:#eee;border-radius:50%;cursor:pointer;transform:scale(calc(1 / var(--dpr)))}#slider-div button{background-color:#1a0d71;color:#fff;border:none;padding:6px;cursor:pointer;font-size:12px;height:24px}#slider-div button:hover{background-color:#339}#info-div{border:1px solid lightgrey;background-color:#f1f1f1;overflow-x:auto;overflow-y:auto;font-family:monospace;white-space:pre-wrap;word-wrap:break-word;height:150px;padding:5px;width:100%;box-sizing:border-box}#loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;background-color:#ffffffe6;padding:20px;border-radius:10px;font-size:18px}button.small-button{padding:2px 4px;font-size:10pt}#scanResults{margin-top:10px;font-weight:700;color:#333}