/*----------------------------------------------------------------*/
/* Styling for the modal used throughout the frontend to show the */
/* mobile popup that warns mobile users.                          */
/*----------------------------------------------------------------*/

/* Styles when the mobile pop-up should show. i.e. at mobile screen sizes */
.mobile-show {
  display: block;
}

/* Styles the content container for the mobile modal */
.mobile-content-container {
  text-align: center;
  border-radius: 0.8rem;
}

/* Styles the h4 holding the warning text for the user */
.mobile-content-container h4 {
  text-align: justify;
  margin: 3rem auto;
  width: 75%;
}

/** The close button */
.modal .close-mobile-modal {
  color: white;
  position: absolute;
  top: 0.1rem;
  right: 0.75rem;
  font-size: 1.3rem;
  font-weight: normal;
  cursor: pointer;
}