:root{
	--fond-tableau: #8b8883;
	--tableau-haut: var(--colorsecondaireconnexion05);
	--tableau-haut-fonce: var(--colorsecondaireconnexion04);
	--tableau-carre: #0a0a0a;
	/* PERSONNAGE 1 */
	--peau-1: #FBC76F;
	--cheveux-1: #3D3D3D;
	--pull-1: var(--colorsecondaireconnexion05);
	
	/* PERSONNAGE 2 */
	--peau-2: #FBC76F;
	--cheveux-2: #3D3D3D;
	
	--pied-2: #2B2B2B;
	--pantalon-2: #847969;
	/* PERSONNAGE 3 */
	--peau-3: #FBC76F;
	--cheveux-3: #40260D;
	--pull-3-manche: #bcaf9c;
	--pull-3: #bcaf9c;
	--pantalon-3: #464039;
	
	--backgroundDroiteClip: rgba(255, 255, 255, 0.1);
	--backgroundDroiteClip-fonce: rgb(0 0 0 / 10%);
	--objet: var(--colorsecondaireconnexion05);
	--accent500: #ff8957;
	--accent800: #b33500;
	--accent200:#ffd9c9;
	--accent400:#ffa57f;
	--accent500:#ff8957; 
	--accent600:#fe5f1c;
	--accent800:#b33500;
	
	--accent200:var(--colorprincipaleconnexion08); 
	--accent400:var(--colorprincipaleconnexion07); 
	--accent500:var(--colorprincipaleconnexion06); 
	--accent600:var(--colorprincipaleconnexion05);
	--accent800:var(--colorprincipaleconnexion04);
	
	--couleurFondBlanc: #ffffff;
	--largeurblocconnexion: 450px;
	--primary200: var(--colorsecondaireconnexion06);
	--primary300: var(--colorsecondaireconnexion05);
	--primary700: var(--colorsecondaireconnexion04);
}
/*Propriétés similaires à toutes les interfaces 'GaucheDroiteBonhomme' (ne doivent plus être présente dans chaque CSS spécifique au client*/
html {background-color:#f5f5f5;}
html.connexion {background-color: #ffffff;}
#chercherChampLie, #chercherChampLie2  {background-color:#f5f5f5;}
#colonnegauche #byorganica {background-color:var(--colorprincipale03);}
.fl table tr.trclassement td,.fl table tr.trclassement:hover td,.sfl table tr.trclassement:hover td,.ssfl table tr.trclassement:hover td,.fl table tr.trafficherplus td,.fl table tr.trafficherplus:hover td,.sfl table tr.trafficherplus:hover td,.ssfl table tr.trafficherplus:hover td {background-color:var(--colorprincipale08);color:white;}
.form .zg .libelle, .QurQueElemEditLibelle {color: var(--colorprincipale05) !important;}
.entete .boutonrond, .enteteform .boutonrond, .elementsfl .boutonrond {background-color: var(--colorsecondaire10);}
.entete .radius .boutonrond, .enteteform .radius .boutonrond, .elementsfl .radius .boutonrond {background-color: #ffffff;}
.explorateur ul li span,.labelFonc {color: var(--colorprincipale05);}
.explorateur .petitcarrecliquable::before, .explorateur .petitcarrecliquable::after{background-color: var(--colorprincipale05);}
.vueDocDossierHierarchy .fl table tr:hover td {background-color: var(--colorprincipale10) !important;}
.vueDocDossierHierarchy table tr.current td {background-color:var(--colorprincipale09);}
.containerradio .checkmark:after, .containercouleur .checkmark:after {background: var(--colorsecondaire05);}
.containerradio input:checked ~ .checkmark:after {background-color:var(--colorsecondaire05);}
.fl table tr.current td,.sfl table tr.current td,.ssfl table tr.current td {background-color:var(--colorprincipale09);}
.colonneRecherchecontent .categories.open .titrecategories{color: var(--colorprincipale05);}
.entete .nomprenom:not(.logout), .entete .langues:not(.logout), .entete .nomprenom a:not(.logout), .entete .langues a:not(.logout) {color: var(--color-theme-entete) !important;text-align: right;}
#flyoutinside .enteteform {background-color: var(--colorprincipale07) !important;}
.radius {background-color:var(--colorsecondaire10);}
.radius.actif a {background-color:var(--colorsecondaire05);}
#fonctionsdroite .element:hover .icone,.fonctionsbas .element:hover .icone,.errorbloc .errorboutons .element:hover .icone,.enteteform .icone:hover,.elementsfl .icone:hover, .element:hover .deplContrIcon,#flyoutcontent .element:hover .icone, .errorfooter .element:hover .icone {background-color:var(--colorsecondaire05);}
.colonneRecherchecontent input[type=text].multicritere{border: 1px solid var(--colorprincipale05);}
.colonneRecherchecontent input[type=text].multicritere:focus + .placeholder, .colonneRecherchecontent input[type=text].multicritere.nonvide + .placeholder{color: var(--colorprincipale05);}
.blocconnexion table .tdforgotpassword a{color:var(--colorsecondaire05);}
.form .accordeon {background-color:var(--colorprincipale10);color: var(--colorprincipale05) !important;}
.explorateur .petitcarrecliquable, .explorateur .petitcarrenoncliquable{background-color: var(--colorprincipale10);}
.bloccorpsfl .trentete .checkmark {background-color: var(--colorprincipale08);border-color: var(--colorprincipale08);}
.enteteform .boutons {background-color: rgba(255, 255, 255, 0.20);}
.sfl table tr th, .ssfl table tr th, .sflspec table tr th, .libelleColonneChampColPos,.form .ssaccordeon {color: var(--colorprincipale05) !important;}
.fl table tr:hover td,.sfl:not(.disInvExplo,.sfl-EtaSes-Ses) table tr:hover td,.ssfl table tr:hover td,.jstree-default .jstree-clicked,.jstree-default .jstree-wholerow-clicked,.jstree-default .jstree-wholerow-hovered {background:var(--colorprincipale10);}
.fl .container input:checked ~ .checkmark, .sfl.enliste .container input:checked ~ .checkmark, .ssfl.enliste .container input:checked ~ .checkmark,.sflspec.enliste .container input:checked ~ .checkmark{background-color:var(--colorprincipale05);border: 1px solid var(--colorprincipale05);}
.container input:checked ~ .checkmark {background-color:var(--colorsecondaire05);border:1px solid var(--colorsecondaire05);}
.fl table tr.selected td,.fl table tr.doubleclicked td,.sfl table tr.selected td.fl table tr.selected td,.fl table tr.doubleclicked td,.ssfl table tr.selected td {background-color:var(--colorprincipale09);/*color: #3D3D3D;*/} /*BV : mise en commentaire de la couleur dans dev 10793. Ca permet de distinguer dans les FL une ligne sélectionnée non affichée dans l'explo (current) de la ligne current afficher dans l'explo*/
.logoconnexion{height: var(--height-blocconnexion-logo);background-color: white;background-repeat: no-repeat;}
.entete {background: white;-webkit-box-shadow: 0px 8px 12px -8px rgb(0 0 0 / 60%);box-shadow: 0px 8px 12px -8px rgb(0 0 0 / 60%);}
#mainContent{ /* Page d'accueil*/
	display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
	min-height: 750px;
}
.connexion .centre {
	position: absolute;
	inset: 0 0 0 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.connexion .bgConnexion {
	position: fixed;
	inset: 0 0 0 0;
	display: flex;
	z-index: -1;
}
.connexion .gauche .imageConnexion {
	width: calc(90% - (450px / 2));
	margin-left: 5.6%; /* decalage car l'image a une légère bordure transparente */
	margin-right: 4.4%; /* decalage car l'image a une légère bordure transparente */
	height: 90%;
	background: url("https://cdn.organica.technology/OfficeWeb/bg/pageConnexionTapis.svg") no-repeat center/contain;
}
.connexion .droite .droiteClip {
	position: absolute;
	inset: 0 0 0 0;
	background: var(--backgroundDroiteClip);
	width: 100%;
 	height: 100vh;
 	-webkit-mask-size: 100% auto;
 	mask-size: 100% auto;
 	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.connexion .droite .droiteClip1 {
	-webkit-mask-image: url('../Images/officeweblite/ConnexionMask1.svg');
 	mask-image: url('../Images/officeweblite/ConnexionMask1.svg');
 	-webkit-mask-position: top center;
	mask-position: top center;
	/*background: var(--backgroundDroiteClip-fonce);*/
}
.connexion .droite .droiteClip2 {
  -webkit-mask-position: bottom center;
 	mask-image: url('../Images/officeweblite/ConnexionMask2.svg');
 	-webkit-mask-image: url('../Images/officeweblite/ConnexionMask2.svg');
 	mask-position: bottom center;
}
.connexion .droite .droiteClip3 {
	-webkit-mask-image: url('../Images/officeweblite/ConnexionMask3.svg');
	mask-image: url('../Images/officeweblite/ConnexionMask3.svg');
 	-webkit-mask-position: bottom center;
 	mask-position: bottom center;
}
.connexion .gauche {
	width:75%;
	background-color: #f8f8f8;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
}
.connexion .gauche .imageConnexion svg {
	width: 100%;
	height: 100%;
	display: block;
    max-width: 100%;
}
.connexion .bandeauaffiche .centre,.connexion .bandeauaffiche .bgConnexion{
	top: 50px;
}
.connexion .droite {
	width:25%;
	background: linear-gradient(180deg, var(--primary300) 0%, var(--primary700) 100%);
	position: relative;
}
.newblocconnexion {
	width: 352px;
	position: relative;
	z-index: 1;
	padding:48px;
	border-radius: 10px;
	box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
	border: 1px solid #E2E8F0;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	background-color: var(--couleurFondBlanc);
	margin-right: calc(25% - (var(--largeurblocconnexion) / 2));
}
.newblocconnexion input[type=submit] {
	width: 100%;
    display: block;
    background: #fafafa;
    border-radius: 8px;
    padding: 14px 22px;
    border: none;
    font: 600 16px 'Inter';
    color: white;
    margin-top: 50px;
    cursor: pointer;
    transition: 0.3s;
	border-radius: 10px;
	background: var(--primary300);
    color: var(--couleurFondBlanc);
}
.newblocconnexion input[type=submit]:hover {background-color:var(--primary200);}
.newblocconnexion form > div:not(.newFondIconConnexion) {
	position: relative;
}
.newblocconnexion .welcome {
	font-size: 24px;
	text-align: center;
	letter-spacing: -0.02em;
	margin-top:40px;
	margin-bottom:40px;
	font-family: var(--font-familydefault);
	font-weight: 500;
	color: #4d4d4d;
}
.newblocconnexion .newiconconnexion.login{
    -webkit-mask: url(../Images/account_circle.svg) no-repeat 0px center /76% 76%;
    mask: url(../Images/account_circle.svg) no-repeat 0px center /76% 76%;
	background-color: #595959 !important;
}
.newblocconnexion .newiconconnexion.password{
    -webkit-mask: url(../Images/key.svg) no-repeat 0px center /76% 76%;
    mask: url(../Images/key.svg) no-repeat 0px center /76% 76%;
	background-color: #595959 !important;
}
.newblocconnexion .newFondIconConnexion{
	z-index: 99;
	margin-top: 5px;
    margin-left: 16px !important;
}
.newblocconnexion .passwordicon{
	margin-top: 20px;
}
.newblocconnexion #logoOrganica {
	display: block;
    width: 132px;
    height: 40px;
    /*background: url(https://cdn.organica.technology/OfficeWeb/bg/Logo_Organica.svg) no-repeat center/auto 40px;*/
    background: url(https://cdn.organica.technology/OfficeWeb/bg/ORGANICA_NEWLOGO_horizontal.png) no-repeat center/auto 35px;
    margin-inline: auto;
    margin-top: 50px;
	position: relative;
}
.newblocconnexion .rememberme {
	display: flex;
    justify-content: start;
    margin-top: 20px;
}
.newblocconnexion .rememberme .container{
    border: 0px;
    width: auto;
    display: inline;
    padding: 2px 5px 0px 30px;
    font: 500 14px 'Inter';
    position: relative;
    cursor: pointer;
    color: #949494;
	transition: 0.3s;
}
.newblocconnexion .rememberme .container input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.newblocconnexion .rememberme .checkmark{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
    width: 20px;
    background-color: #f0f0f0;
    border-radius: 4px;
    transition: 0.3s;
	border: 0px !important;
}
.newblocconnexion .rememberme .container .checkmark:after{
    left: 7px;
    top: 4px;
    border-color: #FFFFFF;
    transition: 0.3s;
}
.newblocconnexion input[type=text], .newblocconnexion input[type=password]{
	font: 400 16px/24px var(--font-familydefault);
    background-color: #F0F0F0;
    border-radius: 8px;
    border: 2px solid #F0F0F0;
    outline: 0px;
    color: #535252;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -ms-appearance: none;
    transition: border 0.3s;
    display: block;
    margin-top: 15px;
    padding: 6px 43px 6px 45px;
    width: calc(100% - 88px - 4px);
	max-width: calc(100% - 28px);
	background-size:0px;
}
.newblocconnexion .oeil{
	position: absolute;
    text-align: center;
    right: 14px;
    margin-top: -29px;
    width: 20px;
    height: 20px;
    background: url(../Images/visibility.svg) no-repeat center/20px auto;
    cursor: pointer;
}
.newblocconnexion .oeil.visible {
    background-image: url(../Images/visibility-1.svg);
}
.newblocconnexion .rememberme .container input:checked ~ .checkmark{
    background-color: var(--accent500) !important;
}
.newblocconnexion .rememberme .container:hover{color: var(--accent500) !important;}
.newblocconnexion .errormessage {
	font: 500 14px/21px var(--font-familydefault);
	color:red;
	position:relative;
	width:100%;
	text-align:center;
	margin-top:30px;
}
.newblocconnexion .indicationspassword {
	margin-top: 15px;
	font: 500 14px/21px var(--font-familydefault);
}
.newblocconnexion .message {
	font: 500 16px/24px var(--font-familydefault);
	text-align: center;
}
.newblocconnexion .message a {
	color: var(--accent500);
}
.newblocconnexion .message a:hover {
	text-decoration: underline;
}
.newblocconnexion :is(input[type=text], input[type=password], select, textarea):not(:disabled):is(:focus,:hover) {
    border: 2px solid var(--accent500);
}
.newblocconnexion table .tdforgotpassword a{color:var(--colorsecondaireconnexion05);}

.contextMenu li:hover > a, .contextMenu li.hover > a {
	background-color: var(--colorsecondaire10);
	color:#6a6a6a;
}
.contextMenu .hover .triangeflechehaut::after{
	border-bottom: 6px solid #6a6a6a;
}
.contextMenu LI.sub.hover > a::after{
	border-top: 6px solid #6a6a6a;
}
@media (max-width: 1000px){
	.connexion .centre {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.connexion .droite {
		width: 100%;
	}
	.connexion .gauche {
		display: none;
	}
	.newblocconnexion {
		margin-inline: auto;
	}
}
@media (max-width: 500px){
	/*.connexion .centre {
		align-items: flex-start;
		position: relative;
	}
	.connexion .gauche {
		display:none;
	}
	.connexion .droite {
		box-shadow:none;
	}
	.connexion .droite .organica {
		filter:none;
	}
	.newblocconnexion {
		border-radius: 0px;
		height: 100%;
		padding: 112px 12px 64px 12px;
		max-width: 100%;
		width: calc(100% - 24px);
		box-shadow: none;
		border: none;
	}*/
}
@media (max-width: 450px) {
	.newblocconnexion {
		width: calc(100% - (24px * 2));
		padding: 48px 22px 48px 22px;
	}
}
@media (max-height: 750px){
	.newblocconnexion {
		padding-top:20px;
		padding-bottom:20px;
	}
	.newblocconnexion #logoOrganica {
		margin-top:25px;
	}
	.newblocconnexion .welcome {
		margin-top: 20px;
		margin-bottom: 20px;
	}
}
.connexion .div-user::before,.connexion .div-password::before {
	margin-top:7px;
	margin-left:9px;
	background-color: #595959 !important;
}
.connexion .div-user::before {
	-webkit-mask: url('../Images/account_circle.svg') no-repeat 3px center /76% 76%;
	mask: url('../Images/account_circle.svg') no-repeat 3px center /76% 76%;
}
.connexion .div-password::before {
	-webkit-mask: url('../Images/key.svg') no-repeat 3px center /76% 76%;
	mask: url('../Images/key.svg') no-repeat 3px center /76% 76%;
}