body
{
    min-height:1200px;
    min-width: 1200px;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #e7e7e7;
}


.image_cadenas_victoire img {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    opacity: 0.35;
}

.style_boutton0
{
    background-color:white;color:black;border:2px solid #56d7c8;border-radius:10px;-webkit-border-radius:10px}

.style_boutton0:hover
{
    background-color:#047c6c;box-shadow:0 0 20px #09c2a9;color:white}

.style_boutton0_enabled
{
    background-color:#047c6c;box-shadow:0 0 20px #09c2a9;color:white;border:2px solid #56d7c8;border-radius:10px;-webkit-border-radius:10px}

.style_boutton:hover:disabled
{
    border-color:#024a52;color:black;background-color:#c0c0c0}

.style_boutton1
{
    background-color:white;color:black;border:2px solid #77d005;border-radius:10px;-webkit-border-radius:10px}

.style_boutton1:hover
{
    background-color:#3b650f;box-shadow:0 0 20px #5c9d18;color:white}

.style_boutton1_enabled
{
    background-color:#3b650f;box-shadow:0 0 20px #5c9d18;color:white;border:2px solid #77d005;border-radius:10px;-webkit-border-radius:10px}

.style_boutton1:hover:disabled
{
    border-color:#3b650f;color:black;background-color:#c0c0c0}

.style_boutton2
{
    background-color:white;color:black;border:2px solid #e0ad10;border-radius:10px;-webkit-border-radius:10px}

.style_boutton2:hover
{
    background-color:#644800;box-shadow:0 0 20px #af7f06;color:white}

.style_boutton2_enabled
{
    background-color:#644800;box-shadow:0 0 20px #af7f06;color:white;border:2px solid #e0ad10;border-radius:10px;-webkit-border-radius:10px}

.style_boutton2:hover:disabled
{
    border-color:#644800;color:black;background-color:#c0c0c0}

.style_boutton3
{
    background-color:white;color:black;border:2px solid #ec680b;border-radius:10px;-webkit-border-radius:10px}

.style_boutton3:hover
{
    background-color: #933b05;box-shadow:0 0 20px #e27445;color:white}

.style_boutton3_enabled
{
    background-color:#933b05;box-shadow:0 0 20px #e27445;color:white;border:2px solid #3d1903;border-radius:10px;-webkit-border-radius:10px}

.style_boutton3:hover:disabled
{
    border-color:#933b05;color:black;background-color:#c0c0c0}

@keyframes clignotement
{
    from
    {
        box-shadow:0 0 0px #d90404;-webkit-filter:brightness(1.8);-moz-filter:brightness(1.8);filter:brightness(1.8)}

    to
    {
        box-shadow:0 0 40px #d90404;-webkit-filter:brightness(1.2);-moz-filter:brightness(1.2);filter:brightness(1.2)}

}

.style_boutton4
{
    background-color:white;color:black;border:2px solid #de6d6d;border-radius:10px;-webkit-border-radius:10px;animation: clignotement alternate 2s infinite linear;}

.style_boutton4:hover
{
    background-color:#910202;box-shadow:0 0 20px #d90404;color:white}

.style_boutton4_enabled
{
    background-color:#910202;box-shadow:0 0 20px #d90404;color:white;border:2px solid #ec680b;border-radius:10px;-webkit-border-radius:10px}

.style_boutton4:hover:disabled
{
    border-color:#910202;color:black;background-color:#c0c0c0}

.compartiment
{
    width:1650px;height:1650px;margin:150px auto;position:absolute;display:inline;top:0;right:0;bottom:0;left:0;text-align:center;font-size:16px;font-family:serif}


.effacement_page2
{
    position:relative;margin:30px auto;box-shadow:0 -10px 40px 5px #8f0319}

.donnees_page2
{
    margin:150px auto;height:500px;max-height:1600px;overflow-y:scroll;width:1650px;max-width:1650px;justify-content:center;align-items:center;box-shadow:0 0 10px #8f0319;border-spacing:4px;scrollbar-color:#000000 rgba(255,255,255,0);scrollbar-width:thin}

.invisible-scrollbar::-webkit-scrollbar
{
    display:none}

.customized-scrollbar::-webkit-scrollbar
{
    height:10px;width:7px;background:rgba(255,255,255,0)}

.customized-scrollbar::-webkit-scrollbar-thumb
{
    background:#000000;-webkit-border-radius:5px}

.appreciation_conteneur
{
    position:relative;display:flex;display:-webkit-flex;margin:40px auto;height:280px;max-height:280px;width:650px;max-width:650px;justify-content:center;align-items:center;box-shadow:0 0 20px #a9780b;border-spacing:5px}

.appreciation_texte
{
    display:inline;position:relative;top:10px;overflow-y:scroll;scrollbar-color:#000000 rgba(255,255,255,0);scrollbar-width:thin;justify-content:center;align-items:center;font-size:16px;font-family:serif;margin-bottom:20px;width:490px;max-width:490px;height:110px;max-height:180px;min-height:80px;resize:vertical;border:1px solid #e52e4a;box-shadow:0 0 0 3px #8f0319}



.prenom_texte
{
    width:150px;font-family:serif;font-size:14px}

.nombre_accueil
{
    width:200px;font-family:serif;font-size:14px;text-align:center}

textarea:focus
{
    outline:none;border-color:#0fff1b;box-shadow:0 0 10px #73b3ff}

.seconds
{
    display:inline-block;vertical-align:middle;line-height:5px;background-color:White;border-left:4px solid black; border-right: 4px solid black;}

fieldset
{
    border:none;padding:5px}

.premiers
{
    display:table-cell;vertical-align:middle;border:solid black;border-style:double;border-width:4px 4px 0px 4px}

.a
{
    width:120px}

.e
{
    width:150px}

.b
{
    width:260px}

.bb
{
    width:260px}

.c
{
    width:530px;margin-right:0px}

.d
{
    width:210px}


.swal2-title
{
    font-family:cursive;font-size:40px !important;}

.swal2-text
{
    font-family:cursive!important;font-size:18px!important;text-align:center!important;}

.swal2-html-container
{
    font-family:cursive!important;font-size:18px!important;text-align:center!important;}
.swal2-modal
{
    width:500px}

.hidden{
    display:none;
    visibility:hidden;
}

.submit{
    color: #000000;
    font-weight: bold;
    background: rgb(69,131,244);
    background: -moz-radial-gradient(circle, rgba(69,131,244,1) 0%, rgba(220, 0, 0, 0.7) 100%);
    background: -webkit-radial-gradient(circle, rgba(69,131,244,1) 0%, rgba(220, 0, 0, 0.7) 100%);
    background: radial-gradient(circle, rgba(69,131,244,1) 0%, rgba(220, 0, 0, 0.7) 100%);
}
.submit2{
    color: #000000;
    font-weight: bold;
    background: rgb(227,95,95);
    background: -moz-radial-gradient(circle, rgba(220, 0, 0, 0.7) 0%, rgba(69,131,244,0.7) 100%);
    background: -webkit-radial-gradient(circle, rgba(220, 0, 0, 0.7) 0%, rgba(69,131,244,0.7) 100%);
    background: radial-gradient(circle, rgba(220, 0, 0, 0.7) 0%, rgba(69,131,244,0.7) 100%);
}
.submit:hover{
    color: #ffffff;
}
.submit2:hover{
    color: #ffffff;
}

.submit:active{
    color: #ffffff;
    background: rgb(13,70,201);
    background: -moz-radial-gradient(circle, rgba(13,70,201,1) 0%, rgba(255,0,56,1) 40%);
    background: -webkit-radial-gradient(circle, rgba(13,70,201,1) 0%, rgba(255,0,56,1) 40%);
    background: radial-gradient(circle, rgba(13,70,201,1) 0%, rgba(255,0,56,1) 40%);
}

.submit2:active{
    color: #ffffff;
    background: rgb(255,0,56);
    background: -moz-radial-gradient(circle, rgba(255,0,56,1) 0%, rgba(13,70,201,1) 40%);
    background: -webkit-radial-gradient(circle, rgba(255,0,56,1) 0%, rgba(13,70,201,1) 40%);
    background: radial-gradient(circle, rgba(255,0,56,1) 0%, rgba(13,70,201,1) 40%);
}


.is-invalid{
    background-color: transparent;
    outline: none;
    border :solid 2px #e81200;
}

.is-valid{
    background-color: transparent;
    outline: none;
    border :solid 2px green;

}

.champobligatoire{
    text-align: right;
    font-size: 11px;
    display:inline-block;
    font-family: cursive;
    color: red;
    }

@keyframes clignotant2
 {
     from
     {
         box-shadow:0px 0px 1px 1px #8d0000;}

     to
     {
         -webkit-filter:brightness(1.2);-moz-filter:brightness(1.2);filter:brightness(1.2);
         box-shadow:0px 0px 2px 2px #e84242;}

 }
.champcligontant{
    animation: clignotant2 alternate 400ms infinite linear;
}
.taille300{
    width:300px;min-width:300px; max-width:300px;
}

.affichagealerte{
    font-family: serif ;text-align: center; font-style: italic; color:#ff6200;font-size: 16px;
}

.center_obj{
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
}












/* */

 * {
     box-sizing: border-box;
 }
body {
    font-family: Roboto, Helvetica, sans-serif;
}
/* Fixez le bouton sur le côté gauche de la page the button on the left side of the page */
.open-btn {
    display: flex;
    justify-content: flex-start;
}
/* Stylez et fixez le bouton sur la page */
.open-button {
    background-color: #1c87c9;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0.8;
    position: fixed;
}
/* Positionnez la forme Popup */
.login-popup {
    position: relative;
    text-align: center;
    width: 100%;
}
/* Masquez la forme Popup */
.form-popup {
    display: block;
    position: relative;
    left: 45%;
    top: 5%;
    transform: translate(-45%, 5%);
    border: 2px solid #666;
    z-index: 9;
}
/* Styles pour le conteneur de la forme */
.form-container {
    max-width: 90%;
    padding: 20px;
    background-color: #fff;
}


.div_reponse_user {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    margin:50px 0 30px 0;
    text-align: center;
    justify-content: center;
}

.btn {
    color: #000;
    font-weight: bold;
    border-radius: 5px;
    border: 1px solid;
    cursor: pointer;
}

.btn_lancer_jeu {
    font-size: 15px;
}

.btn_rep_fermer, .btn_rep_envoyer {
    padding: 5px 10px;
	font-size: 15px;
	transition: .2s;
}
.btn_rep_envoyer {
    background-color: #c49200;
    margin: 0 20px 0 20px;
}

.btn_rep_envoyer:hover {
    background-color: rgba(196, 146, 0, 0.42);
}


.btn_rep_fermer {
    background-color: rgba(204, 0, 0, 0.7);
}

.btn_rep_fermer:hover {
    background-color: rgba(204, 0, 0, 0.33);
}

.btn_lancer_jeu:hover {
    background-color: rgba(227, 196, 196, 0.7);
}

.btn_sauvegarder:hover{
    background-color: rgba(227, 196, 196, 0.7);
}
#input_reponse{
    width:250px;
}
#label_input_reponse{
    margin-right: 20px;
}

.proposition_reponse
{
    color: #c76900;
    text-align: center;
    border: thin double #0679d5;
    font: 20px bold serif;
}

.proposition_reponse::placeholder{
    color: #553309;
    text-align: center;
    font: 15px bold serif;
}


.partition_input {
    padding-left: 15px;
    letter-spacing: 42px;
    border: 0;
    background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 50px 1px;
    background-repeat: repeat-x;
    background-position-x: 35px;
    width: 220px;
    outline : none;
}



.form-control {
    border-radius: 10px;
    border: 1px solid black;
    -webkit-transition: none;
    transition: none;
    width: 64px;
    height: 64px;
    text-align: center;
    margin:5px;
    font: 40px serif;
}

.form-control:focus {

    color: #3F4254;
    background-color: #ffffff;
    border-color: #884377;
    outline: 0;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}


.form-control:active,
.form-control:focus {
    background-color: #EBEDF3;
    border-color: #9a9a9a;
    color: #3F4254;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control_2 {
    width: 50px;
    height: 50px;
}


.affichage_question
{
    position:absolute;
    display:flex;
    display:-webkit-flex;
    top:500px;
    left: 0;
    right: 0;
    margin: 0px auto;
    min-height:400px;
    max-height:600px;
    width:750px;
    max-width:750px;
    justify-content:left;
    box-shadow:0 0 20px #a9780b;
    border-spacing:5px;
    background-color: white;
    border-radius: 20px;
}

.my_h1 {
    margin: 0;
    font-size: 25px;
    font-family : cursive;
    font-weight: bold;
    text-align: center;
    padding: 0 30px;
}

.my_h1_2 {
    margin: 0;
    font-size: 25px;
    font-family : cursive;
    font-weight: bold;
    text-align: center;
    padding: 0;
}

.my_h1_3 {
    margin: 0;
    font-size: 28px;
    font-family : cursive;
    font-weight: bold;
    text-align: center;
    padding: 0 30px;
}

.scores{
    top:150px;
    height:300px;
    width:1200px;
    margin:auto;
    border-radius: 20px;
    background-color: white;
}


.sauvegarde{
    top:10px;
    max-height:120px;
    max-width:300px;
    margin: 0 auto;
    background-color: rgba(91, 215, 255, 0.18);
}


.scores, .sauvegarde
{
    text-align: center;
    position:absolute;
    left:0;
    right: 0;
    display:flex;
    display:-webkit-flex;
    flex-direction: column;
    align-items: center;
    box-shadow:0 0 10px #a9780b;
    border-spacing:5px;
    justify-content: space-around;
    border-radius: 20px;
}

.scores_C, .scores_S, .scores_R {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    box-shadow:0 0 5px #a9780b;
}
.scores_S {
    top:10px;
    border-radius: 20px 20px 0 0;
}
.scores_C {
    bottom:10px;
    border-radius: 0 0 20px 20px;
}

.scores_span {
    margin:0 5px;
    padding: 2px 5px;
    border: 2px solid rgba(182, 6, 6, 0.76);
    border-radius: 8px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.scores_span:hover{
    cursor: pointer;
    background-color: rgba(231, 183, 0, 0.55);
}

.scores_span_bonne{
    margin:0 5px;
    padding: 2px 5px;
    border: 1px solid black;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-weight: bold;
    background: rgba(113, 187, 0, 0.38);

}

.scores_span_attente{
    background: rgba(154, 229, 46, 0.24);
}

.div_enigmes, .div_indices {
    position:absolute;
    text-align: center;
    top:500px;
    width:130px;
    max-width:300px;
    justify-content:left;
    box-shadow:0 0 20px #a9780b;
    border-spacing:5px;
    background-color: white;
    border-radius: 20px;
}

.div_enigmes { left:0; margin: auto auto auto 60px; max-height:365px;}
.div_indices { right:0; margin: auto 60px auto auto; height:480px;}

#btn_enigme_4 {
    margin-bottom: 15px;
}

.div_cadenas{
    position:absolute;
    top:875px;
    width:130px;
    max-width:300px;
    box-shadow:0 0 5px #a9780b;
    border-spacing:5px;
    left:0;
    margin: auto auto auto 60px;
    height:80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 178, 255, 0.23);
    border-radius: 20px;
}

input[type='bouton']
{
    color:black;
    border: thin double #0679d5;
    font-style:italic
}

.boutton_CSV:disabled
{
    background-color:#808080;
    border-color:#ff0000;
    color:Black;
    font-style:italic}

.boutons
{
    border: none;
    padding:10px;
    border-radius:15px;
    -webkit-border-radius:15px;
    text-align:center;
    display:inline-block;
    font-size:20px;
    font-family:serif;
    font-weight:bold;
    margin:4px 2px;
    transition: box-shadow 0s, background-color .5s;
    cursor:pointer}

.boutons:disabled
{
    background-color:rgb(183,183,183);
    border:2px solid rgb(80, 53, 53);
    border-radius:10px;
    -webkit-border-radius:10px;
    padding:10px;
    font-family:serif;
    font-weight:bold;
    transition: box-shadow 0s, background-color .5s;
    cursor:pointer}

.boutons:active {
    -webkit-box-shadow: 0px 0px 12px 6px #000000;
    box-shadow: 0px 0px 2px 2px #000000;
}

.bouton_bloque{
    background-color:rgb(183,183,183);
    border:2px solid rgb(180, 0, 0);
}

.bouton_bloque:hover {
    padding:6px;
    border:6px solid rgb(180, 0, 0);
}
.bouton_actif{
    background-color: rgba(91, 187, 54, 0.85);
    border:2px solid rgba(40, 149, 5, 0.85);
}

.bouton_actif:hover {
    background-color: rgba(0, 224, 45, 0.25);
}


.indice_popup {
    background: white;
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 1000px;
    height: 800px;
    border: 2px solid #666;
    z-index: 9;
}
/* Styles pour le conteneur de la forme */
.form-container {
    max-width: 300px;
    padding: 20px;
    background-color: #fff;
}

.donnees_page1, .restaurer_session
{
    position:relative;
    display:flex;
    display:-webkit-flex;
    justify-content:left;
    box-shadow:0 0 20px #a9780b;
    border-spacing:5px;
    text-align: center;
    margin:150px auto;
    border-radius: 20px;
    background-color: white;
}

.donnees_page1{
    height:350px;
    max-height:350px;
    width:550px;
    max-width:550px;
}

.restaurer_session
{
    height:250px;
    max-height:250px;
    width:700px;
    max-width:700px;
}

.question_choisie{
    margin:20px;
}

.box_form {
    display: flex;
    margin: auto;
    text-align: left;
    width: 90%;
    left: 0;
    right: 0;
}

.container_index{
    width: 100%;
    font: 18px serif;
}

.div_restaurer_start, .div_restaurer{
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn:hover{

}