.back {
  display: none;
}

.containerHome {
  position: absolute;
  left: 0px;
  top: 0%;
  width: 8%;
  height: 100%;
  display: none;
  margin-left: 5px;
  pointer-events: none;
}

.containerCobrar {
  position: absolute;
  top: 0%;
  left: 0px;
  width: 0%;
  height: 100%;
  display: none;
  margin-left: 5px;
  pointer-events: none;
}

.containerPlay {
  top: 0%;
  position: absolute;
  right: 0px;
  width: 0%;
  height: 100%;
  display: none;
  margin-right: 5px;
  pointer-events: none;
}

.buttonPositionHome {
  position: absolute;
  width: 100%;
  top: 0%;
  left: 0px;
  top: 10%;
  pointer-events: all;
}

.buttonPositionPlay {
  position: absolute;
  top: 36%;
  width: 100%;
  left: 0px;
  display: none;
  pointer-events: all;
}

.buttonPositionAutoOff {
  position: absolute;
  top: 5%;
  width: 100%;
  left: 0px;
  pointer-events: all;
  display: none;
}

.buttonPositionAutoOn {
  position: absolute;
  top: 5%;
  width: 100%;
  left: 0px;
  display: none;
  pointer-events: all;
}

.buttonPositionCobrar {
  position: absolute;
  bottom: 10%;
  width: 100%;
  left: 0px;
  display: none;
  pointer-events: all;
}

.containerChat {
  position: absolute;
  left: 10px;
  top: 78vh;
  width: 6vh;
  display: none;
  pointer-events: none;
}

.buttonPositionChat {
  position: absolute;
  width: 100%;
  pointer-events: all;
}

@media screen and (min-aspect-ratio: 15/9) {
  .containerHome {
    width: 8%;
  }
  .containerCobrar {
    width: 8%;
  }
  .containerPlay {
    width: 10%;
  }
}
@media screen and (min-aspect-ratio: 16/9) {
  .containerHome {
    width: 9%;
  }
  .containerCobrar {
    width: 9%;
  }
  .containerPlay {
    width: 11%;
  }
}