/* Souplex.css */

.BleuH { background-color:blue; color:white; position:absolute; top   :0.1em; right:0.2em; }
.BleuB { background-color:blue; color:white; position:absolute; bottom:0.1em;  left:0.2em; }
.BleuM { background-color:blue; color:white; position:absolute; bottom:0.1em;  left:0.2em; }
.BleuN { background-color:blue; color:white; position:absolute; bottom:0.0em;  left:1.2em; }
.RougH { background-color:red;  color:white; position:absolute; top   :0.1em; right:0.2em; }
.RougB { background-color:red;  color:white; position:absolute; bottom:0.1em;  left:0.2em; }
.RougM { background-color:red;  color:white; position:absolute; bottom:0.1em;  left:0.2em; }
.RougN { background-color:red;  color:white; position:absolute; bottom:0.0em;  left:0.2em; }
.smiley { border-radius:0.9em; padding:0.3em; font-size:2em; }
    
#AttendsavBleu, #AttenddevBleu, #AttendsavRoug, #AttenddevRoug {
    display : none;
}

div {
    xxxborder : 1px solid black;
}

button, input, select  {
    box-shadow    : 1px 2px 2px 1px grey;    
    border-radius : 0.2em;
}

.playId {
    border-radius    : 0.2em;
    box-shadow       : 1px 2px 2px 1px grey; 
}

.ButtonValide {
    font-size        : 1.3em;
    background-color : #DFE;
}

.SpanDevine {
    font-style       : italic;
    font-weight      : bold;
    font-size        : 1.3em;
    background-color : #DFE;
    padding          : 0.1em 0.2em 0.1em 0.2em;
    border-radius    : 0.2em;
    box-shadow       : 1px 2px épx 1px grey;    
}

.SpanBleu {
    background-color : #ADE;
    padding          : 0.1em 0.5em 0.1em 0.5em;
    border-radius    : 0.2em;
    box-shadow       : 1px 2px 2px 1px grey;    
}
.SpanRoug {
    background-color : #FAA;
    padding          : 0.1em 0.5em 0.1em 0.5em;
    border-radius    : 0.2em;
    box-shadow       : 1px 2px 2px 1px grey;    
}

#EquipeBleus, #EquipeRouges {
    padding       : 0.3em;
    border        : 1px solid grey;
    box-shadow    : 2px 5px 5px 2px grey;    
    border-radius : 0.3em;
    margin        : 1em 1em 1em 1em;
}

#Bandeau {
}

#TitreSouplex {
    font-size    : 3em;
    font-style   : italic;
    color        : white;
    margin-right : 0.25em;
}

.plus {
    cursor      : pointer;
    margin-left : 0.5em;
    font-weight : bold;
    color       : black;
}

#ButtonJouons {
    cursor           : pointer;
    background-color : #DFE;
    font-size        : 2em;
    margin-top       : 1em;
    margin-left      : 50vw;
    transform        : translate(-50%, 0);
}

#Joueur {
    font-style  : italic;
    font-weight : bold;
    margin-right : 2em;    
}

#QuoiTrouverS, #QuoiTrouverD, #EnCombienS, #EnCombienD {
    background-color : white;
    padding : 0.2em;
    border-radius : 0.2em;
}

#InputQuoiTrouverS, #InputEnCombienS {
    font-size:1.1em;
}


#NouveauJeu {
    display:;
}
#LienNouveauJeu {
    padding          : 0.5em;
    font-family      : monospace;
    border           : 1px solid black;
    background-color : lightgrey;
    display          : inline-block;
}
#SelectJoindreJeu {
//    width:10em;
}
#InfoDuJeuXXX {
    position:absolute;
    left: 1em;
    top : 1em;
}

#JeuExistant {
    //display:none;
}

#Dialogue {
    display     : ;
    position    : fixed;
    bottom      : 0.5em;
    left        : 1em;
}

#DialogueShow {
    background-color : lightgreen;
    font-size        : 1.5em;
    display          : none;
    position         : fixed;
    bottom           : 2em;
    left             : 1em;
}

#BlablaCommun {
    width            : 95vw;
    height           : 15ex;
    overflow         : auto;
    color            : black;
    background-color : #BCC;
    box-shadow       : 2px 5px 5px 2px grey;
    border-radius    : 0.5em;
    padding          : 0.1em;
}
              
#Blabla {
    vertical-align   : middle;
    width            : 75vw;
    height           : 1.3em;;
    overflow         : auto;
    scroll           : 100%;
    box-shadow       : 1px 3px 3px 1px grey;
    border-radius    : 0.5em;
    padding          : 0.1em;
    margin-bottom    : 0.5em;
}
              
#QuiJoueS, #QuiJoueD {
    font-style       : italic;
    padding          : 0.1em;
    border-radius    : 0.18em;
    background-color : #DFD;
}

#QuoiTrouver {
    font-size  : 1.5em;
}

#InputQuoiTrouver {
    margin-top:-0.2em;
}

#EnCombien {
    font-size  : 1.5em;
}

#InputEnCombien {
}
#GestionDesJoueurs {
    text-align  : center;
    width       : 90vw;
    display     : none;
    margin-top  : 1em;
    margin-left : 50vw;
    transform   : translate(-50%, 0);
}

.divGestion_cache {
    display : none;
}

#divGestionActeurBleu, #divGestionActeurRoug {
    display       : inline-block;
    margin        : 0.5em;
    border        : 1px solid grey;
    border-radius : 0.3em;
    box-shadow    : 1px 2px 2px 1px grey;
    padding       : 0.4em;
}
.divGestion {
    display       : inline-block;
    //width       : 15em;
    border        : 1px solid grey;
    box-shadow    : 1px 2px 2px 1px grey;
    border-radius : 0.2em;
    margin-left   : 0.3em;
    margin-right  : 0.3em;
}

#RegleDuJeu {
    position         : relative;
    margin           : 2em;
    padding          : 1em;
    z-index          : 9;
    background-color : #DEE;
    border-radius    : 0.7em;
    overflow         : auto;
    max-width        : 90vw;
    overflow-wrap    : anywhere;
}

body {
    background-color: #CDD;
    background       : url("/packcom/SouviensToi/html/MurRougeSeville.jpg") no-repeat center center fixed;
    background-size  : cover;
}

.DivRoug {
    padding          : 0.5em;
    border           : 1px solid grey;
    background-color : #FAA;
    box-shadow       : 2px 5px 5px 2px grey;
    width            : 25em;
}

.DivBleu {
    padding          : 0.5em;
    border           : 1px solid grey;
    background-color : #ADE;
    box-shadow       : 2px 5px 5px 2px grey;
    width            : 25em;
}

.Membres {
    margin-left:1em;
}

#Dialogue {
    margin-top:0em;
}
#Dialogue h4 {
    margin-top:0em;
}
#Plateaux h2 {
    margin-top:0em;
}
#PlateauSavant {
    font-weight : bold;
    margin-left : 50vw;
    transform   : translateX(-50%);
}
#PlateauDevins {
    margin-left : 50vw;
    transform   : translateX(-50%);
}

#ShowGrogBleus {
    margin           : 1em;
    padding          : 0.5em;
    background-color : lightblue;
    box-shadow       : 2px 5px 5px 2px grey;
}
#ShowGrogRouges {
    margin           : 1em;
    padding          : 0.5em;
    background-color : #FAA;
    box-shadow       : 2px 5px 5px 2px grey;
}

.bi {
    font-weight : bold;
    font-style  : italic;
}

table {
    margin-top  : 1em;
    margin-left : 50vw;
    transform   : translate(-50%, 0);
    font-size   : 1em;
    max-width   : 90vw;
    width       : 50em;
    height      : 20em;
    border-spacing : 0.5em;
}

table td {
    position         : relative; 
    background-color : #EEE;
    //font-weight      : bold;
    width            : 20%;
    height           : 20%;
    border-radius    : 0.5em;
    border           : 3px outset white;
    box-shadow       : 1px 3px 3px 1px grey;
    text-align       : center;
    margin           : 0.5em;
}

#BatonDeParole {
    text-align  : center;
    font-weight : bold;
    display     : none;
    width       : 80vw;
    margin-left : 50vw;
    transform   : translate(-50%,0);
}

#PauseYaDuNeuf {
    display          : none;
    position         : fixed;
    left             : 50vw;
    top              : 30vh;
    transform        : translate(-50%,-50%);
    z-index          : 999;
    background-color : red;
    color            : white;
    font-size        : 2em;
}