/*
**
LE GLOBAL
**
.*/

body
{
	font-family: 'Montserrat', sans-serif;
	font-size:13px;
	color:#000000;
	width:100%;
	height:auto;
	text-align:center;
	background-image:url('https://coquille.qif1.com/KESTUFOOT_2025-Prono-v7/Dev/trunk/Images/fr/15536667_5581045.webp');
	//background-color:#004f9f;
	background-color:#ffffff;
	background-repeat:no-repeat;
	background-position:top center;
	background-size:cover;

}
#popin_body{
	background-image:none;
	margin:auto;
	max-width: 100%;
}
a
{
	color:#ffaa00;
	text-decoration:none;
	font-weight:bold;
}
a:hover
{
	color:#ffaa00;
	text-decoration:underline;
}


h2{
	font-size:14px;
	font-weight:bold;
	/*text-transform:uppercase;*/
}

/*---BOOTSTRAP HACK ----*/
.col-sm-6{
	padding-left:0px;
	padding-right:0px;
}
.col-sm-12{
	padding:0px !important;
}
/*-------FORM------------------*/
.form-control{
	border-radius:37px;
	/*border:0;	*/
	color:;
	/*background-color: #a355a6;*/
}
 

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    ;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    ;
   opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    ;
   opacity:  1;
}
.form-control:-ms-input-placeholder{
   color:    ;
   opacity:  1;
}



/*---BOOTSTRAP HACK ----*/

#header{
	max-width:950px;
	margin:auto;
}

#menu{
	max-width:950px;
	line-height:40px;
	background-image:url('https://coquille.qif1.com/KESTUFOOT_2025-Prono-v7/Dev/trunk/Images/fr/MENU_FOND.webp');
	margin:auto;
	text-align:center;
	border:0;
	border-radius:0;
}
/*
#menu div{
	display:inline-block;
	padding:10px 30px;
	
}
*/
#menu li a{
	font-size:20px;
	color:#ffffff;
	font-weight:bold;
	text-transform: uppercase;
	padding-left:5px;
	padding-right:40px;
}
#menu li a.active{
	color:#FFFFFF;
}
#page{

	max-width:950px;
	min-height:400px;
	margin:14px auto 0 auto;
	overflow:auto;
	padding:0px !important;
	
}

#popin{
	width: 950px;
	max-width: 100%;	
	
	min-height:400px;
	height: 100%;
	/*max-height: calc(100vh - 40px);*/


	margin:auto;
	padding:20px auto;
	overflow: auto;


}

.grille { width:100%; padding-bottom:20px;}

.grille-titre{
    color: #FFF;
    background-color: #de3419;
    padding: 5px;
	margin-left:0;
	margin-right:0;
    
    font-weight: bold;	
}
.grille-line {
	padding: 1rem;
	margin-left:0;
	margin-right:0;
}
.line-color1 {
	background-color: #F5F5F5;
}
.line-color2 {
	background-color: #FFF;
}

.score-correct {background-color: #99CC00; color: #000;}
.score-perfect {background-color: #0F0; color: #000;}
.score-loose {background-color: #F00; color: #fff;}
.score-barre {text-decoration:line-through;}

.col-date,
.col-tendance  {
	margin:5px 0;
	line-height: 30px;
}
.col-tendance {

}


.container{
	padding:0 !important;
	margin:15px auto !important;
	width:auto;
}
@media (max-width: 767px) { 
	body{
		padding: 5px !important;
	}
}

.container>.navbar-header{
	margin-left: auto !important;
	margin-right: auto !important;
}
/*
**
LES PAGES
**
*/

/* QUIZ */



#quiz-question-bloc{
	margin-top:20px;
	display: block;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	vertical-align: top;
	text-align: left;	
	
}

#quiz-compteur{	
	font-size: 22px;
	text-align: center;
	font-weight: bold;
	color:#000;
	text-transform:uppercase;
	display:none;
}

#quiz-question{
	width:80%;
	margin:auto;
	text-align: left;
	font-size: 22px;
	line-height: 36px;
	min-height:30px;
	color:#575756;
	text-align:center;
	

}
#quiz-reponses{
	margin-top: 20px;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	text-align: center;

}
/*------------------------------------*/
.quiz-reponse{
	
	display:block;
	width:80%;
	vertical-align:top;
	background-color: #ffaa00;
	min-height:50px;
	line-height:40px;	
	margin-bottom:15px;
	text-align: center;	
	padding:0px 10px;
	font-size: 22px;
	cursor: pointer;
	border:2px solid #ffaa00;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	font-weight:bold;
	color:#fff;
}
.quiz-reponse span{
	display:inline-block;
	line-height:24px;
	vertical-align:middle;
}
.quiz-reponse:hover {
	border:2px solid #000;
	color:#000;
	background-color: #fff;
}

/*------------------------------------*/
.quiz-reponse-photo{
	text-align: center;
	font-size: 18px;
	cursor: pointer;
	display: inline-block;
	vertical-align: top;
	width:32%;
}
.quiz-reponse-photo div{
	min-height: 50px;
}

/*------------------------------------*/

#quiz-indice{
	display: none;
	text-align: center;
	color:#575756;
	font-size: 15px;
	font-weight: bold;
}
#quiz-btn{
	width:100%;
	text-align: center;
	overflow:auto;
	margin-top:20px ;
	margin-bottom:30px ;
}
#quiz-btn-valide{
	
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}




#page #page-colonne-1{
	float:left;
	width:460px;
	height:100%;
}
#page #page-colonne-2{
	float:left;
	width:460px;
	margin-left:10px;
	height:100%;

}


.bloc{
	width:100%; 

	height:auto;
	background-image:url('https://coquille.qif1.com/KESTUFOOT_2025-Prono-v7/Dev/trunk/Images/fr/BLOC_FOND.png');
	margin-bottom:14px;
	overflow:auto;
}
@media (min-width: 768px) {

	.col-padding-left {
		padding-left:7px;
	}
	.col-padding-right {
		padding-right:7px;
	}
}
.bloc-titre{
	width:100%;
	height:40px;
	line-height:40px;
	padding-left:20px;
	background-image:url('https://coquille.qif1.com/KESTUFOOT_2025-Prono-v7/Dev/trunk/Images/fr/BLOC_TITRE_FOND.webp');
	color:#FFF;
	text-align:left;
	text-transform:uppercase;
	font-weight:normal;
	font-size:14px;
}
.bloc-contenu{
	text-align:left;
	overflow:auto;
	padding:0;
}
.bloc-contenu label{
	font-weight:normal;
}
/* bloc sur 1 colonne */
#page #page-colonne-full .bloc-contenu{
	padding:20px;
}
/* bloc sur 2 colonnes */
#page #page-colonne-1 .bloc-contenu,#page #page-colonne-2 .bloc-contenu{
	padding:5px;
}
/* bloc sur 1 colonne */
#popin .bloc-contenu{
	padding:20px;
}


/*---- BLOC MONCOMPTE ----*/
#bloc_compte {
	font-size:14px;
}
#bloc_compte #icone_profil{
	float:right;
	/*
	margin-top:-20px;
	z-index:50;
	position:relative;
	*/
}
#bloc_compte #icone_profil a{
	display:inline-block;
	width:25px;
	text-align:center;
}
#bloc_compte #profile{
	text-align: center;
	font-size: 18px;
}
#bloc_compte #score_classement{
	overflow:hidden;
}
#bloc_compte #score,#bloc_compte #classement{
	float:left;
	width:50%;
	text-align: center;
}
#bloc_compte #score_classement .webfont{
	font-size:45px;
	font-weight: bold;
}


/****----links-----*/
.popin_classement,.popin_tendance{
	display:block;
	//margin-top:5px;
	/*text-align:right;*/
	/*border:1px solid #000;*/
	width:auto;
}
.popin_classement_inline{
	display:inline !important;
	margin-top:auto !important;
	text-align:left  !important;
	width:auto  !important;
}



/**----POPIN PRONO ----*/
#popin_prono{
	/*min-height:750px;*/
}
#popin_prono #message{
	margin:150px;
	text-align: center;
	font-weight: bold;
}
#popin_prono #titre_container{
	font-weight: bold;
	font-size: 16px;
	text-align: center;
}
#popin_prono #date_container{
	font-style: 14px;
	text-align: center;
}

#popin_prono #grille{
	text-align: center;
	margin-top:15px;
	margin-bottom:80px;
}

.prono-input{
	text-align: center;
}

input.prono-input:read-only{
	background-color:#dddddd;
	border:0;
	color:#999999;
}

input.prono-input:read-only:focus{
	outline:none;
}

/**----POPIN Resultat ----*/
#popin_resultat{
	/*min-height:750px;*/
}
#popin_resultat #titre_container{
	font-weight: bold;
	font-size: 16px;
	text-align: center;
}
#popin_resultat #date_container{
	font-style: 14px;
	text-align: center;
	margin-bottom:10px;
}
#popin_resultat hr{
	border:0;
	border-bottom:1px solid #999;
	width:100%;
	margin:20px 0;
}
#popin_resultat #regles{
	margin-top:20px;
	font-style: 12px;
	text-align: left;
}

/**----POPIN Classement ----*/
#popin_resultat{
	/*min-height:750px;*/
}
/**----POPIN Cadeaux ----*/
#popin_cadeaux{
	/*min-height:620px;*/
	max-width:945px;
	width: 100%;
}
/**----POPIN Cadeaux ----*/
#popin_motdepasse{
	/*min-height:280px;*/
	max-width:550px;
	width: 100%;
}
/**----POPIN contact ----*/
#popin_contact{
	/*min-height:450px;*/
	max-width:650px;
	width: 100%;
}

#popin_tendance{
	/*min-height:400px;*/
	max-width:650px;
	width: 100%;
}

/*------PAGE invitation ------*/
#bloc-invitation,#bloc-invitation-relance{
	text-align:left;
	min-height:400px;
}

#bloc-invitation label{
	width:34%;
}
#bloc-invitation input[type="text"],#bloc-invitation textarea{
	width:64%;
}

/*
TABLEAUX
*/
table.tendance{
	font-size:10px;
	color:;
	border:0px;
	border-collapse:collapse;
}
table.tendance td{
	line-height:28px;
	border:1px solid #FFF;
}
table.tendance td.tendance-win{
	background-color:#b2f0c8;
	color:#333;
}
table.tendance td.tendance-loose{
	background-color:#ff8b79;
	color:#FFF;
}
table.tendance td.tendance-equal{
	background-color:#e0e0e0;
	color:#333;
}

table.tableau{
	font-size:13px;
	color:#000000;
	border:0px;
	border-collapse:collapse;
	width:100%;
}
table.tableau td{
	/*border:1px solid #999;*/
	padding:0 5px;
	line-height:35px;
}
/*
table.classement{
	font-size:10px;
}
*/
table.tableau th,table.tableauBet th{
	color:#FFFFFF;
	background-color:#ffaa00;
	padding:5px;
}
table .ligne1{
	color:#000000;
	background-color:#f8f9fb;
}
table .ligne2{
	color:#000000;
	background-color:#e9eef2;
}
table .ligne3{
	color:#000000;
	background-color:#b2f0c8;
	font-weight:bold;
}
table.tableau img{
	vertical-align: middle;
}

table.tableauBet{
	text-align:center;
	width:700px;
	margin-left:auto;
	margin-right:auto;
	

}
table.tableau-bet input[type="text"]{
	width:10px;
}
/*
**
LES CLASSES DE CHAMPS DE FORMULAIRE
**
*/
/*
.form-div{
	margin-bottom:5px;
	width:100%;
}
.form-div-checkbox{
	margin-left:30%;
	text-align:left;
}
.form-div-checkbox label{
	width:95%;
	text-align:left;
	vertical-align:top;
}
.form-div-checkbox input[type="radio"], .form-div-checkbox input[type="checkbox"]{
	display:inline-block;
	width:15px;
	vertical-align:top;
}

label{
	display:inline-block;
	width:29%;
	font-size:13px;
	text-align:right;
	padding-right:10px;
}
input[type="text"],input[type="password"],select{
	display:inline-block;
	width:69%;
	border:1px solid #999;
	font-size:13px;
	height:21px;
	line-height:21px;
}

label.radio{
	width:100px;
	text-align:left;	
}

label.textarea{
	vertical-align: top;
}
textarea{
	display:inline-block;
	width:69%;
	height:100px;
	font-family: inherit;
}
*/
input[type="submit"],a.btn-jeu{
	
	display:inline-block;
	border:1px solid #ffaa00;
	background-color:#ffaa00;
	color:#FFFFFF;
	padding:0px 12px;
	height:37px;
	line-height:37px;
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
		-webkit-border-radius: 37px;
	-moz-border-radius: 37px;
	border-radius: 37px;
		cursor:pointer;
	cursor:hand;
}
.btn-jeu:hover{
	text-decoration : none;
	color:#FFFFFF;
}

.linkDisabled{
	display:inline-block;
	border:1px solid #CCCCCC;
	background-color:#CCCCCC;
	color:#FFFFFF;
	padding:0px 12px;
	height:37px;
	line-height:37px;
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
		-webkit-border-radius: 37px;
	-moz-border-radius: 37px;
	border-radius: 37px;
		cursor:pointer;
}
.linkDisabled:hover{
	text-decoration:none;
	color:#FFFFFF;
}

/*
**
FOOTER
**
*/
#footer
{
	margin-top:5px;
	width:975px;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	color:#555;
	text-transform:uppercase;
	font-size:12px;
	text-align:center;	
}
#footer a
{
	color:#555;
}








/* 
**
LES COULEURS DE POLICE
**
 */
h1{
	color:#0e3170;
	font-size:20px;
	margin-bottom:5px;
	margin-top:0px;
	text-transform:uppercase;
}
 
.orange{
	color:#df5915;
}
.orange_fonce{
	color:#D74A00;
}

.jaune{
	color:#F2CD00;
}
.jaune_orange{
	color:#F1A900;
}
.vert{
	color:#A0D643;
}
.bleu{
	color:#579dae;
}
.bleu_clair{
	color:#0a7dc7;
}
.gris{
	color:#8f8f8f;
}
.rouge{
	color:#E83133;
}
.blanc{
	color:#FFFFFF;
}
.blanc_casse{
	color:#E8DA8A;
}

.kaki{
	color:#3b2c01;
}
.noir{
	color:#000000;
}
violet{
	color:#1e090e;
}

/* 
**
LES TAILLES DE TEXTE  
**
*/
.text7{
	font-size:7px;
}
.text8{
	font-size:8px;
}
.text9{
	font-size:9px;
}
.text10{
	font-size:10px;
}
.text11{
	font-size:11px;
}
.text12{
	font-size:12px;
}
.text13{
	font-size:13px;
}
.text14{
	font-size:14px;
}
.text15{
	font-size:15px;
}
.text16{
	font-size:16px;
}
.text17{
	font-size:17px;
}
.text18{
	font-size:18px;
}
.text19{
	font-size:19px;
}
.text20{
	font-size:20px;
}
.text21{
	font-size:21px;
}
.text22{
	font-size:22px;
}
.text23{
	font-size:23px;
}
.text24{
	font-size:24px;
}
.text25{
	font-size:25px;
}
.text26{
	font-size:26px;
}
.text27{
	font-size:27px;
}
.text28{
	font-size:28px;
}
.text29{
	font-size:29px;
}
.text30{
	font-size:30px;
}
.text31{
	font-size:31px;
}
.text32{
	font-size:32px;
}
.text33{
	font-size:33px;
}

/* 
**
TAILLES TEXTES GRAS
**
 */
.text9bold{
	font-size:9px;
	font-weight:bold;
}
.text10bold{
	font-size:10px;
	font-weight:bold;
}
.text11bold{
	font-size:11px;
	font-weight:bold;
}
.text12bold{
	font-size:12px;
	font-weight:bold;
}
.text13bold{
	font-size:13px;
	font-weight:bold;
}
.text14bold{
	font-size:14px;
	font-weight:bold;
}
.text15bold{
	font-size:15px;
	font-weight:bold;
}
.text16bold{
	font-size:16px;
	font-weight:bold;
}
.text17bold{
	font-size:17px;
	font-weight:bold;
}
.text18bold{
	font-size:18px;
	font-weight:bold;
}
.text19bold{
	font-size:19px;
	font-weight:bold;
}
.text20bold{
	font-size:20px;
	font-weight:bold;
}
.text24bold{
	font-size:24px;
	font-weight:bold;
}
.text25bold{
	font-size:25px;
	font-weight:bold;
}

.text27bold{
	font-size:24px;
	font-weight:bold;
}
.text40bold{
	font-size:40px;
	font-weight:bold;
}

.error{
	color:red;
}

.team-msg-date{
	font-size:0.7em;
	color:grey;
}

/*
.material-symbols-outlined {
	vertical-align:middle;
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
*/
.pastille{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  //background-color: red;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;	
  font-size:0.7em;
}

.pre-avis{
	padding:5px;
}

.avis{
	background-color:#cccccc;
	
	padding:5px;
	margin:0px;
	
	text-align:left;
	font-size:0.8em;
}

.input-avis{
	border:0px solid #555555;
	font-family:arial;
	background-color:#ece6ad;
	color: #000000;
}

textarea.input-avis:read-only{
	background-color:#dddddd;
	border:0;
	color:#999999;
}

textarea.input-avis:read-only:focus{
	outline:none;
}

.metro {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start; /* important : aligne les tuiles par le haut, pas par la ligne */
}

.tile {
  flex: 0 1 220px; /* largeur fixe minimale, pas d'étirement forcé */
  border-left:1px solid #cccccc;
  color: #555555;
  padding:2px 5px;
  font-family:arial;
  font-size: .7em;
  //border-radius: 5px;
  text-align:left;
  word-wrap: break-word; /* coupe les très longs mots si besoin */
  box-sizing: border-box;
}

.dm_joueur{
	display:inline;
	color:black;
	text-decoration:none;
	margin-right:10px;
	font-weight:normal;
}

.player-msg{
	background-color:#ece6ad;
	padding:5px;
	margin:5px 10px;
	text-align:left;
	font-size:0.8em;
	color:black;
}

.player-msg-from{
	//font-weight:bold;
	color:grey;
}

.player-msg-date{
	color:grey;
}