/*** CSS propres au thème SNK ***/

/**********************************************************************/
/** Style du bandeau QCM **********************************************/
/**********************************************************************/
.bandeau1 {
	position: absolute;
	width: 1150px;
	min-height: 50px;
    z-index: 100; /* Les popins du site ont un index de 1000 */
}
.bandeau2 {
	width: 1150px;
	min-height: 50px;
    z-index: 1000;
	position: fixed;
	top: 0;
	box-shadow: 4px 4px 18px #ffffff;
}

/* bouton référence question qcm */ 
.bt-qcm-off {
	cursor: pointer;
	font-weight: bold;
	width: 30px;
	height: 30px;
	color: #333333;
	background-color: #eeeeee;
	border: 1px solid #666666;
	border-radius: 3px;
}
.bt-qcm:hover  { color: blue; background-color: #dddddd; }
.bt-qcm:active { transform: translateX(2px) translateY(2px); }
/* bouton référence question qcm */ 
.bt-qcm-on {
	cursor: pointer;
	font-weight: bold;
	width: 30px;
	height: 30px;
	color: #ffffff;
	background-color: #1B62B6;
	border: 1px solid #666666;
	border-radius: 3px;
}
.bt-qcm:hover  { color: blue; background-color: #dddddd; }
.bt-qcm:active { transform: translateX(2px) translateY(2px); }
/**********************************************************************/
/**********************************************************************/

.c1 {
	text-align: center;
	vertical-align: middle;
}

.hand { cursor: pointer; }
/**********************************************************************/
/** boutons ***********************************************************/
/**********************************************************************/
.btn {
	cursor: pointer;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	min-width: 100px;
	height: 30px;
	text-align: center;
	/*background-color: #eeeeee;
	border: 1px solid #666666;*/
	border-radius: 4px;
}
.btn:active { transform: translateX(2px) translateY(2px); }

.bt1 {
	cursor: pointer;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	min-width: 100px;
	height: 30px;
	text-align: center;
	/*background-color: #eeeeee;
	border: 1px solid #666666;*/
	border-radius: 4px;
	padding-left: 10px;
	padding-right: 10px;
	justify-content: center;
	align-items: center;
}
.btn:active { transform: translateX(2px) translateY(2px); }

/** tailles des boutons ***********************************************/
.b-mini-rnd { width:30px;  height:30px; border-radius:20px; }
.b-mini 	{ width:40px;  height:30px; border-radius:3px; }
.b-big		{ width:170px; height:40px; border-radius:6px; }
.b-long		{ width:170px; height:35px; border-radius:6px; }

.b-min	 		{ cursor:pointer; background-color:#eeeeee; border:1px solid #666666; width:40px;  height:30px; border-radius:3px; }
.b-min:active	{ transform: translateX(2px) translateY(2px); }
/** propriétés des boutons ********************************************/
.b-left				{ text-align: left; padding-left: 10px; }
.b-center			{ text-align: center; }
.b-right			{ text-align: right;  padding-right: 10px; }

.b-rnd				{ border-radius: 20px; }
.rndAll				{ border-radius: 10px; }
.rndAll4			{ border-radius: 5px; }
.rndUp				{ border-radius: 10px 10px 0px 0px; }
.rndBtm 			{ border-radius: 0px 0px 10px 10px; }
.rndLeft 			{ border-radius: 10px 0px 0px 10px; }
.rndRight			{ border-radius: 0px 10px 10px 0px; }
.rndUpLeft 			{ border-radius: 10px 0px 0px 0px;  }
.rndUpRight			{ border-radius: 0px 10px 0px 0px;  }
.rndBtmLeft 		{ border-radius: 0px 0px 0px 10px;  }
.rndBtmRight		{ border-radius: 0px 0px 10px 0px;  }

.circleLeft 		{ border-radius: 20px 0px 0px 20px; }
.circleRight		{ border-radius: 0px 20px 20px 0px; }

/** gestion de l'ombre ************************************************/
.shadow				{ box-shadow: 4px 4px 18px #888888; }
.h-shadow:hover 	{ box-shadow: 4px 4px 18px #888888; }
.h-noshadow:hover 	{ box-shadow: 0px 0px 0px #888888;  }

/**********************************************************************/
/** couleurs boutons et tableaux : texte et fonds *********************/
/**********************************************************************/

/** couleur de bordure ************************************************/
.noborder			{ border: 0px;				 }
.bbleu				{ border: 1px solid #1B62B6; }
.brouge				{ border: 1px solid #EC1C24; }
.borange			{ border: 1px solid #F07B15; }
.bjaune				{ border: 1px solid #FFC000; }
.bvert				{ border: 1px solid green;	 }
.bgris				{ border: 1px solid #999999; }
.bnoir				{ border: 1px solid black;	 }
.bblanc				{ border: 1px solid white;	 }

.h-bbleu:hover		{ border: 1px solid #1B62B6; }
.h-brouge:hover		{ border: 1px solid #EC1C24; }
.h-borange:hover	{ border: 1px solid #F07B15; }
.h-bjaune:hover		{ border: 1px solid #FFC000; }
.h-bvert:hover		{ border: 1px solid green;	 }
.h-bgris:hover		{ border: 1px solid #666666; }
.h-bnoir:hover		{ border: 1px solid black;	 }
.h-bblanc:hover		{ border: 1px solid white;	 }

/** couleur de fond ***************************************************/
.cblue				{ background-color: #1B62B6; }
.cred				{ background-color: #EC1C24; }
.corange			{ background-color: #F07B15; }
.cyellow			{ background-color: #FFC000; }
.cgreen				{ background-color: green;	 }
.cgray				{ background-color: #666666; }
.calert				{ background-color: yellow;  }
.cblack				{ background-color: black;	 }
.cwhite				{ background-color: white;	 }

.cnoir				{ background-color: black;	 }
.cblanc				{ background-color: white;	 }
.crouge				{ background-color: #FFCCFF; }
.corang				{ background-color: #FFCC99; } /* utilisé dans presession_func.php fonction get_mini_grp_color($id_session) */
.cjaune				{ background-color: #FFFBE6; }
.cjaune-light		{ background-color: #FFFFCC; }
.cvert				{ background-color: #CCFFCC; }
.cbleu				{ background-color: #CCECFF; }
.cgris				{ background-color: #D9D9D9; }
.cgris-m			{ background-color: #aaaaaa; }
.cgris-c			{ background-color: #eeeeee; }
.cqcm				{ background-color: #28AADE; }

.h-cblue:hover		{ background-color: #1B62B6; }
.h-cred:hover		{ background-color: #EC1C24; }
.h-corange:hover	{ background-color: #F07B15; }
.h-cyellow:hover	{ background-color: #FFC000; }
.h-cgreen:hover		{ background-color: green;	 }
.h-cgray:hover		{ background-color: #666666; }
.h-calert:hover		{ background-color: yellow;  }
.h-cblack:hover		{ background-color: black;	 }
.h-cwhite:hover		{ background-color: white;	 }

.h-cnoir:hover		{ background-color: black;	 }
.h-cblanc:hover		{ background-color: white;	 }
.h-crouge:hover		{ background-color: #FFCCFF; }
.h-corang:hover		{ background-color: #FFCC99; }
.h-cjaune:hover		{ background-color: #FFFBE6; }
.h-cjaune-light:hover		{ background-color: #FFFFCC; }
.h-cvert:hover		{ background-color: #CCFFCC; }
.h-cbleu:hover		{ background-color: #CCECFF; }
.h-cgris:hover		{ background-color: #D9D9D9; }
.h-cgris-m:hover	{ background-color: #aaaaaa; }

/** couleur de bordure et de fond *************************************/
.cbbleu				{ background-color: #1B62B6; border: 1px solid #1B62B6; }
.cbblue				{ background-color: blue; border: 1px solid #1B62B6;	}
.cbrouge			{ background-color: #EC1C24; border: 1px solid #EC1C24; }
.cborange			{ background-color: #F07B15; border: 1px solid #F07B15; }
.cbjaune			{ background-color: #FFC000; border: 1px solid #FFC000; }
.cbvert				{ background-color: green;   border: 1px solid green;	}
.cbgris				{ background-color: #666666; border: 1px solid #666666; }
.cbnoir				{ background-color: black;   border: 1px solid black; 	}
.cbblanc			{ background-color: white;   border: 1px solid #555555; }

.h-cbbleu:hover		{ background-color: #1B62B6; border: 1px solid #1B62B6; }
.h-cbblue:hover		{ background-color: blue; border: 1px solid #1B62B6;	}
.h-cbrouge:hover	{ background-color: #EC1C24; border: 1px solid #EC1C24; }
.h-cborange:hover	{ background-color: #F07B15; border: 1px solid #F07B15; }
.h-cbjaune:hover	{ background-color: #FFC000; border: 1px solid #FFC000; }
.h-cbvert:hover		{ background-color: green;   border: 1px solid green;	}
.h-cbgris:hover		{ background-color: #666666; border: 1px solid #666666; }
.h-cbnoir:hover		{ background-color: black;   border: 1px solid black; 	}
.h-cbblanc:hover	{ background-color: white;   border: 1px solid #555555; }

/** alignement ********************************************************/
.a-left				{ text-align: left; padding-left: 7px;		}
.a-center			{ text-align: center;						}
.a-right			{ text-align: right; padding-right: 7px;	}

/** polices et tailles ************************************************/
.XXXXL	{ font-family:arial,verdana,helvetica; font-size:70pt; color:#666666; line-height: 1.3;	} /* pour les étqiuettes des jurys */
.cnt	{ font-family:arial,verdana,helvetica; font-size:42pt; color:#666666; line-height: 1.3;	} /* pour le compteur QCM */
.XXXL	{ font-family:arial,verdana,helvetica; font-size:26pt; color:#666666; line-height: 1.3;	}
.XXL	{ font-family:arial,verdana,helvetica; font-size:23pt; color:#666666; line-height: 1.3;	}
.XL		{ font-family:arial,verdana,helvetica; font-size:20pt; color:#666666; line-height: 1.3;	}
.L		{ font-family:arial,verdana,helvetica; font-size:18pt; color:#666666; line-height: 1.3;	}

.XXXM	{ font-family:arial,verdana,helvetica; font-size:16pt; color:#666666; line-height: 1.3;	}
.XXM	{ font-family:arial,verdana,helvetica; font-size:14pt; color:#666666; line-height: 1.3;	}
.XM		{ font-family:arial,verdana,helvetica; font-size:12pt; color:#666666; line-height: 1.3;	}
.M		{ font-family:arial,verdana,helvetica; font-size:11pt; color:#666666; line-height: 1.3;	}

.MS		{ font-family:arial,verdana,helvetica; font-size:10pt; color:#666666; line-height: 1.3;	}
.SM		{ font-family:arial,verdana,helvetica; font-size:10pt; color:#666666; line-height: 1.3;	}

.S		{ font-family:arial,verdana,helvetica; font-size:9pt;  color:#666666; line-height: 1.3;	}
.XS		{ font-family:arial,verdana,helvetica; font-size:8pt;  color:#666666; line-height: 1.3;	}
.XXS	{ font-family:arial,verdana,helvetica; font-size:7pt;  color:#666666; line-height: 1.3;	}

.MYL	{ font-family:arial,verdana,helvetica; font-size:11pt; color:#666666; line-height: 1.3;
		border: 1px solid #aaaaaa; background-color:#FFFBE6; width: 385px; padding: 5px;			}
.MWL	{ font-family:arial,verdana,helvetica; font-size:11pt; color:#666666; line-height: 1.3;
		  border: 1px solid #aaaaaa; background-color:#FFFFFF; width: 385px; padding: 5px;			}

/** style de police ***************************************************/
.B		{ font-weight:bold; }
.I		{ font-style:italic; }

/** couleurs (respecter la place après les polices et les tailles) ****/
.bleu			{ color: #1B62B6; }
.rouge			{ color: #EC1C24; }
.orange			{ color: #F07B15; }
.jaune			{ color: #FFC000; }
.vert			{ color: green;   }
.gris			{ color: #666666; }
.gris-c			{ color: #aaaaaa; }
.noir			{ color: black;	  }
.blanc			{ color: white;	  }
.blue			{ color: blue;	  }
.red			{ color: red;	  }

.tblue			{ color: #C9D7FB; }
.vert2			{ color: #3BB54A; }


.h-bleu:hover	{ color: #1B62B6; }
.h-rouge:hover	{ color: #EC1C24; }
.h-orange:hover	{ color: #F07B15; }
.h-jaune:hover	{ color: #FFC000; }
.h-vert:hover	{ color: green;	  }
.h-gris:hover	{ color: #666666; }
.h-noir:hover	{ color: black;	  }
.h-blanc:hover	{ color: white;	  }
.h-blue:hover	{ color: blue;	  }
.h-red:hover	{ color: red;	  }
/**********************************************************************/

/*** pour aligner les tableaux des jurys ******************************/
.box {
	/*width: 100px;*/
	display: inline-block;
	padding: 15px;
}
/*** pour modifier le cursuer en main sur un lien *********************/
.main { cursor: pointer; }
.main:active { 
	/*transform: translateX(2px) translateY(2px);*/
	box-shadow: 4px 4px 18px #888888;
}


/*
bleu izzidan  : #15366B
rouge izzidan : #E30514

bleu fftda  : #1B62B6
rouge fftda : #EC1C24

bleu foncé : #2F5597
*/


/*
btn-jdg-ligue {
	cursor: pointer;
	width: 150px;
	height: 25px;
	color: #333333;
	background-color: #eeeeee;
	border-top : 1px solid #666666;
	border-right : 1px solid #666666;
	border-left : 1px solid #666666;
	border-bottom : 0px solid #666666;
	border-radius: 3px, 0px, 0px, 3px;
}
.btn-jdg-ligue:hover  { color: blue; background-color: #dddddd; }
*/

/* HTML: <div class="loader"></div> */
.busy123 {
  width: 45px;
  aspect-ratio: .75;
  --c: no-repeat linear-gradient(#000 0 0);
  background: 
    var(--c) 0%   100%,
    var(--c) 50%  100%,
    var(--c) 100% 100%;
  background-size: 20% 65%;
  animation: l5 1s infinite linear;
}
@keyframes l5 {
  20% {background-position: 0% 50% ,50% 100%,100% 100%}
  40% {background-position: 0% 0%  ,50% 50% ,100% 100%}
  60% {background-position: 0% 100%,50% 0%  ,100% 50% }
  80% {background-position: 0% 100%,50% 100%,100% 0%  }
}

/* suvol des lignes du tableau sauf 2 lignes en haut et 1 ligne en bas */
#heyUp tr:hover 			 { background-color: #fcf3cf; }
#heyUp tr:nth-child(1):hover { background-color: transparent; } /* garder la "1ère" ligne du tableau transparente */
#heyUp tr:nth-child(2):hover { background-color: #C9D7FB; } 	/* garder la "2ème" ligne du tableau avec la même couleur */

/* suvol des lignes du tableau sauf 2 lignes en haut et 1 ligne en bas */
#heyUpDown tr:hover 			 { background-color: #fcf3cf; }
#heyUpDown tr:nth-child(1):hover { background-color: transparent; } /* garder la "1ère" ligne du tableau transparente */
#heyUpDown tr:nth-child(2):hover { background-color: #C9D7FB; } 	/* garder la "2ème" ligne du tableau avec la même couleur */
#heyUpDown tr:last-child:hover	 { background-color: transparent; } /* garder la dernière ligne du tableau transparente */