.controller.detecting .controller-main {
  display: none;
}
.controller.detecting .move-around {
  display: block;
}
.controller.detecting.detected .move-around {
  display: none;
}
.controller.detecting.detected.confirming .controller-ar {
  display: flex;
}
.controller.detecting.detected.confirming.confirmed .controller-ar {
  display: none;
}
.controller.detecting.detected.confirming.confirmed .controller-main {
  display: flex;
}

.move-around {
  display: none;
  position: fixed;
  bottom: 50%;
  font-size: x-large;
  padding: 0.5em 1em;
  left: 38%;
  background: rgba(255, 183, 0, 0.51);
  border-radius: 6px;
  font-weight: bold;
}

.controller-ar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
}

.controller-ar > div {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
}

.controller-ar > div > button {
  min-height: 50px;
  min-width: 100px;
  font-size: x-large;
  margin: 0 0.5em;
  border-radius: 6px;
  font-weight: bold;
  border: 2px solid black;
}

#confirm-btn {
  background: center no-repeat url("./media/confirm.svg");
  background-size: 50% 50%;
}

#cancel-btn {
  background: center no-repeat url("./media/cancel.svg");
  background-size: 40% 40%;
}

.range-slider {
  position: fixed;
  bottom: 10%;
  right: 40px;
  height: 200px;
}

.range-slider .input-range {
  height: 100%;
  width: 10px;
  border-radius: 5px;
  background: #ccc;
  outline: none;
  writing-mode: bt-lr; /* IE */
  -webkit-appearance: slider-vertical; /* WebKit */
  accent-color: black;
}

.rotate-container {
  position: fixed;
  bottom: 10%;
  left: 20px;
  display: flex;
  flex-direction: column;
  height: 200px;
  justify-content: center;
}

.rotate-btn {
  height: 60px;
  width: 60px;
  margin: 0.5em 0;
  background: no-repeat center;
  background-size: contain;
}

.rotate-btn.left {
  background-image: url("./media/rotate-left.svg");
}

.rotate-btn.right {
  background-image: url("./media/rotate-right.svg");
}

/*# sourceMappingURL=ar.css.map */