: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;}
.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%;
}