.AppControls {
  position: absolute;
  left: 0;
  width: 100vw; /*Ensure the control spreads horizontally*/
  /*height defined dynamically*/

  background-color: var(--app-control-bgcolor);
  transition: bottom 300ms ease-in-out;

  display: flex;
}

.AppControlsColor {
  padding: 20px;

  display: flex;
  flex-direction: row;
}

.AppControlsColorContainer {
  flex: 1;
}

.AppControlsColorButtons {
  width: 100px;
  margin-top:5px;
}

.AppControlsColorButton {
  width: 80px;
  height: 80px;
  margin: 0 10px 0 10px;
  border: 3px solid black;

  text-transform: uppercase;
  letter-spacing: 2px;
  background-color: var(--button-bgcolor);
  color: var(--text-color);

  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
}

button.AppControlsColorButton:disabled {
  background-color: var(--button-bgcolor);
  opacity: 0.5;
  cursor: no-drop;
}

button.AppControlsColorButton:disabled:hover {
  background-color: var(--button-bgcolor);
}

.AppControlsColorButton:hover {
  background-color: var(--button-bgcolor-hover);
}
