.v3d-container .ar-button {
  display: none !important;
}
.v3d-container.ar-available .ar-button {
  display: flex !important;
}

.controller.detecting .controller-main {
  display: none;
}
.controller.detecting + .step-detail-container {
  display: none !important;
}
.controller.detecting .move-around {
  display: flex;
}
.controller.detecting.detected .move-around {
  display: none;
}
.controller.detecting.detected .controller-ar {
  display: flex;
}
.controller.detecting.detected.confirmed .controller-ar {
  display: none;
}
.controller.detecting.detected.confirmed .controller-main {
  display: flex;
}
.controller.detecting.detected.confirmed .ar-button {
  display: none !important;
}
.controller.detecting.detected.confirmed + .step-detail-container {
  display: flex !important;
}
.controller.detecting.detected.confirmed #reset-position-button {
  display: flex;
}

.move-around {
  display: none;
  position: fixed;
  inset: 0;
  justify-content: center;
  align-items: center;
}
.move-around > div {
  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;
  user-select: none;
}

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

#cancel-btn {
  background: center no-repeat url("../images/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("../images/rotate-left.svg");
}

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

#reset-position-button {
  display: none;
}

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