@import "~antd/dist/antd.less";

html,
body {
  background-color: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.App {
  height: 100%;
  width: 100%;
  user-select: none;
}

.app-status.ant-form {
  padding: 0.5em;
  padding-bottom: 0;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
  height: 0;
}

.logo {
  display: inline-block;
  height: 28px;
  margin-right: 10px;
}

.app-status.ant-form .ant-form-item,
.app-status.ant-form .ant-space {
  z-index: 10;
}

.app-page {
  overflow-y: auto;
  height: calc(100% - 38px);
  padding: 20px;
  padding-top: 55px;
}

.controller {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.camera-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.controller-form.ant-form {
  padding: 0.5em;
  position: absolute;
  bottom: 0;
}

.controller-form.ant-form .ant-form-item {
  z-index: 10;
  margin-bottom: 4px;
}

@media (max-width: 575px) {
  .controller-form.ant-form .ant-form-item {
    margin-bottom: 4px;
  }
}

.direction-slider {
  position: fixed;
  width: 50vh;
  bottom: 48vh;
  right: 4vw;
  z-index: 10;
}

.speed-slider {
  position: fixed;
  height: 50vh;
  bottom: 25vh;
  left: 10vw;
  width: 10vh;
  z-index: 10;
}

.speed-slider .ant-slider-rail {
  width: 8vh;
  opacity: 0.3;
  border-radius: 4vh;
}
.speed-slider .ant-slider-handle {
  margin-left: -1vh;
}

.direction-slider .ant-slider-rail {
  height: 8vh;
  opacity: 0.3;
  border-radius: 4vh;
}
.direction-slider .ant-slider-handle {
  margin-top: -1vh;
}

.speed-slider .ant-slider-handle,
.direction-slider .ant-slider-handle {
  width: 10vh;
  height: 10vh;
  /* transition: all 0.036s cubic-bezier(0.78, 0.14, 0.15, 0.86); */
}

.controller-form .backward-button,
.controller-form .left-button,
.controller-form .forward-button,
.controller-form .right-button {
  width: 8vw;
  height: 8vw;
  min-width: 3em;
  min-height: 3em;
}

.ai {
  height: 80vh;
  overflow: auto;
}
.ai-sample {
  padding: 0.5em;
}

.ai-sample-form {
  margin-bottom: 50vh;
}

.ai-example-list {
  padding: 0.5em;
  text-align: center;
}

.ai-train {
  padding: 0.5em;
}

.ai-object-detection-canvas-container {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: flex;
}
.ai-object-detection-canvas-container canvas {
  flex: 1;
  object-fit: contain;
  max-width: 100%;
}

.player-box {
  display: flex;
  transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  flex-grow: 1;
  flex-shrink: 1;
}

.camera {
  position: relative;
  width: 62vw;
  height: 48vw;
}
.camera.has-ratio {
  height: auto;
}
.camera .button-box {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 99;
  transform: translate(-50%, -50%);
}
.camera .edit {
  position: absolute;
  right: 0.5em;
  z-index: 99;
  top: 50%;
  transform: translate(0, -50%);
  /* opacity: 0.5; */
}

.camera .edit button {
  margin-bottom: 0.5em;
}

.camera .button-box button {
  margin-right: 0.5em;
  margin-bottom: 0.5em;
}

.camera-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  /* align-items: center; */
}
.camera-box canvas {
  object-fit: contain;
  max-width: 100%;
  /* max-height: 100%; */
  flex-grow: 1;
  flex-shrink: 1;
}

.inline-form .ant-form-item {
  margin-bottom: 0.5em;
}

.transition-animation {
  transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

.select-disabled {
  user-select: none;
}

.record-button {
  position: fixed;
  right: 5vw;
  bottom: 5vw;
  user-select: none;
}
.recording-img {
  width: 10vw;
}

.ant-popover-inner {
  max-width: 100vw;
  max-height: 80vh;
  overflow: auto;
}
