/* ---------- Corps du site ---------- */
body {
  /* Taille */
 width: 100%;/* Taille du site 100% de l'écran */
}

/* ---------- barre de navigation ---------- */

nav{
display: flex;
  align-items: baseline;
}

.nav-items {
  text-align: center;
}

.navbar-collapse ul {
  margin: auto;
}

.sans-point {
  /* Apparence */
  list-style-type: none; /* Supprime les points */
}

.container-fluid{
  /* Disposition */
  margin: 0; /* pas de marge */
  padding: 0; /* Pas de rembourrage */
}

.navbar{
  /* Texte */
  text-align: center; /* Aligne le texte au centre */
  /* Apparence */
  background-color: #696969; /* Couleur du fond gris */
}

.navbar-nav {
  /* Texte */
  text-align: center; /* Aligne le texte au centre */
}

.navbar ul li {
  /* Texte */
  font-size: 1.4em; /* Taille du texte en valeur relative */
  letter-spacing: 1px; /* espacement des lettres de 1 pixels */
  color: white; /* couleur du texte blanc */
}

.navbar ul li a:hover {
  text-decoration: underline;
}


/* ---------- Page Formulaire ---------- */
.formulaire {
  margin-bottom: 50px;
}

.formulaire ul {
  /* Apparence */
    list-style-type: none; /* Supprime les points */
    /* Disposition */
    margin: 0px; /* Pas de marge */
    padding: 0px; /* Pas de rembourrage */
}

.formulaire li {
  /* Disposition */
    position: relative; /* Mode de position relatif */
}

.formulaire label {
  /* Disposition */
    width: 150px; /* largeur de 150 pixels */
}

/* --------- Page Register --------- */
/* Moule pour formulaire */
.form-base {
  /* Disposition */
  margin-top: 55px; /* Marge de 55 pixels vers le haut */
  margin-bottom: 20px;
  padding: 15px; /* Rembourage de 15 pixels */
  /* Apparence */
  background-color: orange; /* Fond de couleur orange */
  /* Texte */
  color: white; /* Couleur du texte blanc */
}

.texte-register{
  display: flex;
  flex-direction: column;
}

.texte-register p {
  text-align: center;
  text-decoration: underline;
}
.texte-register ul {
  text-align: center;
}

.bt-conf {
  margin-top: 20px;
}

.titre-inscri {
  text-align: center;
  text-decoration: underline;
  margin-bottom: 25px;
}

.formulaire-inscri {
    display: flex;
    justify-content: center;
}

.formulaire-inscri input {
  width: 250px;
}
.formulaire-inscri label {
  width: 250px;
  font-size: 1.1em;
}


/* ---------- Page Footer ---------- */
.footer-base {
  /* Disposition */
  position: fixed; /* Position vérouillée */
  bottom: 0; /* Position collé en bas */
  /* Apparence */
  margin-top: 65px; /* Marge vers le bas de 55 pixels */
  background-color: #696969; /* Couleur du fond gris */
  /* Texte */
  text-align: center; /* Alignement du texte au centre*/
  color: white; /* Couleur du texte blanc */
}
.footer-base a {
  /* Texte */
  color: white; /* Couleur du texte blanc */
  text-decoration: underline; /* Souligner le texte */
}

/* ---------- Page d'accueil ---------- */
.txt-presentation {
  /* Texte */
  color: black; /* Couleur du texte noir */
  /* Disposition */
  margin-bottom: 60px; /* Marge vers le bas de 60 pixels */
}

/* Selection de l'auto école */
.Titre-choix {
  /* Disposition */
  margin-top: 45px; /* Marge de 45 pixels ver le haut */
  margin-bottom: 15px; /* Marge de 15 pixels vers le bas */
}

/* Sections de la page d'accueil */
.sections-accueil {
  /* Texte */
  text-align: center; /* Alignement du texte au centre */
  /* Disposition */
  margin-top: 35px; /* Marge de 35 pixels vers le haut */
}

/* Cases de l'accueil */
.cases {
  /* Dispositions */
  margin-top: 30px;
  display: flex;
  justify-content: space-evenly;
}

.case {
  background-color: orange;
  width: 450px;
  height: 250px;
  padding: 30px;
  font-size: 25px;
  color: white;
}

.cases a:hover {
  text-decoration: none;
}

/* animation lors du passage de la souris */
section .case:hover {
  background-color: #696969;
  text-decoration: none;
}

@media screen and (max-width:1000px) {
  .case {
    margin-bottom: 120px;
  }
}


/* ---------- Page login ---------- */

/* Corps de la page */
.formulaire-login {
  /* Disposition */
  margin-top: 55px; /* Marge de 55 pixels vers le haut */
  /* Texte */
  text-align: center; /* Alignement du texte au centre */
}

/* bouton du redirection */
.bt-login {
  /* Texte */
  color: white; /* Couleur du texte blanc */
  /* Disposition */
  margin-bottom: 65px; /* Marge de 25 pixels vers le bas */
  /* Taille */
  width: 375px; /* Largeur de 375 pixels */
  height: 30px; /* Hauteur de 30 pixels */
 /* Apparence */
 background-color: orange; /* couleur du fond orange */
 border: none; /* Supprime les bords du bouton */
}
.bt-login:hover, .bt-connexion:hover {
  /* Apparence */
 background-color: #696969; /* Couleur du fond gris */
}

/* bouton validation formulaire de connexion */
.bt-connexion {
  /* Disposition */
  margin-top: 25px; /* Marge de 25 pixels vers le haut */
  /* Taille */
  width: 125px; /* largeur de 125 pixels */
  height: 30px; /* hauteur de 30 pixels */
  /* Texte */
  color: white; /* Couleur du texte blanc */
  /* Apparence */
  background-color: orange; /* couleur du fond orange */
  border: none; /* Supprime les bords du bouton */
}


/* ---------- Page tableauDeBord ---------- */
/* Titre du tableau de bord */
.titre-tdb {
  /* Disposition */
  margin-top: 35px; /* Marge de 35 pixels vers le bas */
  /* Texte */
  text-align: center; /* Alignement du texte au centre */
}

/* Blocks */
.flex {
  /* Disposition */
  display: flex;  /* Rends les blocks flexibles */
  justify-content: space-evenly; /* Espaces entre les blocks de la même taille */
  margin-bottom: 100px; /* Marge de 100 pixels vers le bas */
  align-items: center; /* Aligne tout les objets dans le block au centre */
}
@media all and (max-width: 1000px) { /* Quand l'écran passe sour les 1000px */
  .flex {
    /* Disposition */
    flex-direction: column; /* Alignement des blocks en colonne */
    justify-content: center;  /* centre les blocks */
  }
}

/* Liens dans les blocks (évite le changement de couleur en bleu)*/
.block1 a, .block2 a, .block3 a {
  /* Texte */
  color: white; /* Couleur du text blanc */
  text-decoration: none;
}

/* Textes dans les blocks */
.block1, .block2 ,.block3 {
  /* Texte */
  color: white; /* Couleur du text blanc */
  text-align: center; /* Alignement du texte au centre */
}

/* Couleurs des 3 menus */
.block1 .type-case-1, .block1 .type-case-1-nonHover, .block1 .type-case-2 { /* On vise une modification sur les deux cases du premier block */
  /* Apparence */
  background-color: orange; /* Couleur du fond orange */
}
.block2 .type-case-1, .block2 .type-case-2 { /* On vise une modification sur les deux cases du second block */
  /* Apparence */
  background-color: blue; /* Couleur du fond blue */
}
.block3 .type-case-1, .block3 .type-case-2 { /* On vise une modification sur les deux cases du troisième block */
  /* Apparence */
  background-color: green; /* Couleur du fond vert */
}

/* Types de cases */
/* Type 1 */
.type-case-1 {
  /* Taille */
  height: 300px; /* Hauteur de 250 pixels */
  width: 350px; /* Largeur de 300 pixels */
  /* Disposition */
  margin-bottom: 50px; /* Marge vers le bas de 50 pixels */
  margin-top: 100px; /* Marge vers le haut de 50 pixels */
  /* Texte */
  line-height: 300px; /* Taille d'une ligne */
  font-size: 1.5em; /* Taille de la police en unité relative */
}
.type-case-1-nonHover {
  /* Taille */
  height: 300px; /* Hauteur de 250 pixels */
  width: 350px; /* Largeur de 300 pixels */
  /* Disposition */
  margin-bottom: 50px; /* Marge vers le bas de 50 pixels */
  margin-top: 100px; /* Marge vers le haut de 50 pixels */
  /* Texte */
  line-height: 300px; /* Taille d'une ligne */
  font-size: 1.5em; /* Taille de la police en unité relative */
}


/* Type 2 */
.type-case-2 {
  /* Taille */
  height: 50px; /* Hauteur de 50 pixels */
  width: 350px; /* Largeur de 300 pixels */
  /* Disposition */
  margin-bottom: 100px; /* Marge de 100 pixels vers le bas */
  /* Text */
  line-height: 50px; /* Taille de la ligne */
}

/* Surbrillance des cases lors du passage de la souris */
.block .type-case-1:hover {
  /* Apparence */
  background-color: grey; /* Couleur du fond gris */
  color: white;
  text-decoration: underline;
}

/* ---------- Page monDossier ---------- */
.block-Inscri {
  /* Texte */
  text-align: center; /* Alignement du texte au centre */
  /* Disposition */
  margin-top: 55px; /* Marge de 55 pixels vers le haut */
  margin-bottom: 15px; /* Marge vers le bas de 15 pixels*/
}
.block-Pieces {
  /* Texte */
  text-align: center; /* Alignement du texte au centre */
  /* Disposition */
  margin-bottom: 10px; /* Marge vers le bas de 15 pixels*/
}

.bt-md {
  /* Texte */
  color: white; /* Couleur du texte blanc */
  /* Apparence */
  background-color: orange; /* couleur du fond orange */
  border: none; /* Supprime les bords du bouton */
  /* Taille */
  width: 225px; /* largeur de 125 pixels */
  height: 30px; /* hauteur de 30 pixels */
  /* Disposition */
  margin-top: 100px; /* Marge vers le haut de 40 pixels*/
  margin-bottom: 40px;
}
@media screen and (max-width:1000px) { /* Quand le largeur de la page est inférieur a 1000 pixels */
  .bt-md {
    margin-bottom: 120px; /* Marge vers le bas de 60 pixels*/
  }
}

.choix-Inscri {
  /* Disposition */
  margin-top: 25px; /* Marge de 25 pixels vers le haut */
  margin-bottom: 50px; /* Marge de 50 pixels vers le bas */
}

.choix-non {
	padding-bottom: 20px;
}

.bt-chx-formDossier {
  margin-top: 25px;
  margin-bottom: 35px;
  width: 70px;
}

.titre-formDossier {
  text-align: center;
  margin-top: 25px;
}

.bt-valid-formDossier {
  margin-top: 20px;
  margin-bottom: 55px;
  width: 135px;
}

.banniere {
  color: white;
  background-color:	#B0E0E6;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 1.3em;
  text-shadow: 1px 1px 2px #343a40;
}
.banniere a {
  color: white;
}

.banniere a:hover {
  color: #e9ecef;
  text-decoration: underline;
}

/* ---------- Page contacts ---------- */

.block-mesContacts {
    display: flex;
    justify-content: space-evenly;
    margin-top: 75px;
}

.block1-mesContacts {
  background-color: #343a40;
  color: white;
  padding: 35px;
}

.block1-mesContacts p {
    text-decoration: underline;
    font-weight: bold;
    margin-top: 25px;
}

/* ---------- Page monCompte ---------- */

.block1-PageMonCompte {
  padding: 25px;
  background-color: #343a40;
  height: 100%;
  width: 600px;
  padding: 25px;
  color: white;
  font-size: 1.1em;
  margin-bottom: 50px;
}

/* --- block 1 --- */

.block1-1-PageMonCompte  ul {
    /* Disposition */
    margin: 0px; /* Pas de marge */
    padding: 0px; /* Pas de rembourrage */
}

.block1-PageMonCompte  label {
    width: 230px;
}

.block1-PageMonCompte  select {
  width: 230px;
  border: solid 1px grey;
}

.block1-PageMonCompte-input {
  width: 230px;
  border: solid 1px grey;
}
.block1-PageMonCompte-radio {
  width: 50px;
}

.block1-PageMonCompte strong {
    text-decoration: underline;
}

/* ---------- Page formInformation ---------- */

.titre-formInformations {
  font-size: 1.2em;
  text-align: center;
  margin-top: 55px;
  margin-bottom: 100px;
  text-decoration: underline;
}

.section-formInformation {
  margin-top: 55px;
  margin-bottom: 125px;
  background-color: #343a40;
  color: white;
  padding: 25px;
}

@media screen and (max-width:1000px) {
  .flexx {
    /* Disposition */
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.flexx {
  display: flex;
  justify-content: space-evenly;
  font-size: 1.1em;
}

.block-formInformation ul {
    /* Disposition */
    margin: 0px; /* Pas de marge */
    padding: 0px; /* Pas de rembourrage */
}

.block-formInformation li {
  /* Disposition */
    position: relative; /* Mode de position relatif */
}

.block-formInformation label {
  /* Disposition */
    width: 230px; /* largeur de 150 pixels */
}

.section-formInformation select {
  width: 210px;
  border: solid 1px grey;
}

.input-section-formInformation {
  border: solid 1px grey;
  width: 210px;
}

.bt-radio-section-formInformation {
  border: solid 1px grey;
  width: 60px;
}

.art1-formInformation {
  width: 500px;
}

.art2-formInformation {
  width: 500px;
}

.btn-formInformations {
  border: none;
  color: white;
  background-color: orange;
  padding: 5px;
}


/* ----------  Vues Secretaire ---------- */
/* ----------  Page Elèves---------- */

@media screen and (max-width:1000px) {
  .block-pageEleves {
    margin-bottom: 150px;
    /* Disposition */
    flex-direction: column; /* Alignement des blocks en colonne */
    justify-content: center;  /* centre les blocks */
  }
}

.block-PageEleves {
  /* Disposition */
  margin-top: 55px;
  margin-bottom: 100px;
  display: flex;
  justify-content: space-evenly;
}

.block1-1-PageEleves {
  width: 750px;
}

/* ----------  Vues Secretaire ---------- */
/* ----------  Page Dossier ---------- */
@media screen and (max-width:1000px) {
  .block-pageDossier {
    margin-bottom: 60px;
    /* Disposition */
    flex-direction: column; /* Alignement des blocks en colonne */
    justify-content: center;  /* centre les blocks */
    align-items: center;
  }
}
.block-pageDossier {
  /* Disposition */
  margin-top: 55px;
  display: flex;
  justify-content: space-evenly;
}

.block2-2-pageDossier {
  /* Apparence */
  background-color: grey; /* fond de couleur gris */
  /* taille */
  height: 350px;
  width: 650px;
  /* Disposition */
  margin-top: 10px;
}

/* ----------  Page Identité ---------- */

@media screen and (max-width:1000px) {
  .block-PageIdentite {
    margin-bottom: 60px;
    /* Disposition */
    flex-direction: column; /* Alignement des blocks en colonne */
    justify-content: center;  /* centre les blocks */
    align-items: center;
  }
  .block1-1-PageIdentite {
    margin-bottom: 10px;
  }
  .block2-PageIdentite{
    margin-bottom: 25px;
  }

  .block3-PageIdentite{
    margin-bottom: 60px;
  }
}

.block-PageIdentite {
  /* Disposition */
  margin-top: 55px;
  display: flex;
  justify-content: space-evenly;
}

/* ----------  Block 2 Page Identité ---------- */

.block2-1-PageIdentite {
  /* Apparence */
  background-color: grey; /* fond de couleur gris */
  /* taille */
  height: 100%;
  width: 550px;
  padding: 25px;
  color: white;
  font-size: 1.1em;
  margin-bottom: 50px;
}
.input-PageIdentite {
  width: 220px;
  border: solid grey 1px;
}
.input-rd-PageIdentite {
  width: 55px;
}

.block2-1-PageIdentite select {
  width: 220px;
  border: solid grey 1px;
}
.block2-1-PageIdentite label{
  width: 250px;
}

.titre-block2-1-PageIdentite {
  text-decoration: underline;
  color: white;
  font-size: 1.2em;
}

.bt-connexion-PageIdentite {
  margin-top: 65px;
  width: 220px; /* largeur de 125 pixels */
  height: 30px; /* hauteur de 30 pixels */
  /* Texte */
  color: white; /* Couleur du texte blanc */
  /* Apparence */
  background-color: orange; /* couleur du fond orange */
  border: none; /* Supprime les bords du bouton */

}


/* ----------  Block 3 Page Identité ---------- */
.block3-1-PageIdentite {
  /* taille */
  width: 730px;
  background-color: grey;
  color: white;
}

.titre-PJ {
  font-size: 1.2em;
  text-decoration: underline;
  font-size: 1.2em;
  padding: 25px;

}

.block3-1-PageIdentite tbody {
  text-align: center;
}

.boutonPJ {
    text-align: center;
}

#raisonRefus{
  visibility: hidden;
}

/* ----------  Vues Admin ---------- */
/* ----------  Page Elèves ---------- */

@media screen and (max-width:1000px) {
  .pageAdmin {
    display: flex;
    flex-direction: column;
  }
}

.pageAdmin {
  display: flex;
  justify-content: center;
}

.tbl-MenuAdmin {
  text-align: center;
  width: 550px;
}


.bt-AddSecretaire {
  margin-top: 70px;
  margin-bottom: 50px;
}

.bt-AddSecretaire button {
    background-color: orange;
    color: white;
    border: none;
    height: 35px;
}

.bt-AddSecretaire button:hover {
    background-color: #343a40;
    text-decoration: underline;
}

/* ----------  Page ajout secretaire  ---------- */

.page-ajoutSecretaire {
  display: flex;
  justify-content: space-evenly;
}

.form-ajoutSecretaire {
  width: 580px;
  margin-top: 70px;
  color: white;
  background-color: #343a40;
  padding: 25px;
}
.form-ajoutSecretaire input {
  width: 250px;
}
.form-ajoutSecretaire label {
  width: 250px;
}
.form-ajoutSecretaire select {
  width: 250px;
}

.titre-ajoutSecretaire {
  font-size: 1.3em;
  text-decoration: underline;
  text-align: center;
  margin-bottom: 35px;
}

.bt-ajoutSecretaire {
  width: 250px;
  background-color: orange;
  color: white;
  border: none;
  margin-top: 25px;
}

.msgMonCompte {
 	text-align: center;
  	color: orange;
}

#blockLienSignature {
  text-align: center;
}


/* ************* SECRETAIRE ************* */

/* Accueil Secrétaire */
.accueilSecretaire {
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
  justify-content: center;
}

.logoAccueilSecretaire {
  height: 256px;
  width: 256px;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid black;
  border-radius: 15px;
  position: relative;
  z-index: 1;
}

.logoAccueilSecretaire:hover {
  background-color: lightgray;
}

.accueilSecretaire span {
  z-index: 10;
  position: absolute;
  left: 50%; /* à 50% à gauche du parent référent */
  transform: translate(-50%); /* décalage de 50% de sa propre taille */
  font-size: 1.3em;
}

/* Style de toutes les cases de la page dossiers */
#pageDossiersSecretaire {
  margin-top: 50vh;
  transform: translateY(-50%);
  text-align: center;
  justify-content: center;
}

.logoPageDossiers {
  height: 296px;
  width: 256px;
  padding: 10px;
  padding-top: 40px;
  border: 1px solid black;
  border-radius: 15px;
  position: relative;
  z-index: 1;
}

.logoPageDossiers:hover {
  background-color: lightgray;
}

#pageDossiersSecretaire span{
  z-index: 10;
  position: absolute;
  left: 50%; /* à 50% à gauche du parent référent */
  transform: translate(-50%); /* décalage de 50% de sa propre taille */
}

/* page identité */
.formDossierSecretaire {
  margin-top: 20px;
  margin-bottom: 40px;
  text-align: center;
  justify-content: center;
}

.logoFormDossierSecretaire {
  padding: 30px 10px 10px 10px;
  height: 126px;
  border: 1px solid black;
  border-radius: 15px;
  position: relative;
  z-index: 1;
}

.logoFormDossierSecretaire:hover {
  background-color: lightgray;
}

.formDossierSecretaire span{
  z-index: 10;
  position: absolute;
  left: 50%; /* à 50% à gauche du parent référent */
  transform: translate(-50%); /* décalage de 50% de sa propre taille */
  font-size: 1em;
}

/* Page commentaire */
#msgSecretaire {
  background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
  padding: 13px 13px 13px 54px;
  margin-bottom: 10px;
}

/* page élèves */
#myInput, .myInput {
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #080808;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.5);
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

/* Page examens */
.pageExamen {
  margin-top: 40px;
}

.pageExamenGauche {
}

.pageExamenAjout, .pageExamenFiltre {
  height: 250px;
  text-align: center;
  justify-content: center;
  border: 1px solid black;
  margin-bottom: 20px;
  padding-top: 25%;
}

.btnReset {
  margin-top: 10px;
}

.listeUnExamen {
  list-style-type: none;
  border: 1px solid black;
  margin-right: 20px;
  width: 250px;
  height: 100px;
}

.pageExamenUnExamen {
  margin-bottom: 20px;
}

.annule1 {
  background-color: red;
}

.btnSupprEleve {
  float: right;
}

.btnModifExam {
  margin-right: 10px;
}

.ligneUnExamen {
  border: 1px solid black;
  margin-left: 1px;
  margin-bottom: 1px;
}

/* ***********************
          ADMIN
 *********************** */
/* Accueil Admin */
.accueilAdmin {
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
  justify-content: center;
}

.logoMenuAdmin {
  height: 256px;
  width: 256px;
  padding: 10px;
  border: 1px solid black;
  border-radius: 15px;
  position: relative;
  z-index: 1;
}

.logoMenuAdmin:hover {
  background-color: lightgray;
}

.accueilAdmin span{
  z-index: 10;
  position: absolute;
  left: 50%; /* à 50% à gauche du parent référent */
  transform: translate(-50%); /* décalage de 50% de sa propre taille */
  font-size: 1.3em;
}

.inputKm {
  width: 30px;
  height: 30px;
}

/* ***********************
          USER
 *********************** */
/* formDossier */
.formDossier {
  margin-top: 20px;
  margin-bottom: 40px;
  text-align: center;
  justify-content: center;
}

.logoFormDossier {
  padding: 30px 10px 10px 10px;
  border: 1px solid black;
  border-radius: 15px;
  position: relative;
  z-index: 1;
}

.logoFormDossier:hover {
  background-color: lightgray;
}

.formDossier span{
  z-index: 10;
  position: absolute;
  left: 50%; /* à 50% à gauche du parent référent */
  transform: translate(-50%); /* décalage de 50% de sa propre taille */
  font-size: 1.3em;
}

.inputFile {
  margin-top: 10px;
}

.imgPjForm {
  width: 15px;
}

.btnSupprPj {
  width: 20px;
  height: 20px;
}

.cocheRefus {
  width: 30px;
}

.titreFormPj {
  text-align: center;
  color: grey;
}

.btnNumNeph {
  margin-top: 10px;
}

.imgInfos {
  width: 15px;
}

.informationMaFormation {
  font-size: 1.2em;
}

.titreMaFiche {
  text-decoration: underline;
}

.competence {
  font-size: 1.3em;
  font-weight: bold;
}

.commentaire {
  text-align: center;
}

.titreSousComp {
  width: 500px;
}

.noteComp {
  width: 200px;
}

.faqPage {
  margin-top: 10px;
}

.ageInferieur14 {
  color: red;
}

.titrePageEleves {
  text-align: center;
}

.btnConfirmResult {
  margin-left: 10px;
  height: 35px;
}

.messageSec {
  background-color: dodgerblue;
}

.infoDossier {
  color: red;
  font-weight: bold;
}

.infoDossierSec {
  color: white;
  font-weight: bold;
}

.modal-xl {
    max-width: 1300px !important;
}

.messagePjAlert {
  font-size: 2em;
  color: red;
  font-weight: bold;
}