/* CSS Document */

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap");
/*:root {
 /* 
 --body-bg-color: #ffffff;
  --border-color: #e5e4e9;
  --theme-bg-color: #fff;
  --body-color: #1b1f31;
  --main-color: #7a7e9d;
  --main-light-color: #7a7e9d;
  --title-color: #1b1f31;
  --body-font: "Jost", sans-serif;
  --button-bg-color: #eaeefc;
  --button-color: #59d8a7;
  --unselected-mail: #f8f8fb;
  --calendar-border-color: #cbcfe0;
  --main-container-bg: #f0f0f7;
  --main-colored:#7fddb9
}*/

* {
  outline: none;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--body-font);
  background-color: var(--body-bg-color);
  color: var(--body-color);
  font-size: 16px;
   -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  
}
button {font-family: var(--body-font);}
a {text-decoration:none}

.bloc100{ width: 100%;   padding:30px; margin:auto; max-width:1000px}
hr {margin:25px 0; width:70px; line-height:2px; border:0; border-bottom:1px solid #000}
hr.center {margin:25px auto; }
hr.full {margin:25px auto; width:100%; line-height:2px; border:0; border-bottom:1px solid var(--main-color); opacity:0.5}



#html5-qrcode-button-camera-start {margin:30px auto}
.hide {opacity:0 }
.show {opacity:1 !important}


/*page accueil web*/

#welcome {background:}
p { font-size:15px; line-height:20px; margin:0px auto 20px auto; display:block; max-width:100%; letter-spacing:0.2px}

#install-btn, .install-btn { 
	background: var(--main-color);
	color: #fff;
	font-size: 15px;
	line-height: 30px;
	margin: 0 0 15px 0;
	padding: 10px 20px;
	border: 1px solid var(--main-color);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-family: 'poppinsmedium';
	cursor:pointer
	}

.copyright { 
display: block;
    text-align: center;
    font-size: 12px;
    color: var(--main-color);
    margin-top: 20px;
    position: fixed;
    bottom: 15px;
   width: 100%;
   max-width:600px;
   /*  left: 0; */
    margin-left: -45px;
    height: 70px;
    background: #fff;
}

.copyright2 { 
display: block;
    text-align: center;
    font-size: 12px;
    color: var(--main-color);
    margin-top: 40px;
   /*  left: 0; */
}


.aides {
  font-size: 12px;
    color: var(--body-color);	
}
.aides a,.aides a:visited {color:var(--body-color); display:inline-block; padding-bottom:2px; border-bottom:1px dashed var(--body-color)}

.logoMask {line-height:36px; width:36px; background:var(--main-color); display:block; margin:8px auto}
.logoMask img {display:block; width:36px; height:36px}

.tageEventeName {display:inline-block; clear:both; padding:12px; color:#fff; background:var(--main-color); text-align:center; margin:20px auto }

.user-photo {display: block;  max-height: 170px;    margin: 0 auto 0 auto;}


/* PAGE HOME*/
.blocUser { padding-left:74px; position:relative}
.top {background:var(--main-color); height:20px;}
.user-photo-small {display: block; position: absolute; left: 0; top: -4px;
    width: 60px;    height: 60px;
    padding: 1px;
    border: 1px solid #fafafa;}
	
.blocUser h1 {text-align:left; margin-top:35px; font-size:26px; line-height:30px}
.blocUser h1  small {font-size:15px}
.blocUser a.logOut img {position: absolute; right: -10px; top: 0; height: 30px;}


h1, h2 {font-family:"poppinsmedium"}
 h3 {font-family:"poppinsregular";font-family: "poppinsregular";
    font-size: 18px;    text-transform: uppercase;    letter-spacing: 0.5px;}


/*iframe */
iframe {border:0; display: none}
iframe.fiche { 	display:block;position:absolute;top:0; left:0;	width:100%; height:90%;max-width:1000px;	z-index:100; 	}
iframe.ficheOFF { 	display:none;position:absolute;top:0; left:0;	width:0%; height:0%;max-width:0px;z-index:0; }
video {max-width:100%}

#qr-reader {border: none !important}
#html5-qrcode-button-camera-permission {margin: 15px auto 50px auto; padding: 5px 15px; }

#reduire { width:70px; height:70px; text-align:center; line-height:70px; color:#fff;
position:fixed; top:20px; right:20px; display:block; z-index:200; background:#000; cursor:pointer;
font-size:20px; font-weight:bold}

.show { display:block !important}
.hide { display:none !important}


#welcome {background: #000;}
#welcome .bloc100 {background: #fff;    max-width: 600px;    padding: 15px  25px;    min-height: 100%;}


/*MENU*/
/*.menu.five a { width:25% !important;    vertical-align: middle;}
.menu {position:fixed; z-index:200; bottom:0; width:100%; left:0; background:#fff; border-top:0px solid #fff;
 box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);}
.menu a {display:inline-block; width:33.3%; vertical-align:top; padding:30px 0; margin:0;    vertical-align: middle;text-align:center; font-weight:500; text-decoration:none; color:var(--body-color);}
.menu a img { height:28px; transition: transform 0.2s ease; opacity:1}
.menu a.active img { transform: scale(1.05);height:40px;}*/

/*MENU*/
.menu {position:sticky; z-index:300; bottom:0; width:100%; left:0; background:#fff; border-top:0px solid #fff;
 box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);}
.menu.five a { width:25% !important;    vertical-align: middle;}
.menu a {display:inline-block; width:33.3%; vertical-align:top; padding:30px 0; margin:0;    vertical-align: middle;text-align:center; font-weight:500; text-decoration:none; color:var(--body-color);}
.menu a img { height:28px; transition: transform 0.2s ease; opacity:1}
.menu a.active img { transform: scale(1.05);height:40px;}



  
/*LIENS ET BOUTONS*/

.linkIconBig, .linkIconBig:visited {display:block; margin:20px auto 0 auto; color:var(--body-color)}
.linkIconBig img {float:left; height:30px; vertical-align:middle;margin: 2px 6px 0 0;}

/*TABLEAU*/
table.clean { border-collapse:collapse !important; max-width:100%; width:100%;  table-layout: fixed; font-weight:500; max-height:200px; overflow:scroll}
table.clean *{ border-collapse:collapse}
table.clean td { border:1px solid #1b1f31; padding:6px 6px; font-size:15px; line-height:15px;}
table.clean tr.first {background:#fff; }
table.clean tr.first  td { font-size:11px; text-transform:uppercase; line-height:11px;}	
table.clean td small { font-size:13px}
table.clean .tag {float:right; background:#1b1f31; text-align:center; font-size:13px; line-height:12px; color:#fff; padding:3px;}
table.clean tr:nth-child(odd) {  background-color: #f1f2fa;  /* Gris clair pour lignes impaires */}
table.clean tr:nth-child(even) {    background-color: #e4e6f5;  /* Blanc pour lignes paires */}



.btn { display:block; background:var(--body-color); color:#fff; font-weight:500; font-size:20px ;margin:0 auto 15px auto; padding:15px 30px; border:1px solid var(--body-color)}
.logOut {font-size:11px; line-height:11px; font-weight:500; color:<%=eventColor%>; text-transform:uppercase;
padding:4px; border:1px solid <%=eventColor%>; display:inline-block; margin-top:5px; text-decoration:none; letter-spacing:0.5px }



/*BARRE DE STATS*/
  .progress {
  margin-top: 5px;
  margin-bottom:15px;
  border-radius: 8px;
  background-color: #e7e7ef;
  height: 16px;
  overflow: hidden;
  display:block;
   clear:both
}
.progress-bar {
  background-color: var(--button-color);
  border-radius: 8px;
  height: 100%;
  animation: progressAnimation 3s;
  transition: 0.2s linear both;
  transition-property: width, background-color;
}
.progress-status {
  margin-top: 20px;
  display:block;
  text-align: left;
    font-family: "poppinsmedium";
    font-size: 19px;
	    line-height: 20px;
    text-transform: uppercase;
    letter-spacing:0;
 clear:both
}

.progress-status big {
font-family: "poppinsbold";
    font-size: 30px;
    color: var(--main-color);
    line-height: 20px;
}

@keyframes progressAnimation {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

	  


.iconInline {display: inline-block;
    vertical-align: middle;
    height: 16px;
    margin-right: 5px;
    margin-left: 0;
    vertical-align: middle;}

.blocsCont {text-align:left}

.box,.box:visited { text-align:center; text-transform:uppercase; font-family: "poppinsmedium"; opacity:1; font-size:13px; 
border-radius:8px; background:#f6f6f9; padding:8px 8px ; display:inline-block; color:var(--body-color) }

.big-button {
    background: var(--main-color);
    color: #fff;
    font-size: 24px;
    line-height: 30px;
    margin: 0 0 15px 0;
    padding: 15px 25px;
    border: 1px solid var(--main-color);
    text-transform: lowercase;
    letter-spacing: -0.03em;
    font-family: 'poppinsmedium';
    border-radius: 18px;
    width: 400px;
    display: inline-block;
    max-width: 90%;
}


.big-button img { display: inline-block;
    height: 25px;
    /* float: right; */
    vertical-align: middle;
    margin: -2px -5px 0 25px;}

.stats {padding:20px 20px; background:#f6f6f9; border-radius:12px; margin-top:25px;}
.stats  h2 {   margin: 0 0 14px 0;
    padding: 0;
    font-size: 18px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;}
	
.bt {margin-top:35px}