/**
 * This class exists in all page buttons. You can use it if you want
 * to apply some CSS rules for all the buttons.
 */
.page-button {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: rgb(0, 157, 224);
  /*
  --fa-primary-color: blue;
  --fa-secondary-color: red;
  */
}

/**
 * Set to 100% width and height the SVG (icon) for all buttons: don't change
 * this, since it's intended to set the right button icon size in all screens.
 */
.page-button svg {
  width: 100%;
  height: 100%;
}

#prev-page-button {
  color: white;
  left: 4%;
  bottom: 4%;
  position: absolute;
  border-radius: 5px;
  background-color: lightgray;
  /*
  --fa-primary-color: blue;
  --fa-secondary-color: red;
  */
}

#prev-page-button:hover {
  background-color: gray;
}

#next-page-button {
  color: white;
  right: 4%;
  bottom: 4%;
  border-radius: 5px;
  position: absolute;
}

#next-page-button:hover {
  background-color: lightgrey;
}

#cancel-training-button {
  color: white;
  right: 10%;
  bottom: 4%;
  border-radius: 5px;
  position: absolute;
  background-color: lightgrey;
}

#cancel-training-button:hover {
  background-color: gray;
}

#toggle-play-button {
  color: white;
  left: 50%;
  bottom: 4%;
  border-radius: 5px;
  position: absolute;
  transform: translate(-50%, 0);
  background-color: lightgrey;
}

#toggle-play-button:hover {
  background-color: grey;
}

#languages-menu-button {
  color: white;
  left: 20px;
  bottom: 20px;
  position: absolute;
  border-radius: 5px;
}

#avatars-menu-button {
  color: white;
  left: 20px;
  bottom: 20px;
  position: absolute;
  border-radius: 5px;
}

#companies-menu-button {
  color: white;
  left: 4%;
  bottom: 4%;
  position: absolute;
  border-radius: 5px;
  background-color: lightgrey;
}

#companies-menu-button:hover {
  background-color: grey;
}

#sites-menu-button {
  color: white;
  left: 4%;
  bottom: 4%;
  position: absolute;
  border-radius: 5px;
  background-color: lightgrey;  
}

#sites-menu-button:hover {
  background-color: grey;
}

#take-photo-button {
  color: white;
  left: 50%;
  bottom: 4%;
  border-radius: 5px;
  position: absolute;
  transform: translate(-50%, 0);
}

#toggle-camera-button {
  color: white;
  left: 55%;
  bottom: 4%;
  border-radius: 5px;
  position: absolute;
  transform: translate(-50%, 0);
}

#reveal-password-button {
  color: white;
  background-color: gray;
}

#skip-userid-button {
  color: white;
  background-color: gray;
}

#alert-accept-button {
  color: white;
  background-color: gray;
}

#confirm-yes-button {
  color: white;
  background-color: gray;
}

#confirm-no-button {
  color: white;
  background-color: gray;
}