/*LAYOUT*/
.body {
	width: 100%;
	height: fit-content;
	margin: 0;
} 

.sf-minitoolbar {
	z-index: 999!important;
}

/* > TOUTE LA PARTIE SIDEBAR + FENETRE */
.fenetre {
	width: auto;
	width: -webkit-fill-available;
	height: fit-content;
	min-height: 100vh;
	padding: 39px 0 125px 38px;
	margin: 0;
	background-color: var(--color-graylight);
	position: relative;
	overflow-x: clip;
	transition: all .4s ease-in-out;
}

.large-sidebar .fenetre {
	padding-left: 200px;
}

.dashboardLayout .fenetre {
	padding: 39px 0 125px 250px;
}

/* > TOUTE LA PARTIE FENÊTRE (STATISTIQUES + BOUTONS + FONCTIONS)*/
.fenetre-fonction-boutons {
	background-color: var(--color-light);
	border-radius: 2px;
	width: 90%;
	margin: 10px auto;
	padding: 10px;
}

.bloc-blanc-BS .fenetre-fonction-boutons, .bloc-blanc .fenetre-fonction-boutons {
	width: 100%;
	padding: 0;
	margin-top: 0;
	position: relative;
	z-index: 400;
}

.fenetre-fonction-boutons input, .bloc-affichage input , .bloc-affichage .dropdown-toggle, .lbSetPage {
	border: solid 1px var(--color-medium);
	background: none;
	height: 19px; /* pas !important sinon les dropdowns sont hors cadre*/
}

.fenetre-fonction-boutons input, .bloc-affichage input {
	/* text-align: right; SINON LA RECHERCHER DANS LES POPUP DE CONFIGURATION EST ALIGNÉE À DROITE */
	padding: 0px;
	padding-right: 5px;
	margin-right: 5px;
}

.fenetre-fonction-boutons .btn {
	margin-bottom: 0!important;
}

.bloc-affichage .dropdown-toggle {
	padding: 0 25px 0 5px;
}

.bloc-affichage .dropdown-toggle {
	padding: 0 25px 0 5px;
	border: solid 1px var(--color-medium)!important;
	background: none!important;
}

.fenetre-fonction-boutons .btn {
	margin-bottom: 0!important;
}

.fenetre-fonction-menu {
	width: 98%; /* pas 99% sinon les fiches sont déformées */
	margin: 20px 15px 20px auto;
	min-height: 60vh;
}

.fenetre-fonction {
	width: 98%; /* pas 99% sinon les fiches sont déformées */
    /* height: fit-content; */
    margin: 0 auto;
	overflow-x: clip;
	min-height: 80vh;
} 

/* > TOUTE LA PARTIE FENÊTRE (FONCTION SEULEMENT) */
/* EN TETE */
.img-entete {
    margin: 0 auto;
    height: 100%;
    width: 100%;
	align-items: center;
    display: flex;
    overflow: hidden;
	position: relative;
}

.img-profil {
    margin: 0 auto;
	max-height: 300px;
    width: 100%;
	align-items: center;
    display: flex;
    overflow: hidden;
	position: relative;
}

.logo-entete {
	position: absolute;
	top: 0;
    right: 0;
    height: 100%;
    padding: 10px;
}

/*HEADER*/
.header-connexion {
	position: absolute;
	top: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	border: solid 1px var(--color-gray);
	width: 100%;
	height: 50px;
	background-color: var(--color-light);
	z-index: 990;
}
.header {
	height: 39px;
	width:  100vw;
	background-color: var(--color-light);
	color: var(--color-dark);
	display: flex;
	flex-direction: row;
	align-items: center;
	position: fixed;
	justify-content: space-between;
	z-index: 990;
	/* box-shadow: 0px 3px 6px #00000029; */
	padding-left: 200px;
	border-bottom: solid 1px var(--color-gray);
}

.dashboardLayout .header {
	padding-left: 250px;
}

	.header > div {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 50%;
		height: 39px;
	}

		.header > div:last-child {
			justify-content: flex-end;
		}

	.header-logo {
		width: fit-content;
	    height: fit-content;
    	margin: 2px 20px 0px 40px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.dashboardLayout .header-logo {
    	margin: 6px 20px 0px 20px;
	}
		.header-logo img {
			width: auto;
			height: 34px;
		}


	.header-codebar, .header-notification, .header-action {
		width: fit-content;
		height: 100%;
		margin: auto 10px;
		cursor: pointer;
	    display: flex;
		align-items: center;
	}

	.header-import {
		margin: auto 10px;
	}

		.header-codebar span, .header-notification span, .header-action span {
			width: 100%;
			text-align: center;
		}

	.header-recherche {
		width: 50%;
		align-items: center;
		margin: auto 10px;
	}

	.header-btn {
		width: fit-content;
		height: fit-content;
		margin: auto 10px!important;
		background-color: var(--color-dark);
		box-shadow: 0px 3px 6px #00000029;
		border-radius: 2px;
		color: var(--color-light);
		padding: 5px 20px;
		cursor: pointer;
		padding: 5px 15px!important;
	}

	.header-btn p {
		margin: auto!important;
		font-size: 8.8px; /*14px*/
		white-space: nowrap;
	}

	.header-btn:hover {
		box-shadow: inset 0px 3px 6px #00000029;
	}

	.menu-notification {
		position: absolute;
	    right: 10px;
		top: 40px;
		background-color: var(--color-light);
		box-shadow: 0px 3px 6px #00000029;
		width: 20%;
        height: fit-content;
        max-height: 60vh;
    	overflow-y: auto;
	    display: none;
	}
	.menu-notification.is-open {
		display: block;
		width: min(430px, calc(100vw - 20px));
		z-index: 100;
	}
	.notification-badge {
		position: absolute;
		top: -6px;
		right: -8px;
		min-width: 17px;
		width: fit-content;
		padding: 1px 4px;
		border-radius: 10px;
		background: var(--color-red);
		color: var(--color-light);
	}
	    .menu-notification-item {
	    	padding: 5px 10px;
		    cursor: pointer;
		    margin: 15px auto;
	    }
	    	.menu-notification-item .pastille-notification {
	    		width: 10px;
	    		height: 10px;
	    		border-radius: 50%;
	    		background-color: var(--color-dark);
	    		margin-top: 3px;
	    	}

	    	.menu-notification-item p {
	    		margin: 0;
	    	}

	    	.menu-notification-item .notification-titre {
	    		margin: 0 10px;
	    	}
	    .menu-notification-item:hover {
	    	background-color: var(--color-graylight);
	    }
	.header-notification:hover > .menu-notification {
		display: initial;
	}

	.menu-fav-action {
		position: absolute;
	    right: 110px;
    top: 40px;
	    background-color: var(--color-light);
	    box-shadow: 0px 3px 6px #00000029;
	    display: none;
	}

	    .menu-fav-action-item {
			padding: 10px 25px;
		    cursor: pointer;
	    }

	    	.menu-fav-action-item p {
	    		margin: 0;
	    	}
	    .menu-fav-action-item:hover {
	    	background-color: var(--color-graylight);
	    }
	.header-action:hover > .menu-fav-action {
		display: initial;
	}

	.header-pointage {
		width: fit-content;
		align-items: center;
		cursor: pointer;
		height: 100%;
	}

	.menu-pointage {
		position: absolute;
		right: 100px;
		top: 40px;
	    background-color: var(--color-light);
	    box-shadow: 0px 3px 6px #00000029;
	    display: none;
	}

	.menu-pointage-item {
		display: flex;
		flex-direction: row;
		padding: 10px 22px 10px 22px;
		cursor: pointer;
		width: 100%;
	}

	.menu-pointage-item p {
		margin: 0;
		margin-left: 5px;
	}

	.menu-pointage-item:hover {
		background-color: var(--color-graylight);
	}
	.header-pointage:hover > .menu-pointage {
	display: initial;
	}

	.header-user {
		width: fit-content;
		align-items: center;
		cursor: pointer;
		margin-right: 30px;
		padding-left: 10px;
		position: relative;
		height: 100%;
	}

	.header-user p {
		white-space: nowrap;
	}

		.header-user span {
			margin: auto 10px;
		}

	.menu-admin {
		position: absolute;
		width: 100%;
	    right: 0;
    	top: 40px;
	    background-color: var(--color-light);
	    box-shadow: 0px 3px 6px #00000029;
	    display: none;
	}

		.menu-admin-item {
			padding: 10px 22px 10px 13px;
		    cursor: pointer;
			display: block;
			width: 100%;
		}

			.menu-admin-item p {
				margin: 0;
			}

		.menu-admin-item:hover {
			background-color: var(--color-graylight);
		}
	.header-user:hover > .menu-admin {
		display: initial;
	}

	.header-user > p > span {
		margin: 0;
	}

/*SIDEBAR*/
.sidebar {
	width: 38px;
	height: 100vh;
	/* background-image: linear-gradient(240deg, var(--color-dark) 0%, var(--color-darkprimary) 74%); */
	background-color: var(--color-dark);
	color: var(--color-light);
	position: fixed;
	z-index: 997;
	transition: all .4s ease-in-out;
}

.large-sidebar .sidebar {
	width: 200px;
}

/* .sidebar img {
	width: 30px;
	margin-left: 10px;
} */

.open-sidebar {
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	cursor: pointer;
	height: 39px;
	width: 39px;
}

	.sidebar-icon {
		width: 100%;
		cursor: pointer;
		background-color: transparent;
		height: 45px;
		display: flex;
		/* justify-content: center; */
		align-items: center;
		position: relative;
	}

	.sidebar-icon > p {
		transform: scaleX(0);
		width: 0;
		overflow: hidden;
		transition: all .4s ease-in-out .1s;
	}

	.large-sidebar .sidebar .sidebar-icon > p {
		transform: scaleX(1);
		width: fit-content;
	}

	.dashboardLayout .sidebar-icon {
		justify-content: start;
		padding-left: 20px;
		margin-bottom: 20px;
	}

		.sidebar-icon.active {
			background-color: var(--color-medium);
		}

		.sidebar-icon span {
			font-size: 14.4px;
		    width: 38px;
		    text-align: center;
		}

		.dashboardLayout .sidebar-icon span {
			font-size: 19.2px;
			width: fit-content;
			margin-right: 20px;
		}

	.sidebar-icon.on::before {
		content: '';
		display: block;
		width: 2px;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-color: var(--color-graylight);
	}

	.megamenu {
		position: fixed;
		min-width: 65vw;
		max-width: 90vw;
		width: fit-content;
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		background-image: linear-gradient(90deg, var(--color-dark) 0%, var(--color-darkprimary) 74%);
		color: var(--color-light);
		margin-left: 38px;
		padding: 35px 50px 25px 25px;
		border-left: solid 2px var(--color-medium);
	    transform: translateX(-100%);
	    transition: all .4s ease-in-out;
		visibility: hidden;
	    z-index: 996;
		transition: all .4s ease-in-out;
	}

	.large-sidebar .megamenu {
		margin-left: 200px;
	}

	.dashboardLayout .megamenu {
		margin-left: 250px;
	}

		.megamenu.visible {
		    transform: translateX(0);
		    visibility: visible;
	        z-index: 996;
		}
	.megamenu > div:last-child {
		margin-bottom: 30px;
	}

	.megamenu > div > div {
		margin: 10px 50px;
	}


	.titre-categorie {
		font-size: 9.6px;
		font-size: 13.6px;
		text-transform: uppercase;
		color: var(--color-light);
		white-space: nowrap;
		cursor: pointer;
		font-weight: 600;
	}

	.sous-categorie {
		display: flex;
		flex-direction: column;
	    margin: 15px 0;
	}

		.titre-sous-categorie, .sous-categorie >  a {
			font-size: 8.8px;
			font-size: 12px;
			white-space: nowrap;
			width: 100%;
			padding: 0 10px;
			margin: 10px 0;
			position: relative;
		}

		.titre-sous-categorie {
			color: var(--color-light);
			text-decoration: underline;
		}
		
		.sous-categorie >  a {
			color: var(--color-light);
			text-decoration: none;
		}

			.sous-categorie > a:hover, .titre-sous-categorie:hover {
				background-color: var(--color-medium);
				color: var(--color-dark);
			}
		.sous-categorie > .inactif {
			color: var(--color-yellow);
		}

		.titre-sous-categorie {
		font-size: 8.8px;
		font-size: 13.6px;
		color: var(--color-mediumdark);
		white-space: nowrap;
		text-decoration: underline;
		text-transform: uppercase;
		font-weight: 600;
	}

	.megamenu .config {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: absolute;
		right: 30px;
		bottom: 30px;
	}

	.megamenu .config > a {
		cursor: pointer;
		color: var(--color-medium);
		text-decoration: none;
	}

	.megamenu .config > a:hover {
		color: var(--color-graylight);
	}

/* FOOTER */
.footer {
	/* background-color: var(--color-graylight); */
	background-image: linear-gradient(90deg, var(--color-dark) 0%, var(--color-darkprimary) 74%);
	border-top: solid 1px var(--color-light);
    width: 100%;
    height: 115px;
    color: var(--color-gray);
    position: relative;
    padding: 10px 60px 30px 58px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    right: 0;
    bottom: 0;
	z-index: 988;
}

.large-sidebar .footer {
	padding: 0 60px 0 220px;
}

.footer p {
	margin: 0;
}

/* ERROR*/
.error {
	background-color: var(--color-lightred)!important;
	/* position: absolute; */
    /* top: 25px; */
    height: fit-content;
    width: 100%;
    z-index: 999;
}

.error-input {
	background-color: var(--color-lightred)!important;
	border-color: var(--color-red)!important;
}

.error.success {
	background-color: var(--color-lightgreen)!important;
}

.error.warning {
	background-color: var(--color-lightyellow)!important;
}

.error:has(ul li) {
	margin-bottom: 10px;
}

.error p {
	color: var(--color-red)!important;
}

.error.success p {
    color: var(--color-green);
}


.error.warning p {
    color: var(--color-darkyellow);
}

.error * {
	color: var(--color-warning)!important;
}

.error.success * {
	color: var(--color-darkgreen)!important;
}

.error.warning * {
	color: var(--color-darkyellow)!important;
}

.error ul {
	list-style: none;
	margin: 0;
}
.error ::marker {
	display: none;
}

.error li {
	display: flex;
	align-items: start;
	font-size: 11.2px;
    padding: 5px 10px 5px 30px !important;
    flex-direction: column;
    position: relative;
}

.error li::before {
	display: inline;
	content: '\e000';
	font-family: 'Material Symbols Outlined';
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
	font-size: 14.4px;
	margin-right: 5px;
	position: absolute;
    left: 10px;
	top: 5px;
}

.error.warning li::before {
	display: inline;
	content: '💡';
    font-size: 12.4px;
    margin-right: 5px;
    position: absolute;
    left: 10px;
    top: 1px;
}

.error.success li::before {
	content: '\e5ca';
}

/* SUCCESS */
.successMessage {
    position: absolute;
    height: 0;
    overflow: hidden;
    width: 100%;
    z-index: 99;
	transition: all .5s ease-in-out;
}

.successMessage.active {
	height: 40px;
}

.successMessage > div {
	background-color: var(--color-lightblue)!important;
    height: fit-content;
    width: 100%;
    z-index: 999;
	margin-bottom: 10px;
}

.successMessage p {
	color: var(--color-blue)!important;
}

.successMessage * {
	color: var(--color-blue)!important;
}

/* BLOCS VOLETS */
.bloc-volets {
	height: auto;
}

.bloc-volet {
	height: 100%;
}

/* BLOC DATA */
.blocData {
    position: absolute!important;
    right: 5px!important;
    bottom: 0!important;
	pointer-events: initial!important;
	cursor: help!important;
}

.blocData > span {
	font-size: 12px!important;
    color: var(--color-gray)!important;
}

.blocData .data {
	position: absolute!important;
	width: fit-content!important;
    right: 17px!important;
    bottom: 0!important;
    border: solid 1px var(--color-light)!important;
	background-color: var(--color-graylight)!important;
	padding: 5px 10px!important;
	border-radius: 2px!important;
	display: none!important;
	flex-direction: column!important;
}

.blocData:hover .data {
	display: flex!important;
}

.blocData .data span {
	font-size: 8px!important;
	white-space: nowrap!important;
    color: var(--color-medium)!important;
	margin: 0!important;
}

/* FOOTER FIXED */
.quickbar {
	position: fixed;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	bottom: 0;
	left: 0;
	z-index: 999;
	width: 100vw;
	height: 36px;
	background-color: var(--color-dark);
	padding: 2px 7px;
}

.quickbar > div:first-child::before {
	content: "\e8ab";
	font-family: 'Material Symbols Outlined';
	color: var(--color-blue);
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
	margin-right: 30px;
}

.quickbar > div, .quickbar > a, .quickbar > span {
	margin-right: 40px;
	cursor: pointer;
}

.quickbar span {
	color: var(--color-medium);
	font-size: 18px;
	margin-right: 6px !important;
	font-variation-settings: 'FILL' 0 !important;
}

.quickbar p {
	color: var(--color-light);
}

.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    z-index: 1000;
}

.turbo-progress-bar {
	background: var(--color-darkblue)!important;
}

/* FLASHBAGS */

.flashbag {
	position: fixed;
	z-index: 999;
    width: 100%;
    top: 0;
    left: 0;
    height: fit-content;
    height: 0;
    padding: 0 2px 0 40px;
	margin-top: 42px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.user-not-connected .flashbag {
	padding: 10px 2px 0 2px;
}

.flashbag-connexion {
	padding: 42px 2px 0 2px;
}

.flash-message {
	width: 100%;
    height: fit-content;
	padding: 10px 0px 10px 20px;
    z-index: 980;
    position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: var(--color-lightyellow);
    border: solid 1px var(--color-yellow);
	top: -500px;
	transition: all .5s ease-in-out;
}

.flash-message.fadeIn {
	top: 0px;
}

.flash-message span {
	font-family: 'Material Symbols Outlined';
	font-size: 20px;
	margin-right: 5px;
}

.flashbag-success span {
	color: var(--color-darkgreen);
}

.flashbag-error span {
	color: var(--color-warning);
}

.closeFlashbag {
	/* position: absolute;
    top: 1px;
    right: -2px; */
    color: var(--color-darkyellow)!important;
    font-size: 17px!important;
    font-weight: 300;
    cursor: pointer;
}

/* MOT DE PASSE */

.password {
	width: 100%;
	position: relative;
}

.password svg {
	cursor: pointer;
}

.password button {
	position: absolute;
	right: 5px;
	top: 6px;
	color: var(--color-medium);
	width: 16px;
	overflow: hidden;
}

.fake-password {
	position: relative;
	cursor: pointer;
}

.fake-password-btn {
	position: absolute;
	right: 5px;
	top: 6px;
	color: var(--color-medium);
	width: 16px;
}

.fake-password-btn:not(.active) > span:last-child, .fake-password-btn.active > span:first-child {
	display: none;
}

.fake-password > input {
	-webkit-text-security: disc;
}

.fake-password.active > input {
	-webkit-text-security: none;
}

input.cryptedInput, div.cryptedInput > input {
	-webkit-text-security: square;
}

/* AUTRES */
.tui-datepicker {
	padding: 5px 20px;
}

li.noMarker {
	list-style: none;
}