:root {
--custom-mz-ong-light-color	: transparent;
--custom-mz-ong-light-width	: 100px;
}

td, select {
-webkit-user-select	: none !important;
-khtml-user-select	: none !important;
-moz-user-select	: none !important;
-o-user-select		: none !important;
user-select		: none !important;
}

textarea, input, select {
font-family			: "Roboto" !important;
color				: inherit !important;
}

textarea:focus {
outline				: none;
}

a, h1, h2, h3, h4, h5, h6 {
font-family			: "Roboto" !important;
}

/* pour les lignes */
.mz-row {
margin-bottom		: 0px !important;
}

/* pour les champs de formulaire avec des libellés personnalisés (div) */
.mz-input-field {
margin-top		: 0px;
position			: relative;
}

/* pour les contenur des champ de saisie */
.input-field {
height			: 3.5rem;
}

.input-field .mz-label {
font-family			: "Roboto" !important;
color				: #666666;
font-size			: 0.8rem;
top				: 0.8rem;
}

.mz-labeltextarea{
font-family			: "Roboto" !important;
font-size			: 0.8rem;
color				: #666666;
padding-bottom		: 5px;
}

.mz-textarea {
height			: auto;
min-height			: 1.9rem;
border-style		: solid;
border-width		: 1px;
border-color		: #e0e0e0 #e0e0e0 #d0d0d0 #e0e0e0;
padding			: 0.3rem 0px;
}

.mz-autoext {
overflow			: hidden;
resize			: none;
}

.mz-textarea:focus {
border-bottom-width	: 2px;
border-bottom-color	: #26a69a;
}

div.mz-active {
color				: #26a69a;
}


/* pour le champ upload */

/* la div du sélecteur de fichier */
.mz-filediv {
margin-top		: 0.5rem;
float				: left;
width				: calc(100% - 80px);
}

.mz-uplbtn {
padding			: 0 1rem;
background-color	: transparent;
box-shadow		: none;
}

.mz-uplbtn:hover {
background-color	: #E0E0E0;
box-shadow		: none;
}

.mz-uplbtnicon {
font-size			: 2rem;
}

.mz-uplbtntool {
float				: left;
font-size			: 24px;
padding-top		: 18px;
padding-left		: 15px;
cursor			: pointer;
}

.mz-uplsablier {
width				: 60px;
padding-left		: 10px;
margin-top		: 28px;
display			: none;
float				: left;
} 

div[data-uplvide="1"] {
display			: none;
}



/* pour les option des select */
ul.dropdown-content {
padding			: 0;
}

/* le libellé des select simple */
.mz-labelselect{
font-family			: "Roboto" !important;
font-size			: 0.8rem;
color				: #666666;
padding-bottom		: 5px;
padding-top		: 2px;
}

/* le select simple */
.mz-select {
height			: 2.5rem;
}

/* pour le conteneur du select */
.select-wrapper {
height			: 3.5rem;
}

/* pour les libellés des case à cocher (checkbox) */
.input-field .mz-checkboxlabel {
font-family			: "Roboto" !important;
color				: #666666;
font-size			: 1rem;
line-height			: 18px;
}

/* le libellé des sélecteur de fichier */
.mz-labelfile {
font-family			: "Roboto" !important;
font-size			: 0.8rem;
color				: #666666;
}

/* les cases à cocher (checkbox) */
.mz-checkbox {
margin-top		: 0px !important; 
margin-bottom		: 2rem !important;
}


/* Le sablier  top 0 left 0*/
#mz-sablier {
display			: none; 
top				: 0;
left				: 0;
position			: fixed;
width				: 100%;
margin			: 0px;
z-index			: 9999;
}

.mz-cursor-wait {
cursor			: wait !important;
}

.mz-cursor-progress {
cursor			: progress !important;
}


/* les modals (popup) */
#i-modalsablier {
width				: 200px;
}

#i-modalsablier > div > div {
margin-bottom		: 20px;
}

.mz-modaltitre {
font-size			: 1.5rem;
margin-bottom		: 1rem;
}

.mz-modaltext {
max-height		: 40vh;
overflow-y			: auto;
}

#i-modalbas {
max-height		: none;
}

.mz-modalcontenu {
min-height			: 40vh;
}


/* Pour les tableaux html */
.mz-table {
display			: table;
width				: 100%;
border			: medium none;
border-collapse	: collapse;
border-spacing		: 0;
font-family			: "Roboto";
font-weight			: normal;
line-height			: 1.5rem;
font-size			: 1rem;
}

.mz-table thead {
border-bottom		: 1px solid #D0D0D0;
color				: #666666;
font-size			: 0.8rem;
}

.mz-table td, .mz-table th {
padding			: 8px 5px;
}
/* Pour les tableaux de vignettes*/
.mz-tablewid {
display			: table;
width				: 100%;
border			: medium none;
border-collapse	: collapse;
border-spacing		: 0;
font-family			: "Roboto";
font-weight			: normal;
line-height			: 1.3rem;
font-size			: 0.8rem;
}

.mz-tablewid thead {
border-bottom		: 1px solid #D0D0D0;
color				: #666666;
font-size			: 0.7rem;
}

.mz-tablewid td, .mz-tablewid th {
/*padding			: 8px 5px;*/
}

[data-casse="min"] {
text-transform		:lowercase;
}

[data-casse="maj"] {
text-transform		:uppercase;
}




/* Pour le sélecteur de couleur */
.palette-color-picker-bubble {
z-index	: 10;
}

.perso-btn-palette-color-picker {
top: 10px;
}





/**********************/
/*     les onglets      */
/*********************/

.c-mz-onglet-nav {
height			: 32px;
box-shadow		: none;
background-color	: transparent;
}

.c-mz-onglet-nav-mini {
height			: 16px;
box-shadow		: none;
background-color	: transparent;
}

.c-mz-onglet-nav-vertical-ico {
width				: 48px; 
height			: auto;
box-shadow		: none;
background-color	: transparent;
}

.c-mz-onglet-nav > div > ul > li.c-mz-onglet-btn, .c-mz-onglet-nav-mini > div > ul > li.c-mz-onglet-btn {
margin-right		: 2px;
}

.c-mz-onglet-nav-vertical-ico > div > ul > li.c-mz-onglet-btn {
display			: flex;
align-items		: center;
justify-content		: center;
margin			: 0 0 2px 0;
}

.c-mz-onglet-actif {
background-color	: var(--custom-bgcolor) !important;
}

.c-mz-onglet-nav > div > ul >li.c-mz-onglet-actif {
height			: 36px;
}

.c-mz-onglet-nav-mini > div > ul >li.c-mz-onglet-actif {
height			: 18px;
}

.c-mz-onglet-nav-vertical-ico > div > ul >li.c-mz-onglet-actif {
width				: 100%;
}

.c-mz-onglet-nonactif {
background-color	: #c0c0c0 !important;
}

.c-mz-onglet-nav > div > ul >li > a.c-mz-onglet-lib {
height			: 32px;
padding-top		: 5px;
}

.c-mz-onglet-nav-mini > div > ul >li > a.c-mz-onglet-lib {
height			: 16px;
padding-top		: 2px;
font-size			: 0.6rem;
}

.c-mz-onglet-nav-vertical-ico > div > ul >li > a.c-mz-onglet-lib {
padding			: 5px 11px;
}

.c-mz-onglet-lib.c-noclic {
cursor			: default;
}

.c-mz-onglet-lib.c-noclic:hover {
background-color	: inherit;
}

.c-mz-onglet-contenu {
border-top			: 5px solid #247CE4;
margin-top		: 2px;
}

.c-mz-onglet-contenu-mini {
border-top			: 1px solid #247CE4;
margin-top		: 2px;
}

.c-mz-onglet-contenu-vertical {
border-left			: 5px solid #247CE4;
}


.c-mz-onglet-light {
font-family			: "Roboto";
text-align			: center;
}

.c-mz-onglet-light > div {
width				: var(--custom-mz-ong-light-width);
padding-bottom		: 10px;
display				: flex;
flex-direction		: row;
justify-content		: center;
align-items			: center;
}

.c-mz-onglet-light > div.c-actif {
border-bottom			: 5px solid var(--custom-mz-ong-light-color);
color				: #2D2D2D;
font-weight			: bold;
}

.c-mz-onglet-light > div.c-nonactif {
color				: #666666;
cursor				: pointer;
}

.c-mz-onglet-light > div.c-nonactif:hover {
transition			: all 0.3s ease;
padding-bottom		: 15px;
}

.c-mz-onglet-light-icon {
margin-right			: 15px;
}

.c-mz-onglet-light > div.c-nonactif:hover .c-mz-onglet-light-icon {
transition			: all 0.5s ease;
transform			: rotate(360deg);
}

/**************************************************/


/*************************************************************/
/*****************Selecteur de logos**************************/
/*************************************************************/

#i-select-logo-modal {
width					: 788px;
}

#i-select-logo-grille {
display					: grid;
grid-template-columns		: repeat(10, 1fr);
grid-auto-rows			: 74px;
width					: 740px;

}

#i-select-logo-grille > div {
align-self				: center;
justify-self				: center;
font-size				: 32px;
cursor					: pointer;
width					: 70px;
height					: 70px;
}

#i-select-logo-grille > div:hover {
transition				: all 0.1s ease;
font-size				: 50px;
color					: {P_PersoSoc};
box-shadow				: 0px 2px 7px #999999;
border-radius				: 5px;
}

/*************************************************************/



/*************************************************************/
/******************************POPUP**************************/
/*************************************************************/

#i-background-popup {
position				: fixed;
width					: 100%;
height					: 100%;
left					: 0px;
top						: 0px;
z-index					: 1997;
overflow				: hidden;
background-color		: #000000;
  		opacity					: 0.3;
} 

#i-popupperso-container {
position				: fixed;
left					: 0px;
top						: 0px;
z-index					: 1998;
width					: 100%;
height					: 100%;
overflow				: hidden;
display					: flex;
justify-content			: center;
align-items				: center;
}

#i-popupperso-titre {
width					: calc(100% - 115px);
}
#i-popupperso {
z-index					: 1999;
position				: fixed;
background-color		: #FAFAFA;
border-radius			: 20px;
box-shadow				: 0px 5px 10px #d0d0d0;
width					: 70%;
max-height				: calc(100% - 50px);
}

#i-popupperso-entete {
display					: flex;
padding					: 20px;
font-size				: 1.5rem;
line-height				: 1.5rem;
color					: #FFFFFF;
  	border-radius			: 20px 20px 0 0;
}
#i-popupperso-logo {
margin-right			: 20px;
}
#i-popupperso-contenu {
  		max-height				: calc(100vh - 150px);
  		padding					: 5px 20px 0 20px;
margin-bottom			: 25px;
margin-right			: 1px;
overflow				: auto;
}

.c-popupperso-divbtn {
margin					: 10px;
text-align				: center;
}

#i-popupperso-close {
z-index					: 1998;
width					: 100%;
height					: 100%;
}

/*************************************************************/


/*************************************************************/
/********************EN TETE SALARIE**************************/
/*************************************************************/
.c-entetesal-bloc {
height			: 60px;
  	display			: flex;
 	background		: #fafafa;
  //	box-shadow		: 5px 5px 5px #e0e0e0;
  	width			: 100%;
  	border-radius	: 15px;
  		margin			: 10px;
color			: #666666;
  	//	border			: 2px solid #f0f0f0;  		
}
.c-entetesal-btnretour {
text-align		: center;
flex-direction	: column;
justify-content	: center;
display			: flex;
}
.c-entetesal-separateur {
border-left 	: 1px solid #c0c0c0;
width		 	: 1px;
flex-direction	: column;
justify-content	: center;
display			: flex;
height			: 71px;
  		margin			: 7px 0 7px 15px;
}
.c-enetetsal-avatar-cercle {
width			: 50px;
height			: 50px;
border-radius	: 25px;
color			: #FFFFFF;
font-size		: 1.5rem;
overflow		: hidden;
}

.c-enetetsal-avatar-cercle img {
object-fit		: cover;
width			: 100%;
height			: 100%;
flex-shrink		: 0;
} 	
.c-enetetsal-avatar-nompren {
font-size		: 1.4rem; 
padding			: 3px 0 0 0; 
min-height 		: 32px; 
max-width		: 600px;
margin-right	: 10px;
}
.c-entetesal-bloctitre{
font-size		: 1.4rem; 
display			: flex;
margin			: 15px;
}
.c-entetesal-bloctitre-logo {
justify-content	: center;
 	display			: flex;
  	flex-direction	: column;
  	font-size		: 30px;
}
.c-entetesal-bloctitre-titre {
justify-content	: center;
 	display			: flex;
  	flex-direction	: column;
  	font-size		: 25px;
  	margin-left		: 15px;
  	width			: max-content;
}

.c-entetesal-unecol {
  	padding			: 0 25px;
  	display			: flex;
  		flex-direction	: column;
  		justify-content	: center;
}

/*************************************************************/