/**
 * 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;
  /*
  --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: 20px;
  bottom: 20px;
  position: absolute;
  border-radius: 5px;
  background-color: gray;
}

#next-page-button {
  color: white;
  right: 20px;
  bottom: 20px;
  border-radius: 5px;
  position: absolute;
  background-color: gray;
}

#retrieve-user-button {
  color: white;
  right: 20px;
  bottom: 20px;
  border-radius: 5px;
  position: absolute;
  background-color: gray;
}

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

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

.course-item-button {
  color: white;
  background-color: gray;
}

#user-helps-buttons-container {
  text-align: center;
}

#user-data-recover-button {
  color: gray;
  background-color: white;
  text-decoration: underline;
}

#user-login-by-sms-button {
  color: gray;
  background-color: white;
  text-decoration: underline;
}

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

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

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