/* COMMENTER LES .tooltip2 APRES CAR COMMENTE DEJA DANS LE HTML DE INDEX.PHP */

:root {
    --topHeight: 100px;
    --bottomHeight: 100px;

    --headerWidth: 960px;
    --mainWidth: 820px;
    --footerWidth: 800px;

    --topContainerPadding: 4px;

    /* Colors */
    --noir: rgb(0, 0, 0);
    --blanc: rgb(255, 255, 255);
    --bleu1: rgb(17, 66, 118);
    --gris1: rgb(170, 170, 170);
    --bleu-clair1: #87bdd8;
    --bleu-clair2: #87bdd8;

    /* --noir: rgb(0, 0, 0); */
    /* --blanc: rgb(255, 255, 255); */
    /* --bleu1: rgb(17, 66, 118); */
    /* --gris1: rgb(170, 170, 170); */
    --bleu-clair1: transparent;
    /* --bleu-clair2: #87bdd8; */




    /* Background colors */
    --palegoldenrod: palegoldenrod;
    --cadet-blue: cadetblue;

    
    /* --palegoldenrod: rgb(61, 22, 42); */
    /* --cadet-blue: cadetblue; */


    /* --palegoldenrod: transparent;
    --cadet-blue: transparent; */



    /* Construction colors */
    --vert-construction: green;
    --rouge-construction: red;
    --violet-construction: purple;
    --firebrick-construction: firebrick;
    --marron-construction: maroon;
    --chocolat-construction: chocolate;
    --vert1-construction: rgb(115, 128, 0);
    --violet1-construction: rgb(128, 0, 128);
    --jaune-construction: yellow;
    --noir-construction: black;
    --orange-construction: orange;
    --teal-construction: teal;
    --blue-construction: blue;
    --aqua-construction: aqua;
    --navy-construction: navy;



    /* --vert-construction: green; */
    /* --violet-construction: purple; */
    /* --firebrick-construction: firebrick; */
    /* --marron-construction: maroon; */
    --chocolat-construction: transparent;
    /* --vert1-construction: rgb(115, 128, 0); */
    --violet1-construction: transparent;
    /*  --jaune-construction: yellow; */
    /* --noir-construction: black; */
    /* --orange-construction: orange; */
    /* --teal-construction: teal; */
    /* --blue-construction: blue; */
    --aqua-construction: transparent;
    /* --navy-construction: navy; */



    /* --vert-construction: transparent;
    --violet-construction: transparent;
    --firebrick-construction: transparent;
    --marron-construction: transparent;
    --chocolat-construction: transparent;
    --vert1-construction: transparent;
    --violet1-construction: transparent;
    --jaune-construction: transparent;
    --noir-construction: transparent;
    --orange-construction: transparent;
    --teal-construction: transparent;
    --blue-construction: transparent;
    --aqua-construction: transparent; 
    --navy-construction: transparent; */

    
    





    /* Construction border widths */
    --width1-construction: 1px;
    --width2-construction: 10px;
    --width3-construction: 3px;

    --width1-construction: 0px;
    --width2-construction: 0px;
    --width3-construction: 0px;

    --width10-construction: 10px;
    --width11-construction: 20px;
    --width12-construction: 30px;


    /* Current design marks */
    --width2-construction: 0px; 
    --width10-construction: 0px;
    --width11-construction: 0px;
    --width12-construction: 0px;
    --blue-construction: transparent;


    --header-width-part1: 20%;
    --header-width-part2: 70%;
    --header-width-part3: 20%;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */

}

html {
    font-size: 16px;
    font-family: 'Courier New', Courier, monospace;
    color: var(--noir);
    /* overflow-x: hidden; */
   
}

.waZEMg {
  line-height: 1.8;
  color:rgb(109, 7, 24);
}

.ez4vhA, .hk822k, .tu67Uy, .zq2n23, .gmB69B  {
    width: 100%;
    height: 100vh;
    border: var(--width1-construction) solid var(--vert-construction);
    /* background: var(--cadet-blue); */
    background: rgb(206, 208, 211);
    background: rgb(219, 221, 224);

    display: grid;
    grid-template-rows: var(--topHeight) 8fr var(--bottomHeight);
}




body::-webkit-scrollbar {
  //width: 0px;
}



.fyt2FD, .top_container_type_2 {
    width: 100%;
    //min-height: 10%; /* var(--topHeight); */
    border: var(--width2-construction) solid var(--violet-construction);
    background: var(--palegoldenrod);
    background-image: linear-gradient(rgb(1, 33, 105), rgb(0, 113, 197));
    
    position: relative;

    /* position: fixed; 
    top: 0px; 
    left: 0px;  */


    /* visibility: hidden; */ 
    padding: var(--topContainerPadding);
    z-index: 1; /* display: none; */


    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;

} 



.jyDhWB, .middle_container_type_2 {
    width: 100%;
    //min-height: 80%; /* calc(100vh - var(--topHeight) - var(--bottomHeight) - 2px); */
    /* margin-top: var(--topHeight); */
    border: var(--width2-construction) solid var(--firebrick-construction);
    /* background: var(--orange-construction); */
    /* padding-top: var(--topHeight); */

    /* display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem; */

    display: grid;
    grid-template-rows: auto 1fr;

    position: relative;


    /* background: rgb(206, 208, 211);
    background: rgb(219, 221, 224); */
    background-color: #F5F5F5;

    /* border: 20px dashed blueviolet; */

    padding: 20px 0px;
    padding: 0px 0px;
}


.pjMepW, .bottom_container_type_2 {
    width: 100%;
    //height: 10%;/* var(--bottomHeight); */
    border: var(--width2-construction) solid var(--violet-construction);
    background: var(--teal-construction);
}




.nek6Dt {
    width: 90%;
    max-width: var(--headerWidth);
    height: 100%;
    border: var(--width1-construction) solid var(--marron-construction);
    background: var(--chocolat-construction);

    margin: 0px auto;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem; /* display: none; */
}


#vseqmT {
  margin: 0 auto;
}




#pyCuv5 {
    width: 100%;
    max-width: var(--mainWidth);
    /* min-height: 600px; */
    
    background: var(--blue-construction);

    /* border: #BF3030 solid 6px; */


    flex-direction: column;
    /* display: flex; flex-direction: column;
    justify-content: center;
    align-items: center; */

    
    /* flex-direction: column; */

    margin: 0px auto;
    /* display: none; */
}


.acnCwd, #pyCuv5:has(#kh3S3D) {
    display: flex;
    justify-content: center;
    align-items: center;
}





#container {
    border: var(--width2-construction) solid var(--vert1-construction);
    /* display: none; */
}



#hrg223 {
    width: 100%;
    max-width: var(--footerWidth);
    height: 100%;
    min-height: 100px;
    border: var(--width1-construction) solid var(--violet1-construction);
    background: var(--navy-construction);

    margin: 0px auto;
}

.peaCck, .logo_type_2 {
    width: var(--header-width-part1);
    /* max-width: ; */
    height: 50%;
    border: var(--width1-construction) solid var(--violet1-construction);
    background: var(--aqua-construction);
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo_type_2 {
  width: var(--header-width-part1);
}

.jgYuT8, .imageLogo_type_2 { 
    /* position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); */
    display: block; 
    border: var(--width1-construction) solid var(--violet1-construction); 
    width: 100%;
    max-width: 140px;
}

.imageLogo_type_2 {
  display: block;
}

.ugr7eh, .mainLinksContainer_type_2 {
    width: var(--header-width-part2);
    /* max-width: ; */
    height: 50%;
    border: var(--width3-construction) solid var(--noir-construction);
    background: var(--violet1-construction);
}

.mainLinksContainer_type_2 {
  width: var(--header-width-part2);
}


    
    ul.mqJ3YS, ul.mainLinks_type_2 { 
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
    height: 100%;
    border: var(--width3-construction) solid var(--jaune-construction);
    }

    ul.mqJ3YS, ul.mainLinks_type_2 { 
    color: var(--noir); 
    /* width: fit-content; 
    height: fit-content;  */
     display: flex;
     justify-content: center;
     align-items: center;
    }
    
    ul.mqJ3YS li, ul.mainLinks_type_2 li { 
    display: inline-block;
    border: var(--width1-construction) solid var(--firebrick-construction); /* NOT CONSTRUCTION */
    margin-left: 0px; 
    /* float: left;  */
    }
    
    ul.mqJ3YS li span, ul.mainLinks_type_2 li span { 
    font-family: ProLamina; 
    font-size: 30px; 
    display: block; 
    height: 100%;
    color: var(--blanc); 
    padding: 8px 26px; 
    text-decoration: none; 
    text-align: center; cursor: pointer;
    /* border-radius: 10px; */ 
    /* margin-left: 80px; */ 
    }
    
    
    ul.mqJ3YS li span.active, ul.mainLinks_type_2 li span.active { 
    background-color: var(--bleu1); 
    }
    
    ul.mqJ3YS li span:hover:not(.active), ul.mainLinks_type_2 li span:hover:not(.active) 
    , ul.mqJ3YS li span:hover:not(.active) span, ul.mainLinks_type_2 li span:hover:not(.active) span /* pour le deuxieme span du li savedGamesLink */{ 
      color: var(--gris1); 
    }

    ul.mqJ3YS li span.griser, ul.mainLinks_type_2 li span.griser { 
      color: var(--gris1); 
    }
    
    ul.mqJ3YS li:first-child a, ul.mainLinks_type_2 li:first-child a { 
    margin-left: 0px; 
    }
    
    ul.mqJ3YS li:last-child a, ul.mainLinks_type_2 li:last-child a { 
    margin-right: 0px; 
    }

.ypwDYa, .profile_type_2 {
    width: var(--header-width-part3);
    /* max-width: ; */
    height: 100%;
    border: var(--width1-construction) solid var(--violet1-construction);
    background: var(--bleu-clair1);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: .4rem;

    display: none;

}

.profile_type_2 {
  width: var(--header-width-part3);
}

.ehSAdu, .profile_prime_type_2 {
    display: none;
}

.profile_prime_type_2 {
  display: none;
}








#tcHH8y {
    position: absolute;
    width: 80%;
    max-width: 240px;
    top: 10px;
    right: 10px;
    padding: 0px;
    z-index: 1;
    display: none;

    font-size: 0.8em;
}

.hk822k #tcHH8y, .tu67Uy #tcHH8y {
  display: none;
}

.zq2n23 #tcHH8y, .gmB69B #tcHH8y {
  display: block;
}

/* .hk822k #qaQyc2, .tu67Uy #qaQyc2 {
  display: none;
}

.zq2n23 #qaQyc2, .gmB69B #qaQyc2 {
  display: block;
} */


#qaQyc2 {
  cursor: pointer;
}



#pgrsP6 {
    width:100%; 
    background-color: var(--blanc); 
    border: 1px solid var(--bleu-clair2); /* NOT CONSTRUCTION */
    border-radius: 10px; 
    padding: 0;  
  }

  #wtVWBn {
    background-color: var(--blanc);
    display: block; 
    margin: 0px; 
    text-align: center; 
    list-style-type: none; 
    padding: 0px;
    border-radius: 10px;
}

#wtVWBn > li > span, #wtVWBn > li > span:link, #wtVWBn > li > span:visited, #wtVWBn > li > span:focus {
 display: block;
 height: 24px;
 line-height: 20px;
 height: 44px;
 line-height: 40px;
 padding: 0px 10px 0px;
 text-decoration: none;
 color: var(--noir);  cursor: pointer;
 /* border: 1px solid blue; */

font-size: 1.2em;

display: flex;
justify-content: center;
align-items: center;

}

#wtVWBn > li > span:hover,  #wtVWBn > li > span:active {
 color: var(--blanc);
 font-weight: 700;
}

#wtVWBn > li:not(:last-child) > span {
 border-bottom: 1px solid #87bdd8; /* NOT CONSTRUCTION */
}

#wtVWBn > li:last-child > span {
  border-radius: 0 0 10px 10px;
}

#wtVWBn > li:first-child > span {
  border-radius: 10px 10px 0 0;
}





#wtVWBn > li:hover > span {
  background-color: var(--bleu-clair2);
}



















#ccmpCt {
  
}



























#wrEFLk {
  width: 100%;
  max-width: 160px;
  margin: auto;
  border: 0px solid blue;
  display: none;
}

#hgkuL9 {
  width:100%;
  background-color: var(--blanc); 
  border: 0px solid var(--bleu-clair2); /* NOT CONSTRUCTION */
  border-radius: 10px; 
  padding: 0;  
  box-shadow: 0 3px 10px rgba(11, 3, 59, 0.2);
}

#tjvPYh {
  background-color: var(--blanc);
  display: block; 
  margin: 0px; 
  text-align: center; 
  list-style-type: none; 
  padding: 0px;
  border-radius: 10px;
}

#tjvPYh > li > span, #tjvPYh > li > span:link, #tjvPYh > li > span:visited, #tjvPYh > li > span:focus {
display: block;
height: 24px;
line-height: 20px;
height: 44px;
line-height: 40px;
padding: 0px 10px 0px;
text-decoration: none;
color: var(--noir); 
/* border: 1px solid blue; */

font-size: 1.1em;

display: flex;
justify-content: center;
align-items: center;

}

#tjvPYh > li > span:hover,  #tjvPYh > li > span:active {
color: var(--blanc);
font-weight: 700;
}

#tjvPYh > li:not(:last-child) > span {
border-bottom: 1px solid #87bdd8; /* NOT CONSTRUCTION */
}

#tjvPYh > li:last-child > span {
border-radius: 0 0 10px 10px;
}

#tjvPYh > li:first-child > span {
border-radius: 10px 10px 0 0;
}





#tjvPYh > li:hover > span {
background-color: var(--bleu-clair2);
}




























.yrhnVU, .kdNAgY, .user_photo_container_type_2, .user_photo_container_2_type_2 {
    width: 46%;
}

.user_photo_container_type_2, .user_photo_container_2_type_2 {
  width: 46%;
}

#pzYP8G, #buP6ww {
    width: 100%;
    border-radius: 50%;
}

.vtHEdE, .user_name_type_2 {
    width: 54%;
    font-weight: 400;
    text-align: center;
    font-size: 0.8rem;
    color: var(--blanc);
    line-height: 1.6em;
}

.user_name_type_2 {
  width: 54%;
}




.aryVn4 {
  cursor: pointer;
  color:rgb(13, 65, 187);
  text-decoration: underline;
}

#beQVEu.input_marked, #pm2tUk.input_marked, #dz5JBg.input_marked, #zpeNvq.input_marked, #un4QU8.input_marked, #cukQbf.input_marked, #tahGty.input_marked {
  border: 2px solid rgb(3, 3, 152);
}



  













































































@keyframes zoom {
  from {transform: scale(0.1)} 
  to {transform: scale(1)}
}


@keyframes animEatBlack {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/pionNoirS.png"); }
  30%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/pionNoirS.png"); }
  35% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");}
  95% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");}
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");}
}

@keyframes animEatWhite {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/pionBlancS.png"); }
  30%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/pionBlancS.png"); }
  35% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");}
  95% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");}
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");} 
}

@keyframes animRemoveBlack {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/pionNoirR.png"); }
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2.png");}
}

@keyframes animRemoveWhite {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/pionBlancR.png"); }
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2.png");}
}  


@keyframes animPutWhite {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2.png"); }
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/pionBlanc.png");}
}

@keyframes animPutCaseTransparente {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/case_transparente.png"); }
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/case_transparente.png");}
}



@keyframes animPutBlack {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2.png"); }
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/pionNoir.png");}
}

@keyframes animPutCaseNoire {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2.png"); }
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2.png");}
}

@keyframes animPutCaseBlanche {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseBlanche2.png"); }
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseBlanche2.png");}
}

@keyframes animSelectBlack {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/pionNoirR.png"); } 
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/pionNoirR.png");}
}

@keyframes animSelectWhite {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/pionBlancR.png"); }
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/pionBlancR.png");}
}




@keyframes animSelectOrigine {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2.png"); }
  30%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2Origine.png"); }
  35% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");}
  95% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");}
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");} 
}


@keyframes animDeSelectOrigine {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2Origine.png"); }
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2.png");}
}

@keyframes animTracer {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2.png"); }
  30%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2.png"); }
  35% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");}
  95% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");}
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");}
}

@keyframes animDeTracer {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png"); }
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2.png");}
}




@keyframes animEatBlackDame {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/dameNoireS.png"); }
  30%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/dameNoireS.png"); }
  35% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");}
  95% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");}
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");}
}

@keyframes animEatWhiteDame {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/dameBlancheS.png"); }
  30%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/dameBlancheS.png"); }
  35% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");}
  95% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");}
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoireTrace.png");} 
}



@keyframes animPutBlackDame {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2.png"); }
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/dameNoire.png");}
}

@keyframes animPutWhiteDame {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2.png"); }
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/dameBlanche.png");}
}

@keyframes animSelectBlackDame {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/dameNoireR.png"); } 
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/dameNoireR.png");}
}

@keyframes animSelectWhiteDame {
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/dameBlancheR.png"); }
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/dameBlancheR.png");}
}
                                


@keyframes animRemoveBlackDame {   
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/dameNoire.png"); }
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2.png");}
}

@keyframes animRemoveWhiteDame {   
  0%   {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/dameBlanche.png"); }
  100% {background-image: url("../w1bmjaqw599bw4ynbtqdvnvw/caseNoire2.png");}
}







     
#abK6cp {
 width: 100%;
 min-height: 400px;  
 display: grid;
 grid-template-columns: 22% 22% 22% 22%;
 /* grid-template-rows: 50% 50%; */
 row-gap : 10px;
 column-gap: 2.4%;
 /* border: 1px solid cyan; */
 justify-content: space-evenly;
 align-content: center;
    
}

.kdHrJh {
   /* position: relative; */
   //border: 1px solid blue;
   width: 100%;
   //height: 90%; 
}

.kdHrJh img {
   display: block;
   width: 100%;
   /* position: absolute;
   left: 50%;
   transform: translate(-50%, 0);
   max-width:100%;
   max-height:100%; */
}



.jry6HU {
   /* border: 1px solid blue; */
   width: 100%;
   //height: 10%; 
   height: auto;
}


































#mainBoard {
  width: 100%;
  border: var(--width10-construction) solid var(--vert-construction);
 

  display: flex;
  justify-content: flex-end;
  align-items: flex-end;

}















#loginBoard {     
  position: relative; 
  width: 90%;
  max-width: 360px;  
  height: 260px; 
  margin: 0px;
  margin: 10px 6px; 
  padding: 0px;
  box-sizing: border-box;
  /* border: 1px solid cyan; */
  border-radius: 20px;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #fff;

  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  //box-shadow: 0 3px 10px rgba(175, 238, 30, 0.9);
 

}

#wpeu6e { 
/*   position: absolute; */
  /* border: 6px solid rgb(65, 12, 23); */ 
  width: 80%;
}

#jdTz49 {
  width: 80%;
}







#friendsBoard, #accountConfigurationBoard {
  
width: 100%; 
min-height: 280px;
margin: 0px; 
padding: 0px;
padding-top: 0px;
padding-bottom: 60px;
box-sizing: border-box;
background-color: rgba(67, 254, 189, 0.94);
background-color: #7EC8E3;
background-color: #75E6DA;
background-color: #B1D8B7;
background-color: #D2FBA4;
background-color: #F5F5F5;
background-color: #FFF;

}

#accountConfigurationBoard {
  
  
  display: flex;
          justify-content: center;
          align-items: center;
  
  }

#friendsBoard {
  place-self: start start;
  padding-top: 80px;
}











#nv4mCr, #bpW2Fb, #muz9VN, #fjNqW5, #mzJK6w, #ay5bPk {

  width: 100%;
  max-width: 200px;
  height: 40px;
  padding: 0 15px;
  background: #e45c27;
  white-space: nowrap;
  border-radius: 3px;
  font-size: 16px;
  color: #fff;
  transition: all .2s ease-out, color .2s ease-out;
  border: 0;
  cursor: pointer;
  font-weight: bold;
  
}

#fjNqW5, #mzJK6w {

  width: 100%;
  max-width: none;
  margin-top: 6px;

}


.yqmzLC {

  min-width: 100%;
  height: 50px;
  background: #e45c27;
  white-space: nowrap;
  border-radius: 3px;
  font-size: 14px;
  color: #fff;
  //transition: all .2s ease-out, color .2s ease-out;
  border: 0;
  cursor: pointer;
  font-weight: bold;
  
  margin: 0px;
  
  //width: 18%;
  padding: 10px;
  font-size: 18px;
  //height: 56%;   
}


#avChst {
  margin: auto;
  display: block;
  /* width: 360px; */
  width: 100%;
}

#snWyv6 {
  margin: auto;
  display: block;
  /* width: 360px; */
}

#nv4mCr:hover, #bpW2Fb:hover, #fjNqW5:hover, #mzJK6w:hover, #ay5bPk:hover {
  background: #d7501b;
}


















#jzg7ZD, #udg23p, .ezWFgb, #zvS2r3 { 
  /* position: relative;  */
  //max-width: 860px; 
  
  }
  
  #jzg7ZD { 
  //margin-top: 200px;
  }

  #hkjrqJ, #zvS2r3, #npFMVd {
    width: 98%;
  }
  
  .ezWFgb {
    display: flex;
    justify-content: flex-end;
  }
  
  
  #zvS2r3 { 
  margin-top: 38px;
  margin-bottom: 18px;
  height: 44px;
  //border: 1px solid red;
  }


  
  #udg23p { 
   max-width: 400px;
   padding: 0px 6px;
  }
  






  #jyyajF {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    column-gap: 26px;
  }


  #vz9qtT {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-items: center;
    column-gap: 8px;
    row-gap: 26px;
  }


  .cpFa5a {
    /* border: 1px solid yellow; */
    width: 100%;
    min-width: 100px;
    max-width: 120px;
  }

  .epVQnk {
    background-color: #F5F5F5;
    text-align: center;
  }
  
  .epVQnk.enabled_btn {
    background-color: #F5F5F5;
    border: 1px solid green;
    color: black;
    cursor: pointer;
  }
  .epVQnk.disabled_btn {
    background-color: #F5F5F5;
    border: 1px solid black;
    color: black;
    opacity: 0.4;
  }



  #snSCyf.copied_state {
    background-color: rgb(152, 84, 64);
    color: white;
  }
  .copied_state {
    background-color: rgb(152, 84, 64);
    color: white;
  }
  




  
  /* .hjW4er {
   width: 386px; min-height: 96px; border: 1px solid brown;
   // float: left;
   border-radius: 0px 20px 20px 0px;
   margin-bottom: 10px; 
   //margin-left: 4px;
  }

  .zj2gjs {
    width: 386px; height: 26px; border: 0px solid brown;
  }
  
  .hjW4er:nth-child(even) {
   //margin-left: 22px;
  }
  
  
  .hjW4er .fzQSUC {
  width: 96px; height: 96px; float: left; //border: 0px solid cyan;
  }
  
  .hjW4er .weAdUM {
  width: 211px; min-height: 96px; position: relative; float: left; padding: 5px; //border: 1px solid magenta; 
  }
  
  .hjW4er .mjHBQT {
  width: 72px; height: 96px; position: relative; float: left;  padding: 0px; //border: 1px solid red; 
  }
   */








  .zj2gjs {
    max-width: 386px; height: 26px; border: 0px solid brown;
  }

   .hjW4er {
    max-width: 386px; min-height: 96px; border: 1px solid brown;
    border-radius: 0px 20px 20px 0px;
    /* margin-bottom: 10px;  */
    /* margin-left: 4px; */
     margin: 0px 6px 10px;
    display: flex;
   }
 
   
   .hjW4er .fzQSUC {
   width: 30%; /* float: left; border: 0px solid cyan; */
   }
   
   .hjW4er .weAdUM {
   width: 50%; /* min-height: 96px; position: relative; float: left; padding: 5px; border: 1px solid magenta;  */
   }
   
   .hjW4er .mjHBQT {
   width: 20%; /* height: 96px;  position: relative; float: left;  padding: 0px; border: 1px solid red;  */
   display: flex;
    justify-content: center;
    align-items: center;
   }  
  
  
  
  
  
  
  
/*   .qd3vCp {
   height: 120px; border: 1px solid brown; 
   border-radius: 0px 20px 20px 0px;
   margin-bottom: 10px; 
   margin-left: 0px;
   margin-top: 20px; 

   margin: auto;
   width: 90%;
   min-width: 300px;
   max-width: 500px;

   position: relative;
  }
  
  .qd3vCp:nth-child(even) {
   //margin-left: 22px;
  }
  
  
  .qd3vCp .imageWrapper2 {
  width: 96px; height: 96px; float: left; //border: 0px solid cyan;
  }
  
  .qd3vCp .textWrapper2 {
  width: 285px; height: 100%; position: relative; float: left; padding: 5px; //border: 1px solid magenta;
  font-size: 0.9em;
  } */


  .qd3vCp, .uhDfKC { 
    min-height: 120px; /* border: 10px solid brown; */ 
    border-radius: 0px 20px 20px 0px;
    margin: 20px auto 10px;
    width: 100%;
    min-width: 300px;
    max-width: 340px;
    position: relative;

  }

  .uhDfKC {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px auto 10px;
  }

.qd3vCp {

    display: grid;
/* grid-auto-flow: rows; */
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(10px, auto);
grid-template-areas: 
  "img name name"
  "img date date";

  column-gap: 0.6em;




  }

  .qd3vCp:first-child {
    margin-top: 0;
  }





  /* Not yet used */
  .aFriendDiv2_columnDisplay {
    grid-template-areas: 
  "img img img"
  "name name name"
  "date date date";
  }






  .qd3vCp div:nth-child(1) { 
    grid-area: img;
  }
  .qd3vCp div:nth-child(2) { 
    grid-area: name;
  }
  .qd3vCp div:nth-child(3) { 
    grid-area: date;
  }
  
  .chAhGz {
      /* border: 1px solid black; */
      text-align: center;
  }

 /*  .qd3vCp:nth-child(2n+1){
    border: 1px solid greenyellow;
  } */



  .vkbpjs:nth-child(2n+1) {
    background-color: #d5eaf2;
  }
  .vkbpjs:nth-child(2n) {
    background-color: #e4f0f5;
  }



  























#kh3S3D, .kh3S3D{
  width: 100%;
  max-width:530px;
  
/*height: 100%;
  max-height:630px; */
  
  /* border: var(--width10-construction) solid var(--violet-construction); */
  margin: 0px auto;
  height: auto;
  padding: 10px;

 

}

#htFWcy {
  width: 100%; /* 500px; */
  
  /* 500px; */
/*   height: 100%;
  height: 500px; */
  /* margin: 3px 48px; */ 
  margin: 5px auto;
  height: auto;
  /* border: var(--width10-construction) solid var(--rouge-construction); */
  /* border: 2px solid black; */
  padding: 0px; 
  /* box-sizing: content-box; */
  /* display: none; */
  display: flex;

  box-sizing: content-box;
  /* border: 2px solid black; */

}

/* #htFWcy table {
  border: 2px solid black;
} */

.hk822k #bdDZsD, .tu67Uy #bdDZsD{
  width: 40px; /* background: red; */
  position: relative;
  margin-left: 6px;
}

.zq2n23 #bdDZsD, .gmB69B #bdDZsD{
  width: 40px; /* background: red; */
  position: relative;
  margin-left: 6px;
}



.hk822k #qpVdSk, .hk822k #mvSW6t, .tu67Uy #qpVdSk, .tu67Uy #mvSW6t {
  width: calc(100% - 40px); 
  height: 4vh;
  /* background: #ED0000; */
  margin: 5px 0; 
  font-size: 1.4em;
  font-family: 'ballet';
  display: block;
}

.zq2n23 #qpVdSk, .zq2n23 #mvSW6t, .gmB69B #qpVdSk, .gmB69B #mvSW6t {
  width: calc(100% - 40px); 
  height: 4vh;
  /* background: #ED0000; */
  margin: 5px 0; 
  font-size: 1.4em;
  font-family: 'ballet';
  display: block;
}







#cbL9hr td{
  border: 0px solid black;  
}
#cbL9hr
{
  outline: 2px solid black;
  width: 100%;
  border-collapse: collapse; 
  line-height: 1px;
  box-sizing: content-box;
  
  /* aspect-ratio: 1; */  
}


#cbL9hr td {
width: 10%;
/* max-width: 50px; */
padding: 0px; margin: 0px; border: 0px solid blue;  
background-size: 100% 100%;
}

#cbL9hr img {
/* width: 100%; background-size: cover; */

/* display:block; */
border:none;
padding:0px;
margin:0px;
    
}












/* Modals */



    /* The Modal (background) */
    #zsaZbf, #zsaZbf12, #zsaZbf14 {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 110px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ 
    }
    
    
    
    #mvmMMQ, #mvmMMQ12, #mvmMMQ14 {
      
      margin: auto;
      display: block;
      width: 640px;
      height: 200px;           
                                     
      background-color: #fff;
      background-color: transparent;  
      
      animation-name: zoom;
      animation-duration: 1s;
      
      
      padding: 6px;
      
   
      border: 1px solid transparent;  
    } 
    
    .zhamwD {
      background-color: #fff; 
    }

    /* .zhamwD div:first-child {
      padding: 0.4em;
    } */


    #ceWHRM div:hover {
      border-top: 2px solid blue;
      border-bottom: 2px solid blue;
    }

     
    
    /* The Close Button */
    #ya2b3Y, #wzgsy3, #bgpYyt {
      position: absolute;
     
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
    }
    
    #ya2b3Y:hover,
    #ya2b3Y:focus,
    #wzgsy3:hover,
    #wzgsy3:focus,
    #bgpYyt:hover,
    #bgpYyt:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    } 
    
    
    
    
    
    
    
    
    
    
    
    
    
        /* The Modal (background) */
    #zsaZbf10 {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 110px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    }
    
    
    
    #mvmMMQ10 {
      
      margin: auto;
      display: block;
      width: 640px;
      height: 200px;           
      
      background-color: #fff;
      
      animation-name: zoom;
      animation-duration: 1s;
      
      
      padding: 6px;
      

    }
    
    /* The Close Button */
    #pqukLh {
      position: absolute;
      
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
    }
    
    #pqukLh:hover,
    #pqukLh:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    }  
    
    


    #zsaZbfGenerique {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 110px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    }
    
    
    
    #mvmMMQGenerique {
       
      margin: auto;
      display: block;
      width: 640px;
      height: 200px;           
      
      background-color: #fff;
      
      animation-name: zoom2;
      animation-duration: 1s;
      
      
      padding: 20px;
      
      
    }
                                  
    /* The Close Button */
    #wqgznA {
      position: absolute;
      
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
    }
    
    
    #wqgznA:hover,
    #wqgznA:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;  
      
      
    }




    .zsaZbf {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 110px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    }
    
    
    
    .mvmMMQ {
     
      margin: auto;
      display: block;
      width: 640px;
      height: 200px;           
      
      background-color: #fff;
      
      animation-name: zoom;
      animation-duration: 1s;
      
      
      padding: 20px;       
      
     
    }
                                  
    /* The Close Button */
    .ya2b3Y {
      position: absolute;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
    }
    
    .ya2b3Y:hover,
    .ya2b3Y:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    } 






    
#zsaZbf16, #zsaZbf18, #zsaZbf100, #zsaZbf200, #zsaZbf300{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  padding-top: 110px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  //border: 10px solid red; 
  //padding: 0px;
}


#mvmMMQ16, #mvmMMQ18, #mvmMMQ100, #mvmMMQ200, #mvmMMQ300 {    
      
      margin: auto;
      display: block;
               
                                     
      background-color: #fff;
      background-color: transparent;
      
      animation-name: zoom;
      animation-duration: 1s;
                     
    
      border: 1px solid transparent; 
      position: relative;
     
     
     
      
}


#vjQgKc, #ka9SEU, #kzRuyc, #zyFTSU {
    position: absolute;
    top: -5px;
    right: 5px;
    color: #BF3030;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s; 
    
    z-index: 100; 
} 

#vjQgKc:hover, #ka9SEU:hover, #kzRuyc:hover, #zyFTSU:hover {
    color: #ED0000;
    text-decoration: none;
    cursor: pointer;
}              
              
    



























/* #joinBoard {
  display: block;
} */


.snK785 {
  display: block;
}

.currentBoard_mode_flex {
  display: flex;
}

.geRyAv {
  color: rgb(170, 170, 170) !important; 
  border-color: transparent; 
  transform: scale(1.4, 1.4);  
  z-index: 1
}











.jmGZwd:hover {
  transform: translate(0%, 0%); 
}


.jmGZwd {
 cursor: pointer;
 transform: translate(-50%, 0%);  
}


.gray_out_image {

filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */

}  














.zq2n23 .ypwDYa, .gmB69B .ypwDYa {
  display: flex;
}




















#nt6azj {
  width: 100%; max-width: 1000px; min-height: 600px; border: 10px solid red; padding: 10px;

  font-weight: 900;
  color: green;
  line-height: 1.8em;

  display: flex;
  flex-direction: column;
  justify-content: space-between;


}



.eaqALQ, .kfJKpK {

display: flex;
justify-content: center;
align-items: center;

width: 100%;
max-width: 200px;
height: 40px;
padding: 0 15px;
background: #e45c27;
white-space: nowrap;
border-radius: 3px;
font-size: 16px;
color: #fff;
transition: all .2s ease-out, color .2s ease-out;
border: 0;
cursor: pointer;
font-weight: bold;

}


.eaqALQ:hover, .kfJKpK:hover {
background: #d7501b;
}
























.wwU7CS {
  font-family: "Work Sans", sans-serif;
  color: whitesmoke;
  line-height: 27px;
  letter-spacing: .6px;
  text-align: center;
  background-color: black;
}















img {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

img:focus {
  outline: none !important;
}









.gqKM7S {
  background-color: #F5F5F5;
}





.enabled_play_button {
  background-color: #4682B4;
}


.kusAPz {
  border: 0px solid red;
}
.ymNcSJ {
  border: 0px solid black;
}
.npke7Q {
  border: 0px solid blue;
}
.gt4fmY {
  border: 0px solid green;
}
.pgrKe2 {
  border: 0px solid orange;
}
.rn33Jz {
  border: 0px solid brown;
}


.fjGdpp {
  border-width : 0px;
}
.amqVPE {
  border-width : 0px;
}
.mqhN4d {
  border-width : 0px;
}






.svn2LA {
  display: none;
}


#gyTWg3, #tsyA9G {
  opacity: 0.5;
}

#gyTWg3:hover, #tsyA9G:hover {
  opacity: 0.9;
}


#vjg5HV {
  display: none;
}















.grecaptcha-badge { 
  visibility: hidden;
}




















#fgACwz {
  //display: none;
 
    position: relative; 
    width: 100%;
    max-width: 600px;
    
    min-height: 240px; 
    margin: 0px;
    //margin: 10px 6px; 
    padding: 0px;
    padding: 16px 0px;
    box-sizing: border-box;    
    /* border: 1px solid cyan; */
    
    
    border-radius: 20px;
  
    display: flex;
    justify-content: center;
    align-items: center;
  
    background-color: #fff;
  
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    //box-shadow: 0 3px 10px rgba(175, 238, 30, 0.9);
  
    
}

#ppTVgU { 
 
}
















@media screen and (max-width: 1000px) {  /* old value : 1133px */

.hk822k, .tu67Uy {  
  grid-template-rows: 100px 6fr 1fr;
  /* grid-template-rows: 2fr 6fr 1fr; */ 
}

.hk822k .nek6Dt, .tu67Uy .nek6Dt {
        flex-direction: column;
        justify-content: space-between;
        height: 100%; 
    }


/*     .fyt2FD {
      min-height: 14%; 
    }

    .jyDhWB{
      padding: 0;
      min-height: 72%;
    }

    .pjMepW{
      padding: 0;
      min-height: 14%;
    } */
   



    .hk822k .peaCck, .tu67Uy  .peaCck {
        width: 80%;
        /* max-width: ; */
        height: auto;
        border: var(--width1-construction) solid var(--violet1-construction);
        background: var(--aqua-construction);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 30%; 
    }

     .hk822k .ugr7eh, .tu67Uy  .ugr7eh {
        /* max-width: var(--header-width-part2); */
        width: 100%;
        height: auto;
        border: var(--width3-construction) solid var(--noir-construction);
        background: var(--violet1-construction); 
    }


     .hk822k ul.mqJ3YS li span, .tu67Uy ul.mqJ3YS li span { 
        font-size: 26px;
        padding: 8px 20px;  
    }
    

     .hk822k .ypwDYa, .tu67Uy .ypwDYa {
        width: 160px;
        /* max-width: ; */
        height: 30%;
        border: var(--width1-construction) solid var(--violet1-construction);
        background: var(--bleu-clair1);
    
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .4rem;

        flex-direction: column;
        
        display: none;
    }

     .hk822k .ehSAdu, .tu67Uy .ehSAdu, .zq2n23 .ehSAdu, .gmB69B .ehSAdu {
        width: 160px;
        display: block;
        border: var(--width1-construction) solid var(--violet1-construction);

        display: flex;
        justify-content: center;
        align-items: center;
        /* gap: .4rem; */

        flex-direction: row;
        display: none;
    }

     .hk822k .yrhnVU,  .hk822k .kdNAgY, .tu67Uy .yrhnVU,  .tu67Uy .kdNAgY {
        width: 46%;
    }

     .hk822k .vtHEdE, .tu67Uy .vtHEdE {
        width: 54%;
    }


     .hk822k .jgYuT8, .tu67Uy .jgYuT8 { 
        width: 70%;
        //max-width: 100px;
        margin: 0 auto;
    }







    .zq2n23 .nek6Dt, .gmB69B .nek6Dt {
      flex-direction: column;
    }

    .zq2n23, .gmB69B  {
      grid-template-rows: 2fr 7fr 1fr;
    }

    .zq2n23 .ehSAdu, .gmB69B .ehSAdu {
      display: flex;
    }

    .zq2n23 .ypwDYa, .gmB69B .ypwDYa {
      display: none;
    }



    .zq2n23 .jgYuT8, .gmB69B .jgYuT8 {
      display: none;
    }

    
    

    


}









@media screen and (max-width: 960px) {

  

 /*  .header_type_3 {
    flex-direction: column;
    height: 100%;
  }

  .header_type_3 .jgYuT8 { 
    width: 90%;
} */










/*     .fyt2FD {
      min-height: 20%; 
    }

    .jyDhWB{
      padding: 0;
      min-height: 66%;
    }

    .pjMepW{
      padding: 0;
      min-height: 14%;
    } */
   


}




@media screen and (max-width: 920px) {

  

 /*  .header_type_2 {
    justify-items: flex-start;
  }

  .header_type_2 .peaCck{
    display: none;
  } */

}











/* @media screen and (max-width: 770px) {

  .hk822k {  
    display: block;
  }

  .hk822k .peaCck {
    display: none;
  } 

  .hk822k .fyt2FD {
    min-height: '100px';
  } 

  .hk822k .pjMepW {
    min-height: '100px';
  }

  .hk822k .jyDhWB {
    min-height: '300px';
  }

} */




#jzR6Dh {
    display: block;
  //width: 10%;
  max-width: 100px;
  width: 30px;
  margin: auto;
  margin-bottom: 2px;
  cursor: pointer;
  border: 0px solid green;
}




@media screen and (max-width: 820px) {
  
  #jyyajF {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  

}











@media screen and (max-width: 640px) {
  
  #abK6cp {
    
    grid-template-columns: 30% 30%;
    row-gap : 10px;
    column-gap: 4%;
    justify-content: center;
    align-content: center;
       
   }
  

}






@media screen and (max-width: 600px) {
  .hk822k ul.mqJ3YS li span, .tu67Uy ul.mqJ3YS li span  { 
      font-size: 1.2em; 
  }

}
































  
  
  #initiateBoard, #joinBoard { 
  position: relative; 
  width: 90%; 
  min-height: 100px; 
  margin: 10px 6px; 
  clear: both; 
  box-sizing: border-box; 
  
  
  text-align: center; 
  padding: 14px 4px; 
  font-size: 0.9em;
  border: 1px solid cyan; 
  }
  
  #initiateBoard {  
  /* height: 316px; 
  height: 416px; */ 

  max-width: 610px;

  border: 1px solid cyan; 
  border: 1px solid transparent; 
  border-radius: 20px;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #fff;

  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  //box-shadow: 0 3px 10px rgba(175, 238, 30, 0.9);

  }
  
  
  #initiateBoard input[type="text"], #initiateBoard input[type="password"], #joinBoard input[type="text"], #joinBoard input[type="password"] { 
  width: 100%; 
  height: 30px; 
  margin-bottom: 5px; 
  }
  
  
  #joinBoard {
  //background-color: #d9ecd0;
  //height: 304px;

  width: 90%;
  max-width: 400px;
  border: 1px solid cyan; 
  border: 1px solid transparent; 
  border-radius: 20px;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #fff;

  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  //box-shadow: 0 3px 10px rgba(175, 238, 30, 0.9);


  }
  
  
  
  
  #qupBuZ, #jbZmGC, #pbqUvR { 
  position: relative; 
  width: 100%; 
  min-height: 110px; 
  margin: 0px; 
  clear: both; 
  box-sizing: border-box;   
  text-align: center; 
  padding: 14px 4px; 
  font-size: 1.0em; 

  position: absolute;
  top: 0;

  }
  
  #qupBuZ, #pbqUvR { 
  color: rgb(250, 250, 250);
  color:rgb(109, 7, 24);
  background-color: rgba(67, 254, 189, 0.94);
  font-weight: 500;
  }
  
  #jbZmGC { 
  color: rgb(240, 240, 240);
  background-color: rgba(194, 0, 0, 0.94);
  font-weight: 500;
  }
  
  #qmR2Uw {
    /* border: 6px solid green; */
    position: relative;
  }

  #qmR2Uw div[style *= 'none'] {
    border: 6px solid blue;
  }
  
  #dq3Brr, #jc8hTk, #he8zFs, #fj38jU, #jesQZb, #ga9qJC, #pnuvtq
  , #hyGZhN, #qhr6cJ, #zfD9MB, #tmURsa { 
        background-color: black;
        background-color: rgb(40 40 40);
        color: rgb(255, 255, 255);  
        font-size: 0.8em;
        padding: 14px 4px;

        /* display: flex;
        justify-content: center;
        align-items: center; */

        text-align: center;

        width: 100%; 
        min-height: 40px;
        position: absolute;
        top: 0;

        z-index: 10; /* border: #ED0000 solid 10px; */
  }

  #hyGZhN, #qhr6cJ, #zfD9MB {
    color: rgb(0,0,139);
    background-color: rgb(173,255,47);
  }

  #tcLrYz {
    font-size: 1.1em;
    color:rgb(109, 7, 24);
  }


  #tmURsa {
    min-height: 60px;
  }

  #wchTne, #mddyQr, #urZDyB {  /* The same as the above rule */
      
    background-color: black; 
    color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    font-size: 0.8em;
    /* padding: 14px 4px; */
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  
    text-align: center;
  
    width: 100%; 
    min-height: 40px;
    /* position: absolute;
    top: 0;
  
    z-index: 10;  /* border: #ED0000 solid 1px;  */ */
  
  }

  #wchTne, #mddyQr, #urZDyB {
    
    /* border: 1px solid green; */
    background-color: transparent;
  
  }


  /* #pnuvtq { 
    position: relative; 
    width: 100%; 
    height: 40px; 
    margin: 0px; 
    clear: both; 
    box-sizing: border-box; 
    background-color: black; 
    color: rgb(255, 255, 255); 
    text-align: center; 
    padding: 14px 4px; 
    font-size: 0.8em; 
    }  */ 


 /*  #dq3Brr, #jc8hTk, #he8zFs, #fj38jU, #jesQZb, #ga9qJC, #tmURsa { 
    position: relative; 
    width: 100%; 
    min-height: 40px; 
    margin: 0px; 
    clear: both; 
    box-sizing: border-box; 
    background-color: black; 
    color: rgb(255, 255, 255); 
    text-align: center; 
    padding: 14px 4px; 
    font-size: 0.8em; 
    position: absolute;
      top: 0;
    } */


  
/*   #wchTne, #mddyQr, #urZDyB { 
      
      position: relative; 
        width: 100%; 
        height: 62px; 
        margin: 0px; 
        padding: 0px; 
        clear: both; 
        box-sizing: border-box;

  } */




/*   #yzQWRZ { 
  position: absolute; 
  width: 60px; 
  height: 60px; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  } */

.yzQWRZ {  
  width: 60px; 
  height: 60px;
  /* border: 1px solid goldenrod; */
}

  

  
  #subscribeBoard { 
  position: relative; 
  width: 90%;
  max-width: 600px; 
  height: 640px; 
  margin: 0px;
  margin: 10px 6px; 
  padding: 0px;
  box-sizing: border-box;    
  /* border: 1px solid cyan; */
  
  
  border-radius: 20px;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #fff;

  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  //box-shadow: 0 3px 10px rgba(175, 238, 30, 0.9);

  }
  
  #btK24H { 
    /* border:rgb(17, 66, 118) 2px solid; */
  position: absolute; 
  width: 100%;
  max-width: 310px;
  top: 62px;
  //top: 50%; 
  left: 50%; 
  transform: translate(-50%, 0%); 
  //height: fit-content; 
  }


  
  input[type="text"], input[type="password"] { 
  width: 100%; 
  height: 40px; 
  background: transparent; 
  border: 1px solid rgba(0, 0, 0, 0.2); 
  border-radius: 5px; color: rgb(34, 34, 34); 
  font-family: Exo, sans-serif; 
  font-size: 16px; padding: 10px; 
  margin-bottom: 10px; 
  }

  input[type="password"] { 
    padding-right: 50px;
  }
  
  
  
  #bz9P2V:focus { 
  outline: none; 
  border: 2px solid rgba(0, 0, 200, 0.7); 
  }
  
  
  
  
  
  
  #hjHY77, #hendkH { 
  width: 48%; 
  height: 40px; 
  background: transparent; 
  border: 1px solid rgba(0, 0, 0, 0.2); 
  border-radius: 5px; 
  color: rgb(34, 34, 34); 
  font-family: Exo, sans-serif; 
  font-size: 16px; 
  padding: 10px; 
  margin-bottom: 10px; 
  text-align: justify; 
  }

  #qgCqmE {
    display:flex;
    justify-content: space-between;
    /* border: 1px solid blue; */
  }
  
 /*  #btK24H #hjHY77 { 
  position: absolute; 
  left: 0px; 
  }
  
  #btK24H #hendkH { 
  position: absolute; 
  right: 0px; 
  }
 */




  #yzT3KR, #upqQ7f, #cmUZHV, #ctgmCg {
    height: 40px; 
    width: 100%; 
    background-color: rgba(59,130,246,.9);  
    background-image: linear-gradient(rgb(1, 33, 105), rgb(0, 113, 197)); 
    color: #fff; 
    color: aliceblue; 
    font-size: 1.3rem;
    cursor: pointer;
  }
  



  
  button { 
  width: 100%; 
  height: 40px; 
  border: 1px solid rgba(0, 0, 0, 0); 
  border-radius: 5px; 
  opacity: 1; 
  background-color: rgb(220, 220, 220); 
  }
  
  button:active { 
  opacity: 0.6; 
  }
  
  input[type="text"]:focus { 
  outline: none; 
  border: 2px solid rgba(255, 255, 255, 0.9); 
  border: 2px solid rgba(3, 21, 100, 0.9); 
  }
  
  input[type="password"]:focus { 
  outline: none; 
  border: 2px solid rgba(255, 255, 255, 0.9); 
  border: 2px solid rgba(3, 21, 100, 0.9); 
  }
  
  button:focus { 
  outline: none; 
  }
  
  ::-webkit-input-placeholder { 
  color: rgba(150, 150, 150, 0.8); 
  }
  
  input:focus::-webkit-input-placeholder { 
  color: rgba(150, 150, 150, 0.2); 
  }
  
  #awH9Pb { 
  color: rgba(150, 150, 150, 0.8); 
  border-radius: 5px; 
  font-family: Exo, sans-serif; 
  font-size: 12px; 
  font-weight: bold; 
  padding: 0px; 
  margin: 0px 0px 6px; 
  }
  
  #mjvTc6 { 
  color: rgba(150, 150, 150, 0.8); 
  border-radius: 5px; 
  font-family: Exo, sans-serif; 
  font-size: 12px; 
  font-weight: bold; 
  padding: 0px; 
  margin: 0px 0px 6px; 
  }
  
  #btK24H select, select { 
  display: block; 
  width: 25%; 
  height: 40px; 
  margin: 0px 0px 10px; 
  background: transparent; 
  border: 1px solid rgba(0, 0, 0, 0.2); 
  border-radius: 5px; 
  color: rgb(34, 34, 34); 
  font-family: Exo, sans-serif; 
  font-size: 0.9rem; 
  padding: 10px; }
  
  #btK24H select#paJC3z, #zpeNvq { 
  position: absolute; 
  left: 0px; 
  color: rgb(34, 34, 34); 
  }
  
  #btK24H select#skJUzr, #un4QU8 { 
  position: absolute; 
  left: 50%; 
  color: rgb(34, 34, 34); 
  transform: translate(-50%, 0%); 
  }
  
  #btK24H select#hwzJLQ, #cukQbf { 
  position: absolute; 
  right: 0px; 
  color: rgb(34, 34, 34); 
  }
  
  #btK24H button { 
  position: absolute; 
  width: 100%; 
  left: 50%; 
  transform: translate(-50%, 0%); 
  }



  select#tahGty option { 
  }




















/* DEBUT LES TOOLTIPS */





















.tk6Fzz { 
  position: relative; 
  display: inline-block;
  width: 100%; 
  height: 50px; 
  //border: 10px solid blue;
  /* height: 200px; */
  //padding: 50% 0;

  /* border: 10px solid blue; */ 
  
  
  /* height: 100px; */


  }


  
.tk6Fzz .tvcgNV { 
  width: 100%; 
  height: 90%; 
  position: absolute; 
  left: 0%; 
  top: 50%;
  transform: translate(0%, -50%);
  /* border: 1px solid green; */
  /* z-index: 1; */
 }

 .tk6Fzz .tvcgNV .yg8NtF{ 
      /* border: 1px solid blue; */
      visibility: hidden;
 }
 

 .tk6Fzz .tvcgNV input { 

      width: 100%; 
      height: 96%;
      
 }
 




 .pubZTg, .gc2WbQ{ 
    box-sizing: border-box; 
    /* min-width: 200px; 
    min-height: 80px; */ 
    min-height: 60px;
    background-color: black; 
    color: rgb(255, 255, 255); 
    //text-align: left; 
    border-radius: 6px; 
    padding: 10px 10px; 
    font-size: 0.8em; 
    position: absolute;
    left: 100%; 
    top: 50%;
    transform: translate(0%, -50%);
    /* z-index: 1; */
    margin-left: 20px;
    width: 200px;
    /* border: 1px solid red; */

    display: flex; justify-content: center; align-items: center;

    line-height: 1.8em;
  }

  .pubZTg::after, .gc2WbQ::after{ 
    content: " "; 
    position: absolute;
    left: 0%; 
    top: 50%;
    transform: translate(-100%, -50%); 
    border-width: 10px; 
    border-width: 20px; 
    border-style: solid;
    border-color: transparent black transparent transparent;
    }














  #bftmef {
      width: 500px;
      height: 300px;
      background-color: aqua;
  }
























    @media screen and (max-width: 840px) {
    


      .pubZTg, .gc2WbQ{ 
     
    background-color: black; 
    text-align: left; 
    border-radius: 6px 0 6px 6px; 
    padding: 20px; 
    font-size: 0.8em;

    position: absolute; 
    left: 50%; 
    top: 100%; 
    transform: translate(-100%, 0%);
    margin-left: 20px;
    margin-top: 20px;

    width: 300px;
  }

  
  .pubZTg::after, .gc2WbQ::after{ 
    content: " "; 
    position: absolute; 

    left: initial; 
    top: initial;
    transform: none;

    right: 0px;
    top: 0px;
    transform: translate(0%, -98%);
    
    border-width: 20px; 
    border-style: solid;
    border-color: transparent transparent black transparent;
    }
    

    
}





/* 
.tk6Fzz #zeAn6d, .tk6Fzz #sgaNUb, .tk6Fzz #qppDz6, .tk6Fzz #waJcmB, .tk6Fzz #bsjEbu, .tk6Fzz #rwuqfP { 
  box-sizing: border-box; 
  min-width: 200px; 
  min-height: 40px; 
  background-color: black; 
  color: rgb(255, 255, 255); 
  text-align: left; 
  border-radius: 6px; 
  padding: 10px 4px; 
  font-size: 0.8em; 
  left: 102%; 
  top: 50%; 
  margin-top: -25px; 
  position: absolute; 
  z-index: 1; 
  }


  .tk6Fzz #zeAn6d::after, .tk6Fzz #sgaNUb::after, .tk6Fzz #qppDz6::after, .tk6Fzz #waJcmB::after, .tk6Fzz #bsjEbu::after, .tk6Fzz #rwuqfP::after, .tk6Fzz #aztBhP::after, .tk6Fzz #kajmFM::after { 
    content: " "; 
    position: absolute; 
    right: 100%; 
    top: 20px; 
    margin-top: -10px; 
    border-width: 10px; 
    border-style: solid; 
    border-color: transparent black transparent transparent; 
    } */



















/* FIN LES TOOLTIPS */









































.tooltip2 { 
  position: relative; 
  display: inline-block; 
  width: 100%; 
  height: fit-content; 
  //border: 1px solid blue;
  /* height: 200px; */
  /* padding: 50% 0; */
  }
  
  .sbQfZa {        
  position: relative; 
  display: inline-block; 
  width: 100%; 
  height: 50px;
  }    
  
  .czYP5N { 
  position: relative; 
  display: inline-block; 
  width: 100%; 
  height: fit-content; 
  }
  
  .tooltip2 #zeAn6d, .tooltip2 #sgaNUb, .tooltip2 #qppDz6, .tooltip2 #waJcmB, .tooltip2 #bsjEbu, .tooltip2 #rwuqfP { 
  box-sizing: border-box; 
  min-width: 200px; 
  min-height: 40px; 
  background-color: black; 
  color: rgb(255, 255, 255); 
  text-align: left; 
  border-radius: 6px; 
  padding: 10px 4px; 
  font-size: 0.8em; 
  left: 102%; 
  top: 50%; 
  margin-top: -25px; 
  position: absolute; 
  z-index: 1; 
  }

  .hevPUC{ 
    box-sizing: border-box; 
    min-width: 200px; 
    min-height: 40px; 
    background-color: black; 
    color: rgb(255, 255, 255); 
    text-align: left; 
    border-radius: 6px; 
    padding: 10px 4px; 
    font-size: 0.8em; 
    left: 102%; 
    top: 50%; 
    margin-top: -25px; 
    position: absolute; 
    z-index: 0;
  }
  
  
  .sbQfZa #mjAW6c, .sbQfZa #gaYLMz, .sbQfZa #ygVkPJ { 
  box-sizing: border-box; 
  min-width: 200px; 
  min-height: 40px; 
  background-color: black; 
  color: rgb(255, 255, 255); 
  text-align: left; 
  border-radius: 6px; 
  padding: 10px 4px; 
  font-size: 0.8em; 
  left: 102%; 
  top: 50%; 
  margin-top: -25px; 
  position: absolute; 
  z-index: 1; 
  }
  
  
  
  .tooltip3 { 
  position: relative; 
  display: inline-block; 
  width: 100%; 
  height: fit-content; 
  }
  
  .tooltip3 #ayhGej, .tooltip3 #zfgmMk, .tooltip3 #zudvsd, .tooltip3 #bdf27b, .tooltip3 #jfUPPn, .tooltip3 #uwubmw, .tooltip3 #vbAn3n { 
  box-sizing: border-box; 
  min-width: 200px; 
  min-height: 40px; 
  background-color: black; 
  color: rgb(255, 255, 255); 
  text-align: left; 
  border-radius: 6px; 
  padding: 10px 4px; 
  font-size: 0.8em; 
  left: 102%; 
  top: 50%; 
  margin-top: -20px; 
  position: absolute; 
  z-index: 1; 

  /* top: 150%;
  margin-top: 0px; 
  transform: translate(-100%, 0%); */
  }
  
  .tooltip3 #ayhGej::after, .tooltip3 #zfgmMk::after, .tooltip3 #zudvsd::after, .tooltip3 #bdf27b::after, .tooltip3 #jfUPPn::after, .tooltip3 #uwubmw::after, .tooltip3 #vbAn3n::after  { 
  content: " "; 
  position: absolute; 
  right: 100%; 
  top: 20px; 
  margin-top: -10px; 
  border-width: 10px; 
  border-style: solid; 
  border-color: transparent black transparent transparent; 
  }
  
  
  .tooltip2 #aztBhP, .tooltip2 #mwMF6v, .tooltip2 #kajmFM { 
  box-sizing: border-box; 
  min-width: 200px; 
  min-height: 40px; 
  background-color: black; 
  color: rgb(255, 255, 255); 
  text-align: center; 
  border-radius: 6px; 
  padding: 15px 0px; 
  font-size: 0.8em; 
  left: 102%; 
  top: 50%; 
  margin-top: -45px; 
  position: absolute; 
  z-index: 1; 
  }
  
  .tooltip2 #zeAn6d::after, .tooltip2 #sgaNUb::after, .tooltip2 #qppDz6::after, .tooltip2 #waJcmB::after, .tooltip2 #bsjEbu::after, .tooltip2 #rwuqfP::after, .tooltip2 #aztBhP::after, .tooltip2 #kajmFM::after { 
  content: " "; 
  position: absolute; 
  right: 100%; 
  top: 20px; 
  margin-top: -10px; 
  border-width: 10px; 
  border-style: solid; 
  border-color: transparent black transparent transparent; 
  }


  .hevPUC::after{ 
    content: " "; 
    position: absolute; 
    right: 100%; 
    top: 20px; 
    margin-top: -10px; 
    border-width: 10px; 
    border-style: solid; 
    border-color: transparent black transparent transparent; 
    }
    
  

  
  
  
  
  .sbQfZa #mwMF6v, .sbQfZa #kajmFM { 
  box-sizing: border-box; 
  min-width: 200px; 
  min-height: 40px; 
  background-color: black; 
  color: rgb(255, 255, 255); 
  text-align: center; 
  border-radius: 6px; 
  padding: 15px 0px; 
  font-size: 0.8em; 
  left: 102%; 
  top: 50%; 
  margin-top: -45px; 
  position: absolute; 
  z-index: 1; 
  }
  
  .sbQfZa #mjAW6c::after, .sbQfZa #gaYLMz::after, .sbQfZa #ygVkPJ::after, .sbQfZa #mwMF6v::after {
  content: " "; 
  position: absolute; 
  right: 100%; 
  top: 20px; 
  margin-top: -10px; 
  border-width: 10px; 
  border-style: solid; 
  border-color: transparent black transparent transparent; 
  }
  
  
  
  #rdf6BG, #uwb687, #gcyAp2, #wwEm6H, #gfKPN5, #chaALv { 
  width: 20px; 
  height: 20px; 
  position: absolute; 
  right: 5px; 
  top: 20%; 
  }
  
  #ndNRbA, #yzVb83, #qgNrbW, #errorSignLanguage10 { 
  width: 20px; 
  height: 20px; 
  position: absolute; 
  right: 5px; 
  top: 20%; 
  }

  #senE7Z { 
    width: 20px; 
    height: 20px; 
    position: absolute; 
    right: 20px; 
    top: 20%; 
  }
  
  #su5PAW, #tbTEpK, #wpRFBY, #ssf7kS, #vvygCp, #gshfMU, #hzaZbF { 
  width: 20px; 
  height: 20px; 
  position: absolute; 
  right: 5px; 
  top: 34%; 
  }
  
  #vkSWr7, #ywpkqK, #mhaUr5 { 
  width: 20px; 
  height: 20px; 
  position: relative; 
  left: 95%; 
  top: -23px; 
  }

  #vkSWr7 { 
    left: 92%; 
    top: -23px; 
  }

  #mhaUr5 { 
    position: absolute;
    left: initial;
    right: 6px; 
    top: -26px; 
  }
  
  #vbdA7N, #muJ4DV, #ffKk7L, #tahcHR,  #ddaRBG, #nhSAQ2,  #eud9cF, #pm68KH,  #zst5Fb, #su2nRJ { 
  width: 30px; 
  height: 30px; 
  position: absolute; 
  right: 30px; 
  top: 12%; 
  }
  
  #eeruMs, #gz6AHB { 
  width: 30px; 
  height: 30px; 
  position: absolute; 
  right: 10px; 
  top: 12%; 
  }
























  @media screen and (max-width: 647px) {
    

    .peaCck {
        width: 100%;
        gap: 10%;
        justify-content: flex-start;
    }

    
}




@media screen and (max-height: 580px) {

  #dq3Brr, #jc8hTk, #he8zFs, #fj38jU, #jesQZb, #ga9qJC, #tmURsa { 
    display: none;
    }

}










@media screen and (max-width: 510px) {

  .hk822k .ehSAdu, .tu67Uy .ehSAdu, .zq2n23 .ehSAdu, .gmB69B .ehSAdu {
    width: 220px;
}
 
.hk822k ul.mqJ3YS li span, .tu67Uy ul.mqJ3YS li span { 
    font-size: 1.1em; 
}

.zq2n23  #ugr7eh, .gmB69B #ugr7eh {
  display: none;
}

#mqJ3YS {
  display: none;
}

/* #jzR6Dh {
  display: block;
  margin: auto;
  margin-bottom: 2px;
} */

#wrEFLk {
  display: block;
}
    
}


@media screen and (max-width: 360px) {
 
  .hk822k ul.mqJ3YS li span, .tu67Uy ul.mqJ3YS li span { 
      font-size: 0.9em; 
  }
      
  }




  

/* .peaCck {
    display: none;
} */

#mainBoard{
  display: none;
}

/* .kh3S3D {
  display: none;
} */






