.controls {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25em;
  transform: translate(-50%, -50%);
  padding: 0.5em;
  border: solid 1px #bbbbbb;
  border-radius: 0.3em;
  height: -moz-fit-content;
  height: fit-content;
  font-size: 1em;
  background-color: #fff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
  z-index: 99;
}
.controls .btn {
  background-color: #bbbbbb;
  font-size: 0.9em;
  text-align: center;
  font-weight: bold;
  border-radius: 0.53em;
  cursor: pointer;
}
.controls .btn:hover {
  background-color: #d5d5d5;
}
.controls .header {
  display: flex;
  border-bottom: solid 1px #bbbbbb;
  padding-bottom: 0.5em;
}
.controls .header .title {
  font-weight: bold;
  flex-grow: 1;
}
.controls .header .close-btn {
  width: 1.5em;
  aspect-ratio: 1;
}
.controls .body {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  padding-top: 0.5em;
}
.controls .body .rows {
  display: flex;
  gap: 0.5em;
}
.controls .body .rows:not(:last-child) {
  padding-bottom: 0.5em;
  border-bottom: solid 1px silver;
}
.controls .body .rows > * {
  flex-grow: 1;
}
.controls .body .item {
  display: flex;
  gap: 1em;
  font-size: 0.9em;
}
.controls .body .item .name {
  flex-grow: 1;
}
.controls .body .item .name strong {
  font-weight: bold;
}
.controls .body .item .shortcut {
  width: 1.5em;
  text-align: center;
  color: #555;
  font-weight: bold;
}
.controls .body .btn {
  margin-top: 0.4em;
  background-color: #bbbbbb;
  padding: 0.5em;
  border-radius: 0.2em;
  cursor: pointer;
}
.controls .body .btn[disabled] {
  opacity: 0.5;
  cursor: initial;
}
.controls input[type=number] {
  outline: solid 1px #bbbbbb;
  text-align: right;
  margin-right: 0.2em;
  padding: 0.2em;
}

.touch-point {
  width: 80px;
  height: 80px;
  background-color: rgba(0, 51, 187, 0.7);
  border-radius: 50%;
  position: absolute;
}/*# sourceMappingURL=controls.css.map */