.FunctionsContainer {
  display: none;
  width: 100%;
  height: calc(100% - 60px);
  transition: opacity 1s, transform 0s;
  opacity: 0;
  transform: translateY(100vh);
  flex-direction: column;
  overflow-x: scroll; }

.FunctionsHeader {
  width: 100%;
  color: wheat;
  font-size: 1rem;
  height: 50px; }

.FunctionsBody {
  width: fit-content;
  height: fit-content;
  margin: 0% 50% 0% 50%;
  scale: 0.1;
  transition-duration: 1s;
  transition-timing-function: ease-in-out; }

.Functions {
  max-height: 100%; }

.FunctionsOverlay {
  width: 100%;
  position: absolute;
  left: 0; }

.FunctionsJoystickContainer {
  width: fit-content;
  height: 50px;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  display: flex;
  justify-content: center;
  align-self: center;
  position: absolute;
  bottom: 0px;
  opacity: 0.5; }

.FunctionsJoystickImg {
  height: 100%; }

.PositionStick {
  background: red;
  width: 3px;
  height: 50px;
  bottom: 0px;
  position: absolute;
  border-radius: 3px; }

.FunctionsMenuContainer {
  width: 100%;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 300px;
  background: #1f1f1f99;
  position: absolute;
  bottom: 0%; }