html{
  height:100vh;
  background-color:#fbfafa;
}

body{
  height:100vh;
}


a{
  all:unset;
  cursor:pointer;
}

table{
  
}
tr:nth-child(odd){
  background-color:#eee;
}

tr:last-child{
  background-color:#f8f8f8;
}

td{
  padding: 5px 15px 5px 15px;
}

#listeQuestions{
  padding:20px;
  background:white;
  border-radius:20px;
  box-shadow: rgba(29, 37, 79, 0.48) 0px 0px 16px 0px;
  width:80%;
  margin:auto;
}

#listeQuestions h2{
  text-align:center;
}

#tableQuest{
  width:100%;
}

#tableQuest tr{
  display:flex;  
  height:40px;
  font-size:20px;
}

#tableQuest tr:nth-child(odd){
  background-color:#eee;
}

#tableQuest tr:last-child{
  background-color:#fff;
}

#tableQuest td{
  display:flex;
  flex-grow:0;
  align-content: center;
  align-items: center;
  padding: 5px;
}

#tableQuest td.titreQuestion{
  flex-grow: 1;
}

#tableEvt{
  width:100%;
}

#tableEvt tr{
  display:flex;  
  height:40px;
  font-size:20px;
}

#tableEvt tr:nth-child(odd){
  background-color:#eee;
}

#tableEvt tr:last-child{
  background-color:#fff;
}

#tableEvt td{
  display:flex;
  flex-grow:0;
  align-content: center;
  align-items: center;
  padding: 5px;
}

#tableEvt td.titreEvt{
  flex-grow: 1;
}

#confirmationDelete{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color: #ffffffcc;
  backdrop-filter: blur(10px);
  display:flex;  
}

#confirmationDelete .boite{
  width:50%;
  margin:auto;
  display:flex;
  flex-direction:column;
  background:white;
  box-shadow: rgba(29, 37, 79, 0.48) 0px 0px 16px 0px;
  padding:10px;
  border-radius:10px;
}

#confirmationDelete .buttons{
}

.buttons .btn{
  margin:10px;
}


#contenu{
  position:relative;
  height:100%;
  overflow: auto;
  /*! padding: 20px; */
}

#questionEdit{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background-color:white;
  padding:30px;
  border-radius:10px;
  width:50%;
  box-shadow: rgba(29, 37, 79, 0.48) 0px 0px 16px 0px;
}

#questionEdit h1{
  font-size:inherit;
  margin-top:0px;
}

.btn{
  cursor:pointer;
  padding:8px;
  background-image:linear-gradient(rgb(45, 163, 255) 0%, rgb(20, 106, 255) 100%);
  display: inline-block;
  border-radius:10px;
  color:white;
  font-weight:900;
  font-size:16px;
}

.btn:hover{
  background-image:linear-gradient(rgb(45, 163, 255) 0%, rgb(0, 73, 200) 100%)
}

.btn.warning{
  background-image:linear-gradient(rgb(255, 163, 45) 0%, rgb(255, 106, 20) 100%);
}
.btn.warning:hover{
  background-image:linear-gradient(rgb(255, 163, 45) 0%, rgb(200, 73, 0) 100%)
}

.buttons{
  display:inline-block;
  width:100%;
 
  text-align: center;
}

i.fa-solid{
  margin-right:5px;
}

#enonceEditLabel{
  display:block;
  margin-top:10px;
  margin-bottom:2px;
  font-size: smaller;
}



textarea{
  display:block;
  width:100%;
  margin-top:0px;
}

#questionAffichee{
  position:absolute;
  background-color:#fbfafa;
  width:100%;
  /*! height:100%; */
  top:0px;
  left:0px;
  Padding:10px;
  text-align:center;
  font-size:20px;
  box-sizing: border-box;
  margin:0px;
}

#quitterQuestionAffichee{
  position:fixed;
  top:10px;
  right:10px;
}



#titreQuestion{
  font-size:inherit;
  text-align:left;
  margin-top:0px;
  font-size:16px;
  color:#ccc;
  position:fixed;
  bottom:10px;
  left:10px;
  width:70%;
  
}

#connexion_reponses{
  width:100%;
  box-sizing: border-box;
  display: flex;
  align-items: end;
}

#listeReponses{ 
  display:flex;
  flex-direction: column;
  flex-grow:1;
  list-style:none;
  width:100%;
  box-sizing:border-box;
  padding:20px;
}

#listeReponses li{
  display:flex;
  text-align:left;
  align-items: center;
  margin-top:30px;
  padding:30px 20px;
  background:white;
  height:40px;
  border-radius:20px;
  font-size:25px;
  box-shadow: rgba(29, 37, 79, 0.48) 0px 0px 16px 0px;
  position:relative;  

}

#listeReponses .checked{
  background-color:#146aff;
  color:white;
}

#listeReponses .checked .repNum{
  background-color:#fff;
  color:#146aff;
}

#listeReponses li:hover{
  transform:scale(1.01);
}


#listeReponses .repNum{
  display:flex;
  align-items:center;
  justify-content: center;
  margin-right:20px;
  padding:10px 10px;
  width:40px;
  height:100%;
  box-sizing: border-box;
  background-color:#146aff;
  color:white;
  border-radius: 10px 0px 0px 10px;
  border-radius:50%;
}

#listeReponses .repTexte{
  display:flex;
  align-items:center;
  line-height: 100%;
  height:100%;
  margin:0px;
  padding:0px;
  font-size:xx-large;
}

#listeReponsesAdmin{ 
  display:flex;
  flex-direction: column;
  flex-grow:0.8;
  list-style:none;
  width:60vw;
  box-sizing: border-box;
  padding:0px;
}


#listeReponsesAdmin li{
  display:flex;
  text-align:left;
  align-items: center;
  margin-top:10px;
  padding:10px 10px;
  background:white;
  height:40px;
  border-radius:20px;
  font-size:25px;
  box-shadow: rgba(29, 37, 79, 0.48) 0px 0px 16px 0px;
  position:relative;  
}


#listeReponsesAdmin .repNum{
  display:flex;
  align-items:center;
  justify-content: center;
  margin-right:20px;
  padding:10px 10px;
  width:40px;
  height:100%;
  box-sizing: border-box;
  background-color:#146aff;
  color:white;
  border-radius: 10px 0px 0px 10px;
  border-radius:50%;
}

.repNum p{
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  height:30px;
}

#listeReponsesAdmin .reponse{
  display: flex;
  flex-grow:1;
  align-items: center;
}

.nbVotes{
  display:flex;
  justify-content: center;
  right:10px;
  height:100%;
  top:10%;
  border-radius: 0px 10px 10px 0px;
  box-sizing: border-box;
  background-color:#146aff;
  color:white;
  padding:0px 10px;
  flex-grow: 0;
  width: 80px;
}

.nbVotes i{
  display:flex;
  
  align-items: center;
  height: 80%;
}

.nbVotes p{
  box-sizing: border-box;
  margin:0px;
  margin-right:5px;
  padding:0px;
  display: flex;
  height: 100%;
  width:30px;
  text-align: right;
  align-items: center;
}

.reponse{
  display:flex;
  height:100%;
  z-index:1;
}

#connexion{
  display: flex;
  flex-direction: column;
  flex-grow: 0.2;
  flex-shrink: 1;
}

#qrCode{
  display:flex;
  padding:5px;
  box-shadow: rgba(29, 37, 79, 0.48) 0px 0px 5px 0px;
  width: 200px;
}

#url{
  width:200px;
  font-size:20px;
  margin-top:30px;
  margin-left: 0px;
  text-align: center;
  font-weight: 600;
  color: gray;
}

#noquestion{
  display:flex;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:50%;
  height:200px;
  background-color:#146aff;
  border-radius:20px;
  box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 6px;
  color:white;
  font-size:34px;
  padding:20px;
}

#noquestion i{
  position:absolute;
  width:100px;
  height:100px;
  display:flex;
  font-size:36px;
  left:50%;
  top:-40px;
  transform:translate(-50%);
  background-color:#146aff;
  border-radius:50%;
}

#noquestion i:before{
  position:relative;
  left:35px; 
  top:20px;
}

#noquestion p{
  width:100%;
  display:flex;
  align-items:center;
  justify-content: center;
  font-weight:700;
  margin-top:40px;
}

#titreEvenement{
  display: none;
}





#btnEnvoyerReponse{
  margin:auto;
  display:flex;
  align-items:center;
  justify-content: center;
  font-size:30px;
  margin-top:30px;
  max-width:500px;
  padding: 30px;
}

#message{
  display:flex;
  align-items:center;
  position:fixed;
  top:10px; 
  right:-330px;
  background : white;
  padding:10px;
  width:300px;
  height:100px;
  border-radius:10px;
  box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 6px;
  font-size:30px;
}

#message i{
  display:flex;
  font-size:60px;
  margin-right:30px;
}

#message .fa-circle-check{
  color:green;
}

#message .fa-circle-exclamation{
  color:red;
}

#message p{
  display: flex;
}






.equation{
  width:100%;
}



#numReponses{
  display:flex;
  flex-direction: column;
  width:10%;
  background:white;
  border-radius:20px;
  margin-bottom:30px;
  margin-top:20px;
  box-shadow: rgba(29, 37, 79, 0.48) 0px 0px 5px 0px;
  background-color: #146aff;
  color:white;
}

#numReponses:active{
  transform:scale(1.03);
}

#numReponses:hover{
  background-color: #1660e1;
}

#numReponses i{
  display:flex;
  flex-direction: column;
  font-size:40px;
  margin:20px;
  box-sizing: border-box;
}

#nbReponses{
  font-size:54px;
  display:flex;
  align-content: center;
  align-items: center;
  margin:0px;
  
}

#nbReponses p{
  text-align:center;
  width:100%;
  margin: 0px;
}


#enonce_mumReponses{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}


#enonceQuestionClient{
  width:calc(100% - 40px);
  box-sizing:border-box;
  margin: 20px;
  padding:20px;
  font-size: xx-large;
}


.enonceQuestion{
  display:flex;
  flex-wrap:nowrap;
  align-items: stretch;
  font-size:20px;
  box-sizing: border-box;
  width: 85%;
  background:white;
  border-radius:20px;
  /*! margin:auto; */
  margin-bottom:30px;
  margin-top:20px;
  box-shadow: rgba(29, 37, 79, 0.48) 0px 0px 5px 0px;
  padding-left:20px;
  padding: 10px;
}

.enonceQuestion div.ligne{
  display:flex;
  flex-wrap:nowrap;
  flex-direction:row;
  align-content: center;
  align-items: center;
  flex-grow:1;
}

.enonceQuestion div.column{
  margin:10px;
  box-sizing: border-box;
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  flex-grow:1;
}
.enonceQuestion p{
  margin:10px;
}

.bar{
  position:absolute;
  box-sizing: border-box;
  left:60px;
  width:calc( 100% - 180px);
  height: 80%;
  background-color: #e4e4ff;
  z-index:0;
  border-radius:10px;
  transform-origin:left;
  visibility:hidden;
}

.pourcentage{
  position: absolute;
  right: 5px;
  transform-origin:right;
  color:#146aff;
  top:calc( 50% - 35px );
}

#retourListeEvt{
  font-size:x-large;
  margin:20px;
  display: block;
}