:root {
    --charteColor1: #4649dd;
    --charteColor1L: #acb1f8;
    --charteColor1D: #01036D;
	
    --charteColor2: #A1E7FF;
    --charteColor2L: #adb5bd;
    --charteColor2D: #adb5bd;
	
	--charteGris: #adb5bd;
	--charteGrisL: #edf0f3;
	--charteGrisD: #6c757d;
	
	
	
    --charte_gris: #adb5bd;
    --charte_gris_clair: #edf0f3;
    --charte_bleu: #4650dd;
    --charte_gris_dark: #6c757d;
    --charte_violet: #4649dd;
    --charte_violet-clair: #acb1f8;
	

	
	
}
.charteColor1{
	color:var(--charteColor1);
}

/* devis */

.blockStatus{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	/* border:1px solid red; */
	/* width:100%; */
	/* height:100%; */
}

.blockStatus i{
	font-size:14px;
	margin:3px;
}

.enteteDevis{
	background-color:var(--charteColor1);
	border-radius:10px 10px 0px 0px;
	margin-top:10px;
	height:20px;
}

.enteteDevis input{
	color:white;
}

.entetePied{
	background-color:var(--kdGrey);
	border-radius:0px 0px 10px 10px;
}

.entetePied * {
	font-size:18px;
}


.enteteArticles *{
	font-weight:bold;
}

.devisArticles{
	height:auto;
	ALIGN-ITEMS:stretch !important; 
	padding:2px;
}
.devisArticles div{
	padding:0px 5px 0px 5px;
	border-left:1px solid var(--kdGrey);
	
	font-size:14px;

}

.devisArticles input{
	font-size:12px !important;
	height:100% !important;
	width:100% !important;
}

.devisMenuButton,.devisMenuButtonProjet{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	border:2px solid var(--charteColor1);
	border-radius:10px;
	
	margin:5px 5px 5px 5px;
	padding:10px 0px 10px 0px;
	
	min-width:100px;
	
	transition:0.3s;
	
	cursor:pointer;
}

.devisMenuButtonProjet{
border:2px solid var(--kdGreenD);	
}

.devisMenuButton:hover{
background-color:var(--charteColor1);
transition:0.3s;	
}

.devisMenuButtonProjet:hover{
background-color:var(--kdGreen);
transition:0.3s;	
}

.devisMenuButton:hover div{
color:white;
transition:0.3s;	
}

.devisMenuButtonProjet:hover div{
color:var(--kdGreenD)!important;
transition:0.3s;	
}


.devisMenuButton:hover i{
color:white !important;
transition:0.3s;	
}

.devisMenuButtonProjet:hover i{
color:var(--kdGreenD) !important;
transition:0.3s;	
}

.devisMenuButton div:nth-child(1), .devisMenuButtonProjet div:nth-child(1){
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	width:100%;
	
	/* padding:10px 0px 5px 0px; */
	
	/* border:1px solid red; */
}

.devisMenuButton div:nth-child(1)>i{
	font-size:25px;
	color:var(--charteColor1);
	
	/* border:1px solid red; */
}

.devisMenuButtonProjet div:nth-child(1)>i{
	font-size:25px;
	color:var(--kdGreenD);
	
	/* border:1px solid red; */
}

.devisMenuButton div:nth-child(2),.devisMenuButtonProjet div:nth-child(2){
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	width:100%;
	
	padding:5px 0px 0px 0px;
	
	font-size:12px;
	
	/* border:1px solid red; */
}

.devisMenuButtonProjet div:nth-child(2){
	color:var(--kdGreenD);
}

/* devis */


.contentV2{
	display:flex;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	flex-direction: column;
	
	/* border:1px solid red; */
	width:100%;
	height:100%;
}

.titreDevisProduit{
	background-color:silver;
	text-align:center;
}

.divButtonGaPointsGestion{
		display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content : space-evenly;
	width:100%;
	
}



.buttonGaPointsGestion,.buttonGaPointsGestionActive{
	width:100px;
	height:40px;
	margin-top:10px;
	border:1px solid #FF5733;
	border-radius:4px;
}

.buttonGaPointsGestionActive{
	background-color:#FF573333;
}

.classemenHover{
border:0px solid red;	
height:3px;
width:100%;
transition:0.3s;
}

.classemenHover2{
border:0px solid red;	
height:75px;
width:100%;
transition:0.3s;
}

.divClassement{
	border:1px solid black;
	border-radius:5px;
	width:100%;
	height:30px;
	padding:5px;
	margin:5px;
}

.divClassement:active{
	background-color:green;
	}
	


.buttonHeader
{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:center;
	justify-content :left;
	
	border:1px solid var(--charte_violet);
	border-radius:5px;
	
	height:40px;
	padding-left:2px;
	padding-right:2px;
	cursor:pointer;
}

.buttonHeader div:nth-child(1){
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:center;
	justify-content :left;
	
	/* border:1px solid var(--charte_violet); */
	width:40px;
	height:100%;
}

.buttonHeader div:nth-child(2){
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:center;
	justify-content :left;
	
	/* border:1px solid var(--charte_violet); */
	width:100px;
	height:100%;
	font-size:16px;
	color:var(--charte_violet);
	font-weight:bold;
}

/* devisV2------------------------------------------------------- */
.devisTitre{
	border:1px solid red;
	width:100%;
}

.devisMenuTop{
	border:1px solid red;
	width:100%;
}

.devisOptions{
	border:1px solid red;
	width:50%;
}

.devisMonetaire{
	border:1px solid green;
	width:50%;
}

.devisCorps{
	border:1px solid red;
	width:100%;
}


/* devisV2------------------------------------------------------- */

.choixCopie{
	border:1px solid var(--charte_violet);
	width:100%;
	border-radius:5px;
	margin-bottom:10px;
	/* height:25px; */
	padding:15px;
	cursor:pointer;
	transition:0.8s;
	
}
.choixCopie:hover{
background-color:var(--charte_violet);
color:white;
}

.devisEntenteInput::placeholder {
  color: white;

}

.inputEntete::placeholder {
  color: white;

}

.iValideClick{
	color:green;
	font-size:20px;
	position:absolute;
	right:-22px;
	bottom:-5px;
	
}

.iValideClick:hover{
	color:var(--charte_violet) !important;
		/* font-size:30px; */

}

.menuEntete
{
	position:absolute; 
	top:32px; 
	left:0px; 
	border-left:1px solid black; 
	border-bottom:1px solid black; 
	background-color: var(--charte_gris_clair);
	box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.64);
	z-index:3;
	
	 text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
	display:none;
	animation: disparition 1s;
	
}

@keyframes apparition {
    0% {
        width:0px;
    }

    

    100% {
         width:200px; 
		 
    }

}

@keyframes disparition {
    0% {
        width:200px;
    }

    

    100% {
         width:0px; 
		 display:none;
    }

}

.menuEntete_on
{
	display:block;
	position:absolute; 
	top:32px; 
	left:0px; 
	border-left:1px solid black; 
	border-bottom:1px solid black; 
	width:200px; 

	background-color: var(--charte_gris_clair);
	box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.64);
	z-index:3;
	
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
	animation: apparition 1s;
	
}

.menuEntete_on>div
{
	border-bottom:1px solid grey;
	width:100%;
	padding:3px;
	cursor:pointer;
}

.menuEntete_on>div:hover
{
	background-color: var(--charte_violet);
	color:white;
	transition: 0.4s;
}

.divTitreMenu
{
background-color: var(--charte_gris_dark);
	color:white;	
	text-align:center;
	font-weight:bold;
}

.border-bottom{border-bottom:1px solid silver;}

/* Ajout LG 01/11 pour formulaire */


	
	.title {
	color: #005c9f;
	font-family: sans-serif;
	font-size: 36px;
	font-weight: 600;
	margin-top: 30px;
	}
	
	.input-container {
	height: 50px;
	position: relative;
	width: 100%;
	}
	
	.ic1 {
	margin-top: 40px;
	}
	
	.ic2 {
	margin-top: 30px;
	}
	
	.input {
	background-color: white;
	border: 1px solid  var(--charte_violet);
	border-radius: 12px;
	box-sizing: border-box;
	color: black;
	font-size: 18px;
	height: 100%;
	outline: 0;
	padding: 4px 20px 0;
	width: 100%;
	}
	
	.cut {
	background-color: white;
	border-radius: 10px;
	height: 20px;
	left: 20px;
	position: absolute;
	top: -20px;
	transform: translateY(0);
	transition: transform 200ms;
	width: 76px;
	}
	
	.cut-short {
	width: 50px;
	}
	.cut-60 {
	width: 60px;
	}
	.cut-65 {
	width: 65px;
	}
	.cut-70 {
	width: 70px;
	}
	.cut-75 {
	width: 75px;
	}
	.cut-95 {
	width: 95px;
	}
	.cut-100 {
	width: 100px;
	}
	.cut-105 {
	width: 105px;
	}
	.cut-110 {
	width: 110px;
	}
	.cut-125 {
	width: 125px;
	}
	.cut-130 {
	width: 130px;
	}
	.cut-135 {
	width: 135px;
	}
	.cut-140 {
	width: 140px;
	}
	.cut-175 {
	width: 175px;
	}
	
	.input:focus ~ .cut,
	.input:not(:placeholder-shown) ~ .cut {
	border: 1px solid  var(--charte_violet);
	transform: translateY(8px);
	}
	
	.placeholder {
	color: #65657b;
	font-family: sans-serif;
	left: 20px;
	line-height: 14px;
	pointer-events: none;
	position: absolute;
	transform-origin: 0 50%;
	transition: transform 200ms, color 200ms;
	top: 20px;
	}
	
	.input:focus ~ .placeholder,
	.input:not(:placeholder-shown) ~ .placeholder {
	transform: translateY(-30px) translateX(10px) scale(0.75);
	}
	
	.input:not(:placeholder-shown) ~ .placeholder {
	color: #808097 !important;
	}
	
	.input:focus ~ .placeholder {
	color: #808097 !important;
	}
	
	.submit {
	background-color: #08d;
	border-radius: 12px;
	border: 0;
	box-sizing: border-box;
	color: #eee;
	cursor: pointer;
	font-size: 18px;
	height: 50px;
	margin-top: 38px;
	 outline: 0;
	text-align: center;
	width: 100%;
	}
	
	.submit:active {
	background-color: #06b;
	}
	
	
	.input-icon {
		position: relative;
	  }
	  
	  .input-icon > i {
		position: absolute;
		display: block;
		transform: translate(0, -50%);
		top: 50%;
		pointer-events: none;
		width: 25px;
		text-align: center;
	  }
	  
	  .input-icon > input {
		padding-left: 25px;
		padding-right: 0;
	  }
	  
	  .input-icon-right > i {
		right: 0;
	  }
	  
	  .input-icon-right > input {
		padding-left: 0;
		padding-right: 25px;
		text-align: right;
	  }
		.blocMesAbsencesAVenir, .blocMesAbsencesPasses{
			width:95%;
		}
	  @media only screen and (max-width: 600px) {
		  .footer{
			  display:inline;
		  }
		.header {
			width:100vw;
		}
			  .footer {
			width:100vw;
		}
		.header img{
			height:50px;
		  }
		 .header i{
			font-size:20px;
		  }  
  }		  
  
  
/* css v2 du 04/11/2023 */

.affairePageTitre{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:flex-start;
	justify-content :space-between;
	
	border-bottom:2px solid var(--charteGris);
	
	width:100%;
	min-height:30px;
	
	padding:0px 5px 0px 5px;
	
	font-size:20px;
	/* border:1px solid red; */
}

.affairePageTitreAffaire{
	font-size: inherit;
	/* border:1px solid red; */
	height:100%;
	flex:1;
}

.affairePageTitreMenu{
	font-size: inherit;
	/* border:1px solid red; */
	height:100%;
}


/* outil général */

.button2{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	width:auto;
	/* min-width:120px; */
	height:auto;
	border:1px solid var(--charteColor1);
	background-color:var(--charteColor1);
	border-radius:10px;
	
	padding:5px;
	
	margin:5px;
	cursor:pointer;
}

.button2 div:nth-child(2){
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	/* width:100%; */
/* border:1px solid red; */

color:white;
}

.button2 div:nth-child(1){
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	padding:0px 8px 0px 3px;
	
	/* border:1px solid black; */
}

.button2 i{
	color:white;
	font-size:20px;
}

.button1{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	margin:2px;
	padding:5px;
	
	border:1px solid var(--charteColor1);
	border-radius:5px;
	
	background-color:white;
	
	color:var(--charteColor1);
	font-size:14px;
	font-weight:bold;
}

.button1:hover{
	color:white;
	
	background-color:var(--charteColor1);
}



.kdInfo{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	height:30px;
	width:50%;
	
	border:1px solid var(--charteGris);
	border-radius:5px 0px 0px 5px;
	
	background-color:var(--charteGris2);
	margin-bottom:5px;
}

.kdInfoData{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	height:30px;
	width:50%;
	
	border:1px solid var(--charteGris);
	border-left:0;
	border-radius:0px 5px 5px 0px;
	
	margin-bottom:5px;
}


.affaireCommentaireTechTitre{
	width:100%;
	
	font-size:16px;
	font-weight:bold;
	text-align:center;
	
	margin-top:10px;
	
	
	
	border:1px solid var(--charteGris);
	background-color:var(--charteGris);
	border-radius:5px 5px 0px 0px;
	
}

.affaireCommentaireTech{
	width:100%;
	
	border:1px solid var(--charteGris);
	border-top:0;
	padding:5px;
	margin-bottom:15px;

}

.ficheClientContent{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	
	width:300px;
	min-height:50px;
	
	border:1px solid var(--charteGris);
	
	margin:5px;
	border-radius:10px 0px 0px 0px;
	
	
	
}

.ficheClientTitre{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :space-between;
	
	width:calc(100%);
	height:25px;
	
	padding:0px 5px 0px 5px;
	
	border-bottom:1px solid var(--charteColor1L);
	
	background-color:var(--charteColor1L);
	
	font-weight:bold;
	border-radius:10px 0px 0px 0px;
}

.ficheClientTitre i{
	font-size:20px;
}

.ficheClientDatasContent{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :center;
	padding:5px;
	
	width:100%;
	margin:3px;
	height:auto;
	
	border-bottom:1px solid var(--charteColor1L);
	
	
	
	

}

.ficheClientDatasContent>div:nth-child(2){
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;

	width:40px;
	
}

.ficheClientDatasContent>div:nth-child(2)>i{
	font-size:25px;
	color:var(--charteColor1);
	
}

.ficheClientDatasContent>div:nth-child(1){
	/* display:flex; */
	
	flex:1;
	text-align:left;
	/* border:1px solid red; */
	
	
}

.fichierContent{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	border:1px solid var(--charteGris);
	border-radius:5px;
	
	width:100px;
	padding:3px;
	margin:3px;
	
	height:100px;
	
	transition:0.3s;
	
	
	
}

.fichierContent:hover{
	
	background-color:var(--charteColor1);
	transition:0.3s;
	
}

.fichierContent:hover i{
	
	color:white;
	transition:0.9s;
	
}

.fichierContent:hover div{
	
	color:white;
	transition:0.3s;
	
}

.fichierContentIcon{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	/* width:100%; */
}

.fichierContentIcon i{
	font-size:40px;
	width:100%;
	
	color:var(--charteColor1);
}

.fichierContentName{
	display:flex;
	flex-wrap:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;	
	text-align:center;
	
	padding-top:3px;
	font-size:12px;
	
	
	width:100%;
	max-height:40px;
	height:40px;
	
	transition:0.3s;
	/* border:1px solid red; */
	word-wrap : break-word;
	word-break: break-all;
	

}

.menuV2Button{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	margin:0px 5px 0px 5px;
	/* border:1px solid red; */
	border-radius:5px;
	height:30px;
}

.menuV2Button:hover{
	background-color:var(--kdGrey);
}

.menuV2ButtonIcon{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	color:var(--charteColor1);
	padding:0px 5px 0px 5px;
	min-width:40px;
	height:20px;
	/* color:red; */
	
}

.menuV2ButtonIcon i{
	font-size:22px;
	
	
}

.menuV2ButtonText{
	display:flex;
	flex:1;
	height:20px;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;	
	
	/* border:1px solid red; */
	/* border-bottom:1px solid var(--charteGris); */

	
	color:var(--charteGrisD);
	font-weight:bold;
	font-size:18px;

}

.menuV2ButtonText a{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;

	font-size:14px;
	color:var(--charteGrisD);
	
	width:100%;
	height:100%;
}

/* onglets */
.ongletsBlock{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	width:calc(100% - 10px);
	
	height:60px;
	/* border:1px solid black; */
}







.ongletPostIt{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	height:100%;
	width:120px;
	
	border:1px solid var(--charteGris);
	border-right:0;
	background-color:var(--charteGris2);
	
	padding:5px;
	
	box-shadow: 2px 2px 4px 1px var(--charteGris);
	
	cursor:pointer;
	
	transition:0.3s;
}

.ongletPostIt:hover{
background-color:white;
transition:0.3s;	
}

.ongletsBlock .ongletPostIt:first-child {
	border-radius:4px 0px 0px 0px;
	box-shadow: 2px 0px 4px 1px var(--charteGris);
	

}

.ongletLast {
	border:1px solid var(--charteGris);
	border-radius:0px 4px 0px 0px;
}

.ongletPostItEnd{
	flex:1;
	height:100%;
	border-bottom:1px solid var(--charteGris);

}

.ongletPostItSelect{
	background-color:white;
	border-bottom:0;
	z-index:2;
}



.ongletPostItText{
	text-align:center;
}

.ongletPostItSelect .ongletPostItText{
	font-weight:bold;
}


.ficheClientOption{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	margin:2px;
	
	width:100%;
	height:25px;
	
	border-radius:5px;
	
	font-weight:bold;
	cursor:pointer;
}

.ficheClientOptionSelect{
	background-color:var(--charteColor2);
}

.ficheClientOptionUnSelect{
	background-color:var(--charteVertB);
}

.menuEntete{
	position:absolute;
	top:27px;
	left:0px;
	
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	

	
	z-index:2;
	
	width:0px;
	height:0px;
	
	opacity:0;
	
	transition:0.3s;
	
	
}

.menuEnteteOn{
	position:absolute;
	top:20px;
	left:0px;
	
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	
	border:1px solid var(--charteColor1);
	border-radius:0px 0px 5px 5px;
	background-color:white;
	
	z-index:10;
	
	width:200px;
	height:auto;
	
	opacity:1;
	
	transition:0.3s;
	
	
}

.menuEnteteOn>div{
	width:100%;
	height:25px;
	border-bottom:1px solid var(--kdGrey);
	
		display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	
	padding:0px 5px 0px 5px;
	
	cursor:pointer;
}

.menuEnteteOn>div:hover{
background-color:var(--charteColor1);
color:white;	
}

.menuEnteteOn div:first-child{
	justify-content :center;
	background-color:var(--charteColor1L);
}

.menuEnteteOn div:last-child{
	justify-content :center;
	background-color:var(--charteColor1);
}

.idDevisInfos input{
	background-color:var(--kdBlueL);
	margin:2px;
	text-align:center;
	border-radius:5px !important;
}

#kdFormPoints input::placeholder{
font-size:12px;
}

.barreOn{
	border:1px solid var(--kdGreyD);
	border-radius:2px;
	width:calc(100% + 5px);
	position: absolute;
	transform: rotate(-45deg);
	bottom: 6px;
	left: -4px;

}

.barreOff{
	display:none;

}


.sortable-placeholder {
    height: 35px; /* Ajuste selon la hauteur de tes éléments */
    background-color: #f0f0f0; /* Couleur pour le repère */
    border: 2px dashed #555; /* Ligne pointillée pour démarquer */
    margin: 5px 0; /* Espacement pour améliorer la visibilité */
}
.barreMenuDiv:hover
{
	/* width:200px; */
	transition:0.5s;
	z-index:3;
}

.barreMenuDiv
{
	display:flex;
	position:absolute;
	top:10px;
	align-items:center;
	justify-content: left;
	border:0px solid black;
	padding:5px;
	padding-left:10px;
	background-color:var(--charte_violet);
	width:50px;
	height:50px;
	margin-right:5px;
	border-radius:10px;
	border:1px solid #ffffff;
	color:#ffffff;
	overflow:hidden;
	cursor:pointer;
	user-select:none;
}



.barreMenuText
{
	margin-left:8px;
	min-width:200px;
}

.btn {
  text-decoration: none;
  background-color: #005af0;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  outline: none;
  transition: 0.3s;
}

.btn:hover{
  text-decoration: none;
  background-color: #ffffff;
  color: #005af0;
  padding: 10px 20px;
  border: none;
  outline: 1px solid #010101;
}
/*.form input {*/
/*  margin: 10px 0;*/
/*  width: 100%;*/
/*  background-color: #e2e2e2;*/
/*  border: none;*/
/*  outline: none;*/
/*  padding: 12px 20px;*/
/*  border-radius: 4px;*/
/*}*/

//Ajout principal
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200&display=swap');

:root {
    --charte_gris: #adb5bd;
    --charte_gris_clair: #edf0f3;
    --charte_bleu: #4650dd;
    --charte_gris_dark: #6c757d;
    --charte_violet: #4649dd;
    --charte_violet-clair: #acb1f8;
}









ion-icon {
    pointer-events: none !important;
}





.input_red {
    border: 1px solid red !important;
    background-color: rgb(255, 189, 189);
}

.input_green {
    border: 1px solid green !important;
}

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

}

td {    text-align: left;}
tr {background-color: white;}



.block_table td ion-icon {
    color: black;
    font-size: 16px;
}

.block_table td i:hover {
    color: red;
    /* transform: rotate(-90deg); */
    transition: 0.5s;
}

th {
    text-align: left;
}

table tr:nth-child(odd) {
    /* background-color: var(--charte_gris_clair); */
}


.tableResultRecherche {
    border: 2px solid var(--charte_violet);
}

.divResultRrecherche {
    position: absolute;
    top: 30px;
    left: 0px;
    right: -100px;
    z-index: 999;
    /* height:30px; */
    overflow: auto;
    max-height: 300px;
}

.selectDevisOption {
    border: 0px;
    font-weight: bold;
}

.selectDevisOption>option {
    font-weight: bold;
}

.devisEntenteInput {
    width: 100%;
    color: #ffffff;
    background-color: var(--charte_violet);
    font-weight: bold;
    border-radius: 5px 5px 0px 0px;
    padding-left: 5px;
}

.devisRechercheProduitInput {
    position: relative;
    width: 100%;
    background-color: var(--charte_gris_clair);
    border-bottom: 0px solid black;
    /* margin-top:10px; */
    margin-bottom: 10px;

}

.trListProduitSelected {
    background-color: var(--charte_gris);
}

.td_50>i {
    color: var(--charte_violet);

}

.trExcel input {
    border: 0px;
}

.trExcel>td {
    border-left: 1px solid black;
}

.trExcel {
    background-color: #ffffff !important;
}


.trRechercheProduit {
    cursor: pointer;
    background-color: #fff;
}

.trRechercheProduit:hover {
    background-color: var(--charte_gris_clair);
    color: var(--charte_violet);
}

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

.ful_screan {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    color: red !important;
    display: none;
}

.main {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    width: 100%;
    min-width: 900px;
	/* height:calc(100vh - 150px); */
}

.header {
    display: flex;
    background: #ffffff;
    /* border: 1px solid black; */
    height: 50px;
    justify-content: space-between;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    align-items: center;
    align-content: center;
    width: 100%;
    z-index: 3;
}

.header div {
    /* border:1px solid black; */
}

.header ul {
    display: flex;
    list-style-type: none;
}

.header li {
    padding-left: 10px;
    color: var(--charte_bleu);
    display: flex;
    align-items: center;
    justify-items: center;
}



.header ion-icon {
    font-size: 30px;
    margin-left: 10px;
    margin-top: 5px;
    color: var(--charte_gris);
}

.menu_user {
    display: none;
}

.menu_user_on {
    /* display: flex; */
    position: absolute;
    top: 50px;
    right: 5px;
    border: 1px solid var(--charte_gris);
    width: 250px;
    background: #ffffff;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
	z-index:3;
}

.ligneMenuUser:hover {
    background-color: var(--charte_gris_clair);

}


.ligneMenuUser {
    display: flex;
}

.ligneMenuUser .bi {
    /* border:1px solid red; */
    padding-right: 5px;
    padding-left: 3px;
}

.menu_user_on:hover {
    background-color: var(--charte_gris_clair);

}


.menu_user_ico {
    display: flex;
    height: 50px;
    width: 50px;
    justify-content: center;
}

.menu_user_txt {
    display: flex;
    align-content: center;
    align-items: center;
    width: 200px;
    height: 50px;

}

li ion-icon {
    color: var(--charte_violet) !important;
}




.menu_titre {
    color: var(--charte_gris);
    font-size: 18px;
    font-weight: bold;
    padding-left: 10px;
    padding-bottom: 20px;
}



.main_menu {
    position: relative;
    /* font-family: var(--bs-font-sans-serif); */
    font-size: 18px;
    /* border: 1px solid black; */
    display: flex;
    align-items: center;
    justify-items: center;
    height: 40px;
    padding-left: 38px;
    color: var(--charte_gris_dark);
}

.main_menu:hover,
.sous_menu a:hover {
    background: var(--charte_gris_clair);

}

.main_menu {
    user-select: none;
}

.main_menu a {
    font-family: var(--bs-font-sans-serif);
    font-size: 18px;
    color: var(--charte_gris_dark);
    font-weight: bold;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-items: center;
}

.main_menu ion-icon {
    position: absolute;
    left: 5px;
    top: 9px;
    font-size: 25px;
    color: var(--charte_gris_dark);

}

.main_menu>i {
	margin-left:-30px; margin-right:5px; font-size:25px;
	width:30px;
	
}

.main_menuseul {
    position: relative;
    /* font-family: var(--bs-font-sans-serif); */
    font-size: 18px;
    /* border: 1px solid black; */
    display: flex;
    align-items: center;
    justify-items: center;
    height: 40px;
    padding-left: 38px;
    color: var(--charte_gris_dark);
}

.main_menuseul:hover,
.sous_menu a:hover {
    background: var(--charte_gris_clair);

}

.main_menuseul {
    user-select: none;
}

.main_menuseul a {
    font-family: var(--bs-font-sans-serif);
    font-size: 18px;
    color: var(--charte_gris_dark);
    font-weight: bold;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-items: center;
}

.main_menuseul ion-icon {
    position: absolute;
    left: 5px;
    top: 9px;
    font-size: 25px;
    color: var(--charte_gris_dark);

}

.fleche_menu {
    position: absolute;
    right: 10px;
    transform: rotate(0deg);
    transition: 0.5s;
    font-weight: bold;

}

.fleche_anime {
    transform: rotate(-90deg);
    transition: 0.5s;
}


.active,
.active:hover {
    color: #ffffff;
    background: var(--charte_violet);
}

.active ion-icon,
.active ion-icon:hover {
    color: #ffffff;
}

.sous_menu {
    display: block;
    font-size: 15px;
    color: var(--charte_gris_dark);
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: var(--charte_gris_clair);

}

.sous_menu a:hover {
    font-style: italic;
    font-weight: bold;
    /* transition: 0.3s; */
}


.sactive {
    max-height: 500px;
    /* box-shadow:0 .2rem 0.2rem rgba(0,0,0,.15); */
    border-bottom: 1px solid var(--charte_gris);

    transition: max-height 0.5s ease-in;


}

.sous_menu a {
    font-size: 15px;
    color: var(--charte_gris_dark);
    padding-left: 20px;
    display: flex;
    width: calc(100% - 20px);
    height: 100%;
    align-items: center;
    justify-items: center;
}

.select_smenu {
    font-weight: bold;
    background-color: var(--charte_violet-clair);
}

.contenu{
    display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :center;
    flex:1;
    height:calc(100svh - 90px);
    /* min-width:800px; */
    overflow:auto;
	padding:5px;
    /* border: 1px solid red; */
}



/* menu salaries */
.contenu0 {
    display: flex;
    width: 100%;
    justify-content: left;
    align-items: left;
    align-content: space-between;
    margin-left: 20px;
    margin-top: 20px;
}

.contenu0 ion-icon {
    font-size: 30px;
    color: #ffffff;
    margin-left: 5px;
    background: var(--charte_violet);
    padding: 5px;
    border-radius: 10px 0px 0px 10px;


}



.contenu0>nav {
    display: flex;
}

.contenu0>nav>a {
    display: block;
    margin: 0px;
    padding: 0px;

}

.contenu0>nav>div {
    display: flex;
    align-items: center;
    /* border: 1px solid black; */
    width: 0px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--charte_gris);
    border-radius: 0px 10px 10px 0px;
    padding-left: 5px;
    padding-right: 5px;
    color: #ffffff;
    height: 40px;
}

.contenu0>nav>div {
    display: flex;
    align-items: center;
    /* border: 1px solid black; */
    width: 0px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--charte_gris);
    border-radius: 0px 10px 10px 0px;
    padding-left: 5px;
    padding-right: 5px;
    color: #ffffff;
    height: 40px;
}


.menu_active {
    width: 120px !important;
    color: #000 !important;
    transition: .5s;
}

.menu_desabled {
    width: 1px !important;
    color: rgb(255, 255, 255) !important;
    transition: .5s;
}

/* menu salaries */
.contenu1 {
    width: 580px;
    text-align: center;
    transition: width 1.1s 0.1s ease;

}

.contenu1b {
    width: 800px;
    text-align: center;
    transition: width 1.1s 0.1s ease;


}


.contenu2 {
    display: flex;
    flex-wrap: wrap;
    /* border: 1px solid black; */

}

.contenu2 {
    width: calc(100% - 580px);
    transition: width 1.1s 0.1s ease;

}

.contenu2b {
    width: calc(100% - 800px);
    transition: width 1.1s 0.1s ease;

}




.titre1 {
    position: relative;
    width: calc(100% - 30px);
    /* font-weight: bold; */
    font-size: 2em;
    color: #343a40;
    padding-left: 45px;
}

.titre2 {
    position: relative;
    width: calc(100% - 30px);
    /* font-weight: bold; */
    font-size: 1em;
    color: #343a40;
    padding-left: 35px;
}


.block_100,
.block_50 {
    /* border:1px solid black; */
    box-shadow: 10px 0px 10px 5px rgba(213, 213, 213, 0.53);
    background: #ffffff;
    border-bottom: none;
    /* min-width: calc(46%); */
    min-height: 70px;
    border-radius: 10px;
    margin: 20px;
    padding-bottom: 20px;


}

.block_100 select {
    width: 120px;
}

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

.taille_bloc_400,
.taille_bloc_800,
.taille_bloc_1200 {
    /* border:1px solid black; */
    box-shadow: 10px 0px 10px 5px rgba(213, 213, 213, 0.53);
    background: #ffffff;
    border-bottom: none;
    min-height: 70px;
	height:auto;
    border-radius: 10px;
    margin: 20px;
    padding-bottom: 20px;

}

.taille_bloc_400 {
    width: 450px;
}

.taille_bloc_800 {
    width: 800px;
}

.taille_bloc_1200 {
    width: 1200px;
}





.block_50 {

    width: 750px;

}

.block_max_500 {

    max-width: 480px;
    min-width: 300px;


}


.block_table td a {
    display: block;
    width: 100%;
    height: 100%;
}

.td_up_java {
    width: 100%;
    border: 1px solid var(--charte_violet);
    color: #000000;
    font-weight: bold;
    font-size: 1.5;
}



.block_titre {
    position: relative;
    display: flex;
    font-size: 1.4em;
    /* border: 1px solid black; */
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    align-items: center;
    justify-items: center;
    border-bottom: 1px solid var(--charte_gris);
    color: var(--charte_violet);
    font-weight: bold;
    justify-content: space-between;
    padding-left: 50px;

}

.block_titre a {
    color: var(--charte_violet);

}

.block_titre ion-icon {
    position: absolute;
    font-size: 30px;
    top: 10px;
    left: 10px;
    cursor: pointer;
}

.iTitle {
    position: absolute;
    font-size: 30px !important;
    top: 1px;
    left: 1px;
    cursor: pointer;

}

.iIcone {
    font-size: 30px !important;
    cursor: pointer;
    color: var(--charte_violet);

}

.retour {
    position: absolute;
    font-size: 30px !important;
    cursor: pointer;
    margin-right: 30px;
    left: -10px;
    color: var(--charte_bleu);

}

.retour:hover {
    top: -2px;
    font-size: 35px !important;
    transition: 0.2s;
    /* background-color:var(--charte_bleu); */
    /* color:white; */


}



.iOption {
    font-size: 30px !important;
    Color: var(--charte_violet);
    cursor: pointer;
}

.i_title_absolut {
    position: absolute;
    font-size: 30px;
    top: 0px;
    left: 0px;
    cursor: pointer;
}

.ion-icon-right_titre {
    position: absolute;
    font-size: 30px;
    top: 0px;
    right: 60px;
    cursor: pointer;
}

.block_titre div,
.block_titre span,
.block_titre i,
.block_titre a {
    /* border: 1px solid black; */

    font-size: 1.2em;
}

.block_titre i {
    margin-left: 10px;
}

.block_titre i:hover {
    font-size: 1.3em;
    cursor: pointer;
}

.block_titre button,
.label_file,
.textFile button,
.block_table button {
    /* border: 1px solid black; */
    padding: 8px;
    /* padding-left:5px; */
    /* padding-right:5px; */
    background-color: var(--charte_violet);
    color: #ffffff;
    border: 0px;
    border-radius: 5px;
    min-width: 80px;
    font-weight: bold;
    content: "Selected file: ";

}

progress[value] {


    width: 250px;
    height: 20px;
    background: var(--charte_gris_clair);

}

.label_file {
    margin-top: 10px;
    margin-bottom: 30px;
}

#file_input {
    display: none;
}

.block_titre button:hover,
.block_table button:hover {
    color: var(--charte_violet);
    background: #ffffff;
    border: 1px solid var(--charte_violet);
    transition: 0.3s;

}

.block_titre input {
    width: 200px;
}




.block_table,
.block_info {

    min-height: 100px;
    /* max-height: 800px; */
    padding: 20px;
    padding-top: 30px;
    /* overflow:auto; */

}

.block_info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 450px;
}

.block_info div {
    width: 150px;
    text-align: center;
}

.block_info span {
    font-weight: bold;
    color: var(--charte_bleu);
}

.block_table tr:hover {
    /* font-weight: bold; */

}



.block_table table {
    width: 100%;
}

.block_table th {
    border-bottom: 1px solid black;
    background: #ffffff;
}


.td_50,
.td_50r,
.td_50l {
    border-bottom: 1px solid var(--charte_gris);
    width: 50px;
}

.td_100,
.td_100r,
.td_100l {
    border-bottom: 1px solid var(--charte_gris);
    width: 100px;
}

.td_150,
.td_150r,
.td_150l {
    border-bottom: 1px solid var(--charte_gris);
    width: 150px;
}

.td_200,
.td_200r,
.td_200l {
    border-bottom: 1px solid var(--charte_gris);
    width: 200px;
}

.td_250,
.td_250r,
.td_250l {
    border-bottom: 1px solid var(--charte_gris);
    width: 250px;
}

.td_300,
.td_300r,
.td_300l {
    border-bottom: 1px solid var(--charte_gris);
    width: 300px;
}

.td_350,
.td_350r,
.td_350l {
    border-bottom: 1px solid var(--charte_gris);
    width: 350px;
}

.td_libre,
.td_librer,
.td_librel {
    border-bottom: 1px solid var(--charte_gris);
}

.td_50r,
.td_100r,
.td_150r,
.td_200r,
.td_250r,
.td_300r,
.td_350r,
.td_librer {
    text-align: right;
}

.td_50l,
.td_100l,
.td_150l,
.td_200l,
.td_250l,
.td_300l,
.td_350l,
.td_librel {
    text-align: left;
}

.td_50,
.td_100,
.td_150,
.td_200,
.td_250,
.td_300,
.td_350,
.td_libre {
    text-align: center;
}



.td_150 {
    border-bottom: 1px solid var(--charte_gris);
    width: 150px;
    text-align: center;
}

.td_libre {
    border-bottom: 1px solid var(--charte_gris);
    text-align: center;
}

.td_form_titre {
    background: #ffffff;
    padding-top: 10px;
    width: 200px;
    vertical-align: top;
}

.td_form_input {
    background: #ffffff;
}

.td_form_input input,
.textFile input {
    border: 0px;
    border-bottom: 1px solid var(--charte_gris_dark);
    width: 100%;
}

.td_form_input textarea {
    width: 100%;
    height: 200px;
    padding: 3px;
}



.footer {
    height: 40px;
    width: 100%;
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
}

.footer {
    width: 100%;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    z-index: 3;
    background-color: resd;
}


.fonduSave_moove {
    animation: fonduSave 1s;
}

.fonduSave_moove2 {
    animation: fonduSave2 1s;
}

@keyframes fonduSave {
    0% {
        background-color: #fff;
    }

    50% {
        background-color: orange;
    }

    100% {
        background-color: #fff;
    }

}

@keyframes fonduSave2 {
    0% {
        background-color: #fff;
    }

    50% {
        background-color: orange;
    }

    100% {
        background-color: #fff;
    }

}

.engrenage_moove {
    animation: engrenage 1s;
}

.engrenage_moove2 {
    animation: engrenage2 1s;
}

@keyframes engrenage {
    0% {
        transform: rotate(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }

}

@keyframes fermeture {
    0% {
        height: 100%;
    }

    50% {
        height: 250%;
    }

    100% {
        height: 0%;
    }

}

@keyframes engrenage2 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }


}

.save_moove {
    animation: moove 1s;
}

.save_moove2 {
    animation: moove2 1s;
}

@keyframes moove {
    0% {
        transform: rotate(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }

}

@keyframes moove2 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }


}

.botton_options {
    width: 120px;
    height: 40px;
    margin: 5px;
    border: none;
    background-color: var(--charte_violet);
    border-radius: 5px;
    font-weight: bold;
    color: #ffffff;
}

.botton_options:hover {
    background-color: #ffffff;
    color: var(--charte_violet);
    border: 1px solid var(--charte_violet);
}

.del_scren {
    display: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;

    align-items: center;
    /* border: 1px solid black; */
    height: 0px;
    overflow: hidden;
    background: #ffffff;
    /* padding-left:5px; */
    /* padding-right:5px; */
    transition: 0.1s;
}

.del_scren_on {
    display: flex;
    position: absolute;
    /* align-items: center; */
    justify-content: center;
    overflow: auto;
    /* max-height:70vh; */
    transition: 0.5s;
    z-index: 300;
    background-color: rgba(131, 131, 131, .7);
	/* padding-top:0px; */

}

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

}

.textFile div {
    width: 49%;
}

.textDel {
    text-align: center;
}

.textDel h1 {
    font-size: 1.3em;

}

.textDel button,
.block_100 button {
    border: 1px solid #ffffff;
    padding: 8px;
    /* padding-left:5px; */
    /* padding-right:5px; */
    background-color: var(--charte_violet);
    color: #ffffff;
    border-radius: 5px;
    min-width: 80px;
    font-weight: bold;

}

.textDel button:hover,
.block_100 button:hover {
    color: var(--charte_violet);
    background: #ffffff;
    border: 1px solid var(--charte_violet);
    transition: 0.3s;

}

/* page login */
.containt_login {
    display: flex;
    width: 100vw;
    height: 100vh;

}

.login1 {

    width: 30vw;
    min-width: 500px;
    height: 100vh;
    background-color: #ffffff;
    align-items: center;

}

.login1>div:nth-child(1) {
    width: 100%;
    font-size: 50px;
    margin-top: 100px;
    margin-bottom: 100px;
    text-align: center;
    color: var(--charte_gris_dark);
    text-shadow: 2px 0px 2px rgba(70, 73, 221, 0.5);
}

.log_error {
    display: block;
    width: 100;
    color: red;
    text-align: center;
    font-size: 30px;
}


.login2 {
    display: flex;
    width: 70vw;
    background: rgb(229, 229, 229);
    background: linear-gradient(180deg, rgba(229, 229, 229, 1) 0%, rgba(229, 229, 229, 1) 0%, rgba(229, 229, 229, 1) 51%, rgba(255, 255, 255, 1) 53%, rgba(255, 255, 255, 1) 100%);

    overflow: hidden;
    align-items: center;
    justify-content: center;

}



.login2 img {
    width: 80%;
}

/* page login */

.toggle1 {
    font-size: 1.4em;
    color: var(--charte_violet);
}

.tdOptions1,
.tdOptions2 {
    text-align: center;
    width: 100px;
    background-color: #ffffff;
}

.addContact {
    /* display:none; */
}

.toolbarDevis {
    /* border:1px solid black; */
    width: 100%;
    display: flex;
    padding-left: 30px;
    position: sticky;
    top: 20px;
    /* background:white; */
    z-index: 10;
}

.toolbarDevis>div>i:hover {
    color: white;
}

.toolbarDevis>div>i {
    font-size: 2.2em !important;
}

.toolbarDevis>div:hover {
    color: white !important;
    background-color: var(--charte_violet);
    transition: 1s;
}

.toolbarDevis>div {
    /* background-color:red;	 */
    text-align: center;
    margin-right: 10px;
    padding: 5px;
    border: 2px solid var(--charte_violet);
    border-radius: 5px;
    width: 100px;
    font-size: 0.8em;
    background-color: #ffffff;
    /* font-weight: bold; */
}

#dropfile {
    display: flex;
    position: relative;
    border-radius: 5px;
    align-items: center;
    justify-content: left;
    border: 3px dashed var(--charte_violet);
    padding-left: 3px;
    height: 60px;
    margin-top: 20px;
}

.divAddFichierEmail {
    cursor: pointer;
    width: 320px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 5px;
    margin-bottom: 3px;
    box-sizing: border-box;
    padding-left: 5px;

}

.divAddFichierEmail:hover {
    background-color: var(--charte_violet);
    font-weight: bold;
    color: #ffffff;
    transition: 0.5s;
    padding-left: 15px;
    border-radius: 5px;
}

#PJ {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    height: 50px;
    overflow: auto;
}

.PJDivs {
    position: relative;
    border: 1px solid var(--charte_gris_dark);
    border-radius: 4px;
    padding: 1px;
    margin-right: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 150px;
    padding-right: 20px;
    cursor: pointer;
    height: 24px;
}

.closePJ {
    position: absolute;
    top: 4px;
    right: 2px;
    color: white;
    font-weight: bold;
    background-color: red;
    border-radius: 4px;
    height: 15px;
    width: 15px;
    font-size: 10px;
    text-align: center;
}

.help:hover {
    opacity: 1;
    transition: 1s;
}

.help {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 400;
    width: 40px;
    height: 40px;
    border: 1px solid var(--charte_violet);
    border-radius: 50%;
    background-color: var(--charte_violet);
    opacity: 0.3;
}

.help i {
    position: absolute;
    color: white;
    top: 0px;
    left: 3px;
    font-size: 30px;

}




.bold {
    font-weight: bold;
}

.w20 {
    width: 20px !important;
}

.w30 {
    width: 30px !important;
}

.w40 {
    width: 40px !important;
}

.w50 {
    width: 50px !important;
}

.w100 {
    width: 100px !important;
}

.w150 {
    width: 150px !important;
}

.w200 {
    width: 200px !important;
}

.w250 {
    width: 250px !important;
}

.w300 {
    width: 300px !important;
}

.w350 {
    width: 350px !important;
}

.ww {
    min-width: 50px !important;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}



.recherche_client{
    border: 1px solid var(--charte_gris);
    width: 100%;
    /* height: 30px; */
    position: absolute;
    left: 0px;
    top: 28px;
    background-color: white;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    border-radius: 0px 0px 5px 5px;
    border-top: 0px;

}

.div_contrat > i{
    padding :8px;
    color : white;
    font-size : 30px !important;
    position: absolute;
    top: -7px;
    left: -10px;
}

.div_contrat{
    position: relative;
    border-radius: 7px;
    background-color:  blue;
    font-size : 18px !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width : 50px;
    height: 40px;
    line-height: 40px;
    margin-right: 5px;
    padding-left: 50px;
    transition: 1s;
}

.div_contrat:hover{
    border-radius: 7px;
    background-color: blue;
    color : white;
    padding-right:  10px;
    width: auto;
    transition:  1s;
}

#block_liste_salaries tr:hover{
	font-style : italic;
	
}

.taille_bloc_400>.block_titre,.taille_bloc_ww>.block_titre, .taille_bloc_800>.block_titre, .taille_bloc_1200>.block_titre{
    font-size: 1em;
    
    }
    
    .taille_bloc_400, .taille_bloc_ww, .taille_bloc_800, .taille_bloc_1200{
        /* border:1px solid black; */
        box-shadow:10px 0px 10px 5px rgba(213,213,213,0.53);
        background: #ffffff;
        border-bottom: none;
        min-height: 200px;
        border-radius: 10px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        user-select:none;
    /*	resize: both;*/
      /* overflow: auto; */
        
    }
    
    .taille_bloc_ww{width:100%;}
    .taille_bloc_400{width:450px;}
    .taille_bloc_800{width:800px;}
    .taille_bloc_1200{width:1200px;}
    
    
    .block_titre{
        position: relative;
        display: flex;
        font-size: 1.4em;
        /* border: 1px solid black; */
        height: 50px;
        padding-left: 20px;
        padding-right: 20px;
        align-items: center;
        justify-items: center;
        border-bottom: 1px solid var(--charte_gris);
        color:var(--charte_violet);
        font-weight: bold;
        justify-content: space-between;
        padding-left: 60px;
    }
    
    .block_titre > i{
    }
    
    .block_titre a
    {
            color:var(--charte_violet);
    
    }
    
    .block_titre>i:nth-child(1){
        /* color:red; */
        position:absolute;
        bottom:12px;
        left:0px;
        font-size:2em !important;
    }
	.iAction:hover{
		font-size: 1.3em; 
		cursor: pointer;
	}


.onglePostItContent{
    height:calc(100% - 100px)!important;
}