@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');


 :root {
	 
	--charteColor1: #9f6e33;
	--charteColor2: #9f6e3333;
	--charteColor3: #728647;
	--charteColor4: #DDFA9D;
	 
  --vertPastelCharte: #DDFA9D;
  --vertDarkCharte: #728647;
  --marronCharte: #9f6e33;
  --charteGris: #f8f9fa;
  --charteGris2: #ececec;
  --charteGrisDark: #656565;
  --charteRed: #D20000;
}


.historique1,.historique2,.historique3,.historique4{
	width:100%;
	border-bottom:1px solid var(--charteGris2);
	padding-bottom:5px;
}

.historique1 span:nth-child(1), .historique1 span:nth-child(2){
	font-weight:bold;
	color:blue;
}

.historique2 span:nth-child(1), .historique2 span:nth-child(2){
	font-weight:bold;
	color:red;
}

.historique3 span:nth-child(1), .historique3 span:nth-child(2){
	font-weight:bold;
	color:green;
}

.historique4 span:nth-child(1), .historique4 span:nth-child(2){
	font-weight:bold;
	color:pink;
}

.selectSessionClient{
	display:flex;
	ALIGN-ITEMS:stretch ;
	ALIGN-CONTENT:stretch ;
	justify-content :space-evenly;
	/* border:1px solid red; */
	width:100%;
}

.selectSessionClient>select{
	font-size:20px;
	width:50%;
	text-align:center;
}







*{
box-sizing: border-box; 
font-family: 'Poppins', sans-serif;
/* font-weight:bold; */
}
body{padding:0; margin:0;
background : #f8f9fa;}

table
{
border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
padding:0px;
margin:0px;
background : white;
border-radius:10px;
}


a { 

text-decoration:none; 
color:black;
}

.selectExport{
	display:flex;
	border:1px solid var(--charteColor1);
	width:100%;
	padding:5px;
	border-radius:5px;
}

.selectExport>option{
	width:100%;
}

.enteteAppel{
	border:1px solid grey;
	width:100px;
}

.tdAppel{
	border:1px solid grey;
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
	color:var(--charteGris);
	background-color:var(--charteGris);
	text-align:center;
	transition:0.6s;
	cursor:pointer;

}

.appelSelected{
	background-color:#73BD71;
	transition:0.3s;
}

.tdAppel:hover{
	background-color:var(--kdGrey);
	transition:0.3s;
}

.tdAppe2{
	border:1px solid grey;
}

div>.inactif {
  pointer-events: none;
  opacity: 0.5; /* vous pouvez également ajuster l'opacité pour donner un effet visuel de désactivation */
}

.buttton1{
	min-width:150px;
	padding:10px;
	background-color:var(--vertDarkCharte);
	color:white;
	border:1px solid var(--vertDarkCharte);
	border-radius:5px;
}

.tableQuizz{
	display:flex; 
	flex-wrap:wrap;	
	width:100%; 
	ALIGN-ITEMS:left;	
	ALIGN-CONTENT:left;	
	justify-content :left;
	padding:10px;
	
}



.tableQuizz1{
	width:calc(100% - 206px);
	border:1px solid var(--vertDarkCharte);
	border-radius:5px;
	padding-left:5px;
	margin-bottom:3px;
}
.tableQuizz2{
	width:100px;
	border:1px solid var(--vertDarkCharte);
	border-radius:5px;
	padding-left:5px;
	text-align:center;
	margin-left:3px;
	margin-bottom:3px;
	cursor:pointer;
}

.tableQuizz2:hover{
	background-color:var(--vertDarkCharte);
	color:white;
}

.buttonSession1>a{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	width:100%;
	height:100%;
	/* background-color:red; */
	text-align:center;
	line-height:15px;
	text-decoration : none;
	color:var(--vertDarkCharte);
	padding:2px;
	
	/* border:1px solid red; */
}

.buttonSession1>a:hover{color:white;}

.buttonSession1{
	display:flex;
	/* FLEX-WRAP:wrap; */
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	border:1px solid var(--vertDarkCharte);
	border-radius:5px;
	margin:3px;
	width:calc(33% - 6px);
	height:40px;
	background-color:var(--vertPastelCharte);
	transition:0.3s;
	cursor:pointer;
	text-align:center;
	line-height:15px;
}
.buttonSession1:hover{
	background-color:var(--vertDarkCharte);
	color:white;
	transition:0.3s;
}
/* barre de progression session */
.barreProgressionSession{
	display:flex;
	/* border:1px solid var(--marronCharte); */
	width:100%;
	height:10px;
	
	margin-top:10px;
	margin-left:55px;
	margin-right:20px;
	border-radius:5px;
}

.barreProgressionSession>.on{
	position:relative;
	width:100px;
	background-color:var(--marronCharte);
	border-right:1px solid white;
}


.barreProgressionSession>.off{
	position:relative;
	width:100px;
	border:1px solid var(--marronCharte);
	background:white;
	
}

.barreProgressionSession>div:first-child{
border:1px solid var(--marronCharte);
width:10px;

/* background-color:var(--marronCharte); */
border-radius:5px 0px 0px 5px;
}

.barreProgressionSession>div:last-child{
/* border:1px solid var(--marronCharte); */
/* width:10px; */

/* background-color:var(--marronCharte); */
/* border-radius:0px 5px 5px 0px; */
border:0px;
}

.numberOn,.numberOff{
position:absolute;
top:-8px;
left:-10px;
display:flex;
ALIGN-ITEMS:Center;
ALIGN-CONTENT:center;
justify-content:center;

border:1px solid var(--marronCharte);
width:25px;
height:25px;
border-radius:50%;
color:var(--marronCharte);
z-index:2;

}

.numberOn{
background-color:var(--marronCharte);
color:white;	
border:2px solid white;
}


.numberOff{
background-color:white;
color:var(--marronCharte);	
}

/* barre de progression session */

.data1{
	border-bottom:1px solid var(--charteGris2);
	width:100%;
}

.data1>span{
	font-weight:bold;
}
/* buttonActions----------------------------------- */
.barreMenu{
	/* border:1px solid red; */
	display:flex;
	flex-wrap:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	
	width:100%;
}

.buttonActions{
		display:flex;
		flex-wrap:wrap;
		ALIGN-ITEMS:Center;
		ALIGN-CONTENT:center;
		justify-content:center;
		
        margin-right: 10px;
        padding: 5px;
        border: 2px solid var(--marronCharte);
        border-radius: 5px;
        width: 100px;
		height:90px;
        font-size: 0.8em;
        background-color: #ffffff;
		margin-left:10px;
}
.buttonActions:hover {
        margin-right: 10px;
        padding: 5px;
        border: 2px solid var(--marronCharte);
        border-radius: 5px;
        width: 100px;
        font-size: 0.8em;
        background-color: var(--marronCharte);
        transition : 0.5s;
		color:white;
		font-weight:bold;
}

.buttonActions>i{
	font-size:2em;
	padding:5px;
}

.buttonActions>span{
	display:block;
	width:100%;
	font-size:1em;
	/* border:1px solid red; */
	text-align:center;
	
	padding:0px;
	margin:0px;
}
/* buttonActions----------------------------------- */




.tdPadding
{
padding-left:15px;
padding-right:3px;
}
.trTableList1
{
background-color:white;
transition:0.3s;
border-bottom:1px solid silver;
}

.trTableList1:hover
{
background-color:silver;
transition:0.3s;
}

th input{border:0px;}

.thEnteteList{
/* background-color:var(--charte_violet); */
font-weight:bold;

}

.thEnteteList>input{
	width:100%;
}

input:before{
content:"-";
font-size:3px;
}
.placeholderCenter>input::placeholder,.placeholderRight>input::placeholder,.placeholderLeft>input::placeholder{
	font-weight:bold;
	color:#868686;
}
.placeholderCenter>input::placeholder{
	text-align:center;
}

.placeholderRight>input::placeholder{
	text-align:right;
}

.placeholderLeft>input::placeholder{
	text-align:left;
}


.afficheData2{
	display:flex;
	width:100%;

	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	border-bottom:1px solid var(--charteGris2);
}

.afficheData2:hover{
	background-color:var(--charteGris2);
}

.afficheData2>span:nth-child(1){
	/* display:block; */
	/* width:100%; */
	position:relative;
		padding-left:20px;
	font-weight:bold;
}

.afficheData2>span:nth-child(1):after{
content:" : ";
}

.afficheData2>span:nth-child(1):before{
	content:"• ";
   position:absolute;
	left:5px;
	top:-10px;
  font-size:30px;
  color:var(--marronCharte);
}

.afficheData2>span:nth-child(2){
	/* border:1px solid orange; */
	/* border:1px solid red; */
	padding-left:5px;
}

.mainForm{
	display:flex;
	width:100%;
	height:calc(100% - 60px);
	
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	/* border:1px solid red; */
	
}

.mainFormLeft,.mainFormRight{
	display:flex;
	width:50%;
	height:100%;
	
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	/* border:1px solid red; */
	padding:5px;
}



.buttonForm{
    margin:2px;
    border-radius:5px;
    background-color: white;
    border: 1px solid var(--marronCharte);
	cursor:pointer;
	color:var(--marronCharte);
	font-weight:bold;
	transition:0.3s;

}

.buttonForm:hover{
    border-radius:5px;
    background-color: var(--marronCharte);
    border: 1px solid var(--marronCharte);
	color:white;
	transition:0.3s;
}

/* ----------------------------main------------------------ */
.main{
	display:flex;
	width:100%;
	height:100vh;
	
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	
}
/* ----------------------------Del screen------------------------ */
/* ----------------------------Del screen------------------------ */



.block_table, .block_info{
	
	min-height: 100px;
	/* max-height: 800px; */
	padding: 20px;
	padding-top: 5px;
	/* padding-top: 30px; */
	/* overflow:auto; */
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;

}
.taille_bloc_400>.block_titre,.taille_bloc_ww>.block_titre, .taille_bloc_800>.block_titre, .taille_bloc_1200>.block_titre{
font-size: 1em;

}

.infoTextAlert{
	border:2px solid var(--marronCharte);
	border-radius:10px;
	box-shadow:10px 0px 10px 5px rgb(213 213 213 / 53%);

	display:flex;
	justify-content:center;
	align-items:center;
	padding:30px;
	
	font-size:2em;
	background-color:white;
	
	
	
	min-width:400px;
	min-height:200px;
}

.taille_bloc_400, .taille_bloc_ww, .taille_bloc_800, .taille_bloc_1200{
	/* border:1px solid black; */
	box-shadow:10px 0px 10px 5px rgb(213 213 213 / 53%);
	background: #ffffff;
	border-bottom: none;
	min-height: 200px;
	border-radius: 1.5em;
	margin-bottom: 20px;
	padding-bottom: 20px;
	user-select:none;
	resize: auto;
  overflow: auto;
	
}

.taille_bloc_ww{width:100%;}
.taille_bloc_400{width:450px;}
.taille_bloc_800{width:800px;}
.taille_bloc_1200{width:1200px;}


/* ----------------------------main------------------------ */
/* ----------------------------fonction form------------------------ */


.RC_formInput{
position:relative;
border:1px solid silver;
border-radius:10px;
background-color:white;
min-height:30px;
margin-top:20px;
width:100%;


}

.RC_formInput input, .RC_formInput select, .RC_formInput textarea{
	border:0px;
	width:calc(100% - 40px);
	margin-left:10px;
	margin-right:10px;
	/* height:calc(100% - 10px); */
	outline: none;
	margin-top:10px;
	/* border:1px solid red; */
}

.RC_formInput input:required+span:after,
.RC_formInput textarea:required+span:after,
.RC_formInput select:required+span:after
 {
  content: "*";
   position:absolute;
  right:5px;
  top:-2px;
  font-size:30px;
  color:orange;
}

.RC_formInput select{
margin-top:5px;
}

.RC_formInput textarea{
resize:auto;
}
.RC_formInput>.divTxt{

padding:6px;
padding-top:7px;
padding-left:20px;
/* border:1px solid red; */
height:100%;
}

.RC_formInput>.divTxt:before{
	content:"• ";
   position:absolute;
	left:5px;
	top:-7px;
  font-size:30px;
  color:var(--marronCharte);
}

.RC_formName{
display:block;
position:absolute;
background-color:white;
border-radius:10px;
border:1px solid var(--marronCharte);
padding-left:10px;
padding-right:10px;
font-size:10px;
top:-12px;
left:10px;
/* color:var(--marronCharte); */
color:black;
font-weight:bold;
min-width:100px;
text-align:center;

}
.RC_formInput>input:focus ~ .RC_formName{
color:red;
}

.RC_formName{
display:block;
position:absolute;
background-color:white;
border-radius:10px;
border:1px solid var(--vertDarkCharte);
padding-left:10px;
padding-right:10px;
font-size:10px;
top:-12px;
left:10px;
/* color:var(--marronCharte); */
color:black;
font-weight:bold;
min-width:100px;
text-align:center;

}
.RC_formInput>input:focus ~ .RC_formName{
color:red;
}

.textChampObligatoireOff{
	/* display:none; */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	color:red;
	font-size:8px;
	width:0px;
	height:0px;
		font-weight:bold;

	transition:1s;
}

.textChampObligatoireOn{
	/* display:block; */
	white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
	color:red;
	font-size:8px;
	width:200px;
	padding-left:20px;
	transition:1s;
	/* border:1px solid black; */
	text-align:left;
	font-weight:bold;
}

/* ----------------------------fonction Form------------------------ */

/* ----------------------------menu------------------------ */
.menu{
	border-right:1px solid silver;
	height:100%;
	width:100%;
	background : white;
	}

.menuButton{
	display:flex;
	FLEX-WRAP:wrap;
	width:calc(100% - margin);
    border:1px solid var(--marronCharte);
	border-radius:5px;
	padding:5px;
	ALIGN-ITEMS:center;
	/* ALIGN-CONTENT:flex-start; */
	margin:5px;
	cursor:pointer;
	
	
	transition:0.8s;
	/* border:1px solid blue; */
	}
	
.menuButton:hover{
	border:1px solid var(--marronCharte);
	background-color:var(--vertPastelCharte);
	transition:0.3s;
}



.menuButton>nav{
    padding-left:10px;
	display:block;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	width:150px;
	/* border:1px solid red; */
	font-size:14px;
	
}
.menuButton>i{
    color: var(--marronCharte);
	font-size:25px;
	padding-right:5px;
	width:25px;
	}
	
.titreMenu{
	position:relative;
	display:flex;
	/* border:1px solid red; */
	width:200px;
	padding-bottom:10px;
	padding-top:10px;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	JUSTIFY-CONTENT:center;
	}
	
.titreMenu>i{
	/* border:1px solid red; */
	position:absolute;
	left:20px;
	top:10px;
	margin-right:10px;
	font-size:25px;
	cursor:pointer;
	}
/* ----------------------------menu------------------------ */
/* ----------------------------buttons------------------------ */

.buttonQuizzOff{
display:flex;
border:1px solid var(--charteGris);
background-color:var(--charte_gris_dark);
color:var(--charteGris);
margin:2px;
border-radius:4px;
padding:0px 5px 0px 5px;

transition:0.3s;
}

.buttonQuizzOk{
display:flex;
border:1px solid var(--charteColor3);
background-color:var(--charteColor4);
color:var(--charteColor3);
margin:2px;
border-radius:4px;
transition:0.3s;
padding:0px 5px 0px 5px;
}

.buttonQuizzOk:hover{
border:1px solid var(--charteColor3);
background-color:var(--charteColor3);
color:white;
transition:0.3s;
}


.buttonSticky{
	/* position:fixed; */
	bottom:10px;
	border-radius:5px ;
	border:1px solid var(--charteColor1);
	color: var(--charteColor1);
	background-color:var(--charteColor4);
	font-weight:bold;
	font-size:20px;
	padding:10px;
	transition:0.2s;
	cursor:pointer;
}

.buttonSticky:hover{
	border:1px solid var(--charteColor3);
	background-color:var(--charteColor3);
	color:white;
	transition:0.2s;
}

/* ----------------------------buttons------------------------ */
/* ----------------------------feuille quizz------------------------ */

.quizzValidTag{
	position:absolute;
	top:10px;
	right:0px;
	/* border:1px solid red; */
	width:40px;
	color:var(--charteGris2);
}

.quizzValidTag i{
font-size:30px;	
}

.feuilleQuizzPk{
	width:100%;
	margin-bottom:5px;
}

.feuilleQuizzPk input{
width:100%;
border:0;
border-bottom:1px solid var(--charteGrisDark);
}

.feuilleQuizzPk textarea{
width:100%;
border:0;
border-left:1px solid var(--charteGrisDark);
border-bottom:1px solid var(--charteGrisDark);
height:80px;
}

.feuilleQuizzPk select{
width:100%;
border:0;
border-bottom:1px solid var(--charteGrisDark);
height:40px;
font-size:16px;

color:var(--vertDarkCharte);
}



.feuilleQuizzQuestion{
	position:relative;
	width:calc(100% - 10px);
	padding-left:10px;
	margin-bottom:5px;
}

.feuilleQuizzQuestion>i{
	/* position:absolute; */
	/* right:5px; */
	/* top:2px; */
	color:red;
	padding-left:10px;
}


/* .feuilleQuizzQuestion::before{ */
	/* content:" - "; */
/* } */

.feuilleQuizzQuestion::after{
}
.feuilleQuizz{
	position:relative;
	width:1000px;
	/* min-height:120px; */
	height:auto;
	border:1px solid var(--charteGris2);
	background-color:white;
	border-radius:20px;
	padding:10px;
	margin-bottom:10px;
}
/* ----------------------------feuille quizz------------------------ */
/* ----------------------------contenu pages------------------------ */
.titre{
	display:flex;
	JUSTIFY-CONTENT: space-between;
	width:calc(100%);
	text-align:left;
	margin-top:10px;
	margin-bottom:10px;
	padding-left:20px;
	font-size:25px;
	/* border:1px solid var(--marronCharte); */
	/* border-radius:20px 20px 0px 0px; */
	/* background-color:var(--vertPastelCharte); */
	/* background: linear-gradient(to top, var(--vertPastelCharte) 60%, white); */
	height:36px;
	line-height:38px;
	margin-left:5px;
	margin-right:5px;
	color:var(--marronCharte);
	font-weight:bold;
		
}

.titre2{
	display:flex;
	/* JUSTIFY-CONTENT: center; */
	ALIGN-ITEMS:center;
	ALIGN-content:center;
	width:calc(100%);
	text-align:left;
	margin-top:10px;
	margin-bottom:10px;
	padding-left:20px;
	font-size:25px;
	/* border:1px solid var(--marronCharte); */
	/* border-radius:20px 20px 0px 0px; */
	/* background-color:var(--vertPastelCharte); */
	/* background: linear-gradient(to top, var(--vertPastelCharte) 60%, white); */
	height:36px;
	line-height:38px;
	margin-left:5px;
	margin-right:5px;
	color:var(--marronCharte);
	font-weight:bold;
}

.titre3{
	display:flex;
	/* JUSTIFY-CONTENT: center; */
	ALIGN-ITEMS:center;
	ALIGN-content:center;
	width:calc(100%);
	text-align:left;
	margin-top:10px;
	margin-bottom:5px;
	padding-left:20px;
	font-size:20px;
	color:var(--marronCharte);
	font-weight:bold;
}



.retourButton{
	/* display:block; */
	border:1px solid var(--marronCharte);
	padding:5px;
	/* padding-left:60px; */
	border-radius:3px;
	cursor:pointer;

	width:50px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;

	/* margin-left:5px; */
	margin-right:20px;
	font-size:15px;
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-content:center;
	JUSTIFY-CONTENT:left;
	transition:0.8s;
	}

.retourButton:hover{
font-size:30px;
/* display:block; */
background-color: var(--marronCharte);
color:white;
transition:0.4s;

width:200px;
font-size:15px;
line-height:-15px;
/* white-space: none; */
/* text-overflow: none; */
/* overflow: none; */

}

.retourButton>i{

	font-size:30px;
	width:30px;
	height:30px;
	margin-right:20px;
	margin-left:3px;

}

.boutonIcone1{
font-size:30px;
/* display:block; */
border:1px solid var(--marronCharte);
padding:3px;
border-radius:3px;
cursor:pointer;
transition:0.8s;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width:50px;
margin-left:5px;
height: 50px;
/* margin-top:50px; */
}


.boutonIcone1:hover{
font-size:30px;
/* display:block; */
background-color: var(--marronCharte);
color:white;
transition:0.4s;

width:200px;
font-size:15px;
line-height:-15px;
/* white-space: none; */
/* text-overflow: none; */
/* overflow: none; */

}

.boutonIcone1>i{
	margin-right:15px;
	margin-left:4px;
	font-size:30px;
}

.titre>div:nth-child(2){
margin-right:30px;
display:flex;
height:50px;
}

.screenL,.screenR,.screenM{
	width:calc(50% - 10px);
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	margin-top:3px;
	/* margin-left:5px; */
	/* margin-right:5px; */
	/* border:1px solid var(--vertPastelCharte); */
	min-height:50%;
	position:relative;
	padding:5px;
	border-radius:5px 5px 10px 10px;
}

/* ----------------------------contenu pages------------------------ */
/* ----------------------------fonction add up ------------------------ */






.popup
{
background-color:white;border-radius:0px 0px 10px 10px;
}

.popup>span:first-child{

background-color:white;		
width:calc(100% + 2px);
text-align:left;
height:60px;
border-bottom:1px solid silver;
line-height:55px;
}



.popupMenuForm
{
top:-50px;
}

	













.RC_formInput{
position:relative;
border:1px solid silver;
border-radius:10px;
background-color:white;
min-height:30px;
margin-top:20px;


}

.RC_formInput input, .RC_formInput select, .RC_formInput textarea{
	border:0px;
	width:calc(100% - 40px);
	margin-left:10px;
	margin-right:10px;
	/* height:calc(100% - 10px); */
	outline: none;
	margin-top:10px;
}

.RC_formInput input:required+span:after,
.RC_formInput textarea:required+span:after,
.RC_formInput select:required+span:after
 {
  content: "*";
   position:absolute;
  right:5px;
  top:-2px;
  font-size:30px;
  color:orange;
}

.RC_formInput select{
margin-top:5px;
}

.RC_formInput textarea{
resize:auto;
height:calc(100% - 40px);
}
.RC_formInput>.divTxt{

padding:6px;
padding-top:7px;
padding-left:20px;
/* border:1px solid red; */
height:100%;
}

.RC_formInput>.divTxt:before{
	content:"• ";
   position:absolute;
	left:5px;
	top:-7px;
  font-size:30px;
  color:var(--marronCharte);
}

.RC_formName{
display:block;
position:absolute;
background-color:white;
border-radius:10px;
border:1px solid var(--marronCharte);
padding-left:10px;
padding-right:10px;
font-size:10px;
top:-12px;
left:10px;
/* color:var(--marronCharte); */
color:black;
font-weight:bold;
min-width:100px;
text-align:center;

}
.RC_formInput>input:focus ~ .RC_formName{
color:red;
}



.RC_tableList {
width:100%;
table-layout: fixed;
}



.champObligatoire{
	border:1px solid orange !important;
	/* background:orange !important; */
	/* color:white!important; */
}

.textChampObligatoireOff{
	/* display:none; */
	white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
	color:red;
	font-size:8px;
	width:0px;
	height:0px;
	transition:1s;
}

.textChampObligatoireOn{
	/* display:block; */
	white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
	color:red;
	font-size:8px;
	width:200px;
	padding-left:20px;
	transition:1s;
}




/* .RC_tableList tr>td:nth-child(1) { */
	/* width:150px; */
/* } */

/* .RC_tableList tr>td:nth-child(2) { */
	/* width:calc(100% - 150px); */
/* } */

.RC_tableList tr>td {
white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

}
.RC_tableList tr>td>i {
	font-size:15px;
}

.RC_tableList tr>td>i:hover {
	/* font-size:15px; */
	color:var(--marronCharte);
}

.RC_tableList tr>th>input,.RC_tableList tr>td>input{
	width:100%;
	border-bottom:0px solid silver;
	outline: none;
	padding-left:3px;
}
.stock{
	background-color:white;
	/* border:1px solid ; */
	 border: 2px inset #B3B3B3;
}
.RC_tableList td
{
border-bottom:1px solid silver;
line-height:25px;
}

.screenL
{
width:100%;	
display:flex;
FLEX-WRAP:wrap;
/* ALIGN-ITEMS:flex-start; */
ALIGN-CONTENT:flex-start;

height:calc(100% - 45px);
padding-top:20px;
padding-left:20px;
/* border:1px solid black; */
}



.screenR
{
display:flex;
ALIGN-ITEMS:baseline;
FLEX-WRAP:wrap;
ALIGN-CONTENT:flex-start;
width:0%;	
height:calc(100% - 45px);
/* border:1px solid black; */
padding-top:20px;
padding-left:20px;
}

.RC_contenu
{
/* border:1px solid black; */
width:100%;

height:100%;	
display:flex;
FLEX-WRAP:wrap;
ALIGN-ITEMS:flex-start;
ALIGN-CONTENT:flex-start;


}

.RC_tirePage
{
/* border:1px solid black; */
width:50%;
height:45px;
font-size:25px;	
/* font-weight:none; */
padding-left:40px;
color:var(--charte_gris_dark);
 border-bottom: 2px solid var(--charte_gris_dark);
 border-radius:0px 0px 0px 10px;
 /* text-align:center; */

}

.RC_menuContent
{
	border-bottom:1px solid black;
	display:flex;
	ALIGN-ITEMS:flex-start;
	/* ALIGN-content:flex-start; */
	JUSTIFY-CONTENT:center;
	width:50%;
	height:45px;
	border-bottom: 2px solid var(--charte_gris_dark);
	border-radius:0px 0px 10px 0px;
}

.RC_menuContentIcone
{
	display:flex;
	border:1px solid var(--marronCharte);
	background-color: var(--marronCharte);
	width:40px;
	height:40px;
	ALIGN-ITEMS:center;
	JUSTIFY-CONTENT:center;
	margin-right:10px;
	border-radius:6px;
	cursor:pointer;
	color:white;
	transition:0.5s;
	
}

.RC_menuContentIcone:hover
{
	background-color: white;
	color: var(--marronCharte);
	transition:0.5s;
}

.RC_menuContentIcone>i
{
	font-size:25px;
}

.docTableArticles td{
	border:1px solid silver;
}

.docTableArticles input{
	border:0px solid silver;
}

.docArticleInputV3
{
width:100%;
padding-left:3px;	
padding-right:3px;	
height:100%;
}

.hand{cursor:pointer;}
/* documents dv av fa cmd */
.docClientV3
{
	border:1px solid silver;
}

.docTitreClientV3, .docTitreClientV3 div,.docTitreClientV3 span
{
	/* border:1px solid red; */
	display:flex;
	justify-content:space-between;
	font-size:25px;
	color:#343a40;
	/* font-weight:bold; */
	
}

.docTitreClientV3 span
{
	font-weight:bold;
	padding-left:5px;
	padding-right:5px;
}

.docTitreClientV3>div>i
{
	font-size:20px;
	padding-left:5px;
	padding-right:5px;
	padding-top:3px;
	cursor:pointer;
}

.w20,.w20>a{width:20px !important;}
.w30,.w30>a{width:30px !important;}
.w40,.w40>a{width:40px !important;}
.w50,.w50>a{width:50px !important;}
.w100,.w100>a{width:100px !important;}
.w150,.w150>a{width:150px !important;}
.w200,.w200>a{width:200px !important;}
.w250,.w250>a{width:250px !important;}
.w300,.w300>a{width:300px !important;}
.w350,.w350>a{width:350px !important;}
/* .ww{min-width:50px !important;} */

.w20>div{width:20px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w30>div{width:30px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w40>div{width:40px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w50>div{width:50px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w100>div{width:100px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w150>div{width:150px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w200>div{width:200px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w250>div{width:250px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w300>div{width:300px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w350>div{width:350px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.ww{min-width:50px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }

.w20>a,.w30>a,.w40>a,.w50>a,.w100>a,.w150>a,.w200>a,.w250>a,.w300>a,.w350>a{
display:block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}



.center>a{
	display:block;
	text-align:center;
}

.RC_tableList span{
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  /* border:1px solid red; */
  padding-left:3px;
  width:100%;
}

.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}

.center>a{
	text-align:center;
}

.left>a{
	text-align:left;
}

.right>a{
	
	text-align:right;
}

.border{border:1px solid red;}

.boutonTelechargementExport
{
	display: inline-block;
  padding: 0.5em 1em;
  border: none;
  border-radius: 0.25em;
  font-size: 1em;
  font-weight: bold;
  color: white;
  background-color: var(--marronCharte);
  cursor: pointer;
  margin-left:180px;
  margin-top:20px;
}

.boutonTelechargementExport>a{
	color:white;
}
/* ----------------------------fonction add up ------------------------ */
/* ----------------------------fonction list1 ------------------------ */
.RC_contenu
{
/* border:1px solid black; */
width:100%;
height:calc(100% - 15px);	
display:flex;
FLEX-WRAP:wrap;
ALIGN-ITEMS:flex-start;
ALIGN-CONTENT:flex-start;

}

.tableList1{
	width:100%;
}





.tableList1 th{
	border:1px solid red;
	/* background-color:red; */
	border:0px;
	padding:0px;
	margin:0px;
}

.tableList1 td{
	border-bottom:1px solid silver;
	/* background-color:red; */
	/* border:0px; */
	padding:0px;
	margin:0px;
	height:30px;
}
.tableList1  a{
	/* border:1px solid red; */
	display:block;
	width:100%;
	height:100%;
	color:black;
}

.tableList1 tr:not(:first-child):hover{
	background-color:var(--vertPastelCharte);
	font-weight:bold;
	transition:0.3s;
	cursor:pointer;
}

.tableList1 tr:not(:first-child){
	background-color:white);
	/* font-weight:bold; */
	transition:0.5s;
}

.tableList1 th>input{
	border:0px;
	border-bottom:1px solid silver;
	padding:0px;
	/* margin:0px;	 */
}

.tableList1 ::placeholder {
  font-weight:bold;
  color:var(--vertDarkCharte);
  /* font-size: 1.5em; */
	}


	/* ----------------------------fonction list1 ------------------------ */
	/* ----------------------------header ------------------------ */
.headerUser{
	position:relative;
	
	display:flex;
	ALIGN-ITEMS:center;
	/* ALIGN-CONTENT:flex-start; */
	font-size:14px;
	/* border:1px solid black; */
	height:50px;
	margin-top:-5px;
	width:auto;
	cursor:pointer;
	}
	
.headerUser>div>i{
	font-size:30px;
}
.headerUser>div:nth-child(2){white-space: nowrap; text-align:left;}
.headerUser>div{
	margin-right:5px;
}

.headerUserList{
	position:absolute;
	top:48px;
	left:0px;
	width:100%;
	height:0px;
	overflow:hidden;
	
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	
	border:1px solid var(--charteGris2);
	border-radius:0px 0px 5px 5px;
	background-color:white;
	transition:0.3s;
}

.headerUserListOpen{
/* display:flex; */
height:80px;
transition:0.5s;
z-index:2;
}

.headerUserList>div{
	/* border:1px solid red; */
	
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	width:100%;
	height:40px;
	/* background-color:white; */
	padding-left:3px;
	cursor:pointer;
}

.headerUserList>div:hover{
	background-color:var(--charteGris);
	font-weight:bold;
}

/* ----------------------------header ------------------------ */
/* ----------------------------Box ------------------------ */


.boxGlobal{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	width:calc(50% - 40px);
	/* min-height:300px; */
	margin:20px;
	/* margin-top:-20px; */
	/* margin-right:20px; */
	
	box-shadow:10px 0px 10px 5px rgb(213 213 213 / 53%);
	border-radius:10px;
	background-color:white;
	
	
	/* height:auto; */
	overflow:auto;
}

@media screen and (max-width: 1500px) {
  .boxGlobal {
    width:calc(100% - 40px);
	/* background-color:red; */
  }
}



.border1{
	border:1px solid var(--charteGris2);
}

.boxGlobal2{
	margin:20px;
	padding:5px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
	display:flex;
	flex-wrap:wrap;
		ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	/* border:1px solid silver; */
	box-shadow:10px 0px 10px 5px rgb(213 213 213 / 53%);
	border-radius:10px;
	width:calc(100% - 20px);
	margin-right:20px;
	background-color:white;
	min-height:200px;
	/* height:auto; */
	/* overflow:auto; */
}


.boxTitre{
	display:flex;
	ALIGN-ITEMS:flex-start;

	border-bottom:2px solid var(--vertDarkCharte);
	width:100%;
	height:45px;
	border-radius:10px 10px 0px 0px;
}

.boxTitre2{
	display:flex;
	ALIGN-ITEMS:flex-start;
	JUSTIFY-CONTENT:space-evenly;

	border-bottom:2px solid var(--vertDarkCharte);
	width:100%;
	height:40px;
	border-radius:10px 10px 0px 0px;
}



.boxContenu{
	position:relative;
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;

	height:calc(100% - 50px);
	width:100%;
	padding:5px;
	/* border:1px solid red; */
}
.boxOptions{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
.
	padding:5px;
}
/* ----------------------------Box ------------------------ */

.td-status>i,.td-status>a>i{
	font-size:25px;
	cursor:pointer;
	color:var(--vertDarkCharte);
}

.td-status>i:hover{
	/* font-size:25px; */
	/* cursor:pointer; */
	/* border:2px solid green; */
}


/* ---------------------respnosive------------------- */
@media only screen and (min-width: 250px) and (max-width: 600px) {
	
	input{
		font-size:15px;
	}
	
  .screenL {
    padding:2px;
  }
  
  .quizzNomCanditat{
	  font-size:20px;
	  text-align:center;
	  /* border:1px solid red; */
	  width:100%;
	  font-weight:bold;
  }
  
  .header{
	display:flex;
	height:50px;
	text-align:center;
	width: calc(100%);
	box-shadow: 10px 0px 10px 5px rgb(213 213 213 / 53%);
	border-bottom-left-radius : 10px;
	border-bottom-right-radius : 10px;
	padding-top:5px;
  }
  
  .titre{
	justify-content:center;
	/* border:1px solid red; */
  }
  

  
  .footerPhone{
	position:fixed;
	bottom:0px;
	
	
	width:100%;
	height:70px;
	background-color:var(--charteColor1);
	border-radius:20px 20px 0px 0px;
	 z-index:2;
  }
  
.footerPhoneLeft{
	position:fixed;
	bottom:0px;
	left:0px;
	
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	text-align:center;
	
	
	width:40%;
	height:70px;
	background-color:var(--charteColor1);
	border-radius:20px 20px 0px 0px;
	 z-index:2;
	 
	 color:white;
	 font-weight:bold;
	 /* border:1px solid red; */
  }
  
    .footerPhoneBoule{
	position:fixed;
	bottom:0px;
	width:100px;
	height:100px;
	z-index:1;
	border-radius:50%;
	background-color:var(--charteColor1);
  }
  
  .footerPhoneButtonCenter{
	 position:fixed;
	bottom:2px;
	border:4px solid var(--charteColor3);
	background-color:var(--charteColor4);
	width:95px;
	height:95px;
	border-radius:50%;
	text-align:center;
	padding:0;
	color:var(--charteColor3);
	
	box-shadow:0px 0px 5px 5px #FFFFFF50;
	
	font-size:20px;
	font-weight:bold;
	 z-index:3;
  }
  
  .quizzValidTag{
	position:absolute;
	top:10px;
	right:0px;
	/* border:1px solid red; */
	width:30px;
	color:var(--charteGris2);
	}
	
	.quizzValidTag i{
	font-size:20px;	
	}
	
	.labelRadio{
	display:flex;
	/* border:1px solid red; */
	width:100%;
	text-align:center;
	}
	
	.labelRadio label{
		display:flex;
		ALIGN-ITEMS:center;
		ALIGN-CONTENT:center;
		justify-content :center;
		/* border:1px solid red; */
		width:50%;
		padding-top:10px;
		padding-bottom:10px;
	
	}
	
	
}

.evaluationCommanditaire{
	/* border:1px solid red; */
		display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	margin-bottom:10px;
}

.evaluationCommanditaire a:nth-child(1){
		border:1px solid var(--vertDarkCharte);
		padding:5px;
		border-radius:5px;
		color:var(--vertDarkCharte);
		background-color:var(--vertPastelCharte);

}

/* ---------------------respnosive------------------- */


.boutonClients{
	display:flex;
	flex-wrap:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	width:100%;
	height:50px;
	
	border:1px solid var(--kdBlue);
	
	border-radius:20px;
	
	margin:5px;
	
	transition:0.3s;
	
	cursor:pointer;

}

.boutonClients:hover{
	background-color:var(--kdBlueL);
	transition:0.3s;
}

.boutonClientsIcon{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	width:40px;
	height:calc(100% - 10px);
	
	/* border:1px solid red; */
	margin-left:5px;
}

.boutonClientsIcon i{
	color:var(--kdBlue);
	font-size:25px;
}

.boutonClientsDiv{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	
	height:calc(100% - 10px);
	flex:1;

	/* border:1px solid green; */

}

.boutonClientsBar{
	border:1px solid var(--kdBlue);
	width:100%;
	height:5px;
	margin-left:20px;
	margin-right:20px;
	
	border-radius:4px;
}

.boutonClientsBar div:nth-child(1){
	width:50%;
	height:100%;
	
	background-color:var(--kdBlue);
}

.barreMenuV2,.home{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	
	/* border: 1px solid red; */
	margin-left:10px;
	margin-right:10px;
}

.barreMenuV2 div{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	background-color:var(--kdBlue);
	border:1px solid var(--kdBlue);
	border-radius:15px;
	width:auto;
	height:40px;
	
	padding:5px 10px 5px 10px;
	color:white;
	font-weight:600;
	
	cursor:pointer;
	margin-left:5px;
	
}

.barreMenuV2>div>i{
	margin:10px;
	font-size:20px;
}


.barreMenuV2 div:hover{
	background-color:white;
	color:var(--kdBlue);
}

.boxValidation{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	
	/* border:1px solid red; */
	width:auto;
	height:40px;
	
	margin:5px;
}

.boxValidation div:nth-child(1){
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	flex:1;
	height:100%;
	
	border:1px solid var(--kdBlue);
	border-radius:10px 0px 0px 10px;
	
	padding:0px 5px 0px 5px;
	
	color:white;
	background-color:var(--kdBlue);
}

.boxValidation div:nth-child(2){
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	width:40px;
	height:100%;
	
	border:1px solid var(--kdBlue);
	border-radius:0px 10px 10px 0px;

	padding:0px 5px 0px 5px;
}

.boxValidation div:nth-child(2) i{
	font-size:30px;
}