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

.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;
  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;
}
.controller-ar .rotate-container {
  position: fixed;
  bottom: 10%;
  left: 20px;
  display: flex;
  flex-direction: column;
  height: 200px;
  justify-content: center;
}
.controller-ar .rotate-container .rotate-btn {
  height: 60px;
  width: 60px;
  margin: 0.5em 0;
  background: no-repeat center #fff;
  background-size: contain;
  border-radius: 10px;
}
.controller-ar .rotate-container .rotate-btn.left {
  background-image: url("../images/rotate-left.svg");
}
.controller-ar .rotate-container .rotate-btn.right {
  background-image: url("../images/rotate-right.svg");
}
.controller-ar #confirm-btn {
  background: center no-repeat url("../images/confirm.svg") #1c7430;
  background-size: 50% 50%;
  border: none;
}
.controller-ar #cancel-btn {
  background: center no-repeat url("../images/cancel.svg") #d11a2a;
  background-size: 40% 40%;
  border: none;
}

.ar-notification {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  display: none;
}
.ar-notification.active {
  display: flex;
}
.ar-notification > div {
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  border-radius: 10px;
  padding: 1em;
}
.ar-notification > div button {
  width: 70px;
  padding: 0.5em 1em;
  border: none;
  border-radius: 5px;
  margin: 0 1em;
  font-size: large;
}
.ar-notification > div button.ar-yes {
  background-color: #1c7430;
  color: white;
}
.ar-notification > div button.ar-no {
  background-color: #ffc107;
  color: white;
}

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