/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  @font-face {
	font-family: 'Material Symbols Filled';
	font-style: normal;
	src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v92/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format('woff2');
} */

input.mediumdark::placeholder {
	color: var(--color-mediumdark);
	font-weight: 400;
}


/* BARRE */
.barre {
	background-color: var(--color-OPdarkprimary)!important;
}

 .barre p {
	text-decoration: line-through;
	text-decoration-skip-ink: auto;
	color: var(--color-mediumdark)!important;
}

.barre span {
	text-decoration: none;
}

/* LIGNE */
.horizontale {
	width: 100%;
    height: 1px;
    border-bottom: solid 1px var(--color-gray);
    margin: 15px auto;
}

.horizontale.border-light {
    border-bottom: solid 2px var(--color-light);
}
.horizontale.border-electricblue {
    border-bottom: solid 2px var(--color-electricblue);
}

.verticale {
    height: 150px;
    margin: auto;
    width: 1px;
    border-left: solid 1px var(--color-gray);
}

.verticale.dashed {
    border-left: dashed 1px var(--color-gray);
}

.BGlightprimary .verticale {
	border-left: solid 1px var(--color-dark);
}

.pipeline-container .verticale {
	margin: 0 5px;
	height: -webkit-fill-available;
}

.legendeBar {
	height: 5px;
}

/* PASTILLES */
.pastille {
	background-color: #FE3B2F;
    color: var(--color-light);
    border: solid 1px var(--color-light);
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    margin: 0 6px;
    z-index: 450;
    font-size: 10.4px !important;
    font-weight: 600;
    width: 25px;
    height: 25px;
    top: -9px;
    right: -15px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pastilleSelect {
	width: 12px;
    height: 12px!important;
    display: inline-block;
    border-radius: 50%;
    margin-right: 5px;
}

.menu-item .pastille {
	top: -17px;
    right: -22px;
}

.pastille.small {
	width: 19px;
	height: 19px;
}


	.pastille p {
		margin: 0!important;
	}

	.legendeCircle {
		width: 13px;
		height: 13px;
		text-align: center;
		border-radius: 50%;
		padding: 3px;
		display: inline-block;
		z-index: 666;
		margin-left: 5px;
	}

.span-circle {
	border-radius: 50%;
	background-color: var(--color-gray);
	font-size: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 7px;
	height: 40px;
    width: 40px;
} 

.alerte {
	display: inline-block;
	width: 23px;
	height: 23px;
	background-color: var(--color-darkred);
	color: var(--color-graylight);
	border-radius: 50%;
	margin-left: -5px;
}

.pastille-contact {
	width: 30px;
    min-width: 30px;
    height: 30px;
	margin-right: 10px;
	border-radius: 50%;
	background-color: var(--color-light);
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	border: solid 1px var(--color-graylight);
    box-shadow: 0px 3px 6px #00000029;
}

.pastille-contact > div {
	background-color: var(--color-darkprimary);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pastille-contact > div > p, .pastille-contact > div > span {
	text-transform: uppercase;
	color: var(--color-light);
	font-size: 14.4px;
	margin: 0;
}

.pastille-contact img {
	object-fit: contain;
	width: 85%;
}

.pastille-orange {
	width: 5px;
    height: 5px;
    display: inline-block;
    background-color: var(--color-darkyellow);
    border-radius: 50%;
    margin-left: 2px;
}

.circle {
	border: solid 1.5px var(--color-graylight);
	border-radius: 50%!important;
	overflow: hidden;
    position: relative;
}

.point {
	display: inline-block;
	width: 8px!important;
	height: 8px!important;
	border-radius: 50%;
	margin-right: 5px;
}

.marker {
	display: inline-block;
	width: 5px;
	height: 100%;
	margin-right: 5px;
}

.pastilleTables {
	border-radius: 50%;
	width: 21px;
    height: 21px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
	margin-left: 10px;
	color: var(--color-light);
}

.pastille-info {
	width: 20px;
    height: 20px;
    background-color: var(--color-gray);
    color: var(--color-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 9.6px !important;
}

.pastille-carree {
	width: 25px;
    height: 25px;
    border-radius: 2px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 16px !important;
}

.pastille-carree.BGlightgreen {
	color: var(--color-green);
}

.pastille-carree.BGlightyellow {
	color: var(--color-yellow);
}

.pastille-carree.BGgraylight {
	color: var(--color-medium);
}

.pastille-carree.BGlilac {
	color: var(--color-pink);
}
/* BLOCS */
.bloc-details {
	background-color: var(--color-OPdark);
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	cursor: pointer;
	transition: opacity .35s linear;
	opacity: 0;
}

.details:hover > .bloc-details {
	opacity: 1;
}

.bloc-blanc, .mini-bloc-blanc {
	height: fit-content;
	background-color: var(--color-light);
	border-radius: 2px;
	border-radius: 2px;
	box-shadow: 0px 3px 6px #00000029;
	/* padding: 14px; sinon espace pas égal pour les label-categorie */
	padding: 20px;
	margin: 0 10px 10px auto;
	display: flex;
}

/* Les notifications longues restent lisibles sans agrandir le panneau latéral. */
.notification-item {
	position: relative;
	width: 100%;
	margin-right: 0;
	display: flex;
	flex-direction: column;
	padding: 10px 15px;
	background-color: var(--color-light);
	border-radius: 2px;
	border: solid 1px var(--color-gray);
	margin-bottom: 10px;
}
.notification-notification.unread {
	box-shadow: 0px 3px 6px #00000029;
	border-top: solid 2px var(--color-blue);
}
.notification-alerte.unread {
	box-shadow: 0px 3px 6px #00000029;
	border-top: solid 2px var(--color-red);
}
.notification-amelioration.unread {
	box-shadow: 0px 3px 6px #00000029;
	border-top: solid 2px var(--color-green);
}
.notification-hermes.unread {
	box-shadow: 0px 3px 6px #00000029;
	position: relative;
	overflow: hidden;
	border-top: none;
}
.notification-hermes.unread::before {
	content: '';
	display: block;
	background: var(--gradient-hermes90);
	height: 2px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.notification-item.read {
	background-color: #FFFFFF99;
}
.notification-item.read .titreNotification  {
	font-weight: 400!important;
}

.notification-item--truncated {
	max-height: 90vh;
	overflow: hidden;
	padding-bottom: 56px!important;
}

.notification-item--truncated::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 72px;
	background: linear-gradient(transparent, var(--color-light) 55%);
	pointer-events: none;
}

.notification-item__read-more {
    text-transform: uppercase;
    left: 0;
    bottom: 10px;
    z-index: 1;
    width: 100%;
    padding: 10px;
}

.notification-item__read-more[aria-expanded="false"] {
    position: absolute;
    backdrop-filter: blur(1px);
}

.notification-item__read-more[aria-expanded="true"] {
    position: relative;
    padding-bottom: 5px;
}

.mini-bloc-blanc {
	padding: 5px;
}

.bloc-noir {
	background-color: var(--color-dark);
    color: var(--color-light);
    padding: 20px;
    border: solid 1px var(--color-light);
	position: relative;
	border-radius: 3px;
	margin-bottom: 5px;
}

.bloc-noir p, .bloc-noir label, .bloc-noir input {
	color: var(--color-light);
	text-align: center;
}

.bloc-noir.pre-commercialisation, .bloc-noir.commercialisation, .bloc-noir.fin-commercialisation, .bloc-noir.usage {
padding: 0 20px 15px;
}

.bloc-noir.pre-commercialisation p {
	color: var(--color-yellow);
	margin: 10px 0 5px;
}

.bloc-noir.pre-commercialisation::after {
    background-color: var(--color-yellow);
}

.bloc-noir.commercialisation p {
	color: var(--color-green);
	margin: 10px 0 5px;
}

.bloc-noir.commercialisation::after {
    background-color: var(--color-green);
}

.bloc-noir.fin-commercialisation p {
	color: var(--color-red);
	margin: 10px 0 5px;
}

.bloc-noir.fin-commercialisation::after {
    background-color: var(--color-red);
}

.bloc-noir.usage p {
	color: var(--color-blue);
	margin: 10px 0 5px;
}

.bloc-noir.usage::after {
    background-color: var(--color-blue);
}

.bloc-gris {
	width: 95%;
	height: fit-content;
	background-color: var(--color-graylight);
	padding: 20px;
	margin: 3vh 0;
}

.bloc-blanc-BS {
	width: 95%;
	height: auto;
	background-color: var(--color-light);
	border-radius: 2px;
	/* padding: 14px; sinon espace pas égal pour les label-categorie */
	padding: 20px;
	margin: 0 10px 10px 0;
	position: relative;
}

.bloc-gradient {
	width: 100%;
	height: auto;
	background: radial-gradient(circle at top right, rgba(255,255,255,0.22), transparent 24%),
	linear-gradient(135deg, #143cb6 0%, #2456e6 38%, #6e40ff 70%, #cd47f4 100%);
	border-radius: 2px;
	padding: 20px;
	margin: 0 10px 10px 0;
	position: relative;
}

.bloc-gradientdark {
	width: 100%;
	height: auto;
	background: radial-gradient(circle at top right, rgba(122,92,255,0.22), transparent 30%),
	linear-gradient(135deg, #0f172f 0%, #132347 45%, #1d2f63 100%) !important;
	border-radius: 2px;
	padding: 20px;
	margin: 0 10px 10px 0;
	position: relative;
}

.bloc-gradient::after, .bloc-gradientdark::after {
	content: "";
    position: absolute;
    right: -40px;
    bottom: -30px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    filter: blur(8px);
}

.bloc-transparent {
	width: 100%;
	height: auto;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 2px;
	padding: 20px;
	margin: 0 10px 10px 0;
	position: relative;
}

.bloc-opacity {
	border-radius: 2px;
    padding: 5px 10px;
    margin: 5px 0 !important;
    border: solid 1px #FFFFFF12;
    background-image: linear-gradient(to right bottom, #ffffff00 0%, #FFFFFF10 77%) !important;
}

.bloc {
	height: auto;
	padding: 20px;
	margin: 0 5px 5px 0;
	border-radius: 3px;
}

.bloc-couleur {
	height: auto;
	padding: 20px;
	margin: 0 5px 5px 0;
	border-radius: 3px;
}

.bloc-couleur p, .bloc-couleur span {
	margin: 0;
	margin-bottom: 10px;
	color: var(--color-light);
	font-size: 11.2px;
	white-space: normal;
}

.bloc-couleur label {
	white-space: normal;
	text-align: center;
	display: inline-block;
    width: 100%;
	color: var(--color-light);
}

.bloc-couleur .material-symbols-outlined {
	margin: 0;
	color: var(--color-light);
	font-size: 19.2px;
	text-align: center;
	/* font-weight: 600; */
	width: 100%;
}

.bloc-couleur .menu-options .material-symbols-outlined {
	font-size: 14.4px!important;
}

.bloc-couleur input, .bloc-couleur .dropdown-toggle {
	background-color: transparent;
	border: none;
	color: var(--color-light);
}

.editable.bloc-couleur input, .editable.bloc-couleur .dropdown-toggle {
	border-left: 1px solid var(--color-medium);
    border-bottom: 1px solid var(--color-medium);
}

.bloc-couleur input[type="date"]::-webkit-calendar-picker-indicator {
	color: var(--color-light);
	fill: var(--color-light);
	stroke: var(--color-light);
}

.bloc-couleur.non-editable input, .bloc-couleur.non-editable .dropdown-toggle {
	color: var(--color-graylight);
}

.bloc-couleur .input-edit {
	display: flex;
	align-items: center;
}

.bloc-couleur .input-edit::before {
	content: "\e3c9";
	display: block;
	width: 15px;
	font-family: 'Material Symbols Filled';
	font-size: 13.6px;
	color: var(--color-dark);
	fill: 1;
}

.BGred .input-edit::before, .BGfullred .input-edit::before {
	color: var(--color-darkred);
}

.BGblue .input-edit::before {
	color: var(--color-darkprimary);
}

.bloc-couleur .circle {
	width: 48px;
    height: 48px;
    padding: 10px;
	/* box-shadow: inset 0px 3px 6px #00000029; */
}

.circle.big {
	width: 50px;
    height: 50px;
}

.circle.bigbig {
	width: 70px;
    height: 70px;
}

.bloc-couleur .circle.euro {
	padding: 10px 12px 10px 8px;
}

.BGred .circle {
	border-color: var(--color-darkred);
}

.BGblue .circle {
	border-color: var(--color-darkprimary);
}

.BGgreen .circle {
	border-color: var(--color-darkgreen);
}

.blocFile {
	padding: 5px 10px;
	background-color: var(--color-graylight);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
    width: fit-content;
	max-width: 100%;
    min-width: 40%;
	cursor: pointer;
}

.bloc-web {
	border-radius: 2px;
	box-shadow: 0px 3px 6px #00000029;
	padding: 10px;
	background-image: linear-gradient(240deg, var(--color-dark) 0%, var(--color-darkprimary) 74%);
}

.bloc-web.obscur {
	background-image: linear-gradient(240deg, #000 0%, var(--color-OPdarkprimary) 74%);
}

.bloc-section-web {
	background-image: linear-gradient(to left top, #ffffff8c 0%, #FFFFFF08 51%)!important;
	border-radius: 2px;
	padding: 5px 10px;
    margin: 5px 0!important;
	border: solid 1px #FFFFFF12;
}

.bloc-section-web input[type="number"], .bloc-section-web input[type="text"], .bloc-section-web .dropdown {
	margin: 3px 0;
}

.bloc-web .bloc-section-web, .label-sous-categorie .bloc-section-web {
	background-image: linear-gradient(to left top, #FFFFFF15 0%, #FFFFFF08 51%)!important;
}

.bloc-web .bloc-section-web.click, .label-sous-categorie .bloc-section-web.click {
background-color: #FFFFFF00;
transition: all .35s linear;
cursor: pointer;
}

.bloc-web .bloc-section-web.click:hover, .label-sous-categorie .bloc-section-web.click:hover {
	background-color: #FFFFFF12;
}

.bloc-web p, .bloc-web span, .bloc-web label, .bloc-web input, .bloc-web .dropdown-toggle::after,
.BGblack p, .BGblack span, .BGblack label, .BGblack input, .BGblack .dropdown-toggle::after,
.BGfullblack p, .BGfullblack span, .BGfullblack label, .BGfullblack input, .BGfullblack .dropdown-toggle::after {
	color: var(--color-gray)!important;
}

.bloc-web .recherche-bar {
		background-color: var(--color-graylight)!important;
		width: 70%;
		margin: 2px 2px 2px 5px!important;
		padding: 2px 2px 2px 25px!important;
		color: var(--color-dark)!important;
}

.bloc-web .recherche-bar::placeholder {
	color: var(--color-dark)!important;
}

.bloc-web .checkbox-wrapper input[type="checkbox"], .bloc-web .checkbox-wrapper input[type="checkbox"]:checked {
	border-color: var(--color-gray)!important;
}

.bloc-web .checkbox-wrapper svg .checkbox {
color: var(--color-gray)!important;
}

.bloc-image {
	width: 170px;
	height: 170px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	cursor: pointer;
	background-color: var(--color-medium);
	padding: 5px;
	margin-right: 5px;

}

.bloc-image p {
	margin-top: 0;
	margin-bottom: 5px;
	color: var(--color-light);
	font-weight: 600;
}

.bloc-image img {
	max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
}

.bloc-border {
	height: fit-content;
	border-radius: 0 5px 0 0;
	border: solid 1px var(--color-dark);
	padding: 10px;
	margin: 10px 0 5px;
}

.bloc-top-right-border {
	height: fit-content;
	border: solid 1px var(--color-dark);
	border-bottom: none;
	border-left: none;
	padding: 0 0 10px 10px;
	margin: 10px 0 5px;
}

.bloc-less-bottom-border {
	height: fit-content;
	border-radius: 0 5px 0 0;
	border: solid 1px var(--color-dark);
	border-bottom: none;
	padding: 10px;
	padding-bottom: 0;
	margin: 10px 0 5px;
}

.bloc-less-left-border {
	height: fit-content;
	border-radius: 0 5px 0 0;
	border: solid 1px var(--color-dark);
	border-left: none;
	padding: 10px;
	padding-left: 0;
	margin: 10px 0 5px;
}

.bloc-bottom-left-border {
	height: fit-content;
	border: solid 1px var(--color-dark);
	border-top: none;
	border-right: none;
	padding: 0 0 10px 10px;
	margin: 10px 0 5px;
}

.bloc-top-border {
	height: fit-content;
	border-top: solid 1px var(--color-gray);
	padding: 20px 0 0;
	margin: 20px 0 5px;
}

.bloc-bottom-border {
	border-bottom: solid 1px var(--color-dark);
}

.bloc-top-left-border {
	height: fit-content;
	border: solid 1px var(--color-dark);
	border-bottom: none;
	border-right: none;
	padding: 10px 0 0 10px;
    margin: 10px 0 5px 0px;
}

.bloc-bottom-right-border {
	height: fit-content;
	border: solid 1px var(--color-dark);
	border-top: none;
	border-left: none;
	padding: 0 10px 10px 0;
	margin: 10px 0 5px 15px;
}

.bloc-web .bloc-top-right-border {
    border-color: var(--color-gray);
}

.bloc-web .dropdown-toggle, .bloc-web input {
    border: none;
    color: var(--color-gray);
    /* text-align: right; */
    background-color: #FFFFFF10;
    box-shadow: inset 0px 3px 6px #00000029;
}

.bloc-documents, .bloc-message {
	height: fit-content;
	border-radius: 2px;
	border: solid 1px var(--color-gray);
	padding: 15px 15px 0;
	margin: 10px 0 5px;
	position: relative;
}

.bloc-message::after {
	content: "\e163";
	font-family: 'Material Symbols Outlined';
	display: block;
	font-size: 16px;
	bottom: 10px;
	right: 10px;
	position: absolute;
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.bloc-titre {
	display: flex;
	flex-direction: row;
	width: fit-content;
	/* margin: 10px 0; sinon dans l'entête il y a trop d'espaces*/
	align-items: center;
	max-width: 100%;
}

.bloc-titre > p {
	margin: 0 15px 0 0;
	font-size: 16px;
	white-space: nowrap;
	font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bloc-border > p {
	margin: 0;
	margin-bottom: 10px;
	text-transform: uppercase;
	font-size: 8.8px; /*14px*/
	font-size: 10.4px;
	white-space: normal;
	text-align: center;
	font-weight: 600;
}

.bloc-table {
	border: solid 1px var(--color-gray);
	padding: 2px 4px;
}

.BGlightprimary span, .BGlightprimary p, .BGlightprimary label {
	color: var(--color-dark)!important;
}

.bloc-legende {
	position: absolute;
    bottom: 15px;
    left: 5px;
    padding: 10px 20px;
    background-color: var(--color-light);
    width: fit-content;
}

/* LABELS */
.label-bloc-categorie {
	margin-bottom: 20px;
    padding: 5px 10px;
    background-color: var(--color-medium);
    border-radius: 3px;
    width: 100%;
	text-transform: uppercase;
	color: var(--color-light);
	display: flex;
	flex-direction: row;
	align-items: center;
}

.label-bloc-categorie p {
	margin: 0 5px;
}

.label-categorie {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
	border-bottom: solid 1px var(--color-gray) ;
	padding-bottom: 5px;
	margin-bottom: 20px;
	position: relative;
}

.label-categorie .btn > span {
	font-variation-settings: 'FILL' 1, 'wght' 800, 'GRAD' 0, 'opsz' 48;
}
/* 
.non-editable .label-categorie input {
	border-right: none;
	border-bottom: none;
	color: var(--color-graylight);
} */
/* 
.label-categorie input {
    border: solid 0.5px var(--color-gray);
    text-transform: uppercase;
    background: var(--color-OPdarkprimary);
    color: var(--color-gray);
    padding-left: 3px;
    margin-left: 3px;
} */

.bloc-web .label-categorie {
	background-image: none;
	margin: 6px 0 14px;
}

.label-categorie > p, .label-categorie > p > span, .label-nv-autre-categorie > p, .label-categorie > div:first-child p {
	color: var(--color-dark);
	font-size: 11.2px;
	font-size: 13.6px;
	margin: 0;
    text-transform: uppercase;
	font-weight: 600;
}

.boiteDialogue .label-categorie > p, .boiteDialogue .label-nv-autre-categorie > p, .boiteDialogue .label-categorie > div:first-child > p {
	color: var(--color-light);
}

.label-categorie > *:first-child {
	width: 100%;
	/* overflow: hidden; sinon les menu sont invisibles*/
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-left: 10px;
}

.slide .label-categorie > *:first-child {
	margin-left: 0px;
}

.titreStats {
	width: 100%;
	padding: 5px;
	text-align: center;
	background-color: var(--color-OPdarkprimary);
    color: var(--color-darkprimary);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.BGfulldarkprimary label, .BGfulldarkprimary p, .BGfulldarkprimary span {
	color: var(--color-light);
}

.label-gray, .label-gray span {
	background-color: var(--color-graylight);
}

.label-sous-categorie {
    color: var(--color-light);
    margin: 0 0 10px;
    padding: 3px 0px;
	text-transform: uppercase;
	background-color: var(--color-mediumblue);
	background-color: var(--color-mediumprimary) !important;
	border-radius: 2px;
	width: 100%;
	height: 36px;
}

.label-sous-categorie p {
	margin: 0;
}

.label-sous-categorie a {
    color: var(--color-light);
}

/* BARRE DE RECHERCHE */
.recherche-bar {
	background-color: transparent!important;
	border: none!important;
	box-shadow: inset 0px 3px 6px #00000029;
	padding: 0!important;
	margin-left: -20px;
	width: 0;
	z-index: 1;
	transition: all 650ms ease;
}

.header-recherche .recherche-bar {
	margin-left: -20px;
    border-radius: 2px;

}
	.recherche-bar::placeholder {
		color: var(--color-light);
	}

	.recherche-bar.visible::placeholder {
		color: var(--color-dark);
		transition: all 380ms ease 650ms;
	}

	.recherche-bar.visible {
		width: 80%;
		padding: 2px 2px 2px 25px!important;
	}

	.onglet-documents .recherche-bar.visible {
		padding: 2px 5px!important;
	}

	.recherche-config {
		background-color: transparent!important;
		border: solid 1px var(--color-blue);
		border-radius: 0 3px 0 0;
		padding: 3px 5px;
		position: relative;
		height: 25px;
	}

	.recherche-config input {
		margin-bottom: 0!important;
		height: 20px;
		min-height: 20px!important;
		background: none!important;
	}

	.recherche-valid {
		position: absolute;
		left: 105%;
	}
/*PRIMARY*/
.primary, .primary input {
	color: var(--color-dark);
	border-color: var(--color-dark);
}

/* SPECIAL CLASS */
.marketplaces {
	height: 40px;
    width: auto;
}

.add {
    color: var(--color-medium);
    cursor: pointer;
	margin-right: 5px;
	font-size: 20px;
}

.nom-fichier {
	margin: 0;
	text-decoration: underline;
	white-space: nowrap;
}

.nom-fichier p {
	font-size: 6.4px;
	width: 90%;
	overflow-x: hidden;
	margin: 3px 1px;
}

.nom-fichier span {
	font-size: 8px;
}

.flag-icon {
	margin-left: 5px;
	background-position: left;
	font-size: 12px;
}

.flag-icon.active {
	font-size: 16px;
	box-shadow: 0px 3px 6px #00000029;
}

.euros::after {
	display: relative;
	content: '€';
}

.infos {
	width: fit-content;
	display: flex;
	flex-direction: row;
}

.infos > p {
	margin: auto 10px!important;
}

.surbrillance {
	color: var(--color-dark);
	font-variation-settings: 'FILL' 0;
	transition: all .35s linear;
}

.bloc-couleur .surbrillance {
	color: var(--color-light);
}

.surbrillance.on {
	font-variation-settings: 'FILL' 1;
}

.visibilite-fichiers > span, .visibilite-multiple > span {
	color: var(--color-medium);
}

.visibilite-fichiers > span.active, .visibilite-multiple > span.active {
	color: var(--color-dark);
}

.smallBarC {
	height: 50px;
    max-width: 150px;
}

span.symbol-mouvement {
	color: var(--color-green);
	transform: rotate(270deg);
	font-size: 12px!important;
}

.gln {
	width: 150px;
	max-height: 30px;
	object-fit: cover;
	object-position: bottom;
}

.more {
	padding: 3px 13px;
    background-color: var(--color-lightprimary);
    color: var(--color-darkprimary);
    border-radius: 20px;
    margin-left: 10px;
	cursor: pointer;
}

.configCodes {
    width: 150px;
    max-width: 150px;
    max-height: 45px;
	object-fit: cover;
	object-position: bottom;
}

.commentaire-flottant {
	position: absolute;
    z-index: 800;
    background-color: var(--color-light);
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
	pointer-events: initial!important;
}

.liste-etablissements {
	position: absolute;
    right: 0;
    background-color: var(--color-light);
    height: 100%;
	z-index: 100;
}

.visibility > p:first-child, .visibility.active > p:nth-child(2),.visibility > span:first-child, .visibility.active > span:nth-child(2), .visibility > div:first-child, .visibility.active > div:nth-child(2) {
	display: block!important;
}

.visibility > div:first-child, .visibility.active > div:nth-child(2) {
	display: flex!important;
}

.visibility.active > p:first-child, .visibility > p:nth-child(2),.visibility.active > span:first-child, .visibility > span:nth-child(2), .visibility.active > div:first-child, .visibility > div:nth-child(2) {
	display: none!important;
}

.bloc-cycle > div {
	margin-bottom: 5px;
}

.attributs-dropdown {
	height: fit-content!important;
}

.attributs-dropdown  .dropdown-toggle {
	display: flex;
	flex-wrap: wrap;
	overflow: visible;
	height: fit-content;
	min-height: 17px;
}

.etiquette-attribut, .etiquette-tags {
    padding: 2px 8px;
    border-radius: 2px;
    background-color: var(--color-OPdarkprimary);
    margin: 0 3px 3px 0;
    text-transform: uppercase;
    color: var(--color-darkprimary);
    height: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.etiquette-tags {
    padding: 2px 2px 2px 8px;
}

.etiquette {
    padding: 2px 13px;
    min-width: 40px;
    border-radius: 2px;
    background-color: var(--color-lightprimary);
    text-transform: uppercase;
    color: var(--color-darkprimary);
    height: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.bouton-tableaux.active .etiquette {
	background-color: var(--color-darkprimary)!important;
    color: var(--color-lightprimary)!important;
}

.removeTag {
	font-family: 'Material Symbols Outlined';
    font-size: 15px;
    height: 12px;
    line-height: 12px;
    display: inline-block;
    margin-left: 5px;
    padding-left: 3px;
    border-left: solid 1px var(--color-darkprimary);
	cursor: pointer;
}

.non-editable .etiquette-attribut, .non-editable .etiquette-tags {
	margin-bottom: 3px;
}

.image-fiche {
	width: 365px !important;
    height: 257px !important;
}

.image-repertoire {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.image-crm {
	width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
}

.image-entete {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.image-profil {
    min-width: 60%;
    min-width: 60%;
    /* height: 100%; */
    object-fit: cover;
    object-position: top;
}

.bullesPersonnes {
	position: relative;
	height: 100px;
	width: 50px;
}

.bullesPersonnes > div {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
}

.bullesPersonnes > div:first-child {
    position: absolute;
    top: 0;
    z-index: 2;
}

.bullesPersonnes > div:nth-child(2) {
	position: absolute;
    top: 30px;
    z-index: 1;
}

.bullesPersonnes > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.non-editable .only-edit {
	visibility: hidden;
}

.editable .only-edit {
	visibility: visible;
}

.titrePage {
	margin: 0 5px;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 10.4px;
	width: fit-content;
	white-space: nowrap;
}

.swap {
	width: 17px;
    position: relative;
    height: 17px;	
	margin: 0 10px;
}

.swap span {
	font-size: 11.2px;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
    position: absolute;
}

.swap span:first-child {
	left: 0;
    bottom: 0;
	color: var(--color-blue);
}

.swap span:last-child {
	right: 0;
    top: 0;
}

.span-recap {
	height: fit-content;
	width: fit-content;
	padding: 9px 2px;
}

.container {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: 10px;
	position: relative;
	border-radius: 3px;
    border: solid 1px var(--color-pink);
}

.container:last-child::before {
	content: "";
	display: block;
	height: 56%;
	width: 40%;
	position: absolute;
	top: 22%;
	left: 38.82%;
	z-index: 2;
	border-right: solid 1px var(--color-gray);
	border-left: solid 1px var(--color-gray);
}

.container:last-child::after {
	content: "";
	display: block;
	height: 56%;
	width: 2px;
	position: absolute;
	top: 22%;
	left: 89.41%;
	z-index: 2;
	border-left: solid 1px var(--color-gray);
}

.container .BGcontainer {
	background: none;
	/* background-image: linear-gradient(135deg, var(--color-yellow) 15%, var(--color-OPyellow) 100%)!important;
	background-color: var(--color-darkyellow); */
	background-image: var(--gradient-hermes90);
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	z-index: 1;
	display: flex;
    align-items: center;
}

.container p {
	color: var(--color-dark);
	margin: 0;
}

.infoContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	position: absolute;
	z-index: 99;
	border-radius: 50%;
	background: none;
	background-color: var(--color-darkyellow);
	top: 0;
	right: 0;
}

.infoContainer > div:first-child {
	height: 80%;
	width: 80%;
	border-radius: 50%;
	background-color: var(--color-light);
	box-shadow: 0px 3px 6px #00000029;
}

.infoContainer > div:last-child {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.bonusContainer {
	position: absolute;
    z-index: 2;
    left: 100px;
    color: var(--color-graylight)!important;
}

.BGcontainer ~ .volumeCommande {
	color: var(--color-gray);
	opacity: 0;
	transition: all 500ms ease;
	margin-left: 100px;
}

.BGcontainer:hover ~ .volumeCommande {
	opacity: 1;
}

.timelineStep {
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--color-gray);
    height: 29px;
    width: 10vw;
    min-width: 100px;
    margin-right: 5px;
}

.timelineStep:before {
    display: block;
    content: '';
    width: 21.21px;
    height: 21.21px;
    background-color: var(--color-graylight);
    transform: rotate(45deg);
    position: absolute;
    left: -10.60px;
}

.timeline .timelineStep:last-child:before {
	display: none;
}

.timeline {
	display: flex;
	flex-direction: row-reverse!important;
}

.timelineStep:after {
    display: block;
    content: '';
    width: 21.21px;
    height: 21.21px;
    background-color: var(--color-gray);
    transform: rotate(45deg);
    position: absolute;
    right: -10.60px;
}

.timelineStep.current:after {
    background-color: var(--color-electricblue);
}
.timelineStep.current.BGfullgreen:after {
    background-color: var(--color-green);
}

.timelineStep.current {
	background-color: var(--color-electricblue);
}

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

.filigrane-image {
	position: absolute;
    top: 10px;
    z-index: 990;
    border: solid 1px var(--color-darkred);
    padding: 5px;
    border-radius: 2px;
    width: 95%;
    background-color: var(--color-OPlight);
}

.filigrane-image p {
	color: var(--color-darkred);
    margin: 0;
    font-weight: 500;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
}

.zoom {
	cursor: zoom-in;
}

.legende-bloc {
	position: relative;
}

.legende-hover {
	width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 5px 10px;
    background-color: var(--color-OPdark);
    color: var(--color-light);
	display: none;
}

.legende-bloc:hover .legende-hover {
	display: block;
}

/* POPUP TRANSMISSION*/
.popup-transmission {
	padding: 39px 5px 39px 38px;
}

.bloc-transmission {
	width: 100%;
	height: 100%;
	border-radius: 2px;
	overflow: hidden;
}

.bloc-transmission .bloc-web {
	border-radius: 0!important;
	box-shadow: none;
}

.bloc-transmission .bloc-web p {
	text-transform: uppercase;
	font-size: 11.2px;
	font-weight: 600;
	margin: 5px;
}

.bloc-transmission table {
	background-color: var(--color-light);
}

.bloc-transmission .table, .bloc-transmission table, .bloc-transmission table th {
	border-radius: 0!important;
}

.bloc-transmission table > thead > tr {
	background-image: linear-gradient(240deg, var(--color-dark) 0%, var(--color-darkprimary) 74%);
}

.bloc-transmission table > thead > tr > th {
	color: var(--color-light);
}

/*TYPE DE BOUTON*/

button {
	background: none;
	padding: 0;
}

.boutons {
	display: flex;
	justify-content: space-between;
	align-items: center;
    margin: 0 0 10px;
	position: relative;	
	border-bottom: solid 2px var(--color-graylight);
	padding-bottom: 10px;
	z-index: 499;
	height: 42px;
} 
.boutons > form {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
} 

.boutons div p {
	margin: 0;
}

	.btn-annuler {
		cursor: pointer;
		display: flex;
		flex-direction: row;
		padding: 5px 10px;
		border-radius: 3px;
		transition: all 0.3s ease-in-out;
		background-color: var(--color-gray);
    	font-size: 10.4px;
	}

	.btn-annuler > p {
		margin: 0;
	}

	.btn-lien {
		cursor: pointer;
		display: flex;
		flex-direction: row;
		padding: 5px 10px;
		border-radius: 3px;
		background-color: transparent;
		transition: all 0.3s ease-in-out;
		color: var(--color-mediumdark);
    	font-size: 10.4px;
	}

	.btn-lien:hover {
		background-color: var(--color-graylight);
		box-shadow: inset 0px 3px 6px #00000029;
	}

		.btn-lien p, .btn-lien span {
			color: var(--color-mediumdark);
			font-size: 10.4px; /*14px*/
			margin: 0;
		}

		.btn-lien span {
			height: fit-content;
			margin: auto;
		}

		.btn-lien:hover > p, .btn-lien:hover > span {
			color: var(--color-dark);
		}

	.btn {
		font-size: 11.2px;
		padding: 0 15px;
		height: 25px;
		border-radius: 3px;
		width: fit-content;
		cursor: pointer;
		text-align: center;
		margin-bottom: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-family: var(--font-primary);
		transition: all .35s ease;
		white-space: nowrap;
	}

	.btn.disabled {
		opacity: 0.4;
	}

	a.btn:hover, a:hover > button {
		text-decoration: none;
	}

	.btn > p {
		text-transform: none!important;
		font-weight: 400!important;
		font-size: 9.6px;
		font-size: 11.2px!important;
		text-decoration: none!important;
	}

	button[type="submit"] {
		padding: 10px 15px;
		font-family: var(--font-primary);
	}

	button.material-symbols-outlined {
		font-family: 'Material Symbols Outlined';
	}

		/* .btn:hover {
			transform: translateY(-1px);
		} */

		div.btn > span:not(.title-text) {
			margin: auto 5px auto 0;
		}

		.btn > .material-symbols-outlined {
			font-size: 12px;
		}

	.btn.inactif {
		box-shadow: none;
		background-color: var(--color-OPdark);
		cursor: not-allowed;
	}

	.btn.inactif p {
		color: var(--color-mediumdark);
	}

	.header-btn {
		background-image: linear-gradient(240deg, var(--color-dark) 0%, var(--color-darkprimary) 74%);
		color: var(--color-light);
		height: fit-content;
	}

	.header-btn p {
		font-size: 8.8px;
	}

	.btn-primary {
		/* background-color: var(--color-light);
		border: solid 1px var(--color-OPmediumdark);
		color: var(--color-OPdark); */
		/* box-shadow: 0px 3px 6px #00000029; */

		background-color: var(--color-electricblue);
		border: solid 1px var(--color-electricblue);
		color: var(--color-light);
	}

	.btn-primary p {
		color: var(--color-OPdark)!important;
		color: var(--color-light)!important;
	}

	.btn-primary:hover {
		background-color: var(--color-lightelectricblue);
		border: solid 1px var(--color-lightelectricblue);
	}
	
	.btn-bordergray {
		border: solid 1px var(--color-gray);
		background: none;
		color: var(--color-medium);
		padding: 5px 8px;
		cursor: pointer;
		font-weight: 600 !important;
	}

	.btn-gray {
		border: solid 1px var(--color-gray);
		background-color: var(--color-graylight);
		color: var(--color-medium);
		padding: 5px 8px;
		cursor: pointer;
	}

	.btn-gray-crm {
		background-color: var(--color-graylight);
		color: var(--color-dark);
		padding: 5px 8px;
		cursor: pointer;
		
	}

	.btn-gray.active {
		background-color: var(--color-lightblue);
	}

	.btn-gray > .material-symbols-outlined {
		height: fit-content!important;
		margin: 0!important;
		font-size: 14.4px!important;
	}

	.btn-secondary {
		background-color: var(--color-light);
		border:  solid 1px var(--color-OPmedium);
		color: var(--color-medium);
	}

	.btn-secondary:hover {
		border: solid 1px var(--color-medium);
	}

	.btn-complementary {
		background-color: var(--color-light);
		border:  solid 1px var(--color-OPelectricblue);
		color: var(--color-electricblue)!important;
	}

	.btn-complementary p {
		color: var(--color-electricblue)!important;
	}

	.btn-complementary:hover {
		border: solid 1px var(--color-electricblue);
	}

	.btn-important {
		background-color: var(--color-light);
		border:  solid 1px var(--color-OPdarkblue);
		color: var(--color-darkblue);
	}

	.btn-important:hover {
		border: solid 1px var(--color-darkblue);
	}

	.btn-warning {
		background-color: var(--color-light);
		border: solid 1px var(--color-OPred);
		color: var(--color-red);
	}

	.btn-warning:hover {
		border: solid 1px var(--color-red);
	}
	
	.btn-darkred {
		background-color: var(--color-darkred);
		border: solid 1px var(--color-darkred);
		color: var(--color-light);
	}

	.btn-darkyellow {
		border: solid 1px var(--color-darkyellow);
		color: var(--color-darkyellow);
	}
	.btn-darkyellow p {
		color: var(--color-darkyellow)!important;
	}

	.btn-danger {
		background-color: var(--color-darkyellow);
		border: solid 1px var(--color-darkyellow);
		color: var(--color-light);
	}

	.btn-danger:hover {
		border: solid 1px var(--color-darkyellow);
	}

	.btn-success {
		background-color: var(--color-light);
		border: solid 1px var(--color-lightgreen);
		color: var(--color-green);
	}

	.btn-success:hover {
		border: solid 1px var(--color-green);
	}

	.btn-fullyellow {
		background-color: var(--color-yellow);
		border: solid 1px var(--color-yellow);
		color: var(--color-light);
	}

	.btn-green {
		background-color: var(--color-green);
		border: solid 1px var(--color-green);
		color: var(--color-light);
	}

	.btn-lightgreen {
		background-color: var(--color-lightgreen);
		border: solid 1px var(--color-green);
		color: var(--color-green);
	}

	.btn-lightgreen-crm {
		background-color: #e5f1fa;
		border: solid 1px #257d82;
		color: var(--color-dark);
	}

	.btn-blue {
		background-color: var(--color-light);
		border: solid 1px var(--color-blue);
		color: var(--color-blue);
		box-shadow: 0px 3px 6px #00000029;
	}

	.btn-blue:hover {
		border: solid 1px var(--color-darkblue);
		color: var(--color-darkblue);
	}

	.btn-white {
		background-color: transparent;
		border: solid 1px var(--color-light);
		color: var(--color-light);
	}

	.btn-white:hover {
		border: solid 1px var(--color-light);
		background-color: var(--color-OPlight);
	}

	.btn-fullwhite {
		background-color: var(--color-light);
		border: solid 1px var(--color-light);
		color: var(--color-dark);
	}

	.btn-fullwhite:hover {
		background-color: var(--color-medium);
	}

	.btn-yellow {
		background-color: transparent;
		border: solid 1px var(--color-yellow);
		color: var(--color-yellow);
	}

	.btn-yellow:hover {
		border: solid 1px var(--color-yellow);
		background-color: var(--color-OPyellow);
	}

	.btn-yellow p {
		color: var(--color-yellow)!important;
	}

	.btn-pink {
		background-color: transparent;
		border: solid 1px var(--color-pink);
		color: var(--color-pink);
	}

	.btn-pink:hover {
		border: solid 1px var(--color-pink);
		background-color: transparent;
	}

	.btn-pink p {
		color: var(--color-pink)!important;
	}

	.btn-electricblue {
		/* background-color: var(--color-electricblue); */
		background-image: linear-gradient(135deg, var(--color-lightelectricblue) 0%, var(--color-electricblue) 74%);
		color: var(--color-light);
		box-shadow: 0px 3px 6px #00000029;
		opacity: 1;
	}

	.btn-electricblue:hover {
		opacity: .7;
	}

	.btn-medium {
		background-color: var(--color-medium);
		border: solid 1px var(--color-medium);
		color: var(--color-light);
	}

	.btn-mediumblue {
		background-color: var(--color-light);
		border: solid 1px var(--color-mediumblue);
		color: var(--color-mediumblue);
	}

	.btn-mediumblue:hover {
		border: solid 1px var(--color-darkblue);
		color: var(--color-darkblue);
	}

	.btn-fullmediumblue {
		background-color: var(--color-mediumblue);
		border: solid 1px var(--color-mediumblue);
		color: var(--color-light);
	}

	.btn-fullmediumblue:hover {
		border: solid 1px var(--color-darkblue);
		background-color: var(--color-darkblue);
	}

	.btn-dark {
		background-color: var(--color-light);
		border: solid 1px var(--color-mediumdark);
		color: var(--color-OPdark);
	}

	.btn-dark:hover {
		border: solid 1px var(--color-dark);
		color: var(--color-dark);
	}

	.btn-fullblue {
		background-color: var(--color-mediumblue);
		border: solid 1px var(--color-mediumblue);
		color: var(--color-light);
		box-shadow: 0px 3px 6px #00000029;
		transition: all .35s linear;
	}

	.btn-fullblue:hover {
		background-color: var(--color-darkblue);
	}

	.btn-darkblue {
		background-color: var(--color-darkblue);
		border: solid 1px var(--color-darkblue);
		color: var(--color-light);
		transition: all .35s linear;
	}

	.btn-darkblue:hover {
		border: solid 1px var(--color-mediumblue);
		/* background-color: var(--color-darkblue); */
	}

	/* .btn-ia {
		background: linear-gradient(136deg, #55b8aa 0%, #55b8aa 20%, #5ddf8f 50%, #55b8aa 100%);
		color: white;
		font-weight: 600;
		margin-bottom: 0;
		padding: 1px 20px;
		height: fit-content;
		position: relative;
		overflow: hidden;
	}

	.btn-ia::before {
		display: block;
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(24deg, #ebe78c 0%, transparent 30%, transparent 40%, #ebe78c 74%, #ebe78c 100%);
	}

	.btn-ia p {
		color: var(--color-light)!important;
		margin: 0;
		z-index: 1;
	} */

	.btn-ia {
		border: 2px solid transparent;
		font-weight: 600;
		margin-bottom: 0;
		padding: 1px 20px;
		height: fit-content;
	
		/* Bordure dégradée */
		background:
			linear-gradient(white, white) padding-box,
			linear-gradient(
				112deg,
				#F4B8F8 0%,
				#9DDCFF 18%,
				#008CFF 50%,
				#9DDCFF 75%,
				#F4B8F8 100%
			) border-box;
		
	}
	.btn-save {
		height: 24px;
		width: fit-content;
		border: solid 1px var(--color-darkprimary) !important;
		color: var(--color-darkprimary);
		padding: 0 6px!important;
		margin: 0;
	}

	.btn-add {
		background-color: transparent;
		border:  solid 1px var(--color-dark);
		background-color: var(--color-OPdarkprimary);
		color: var(--color-dark);
		display: flex;
		flex-direction: row;
		align-items: center;
		display: none!important;
	}

	.btn-add.active {
		display: flex!important;
	}

		.btn-add p {
			margin: 0;
		}

	.multi-btn {
		display: flex;
		flex-direction: column!important;
		justify-content: center;
	}

	.multi-btn > div {
		display: none!important;
		transition: all 1s ease-in;
	}

	.multi-btn.visible > div {
		display: initial!important;
	}

	.mini > p {
		margin: 2px 0;
	}

	.btn-form {
		color: var(--color-light)!important;
		background-color: var(--color-dark);
		box-shadow: 0px 3px 6px #00000029;
		font-size: 8.8px; /*14px*/
		border-radius: 3px;
		width: fit-content;
		cursor: pointer;
		text-align: center;
		height: fit-content;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 3px 10px;
		margin-left: 10px;
	}

	.btn-form p {
		margin: 2px 0!important;
	}

	.header-btn p {
		margin: 0!important;
	}

	.btn-classique {
		background-color: var(--color-gray);
		border: solid 1px var(--color-medium);
		padding: 5px 10px;
		margin: 0 5px;
		cursor: pointer;
	}

	.btn-classique p {
		margin: 0 auto;
		color: var(--color-dark)!important;

	}

	.widgetFile {
		height: 25px;
	}

	.widgetFileAdd {
		border-color: var(--color-electricblue) !important;
		background-color: var(--color-electricblue) !important;
		color: var(--color-light) !important;
		margin-top: 0;
	}

	.widgetFileStandard input[type="file"] {
		display: block;
		opacity: 0;
		position: absolute;
	}

	.btnTableTrue {
		background-color: var(--color-green);
		border: solid 1px var(--color-green);
		color: var(--color-light);
		box-shadow: none;
		width: 95px;
		display: flex;
		justify-content: center;
	}

	.number-cell-renderer {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 105px;
	}

	.number-cell-renderer input:focus {
		height: 25px!important;
		border: solid 1px var(--color-gray)!important;
	}

	.btnPlusMoins {
		width: 25px;
		height: 25px;
		display: none;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		background-color: var(--color-light);
		border: solid 1px var(--color-gray);
		padding: 0;
		margin-bottom: 0;
	}

	.ag-cell-value:hover .btnPlusMoins {
		display: inline-flex;
	}

	.btnPlusMoins.inactive {
		opacity: 0.4;
		pointer-events: none;
	}

	.btnPlusMoins p {
		color: var(--color-blue);
	}

	.volet-bonus .btnPlusMoins {
		background-color: var(--color-yellow);
	}

	.close {
		height: fit-content;
		width: fit-content;
		display: flex!important;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 5px;
		right: 10px;
		cursor: pointer;
		display: none;
		z-index: 985;
	}

	.slide .close {
		top: 10px;
		left: 10px;
		padding: 0 5px 5px 0;
	}
	
	.add-col > .btn {
		position: absolute;
		background-color: var(--color-medium);
		top: 52px;
		right: 0;
		display: none;
		flex-direction: column;
		width: fit-content;
	}
	
	.add-col:hover > .btn, .add-col > .btn:hover {
		display: flex;
	}
	
	.add-col > .btn > p{
		white-space: nowrap;
	}

	.btnImporter {
		border: solid 1px var(--color-green);
		box-shadow: none;
		background-color: transparent;
		width: 95px;
		display: flex;
		justify-content: center;
	}

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

	.btnImporter span {
		display: none;
	}

	.btnImporter.active {
		background-color: var(--color-green);
	}

	.btnImporter.active span {
		color: var(--color-light);
		display: block;
	}

	.btnImporter.active p {
		display: none;
	}

	button.pastille-black, span.pastille-black, button.pastille-white, span.pastille-white {
		width: 20px;
		height: 20px;
		background-image: linear-gradient(240deg, var(--color-dark) 0%, var(--color-darkprimary) 74%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: 'Material Symbols Outlined';
		padding: 0;
		border: none;
	}

	button[type="submit"].pastille-white, span.pastille-white {
		background-image: none;
		background-color: var(--color-light);
	}
	
	.pastille-black > p {
		color: var(--color-light);
	}

	.pastille-white > p {
		color: var(--color-mediumprimary);
	}

	.removeCollection {
		background: none;
		color: var(--color-medium);
		font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
		font-family: 'Material Symbols Outlined';
    	font-weight: normal;
		margin-left: 5px;
		padding: 0;
		cursor: pointer;
		border: none;
	}

	.collectionContainer {
		margin-bottom: 0!important;
	}

	.addCollection {
		font-family: var(--font-primary);
		color: var(--color-medium);
		font-weight: 400;
		font-size: 9.6px;
		white-space: nowrap;
		cursor: pointer;
		background: none;
		padding: 0;
		margin-top: 5px;
		text-align: left;
		display: flex;
		flex-direction: row;
		align-items: center;
		border: none;
		position: absolute;
		bottom: -20px;
	}

	.addCollection:hover, .removeCollection:hover {
		color: var(--color-dark);
	}

	/* .addCollection:before {
		content: "\e147";
		font-size: 16px;
		font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
		font-family: 'Material Symbols Outlined';
		margin-right: 5px;
	} */

	/* .addCollection:hover:before {
		color: var(--color-dark);
	} */

	.btn-periode {
		border: solid 1px var(--color-gray);
	}

	.btn-periode > div {
		padding: 5px;
		background-color: var(--color-light);
		border-right: solid 1px var(--color-gray);
		width: 75px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		cursor: pointer;
	}

	.btn-periode > div:last-child {
		border-right: none;
	}

	.btn-periode > div.active {
		background-color: var(--color-mediumprimary);
	}

	.btn-periode > div p {
		/* text-transform: uppercase; */
		margin: 0;
	}

	.btn-periode > div:hover p {
		color: var(--color-mediumprimary);
	}

	.btn-periode > div.active p {
		color: var(--color-light);
	}

	.non-editable .removeCollection, .non-editable .addCollection {
		display: none;
	}

/* DETAILS */
details summary {
	cursor: pointer;
	margin-bottom: 20px;
}

details summary:not(.titreConfig)::after, details summary.titreConfig > label::after, .details-in-details > div > div:nth-child(3) > p:before {
	content: "\e5cf";
	font-family: 'Material Symbols Outlined';
	vertical-align: middle;
	display: inline-block;
	transform: rotate(360deg);
	transition: all .3s linear;
	text-decoration: none!important;
}

.checkDetails > :last-child {
	margin-bottom: 25px;
}

.checkDetails > summary {
	margin-bottom: 0;
}

.checkDetails > summary::after {
	display: none;
}

.checkDetails > div {
	margin-left: 20px;
}

.checkDetails .checkbox-wrapper .checkbox {
	margin-bottom: 0;
}

details summary::after {
	margin-left: 5px;
}

.details-in-details > div > div:nth-child(3) > p::before {
	margin-right: 5px;
}


details[open] > summary::after, details[open] > .details-in-details > div > div:nth-child(3) > p::before {
	transform: rotate(180deg);
}

.details-in-details::after {
	display: none;
}

details > summary:first-of-type {
	list-style: none;
}

/* MENUS */

	#enregistrer {
		position: absolute;
		right: 0;
		top: 0;
		margin-top: 29px!important;
		padding-left: 22px;
		width: 100%;
		border-radius: 0 0 5px 5px;
		text-align: left;
		display: none;
	}

	#menu-add {
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		margin: 30px 0 0;
		align-items: flex-start;
		width: 135px;
		border-radius: 2px 0 5px 5px;
		text-align: left;
		background-color: var(--color-light);
		color: var(--color-mediumprimary);
		border: solid 1px var(--color-mediumprimary);
		height: fit-content;
		transition: all .35s linear;
		display: none;
	}

	#btn-add:hover > #menu-add {
		display: flex;
	}

	.menu-options, .menu-more, .menu-hover, .menu-creer {
		position: absolute;
		display: block;
		top: 35px;
		right: 0;
		width: fit-content;
		border-radius: 2px 0 5px 5px;
		text-align: left;
		background-color: #1d1d1dcc;
		color: var(--color-light);
		border: solid 1px var(--color-dark);
		box-shadow: 0px 3px 6px #00000029;
		height: fit-content;
		min-height: 170px;
		min-width: 160px;
		z-index: 888;
		padding: 7px!important;
	}

	.bloc-options {
		top: 25px;
	}

	.expand-menu-more {
		position: relative;
	}
	
	.expand-menu-more .menu-more {
		display: none!important;
		right: 97%;
		top: 0;
	}

	.bloc-options .expand-menu-more .menu-more {
		right: 100%;
	}

	.expand-menu-more:hover .menu-more, .expand-menu-more .menu-more:hover {
		display: block!important;
	}

	.menu-options > p, .menu-more > p, .menu-hover > p, .menu-creer > p, .menu-options > span, .menu-more > span, .menu-hover > span, .menu-creer > span, .menu-options > a, .menu-more > a, .menu-hover > a, .menu-creer > a, .menu-options > div, .menu-more > div, .menu-hover > div, .menu-creer > div, .menu-options > button, .menu-more > button, .menu-hover > button, .menu-creer > button {
		color: var(--color-graylight)!important;
		margin: 3px 0!important;
		padding: 1px 15px;
		width: 100%;
		display: flex;
		cursor: pointer;
	}

	.menu-more p:hover, .menu-options p:hover, .menu-options a:hover, .menu-options > div:hover, .menu-options > button:hover {
		background-color: var(--color-blue);
		border-radius: 2px;
	}

	.menu-options .horizontale, .menu-more .horizontale, .menu-hover .horizontale, .menu-creer .horizontale {
		width: 90%;
		border-bottom: solid 1px var(--color-medium);
		margin: 7px auto;
	}

	.expand-creer ~ .menu-creer {
		display: none;
		top: 29px;
		border-color: var(--color-dark);
	}

	.expand-creer:hover ~ .menu-creer, .menu-creer:hover {
		display: block;
	}

	.boutons-footer .menu-options {
		top: auto;
		bottom: 31px;
	}

	.menu-options > div {
		margin-bottom: 15px;
	}

	.menu-options > div:last-child {
		margin-bottom: 0;
	}

	.menu-options p, .menu-more p, .menu-options button, .menu-more button {
		font-size: 11.2px!important;
		margin: 5px 0;
		text-transform: inherit!important;
		font-weight: 400;
		white-space: nowrap;
		width: 100%;
	}

	.menu-options a:hover {
		text-decoration: none;
	}

	.menu-options.bottom {
		bottom: 50px;
		top: auto;
	}

	.menu-options span, .menu-more span {
		margin-right: 10px;
	}

	.btn-hover > .menu-hover {
		display: none;
	}

	.btn-hover:hover > .menu-hover {
		display: block;
		top: 39px
	}

	.btn-hover {
		position: relative;
	}

	.expand-menu {
		width: fit-content;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		width: 27px;
		height: 25px;
		padding: 0;
		align-items: center;
		color: var(--color-dark);
	}

	.bloc-menu {
		width: fit-content;
		height: fit-content;
		margin-left: 10px;
		margin-right: 7px;
	}

	.boutons .expand-menu {
		background-color: var(--color-light);
		border: solid 1px var(--color-dark);
		box-shadow: 0px 3px 6px #00000029;	
	}

	.label-sous-categorie .expand-menu {
		height: 20px;
		padding: 0;
	}

	.expand-menu span {
		font-size: 16px;
		font-weight: 600;
		margin: 0!important;
		position: absolute;
	}

	.expand-menu-icons span {
		position: absolute;
		margin-right: 30px;
		bottom: 0;
		right: 0;
	}

	.expand-menu > span:nth-child(2), .expand-menu.active > span:first-child {
		opacity: 0;
		transform: rotate(180deg);
		transition: all .35s linear;
	}

	.expand-menu > span:first-child, .expand-menu.active > span:nth-child(2), .expand-btn > span  {
		opacity: 1;
		transform: rotate(360deg);
		transition: all .35s linear;
	}

	.expand-btn.active > span {
		transform: rotate(180deg);
		transition: all .35s linear;
	}

	#expand-enregistrer {
		transform: rotate(360deg);
		transition: transform 350ms ease;
	}

	#expand-enregistrer.active {
		transform: rotate(180deg);
	}

	.btn-action, .btn-statut {
		position: relative;
	}

	.addColumnBloc, .addFiltresBloc {
		position: absolute;
		display: block;
		top: 35px;
		right: 0;
		width: 850px;
		border-radius: 2px 0 5px 5px;
		text-align: left;
		background-color: var(--color-light);
		color: var(--color-dark);
		border: solid 1px var(--color-OPmediumprimary);
		height: fit-content;
		min-height: 250px;
		max-height: 400px;
		overflow-y: auto;
		z-index: 888;
		padding: 60px 15px 30px;
	}

	.addFiltresBloc {
		width: 300px;
	}

	.addColumnBloc > div > div, .addFiltresBloc > div > div {
		margin: 5px 0;
		overflow: hidden;
	}

	.addColumnBloc label , .addFiltresBloc label {
		font-weight: 400;
		margin-top: 2px;
	}

	.addColumnBloc .checkbox-wrapper, .addFiltresBloc .checkbox-wrapper {
		margin-bottom: 0;
	}

	.addColumnBloc .label-categorie, .slide .addColumnBloc .label-categorie, .addFiltresBloc .label-categorie, .slide .addFiltresBloc .label-categorie {
		top: 0;
		left: 0;
		width: 100%;
		padding: 10px 15px;
		position: absolute;
		background-image: none!important;
		background-color: transparent!important;
	}

	.menu-action {
		position: absolute;
		top: 0;
		/* left: -187%; */
		display: none;
		flex-direction: column;
		align-items: start;
		transform: translate(-105%);
		width: fit-content;
		white-space: nowrap;
		padding-right: 25px;
		background-color: var(--color-light);
	}

	.menu-statut {
		position: absolute;
		top: 0;
		left: -115%;
		display: none;
		flex-direction: column;
		align-items: start;
	}

	.label-sous-categorie .menu-options {
		top: 24px;
	}

	.label-sous-categorie .menu-action {
		position: absolute;
		top: -65px;
		left: -190%;
		display: none;
		flex-direction: column;
		width: fit-content;
		white-space: nowrap;
		padding-right: 20px;
	}

	.btn-action:hover > .menu-action, .menu-action:hover, .btn-statut:hover > .menu-statut, .menu-statut:hover {
		display: flex;
	}

	.btnStats {
		cursor: pointer;
	}

	.btnStats.active {
		font-weight: 600;
	}

/* TOGGLE SWITCH */

/* .chck {
	position: absolute;
	opacity: 0;
	z-index: -1;
  } */
  .check-trail {
    display: flex;
    align-items: center;
	width: 28px!important;
    min-width: 28px!important;
    height: 15px;
    border-radius: 40px;
    transition: all .5s ease;
    cursor: pointer;
    background-color: var(--color-gray);
    /* margin: 5px 0; */
	position: relative;
	margin-right: 10px;
  }

  .bloc-web .check-trail {
	margin-right: 0px;
	background-color: var(--color-OPgray);
  }

  .BGblack .check-trail {
	margin-right: 0px;
	background-color: var(--color-mediumdark);
  }
  
  .check-handler {
    display: flex;
	margin-left: 2px!important;
    justify-content: center;
    align-items: center;
	width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--color-light);
    transition: all .5s ease;
  }

	.chck:checked + .check-trail {
		background-image: linear-gradient(135deg, #4F9EB5 15%, #5BC28F 100%)!important;

	border-color: var(--color-valid);
  }


  .chck:checked + .check-trail:before {
	background-color: var(--color-valid);
  }

  /* .option::after {
	content: "option";
	top: -2px;
	left: -5px;
	font-size: 8.8px;
	position: absolute;
  } */
  
.chck:checked + .check-trail .check-handler {
	margin-left: 51%!important;
    background-color: var(--color-light);
  }

/* .chck ~ .dropdown, .chck ~ input, .chck ~ textarea, .chck ~ .input-option, .chck:checked ~ .input-option-inverse  {
	display: none!important;
}

.chck:checked ~ .dropdown, .chck:checked ~ input, .chck:checked ~ textarea, .chck:checked ~ .input-option, .chck ~ .input-option-inverse {
	display: flex!important;
} */

/* SIMPLE CHECKBOX */
.checkbox-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	/* margin-bottom: 3px; */
	height: 14px;
}

/* input[type="checkbox"] {
	appearance: none;
    cursor: pointer;
    background-color: transparent!important;
    border-radius: 2px;
    border: 1px solid!important;
    color: var(--color-mediumdark);
    outline: none;
    margin: 0;
    padding: 0;
    transition: all 0.6s linear;
	display: block;
    width: 13px!important;
    height: 13px!important;
}

input[type="checkbox"]:checked {
	border-color: var(--color-dark)!important;
    transition-delay: 0.6s;
} */

table .checkbox-wrapper {
	margin-bottom: 0;
}

.checkbox-wrapper label {
	position: relative;
	margin: 2px 10px 0;
}

.checkbox-wrapper .checkbox {
    display: inline-block;
    /* width: 13px; */
    width: 19px;
    position: relative;
    align-items: center;
    display: flex;
	color: var(--color-dark)!important;
	height: 20px!important;
}

.bloc-web .checkbox-wrapper .checkbox {
	color: var(--color-light)!important;
}

.toastui-calendar-weekday-event .checkbox-wrapper .checkbox {
    width: 16px;
	height: 16px!important;
}

.checkbox-wrapper .checkbox:has(input[type="checkbox"].white) {
	color: var(--color-light)!important;
}

  .checkbox-wrapper .checkbox:after {
    content: "";
    width: 100%;
    padding-top: 100%;
    display: block;
  }
  .checkbox-wrapper .checkbox > * {
    position: absolute;
  }
  
  .checkbox-wrapper .checkbox input, .bloc-web.non-editable .checkbox-wrapper .checkbox input {
	appearance: none;
    cursor: pointer;
    background-color: transparent!important;
    border-radius: 2px;
    border: 1px solid!important;
    color: var(--color-mediumdark);
    outline: none;
    margin: 0;
    padding: 0;
    transition: all 0.6s linear;
  }

  .checkbox-wrapper .checkbox input:checked, .checkbox-wrapper .checkbox input:focus-visible, .checkbox-wrapper .checkbox:checked:after {
    border-color: var(--color-dark)!important;
    transition-delay: 0.6s;
  }

  .checkbox-wrapper .checkbox input.white:checked, .checkbox-wrapper .checkbox input.white:focus-visible {
    border-color: var(--color-light)!important;
    transition-delay: 0.6s;
  }

  .checkbox-wrapper .checkbox input:checked + svg {
    stroke-dasharray: 16 93;
    stroke-dashoffset: 109;
  }

  .checkbox.readonly, .checkbox.readonly > * {
	cursor: initial!important;
  }

  .bloc-couleur .checkbox-wrapper .checkbox input:checked + svg {
	color: var(--color-light)!important;
  }

  .medium.checkbox-wrapper .checkbox {
	color: var(--color-medium)!important;
  }

  .medium.checkbox-wrapper .checkbox input:checked, .medium.checkbox-wrapper .checkbox input:focus-visible, .medium.checkbox-wrapper .checkbox:checked:after {
	border-color: var(--color-medium)!important;
  }

  .checkbox-wrapper .checkbox input ~ label {
	color: var(--color-mediumdark);
	margin-left: 20px;
	transition: all 0.6s linear;
	position: relative;
	text-align: left;
    white-space: nowrap;
  }

  .dropdown-menu-list label a:hover {
	text-decoration: underline;
  }

  .checkbox-wrapper .checkbox input:checked ~ label, .checkbox-wrapper .checkbox input:checked ~ label a {
	color: var(--color-dark);
  }

  .bloc-couleur .checkbox-wrapper .checkbox input:checked ~ label, .bloc-couleur .checkbox-wrapper .checkbox input:checked ~ label a{
	color: var(--color-light);
  }

  .BGOPdarkprimary .checkbox-wrapper .checkbox input:checked ~ label, .BGOPdarkprimary .checkbox-wrapper .checkbox input:checked ~ label a {
	color: var(--color-gray);
  }

  .BGOPdarkprimary .checkbox-wrapper .checkbox input:checked {
	border-color: var(--color-gray)!important;
  }

  .BGblur {
	backdrop-filter: blur(7px);
  }

  .checkbox-wrapper .checkbox svg {
    fill: none;
    left: 0;
    pointer-events: none;
    stroke: none;
    stroke-dasharray: 93;
    stroke-dashoffset: 94;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
	top: 3px; 
    transition: stroke-dasharray 0.6s, stroke-dashoffset 0.6s;
  }

  table .checkbox-wrapper .checkbox svg, .smallCheck .checkbox-wrapper .checkbox svg {
	top: 0;
  }

  .checkbox-wrapper .checkbox svg,
  .checkbox-wrapper .checkbox input {
    display: block;
    width: 14px!important;
	height: 14px!important;
	min-height: 14px!important;
	padding: 0!important;
  }

  .month-inline-day .checkbox-wrapper .checkbox svg,
  .month-inline-day .checkbox-wrapper .checkbox input,
  .toastui-calendar-weekday-event .checkbox-wrapper .checkbox svg,
  .toastui-calendar-weekday-event .checkbox-wrapper .checkbox input {
	width: 10px!important;
	height: 10px!important;
	min-height: 10px!important;
  }

  .check-noir .checkbox-wrapper .checkbox input:hover, .check-noir .checkbox-wrapper .checkbox input:checked, .check-noir .checkbox-wrapper .checkbox input:focus-visible {
    border-color: var(--color-dark)!important;
  }

 .check-noir .checkbox-wrapper .checkbox input:checked ~ svg, .check-noir .checkbox-wrapper .checkbox svg {
	color: var(--color-dark)!important;
  }

  .checkbox-wrapper.gray .checkbox, .checkbox-wrapper.gray .checkbox input:checked ~ label, .checkbox-wrapper.gray .checkbox input:checked ~ label a {
    color: var(--color-medium)!important;
}

.checkbox-wrapper.gray .checkbox input:checked, .checkbox-wrapper.gray .checkbox input:focus-visible, .checkbox-wrapper.gray .checkbox:checked:after {
    border-color: var(--color-medium)!important;
}

.checkbox-wrapper.white label, .checkbox-wrapper.white .checkbox {
	color: var(--color-light)!important;
}

.checkbox-wrapper.white .checkbox input:checked, .checkbox-wrapper.white .checkbox input:focus-visible, .checkbox-wrapper.white .checkbox:checked:after {
	border-color: var(--color-light)!important;
}

.erreurChoice {
	position: relative;
    padding: 5px 10px;
    display: flex;
    flex-direction: row;
}

.erreurChoice.active {
	background-color: var(--color-OPelectricblue);
	border-color: var(--color-electricblue);
}

.erreurChoice input[type='radio'] {
	position: absolute;
    padding: 5px 10px!important;
    display: flex;
    flex-direction: row;
    border-radius: 2px;
    border: solid 1px var(--color-gray)!important;
    color: var(--color-medium);
	appearance: none;
    top: 0;
    left: 0;
}

.erreurChoice label {
	font-weight: 400;
	color: var(--color-medium);
}

.erreurChoice.active label {
	color: var(--color-electricblue);
}

/* IMAGES */
.bloc-change {
	width: 100%;
	min-width: 40px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-OPdark);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0px 3px 6px #00000029;
}

.bloc-change > div {
    width: 70px;
    height: 70px;
	background-color: var(--color-dark);
    border-radius: 50%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.bloc-change.codabar > div {
    width: 40px;
    height: 40px;
}

.bloc-change > div > span {
    text-align: center!important;
    font-size: 44px!important;
    cursor: pointer!important;
	color: var(--color-graylight)!important;
	margin: 1px 1px 0 0;
}

.change > .bloc-change {
	opacity: 0;
	transition: opacity .350s linear;
}

.change:hover > .bloc-change {
	opacity: 1;
}

.en-option {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.en-option p {
	font-size: 40px;
	text-transform: uppercase;
    color: var(--color-OPmediumdark);
    transform: rotate(338deg);
}

.optionnel {
	opacity: 0.8;
    filter: blur(3px);
}

/*STATISTIQUES*/

/* .statistiques-fenetre,  */
#entete .groupe-input {
	width: 98%;
	height: fit-content;
	margin: 2vh auto 0;
	background-color: var(--color-light);
	border-radius: 2px;
	box-shadow: 0px 3px 6px #00000029;
	display: flex!important;
	padding: 20px 0;
}

	.statistiques-fenetre p {
		margin: 0;
	}

	#entete .groupe-input .input-group, #entete .groupe-input .input-group-row {
		width: 100%;
		margin: 5% 0;
	}

	.input-group-after {
		width: 100%;
		max-width: -webkit-fill-available;
	}

	.statistique-stocks > div > .graphique {
		width: 70%;
		height: fit-content;
		margin: auto;
	}
	
	.statistique-stocks > div > div > .graphique {
		padding: 20px;
	}
	
	.statistique-stocks .statistiques-fenetre {
		margin: 0 auto 25px;
	}

	/* BLOCS STATS */
	.blocStats {
		width: 20%;
		height: 80px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 10px 10px 5px 0;
		cursor: pointer;
	}

	.blocStats > img {
		height: 50px;
		margin-right: 15px;
		transform: skew(8deg, -8deg);
	}

	.blocStats p {
		margin: 0;
		color: var(--color-dark);
	}

	/*AFFICHAGE GRAPHIQUE*/

	.header-onglet .graphique canvas {
		padding: 0!important;
		height: 100%!important;
		width: auto!important;
		max-width: 100%!important;
	}

	.header-onglet {
		height: 115px;
	}

	/* ENTETE FICHES */
	.entete {
		max-height: 257px;
	}

	/* STATISTIQUES */
	.bloc-stat {
		border-radius: 10px;
		background-color: var(--color-OPdark);
		/* opacity: .8; */
	} 

	/*MASQUER STATISTIQUES*/
	/* .masquer-statistiques {
		width: 96%;
		height: fit-content;
		margin: 5px auto 0;
		cursor: pointer;
	}

		.masquer-statistiques p {
			font-size: 7.2px;
			color: var(--color-dark);
			margin: 0;
		}

		.masquer-statistiques span {
			font-size: 8.8px;
			color: var(--color-dark);
		} */


		.masquer-statistiques span:nth-child(3), .masquer-statistiques p:nth-child(4), .statistiques-close .masquer-statistiques span:nth-child(1), .statistiques-close .masquer-statistiques p:nth-child(2) {
			display: none;
		}

		.statistiques-close .masquer-statistiques span:nth-child(3), .statistiques-close .masquer-statistiques p:nth-child(4) {
			display: inline-block;
		}

		.statistiques-close.statistiques-fenetre > .graphique {
			display: none!important;
		}

/* PROGRESS BAR */
.Loading {

    position: relative;
    display: inline-block;
    width: 100%;
    height: 10px;
    background: var(--color-light);
    box-shadow: inset 0px 0px 6px #00000029;
    border-radius: 3px;
    border: solid 0.3px var(--color-medium);
}

.Loading:after {
  content: '';
  position: absolute;
  left: 0;
  width: 25%;
  height: 100%;
  border-radius: 3px;
  background-color: var(--color-blue);
  box-shadow: 0px 0px 6px #00000029;
}

.Loading-label {
    position: absolute;
    width: fit-content;
    height: fit-content;
    padding: 10px;
    background-color: var(--color-light);
    box-shadow: 2px 2px 6px 0px #00000029;
    left: 20%;
    top: 25px;
    border-radius: 3px;
    display: none;
}

.Loading-label p {
	font-size: 8.8px; /*14px*/
	color: var(--color-medium);
	margin: 0;
}

.Loading:hover > .Loading-label {
	display: block;
}

/* BLOC ACTION */

.bloc-actions {
	display: flex;
	flex-direction: row;
	/* margin-right: 25px ; */
}

	.bloc-actions > div:nth-child(3) {
		margin-top: 25px;
	}

	.bloc-actions > div:nth-child(3) p {
		white-space: nowrap;
	}

	.bloc-actions > div:nth-child(3) div:last-child {
		width: 25%;
	}

.bloc-actions > div:first-child .btn-complementary {
	width: fit-content;
	border: solid 1.5px transparent;
}

.bloc-actions > div:first-child > .btn-complementary:first-child, .bloc-actions > div:first-child > *:first-child > .btn-complementary {
	border-radius: 2px 0 0 5px;
	box-shadow: -2px 3px 6px #00000015;
	margin: 0;
	border-left: none;
}

.bloc-actions > div:first-child .btn-complementary {
		border-radius: 0;
		border-right: solid 1.5px var(--color-light);
		border-left: solid 1.5px var(--color-light);
		box-shadow: -2px 3px 6px #00000015;
		margin: 0;
	}

.bloc-actions > div:first-child > .btn-complementary:last-child, .bloc-actions > div:first-child > *:last-child > .btn-complementary {
	border-radius: 0 5px 5px 0;
	box-shadow: 4px 4px 6px #00000015;
	margin: 0;
	border-right: none;
}

/* BLOC AFFICHAGE */
.bloc-affichage {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.bloc-affichage .dropdown {
	width: 20%;
	min-width: 150px;
	height: fit-content;
	align-items: center;
	margin: 0;
}

/* .bloc-affichage .dropdown .dropdown-menu {
	min-width: 150px;
} */

.bloc-affichage .dropdown-toggle::before, .bloc-affichage .dropdown-toggle::after {
	display: flex!important;
}

.bloc-affichage .recherche-bar {
	border: none!important;
	border-radius: 3px!important;
}

.bloc-affichage >  div:first-child > div:last-child > span {
	width: fit-content;
	height: fit-content;
	margin: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.bloc-affichage >  div:first-child > div:last-child > span.flag-icon {
	width: 1.33333333em;
}

.bloc-affichage > div:last-child > div:last-child > span:last-child {
	margin: 0;
}

.bloc-affichage > div:last-child > div:last-child > input {
	margin-bottom: 0;
}

.bloc-affichage > div:last-child {
	width: 40%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.bloc-affichage > div:last-child > div {
	width: fit-content;
	align-items: center;
}

.bloc-affichage p {
	white-space: nowrap;
	margin: 0;
}

.bloc-affichage > div:last-child > div > select {
	text-align: right;
}

.bloc-affichage-simple .bloc-affichage {
	width: 80%;
	border-top: none;
	padding-top: 0;
}

.bloc-affichage-simple .bloc-affichage > div:last-child {
	width: fit-content;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.bloc-affichage-simple .bloc-affichage > div:last-child > div {
	width: fit-content;
}

.bloc-affichage-simple .bloc-affichage > div:last-child > div:last-child {
	width: 25%;
	justify-content: flex-end;
}

.bloc-affichage-simple .bloc-affichage > div:last-child > div:nth-child(2)::before {
    content: '';
}

.fenetre-fonction-boutons .btn {
	padding: 5px 15px; /* pas d'important sinon les p0 ne fonctionnent pas */
	margin: auto 5px;
}

.fenetre-fonction-boutons .btn-complementary p, .fenetre-fonction-boutons .btn-primary p {
	margin: 0!important;
}

.fenetre-fonction-boutons .bloc-affichage-simple .btn > span, .fenetre-fonction-boutons .bloc-affichage-simple .btn {
	margin-right: 0!important;
	margin-top: 0!important;
}

.fenetre-fonction-boutons #filtres {
	margin-top: -1px;
}

/* BLOC PROGRESS */

.bloc-progress {
	width: 98%;
	margin: 0 auto 25px auto;
	background-color: var(--color-light);
	box-shadow: 0px 3px 6px #00000029;
	border-radius: 3px;
	padding: 10px 0;
}

.bloc-progress > div {
	width: fit-content;
	padding: 10px;
	text-align: center;
}

.bloc-progress > .verticale {
	padding: 0;
}

/* PROGRESS BAR */
.progress-bar {
    border-radius: 2px;
    width: 100%;
    height: 2%;
	margin: 0;
	background-color: var(--color-OPdarkprimary);
	position: relative;
}

.bloc-dash .progress-bar {
	border-radius: 3px;
	height: 10px;
	background-color: var(--color-gray);
}

.progress-bar-progress {
	border-radius: 2px;
	height: 100%;
	position: absolute!important;
	transition: all 1s ease-in-out;
	background-image: linear-gradient(135deg, var(--color-lightelectricblue) 0%, var(--color-electricblue) 74%);
}

.bloc-dash .progress-bar-progress {
	border-radius: 3px;
}

.progressComplete .progress-bar-progress {
	background-image: linear-gradient(135deg, #4F9EB5 15%, #5BC28F 100%)!important;
}

/*BLOC MENU*/

/* .fenetre-fonction-menu > div:first-child > div:last-child, .fenetre-fonction-menu > div:first-child > div:last-child > .input-group {
	width: 100%;
	flex-direction: row;
} */

.fenetre-fonction-menu > div:first-child > div:last-child > .input-group {
	margin: 10px auto;
}

.menu {
	height: fit-content;
	background-color: var(--color-light);
	box-shadow: 0px 3px 6px #00000029;
	border-radius: 2px;
	margin: 0 20px 0 0 ;
	padding-bottom: 10px;
}

.menu.fixed {
	position: fixed;
	top: 55px;
	z-index: 889;
}

.blocVolets .volets {
	border-bottom: solid 10px var(--color-graylight);
}

.blocVolets.fixed {
	position: fixed;
	z-index: 888;
	width: -webkit-fill-available;
    margin-right: 15px;
	margin-bottom: 0;
	top: 35px;
    border-top: solid 20px var(--color-graylight);
}

.menu.fixed ~ .fenetre-fonction {
	margin-left: 90px;
}

.menu.large.fixed ~ .fenetre-fonction {
	margin-left: 155px;
}

.blocVolets.fixed ~ .fenetre-item > div:first-child {
	margin-top: 50px;
}

.menu .option-menu {
	font-size: 12px;
	color: var(--color-medium);
	margin: 10px 5px;
	font-weight: 500;
	transform: rotate(360deg);
	cursor: pointer;
	transition: all .35s linear;
}

.menu.large .option-menu {
	transform: rotate(180deg);

}

	.menu .menu-item {
		height: 35px;
		height: 41px;
		padding: 2px;
		color: var(--color-mediumdark)!important;
		border-left: 2px solid transparent;
		display: flex;
		flex-direction: row;
		align-items: center;
		cursor: pointer;
		width: fit-content;
    	border-right: solid 2px var(--color-graylight);
		position: relative;
	}

	.menu.large .menu-item {
		width: 100%;
		border-right: none;
	}

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

		.menu .active {
			/* border-left: 2px solid var(--color-darkprimary); */
			color: var(--color-darkprimary)!important;
		}

		.menu .active::before {
			content: '';
			display: block;
			position: absolute;
			width: 2px;
			height: 100%;
			left: -2px;
			top: 0;
			background: var(--gradient-hermes180);
		}

		.menu .menu-item:hover {
			border-left: 2px solid var(--color-mediumdark);
			color: var(--color-darkprimary)!important;
		}

		.menu-item span {
			font-size: 12.8px;
			font-size: 15.2px;
			margin: 0 10px;
		}

		.menu-item .pastille {
			height: 25px;
			width: 25px;
			padding-top: 5px;
		}

	.menu > .menu-item > p {
		transition: all 0.35s linear;
		position: absolute;
		font-size: 8.8px; /*14px*/
		/* background-color: var(--color-darkprimary); */
		background: var(--gradient-blue180);
		padding: 5px;
		color: var(--color-light);
		border-radius: 2px;
		margin-left: 50px;
		z-index: 888;
		white-space: nowrap;
		transform: scale(0);
	}

	.menu .menu-item:hover > p {
		transform: scale(1);
	}

	.menu.large > .menu-item > p {
		position: relative;
		background: none;
		padding: 0;
		color: var(--color-medium);
		border-radius: 0;
		margin-left: 0;
		transform: scale(1);
	}

	.menu.large > .menu-item.active > p {
		color: var(--color-darkprimary);
	}

	.menu-item > .generalActive, .menu-item.active > .generalInactive {
		display: none;
	}

	.menu-item.active > .generalActive, .menu-item > .generalInactive {
		display: block;
	}

	.menu {
		width: 70px;
		min-width: 70px;
		transition: all 0.35s linear;
	}

	.menu.large {
		width: 135px!important;
		min-width: 135px!important;
	}

/*table*/

/* .fenetre-fonction table {
	width: fit-content;
	min-width: 100%;
	border-spacing : 0; 
	border-radius: 5px;
	box-shadow: 0px 3px 6px #00000029;
	background-color: var(--color-light);
	overflow-x: hidden;
} */

table p {
	margin: 0;
}

table td {
	vertical-align: middle;
}

table tr.BGlightred td {
	background-color: var(--color-lightred)!important;
}

table tr.vertical-align-top td {
	vertical-align: top;
}

/* .fenetre-fonction table.min0 {
	min-width: 0px;
}

.fenetre-fonction table > thead:first-child > tr > th:first-child {
	border-radius: 3px 0 0 0;
}

.fenetre-fonction table > thead:first-child > tr > th:last-child {
	border-radius: 0 3px 0 0;
}

.fenetre-fonction .table {
	width: 100%;
	overflow-x: auto;
} */

		/* .fenetre-fonction thead th, .doubleEntree > tbody > tr > td:first-child {
			color: var(--color-dark);
			font-size: 11.2px;
			text-align: left;
			padding: 5px 10px;
			white-space: nowrap;
			align-items: center;
			vertical-align: middle;
		} */

		table > tbody > tr:hover {
			background-color: var(--color-OPlightprimary)!important;
		}

	/* .fenetre-fonction tr {
		vertical-align: top;
	}

	.fenetre-fonction td {
		height: 50px;
		color: var(--color-dark);
		font-size: 11.2px;
		border-right: solid 0.5px var(--color-medium);
		margin: 0;
		padding: 0 10px;
		border-bottom: solid 1px var(--color-gray);
	}

	.fenetre-fonction table > tbody > tr > td:last-child {
		border-right: none;
	} */

	table > tbody > tr:last-child > td {
		border-bottom: none;
	}

td {
	height: fit-content;
	transition: all .350s linear;
}

tr.expand td {
	border-color: transparent!important;
	transition: none;
	padding: 0;
}

.expand > div:last-child {
	height: 25px;
	transition: all .350s linear;
}

.expand-less {
	transform: rotate(180deg);
	transition: all .350s linear;
}

.expand-less.active {
	transform: rotate(0deg);
	transition: all .350s linear;
}

.expand > div:last-child img, .expand > div:last-child p, .expand > div:last-child label, .expand > div:last-child input, .expand > div:last-child textarea,
.expand > td img, .expand > td p, .expand > td label, .expand > td input, .expand > td textarea {
	display: none;
	transition: all .350s linear;

}

	tr.pre-commercialisation {
		background-color: var(--color-yellow);
	}

	tr.commercialisation {
		background-color: var(--color-green);
	}

	tr.fin-commercialisation {
		background-color: var(--color-red);
	}

	tr.usage {
		background-color: var(--color-blue);
	}

/* table DANS table */

table > tbody > tr > td > table {
	border: solid 1px var(--color-medium);
	border-radius: 0!important;
}

td > table > tbody > tr > td {
	border-bottom: solid 1px var(--color-mediumdark);
}

td > table > tbody > tr:last-child > td {
	border-bottom: none;
}

td > table > tbody > .total > td:first-child {
	border-right: none!important;
	text-align: right;
}

td > table > tbody > .total > td:last-child {
	border-left: none!important;
}

.table {
	width: 100%;
	min-height: 100px;
	box-shadow: 0px 3px 6px #00000029;
}

.emptyTable {
	position: absolute;
    bottom: 10px;
    left: 50%;
	margin-left: -90px;
}

table .editCell {
	background-color: var(--color-graylight)!important;
}

table .editCell input {
    border-bottom: none !important;
    font-weight: 600;
	height: 100% !important;
    margin: 0 !important;
	border: none!important;
}

table.classicTable {
	box-shadow: none!important;
}

table.classicTable thead > tr > th {
	background-color: var(--color-graylight);
    border: solid 1px var(--color-gray);
	border-left: none;
    padding: 7px 10px;
    text-align: center;
}

table.classicTable thead > tr > th:first-child {
    border-left: solid 1px var(--color-gray);
}

table.classicTable td {
	height: 40px;
}

/* .fenetre-fonction .table::-webkit-scrollbar {
	height: 6px;
} */

table.UItable {
	border: none;
	overflow: hidden;
}

.UItable thead th {
	cursor: move;
	background-color: var(--color-gray);
	color: var(--color-dark);
	font-weight: 600;
/* border-bottom: solid 1px var(--color-gray); */
}

.UItable > tbody > tr {
	background-color: var(--color-light);
}

.UItable > tbody > tr > td {
	border: none;
	border-bottom: solid 1px var(--color-gray);
}

.UItable > tbody > tr:last-child > td {
	border-bottom: none;
}

.UItable td {
	padding: 10px;
}

.UItable p {
	margin: 0;
}

tr.statut-vert > td:first-child, .flex-row.statut-vert {
	border-left: solid 4px var(--color-green)!important;
}

tr.statut-rouge > td:first-child, .flex-row.statut-rouge {
	border-left: solid 4px var(--color-red)!important;
}

tr.statut-bleu > td:first-child, .flex-row.statut-bleu {
	border-left: solid 4px var(--color-blue)!important;
}

tr.statut-jaune > td:first-child, .flex-row.statut-jaune {
	border-left: solid 4px var(--color-yellow)!important;
}

tr.statut-gris > td:first-child, .flex-row.statut-gris {
	border-left: solid 4px var(--color-mediumdark)!important;
}

/* head */

.tableau > div:first-child {
	background-color: var(--color-light);
	border-radius: 2px;
	box-shadow: 0px 3px 6px #00000029;
}

.tableau > div:first-child > div:last-child > div {
	border-right: solid 1px var(--color-medium);
}

.tableau > div:first-child > div:last-child > div:last-child {
    border-right: none;
}

.tableau > div:first-child > div:last-child > div:first-child > p {
	padding-left: 20px;
}

/* colonnes */

.tableau > div:first-child > div > div:first-child, .tableau > div:first-child > div > div:nth-child(2), .tableau summary > div > div:first-child, .tableau summary > div > div:nth-child(2), .tableau details details > div > div:first-child, .tableau details details > div > div:nth-child(2) {
	width: 8%;
}

.tableau > div:first-child > div > div:nth-child(3), .tableau summary > div > div:nth-child(3), .tableau details details > div > div:nth-child(3) {
	width: 32%;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}

.tableau > div:first-child > div > div:nth-child(4), .tableau > div:first-child > div > div:nth-child(5), .tableau > div:first-child > div > div:nth-child(6), .tableau > div:first-child > div > div:nth-child(7), .tableau summary > div > div:nth-child(4), .tableau summary > div > div:nth-child(5), .tableau summary > div > div:nth-child(6), .tableau summary > div > div:nth-child(7), .tableau details details > div > div:nth-child(4), .tableau details details > div > div:nth-child(5), .tableau details details > div > div:nth-child(6), .tableau details details > div > div:nth-child(7) {
	width: 13%;
}

.tableau > div > div > div:first-child, .tableau summary > div > div, .tableau details > div > div{
	border-right: solid 1px var(--color-medium);
}

.tableau > div > div > div:last-child, .tableau summary > div > div:last-child, .tableau details > div > div:last-child {
	border-right: none;
}

/* scrollbar */

.tableau > div:nth-child(2)::-webkit-scrollbar {
	position: absolute;
	right: -3px;
	top: 0;
} 

.tableau div {
	position: relative;
}

.tableau div::-webkit-scrollbar {
	height: 3px;
	width: 3px;
  }
  
  .tableau div::-webkit-scrollbar-track {
	background-color: var(--color-gray);
  }
  
  .tableau div::-webkit-scrollbar-thumb {
	background-color: var(--color-medium);
	border-radius: 10px;
  }
  
  .tableau div::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-medium);
  }

  .tableau > div:nth-child(2)::-webkit-scrollbar-thumb {
	background-color: var(--color-mediumdark);
	border-radius: 10px;
  }
  
  .tableau > div:nth-child(2)::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-mediumdark);
  }

/* scroll dans tableau */
.tableau > div:nth-child(2) {
	height: fit-content;
	max-height: 50vh;
	overflow-y: auto;
}

/* lignes */
.tableau > div > div {
	height: fit-content;
	align-items: start;
	/* background-color: var(--color-OPblue); */
	border-bottom: solid 1px var(--color-medium);
	/* background-color: var(--color-graylight); */
}

/* ligne head + famille */
.tableau > div:first-child > div > div, .tableau > div > div > details > summary > div > div > p {
	height: 45px;
	line-height: 45px;
	display: flex;
	align-items: center;
	margin: 0!important;
	justify-content: center;
}

/* ligne sous-famille + article */
.tableau > div > div > details > details > summary > div > div > p, .tableau > div > div > details > details > div > div > p {
	height: 25px;
	line-height: 25px;
	display: flex;
	align-items: center;
	margin: 0!important;
	justify-content: center;
}

/* marge ID et REF */
.tableau details details > div > div:first-child > p, .tableau details details > div > div:nth-child(2) > p, .tableau details details > summary > div > div:first-child > p, .tableau details details > summary > div > div:nth-child(2) > p {
	margin-left: 10px!important;
}

/* weight sous-famille */
.tableau details details > summary > div > div> p {
	font-weight: 600;
}

/* séparation sous-familles */
.tableau > div > div > details > details {
	border-bottom: solid 1px var(--color-medium);
}

.tableau > div > div > details > details:last-child {
	border-bottom: none;
}

/* ligne famille */
.tableau > div > div > details > summary > div {
	border-bottom: solid 1px var(--color-medium);
	background-color: var(--color-OPblue);
	transition: all 250ms linear;
}

/* sommaires */

.tableau summary {
	margin-bottom: 0;
}

.tableau > div > details > details > summary > div > div:first-child > p {
	font-weight: 600;
}

/* lignes sous-famille */
.tableau > div > div > details > details > .details-in-details {
	background-color: var(--color-gray);
}

/* lignes articles */
.tableau > div > div > details > details > div:nth-child(even) {
	background-color: var(--color-graylight);
}

.tableau > div > div > details > details > div {
	border-bottom: solid 1px var(--color-gray);
}

.tableau > div > div > details > details > div:last-child > div > p {
	padding-bottom: 20px;
}

.tableau > div > div > details > details > summary > div, .tableau > div > details > details > div {
	transition: all 250ms linear;
}

.tableau > div > div > details > details > summary > div:hover, .tableau > div > div > details > details > div:hover {
	background-color: var(--color-OPdarkprimary)!important;
}

/* WHITE TABLE */
.whiteTable thead, .whiteTable td {
	background-image: none;
	background-color: var(--color-light)!important;

}

.whiteTable thead th { 
	color: var(--color-dark);
}

.whiteTable {
	border: solid 1px var(--color-gray)!important;
	border-left: none!important;
	border-right: none!important;
	box-shadow: none!important;
	border-radius: 0!important;
}

.whiteTable td {
	border: none;
	border-top: solid 1px var(--color-gray)!important;
	padding: 2px 15px;
}

/* GRAY TABLE */
.tableGray {
	border: solid 1px var(--color-gray);
	border-radius: 0!important;
	overflow: visible!important;
}

.tableGray  > tbody > tr:nth-child(even) {
	background-color: var(--color-light);
}

.tableGray thead > tr > th {
	background: var(--color-light);
	background-image: linear-gradient(180deg, var(--color-OPgray) 20%, var(--color-gray) 70%);
	color: var(--color-dark);
	border-radius: 0!important;
	white-space: nowrap;
	padding: 5px;
}

.tableGray td {
	border-right: solid 1px var(--color-gray);
	padding: 5px;

}

table.tableGray > tbody > tr > td:last-child {
	border-right : none!important;
}

/* BORDER TABLE */

.borderTable {
	box-shadow: none!important;
	border-radius: 0!important;
}

.borderTable th {
	border-top: solid 1px var(--color-gray);
}

.borderTable th, .borderTable td {
	padding: 5px 10px;
	border-right: solid 1px var(--color-gray);
	border-bottom: solid 1px var(--color-gray);
}


.borderTable > thead > tr > th:first-child, .borderTable > tbody > tr > td:first-child {
	border-left: solid 1px var(--color-gray);
}

.border-left-none.borderTable > thead > tr > th:first-child, .border-left-none.borderTable > tbody > tr > td:first-child {
	border-left: none;
}

.borderTable > thead > tr > th:last-child, .borderTable > tbody > tr > td:last-child {
	border-right: solid 1px var(--color-gray)!important;
}

.borderTable > tbody > tr:last-child > td {
	border-bottom: solid 1px var(--color-gray);
}

.borderTable .fullCell {
	padding: 0;
	vertical-align: top;
}

.borderTable .border-left {
	border-left: solid 1px var(--color-gray)!important;
}

/* MOVE TABLE */
.dropzone {
  opacity: 0.5
}

/* CONFIG TABLE + TABLE CLASSIQUE */
.bloc-config-contenu .fenetre-fonction-boutons {
	border-radius: 2px 2px 0 0;
}
.tableConfig, .tableClassique, .tableConfigGray, .tableLight, .tableBanque, .tableOutils {
	width: 100%;
	background-color: var(--color-light)!important;
	box-shadow: none!important;
	border: none;
	border-collapse: collapse;
	border-radius: 0!important;
	overflow-x: hidden!important;
	overflow-y: visible!important;
}

.tableConfig thead, .tableClassique thead {
	background-color: var(--color-lightprimary);
	border-left: solid 1px var(--color-lightprimary);
	border-right: solid 1px var(--color-lightprimary);
}

.tableBanque thead {
	background-color: var(--color-OPmediumblue);
	border-left: solid 1px var(--color-OPmediumblue);
	border-right: solid 1px var(--color-OPmediumblue);
}

.tableOutils thead {
	background-color: var(--color-electricblue);
	border-left: solid 1px var(--color-electricblue);
	border-right: solid 1px var(--color-electricblue);
	color: var(--color-light);
}

.tableOutils.black thead {
	background-color: var(--color-dark);
	border-left: solid 1px var(--color-dark);
	border-right: solid 1px var(--color-dark);
	color: var(--color-graylight);
}

.tableLight thead {
	background-color: var(--color-graylight);
}

.tableConfigGray thead {
	background-color: var(--color-brown);
	border-left: solid 1px var(--color-lightprimary);
	border-right: solid 1px var(--color-lightprimary);
}

.tableConfig tbody, .tableClassique tbody, .tableConfigGray tbody {
	border-left: solid 1px var(--color-gray);
	border-right: solid 1px var(--color-gray);
}

.tableBanque > tbody > tr, .tableOutils > tbody > tr {
	border-left: solid 1px var(--color-gray);
	border-right: solid 1px var(--color-gray);
}

.tableBanque > tbody > tr:last-child {
	border: none!important;
}

.tableConfig th, .tableClassique th, .tableConfigGray th, .tableLight th, .tableBanque th, .tableOutils th {
	position: relative;
	font-size: 11.2px!important;
}

.tableConfigGray th {
	color: var(--color-light)!important;
	text-transform: uppercase;
}

.tableConfig > thead > tr > th:last-child, .tableConfigGray > thead > tr > th:last-child {
	border-right: solid 1px var(--color-lightprimary);
}

.tableConfig th::after, .tableClassique th::after, .tableConfigGray th::after, .tableBanque th::after, .tableOutils th::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 5px;
	width: 1px;
	height: 18.5px;
	border-right: solid 1px var(--color-medium);
}

.tableOutils th::after {
	height: 28.5px;
}

.tableBanque thead > tr > th:first-child:after, .tableOutils thead > tr > th:first-child:after {
	display: none;
}

.tableConfig .BGlightprimary th::after, .tableClassique .BGlightprimary th::after {
	border-right: solid 1px var(--color-medium);
}

.tableConfig tr > th:first-child:after, .tableClassique tr > th:first-child:after, .tableConfigGray tr > th:first-child:after, .tableBanque tr > th:first-child:after, .tableOutils tr > th:first-child:after {
	display: none;
}

.tableConfig tbody tr:nth-child(even), .tableConfigGray tbody tr:nth-child(even) {
	background-color: var(--color-OPgray)
}

.tableConfig > tbody > tr, .tableClassique > tbody > tr, .tableConfigGray > tbody > tr, .tableLight > tbody > tr, .tableBanque > tbody > tr, .tableOutils > tbody > tr {
	position: relative;
}

.tableConfig > tbody > tr:hover, .tableClassique > tbody > tr:hover, .tableConfigGray > tbody > tr:hover, .tableBanque > tbody > tr:hover, .tableOutils > tbody > tr:hover {
	background-color: var(--color-OPlightprimary)!important;
}

/* .tableConfig > tbody > tr:hover::after, .tableClassique > tbody > tr:hover::after, .tableConfigGray > tbody > tr:hover::after {
	display: none;
	content: "\e872";
	display: block;
	width: 27px;
	height: 25px;
	font-family: 'Material Symbols Outlined';
	position: absolute;
	top: 5px;
	right: 5px;
} */

.tableClassique > tbody > tr.BGOPprimary:hover {
	background-color: var(--color-OPmediumprimary)!important;
}

.tableConfig tr, .tableClassique tr, .tableConfigGray tr, .tableLight tbody tr, .tableBanque tr, .tableOutils tr {
	border-bottom: solid 1px var(--color-gray);
}

.tableBanque > tbody > tr:last-child {
	border-bottom: none!important;
}

.tableConfig td, .tableConfig th, .tableClassique td, .tableClassique th, .tableConfigGray td, .tableConfigGray th, .tableLight td, .tableLight th, .tableBanque td, .tableBanque th, .tableOutils td, .tableOutils th {
	border: none;
	text-align: left;
	padding: 10px!important;
	border-radius: 0!important;
}

.tableConfig th, .tableClassique th, .tableConfigGray th, .tableConfigGray td, .tableBanque th {
	padding: 5px 10px!important;
}

.tableOutils th {
	padding: 10px!important;
}

.tableConfig tr > th:first-child > label, .tableClassique tr > th:first-child > label, .tableConfigGray tr > th:first-child > label, .tableBanque tr > th:first-child > label, .tableOutils tr > th:first-child > label {
	display: none;
	height: fit-content;
	display: block;
}

.tableConfig td, .tableClassique td, .tableConfigGray td, .tableConfigGray td p, .tableLight td, .tableBanque td, .tableOutils td {
	font-size: 11.2px;
	font-weight: 300;
}

.tableConfig .border-top {
	border-top: solid 1px var(--color-gray)!important;
}

.tableConfig .btn-complementary, .tableClassique .btn-complementary {
	background-color: var(--color-OPmedium);
	color: var(--color-dark);
	box-shadow: none;
	padding: 3px 5px;
}

.tableConfig .btn-complementary > p, .tableClassique .btn-complementary > p {
	margin: 0;
}

.tableConfig tr > td:first-child > label, .tableClassique tr > td:first-child > label, .tableConfigGray tr > td:first-child > label, .tableBanque tr > td:first-child > label, .tableOutils tr > td:first-child > label {
	display: block;
	height: fit-content;
	margin: auto 0;
}

.tableConfig .input-classique, .tableClassique .input-classique, .tableConfigGray .input-classique, .tableLight.input-classique, .tableBanque .input-classique, .tableOutils .input-classique {
	width: 50px;
}

.tableClassique.lastResultat > tbody {
	border: none;
}

.tableClassique.lastResultat > tbody tr {
	border-left: solid 1px var(--color-gray);
    border-right: solid 1px var(--color-gray);
}

.tableClassique.lastResultat > tbody > tr:last-child {
	border: none;
}

.tableClassique.lastResultat > tbody > tr:last-child > td {
	border-bottom: solid 1px var(--color-gray);
}

.tableClassique.lastResultat > tbody > tr:last-child > td:last-child {
	border-right: solid 1px var(--color-gray);
}

.tableClassique.lastResultat > tbody > tr:last-child > td.border-left {
	border-left: solid 1px var(--color-gray)!important;
}

/* TABLEAU PRIX LIVRAISON */
.tableLivraison {
	box-shadow: none!important;
	margin: 15px auto;
	width: 95%!important;
	min-width: 95%!important;
	overflow: visible!important;
}

.tableLivraison thead th {
	height: 25px;
	padding: 5px;
	background-color: var(--color-lightprimary);
	color: var(--color-dark);
	text-align: center;
	border-left: solid 1px var(--color-gray);
	border-top: solid 1px var(--color-gray);
	border-bottom: solid 1px var(--color-gray);
}

.tableLivraison tr:hover {
	background-color: var(--color-light)!important;
}

.tableLivraison tr.BGfulllilac {
	background-color: var(--color-lilac)!important;
}

.tableLivraison td {
	height: 25px;
	border-bottom: solid 1px var(--color-gray)!important;
	border-left: solid 1px var(--color-gray)!important;
	border-right: none;
	text-align: center;
	padding: 0 10px;
}

.tableLivraison thead > tr > th:last-child, .tableLivraison tbody > tr > td:last-child {
	border-right: solid 1px var(--color-gray)!important;
}

.tableLivraison td.border-none {
	border-bottom: none!important;
}

.tableLivraison thead > tr > th:first-child, .tableLivraison tbody > tr > td:first-child {
	width: 15%;
}

.tableLivraison td {
	position: relative;
}

.tableLivraison .td-after {
	position: absolute;
	top: 15px;
	right: 13px;
	font-size: 11.2px;
}

.tableLivraison .td-after.small {
	top: 16px;
}


.tableLivraison input, .tableLivraison .dropdown-toggle {
	text-align: right;
	background: var(--color-lightprimary);
	border: none;
	padding-right: 23px;
}

.tableLivraison input:read-only, .tableLivraison .dropdown-toggle.readonly {
	background: none!important;
}

.tableLivraison .dropdown {
	height: 100%;
}

.tableLivraison .tableTitle {
	background-color: var(--color-dark);
    border: solid 3px var(--color-light);
    color: var(--color-light);
	background-color: var(--color-dark);
	background-image: linear-gradient(to left top, #FFFFFF45 0%, #FFFFFF05 51%)!important;
	border-radius: 7px!important;
}

.tableLivraison .ts-wrapper > .ts-control {
	background: none!important;
}

.tableLivraison .option {
	text-align: left;
}

.total-livraison {
	background-color: var(--color-OPdark);
	/* background-image: linear-gradient(to left top, #FFFFFF45 0%, #FFFFFF05 51%)!important; */
	border-radius: 3px;
	box-shadow: 0px 3px 6px #00000029;
	padding: 5px 5px 5px 10px;
}

.total-pieces {
	background-color: #F0E4F8;
	color: var(--color-purple);
	border-radius: 2px;
	padding: 3px 5px;
}

.conversion-euro {
	position: absolute;
	top: 33px;
	right: 10px;
	font-size: 8.8px;
	margin: 0;
	color: var(--color-medium);
}

/* TABLE STOCK */
table.tableStock {
	border: none;
	background: none;
	box-shadow: none;
	border-spacing: 0 5px;
	padding-right: 15px;

	/* position: relative;
	z-index: 5; */
}

.tableStock tr {
	border: none;
	background: none;
}

.tableStock tr > td:first-child {
	font-weight: 600;
}

.tableStock tr > td:last-child {
	width: 100px;
}

.tableStock td {
	padding: 0;
	border: none;
	background: none;

}

.tableStockBorder {
	width: 100%;
	height: 95%;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 0!important;
    box-shadow: none!important;
    background: none!important;
	z-index: 4;
	/* padding-right: 9px; */
}

.tableStockBorder > tbody > tr:hover {
	background: none!important;
}

.tableStockBorder td {
	padding: 0;
	border: none;
}

.tableStockBorder .tdborder {
	border-right: solid 2px var(--color-light);
}

.tableStockBorder > tbody > tr > td:last-child {
	border: solid 1px var(--color-mediumprimary)!important;
	border-radius: 2px;
	width: 130px;
	min-width: 130px;
}

table.vertical-align-top td {
	vertical-align: top;
}

/* TABLEAU DE SELECTION */
table.tableSelection {
	border: solid 1px var(--color-gray);
}

.tableSelection thead {
	background-color: var(--color-primary);
}

.tableSelection thead th {
	color: var(--color-light);
}

.tableSelection .tdSearch {
	padding: 0;
}

.tableSelection .tdSearch input {
	border: none;
	padding: 20px 10px;
}

.tableSelection td {
	padding: 20px 10px;
	font-size: 9.6px;
}

.tableSelection tr.active td {
	background-color: #F0E4F8;
	font-weight: 600;
}

.borderTable tr.active td {
	background-color: var(--color-OPlightprimary);
}

/* TABLEAU PIECES */
.pieceIMG {
	position: absolute;
	max-height: 25px;
	max-width: 110px;
	top: 10px;
}

.pieceDESC {
	position: absolute;
	height: 110px;
	width: 665px!important;
    margin: 0 10px;
    overflow-y: auto;
	top: 10px;
}

.tablePieces {
	width: 100%;
	overflow-x: auto;
}

.tablePieces thead {
	background-color: var(--color-light);
	box-shadow: 0px 3px 6px #00000029;
	z-index: 555;
    position: relative;
}

.tablePieces thead th {
	color: var(--color-mediumblue);
	white-space: nowrap;
}

.tablePieces thead > tr:first-child {
	/* background-color: var(--color-lightprimary); */
	background-color: var(--color-mediumblue);
}
.tablePieces thead > tr:first-child th {
	color: var(--color-light);
}

.tablePieces thead > tr:last-child > th {
	border-right: solid 1px var(--color-lightprimary);
	border-bottom: solid 1px var(--color-lightprimary);
	text-align: center;
}

.tablePieces thead > tr:first-child > th {
	border-right: solid 1px var(--color-light);
	text-align: center;
}

.tablePieces thead tr > th:last-child {
	border-right: none!important;
}

.tablePieces thead > tr:first-child th[colspan="1"] {
	border-bottom: none;
}

.tablePieces input, .tablePieces .ts-wrapper > .ts-control {
	border: none!important;
	background-color: var(--color-OPlightprimary)!important;
}

.tablePieces input.BGnone, .tablePieces .ts-wrapper.BGnone > .ts-control {
	background: none!important;

}

.tablePieces tr {
	position: relative;
}

.tablePieces td {
	white-space: nowrap;
	padding: 2px 10px;
}

.tablePieces tr.non-editable * {
	pointer-events: visible;
}

.tablePieces tr.non-editable input, .tablePieces tr.non-editable .ts-wrapper > .ts-control {
	background: none!important;
}

.tablePieces .ts-wrapper, .tablePieces input {
	margin-bottom: 0;
}

.tablePieces .ts-control .item, .tablePieces input {
	font-weight: 400!important;
}

.tablePieces .semibold.ts-control .item, .tablePieces input.semibold {
	font-weight: 600!important;
}

.tablePieces input::placeholder {
	color: var(--color-dark);
}

.tableAction {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: fit-content;
	position: sticky;
	right: 0;
	top: 0;
	height: 50px;
    padding: 0 20px !important;
    background-color: var(--color-OPdarkprimary);
	pointer-events: all;
	transition: none;
	opacity: 0;
}

.tablePieces tr:hover .tableAction, .tablePieces .tableAction.active {
	opacity: 1;
}

.tableAction > * {
	cursor: pointer;
}

.tablePieces td.cellImage {
	padding: 0 10px!important;
}

.tablePieces img {
	max-width: 200px;
	max-height: 40px;
	display: block;
}

.tablePieces input {
	height: 40px;
	text-align: center;
	width: 98%;
}

.tablePieces td:has(input) {
	position: relative;
	padding: 2px 0;
}

.tablePieces tr:not(.non-editable) td:has(input:not([type="checkbox"]):not([type="radio"])):hover:before {
    content: "\e3c9";
}
.tablePieces tr:not(.non-editable) td:has(input:not([type="checkbox"]):not([type="radio"])):before {
    font-family: 'Material Symbols Outlined';
	font-variation-settings:
	'FILL' 0,
	'wght' 300,
	'GRAD' 0,
	'opsz' 24;
    font-size: 16px;
    color: var(--color-blue);
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);

}

td input.editable {
	border: solid 5px var(--color-light)!important;
	background-color: var(--color-graylight)!important;
	padding-left: 35px!important;
	border-bottom: none !important;
	font-weight: 600;
	/* background: var(--color-OPdark) !important; */
	/* color: var(--color-light) !important; */
}

td span.editable {
	content: "\e3c9";
	font-family: 'Material Symbols Outlined';
	font-variation-settings:
	'FILL' 0,
	'wght' 300,
	'GRAD' 0,
	'opsz' 24;
	font-size: 16px;
	color: var(--color-blue);
	position: absolute;
	left: 5px;
	top: 50%;
	transform: translateY(-50%);
}

/* TABLEAU GRAPHIQUE */
.tableGraphique {
	box-shadow: none!important;
	border-radius: 0!important;
	border-bottom: solid 1px var(--color-gray);
}

.tableGraphique th, .tableGraphique td {
	border: none;
	border-radius: 0!important;
	padding: 3px 5px!important;
	text-align: center!important;
	/* font-size: 10.4px!important; */
}

.tableGraphique th {
	border-bottom: solid 1px var(--color-gray);
	font-weight: 500;
}

.tableGraphique th p {
	font-weight: 500;
}

.tableGraphique td {
	white-space: nowrap;
}

.tableGraphique .border-bottom-none th {
	border-bottom: none;
}

.tableGraphique tr > th:first-child, .tableGraphique tr > td:first-child {
	border-right: solid 1px var(--color-gray);
	text-align: left;
}

.tableGraphique > tbody > tr:nth-child(even) {
	background-color: var(--color-OPgray);
}

.tableGraphique tbody tr:hover {
	background-color: var(--color-OPdarkprimary)
}

.tableGraphique .border-right {
	border-right: solid 1px var(--color-gray)!important;
}

.tableGraphique .bottomGreen {
	border-bottom: solid 3px var(--color-green);
}

.tableGraphique .bottomYellow {
	border-bottom: solid 3px var(--color-yellow);
}

.tableGraphique .bottomHalfGreen {
	position: relative;
}

.tableGraphique .bottomHalfGreen::after {
	content: "";
    display: block;
    background-color: var(--color-green);
    height: 3px;
    width: 50%;
    position: absolute;
    bottom: -3px;
    left: 0;
}

#graphique-logistique {
	margin-left: 16px;
}

/* table liste */
.tableListe, .tableSimple {
    width: 100%!important;
    max-width: 150%!important;
}

.tableListe > thead > tr:first-child, .tableSimple > thead {
	background-color: var(--color-lightprimary);
}

.tableListe > thead > tr:first-child > th {
	border-right: solid 1px var(--color-graylight);
}

.tableListe > thead > tr:last-child > th {
	border-bottom: solid 1px var(--color-gray);
}

.tableListe td, .tableSimple td {
	padding: 10px;
	border-color: var(--color-gray);
	text-align: center;
}

.tableListe thead th, .tableSimple thead th {
	text-align: center;
}

.tableListe thead th .dropdown-toggle::before, .tableSimple thead th .dropdown-toggle::before {
	display: none;
}

.tableListe thead th .dropdown-toggle, .tableListe thead th .dropdown, .tableSimple thead th .dropdown-toggle, .tableSimple thead th .dropdown {
	height: 17px;
}

.tableListe thead th .dropdown-toggle label, .tableListe thead th .dropdown-toggle, .tableSimple thead th .dropdown-toggle label, .tableSimple thead th .dropdown-toggle {
	font-weight: 400;
}

/* TABLE BORDER  */
.tableBorder {
	border: solid 1px var(--color-gray);
	height: 100%;
	border-collapse: collapse;
}

.tableBorder tr {
	border-bottom: solid 1px var(--color-gray);
	height: fit-content;
}

.tableBorder tbody > tr:last-child {
	height: 100%;
}

.tableBorder tbody > tr:last-child:hover {
	background: none!important;
}

.tableBorder th, .tableBorder td {
	padding: 6px;
	border-right: solid 1px var(--color-gray);
	border-bottom: solid 1px var(--color-gray);
	text-align: left;
}

.tableBorder th {
	background-color: var(--color-graylight);
	font-weight: 600;
}

.tableBorder tr > th:last-child, .tableBorder tr > td:last-child {
	border-right: none;
	width: 80px;
}

.tableBorder tr > td:last-child {
	text-align: center;
}

.tableBorder tbody tr:last-child > td {
	border-bottom: none;
}

/* EN TETE FORMULAIRES */
.entete-form {
	width: 95%;
	margin: 0 auto 25px;
	padding: 25px;
	border-radius: 2px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: var(--color-light);
	box-shadow: 0px 3px 6px #00000029;
}

.entete-form > div {
	width: 30%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
	.entete-form > div > div {
		margin: 5px 0;
	}

	/* TITLES */
	.non-editable .attributes {
		display: none;
	}

	.attributes {
		font-size: 17.6px !important;
		text-align: left !important;
		height: 20px;
		font-variation-settings: 'FILL' 0 !important;
		margin-left: 10px;
		pointer-events: all!important;
	}

	span.attributes {
		cursor: context-menu;
	}

	.attributes.simple {
		color: var(--color-blue)!important;
	}

	.attributes.complexe {
		color: var(--color-darkprimary)!important;
	}

	.attributes.interne {
		color: var(--color-medium)!important;
	}

	.help, .helpPop {
		font-size: 17.6px !important;
		font-size: 24px !important;
		font-size: 21px !important;
		text-align: left !important;
		cursor: pointer;
		height: 20px;
		font-variation-settings: 'FILL' 0 !important;
		margin-left: 5px;
		pointer-events: all!important;
	}

	.help.tooltip, .help.title, .helpPop.tooltip, .helpPop.title {
		cursor: help;
	}

	.form-label .help {
		height: 25px;
	}

	.help.action:hover {
		color: var(--color-primary)!important;
	}

	.helpPop {
		color: var(--color-electricblue) !important;
		border: solid 2px var(--color-dark);
		border-radius: 50%;
		font-size: 12.8px !important;
		width: 18px;
		height: 18px;
		display: flex;
		flex-direction: row;
		align-items: center !important;
		justify-content: center;
		padding-top: 1px;
		margin-bottom: 3px;
		cursor: pointer;
		font-variation-settings: 'FILL' 0, 'wght' 700 !important;
	}

	/* tooltip */
	.tooltip > div, .notifications {
		height: 100vh;
		position: fixed;
		right: -540px;
		top: 0;
		background-color: var(--color-light);
		width: 531px;
		padding: 65px 10px 80px 20px;
		box-shadow: 0px 3px 6px #00000030;
		z-index: 989;
		transition: all .6s ease-in-out;
	}
	.tooltip.active > div, .notifications.active {
		right: 0;
	}
	.tooltip > div > span:first-child {
		position: absolute;
		top: 55px;
		right: 10px;
		cursor: pointer;
	}
	
	.tooltip > div > div > p, .tooltip > div > div > p > span, .tooltip > div > div > p > a {
		font-size: 12.8px;
		line-height: 25px;
		color: var(--color-dark)!important;
	}

	.tooltip > div > div > p:first-child,
	.notifications .notification-item.unread .contenuNotification > p:first-child, .notifications .notification-item.unread .contenuNotification > p:first-child > span, .notifications .notification-item.unread .contenuNotification > p:first-child > a  {
		font-size: 16px;
	}
	
	.notifications .notification-item.read .contenuNotification > p:first-child, .notifications .notification-item.read .contenuNotification > p:first-child > span, .notifications .notification-item.read .contenuNotification > p:first-child > a  {
		font-size: 14px;
	}

	.tooltip > div > div:last-child,
	.notifications > div:last-child {
		height: 100%;
		overflow-y: auto;
		padding-bottom: 40px;
	}
	.tooltip > div > div > p:first-child
	.notifications > div > p:first-child {
		font-weight: 600;
	}

	.titreTooltip, .titreRappel, .tableau-calculs label.titreTooltip, .tableau-calculs label.titreRappel {
		border-radius: 3px;
		background-color: var(--color-lightyellow);
		color: var(--color-yellow)!important;
		display: flex;
		padding: 5px 10px;
	}
	.titreTooltip > span, .titreRappel > span {
		color: var(--color-yellow)!important;
	}
	.notification-notification .titreNotification, .tableau-calculs label.titreNotification {
		border-radius: 3px;
		background-color: var(--color-lightblue);
		color: var(--color-blue)!important;
		display: flex;
		padding: 3px 9px 3px 6px;
	}
	.notification-notification .titreNotification > span {
		color: var(--color-blue)!important;
	}
	.notification-amelioration .titreNotification, .tableau-calculs label.titreNotification {
		border-radius: 3px;
		background-color: var(--color-lightgreen);
		color: var(--color-green)!important;
		display: flex;
		padding: 3px 9px 3px 6px;
	}
	.notification-amelioration .titreNotification > span {
		color: var(--color-green)!important;
	}
	.notification-alerte .titreNotification, .tableau-calculs label.titreNotification {
		border-radius: 3px;
		background-color: var(--color-lightred);
		color: var(--color-red)!important;
		display: flex;
		padding: 3px 9px 3px 6px;
	}
	.notification-alerte .titreNotification > span {
		color: var(--color-red)!important;
	}
	.notification-hermes .titreNotification, .tableau-calculs label.titreNotification {
		border-radius: 3px;
		background: var(--gradient-hermes90);
		color: var(--color-light)!important;
		display: flex;
		padding: 3px 9px 3px 6px;
	}
	.notification-hermes .titreNotification > span {
		color: var(--color-light)!important;
	}

	/* title */
	.title {
		display: inline-flex;
		justify-content: center;
		position: relative;
		overflow: hidden;
		position: relative;
	}

	.title:hover {
		overflow: visible;
	}

	.title-text {
		position: fixed;
		/* bottom: 0; */
		font-size: 11.2px!important;
		font-weight: 400;
		white-space: pre!important;
		background: transparent;
		color: transparent;
		padding: 5px 8px;
		border-radius: 2px;
		opacity: 0;
		pointer-events: none;
		transition: bottom 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		width: fit-content;
		white-space: nowrap;
		z-index: 999;

	}

	.title-text::after {
		position: absolute;
		content: "";
		height: 8px;
		width: 8px;
		bottom: -3px;
		left: 50%;
		transform: translate(-50%) rotate(45deg);
		transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}

	.title-text.bottom:after, .title-text.tooltip-visible.bottom:after {
		transform: translate(-50%) rotate(230deg);
		bottom: 0;
		top: -3px;
	}

	.title-text.flex-end::after, .title-text.flex-end {
		left: auto;
		right: 0;
	}

	.title-text.flex-start::after {
		left: 9px;
	}

	.title:hover .title-text, .title-text.tooltip-visible {
		bottom: 27px;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		margin-left: 0!important;
		width: 300px;
		white-space: pre-wrap!important;
		text-align: left;
		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
	}
	
	.title.large:hover .title-text, .title-text.tooltip-visible.large {
		width: 400px;
	}

	.title.superLarge:hover .title-text, .title-text.tooltip-visible.superLarge {
		width: 650px;
	}

	.btn.title:hover .title-text, .title-text.tooltip-visible.button-title {
		bottom: 50px;
	}

	.title:hover .title-text, .title-text.tooltip-visible {
		background-color: var(--color-OPdark);
		color:  var(--color-light)!important;
		padding: 10px 10px 30px;
		min-height: 100px;
		height: fit-content;
		text-indent: 25px;
		line-height: 18px;
		text-transform: none;
	}

	.menu .title:hover .title-text {
		left: 70px!important;
	}

	.title:hover .title-text::after, .title-text.tooltip-visible::after {
		background-image: linear-gradient(-45deg, var(--color-OPdark) 0%, var(--color-OPdark) 50%, transparent 50%);
	}

	.title .title-text::before, .title-text.tooltip-visible::before {
		display: block;
		position: inherit;
		content: '\e88e';
		color: var(--color-light);
		font-family: 'Material Symbols Outlined';
		font-size: 20px;
		margin-left: -25px;
	}

	/* TITLE TIMELINE */
	.title-timeline {
		display: inline-flex;
		justify-content: center;
		position: relative;
	}

	.title-timeline-text {
		position: absolute;
		bottom: 0;
		font-size: 8.8px!important;
		font-weight: 400;
		white-space: pre!important;
		background: transparent;
		color: transparent;
		padding: 5px 8px;
		border-radius: 2px;
		opacity: 0;
		pointer-events: none;
		transition: bottom 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		width: fit-content;
		white-space: nowrap;
		z-index: 999;

	}

	.title-timeline-text::before {
		position: absolute;
		content: "";
		height: 8px;
		width: 8px;
		bottom: -3px;
		left: 50%;
		transform: translate(-50%) rotate(45deg);
		transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}

	.flex-end > .title-timeline-text::before {
		left: auto;
		right: 0;
	}

	.title-timeline:hover .title-timeline-text {
		bottom: 27px;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		margin-left: 0!important;
		width: 200px;
		white-space: pre-wrap!important;
		text-align: center;
		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
	}

	.btn.title-timeline:hover .title-timeline-text {
		bottom: 50px;
	}

	.title-timeline:hover .title-timeline-text,
	.title-timeline:hover .title-timeline-text::before {
		background-color: var(--color-gray);
		color:  var(--color-light)!important;
	}

	/* title config */

	.title-config {
		position: relative;
	}

	.title-config-text {
	position: absolute;
    left: 30%;
	top: 0%;
    padding: 5px 10px;
    border-radius: 2px;
    z-index: 999;
	transition: bottom 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	font-size: 8.8px!important;
	font-weight: 400;
	white-space: pre!important;
	background: transparent;
	color: transparent;
	opacity: 0;
	pointer-events: none;
	width: fit-content;

}

.title-config:hover > .title-config-text {
	top: 110%;
	background-color: var(--color-dark);
    color: var(--color-light);
	opacity: 1;
	pointer-events: auto;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  }

.title-config-text::before {
	position: absolute;
	content: "";
	height: 8px;
	width: 8px;
	top: -3px;
	left: 50%;
	background-color: transparent;
	transform: translate(-50%) rotate(45deg);
  }

  .title-config:hover > .title-config-text::before {
	background-color: var(--color-dark);
  }

	.footer svg {
		width: auto;
		height: 13px;
		margin-right: 5px;
	}

/* INFOS COMPLEMENTAIRES */
		.info-complementaire {
			display: inline-flex;
			justify-content: center;
			cursor: pointer;
			position: absolute;
			z-index: 999;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 100%);
		}
	
		.info-complementaire p {
			position: relative;
			bottom: 0;
			font-size: 10.4px!important;
			font-weight: 400;
			white-space: pre-wrap!important;
			background: transparent;
			color: transparent;
			padding: 5px 8px;
			width: 200px;
			border-radius: 2px;
			opacity: 0;
			pointer-events: none;
			transition: bottom 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
			text-align: left;
		}
	
		.info-complementaire::before {
			position: absolute;
			content: "";
			height: 8px;
			width: 8px;
			top: -4px;
			left: 50%;
			transform: translate(-50%) rotate(45deg);
			background-color: transparent;
			transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		}

		.document {
			cursor: pointer;
		}

		.document.selected {
			border: solid 1px var(--color-electricblue);
		}

		.document:hover ~ .info-complementaire::before {
			background-color: var(--color-light);
		}
	
		.document:hover ~ .info-complementaire {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
			margin-left: 0!important;
			width: 200px;
			height: fit-content;
			white-space: pre-wrap!important;
			text-align: center;
			background-color: var(--color-light);
			box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
	
		}
	
		.document:hover ~ .info-complementaire p {
			color: var(--color-dark);
			opacity: 1;
		}

		.boiteDialogue > .fileDownload {
			position: absolute;
			top: 10px;
			right: 15px;
		}
		
		.media-content > img {
			border-radius: 2px;
			object-fit: contain;
			height: 100%;
			width: 100%;
		}

		.media-content > video, .media-content > iframe {
			width: 100%;
			height: 100%;
			border-radius: 2px;
		}

		.media-content > p {
			position: absolute;
			top: 75%;
			width: 100%;
			text-align: center;
			color: var(--color-medium);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.media-content > a {
			color: var(--color-medium);
			text-decoration: underline;
		}

		.media-content > audio {
			width: 50%;
			margin: 0 auto;
			position: absolute;
			top: 80%;
			left: 25%;
		}

		.doc-active p {
			color: var(--color-blue);
		}

		.doc-active .document {
			border: solid 2px var(--color-blue);
		}

		.detail-document {
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
		}

		.detail-document > div, .detail-document .dropzone-container, .detail-document .dropzone-preview {
			width: 100%;
			height: 100%;
		}

		.detail-document .dropzone-container {
			border: 1px dashed var(--color-gray);
	    	padding: 20px;
		}

		.dropzone-preview > .dropzone-preview-image {
			max-width: 100%;
			max-height: 100%;
			width: 100%;
			height: 100%;
			flex-basis: auto;
			position: relative;
		}

		.dropzone-preview > .dropzone-preview-image > canvas, .dropzone-preview > .dropzone-preview-image > video {
			position: absolute;
			max-width: 100%;
    		max-height: 100%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);		
		}

		.dropzone-preview > .dropzone-preview-image > audio {
			width: 100%;
			bottom: 0;
			position: absolute;
		}

		.dropzone-preview > .dropzone-preview-filename {
			display: none;
		}

		.dropzone-input {
			position: absolute!important;
			height: 100%!important;
			width: 100%!important;
		}

		.dropzone-placeholder {
			font-family: 'Material Symbols Outlined'!important;
			font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48!important;
			font-size: 80px;
			color: var(--color-gray)!important;
		}
		
		.detail-document > img, .detail-document > video {
			position: absolute;
			max-width: 100%;
			max-height: 100%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		
		.detail-document > img {
			cursor: zoom-in;
		}

		.detail-document > audio {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 0) scale(0.9);
		}

		.fileButtons {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			position: absolute;
			top: 5px;
			right: 5px;
		}

		.fileDownload {
			font-size: 16px;
			font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 48;
			font-family: 'Material Symbols Outlined';
			color: var(--color-medium);
			background-color: var(--color-OPlight);
			padding: 5px;
			border-radius: 2px;
			text-decoration: none!important;
		}

		.fileDownload:hover {
			color: var(--color-dark);
		}

		.document .video-play {
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: var(--color-OPmediumdark);
			color: var(--color-graylight);
			font-size: 52px;
		}

/*EDITION*/

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-group, .input-group-row {
	width: 40%;
	display: flex;
	flex-direction: row;
	margin: 0 0 5px 0;
}

.input-group {
	flex-direction: row;
    align-items: start;
	position: relative;
}

/* INPUT */
.input-edit input {
	margin-left: 10px;
}

.non-editable .BGfulldarkprimary input {
	color: var(--color-light);
}

	.input-add, .input-search {
		position: relative;
		height: 19px;
		display: flex;
		align-items: start;
	}

	.input-add:hover::after {
		content: '\e145';
		font-family: 'Material Symbols Outlined';
		width: 13px;
		top: 3px;
		height: 13px;
		display: block;
		text-align: center;
		color: var(--color-light);
		position: absolute;
		right: 3px;
		font-size: 9.6px;
		cursor: pointer;
		border-radius: 50%;
		background: var(--color-medium);
	}

	.input-search::after {
		content: '\e8b6';
		font-family: 'Material Symbols Outlined';
		width: 18px;
		top: 0;
		height: 18px;
		display: block;
		text-align: center;
		border-radius: 2px;
		color: var(--color-dark);
		position: absolute;
		right: 0;
		font-size: 12.8px;
	}

.input-group > div {
	position: relative;
}

.input-group-row {
	flex-direction: row;
}

.textarea {
	position: relative;
}

.textarea textarea {
	background: none;
	border: none;
	border-bottom: solid 1px var(--color-medium);
	padding: 0;
    line-height: 25px;
}

.textarea::before {
	content: "";
    display: inline;
    width: 100%;
    height: 1px;
    border-bottom: solid 1px var(--color-medium);
    position: absolute;
    left: 0;
    top: 27px;
}

.textarea::after {
	content: "";
	display: inline;
	width: 100%;
	height: 1px;
	border-bottom: solid 1px var(--color-medium);
	position: absolute;
	left: 0;
	top: 52px;
}

.RIBfr {
	position: relative;
}

.RIBfr::before {
	content: '';
    display: block;
	width: 41px;
    height: 19px;
    position: absolute;
    top: 0;
    left: 47px;
	border-left: solid 1px var(--color-mediumdark);
	border-right: solid 1px var(--color-mediumdark);
	background-color: transparent;
}
.RIBfr::after {
	content: '';
    display: block;
    width: 1px;
    height: 19px;
    position: absolute;
    top: 0;
    left: 167px;
	border-left: solid 1px var(--color-mediumdark);
	background-color: transparent;
}

.non-editable .RIBfr::before, .non-editable .RIBfr::after {
	display: none;
}

.RIBfr > input {
	position: relative;
	z-index: 99;
	background-color: var(--color-OPgray);
}

input.readonly, .dropdown-toggle.readonly, .dropdown-toggle.readonly input{
	background: var(--color-graylight)!important;
    box-shadow: none!important;
	pointer-events: none;
}

.dropdown-toggle.readonly::after, .dropdown-toggle.readonly::before {
	display: none;
}

label.checked {
font-weight: 600;
}

select {
	appearance: none;
}

.dropdown, .select {
    position: relative;
	height: 19px;
	width: 100%;

}

.select::after {
	content: "\e5d7";
    font-family: 'Material Symbols Outlined';
    width: 22px;
    height: 22px;
    display: block;
    border-radius: 3px;
    margin: 1px;
	color: var(--color-dark);
    position: absolute;
    right: 0;
	top: -5px;
    font-size: 12px;
}

input.readonly {
	border: transparent; /* sinon tableau calcul pas bon*/
	color: var(--color-dark); /* sinon tout est toujours noir*/
	background: var(--color-graylight)!important;
}

textarea.readonly {
	border: solid 1px var(--color-dark)!important;
	color: var(--color-dark)!important;
	background: var(--color-graylight)!important;

	border: none!important;
}

textarea.readonly::placeholder {
	color: var(--color-dark)!important;
}

.input-group-only {
	width: 90%;
	margin: 0 auto;
	margin-bottom: 5px;
	display: flex;
	flex-direction: row;
    align-items: center;
	position: relative;
}

/* form div {
	margin-bottom: 5px;
	display: flex;
	flex-direction: row;
    align-items: start;
	position: relative;
} */

.input-group.darkprimary label , .input-group-only.darkprimary label, .input-group.darkprimary input, .input-group-only.darkprimary input, .input-group.darkprimary .dropdown-toggle, .input-group-only.darkprimary .dropdown-toggle {
	color: var(--color-darkprimary);
}

label.same {
	width: 60%;
    text-align: right;
}

.input-group label, .input-group-only label {
	margin-right: 10px;
}

.input-group input:focus {
	outline: none;
}

.groupe-input > div {
	margin: 15px 0;
}

.input-group span, .input-group-only span {
	white-space: nowrap;
	margin-left: 5px;
}

.see-more:hover {
    border: solid 1px var(--color-medium);
    color: var(--color-mediumdark);
}

.input-lock {
    position: absolute;
    right: 5px;
    font-size: 12.8px;
    top: 1px;
	font-weight: 300;
}

.non-editable .input-lock {
	display: none;
}

.input-group.bloc-blanc {
	width: 45%;
}

.fenetre-item > div:first-child {
	margin-top: 0;
}

.input-hover {
	position: absolute;
    width: 85%;
    right: 0;
	top: 0;
	display: none;
}

.input-hover-on:hover > .input-hover {
	display: flex;
}

.input-hover > div {
	background-color: var(--color-gray);
	cursor: pointer;
	width: 33%;
}

.input-hover > div > p {
	color: var(--color-light);
    width: fit-content;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.input-hover > div > p > span {
	margin-right: 5px;
}

.input-hover > div:hover {
	background-color: var(--color-medium);
}

input.readonly, select.readonly, .dropdown.readonly, .readonly > .dropdown-toggle {
	font-style: italic;
	background: var(--color-graylight)!important;
}

.tableClassique input.readonly, select.readonly, .tableClassique .dropdown.readonly, .tableClassique .readonly > .dropdown-toggle {
	font-style: normal;

}

.readonly.dropdown::after, .readonly > .dropdown-toggle::after {
	display: none;
}

.non-editable .readwfit {
	width: fit-content!important;
	min-width: 0!important;
}

.input-popup {
	position: relative;
}

.input-popup::after {
	content: "\e8b8";
    font-family: 'Material Symbols filled';
    width: 15px;
    height: 15px;
    display: block;
    border-radius: 3px;
    margin: 1px;
    color: var(--color-dark);
    position: absolute;
    right: 0;
    top: 4px;
    font-size: 12px;
}

.btn.dropdown {
	display: block;
    padding: 0;
    margin: auto 15px;
	background-color: var(--color-blue);
	padding: 13px 0;
}

.btn.dropdown > .dropdown-toggle {
	border: none;
    text-transform: uppercase;
    color: var(--color-light);
}

.btn.dropdown > .dropdown-toggle::after {
	content: "";
}

.btn.dropdown:hover > .dropdown-toggle::after {
	content: "\e3c9";
    width: 40px;
    font-size: 12px;
}

.btn.dropdown > .dropdown-toggle.open::after {
    transform: none;
}

.btn.dropdown > .dropdown-menu {
	margin-top: 15px;
    padding: 10px 0;
}

.btn.dropdown > .dropdown-menu input {
	visibility: hidden;
}

.input-classique {
	margin-right: 5px;
	padding: 0 10px;
	border: none!important;
	background: var(--color-graylight);
	text-align: right;
	height: 19px;
}

.totaux .input-classique {
	width: 110px;
	margin-right: 0;
	text-align: right;
}

.input-hover-edit {
	background: none;
}

.input-hover-edit:hover {
	background: var(--color-graylight);
}

/* .edit, .non-edit {
	font-size: 14.4px!important;
} */

.editable .edit, .non-editable .non-edit {
	display: none!important;
}

.slider-box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: relative;
	width: 100%;
	padding: 10px!important;
	cursor: pointer;
	border: solid 1px var(--color-gray) !important;
}

.actions-slider {
	display: none;
    flex-direction: row;
    align-items: center;
    position: absolute;
    top: 0px;
    right: 0px;
    background: var(--color-graylight);
	padding: 10px 10px 5px 5px;
	pointer-events: initial!important;
}

.actions-slider > * {
	pointer-events: initial!important;
}

.slider-box:hover .actions-slider {
	display: flex;
}

.important input, .important .dropdown-toggle{
	border-color: var(--color-darkprimary);
	border-width: 1.5px;
	background-color: var(--color-OPdarkprimary);
}

.important label {
	color: var(--color-darkprimary);
	font-weight: 600;
}

.form-label {
	margin-right: 30px;
	position: relative;
	margin-left: 10px;
	height: fit-content;
	width: 150px;
	min-width: 150px;
}

.form-label.small {
	width: 100px;
	min-width: 100px;
}

.form-label.verylarge {
	width: 250px;
	min-width: 250px;
}

.form-label.large {
	width: 200px;
	min-width: 200px;
}

.form-label label, .form-label > div {
	/* white-space: nowrap; */
	min-height: 25px;
	align-items: center;
	display: flex;
}

.form-label > label, .form-label > div, .form-label > div > div {
	margin-bottom: 10px;
}

.form-label::after {
	display: block;
	content: "";
	height: 100%;
	width: 1px;
	border-right: solid 1px var(--color-gray);
	position: absolute;
	right: -10px;
	top: 0;
}

.BGlightprimary .form-label::after {
	border-right: solid 1px var(--color-light);
}

.form-collection > .flex-row > div {
	height: 25px;
	margin-bottom: 10px;
}

.form-widget {
	width: 100%;
	/* overflow: hidden; */
	padding: 0 1px;
	height: fit-content;
    position: relative;
}

.form-label .br, .form-widget .br {
	content: "";
	height: 25px;
	margin-bottom: 10px;
}

.form-readonly {
	width: 100%;
	max-width: -webkit-fill-available;
	height: 25px;
	margin: 0 0 10px;
	padding: 0 15px;
	font-weight: 300;
	align-items: center;
	display: flex;
	border: solid 1px var(--color-gray) !important;
	text-transform: uppercase;
	white-space: nowrap;
    text-overflow: ellipsis;
	background-color: var(--color-graylight);
}

.form-readonly span {
	font-weight: 300;
}

.bloc-web .form-readonly {
	margin-bottom: 0;
    height: 19px;
    background-color: #FFFFFF10;
	display: flex;
	justify-content: flex-end;
}

input, .ts-wrapper, .form-widget > div {
	width: 100%;
	margin-bottom: 10px;
}

.form-widget > div > .ts-wrapper, .form-widget > div > .ts-control, .form-widget > div > input, .form-widget > div > p, .ts-wrapper.selectAffichage, .selectAffichage > .ts-control {
	margin-bottom: 0!important;
}

.form-widget span:not(.check-handler) {
	height: 25px;
}

.pourcentage {
	position: absolute;
    right: 5px;
	height: fit-content!important;
}

.non-editable .demoSelect::after {
	display: none;
}

.non-editable *, .input-non-editable * {
	pointer-events: none;
}

.non-editable .out-non-editable, .non-editable .out-non-editable * {
	pointer-events: initial!important;
}

.non-editable > div:hover {
	pointer-events: visible;
}

.non-editable .sun-editor .se-wrapper {
	pointer-events: auto;
}

.non-editable .label-categorie, .non-editable .label-categorie *, .non-editable .titre-onglet, .non-editable .title, .non-editable .title, .non-editable .close, .non-editable .label-sous-categorie, .non-editable .onglet-configuration, .non-editable .onglet-configuration * , .non-editable .volets {
	pointer-events: initial;
}

.non-editable:not(.input-visible) input, .non-editable:not(.input-visible) .input, .non-editable:not(.input-visible) .dropdown-toggle, .non-editable:not(.input-visible) .ts-wrapper:not(.blue-box) > .ts-control, .non-editable:not(.input-visible) .ts-wrapper > .ts-dropdown {
	/* border-color: transparent!important; */
	pointer-events: none!important;
}

.non-editable input.blue-box, .non-editable .blue-box.input, .non-editable .blue-box.dropdown-toggle, .non-editable .blue-box.ts-wrapper:not(.blue-box) > .ts-control, .non-editable .blue-box.ts-wrapper > .ts-dropdown {
	border-color: var(--color-blue)!important;
}

.non-editable input.darkblue-box, .non-editable .darkblue-box.input, .non-editable .darkblue-box.dropdown-toggle, .non-editable .darkblue-box.ts-wrapper:not(.darkblue-box) > .ts-control, .non-editable .darkblue-box.ts-wrapper > .ts-dropdown {
	border-color: var(--color-darkblue)!important;
}

.non-editable input.electricblue-box, .non-editable .electricblue-box.input, .non-editable .electricblue-box.dropdown-toggle, .non-editable .electricblue-box.ts-wrapper:not(.electricblue-box) > .ts-control, .non-editable .electricblue-box.ts-wrapper > .ts-dropdown {
	border-color: var(--color-electricblue)!important;
}

.non-editable input.yellow-box, .non-editable .yellow-box.input, .non-editable .yellow-box.dropdown-toggle, .non-editable .yellow-box.ts-wrapper:not(.yellow-box) > .ts-control, .non-editable .yellow-box.ts-wrapper > .ts-dropdown {
	border-color: var(--color-yellow)!important;
}

.non-editable input.green-box, .non-editable .green-box.input, .non-editable .green-box.dropdown-toggle, .non-editable .green-box.ts-wrapper:not(.green-box) > .ts-control, .non-editable .green-box.ts-wrapper > .ts-dropdown {
	border-color: var(--color-green)!important;
}

.non-editable input.gray-box, .non-editable .gray-box.input, .non-editable .gray-box.dropdown-toggle, .non-editable .gray-box.ts-wrapper:not(.gray-box) > .ts-control, .non-editable .gray-box.ts-wrapper > .ts-dropdown {
	border-color: var(--color-gray)!important;
}

/* .non-editable:not(.input-visible):not(.empty) input, .non-editable:not(.input-visible):not(.empty) .input, .non-editable:not(.input-visible):not(.empty) .dropdown-toggle, .non-editable:not(.input-visible):not(.empty) .ts-wrapper > .ts-control, .non-editable:not(.input-visible):not(.empty) .ts-wrapper > .ts-dropdown {
	background: none!important;
} */

.non-editable input.border-blue, .non-editable .input.border-blue, .non-editable .dropdown-toggle.border-blue, .non-editable .border-blue .ts-control {
	border-color: var(--color-blue)!important;
}

.non-editable input:hover, .non-editable .input:hover, .non-editable .dropdown-toggle:hover {
	pointer-events: visible;
}

.non-editable input:hover, .non-editable .input:hover, .non-editable .dropdown-toggle:hover {
	border-bottom: 1px solid var(--color-medium)!important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0;
}

.non-editable .add-group, .non-editable .edit-visible, .non-editable .dropdown-toggle::after, .non-editable .dropdown-toggle::before, .non-editable .ts-control::after {
	display: none!important;
}

input[type="date"][readonly]::-webkit-calendar-picker-indicator {
    display: none;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator {
	opacity: 1;
}

.selectAffichage {
	min-width: 150px !important;
    width: fit-content;
}

.selectAffichage.pager {
	width: 100px!important;
	margin: 0 20px;
}

.expandAffichage {
	font-weight: 300;
	color: var(--color-mediumprimary);
	cursor: pointer;
	width: 20px;
	transform: rotate(360deg);
	transition: all linear .25s;
}

.expandAffichage.active {
	transform: rotate(180deg);
}

.bloc-web.non-editable input, .bloc-web.non-editable .input, .bloc-web.non-editable .dropdown-toggle {
	border-right: none!important;
	border-color: var(--color-medium);
}

/* .non-editable.fiche input, .non-editable.fiche .input, .non-editable.fiche .dropdown-toggle {
	border-bottom: none!important;
} */

.non-editable input:hover:after, .non-editable .input-add:hover:after, .non-editable .input-popup:after, .non-editable .checkbox-wrapper > label > span, .non-editable .non-editable-hidden {
	display: none!important;
}

.non-editable .non-editable-not-visible {
	visibility: hidden;
}

.non-editable .checkbox > input, .non-editable .checkbox ~ svg {
	/* visibility: hidden; */
	pointer-events: none;
	border-color: var(--color-medium)!important;
	border-bottom: solid 1px var(--color-medium)!important;
}

.non-editable .liste .checkbox > input, .non-editable .liste .checkbox ~ svg {
	visibility: visible;
}

.non-editable .check-trail {
	pointer-events: none;
}

.toolong::after {
	content: '\e9e7';
	font-family: 'Material Symbols Outlined';
	display: block;
}

input.toolong {
	overflow-x: hidden;
}

input.toolong:hover {
	overflow-x: visible;
	background-color: var(--color-light);
	z-index: 999;
}

.calendar-out {
	position: relative;
	overflow: visible;
}

.calendar-out::-webkit-calendar-picker-indicator {
	position: absolute;
	right: -20px;
}

.add-group > div:hover > *, .add-group:hover > * {
	color: var(--color-dark)!important;
	cursor: pointer;

}


.blue-box, .ts-wrapper.blue-box > .ts-control, input.blue-box {
	border: solid 1px var(--color-blue)!important;
	/* color: var(--color-blue); */
	/* padding: 5px!important; */
	padding-left: 15px !important;
	/* min-width: 200px!important; */
	overflow: hidden!important;
	min-height: 25px!important;
}

.ts-wrapper.blue-box .ts-control::after {
	color: var(--color-darkblue)!important;
}

.darkblue-box, .ts-wrapper.darkblue-box > .ts-control, input.darkblue-box {
	border: solid 1px var(--color-darkblue)!important;
	padding: 0 15px!important;
	overflow: hidden!important;
	min-height: 25px!important;
}

.yellow-box.dateTimePicker > input, .ts-wrapper.yellow-box > .ts-control, input.yellow-box {
	border: solid 1px var(--color-yellow)!important;
	padding: 0 15px!important;
	overflow: hidden!important;
	min-height: 25px!important;
}

.electricblue-box, .ts-wrapper.electricblue-box > .ts-control, input.electricblue-box {
	border: solid 1px var(--color-electricblue)!important;
	padding: 0 15px!important;
	overflow: hidden!important;
	min-height: 25px!important;
}

.gray-box, .ts-wrapper.gray-box > .ts-control, input.gray-box {
	border: solid 1px var(--color-gray)!important;
	padding-left: 15px !important;
	overflow: hidden!important;
	min-height: 25px!important;
}

.ts-wrapper.blue-box, .ts-wrapper.darkblue-box, .ts-wrapper.electricblue-box {
	border: none!important;
	padding: 0!important;
	overflow: visible!important;
}

.blue-box p {
	width: 100%;
	text-align: right;
}

.dark-box, .ts-wrapper.dark-box > .ts-control {
	border: solid 1px var(--color-medium)!important;
	width: 100%;
	padding: 5px!important;
	min-width: 200px!important;
	overflow: hidden!important;
	height: 25px!important;
}

.dark-box {
	padding: 5px!important;
}

.dark-box .ts-control::after {
	height: 26px!important;
}

.ts-wrapper.dark-box {
	border: none!important;
	padding: 0!important;
	overflow: visible!important;
}

.label-blue-box {
	height: 25px;
}

.input-after {
	padding: 0 10px!important;
	background-color: var(--color-electricblue);
	color: var(--color-light)!important;
	text-transform: uppercase;
	margin-left: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 25px!important;
	min-width: 45px;
	width: fit-content;
	white-space: nowrap;
}

.bloc-web .input-after {
	height: 19px !important;
	min-height: 19px !important;
	padding: 0!important;
}

div.input-after, button.input-after {
	padding: 0 20px!important;
}

.input-after.mediumprimary {
	background-color: var(--color-mediumprimary);
	color: var(--color-light)!important;
}

.input-after.darkblue {
	background-color: var(--color-darkblue);
	color: var(--color-light)!important;
}

.input-after.yellow {
	background-color: var(--color-yellow);
	color: var(--color-light)!important;
}

.input-after.green {
	background-color: var(--color-green);
	color: var(--color-light)!important;
}

.input-after.blue {
	background-color: var(--color-blue);
	color: var(--color-light)!important;
}

.input-after.smallAfter {
	width: 22px;
    min-width: 22px;
    height: 22px !important;
    background-color: var(--color-OPmediumdark);
}

.input-contact .ts-control {
	padding-left: 30px!important;
}

.input-before-contact {
	position: absolute;
	left: 0;
	top: 0;
	width: 25px;
	height: 25px;
	background-color: var(--color-light);
	color: var(--color-blue);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border: solid 1px var(--color-gray);
	z-index: 2;
}

.see-more {
	padding: 5px 10px;
    border: solid 1px var(--color-gray);
    color: var(--color-medium);
	cursor: pointer;
}

.hover-black:hover {
	color: var(--color-dark)!important;
}

.hover-mediumdark:hover {
	color: var(--color-mediumdark)!important;
}

.hover-BGgraylight:hover {
	background-color: var(--color-graylight)!important;
}

.hover-BGyellow {
	transition: all 650ms ease;
}

.hover-BGyellow:hover {
	background-color: var(--color-yellow)!important;
}

.hover-BGgray {
	transition: all 650ms ease;
}

.hover-BGgray:hover {
	background-color: var(--color-gray)!important;
}

.hover-modify, .ts-wrapper.hover-modify, .ts-wrapper.hover-modify .ts-control {
	border-bottom: solid 1px transparent!important;
	border-left: solid 1px transparent!important;
	background: none!important;
}

.ts-wrapper.hover-modify .ts-control::after, .ts-wrapper.hover-modify .ts-control .remove {
	display: none!important;
}

.ts-wrapper.hover-modify:hover .ts-control::after, .ts-wrapper.hover-modify:hover .ts-control .remove {
	display: flex!important;
}

.hover-modify:hover {
	border-bottom: solid 1px var(--color-medium)!important;
	border-left: solid 1px var(--color-medium)!important;
	background-color: var(--color-graylight)!important;
}

	/* ETIQUETTES CYCLE DE VIE */
	.cycle-produit div.option, .cycle-produit .ts-control > div.item, .cycle-produit > p, .ag-cell.cycle-produit span.cycle {
		width: fit-content!important;
		height: fit-content!important;
		padding: 3px 5px!important;
		border-radius: 2px;
		margin: 1px 5px!important;
		background-color: var(--color-medium);
		color: var(--color-light)!important;
		text-transform: uppercase;
		font-size: 9.6px;
		text-align: center;
		display: flex;
	}

	.cycle-produit > p {
		height: 24px !important;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px !important;
	}

	.ts-wrapper.cycle-produit.plugin-remove_button:not(.rtl) .item {
		padding-right: 5px!important;
		margin-left: 0!important;
	}

	.non-editable .ts-wrapper.multi.cycle-produit .ts-control .item::after {
		display: none;
	}

	.cycle-produit div.option:before, .cycle-produit .ts-control > div.item:before, .cycle-produit > p:before, .ag-cell.cycle-produit span.cycle:before {
		display: inline-block;
		font-family: 'Material Symbols Outlined';
		margin-right: 5px;
		color: var(--color-light);
		font-size: 11.2px;
	}

	.cycle-produit div.option[data-value="1"], .cycle-produit div.option[data-value="2"],  .cycle-produit div.option[data-value="3"], 
	.cycle-produit .ts-control > div.item[data-value="1"], .cycle-produit .ts-control > div.item[data-value="2"],  .cycle-produit .ts-control > div.item[data-value="3"], 
	.cycle-produit > p[value="1"], .cycle-produit > p[value="2"],  .cycle-produit > p[value="3"],
	.ag-cell.cycle-produit span.cycle[value="1"], .ag-cell.cycle-produit span.cycle[value="2"],  .ag-cell.cycle-produit span.cycle[value="3"] {
		background-color: var(--color-yellow)!important;
	}
	.cycle-produit div.option[data-value="4"], .cycle-produit div.option[data-value="5"], .cycle-produit div.option[data-value="6"], 
	.cycle-produit .ts-control > div.item[data-value="4"], .cycle-produit .ts-control > div.item[data-value="5"], .cycle-produit .ts-control > div.item[data-value="6"], 
	.cycle-produit > p[value="4"], .cycle-produit > p[value="5"], .cycle-produit > p[value="6"],
	.ag-cell.cycle-produit span.cycle[value="4"], .ag-cell.cycle-produit span.cycle[value="5"], .ag-cell.cycle-produit span.cycle[value="6"] {
		background-color: var(--color-green)!important;
	}
	.cycle-produit div.option[data-value="7"], .cycle-produit div.option[data-value="8"], .cycle-produit div.option[data-value="9"], .cycle-produit div.option[data-value="10"], 
	.cycle-produit .ts-control > div.item[data-value="7"], .cycle-produit .ts-control > div.item[data-value="8"], .cycle-produit .ts-control > div.item[data-value="9"], .cycle-produit .ts-control > div.item[data-value="10"], 
	.cycle-produit > p[value="7"], .cycle-produit > p[value="8"], .cycle-produit > p[value="9"], .cycle-produit > p[value="10"],
	.ag-cell.cycle-produit span.cycle[value="7"], .ag-cell.cycle-produit span.cycle[value="8"], .ag-cell.cycle-produit span.cycle[value="9"], .ag-cell.cycle-produit span.cycle[value="10"] {
		background-color: var(--color-red)!important;
	}
	.cycle-produit div.option[data-value="11"], .cycle-produit div.option[data-value="12"], 
	.cycle-produit .ts-control > div.item[data-value="11"], .cycle-produit .ts-control > div.item[data-value="12"], 
	.cycle-produit > p[value="11"], .cycle-produit > p[value="12"],
	.ag-cell.cycle-produit span.cycle[value="11"], .ag-cell.cycle-produit span.cycle[value="12"] {
		background-color: var(--color-blue)!important;
	}

	.cycle-produit div.option[data-value="1"]:before, .cycle-produit .ts-control > div.item[data-value="1"]:before, .cycle-produit > p[value="1"]:before, .ag-cell.cycle-produit span.cycle[value="1"]:before {
		content: '\e746';
	}
	.cycle-produit div.option[data-value="2"]:before, .cycle-produit .ts-control > div.item[data-value="2"]:before, .cycle-produit > p[value="2"]:before, .ag-cell.cycle-produit span.cycle[value="2"]:before {
		content: '\ea4b';
	}
	.cycle-produit div.option[data-value="3"]:before, .cycle-produit .ts-control > div.item[data-value="3"]:before, .cycle-produit > p[value="3"]:before, .ag-cell.cycle-produit span.cycle[value="3"]:before {
		content: '\e870';
	}
	.cycle-produit div.option[data-value="4"]:before, .cycle-produit .ts-control > div.item[data-value="4"]:before, .cycle-produit > p[value="4"]:before, .ag-cell.cycle-produit span.cycle[value="4"]:before {
		content: '\e863';
	}
	.cycle-produit div.option[data-value="5"]:before, .cycle-produit .ts-control > div.item[data-value="5"]:before, .cycle-produit > p[value="5"]:before, .ag-cell.cycle-produit span.cycle[value="5"]:before {
		content: '\e8b1';
	}
	.cycle-produit div.option[data-value="6"]:before, .cycle-produit .ts-control > div.item[data-value="6"]:before, .cycle-produit > p[value="6"]:before, .ag-cell.cycle-produit span.cycle[value="6"]:before {
		content: '\f05b';
	}
	.cycle-produit div.option[data-value="7"]:before, .cycle-produit .ts-control > div.item[data-value="7"]:before, .cycle-produit > p[value="7"]:before, .ag-cell.cycle-produit span.cycle[value="7"]:before {
		content: '\e5c9';
	}
	.cycle-produit div.option[data-value="8"]:before, .cycle-produit .ts-control > div.item[data-value="8"]:before, .cycle-produit > p[value="8"]:before, .ag-cell.cycle-produit span.cycle[value="8"]:before {
		content: '\e14b';
	}
	.cycle-produit div.option[data-value="9"]:before, .cycle-produit .ts-control > div.item[data-value="9"]:before, .cycle-produit > p[value="9"]:before, .ag-cell.cycle-produit span.cycle[value="9"]:before {
		content: '\e1a2';
	}
	.cycle-produit div.option[data-value="10"]:before, .cycle-produit .ts-control > div.item[data-value="10"]:before, .cycle-produit > p[value="10"]:before, .ag-cell.cycle-produit span.cycle[value="10"]:before {
		content: '\ef71';
	}
	.cycle-produit div.option[data-value="11"]:before, .cycle-produit .ts-control > div.item[data-value="11"]:before, .cycle-produit > p[value="11"]:before, .ag-cell.cycle-produit span.cycle[value="11"]:before {
		content: '\f233';
	}
	.cycle-produit div.option[data-value="12"]:before, .cycle-produit .ts-control > div.item[data-value="12"]:before, .cycle-produit > p[value="12"]:before, .ag-cell.cycle-produit span.cycle[value="12"]:before {
		content: '\e153';
	}

	.type-produit > div[value="1"] * {
		color : var(--color-blue)!important;
	}

	.type-produit > div[value="2"] * , .type-produit > div[value="5"] * {
		color : var(--color-purple)!important;
	}

	.type-produit > div[value="3"] * {
		color : var(--color-darkyellow)!important;
	}

	.type-produit > div[value="4"] * {
		color : var(--color-darkblue)!important;
	}

/* ETIQUETTES */
.form-etiquette {
	display: flex;
	flex-direction: row;
	align-items: center;
    height: 22px;
    width: fit-content;
    margin-left: 5px;
    position: relative;
    padding: 2px 10px !important;
    border-radius: 2px;
	background-color: var(--color-medium);
}

.form-etiquette > input[type="checkbox"] {
	appearance: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    background: none;
    border: none;
	cursor: pointer;
}

.form-etiquette > label {
	color: var(--color-light)!important;
	text-transform: uppercase;
	font-size: 9.6px;
	text-align: center;
	width: 100%;
}

.form-etiquette > span {
	color: var(--color-light)!important;
	font-size: 11.2px;
	margin-right: 5px;
}

/* AFFICHAGE WEB */
.affichage-web .input-group {
	display: flex;
	flex-direction: column;
}

.affichage-web input, .affichage-web .dropdown-toggle {
	border: solid 1px var(--color-medium)!important;
    padding: 5px 10px;
    height: 25px;
	width: 100%;
}

.affichage-web .dropdown {
	height: 25px;
}

.affichage-web .dropdown-toggle::after, .affichage-web .dropdown-toggle::before {
    right: 0px;
    top: 0px;
    font-size: 12px;
    height: 29px;
    width: 29px;
	border-right: none;
	border-top: none;
}

/* POPUP*/
.popup {
	position: fixed;
	top: -102%;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	z-index: 999;
	transition: all .5s ease-in-out;
}

.popup.active {
	top: 0;
}

.popupBackground {
	background-color: var(--color-dark);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0;
	transition: all .5s ease-in-out;
}

.popupBackground.fadeIn {
	opacity: 0.8;
}

.popup.popupExplication .boiteDialogue {
	background-color: var(--color-OPdark);
    color: var(--color-light) !important;
    padding: 10px 10px 30px;
    min-height: 100px;
    height: fit-content;
    line-height: 18px;
	padding: 20px;
}

.configuration {
    width: 90%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 2px;
	box-shadow: 0px 3px 6px #00000029;
	background-color: var(--color-light);
}

.titre-configuration {
    width: 99%;
	margin: 10px auto;
    padding: 10px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 2px 5px 0 0;
}

.titre-configuration > div > div > p:first-child {
	font-size: 11.2px;
	text-transform: uppercase;
	padding-left: 5px;
	font-weight: 600;
}

.titre-configuration > p, .titre-configuration > span, .titre-configuration > div > div > p, .titre-configuration > div > span {
	color: var(--color-darkprimary);
    margin: 0 5px;
}

/* SLIDE */
.slide {
    z-index: 989;
	position: fixed;
    height: 100vh;
	width: 100vw;
    right: -102%;
    top: 0;
	transition: all .6s ease-in-out;
}

.slide > turbo-frame > div, .slide > div {
	width: 50vw;
	height: 100vh;
	background-color: var(--color-light);
	border-radius: 2px;
	box-shadow: 0px 3px 6px #00000029;
	padding: 90px 20px;
	overflow-y: auto;
	position: absolute;
	right: 0;
	top: 0;
}

.slide > turbo-frame > div.bloc-onglets, .slide > div.bloc-onglets {
	padding: 90px 10px 50px 15px;
}

.slide.graySlide > div:not(.slideBackground):not(.close) {
	background-color: var(--color-graylight);
}

.slide.fullSlide > div {
	width: 100%;
	padding: 90px 10px 37px 53px;
}

.slide.active {
    right: 0;
}

.slide .slideBackground {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-dark);
	opacity: 0;
	transition: all .6s ease-in-out;
}

.slide .slideBackground.fadeIn {
	opacity: 0.6;
}

.label-categorie-piece {
	width: 100%;
	height: 40px;
    background: none;
	padding: 0;
	padding-left: 15px;
	background-image : linear-gradient(135deg, var(--color-lightelectricblue) 0%, var(--color-electricblue) 74%);
}

.slide > turbo-frame > div > .label-categorie,
.slide > turbo-frame > div > form > .label-categorie, 
.slide > turbo-frame > div > .form > .label-categorie, 
.slide > div > .label-categorie,
.slide > div > form > .label-categorie, 
.slide > div > .form > .label-categorie, 
.popup > div > .label-categorie, 
.popup > div > form > .label-categorie,
.popup > div > .form > .label-categorie {
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	height: 40px;
    background: none;
	padding: 0;
	padding-left: 15px;
    /* background-image: linear-gradient(135deg, var(--color-OPprimary) 15%, var(--color-OPprimary) 50%) !important;
    background-color: var(--color-darkblue); */
	/* background-color: var(--color-mediumprimary) !important; */
	background-image : linear-gradient(135deg, var(--color-lightelectricblue) 0%, var(--color-electricblue) 74%);
}

.popup > div > .label-categorie {
	top: 0;
}

.slide.slideConfiguration > div > .label-categorie {
	background-image: linear-gradient(240deg, var(--color-dark) 0%, var(--color-darkprimary) 50%, var(--color-mediumprimary) 100%) !important;
}

.slide.fullSlide > div > .label-categorie > p, .slide.fullSlide > div > form >.label-categorie > p {
	padding-left: 40px;
	margin-left: 30px;
}

.slide > turbo-frame > div > .label-categorie .recherche-config, 
.slide > turbo-frame > div > form > .label-categorie .recherche-config,
.slide > div > .label-categorie .recherche-config, 
.slide > div > form > .label-categorie .recherche-config {
	background-color: var(--color-light)!important;
}
.slide > turbo-frame > div > .label-categorie p, 
.slide > turbo-frame > div > form > .label-categorie p, 
.slide > turbo-frame > div > .form > .label-categorie p, 
.slide > div > .label-categorie p, 
.slide > div > form > .label-categorie p, 
.slide > div > .form > .label-categorie p, 
.popup > div > .label-categorie label, 
.popup > div > .label-categorie span, 
.popup > div > form > .label-categorie label, 
.popup > div > form > .label-categorie span,
.label-categorie-piece p {
	color: var(--color-light);
	margin: 0;
	text-transform: uppercase;
}

.slide > turbo-frame > div > .label-categorie .btn, 
.slide > turbo-frame > div > form > .label-categorie, 
.slide > turbo-frame > div > .form > .label-categorie, 
.slide > div > .label-categorie .btn, 
.slide > div > form > .label-categorie, 
.slide > div > .form > .label-categorie, 
.btn, .popup > div > .label-categorie .btn, 
.popup > div > form > .label-categorie .btn, 
.popup > div > form > .label-categorie button,
.label-categorie-piece .btn {
	margin: 0;
}

/* .btnSlide, .slide > div > .label-categorie button, .slide > div > form> .label-categorie button, .popup > div > .label-categorie button, .popup > div > form > .label-categorie button, .slide .btn-submit-slide {
	height: 100%;
    width: fit-content;
    padding: 10px 20px;
	font-family: var(--font-primary);
	color: var(--color-light);
	text-transform: uppercase;
	cursor: pointer;
} */

.slide > turbo-frame > div > .label-categorie a, 
.slide > turbo-frame > div > form> .label-categorie a, 
.slide > div > .label-categorie a, 
.slide > div > form> .label-categorie a, 
.popup > div > .label-categorie a, 
.popup > div > form > .label-categorie a,
.label-categorie-piece a {
	height: 100%;
	display: flex;
    align-items: center;
}

.btnSlide, 
.slide > turbo-frame > div > .label-categorie button.button-primary, 
.slide > turbo-frame > div > form> .label-categorie button.button-primary, 
.slide > div > .label-categorie button.button-primary, 
.slide > div > form> .label-categorie button.button-primary, 
.popup > div > .label-categorie button.button-primary, 
.popup > div > form > .label-categorie button.button-primary, 
.slide .btn-submit-slide,
.label-categorie-piece button.button-primary {
	/* background-color: var(--color-OPprimary) !important; */
	border: solid 1px var(--color-light);
    color: var(--color-light);
    margin-right: 10px;
	
}

.button-white {
	background-color: var(--color-light);
	color: var(--color-electricblue);
}

.button-white > p {
	color: var(--color-electricblue);
}

.slide .btn-submit-slide {
    position: absolute;
    top: 39px;
    right: 0;
    margin-top: 8px;
}

.slide .btn-submit-slide.disabled {
	opacity: .4;
}

.slide.fullSlide .close {
	left: 45px;
	top: 43px;
	height: fit-content;
	width: fit-content;
	background-color: transparent;
	padding: 0;
    box-shadow: none;
    overflow: visible;
}

.fullSlide .close.openSlide span, .label-categorie-piece > div:first-child span {
	color: var(--color-OPlight)!important;
	font-size: 30.4px !important;
}

.label-categorie-piece > div:first-child p {
	font-size: 13.6px;
	text-transform: uppercase;
	font-weight: 600;
}

/* CALCULS */
.tableau-calculs > div:nth-child(2) {
	min-width: 600px;
	width: 45%;
	background-color: var(--color-dark);
    padding-top: 50px;
}

.tableau-calculs .close, .slide-configuration-bloc .close {
	left: 10px;
	right: auto;
}

.tableau-calculs > div > div:not(.tooltip) {
	width: 95%;
	height: 95%;
	overflow-y: auto;
	overflow-x: clip;
}

.tableau-calculs .input-classique {
	border: none;
    color: var(--color-gray);
    text-align: right;
    background-color: var(--color-OPblue)!important;
    box-shadow: inset 0px 3px 6px #00000029!important;
	margin-bottom: 0;
	height: 19px!important;
	min-height: 19px!important;
}

.tableau-calculs .bloc-section-web .input-classique {
	margin-bottom: 0;;
}

.tableau-calculs label {
	text-align: right;
	color: var(--color-mediumdark);
}
.tableau-calculs .BGblue {
	background-image: none!important;
	background-color: var(--color-blue)!important;
	color: var(--color-light)!important;
}

.tableau-calculs .BGorange {
	background-color: var(--color-darkyellow)!important;
	color: var(--color-light)!important;
}

.tableau-calculs .BGOPgray {
	background-image: none!important;
	background-color: var(--color-OPgray)!important;
	color: var(--color-light)!important;
}

.tableau-calculs .BGgraylight {
	background-image: none!important;
	background-color: var(--color-graylight)!important;
	color: var(--color-mediumdark)!important;
}

.tableau-calculs .BGgraylight.blue {
	color: var(--color-blue)!important;
}

.tableau-calculs .bloc-section-web.BGfulldarkprimary {
	background-image: linear-gradient(to left top, #FFFFFF15 0%, #FFFFFF08 51%)!important;
}

.tableau-calculs .BGred {
	background-image: none!important;
	background-color: var(--color-red)!important;
	color: var(--color-light)!important;
}

.tableau-calculs .BGyellow {
	background-image: none!important;
	background-color: var(--color-yellow)!important;
	color: var(--color-light)!important;
}

.tableau-calculs .BGgreen {
	background-image: none!important;
	background-color: var(--color-green)!important;
	color: var(--color-light)!important;
}

.tableau-calculs .BGdarkgreen {
	background-image: none!important;
	background-color: var(--color-darkgreen)!important;
	color: var(--color-light)!important;
}

.tableau-calculs .input-after {
	background-color: var(--color-OPmedium);
    border: solid 1px var(--color-OPmediumdark);
	top: 0;
	height: 19px!important;
	width: 20px!important;
	min-width: 20px!important;
}

.tableau-calculs .input-classique ~ .input-after {
    border-bottom: solid 1px var(--color-OPmediumdark);
	width: 20px;
	min-width: 20px;
}

.tableau-calculs input.readonly {
    color: var(--color-mediumdark)!important;
	background-color: #FFFFFF10!important;
}

.tableau-calculs input.readonly.BGfullmediumprimary {
	background-color: var(--color-mediumprimary)!important;
}

.tableau-calculs input.readonly.BGOPgreen {
	background-color: var(--color-OPgreen)!important;
}

.tableau-calculs input.readonly.white {
    color: var(--color-light)!important;
}

.tableau-calculs input.readonly.graylight {
    color: var(--color-graylight)!important;
}

.tableau-calculs input.readonly.background {
    color: var(--color-light)!important;
	font-style: normal;
}

/* ONGLETS */
.bloc-onglets .onglet-configuration {
	width: 100%;
	padding: 0;
}

.bloc-onglets .onglet-configuration .onglet, .bloc-onglets .onglet-configuration .sliderOngletBtn {
	width: fit-content;
	height: 100%;
	display: flex;
	justify-content: center;
	position: relative;
	padding: 10px 20px;
	cursor: pointer;
}

.bloc-onglets .onglet-configuration .sliderOngletBtn {
	padding: 5px 10px;
}

.bloc-onglets .onglet-configuration-fiche {
	margin-left: 280px;
}

.bloc-blanc-BS.bloc-onglets .onglet-configuration {
	padding: 5px 10px;
}

.bloc-blanc-BS.bloc-onglets .onglet-configuration .onglet p, .bloc-blanc-BS.bloc-onglets .onglet-configuration .sliderOngletBtn p {
	text-transform: uppercase;
}

.bloc-onglets .onglet-configuration .onglet:hover p, .bloc-onglets .onglet-configuration .sliderOngletBtn:hover p {
	color: var(--color-mediumdark);
}


.bloc-onglets .onglet-configuration .onglet.active, .bloc-onglets .onglet-configuration .sliderOngletBtn.active {
	background-color: var(--color-light);
}

.bloc-blanc-BS.bloc-onglets .onglet-configuration .onglet.active, .sliderOngletParent .onglet-configuration .sliderOngletBtn.active {
	background: none;
	border-bottom: solid 1px var(--color-darkprimary)!important;
}

.onglet.active p, .sliderOngletBtn.active p {
	font-weight: 600;
}

.bloc-onglets .onglet-configuration p {
	margin: 0;
}

.bloc-blanc-BS.bloc-onglets .bloc-onglet {
	border: solid 1px var(--color-gray);
}

.document {
	width: 100%;
	padding-bottom: 100%;
	position: relative;
	cursor: zoom-in;
}

.document img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.bloc-onglets .empty.obligatoire {
	background-color: var(--color-light);
	padding: 5px;
	/* position: absolute;
	top: 0px;
	right: 0; */
}

.bloc-onglets .bloc-blanc {
	border-radius: 0 0 5px 5px;
}

.popup-configuration .body-onglets {
	height: 80%;
	overflow-y: auto;
}

.contenu-configuration input, .contenu-configuration .dropdown, .contenu-configuration textarea {
	background-color: var(--color-light);
}

.contenu-configuration {
	margin: 20px;
    height: 100%;
    overflow-y: auto;
}

.contenu-border-configuration {
	padding: 0 20px;
	border: solid 1px var(--color-mediumdark);
	border-radius: 2px;
}

.contenu-configuration > div {
	margin: 20px 0;
}

.contenu-configuration .dropdown-menu .btn-form {
	background: var(--color-dark)!important;
	color: var(--color-light)!important;
}

.configuration > div:last-child {
	border-top: solid 1px var(--color-medium);
    padding-top: 10px;
    width: 98%;
    margin: auto;
}

.btn-configuration {
    display: flex;
    justify-content: end;
    cursor: pointer;
    margin: 0 20px 20px;
}

.btn-configuration > p {
	margin: 0;
    width: fit-content;
    padding: 5px 10px;
    background-color: var(--color-darkprimary);
    color: var(--color-graylight);
    border-radius: 2px;
}

.configuration .checkbox-wrapper .checkbox input:checked, .configuration .checkbox-wrapper .checkbox input:focus-visible {
    border-color: var(--color-dark)!important;
}

.configuration .checkbox-wrapper .checkbox svg, .configuration .checkbox-wrapper .checkbox svg > symbol > path {
    color: var(--color-dark)!important;
}

.configuration .checkbox-wrapper .checkbox input:checked ~ label {
    color: var(--color-dark);
}

.label-categorie -configuration {
    color: var(--color-darkprimary);
    width: 100%;
    font-size: 8.8px;
    margin-bottom: 15px;
    padding: 5px 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: radial-gradient(at left top, #bdd4e7, #6b90b9);
    border-radius: 3px;
}

.label-categorie -configuration p {
	margin: 0;
}

.popup-configuration {
	padding: 39px 0 39px 38px;
}

.popup-configuration-small {
	padding: 100px 143px;
}

.popup-configuration > div:last-child, .popup-configuration-small > div:last-child {
	width: 100%;
	height: 100%;
	background-color: var(--color-light);
	border-radius: 2px;
	padding: 10px;
	position: relative;

	background-color: var(--color-graylight);
}

.bloc-onglets .bloc-onglet {
	background-color: var(--color-light);
	/* padding: 10px; sinon ce n'est pas similaire aux bloc-blanc */
	padding: 20px; 
	min-height: 100%;
}

.popup-configuration > div:last-child > div:last-child {
	background-color: var(--color-light);
	padding: 10px 0;
}

.popup-configuration .fenetre-fonction-boutons, .popup-configuration-small .fenetre-fonction-boutons {
	width: 100%;
	padding: 0;
}

.popup-configuration-content {
	height: 75%;
    overflow-y: auto;
}

.popup-info {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/* POPUP TODO  */
.popupTodo {
	width: 750px;
    height: 85vh;
    position: fixed;
    z-index: 900;
    bottom: -100%;
    left: 40px;
    background-color: var(--color-light);
    border: solid 1px var(--color-gray);
    border-radius: 2px;
    box-shadow: 0px 3px 6px #00000029;
	padding: 20px 10px 20px 0;
	transition: all .6s ease-in-out;
}

.popupTodo.active {
    bottom: 35px;
}

.popupTodoBackground {
	background-color: var(--color-dark);
	position: fixed;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 899;
	opacity: 0;
	transition-delay: .6s;
	transition: opacity .6s ease-in-out;
}

.popupTodoBackground.fadeIn {
	top: 0;
	opacity: 0.8;
}

/* ONGLETS */
.titre-onglet {
	width: 100%;
    border-radius: 2px;
    color: var(--color-medium);
    height: fit-content;
    border-bottom: solid 1px var(--color-graylight);
    border-top: solid 1px var(--color-graylight);
    padding: 5px 0;
}

.titre-onglet span {
	color: var(--color-darkprimary);
}

.BGOPdarkprimary .titre-onglet {
	color: var(--color-darkprimary);
}

.barre-onglet {
	width: fit-content;
	height: fit-content;
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	background-color: var(--color-graylight);
}

.titre-onglet > .barre-onglet:first-child, .titre-onglet > .barre-onglet:first-child.active, .titre-onglet > .barre-onglet:first-child:hover {
	border-radius: 2px 0 0 2px ;
}

.titre-onglet > .barre-onglet:nth-child(4), .titre-onglet > .barre-onglet:nth-child(4).active, .titre-onglet > .barre-onglet:nth-child(4):hover{
	border-radius: 0 2px 2px 0 ;
}

.barre-onglet > p {
	margin: 0;
	font-size: 8.8px; /*14px*/
	text-transform: uppercase;
}

.barre-onglet.active, .barre-onglet:hover {
    background-image: linear-gradient(240deg, var(--color-dark) 0%, var(--color-darkprimary) 74%);
    box-shadow: 0px 3px 6px #00000029;
}

.barre-onglet.active > p, .barre-onglet:hover > p {
	color: var(--color-light);
	font-weight: 500;
}
#RegimeTVA, #RegimeTPF {
	min-width: 60vw;
}

/* ONGLET STOCK */
.btnOngletStock {
	background-color: var(--color-mediumprimary);
}

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

.btnOngletStock.active, .btnOngletStock.BGdark.active {
	background-color: var(--color-primary)!important;
}

.btnOngletStock.active p {
	color: var(--color-mediumprimary);
}

/* VOLETS */

.volets {
	color: var(--color-mediumdark);
    display: flex;
    flex-direction: row;
    margin-top: 15px;
    background-color: var(--color-gray);
}

.dashboardLayout .volets {
	color: var(--color-dark);
    background: none;
}

.volets p {
	margin: 0!important;
	font-size: 12px;
}

.volets > div {
    width: fit-content;
    align-items: center;
    padding: 10px 15px;
    border-radius: 2px 2px 0 0;
    margin-left: -1px;
    cursor: pointer;
    border-bottom: none;
}

.volets > div p, .volets > div span {
	color: var(--color-mediumdark);
	white-space: nowrap;
}

.volets.BGlight > div p, .volets.BGlight > div span {
	color: var(--color-medium);
}

.volets .btnPopup {
	position: relative;
}

.volets .btnPopup.active {
    color: var(--color-dark);
    box-sizing: unset;
	position: relative;
	border-radius: 3px 3px 0 0;
}

.volets .btnPopup.active::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--color-dark);
}

.dashboardLayout .volets .btnPopup.active::after {
	background: var(--gradient-hermes90);
}

.volets > div.active p {
    color: var(--color-dark);
}

.btnPopup .sousBtnPopup {
	display: none;
}

.btnPopup.active .sousBtnPopup {
	margin-left: 10px!important;
	display: inline;

}

.btnPopup.active .sousBtnPopup > span:hover, span.btnPopup.active {
	color: var(--color-dark)!important;
}

.slideCRM .sliderOngletBtn {
	color: var(--color-medium);
	cursor: pointer;
	position: relative;
}

.sliderOngletBtn {
	position: relative;
}

.sliderOngletBtn.active::after {
    content: '';
    display: block;
    background: var(--gradient-hermes90);
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
}

.slideCRM .sliderOngletBtn.active {
	color: var(--color-dark);
}

.slideCRM .sliderOngletBtn.active::after {
    display: block;
    content: "";
    width: 110%;
    height: 2px;
    background: var(--color-yellow);
    position: absolute;
    bottom: -6px;
	left: -5%;
}

.sliderOnglet table tbody > tr{
	height: 25px;
}

/* ACTIONS TABLEAUX */
.fenetre-actions {
	width: 100%;
	height: 100%;
	min-height: 90vh!important;
}

.fenetre > .fenetre-actions {
	width: 98%;
    margin: 10px auto 0;
}

.fenetre-actions-fiche {
	position: relative;
	width: 100%;
	padding-left: 280px;
	height: 100%;
	min-height: 600px;
}

.body-onglets .fenetre-actions-fiche {
	position: initial;
}

.slide .body-onglets {
	height: 100%;
	position: relative;
	padding: 35px 0 65px;
}

.slide .body-onglets .onglet-configuration {
	position: absolute;
	top: 0;
}

.slide .body-onglets .bloc-onglet {
	overflow-y: auto;
	overflow-x: clip;
	height: 100%;
}

.fenetre-actions-fiche .actions-tableaux {
	position: absolute;
	top: 0;
	left: 0;
}

.actions-tableaux {
	background-color: var(--color-light);
	/* box-shadow: 0px 3px 6px #00000029; */
	border: solid 1px var(--color-gray);
	/* position: absolute;
	top: 0;
	left: 0; */
	width: 250px;
	/* height: fit-content; */
	height: auto;
	position: relative;
    min-width: 210px;
    min-height: 600px;
	margin-right: 10px;
	transition: all .50s linear;
}

.actions-tableaux.small {
	width: 0!important;
	min-width: 0!important;
	border: none!important;
	margin: 0!important;
}

.store-tableaux {
	background-color: var(--color-light);
	border: solid 1px var(--color-gray);
	width: 250px;
	height: auto;
	position: relative;
    min-width: 210px;
    min-height: 600px;
	margin-right: 10px;
	transition: all .50s linear;
}

.actions-tableaux > a, .actions-tableaux .bouton-tableaux, .actions-tableaux > .horizontale, .actions-tableaux .recherche-config, .actions-tableaux .recherche-config {
	opacity: 1;
	transform: scaleX(1);
	transform-origin: left;
	transition: all .50s linear;
}

.actions-tableaux.small > a, .actions-tableaux.small .bouton-tableaux, .actions-tableaux.small > .horizontale, .actions-tableaux.small .recherche-config {
	transform: scaleX(0);
	overflow: hidden;
}

.actions-tableaux .openActionsTableaux {
    position: fixed;
    height: 60px;
    width: 60px;
    background-color: var(--color-light);
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 50%;
    top: 40vh;
    left: -50px;
    cursor: pointer;
    z-index: 888;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
	transition: all .50s linear;
	transition-delay: .50s;
}

.actions-tableaux.small  .openActionsTableaux {
    left: 11px;
}

.openActionsTableaux span {
	font-size: 35px;
    color: var(--color-darkblue);
    margin-right: 2px;
}

/* .close-actionsTableaux {
	position: absolute;
	top: 8px;
	right: 10px;
	cursor: pointer;
	z-index: 10;
	color: var(--color-medium);
	transform: rotate(180deg);
	transition: all .50s linear;
}

.small .close-actionsTableaux {
	transform: rotate(360deg);
	margin: 0;
} */

.fullSlide .fenetre-actions, .fullSlide .actions-tableaux {
	min-height: 100px;
}

.bouton-tableaux {
	padding: 5px 15px;
}

.soustitre-actions-tableaux {
	padding: 2px 15px;
}

.titre-actions-tableaux.active{
	box-shadow: 0px 3px 6px #00000029;
}

.titre-actions-tableaux {
	padding: 3px 3px 5px 3px;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 2px;
    border-bottom: solid 1px var(--color-darkblue);
}

.titre-actions-tableaux .recherche-config {
	width: 207px;
}

.actions-tableaux.small .titre-actions-tableaux {
	padding: 0!important;
}

.soustitre-actions-tableaux {
	border-top: solid 1px var(--color-gray);
	margin-bottom: 2px;
	position: relative;
}

.actions-tableaux-hover {
	position: absolute;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	top: 0;
	right: 10px;
	width: fit-content;
	height: 100%;
	z-index: 1;
	display: none;
}

.actions-tableaux-hover span {
	color: var(--color-mediumdark);
	font-size: 19.2px;
	margin: 0 5px;
}

.titre-actions-tableaux:hover .actions-tableaux-hover {
	display: flex;
}

.bouton-tableaux {
	cursor: pointer;
}

.bouton-tableaux:hover {
	background-color: var(--color-OPlight);
}

.titre-actions-tableaux p {
	text-transform: uppercase;
    font-size: 12px;	
}

.soustitre-actions-tableaux p {
	font-weight: 500;
    font-size: 12px;	
}

.bouton-tableaux.active {
	background-color: var(--color-graylight);
	border-left: solid 3px var(--color-purple);
	/* box-shadow: 0px 3px 6px #00000029; */
}

.bouton-tableaux.active p {
	/* text-decoration: underline; */
	/* color: var(--color-purple); */
	font-weight: 500;
}

.bouton-tableaux > span, .soustitre-actions-tableaux > span {
	font-size: 12.8px;
	font-weight: 600;
	margin: 0;
	color: var(--color-darkprimary);
}

.bouton-menu {
	padding: 10px;
	width: 100%;
	cursor: pointer;
	border-left: solid 3px var(--color-light);
	background-color: transparent;
	transition: all 0.3s ease-in-out;
}

.bouton-menu.active {
	border-left: solid 2px var(--color-electricblue);
	background-color: var(--color-lightblue);
}

.store-tableaux .bouton-tableaux {
	padding-left: 20px;
}

.store-tableaux .bouton-tableaux span {
	font-size: 11.2px;
}

/* DROPDOWN */
.dropdown {
	position: relative;
}

.dropdown-toggle {
	border-left: 1px solid var(--color-medium);
	border-bottom: 1px solid var(--color-medium);
	background-color: var(--color-graylight);
	border-radius: 0 0 0 2px;
	padding: 0 25px 0 10px;
	position: relative;
	cursor: pointer;
	font-size: 9.6px; /*14px*/
	font-weight: 300;
	text-align: left!important;
	color: var(--color-dark);
	height: 19px;
	transition: all 350ms ease;
	line-break: anywhere;
    width: 100%;
    overflow: hidden;
}

.dropdown-toggle:focus-visible {
	outline: none;
}

.dropdown-toggle label {
	font-weight: 300;
}

.dropdown-toggle.regular label {
	font-weight: 400;
}

.dropdown-toggle label span {
	font-size: 8.8px;
    top: 2px;
    left: 2px;
    position: relative;
}

.dropdown-toggle label .flag-icon {
	top: 0;
}

label .flag-icon {
	margin-left: 0;
	margin-right: 5px;
}

.dropdown-menu .btn-form {
	background-color: var(--color-dark)!important;
    box-shadow: 0px 3px 6px #00000029!important;
	width: 50px;
}

.dropdown .dropdown-menu .btn-form span.material-symbols-outlined {
    color: var(--color-light)!important;
}

.dropdown-toggle::before {
    content: "";
    position: absolute;
	right: 0px;
    top: 0px;
    width: 17px;
    height: 17px;
    background-color: var(--color-gray);
    border: solid 1px var(--color-medium);
}

.dropdown-statut .dropdown-toggle::before {
    width: 19px;
    height: 19px;
}

.attributs-dropdown .dropdown-toggle::before {
    width: 20px;
    height: 20px;
}

.bloc-affichage .dropdown-toggle::before, .input-visible.dropdown-toggle::before, .input-filtres .dropdown-toggle::before {
	width: 17px;
    height: 17px;
	right: -1px;
    top: -1px;
}

.bloc-web .dropdown-toggle::before {
    background-color: var(--color-darkprimary);
    border: solid 1px var(--color-OPmediumprimary);
}

.convertisseur-devise .dropdown-toggle::before, .dropdown-toggle.simple-after::before {
	display: none!important;
}

.convertisseur-devise .dropdown-toggle {
	border: none!important;
	background: none!important;
	text-align: right!important;
	padding-right: 20px!important;
}

.dropdown-toggle::after {
    content: "\e5cf";
    font-family: "Material Symbols Outlined";
    position: absolute;
    right: 0;
    top: 0;
    font-size: 9.6px;
    width: 19px;
    color: var(--color-dark);
    height: 19px;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dropdown-statut .dropdown-toggle::after {
    width: 21px;
    height: 21px;
}

.attributs-dropdown .dropdown-toggle::after {
    width: 23px;
    height: 23px;
}

.bloc-affichage .dropdown-toggle::after, .input-visible.dropdown-toggle::after, .input-filtres .dropdown-toggle::after {
	right: -1px;
    top: -1px;
	width: 18px;
    height: 19px;
}

.bloc-couleur .dropdown-toggle::after {
	color: var(--color-light);
}

.dropdown-toggle.simple-after::after {
	color: var(--color-medium);
	width: fit-content;
}

.dropdown-toggle.open::after {
	transform: rotate(180deg);
}

.dropdown-menu {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	min-width: fit-content;
	height: fit-content;
	max-height: 200px;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: var(--color-light);
	color: var(--color-dark);
	box-shadow: 0px 3px 6px #00000029;
	border-radius: 0 0 5px 5px;
	padding: 10px;
	margin-bottom: 25px;
	display: none;
}

.dropdown-menu::-webkit-scrollbar {
	width: 3px;
  }
  
  .dropdown-menu::-webkit-scrollbar-track {
	background-color: transparent;
  }
  
  .dropdown-menu::-webkit-scrollbar-thumb {
	background-color: var(--color-mediumdark);
	border-radius: 10px;
  }
  
  .dropdown-menu::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-mediumdark);
  }

.dropdown-toggle.open ~ .dropdown-menu {
	display: block;
	z-index: 888;
}

/* .searchInput {
    appearance: none;
    background-color: var(--color-gray)!important;
    color: var(--color-mediumdark)!important;
    padding: 3px 5px;
    width: 90%;
    outline: none;
    border: none!important;
} */

.dropdown-menu-list {
   max-height: 200px;
}

.dropdown-menu-list label, .dropdown-menu-list label a {
  	display: flex;
	align-items: center;
	font-weight: 300;
	width: 100%;
	color: var(--color-dark)!important;
}

.dropdown-menu-list label:hover {
	cursor: pointer;
}

.dropdown-menu-list.text-right label {
	text-align: right;
}

.dropdown-toggle label {
	cursor: pointer;
}

.pager {
	width: 35%;
	min-width: 60px;
	position: relative;
	/* border: solid 1px var(--color-gray); */
}

.pagination {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.pagination > div:first-child {
	margin-right: 10px;
}

.paginationBottom p {
	margin: 0;
}

.paginationBottom .ts-dropdown {
	top: auto!important;
    bottom: 100%!important;
	border-top: solid 1px var(--color-medium)!important;
	border-bottom: none!important;
}

.compteurPager {
	position: relative;
	display: flex;
    flex-direction: row;
    align-items: center;
}

.compteurPager > span, .compteurPager > button {
	content: "\e5cf";
    font-family: "Material Symbols Outlined";
    font-size: 17.6px;
    width: 15px;
    color: var(--color-blue);
    height: 19px;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
	cursor: pointer;
}

.compteurPager > span:hover, .compteurPager > button:hover {
    color: var(--color-darkblue);
}

.compteurPager > span.disabled, .compteurPager > button.disabled {
	opacity: .4;
	cursor: initial;
	pointer-events: none;
}

.compteurPager input {
	width: 30px;
	padding: 0 2px!important;
	text-align: center;
	margin: 0 5px;
	border: none!important;
	background: none!important;
}

.compteurPager p {
	margin: 0 10px 0 0;
}

.compteurPager p span.lbTotalPages {
	margin-left: 10px;
}

.fenetre-fonction-boutons.smallBtn .pager > .dropdown-toggle {
	width: 50px;
}

.non-editable .dropdown-menu {
	display: none!important;
}

/* HOVER VISIBLE */
.hover-visible, .dropdown.hover-visible .dropdown-toggle {
	border: none;
	background: none;
}

.hover-visible::-webkit-calendar-picker-indicator {
	opacity: 1!important;
}

.dropdown.hover-visible .dropdown-toggle:after, .dropdown.hover-visible .dropdown-toggle:before {
	display: none!important;
}

.input-classique.hover-visible:hover,  .dropdown.hover-visible:hover .dropdown-toggle.input-classique {
	border: solid 1px var(--color-medium);
	background: var(--color-graylight);
}

.hover-visible:hover::-webkit-calendar-picker-indicator {
	visibility: visible!important;
}

.dropdown.hover-visible:hover .dropdown-toggle:after, .dropdown.hover-visible:hover .dropdown-toggle:before {
	display: flex!important;
}

/* LISTE */
.liste {
	height: 65vh;;
}
 
.titre-liste {
    color: var(--color-light);
    margin-bottom: 2px;
    border-radius: 0 5px 0 0;
    background-image: linear-gradient(240deg, var(--color-dark) 0%, var(--color-darkprimary) 74%);
    border-right: solid 1px var(--color-light);
    padding: 5px 0;
	height: 23px;
}

.titre-liste > p {
	margin: 0 20px;
}

.content-liste {
	border: solid 1px var(--color-darkprimary);
    padding: 10px;
    height: 90%;
    overflow-y: auto;
    overflow-x: auto;
}

.bloc-web .content-liste {
	border: solid 1px var(--color-light);
}

.content-liste .checkbox-wrapper .checkbox {
	margin: 0;
}

.content-liste .checkbox-wrapper:hover {
	background-color: var(--color-medium);
}

summary .checkbox > label {
	cursor: pointer;
}

.liste.h50 > .content-liste {
	height: 71%;
}

/* HOVER CONDITIONNEL */

.hover:hover {
	background-color: var(--color-OPblue)!important;
	transition: background-color .35s linear;
}

.non-editable .hover {
	pointer-events: all;
}

.bloc-hover {
	position: absolute;
	width: fit-content;
	height: fit-content;
	background-color: var(--color-light);
	border-radius: 2px;
	box-shadow: 0px 3px 6px #00000029;
	padding: 10px;
	z-index: 900;
	display: none;
}

.affichage-hover {
	display: block!important;
	position: relative;
	z-index: 900;
}

.bloc-hover p {
	color: var(--color-dark);
	font-size: 8.8px; /*14px*/
	white-space: nowrap;
	text-align: left;
}

.bloc-hover > div > div {
	margin: auto 10px;
}
.affichage-hover > p, .affichage-hover > div:first-child > p, .affichage-hover > div:first-child > span {
	cursor: pointer;
}
.affichage-hover:hover > .bloc-hover {
	display: block;
}

/* HOVER */

.btn-hover-details {
	position: relative;
	cursor: pointer;
}

.hover-details {
	position: absolute;
    background-color: var(--color-light);
    width: fit-content;
    min-width: 500px;
    height: fit-content;
    left: 0;
    top: 20px;
    z-index: 900;
    box-shadow: 0px 3px 6px #00000029;
	display: none;
	flex-direction: column;
}

.hover-details.reverse {
	right: 0;
    left: auto;
    width: fit-content;
    min-width: 0;
}

.hover-details.reverse p {
	white-space: nowrap;
}

.hover-details > div {
	width: 100%;
	height: 100%;
	background-color: var(--color-OPlightprimary);
    padding: 10px;
}

.btn-hover-details:hover ~ .hover-details, .hover-details:hover {
	display: flex;
}

.hover-details input {
	padding-left: 0!important;
}

/*KANBAN*/
.colonneKanban {
	display: flex;
	flex-direction: column;
	border-radius: 2px;
	margin: 0 5px;
	border: solid 1px var(--color-dark);
	width: 20%;
}

.titreKanban {
	background-color: var(--color-dark);
	color: var(--color-light);
	height: fit-content;
	padding: 10px;
	margin: 0;
}

.blocDragDrop {
	display: flex;
	flex-direction: column;
	margin: 0;
	width: 100%;
	height: fit-content;
	background-color: transparent;
}

.drop {
	display: flex;
	flex-direction: column;
	margin: 0;
	width: 100%;
	height: fit-content;
	background-color: var(--color-medium);

}

.blocDragDrop > div {
	border-radius: 2px;
	box-shadow: 0px 3px 6px #00000029;
	margin: 5px;
	height: 25px;
}

	.blocDragDrop > div:first-child {
		background-color: blue;
	}

	.blocDragDrop > div:nth-child(2) {
		background-color: red;
	}

	.blocDragDrop > div:nth-child(3) {
		background-color: green;
	}

	.blocDragDrop > div:nth-child(4) {
		background-color: yellow;
	}

/* CYCLE DE VIE */

.edit-cycle {
	position: relative;
	transition: all 0.3s linear;
}

.BGyellow.edit-cycle, .BGgreen.edit-cycle, .BGblue.edit-cycle, .BGred.edit-cycle {
	background: none!important;
}

.edit-cycle::before {
	content: '';
	display: block;
	width: 7px;
	height: 100%;
	position: absolute;
}

.BGyellow.edit-cycle::before {
	background: linear-gradient(135deg, var(--color-yellow) 15%, var(--color-OPyellow) 100%)!important;
}

.BGgreen.edit-cycle::before {
	background: linear-gradient(135deg, var(--color-green) 15%, var(--color-OPgreen) 100%)!important;
}

.BGred.edit-cycle::before {
	background: linear-gradient(135deg, var(--color-red) 15%, var(--color-OPred) 100%)!important;
}

.BGblue.edit-cycle::before {
	background: linear-gradient(135deg, var(--color-blue) 15%, var(--color-OPblue) 100%)!important;
}

.bloc-couleur .checkbox-wrapper .checkbox input:checked, .bloc-couleur .checkbox-wrapper .checkbox input:focus-visible {
    border-color: var(--color-light)!important;
}

.bloc-couleur .checkbox-wrapper .checkbox input:checked:before {
	background-color: var(--color-light);
}

.bloc-couleur .btn-form {
	background-color: transparent;
    border: solid 0.5px;
    box-shadow: inset 0px 3px 6px #00000029;
}

.bloc-couleur .btn-form p {
	font-size: 8.8px;
}

.bloc-couleur .btn-form span {
	font-size: 12px;
	margin-right: 2px;
}

/* CONFIGURATION */
.BGconfig {
	background-image: url("../img/abstract.png");
    background-size: 130%;
    background-attachment: fixed;
    width: 100%;
    height: fit-content;
    min-height: 95vh;
	display: flex;
	justify-content: center;
	padding-top: 25px;
}

.config-large {
	height: fit-content;
	min-height: 92vh;

}


.config-1 #btnPrevious, #btnApply, .config-7 #btnNext, .config-1 #btnNext {
	display: none;
}

.config-7 #btnApply {
	display: block;
}

.titre-config {
	color: var(--color-graylight);
    font-size: 13.6px;
    text-transform: uppercase;
    font-weight: 500;
    margin-left: 25px!important;
}

.bloc-config-contenu {
	width: 95%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 10px;
  }

.bloc-config-content {
	width: 85%;
	height: 80%;
}

.bloc-config-context {
	background-image: linear-gradient(240deg, var(--color-dark) 0%, var(--color-darkprimary) 74%);
	border: solid 1px #FFFFFF12;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 5px 25px;
	color: var(--color-gray);
}

.config-large .bloc-config-context {
	width: 96.5%;
}


.bloc-config .content-liste p {
	color: var(--color-dark);
	margin: 2px;
}

.bloc-config-context .pastille-span {
	background-color: var(--color-gray);
	color: var(--color-dark);
	padding: 5px;
	border-radius: 50%;
}

.bloc-config-message {
	/* background: linear-gradient(to left top, #FFFFFF15 0%, #FFFFFF08 51%);
	border: solid 1px #FFFFFF12;
	border-radius: 5px;
	overflow-y: scroll;
	width: 60%;
	height: fit-content;
	max-height: 40%;
	position: relative; */

	background-color: var(--color-OPyellow);
	border-radius : 5px;
	padding: 15px;
}

.bloc-config-message p {
	margin: 0;
	color: var(--color-darkyellow);
}

.bloc-config-message span {
	color: var(--color-darkyellow);
}

.bloc-config-message::-webkit-scrollbar, .bloc-info-message::-webkit-scrollbar {
	width: 3px;
  }
  
  .bloc-config-message::-webkit-scrollbar-track, .bloc-info-message::-webkit-scrollbar-track {
	background-color: transparent;
  }

  
  .bloc-config-message::-webkit-scrollbar-thumb {
	background-color: var(--color-darkprimary);
	border-radius: 10px;
  }
  
  .bloc-config-message::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-darkprimary);
  }

  .bloc-config .btn-form p {
	color: var(--color-light)!important;
  }

  .bloc-info-message {
	/* background: linear-gradient(to left top, #FFFFFF15 0%, #FFFFFF08 51%);
	border: solid 1px #FFFFFF12;
	border-radius: 5px;
	overflow-y: scroll;
	width: 60%;
	height: fit-content;
	max-height: 40%;
	position: relative; */

	background-color: var(--color-OPblue);
	border-radius : 5px;
	padding: 15px;
}
.bloc-info-message.alert {
	background-color: var(--color-OPred);
}

.bloc-info-message p {
	margin: 0;
	color: var(--color-darkblue)!important;
}

	.bloc-info-message span {
		color: var(--color-darkblue)!important;
	}
  
  .bloc-info-message::-webkit-scrollbar-thumb {
	background-color: var(--color-darkblue);
	border-radius: 10px;
  }
  
  .bloc-info-message::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-darkblue);
  }

  .bloc-info-message.alert p {
	  color: var(--color-darkred);
  }
  
	  .bloc-info-message.alert span {
		  color: var(--color-darkred);
	  }
	
	.bloc-info-message.alert::-webkit-scrollbar-thumb {
	  background-color: var(--color-darkred);
	}
	
	.bloc-info-message.alert::-webkit-scrollbar-thumb:hover {
	  background-color: var(--color-darkred);
	}


  /* ONGLET CONFIGURATION */
  .slide-configuration-bloc {
	width: 45.5%;
	height: fit-content;
	height: auto;
	max-height: 94%;
	position: fixed;
	top: 40px;
	right: 0;
	margin-top: 0!important;
	z-index: 500;
	transform: translate(100%);
	transition: all .4s linear;
	border-radius: 2px 0 0 2px;
  }

  .slide-configuration {
	width: 45%;
	height: 98%;
	position: absolute;
	top: 1%;
	right: 0%;
	z-index: 500;
	pointer-events: initial!important;
	transform: translate(100%);
	transition: all .4s linear;
  }

  .slide-configuration .close, .slide-configuration-bloc .close {
	left: 6px;
	right: auto;
  }  

.slide-configuration-bloc.active, .slide-configuration.active {
	transform: translate(0);
}

  .bouton-slide-configuration {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--color-light) 60%, transparent 61%);
    color: var(--color-darkprimary);
    top: 40%;
    left: -30px;
    display: flex;
    position: absolute;
    box-shadow: -3px 3px 6px #00000029;
    justify-content: start;
    align-items: center;
    padding-left: 11px;
	cursor: pointer;
  }

  .bouton-slide-configuration > span {
    font-size: 20.8px;
	width: 13px;
	transform: rotate(360deg);
	transition: all .4s linear;
  }

  .slide-configuration-bloc.active .bouton-slide-configuration > span, .slide-configuration.active .bouton-slide-configuration > span {
    transform: rotate(180deg);
  }

  .slide-configuration-bloc > div:nth-child(2) {
	height: 100%;
	overflow-y: auto;
  }


  /* VOLETS BONUS */
  .bouton-volet-bonus {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-OPmediumprimary);
    color: var(--color-light);
    top: 15%;
    left: 4%;
    display: flex;
    position: fixed;
    box-shadow: -3px 3px 6px #00000029;
    justify-content: center;
    align-items: center;
	cursor: pointer;
	z-index: 910;
  }

  .bouton-volet-bonus > span {
    font-size: 20.8px;
  }

  .volet-bonus {
	background-color: var(--color-light);
	box-shadow: 0px 3px 6px #00000029;
	position: fixed;
	z-index: 950;
	margin-left: 40px;
    top: 45px;
    width: 35%;
    height: 93%;
	left: -36%;
	transition: all .3s linear;
  }

  .volet-bonus.w52 {
	left: -53%;
  }

  .volet-bonus > div {
	background-color: var(--color-OPlightprimary);
	display: flex;
	flex-direction: column;
	padding: 5px;
	height: 100%;
	width: 100%;
  }

  .volet-bonus.open {
	left: 0;
  }

  .volet-bonus summary {
	display: flex;
	flex-direction: row;
	align-items: center;
  }

  .volet-bonus summary p, .volet-bonus summary span, .volet-bonus summary::after {
	color: var(--color-medium);
	transition: all .35s linear;
  }

  .volet-bonus details:hover > summary p, .volet-bonus details:hover > summary span, .volet-bonus details:hover > summary::after {
	color: var(--color-dark);
  }

  .volet-bonus .addListe {
	color: var(--color-medium);
	cursor: pointer;
	font-size: 12px;
	font-variation-settings: 'wght' 600;
	margin-left: 5px;
  }

  .volet-bonus .addListe:hover {
	color: var(--color-dark);
  }

  .volet-bonus details {
	position: relative;
  }

  .volet-bonus .addAllListe {
	position: absolute;
	right: 5px;
	top: 0;
  }

/* CALCULATRICE */

.calculatrice {
	background-image: linear-gradient(240deg, var(--color-dark) 0%, var(--color-darkprimary) 74%);
	box-shadow: 0px 3px 6px #00000029;
	border-radius: 2px;
	width: 350px;
	height: fit-content;
	display: flex;
	flex-direction: column;
	padding: 25px;
	border: solid 1px var(--color-light);
}

.calculatrice-coefficient {
	background-image: linear-gradient(135deg, var(--color-yellow) 15%, var(--color-darkyellow) 100%)!important;
	background-color: var(--color-darkyellow);
	cursor: not-allowed;
}

.ecran {
	height: 50px;
	background-color: var(--color-gray);
	border-radius: 2px;
}

.ecran #ecran {
	text-align: right;
	color: var(--color-dark);
	   line-height: 50px;
    padding-right: 25px;
	font-size: 14.4px;
}

.touche-calculatrice {
	text-align: center;
	color: var(--color-graylight);
	width: 20%;
	background-image: linear-gradient(to left top, #FFFFFF15 0%, #FFFFFF08 51%);
	border-radius: 2px;
	border: solid 1px #FFFFFF12;
	padding: 15px;
	height: fit-content;
	cursor: pointer;
	font-size: 12px;
}

.calculatrice-coefficient .touche-calculatrice {
	border: solid 1px var(--color-OPlight);
	pointer-events: none;
}

.grande-touche {
	width: 46.5%;
}

/* BOITE DE DIALOGUE */
.boiteDialogue {
	width: 65%;
    height: fit-content;
    padding: 70px 20px 20px;
    background-color: var(--color-light);
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 2px;
	position: relative;
	max-height: 85vh;
    /* overflow-y: auto; sinon les dropdowns restent bloqués*/
}

/* .boiteDialogue > div:nth-child(2) p, .boiteDialogue > div:nth-child(2) span {
	font-size: 12px;
} */

.boiteDialoguePointage {
	background-image: linear-gradient(240deg, var(--color-dark) 0%, var(--color-darkprimary) 74%);
	height: 100%;
	width: 100%;
	overflow-y: auto;
}

.boiteDialoguePointage input {
	border: none !important;
	background: none !important;
    color: var(--color-red) !important;
    font-size: 65px !important;
    font-weight: 400;
	padding: 0!important;
	pointer-events: none;
	cursor: pointer;
}

.boiteDialoguePointage input:focus {
	background: none !important;
}

/* .boiteDialogue label, .bloc-web .bloc-section-web .boiteDialogue label, .bloc-web .boiteDialogue label, .boiteDialogue span, .bloc-web .bloc-section-web .boiteDialogue span, .bloc-web .boiteDialogue span {
	color: var(--color-dark); /* pas d'important sinon les statut des les boites de dialogue ne sont pas de la bonne couleur *
} */

.boiteDialogue .dropdown-toggle, .boiteDialogue input, .boiteDialogue .fileName {
	border-left: 1px solid var(--color-medium);
    border-bottom: 1px solid var(--color-medium);
    color: var(--color-dark);
    text-align: left;
    background-color: transparent;
    box-shadow: none;
}

.boiteDialogue .dropdown-toggle::after {
	color: var(--color-dark)!important;
}

.boiteDialogue .btn-primary {
	color: var(--color-light) !important;
	background-color: var(--color-electricblue) !important;
	border-color: var(--color-electricblue) !important;
}

.boiteDialogue .btn-primary p {
	color: var(--color-light) !important;
}

/* POINTAGE  */
.profil-img {
	width: 100%;
	overflow: hidden;
	border-radius: 50%;
}

.profil-img img {
	width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* PERSONNALISÉ */
/* fiche article */
.image-produit > img, .barcode-produit > img {
	width: 100%;
}

.image-produit > div > img {
	width: 40px;
}

.ID {
	text-align: right;
	font-size: 14.4px;
	font-weight: 600;
	color: var(--color-medium);
	margin: 0;
}

/* Performances entrepôt*/
#changeStatVal, #changeStatNB, #comparaisonCommandesNB, #comparaisonCommandesVal {
	display: none!important;
}

#changeStatVal.visible, #changeStatNB.visible, #comparaisonCommandesNB.visible, #comparaisonCommandesVal.visible {
	display: block!important;
}

/* Emplacements entrepôts*/
.tableEmplacements th {
	border-left: none!important;
	border-right: none!important;
}

.tableEmplacements th:last-child, .tableEmplacements > table:first-child > thead > tr > th {
	border-left: solid 0.1px var(--color-mediumdark)!important;
	border-right: solid 0.1px var(--color-mediumdark)!important;
}

.tableEmplacements th, .tableEmplacements td {
	width: 30%;
}

.tableEmplacements th:last-child, .tableEmplacements td {
	width: 10%;
}

.tableEmplacements > table {
	margin-bottom: 10px;
}

.tableEmplacements > table > thead > tr > th:last-child > span {
	width: 100%;
    text-align: center;
    font-size: 19.2px;
  	font-variation-settings: 'FILL' 0, 'wght' 200;
}

.tableEmplacements > table > tr > th {
	border: none;
}
.tableEmplacements > table > tr > th:last-child > span {
	font-size: 19.2px;
	float: none;
	width: 100%;
	text-align: center;
}

.detail-emplacement > td {
	background-color: var(--color-light);
}

.detail-emplacement {
	display: none;
}

/* contact */

.bord > .table {
	width: 90%;
	background-color: var(--color-light);
}

.menu-droits {
	position: absolute;
    display: flex;
    flex-direction: column;
    text-align: left;
    top: 25px;
	padding-top: 10px;
    right: 0;
    z-index: 888;
	display: none;
}

#droits:hover ~ .menu-droits, .menu-droits:hover {
	display: flex;
}

p.list-value::after {
	content: ',';
	display: inline;
}

p.list-value:last-child::after {
	display: none;
}

p.list-value {
	padding: 0 0 0 5px;
}

/* PRODUIT */
.bloc-couleur .more {
	opacity: 0;
	transition: all .35s linear;
}

.bloc-couleur:hover .more {
	opacity: 1;
}

.more ~ .btn {
	display: none!important;
}

.more:hover ~ .btn, .more ~ .btn:hover {
	display: flex!important;
}

.btnObjetRef > div > .mini-bloc-blanc > p, .btnObjetRef > div > .mini-bloc-blanc > .help, .btnObjetRef > div > .mini-bloc-blanc > div > p, .btnObjetRef > div > .mini-bloc-blanc > div > .help {
	color: var(--color-medium);
}

.btnObjetRef.BGgreen > div > .mini-bloc-blanc > p, .btnObjetRef.BGgreen > div > .mini-bloc-blanc > .help, .btnObjetRef.BGgreen > div > .mini-bloc-blanc > div > p, .btnObjetRef.BGgreen > div > .mini-bloc-blanc > div > .help {
	color: var(--color-green);
}

/* ANIMATION SPECIFIQUE*/
.locked label, .lcoked .checkbox-wrapper svg .checkbox {
	color: var(--color-mediumdark)!important;
	pointer-events: none;
}

.locked .checkbox-wrapper input[type="checkbox"], .locked .checkbox-wrapper input[type="checkbox"]:checked {
	border-color: var(--color-mediumdark)!important;
	pointer-events: none;
}

/* HISTORIQUE */
#historique.active > div:first-child, #historique > div:nth-child(2) {
	display: none!important;
}

#historique > div:first-child, #historique.active > div:nth-child(2) {
	display: flex!important;
}

/* POPUP */
#popupProtocole .table {
	height: fit-content;
	max-height: 90%;
}

/* TABLES VARIABLES */
.tableVariables tr {
	transition: all 0.3s ease-in-out;
}

.tableVariables tr.inactive {
	height: 0;
	padding: 0;
	display: none;
}

.showVariableBtn {
	transition: all 0.3s ease-in-out;
}

.showVariableBtn.active {
	color: var(--color-green)!important;
	rotate: 180deg;
}

/*ASSISTANT FENETRE*/
.AssistantDocuments {
	width: 100%;
	height: fit-content;
	min-height: 95vh;
	background-color: var(--color-dark);
	padding-left: 1px;

}

.AssistantDocuments > div:last-child {
	background-color: var(--color-medium);
}

.AssistantDocuments > div:first-child {
	border-left: solid 1px var(--color-graylight);
	border-right: solid 1px var(--color-graylight);
	height: 90vh;
}

.AssistantDocuments > div:first-child > div {
	position: fixed;
}

.AssistantDocuments > div:first-child label, .AssistantDocuments > div:first-child span {
	color: var(--color-medium);
	cursor: pointer;
}

.AssistantDocuments > div:first-child label {
	width: 75%;
	white-space: normal;
	text-align: center;
}

.AssistantDocuments > div:first-child > div:hover > label, .AssistantDocuments > div:first-child > div:hover > span, .AssistantDocuments > div:first-child > div.active > label, .AssistantDocuments > div:first-child > div.active > span {
	color: var(--color-light);
}

/* DEMO */
.commercialDemo .commercialDemo2, .commercialDemo.active .commercialDemo1 {
	display: none!important;
}

.commercialDemo .commercialDemo1, .commercialDemo.active .commercialDemo2 {
	display: flex!important;
}

/* DOUANES */
.bloc-douane {
	border: solid 1px #021491;
	padding: 10px;
	margin-left: 10px;
	margin-top: 10px;
}

.bloc-douane .border-blue {
	border-color: #2872CE;
}

.bloc-douane input {
	border: solid 1px #8FABF1;
	background: none;
	border-radius: 0;
}

.bloc-douane .green {
	color: #1E8001!important;
}

.bloc-douane .btn.green {
	background-color : #F1FFE8;
	border: solid 1px #1E8001;
}

.bloc-douane .btn {
	box-shadow: none;
	border-radius: 0;
}

.bloc-douane .btn.green p {
	color: #1E8001;
	margin: 0;
}

.bloc-douane .btn.blue {
	background-color : #D0E7FD;
	border: solid 1px #0919A6;
}

.bloc-douane .btn.blue p {
	color: #0919A6;
	margin: 0;
}

/* checkbox ouverture d'input */

#commission-fixe:checked ~ div > div:first-child, #commission-fixe ~ div > div:last-child, #commission-fixeAC:checked ~ div > div:first-child, #commission-fixeAC ~ div > div:last-child, .remiseTarif:checked ~ div > div:first-child, .remiseTarif ~ div > div:last-child, .valeurPerso:checked ~ div > div:first-child, .valeurPerso~ div > div:last-child {
	display: none!important;
}

#commission-fixe ~ div > div:first-child, #commission-fixe:checked ~ div > div:last-child, #commission-fixeAC ~ div > div:first-child, #commission-fixeAC:checked ~ div > div:last-child, .remiseTarif ~ div > div:first-child, .remiseTarif:checked ~ div > div:last-child, .valeurPerso ~ div > div:first-child, .valeurPerso:checked ~ div > div:last-child {
	display: flex!important;
}

		.dezoomage {
			position: absolute;
			width: 99vw;
			top: 0;
			left: 0;
			opacity: 0.3;
			z-index: 1000;
		}

/* COLOR PICKER */
.colorPicker input[type="radio"] {
	width: 34px;
    height: 34px;
    border-radius: 2px !important;
    appearance: none;
    margin: 0;
	margin-right: 5px;
    padding: 0 !important;
    min-height: 15px !important;
    border: none !important;
	border: solid 2px var(--color-light)!important;
}

.colorPicker input[type="radio"]:checked {
	border: solid 2px var(--color-electricblue)!important;
}

.colorPicker label {
	display: none;
}

/* OBLIGATOIREMENT A LA FIN */
.generateurPiece {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 10px 20px;
	z-index: 800;
}

.generateurPiece input, .generateurPiece .dropdown-toggle, .non-editable .generateurPiece input, .non-editable .generateurPiece .dropdown-toggle {
	border-left: solid 1px var(--color-OPmediumprimary)!important;
	border-bottom: solid 1px var(--color-OPmediumprimary)!important;
	color: var(--color-darkprimary)!important;
	pointer-events: all;
}

/* BLOC CONFIGURATION */
.blocConfiguration > div.flex-column {
	margin-left: 10px;
	margin-right: 10px;
}
.blocConfiguration .blue-box, .ts-wrapper.blue-box > .ts-control {
    border: solid 1px var(--color-blue) !important;
}

.blocConfiguration .darkblue-box, .ts-wrapper.darkblue-box > .ts-control {
    border: solid 1px var(--color-darkblue) !important;
}

.blocConfiguration .electricblue-box, .ts-wrapper.electricblue-box > .ts-control {
    border: solid 1px var(--color-darkblue) !important;
}

.catConfig {
	text-transform: uppercase;
	font-weight: 600;;
}

.titreConfig {
	width: 100%;
    background-color: var(--color-OPdarkprimary);
    padding: 3px 10px 3px 10px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 25px;
}

.titreConfig > label {
	text-transform: uppercase;
	color: var(--color-OPdark);
}

.titreConfig button {
	height: 24px;
    width: fit-content;
    border: solid 1px var(--color-darkprimary) !important;
    color: var(--color-darkprimary);
    padding: 0 6px;
    margin: 0;
	margin-right: 5px;
}

.titreConfig .expand-menu > span {
	color: var(--color-darkprimary)!important;
}

.bloc-config {
	margin: 0 20px;
}

.bloc-config .form-label {
	margin-left: 0!important;
}

/* SWITCH */
.switch {
	border: solid 1px var(--color-gray);
	border-radius: 2px;
}

.switch > div, .switch > button {
	padding: 3px 10px;
	cursor: pointer;
}

.switch > div:first-child, .switch > button:first-child {
	border-right: solid 1px var(--color-gray);
}

.switch button, .switch p {
	margin: 0;
    font-size: 11.2px;
    text-transform: none;
    font-weight: 400;
}

.switch > .active {
	background-color: var(--color-lightblue);
	color: var(--color-blue)!important;
}

.switch > .active p {
	color: var(--color-blue)!important;
}

.formMessageError, .formMessageValidation {
    width: 100%;
	height: 50px;
    background-color: var(--color-lightyellow);
    /* position: absolute; */
    top: 80px;
    left: 1px;
    padding: 0 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 888;
}

.formMessageError {
	border: solid 1px var(--color-red);
	color: var(--color-red);
}

.formMessageError::before {
	content: "\e002";
	display: inline-block;
	font-family: 'Material Symbols Outlined';
	font-size: 21.6px;
	margin-right: 10px;
}

/* ACCOLADE */

.accolade {
    position: relative;
    background: inherit;
    height: 34px;
    margin-left: 5px;
    padding-left: 15px;
}
.accolade:before {
	content: '';
    position: absolute;
    top: 0%;
    left: 0;
    width: 5px;
    height: 50%;
    background: inherit;
    border-radius: 0 0 5px 0;
    border-right: 1px solid var(--color-medium);
    border-bottom: 1px solid var(--color-medium);
}
.accolade:after {
    content: '';
    position: absolute;
    bottom: 0%;
    left: 0;
    width: 5px;
    height: 47%;
    background: inherit;
    border-radius: 0 5px 0 0;
    border-right: 1px solid var(--color-medium);
    border-top: 1px solid var(--color-medium);
}

/* API  */
.autocomplete-dropdown {
    position: absolute;
    z-index: 998;
    background-color: var(--color-light);
    border: 1px solid var(--color-gray);
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    top: 25px;
}

.dropdown-item {
    padding: 8px;
    cursor: pointer;
	font-size: 11.2px;
}

.dropdown-item:hover {
    background-color: #f0f0f0;
}

/* SEARCHING INPUT */
.searchResults {
	display: none;
	flex-direction: column;
	position: absolute;
	background: var(--color-light);
	width: 100%;
	top: 24px;
	border: solid 1px var(--color-gray);
}

.searchInput:focus ~ .searchResults, .searchResults:hover {
	display: flex;
}

/* TABLES BLOCS */
.tableBloc {
	width: 100%!important;
	height: fit-content!important;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px!important;
	background-color: var(--color-graylight);
	border: solid 1px var(--color-gray);
	border-radius: 2px;
	margin-bottom: 5px;
}

/* statuts */
.label-stats {
	border-radius: 2px;
    width: fit-content !important;
    padding: 2px 10px;
    position: relative;
    font-weight: 500 !important;
	white-space: nowrap;
	border: solid 1px var(--color-gray);
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 25px;
}

.label-stats span {
	font-size: 14.4px;
    font-variation-settings: 'FILL' 1, 'wght' 800, 'GRAD' 0, 'opsz' 48;
}

label.statut-active {
	color: var(--color-green)!important;
    border: solid 1px var(--color-green)!important;

}

.statutActif div[data-value="1"], label.statutActif[data-value="1"], 
.statutActif div[data-value="Actif"], label.statutActif[data-value="Actif"], 
.statutComplet div[data-value="1"], label.statutComplet[data-value="1"], 
.statutProspect div[data-value="3"], label.statutProspect[data-value="3"], 
.statutProduit div[data-value="1"], label.statutProduit[data-value="1"], 
.statutDevis div[data-value="5"], label.statutDevis[value="5"], 
.statutBc div[data-value="5"], label.statutBc[value="5"], 
.statutBp div[data-value="3"], label.statutBp[value="3"],
.label-sous-categorie .statut-vert,
label.statut-vert, label.pastille-vert {
    background-color: var(--color-OPgreen)!important;
    background-color: #e2fbed!important;
    color: var(--color-green)!important;
    border: solid 1px var(--color-green)!important;

}

.statutComplet div[data-value="4"], .statutComplet div[data-value="5"], label.statutComplet[data-value="4"], label.statutComplet[data-value="5"],  
.statutProspect div[data-value="5"], label.statutProspect[data-value="5"], .statutProspect div[data-value="7"], label.statutProspect[data-value="7"], 
.statutDevis div[data-value="2"], .statutDevis div[data-value="3"], .statutDevis div[data-value="4"], 
label.statutDevis[value="2"], label.statutDevis[value="3"], label.statutDevis[value="4"], 
label.statutBc[value="2"], label.statutBc[value="3"], .statutBc div[data-value="2"], .statutBc div[data-value="3"],
.label-sous-categorie .statut-rouge,
label.statutProduit[value="4"], .statutProduit div[data-value="4"], 
label.statut-rouge, label.pastille-rouge {
    background-color: var(--color-OPred)!important;
    background-color: var(--color-lightred)!important;
    color: var(--color-red)!important;
    border: solid 1px var(--color-red)!important;
}

.statutEntretienCollaborateur div[data-value="2"], 
.statutComplet div[data-value="6"],  label.statutComplet[data-value="6"], 
.statutProspect div[data-value="2"], label.statutProspect[data-value="2"], 
label.statutBc[value="4"], .statutBc div[data-value="4"],
label.statutBp[value="1"], label.statutBp[value="2"], .statutBp div[data-value="1"], .statutBp div[data-value="2"],
.label-sous-categorie .statut-orange,
label.statut-orange, label.pastille-orange {
    background-color: var(--color-OPdarkyellow);
    background-color: #f9e3ca;
    color: var(--color-darkyellow)!important;
    border: solid 1px var(--color-darkyellow)!important;
}

.statutEntretienCollaborateur div[data-value="1"],
.statutActif div[data-value="3"], label.statutActif[data-value="3"], 
.statutProspect div[data-value="1"], label.statutProspect[data-value="1"], .statutProspect div[data-value="6"], label.statutProspect[data-value="6"], 
.statutActif div[data-value="Pause"], label.statutActif[data-value="Pause"], 
.statutComplet div[data-value="3"],  label.statutComplet[data-value="3"], 
.statutProduit div[data-value="3"], label.statutProduit[data-value="3"], 
.statutDevis div[data-value="1"], label.statutDevis[value="1"],
label.statutBc[value="1"], .statutBc div[data-value="1"],
.label-sous-categorie .statut-jaune,
label.statut-jaune, label.pastille-jaune {
    background-color: var(--color-OPyellow);
    background-color: var(--color-lightyellow);
    color: var(--color-yellow)!important;
    border: solid 1px var(--color-yellow)!important;
}

.statutEntretienCollaborateur div[data-value="3"],
.statutDevis div[data-value="6"], label.statutDevis[value="6"],
.statutProspect div[data-value="4"], label.statutProspect[data-value="4"], 
label.statutBc[value="6"], label.statutBc[value="7"], .statutBc div[data-value="6"], .statutBc div[data-value="7"],
label.statutBc[value="4"], .statutBc div[data-value="4"],

.statutComplet div[data-value="7"],  label.statutComplet[data-value="7"],
.statutProduit div[data-value="5"], label.statutProduit[data-value="5"], 
.statutProspect div[data-value="8"], label.statutProspect[data-value="8"],
.label-sous-categorie .statut-bleu,
label.statut-bleu, label.pastille-bleu {
    background-color: var(--color-OPblue)!important;
    background-color: var(--color-lightblue)!important;
    color: var(--color-blue)!important;
    border: solid 1px var(--color-blue)!important;
}

.statutEntretienCollaborateur div[data-value="4"],
.statutActif div[data-value="Inactif"],  label.statutActif[data-value="Inactif"],
.statutActif div[data-value="2"],  label.statutActif[data-value="2"],
.statutActif div[data-value="0"],  label.statutActif[data-value="0"],
.statutComplet div[data-value="2"],  label.statutComplet[data-value="2"],
.statutComplet div[data-value="0"],  label.statutComplet[data-value="0"],
.statutProduit div[data-value="2"], label.statutProduit[data-value="2"], 

label.statut-gris, label.pastille-gris {
    background-color: var(--color-gray)!important;
    color: var(--color-mediumdark)!important;
    border: solid 1px var(--color-mediumdark)!important;
}

label.statut-fulljaune, label.pastille-fulljaune {
    background-color: var(--color-yellow);
    color: var(--color-light)!important;
    border: solid 1px var(--color-yellow)!important;
}

label.statut-fullrouge, label.pastille-fullrouge {
    background-color: var(--color-red)!important;
    color: var(--color-light)!important;
    border: solid 1px var(--color-red)!important;
}

label.statut-fullmediumlilac, label.pastille-fullmediumlilac {
    background-color: var(--color-mediumlilac)!important;
    color: var(--color-light)!important;
    border: solid 1px var(--color-mediumlilac)!important;
}

label.statut-fullmediumaqua, label.pastille-fullmediumaqua {
    background-color: var(--color-mediumaqua)!important;
    color: var(--color-light)!important;
    border: solid 1px var(--color-mediumaqua)!important;
}

label.statut-fullelectricblue, label.pastille-fullelectricblue {
    background-color: var(--color-electricblue)!important;
    color: var(--color-light)!important;
    border: solid 1px var(--color-electricblue)!important;
}

label.statut-dark, label.pastille-dark {
    background-color: var(--color-light)!important;
    color: var(--color-dark)!important;
    border: solid 1px var(--color-dark)!important;
}

label.statut-darkblue, label.pastille-darkblue {
    background-color: var(--color-OPdarkblue)!important;
    color: var(--color-darkblue)!important;
    border: solid 1px var(--color-darkblue)!important;
}

label.statut-fulldarkblue, label.pastille-fulldarkblue {
    background-color: var(--color-darkblue)!important;
    color: var(--color-light)!important;
    border: solid 1px var(--color-darkblue)!important;
}

label.statut-violet, label.pastille-violet {
    background-color: var(--color-lilac)!important;
    color: var(--color-purple)!important;
    border: solid 1px var(--color-purple)!important;

}

label.statut-fullgris, label.pastille-fullgris {
    background-color: var(--color-gray)!important;
    color: var(--color-mediumdark)!important;
    border: solid 1px var(--color-gray)!important;
}


label.statut-graylight, label.pastille-graylight {
    background-color: var(--color-gray)!important;
    color: var(--color-dark)!important;
    border: solid 1px var(--color-gray)!important;
}

label.statut-mediumdark, label.pastille-mediumdark {
    background-color: var(--color-mediumdark)!important;
    color: var(--color-gray)!important;
    border: solid 1px var(--color-gray)!important;
}

label.statut-fullmediumdark, label.pastille-fullmediumdark {
    background-color: var(--color-medium)!important;
    color: var(--color-light)!important;
    border: solid 1px var(--color-medium)!important;
}

label.statut-primary, label.pastille-primary {
    background-color: var(--color-primary)!important;
    color: var(--color-light)!important;

}

label.statut-darkgreen, label.pastille-darkgreen {
    background-color: var(--color-darkgreen)!important;
    color: var(--color-light)!important;

}

label.statut-mediumprimary, label.pastille-mediumprimary {
    background-color: var(--color-mediumprimary)!important;
    color: var(--color-light)!important;

}

label.statut-active,
.statutActif div.option, .statutActif div.item, label.statutActif, 
.statutComplet div.option, .statutComplet div.item, label.statutComplet, 
.statutEntretienCollaborateur div.option, .statutEntretienCollaborateur div.item, label.statutEntretienCollaborateur, 
.statutProspect div.option, .statutProspect div.item, label.statutProspect, 
.statutProduit div.option, .statutProduit div.item, label.statutProduit, 
.statutDevis div.option, .statutDevis div.item, .statutBc div.option, .statutBc div.item, label.statutBc, label.statutDevis,
label.statut-fullmediumlilac, label.statut-fullmediumaqua, label.statut-fullrouge, label.statut-fulljaune, label.statut-fulldarkblue, label.statut-fullgris, label.statut-gris, label.statut-graylight, label.statut-dark,
label.statut-rouge, label.statut-jaune, label.statut-orange, label.statut-bleu, label.statut-vert, label.statut-darkblue, label.statut-violet, label.statut-gris, label.statut-mediumdark, label.statut-fullelectricblue,
label.statut-mediumdark, label.statut-primary, label.statut-darkgreen, label.statut-mediumprimary, label.statut-performance {
	border-radius: 2px;
    width: fit-content !important;
    min-width: 100px !important;
    /* width: 170px !important; */
    padding: 2px 10px;
    text-transform: uppercase;
    position: relative;
    font-weight: 500 !important;
    font-size: 10.4px;
	white-space: nowrap;
	border: solid 1px transparent;
    height: 23px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
	justify-content: center;
} 

.statutComplet div.item {
    height: 23px !important;
}

.statutActif div.option, .statutComplet div.option, .statutEntretienCollaborateur div.option, .statutProspect div.option, .statutProduit div.option, .statutDevis div.option, .statutBc div.option {
	margin: 5px 0 5px 10px;
}

.ts-wrapper.statutComplet > .ts-control, .ts-wrapper.statutProspect > .ts-control, .ts-wrapper.statutEntretienCollaborateur > .ts-control {
	padding: 0 40px 0 11px!important;
}

label.statutBc, label.statutDevis {
	margin-right: 10px;
	margin-left: 10px;
}

.bloc-total {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: var(--color-OPblue);
	border-radius: 2px;
	width: fit-content !important;
	padding: 4px 10px;
	white-space: nowrap;
}

.ts-wrapper.pl0 > .ts-control {
	padding-left: 0!important;
}

/* STATUTS */
.dropdown-statut .dropdown-toggle {
	background-color: transparent;
	border-color: transparent;
}

.dropdown-statut .dropdown-toggle::after, .dropdown-statut .dropdown-toggle::before {
	display: none;
}

.dropdown-statut:hover .dropdown-toggle {
	border-left: 1px solid var(--color-medium);
    border-bottom: 1px solid var(--color-medium);
    background-color: var(--color-graylight);
}

.dropdown-statut:hover .dropdown-toggle::after , .dropdown-statut:hover .dropdown-toggle::before {
	display: flex;
}

.statut-borderdark {
	border-radius: 1px;
    width: fit-content!important;
    padding: 1px 8px;
    position: relative;
    font-weight: 500!important;
	font-size: 10.4px;
}

.statut-borderdark {
	border: solid 1px var(--color-dark);
}

.statut-borderdark.red {
	border: solid 1px var(--color-red);
}

label.pastille-rouge, label.pastille-jaune, label.pastille-orange, label.pastille-bleu, label.pastille-vert, label.pastille-darkblue, label.pastille-violet, label.pastille-gris, label.pastille-mediumdark, label.pastille-graylight {
	border-radius: 2px;
    width: fit-content!important;
	height: 20px;
    padding: 0 10px;
    text-transform: uppercase;
    position: relative;
    font-weight: 500!important;
	font-size: 10.4px;
	margin-bottom: 4px;
}

.dropdown-statut, .dropdown-statut .dropdown-toggle {
	height: 25px;
}

.dropdown-statut > .dropdown-toggle > label.statut-jaune, .dropdown-statut > .dropdown-toggle > label.statut-rouge, .dropdown-statut > .dropdown-toggle > label.statut-bleu, .dropdown-statut > .dropdown-toggle > label.statut-vert, .dropdown-statut > .dropdown-toggle > label.statut-gris {
	top: 3px;
}

.dropdown label.statut-jaune, .dropdown label.statut-rouge, .dropdown label.statut-bleu, .dropdown label.statut-vert, .dropdown label.statut-gris {
	margin-bottom: 10px; /* pas !important sinon les label dans les modèles de l'AA ne sont pas bons */
}

.dropdown-statut label.statut-jaune, .dropdown-statut label.statut-rouge, .dropdown-statut label.statut-bleu, .dropdown-statut label.statut-vert, .dropdown-statut label.statut-gris {
	margin-left: 0px!important; 
}

label.statut-jaune > span, label.statut-rouge > span, label.statut-bleu > span, label.statut-vert > span, label.statut-gris > span, label.statut-darkgreen > span {
	font-size: 12.8px!important;
    margin-right: 7px!important;
    /* position: absolute!important;
    left: -20px!important;
    margin-top: 3px!important;
	top: 0px!important;
	margin-left: 0!important; */
}

label.statut-jaune > span.p-relative, label.statut-rouge > span.p-relative, label.statut-bleu > span.p-relative, label.statut-vert > span.p-relative, label.statut-gris > span.p-relative, label.statut-darkgreen > span.p-relative {	
    position: relative!important;
    left: 0px!important;
}

label.statut-jaune > span {
	color: var(--color-yellow)!important;
} 

label.statut-rouge > span {
	color: var(--color-red)!important;
}

label.statut-bleu > span {
	color: var(--color-blue)!important;
}

label.statut-vert > span {
	color: var(--color-green);
}

label.statut-gris > span {
	color: var(--color-mediumdark)!important;
}

label.statut-darkgreen > span {
	color: var(--color-darkgreen)!important;
}

.seeMoreBloc > div:first-child > *:first-child {
	margin-top: 0!important;
}
.seeMoreBloc > div:first-child > *:last-child {
	margin-bottom: 0!important;
}