.control-container[data-v-9d1612fa]{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;padding:20px;background-color:transparent;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.1);width:5rem;margin-top:.8rem}.direction-controls[data-v-9d1612fa]{position:relative;width:200px;height:200px;margin-bottom:25px}.dir-btn[data-v-9d1612fa]{position:absolute;width:60px;height:60px;background-color:#fff;border:2px solid #e0e0e0;border-radius:8px;color:#333;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;transition:all .15s ease;box-shadow:0 2px 5px rgba(0,0,0,.05);outline:none}.dir-btn.up[data-v-9d1612fa]{top:0;left:50%;transform:translateX(-50%)}.dir-btn.down[data-v-9d1612fa]{bottom:0;left:50%;transform:translateX(-50%)}.dir-btn.left[data-v-9d1612fa]{left:0;top:50%;transform:translateY(-50%)}.dir-btn.right[data-v-9d1612fa]{right:0;top:50%;transform:translateY(-50%)}.function-controls[data-v-9d1612fa]{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}.func-btn[data-v-9d1612fa]{width:80px;height:60px;background-color:#fff;border:2px solid #e0e0e0;border-radius:8px;color:#333;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;transition:all .15s ease;box-shadow:0 2px 5px rgba(0,0,0,.05);outline:none}.dir-btn.active[data-v-9d1612fa],.func-btn.active[data-v-9d1612fa]{background-color:#3498db;color:#fff;border-color:#2980b9;transform:translate(-50%,-50%) scale(.95);box-shadow:0 2px 8px rgba(52,152,219,.3)}.dir-btn.down.active[data-v-9d1612fa],.dir-btn.up.active[data-v-9d1612fa]{transform:translateX(-50%) scale(.95)}.dir-btn.left.active[data-v-9d1612fa],.dir-btn.right.active[data-v-9d1612fa]{transform:translateY(-50%) scale(.95)}.func-btn.active[data-v-9d1612fa]{transform:scale(.95)}