<style>
	
	/* modal */
	.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
	.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
	.w3-modal-content{display: flex; margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
	.w3-container {
		padding: 0.01em 16px;
		flex-grow:1;
	}	
	
	/* style de la grille */
	.prevent-select {
	  -webkit-user-select: none; /* Safari */
	  -ms-user-select: none; /* IE 10 and IE 11 */
	  user-select: none; /* Standard syntax */
	}


.grid {
	/*width: 100%;
		display: inline-grid;*/
	display: flex;
	flex-direction: column;
	height: 100%;
}


.header {
	/*display: flex;
	flex-direction: row;
	overflow: hidden;
	min-width: -webkit-fill-available;*/
	display: flex;
	flex-direction: row;
	overflow: hidden;
	min-width: -webkit-fill-available;
	width: 150px;
}

.headerCell {
	display: flex;
	text-align: center;
	justify-content: center;
	border-bottom: 1px solid #cccccc !Important;
	border-right: #cccccc 1px solid;
	background-color: #e6e6e6;
	background-image: linear-gradient(#fafafa, #e6e6e6);
	padding-top: 3px;
	padding-bottom: 2px;
	padding-left: 13px;
	padding-right: 13px;
	cursor: pointer;
	position: relative;
	white-space: nowrap;
	flex-grow: 0;
	flex-shrink: 0;
	align-items: center;
}
		
		
		
		
		.headerCellActions{
			display:none;
			
			flex-direction: row;
		}
		
		.headerCellActions:hover{
			display:none;
			opacity :0.4;
			flex-direction: row;
		}		
		
		.headerCellActionSortUp{
			display:none;
		}
		.headerCellActionSortDown{
			display:none;
		}
		.headerCellActionFilter{
			display:none;
			position:absolute;
			right:10px;
			margin-left:4px;
			margin-right:4px;
		}
		
		.headerCellActionFilter:hover{
			display:none;
			position:absolute;
			right:10px;
			margin-left:4px;
			margin-right:4px;
			opacity :0.4
		
		}
		
		.menuSettings svg:hover{
			opacity :0.4;
		}		
		.cmdDeleteRow{
			cursor:pointer;
			border:0px;
			background:transparent;
			height:100%;
			width:100%;
			margin:0px
		}
		.cmdDeleteRow svg:hover{
			opacity :0.4;
		}		
		
		.inactiveCell{
		    background: silver;
			border-bottom: 1px solid silver ! Important;
			border-right: silver 1px solid;
		}
.body {
	/* overflow-y: auto;  */
	/*display: flex;
	overflow: auto;
	flex-direction: column;
	min-width: -webkit-fill-available;*/
	display: flex;
	overflow: auto;
	flex-direction: column;
	min-width: -webkit-fill-available;
	/* flex: 1; */
	/* flex-grow: 1; */
	min-height: 180px;
	flex-grow: 1;
	width: 150px;
	height: 150px;
}

	.body:first-child {
		height: calc(100% - 140px);
	}


	.row {
		display: flex;
		flex-direction: row;
		width: fit-content;
	}
.cell {
	padding-top: 3px;
	padding-bottom: 2px;
	padding-left: 13px;
	padding-right: 13px;
	border-style: solid;
	border-width: 0 0 1px 0;
	border-bottom: 1px solid transparent;
	border-color: #cccccc;
	flex-grow: 0;
	flex-shrink: 0;
	align-content: center;
}
		
		.headerCellActions{
			margin : 2px;
		}

		.filterItem {
			display: flex;
			flex-direction: row;
			align-items: anchor-center;
			gap: 0.5rem;
		}	

		.colDetail{
		    width: fit-content;
		}

		.resizeIt{
			cursor:ew-resize;
			position:absolute;
			right:0px;
			background:transparent;
			width:10px
		}
		.resizeIt:hover{
			background:blue;
			cursor:ew-resize;
			position:absolute;
			right:0px;
			background:transparent;
			width:10px
		}

		.footer{
			display:flex;
			flex-direction:row
		
		}
		.footerPanel{
			display: flex;
			flex-grow: 1;
			background:silver;
			align-items: anchor-center;
		}
		.footerDecal{
			display:flex;
			flex-direction:row
		}
		.footCommand{
			display: flex;
			flex-direction: row;
			flex-grow: 1;
			border: 1px solid darkgray;
			align-items: anchor-center;
		}

		.groupCriteria{
			padding:4px;
			display: flex;
			flex-direction: row;
			flex-grow: 0;
			border: 1px solid darkgray;
			align-items: anchor-center;
			background: silver;
		}
		


		.groupHeader{
			display:flex;
			flex-direction:row
		}

		.lbGroup{
			background:silver;
			flex-grow: 1;
			align-content: center;
			padding-left: 4px;
		}

		.groupActions{
		
			display:flex;
			flex-direction:row
		}
		
		.groupItemAction{
			margin:2px;
			display:flex;
			flex-direction:row;
			border: 1px solid darkgray;
			align-items: center;
			border-radius: 4px;
		}
		.groupItemActionSortUp{
		
			margin:4px;
		}
		
		.groupItemActionSortDown{
		
			margin:4px;
		}
		.delGroup{
			margin:4px;
		}
	
		/* scrollbar *************************************/
		/* width */
		::-webkit-scrollbar {
		  height: 10px;
		  width: 10px;
		}

		/* Track */
		::-webkit-scrollbar-track {
		  box-shadow: inset 0 0 5px grey; 
		  border-radius: 10px;
		}
		 
		/* Handle */
		::-webkit-scrollbar-thumb {
		  background: darkgray; 
		  border-radius: 10px;
		}

		/* Handle on hover */
		::-webkit-scrollbar-thumb:hover {
		  background: #00b300; 
		}


		.menuFilter{
			pointer-events: bounding-box;
		}
		
		.menuFilterAvecFiltre{
			pointer-events: bounding-box;
		}
		
		/*************************************************/
		
		/* modal *****************************************/
		.modal {
			display: none; /* Hidden by default */
			position: fixed; /* Stay in place */
			z-index: 1; /* Sit on top */
			left: 0;
			top: 0;
			width: 100%; /* Full width */
			height: 100%; /* Full height */
			overflow: auto; /* Enable scroll if needed */
			background-color: rgb(0,0,0); /* Fallback color */
			background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
		}

		/* Modal Content/Box */
		.modal-content {
			background-color: #fefefe;
			margin: 15% auto; /* 15% from the top and centered */
			padding: 20px;
			border: 1px solid #888;
			z-index: 4;
		}

		/* The Close Button */
		.close {
			color: #858383;
			float: right;
			font-weight: bold;
			position : absolute;
			right : 2px;
		}

		.close:hover,
		.close:focus {
		  color: black;
		  text-decoration: none;
		  cursor: pointer;
		}
		/* Modal Header */
		.modal-header {
			padding: 2px 16px;
			border-bottom: 1px solid #cccccc ! Important;
			border-right: #cccccc 1px solid;
			background-color: #e6e6e6;
			background-image: linear-gradient(#fafafa, #e6e6e6);
			display:flex;
			flex-direction:row;
			align-items: anchor-center;
			position:relative;
		}

		/* Modal Body */
		.modal-body {
			padding: 2px 16px;
			height: 200px;
			overflow: auto;
		}

		/* Modal Footer */
		.modal-footer {
			padding: 2px 16px;
			border-bottom: 1px solid #cccccc ! Important;
			border-right: #cccccc 1px solid;
			background-color: #e6e6e6;
			background-image: linear-gradient(#fafafa, #e6e6e6);
			display:flex
		}

		/* Modal Content */
		.modal-content {
		  position: fixed;
		  background-color: #fefefe;
		  margin: auto;
		  padding: 0;
		  border: 1px solid #888;
		  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
/*		  right:0px;
		  top:24px*/
		/* animation-name: animatetop; 
		  animation-duration: 0.4s */
		}

		/* Add Animation */
		@keyframes animatetop { 
		  from {top: -300px; opacity: 0} 
		  to {top: 0; opacity: 1} 
		} 
		
		.settingGrid{
			display:flex;
			flex-direction:row;
		    padding: 4px;
			flex-grow: 0;
			/*border: 1px solid darkgray;*/
			align-items: anchor-center;
			background: silver;
		}
		
		
		.itemPref{
			display:flex;
			flex-direction:row;
			align-items: center;
			font-size: 14px;
		}
		
		.lbReadOnly{
			margin:4px;
			cursor:pointer
		}
		.menuSettings{
			cursor:pointer;
		}
		/*************************************************/
		/* menu */
		/*Reset CSS*/
*{
    margin: 0px;
    padding: 0px;
    font-family: arial;
}

nav{
   /* width: 100%;*/
    margin: 0 auto;
    position: relative;
    top: 0px;
}

nav ul{
    list-style-type: none;
}

nav ul li{
    float: left;
    /*width: 25%;*/
    text-align: center;
    position: relative;
}

nav ul::after{
    content: "";
    display: table;
    clear: both;
}

nav a{
    display: block;
    text-decoration: none;
    color: black;
    border-bottom: 2px solid transparent;
    padding: 10px 0px;
}

nav a:hover{
    color: black;
    border-bottom: 2px solid silver;
}

.sous{
    display: none;
    box-shadow: 0px 1px 2px #CCC;
    background-color: white;
    position: absolute;
    /*width: 100%;*/
    
	width: 200px;
    z-index: 1000;
    right: 0px;
}
/*
nav > ul li:hover .sous{
    display: block;
}
*/
.sous li{
    float: none;
    width: 100%;
    text-align: left;
}
.sous a{
    padding: 3px;
    border-bottom: 1px solid silver;
    padding-left: 8px;
}
.sous a:hover{
    border-bottom: none;
    background-color: RGBa(200,200,200,0.1);
}
.deroulant > a::after{
    content:" ▼";
    font-size: 12px;
}

.conteneur{
  margin: 50px 20px;
  height: 1500px;
}

.buttonGrid {
	width: 100%;
	margin: 0px;
	border: none;
	background: transparent;
	opacity: 0.5;
	cursor: pointer
}
.buttonGrid:hover {
	margin: 0px;
	border: none;
	background: #C0C0C0;
	opacity :1;
	cursor: pointer
}

.row > *:last-child {
	border: 1px solid silver;
	border-style: none solid solid none
}


.row:hover {
	background: lightskyblue !important;
	cursor:pointer;
}

rowExtend:hover {
	background: lightskyblue !important;
	cursor:pointer;
}


.switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem; /* espace avec un label texte éventuel */
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	border: 1px solid darkgray;
	border-radius: 9px;
}

	/* Taille par défaut */
	.switch .switch-track {
		width: 50px;
		height: 24px;
		background: var(--switch-off);
		border-radius: 999px;
		position: relative;
		transition: background .2s ease;
		box-sizing: border-box;
	}

	.switch .switch-knob {
		position: absolute;
		top: 3px;
		left: 3px;
		width: 18px;
		height: 18px;
		background: var(--switch-knob);
		border-radius: 50%;
		transition: transform .2s ease;
		box-shadow: 0 1px 2px rgba(0,0,0,.25);
		border: 1px solid darkgray;
	}

	/* Input natif accessible mais visuellement masqué */
	.switch input[type="checkbox"] {
		position: absolute;
		inset: 0;
		margin: 0;
		opacity: 0;
	}

	/* États */
	.switch input:checked + .switch-track {
		background: var(--switch-on);
	}

		.switch input:checked + .switch-track .switch-knob {
			transform: translateX(26px);
		}

	/* Focus visible au clavier */
	.switch input:focus-visible + .switch-track {
		outline: 3px solid var(--switch-focus);
		outline-offset: 2px;
	}

/* Hover (desktop) */
@media (hover:hover) {
	.switch:hover .switch-track {
		filter: brightness(0.97);
	}
}

/* Désactivé */
.switch input[disabled] + .switch-track {
	background: #e5e5e5;
	cursor: not-allowed;
	/*border: 1px solid darkgray;*/
}

	.switch input[disabled] + .switch-track .switch-knob {
		opacity: .7;
	}

.switch input[disabled] ~ .switch-label {
	opacity: .6;
	cursor: not-allowed;
}

/* Variantes de taille */
.switch.switch--sm .switch-track {
	width: 36px;
	height: 18px;
}

.switch.switch--sm .switch-knob {
	width: 12px;
	height: 12px;
	top: 3px;
	left: 3px;
}

.switch.switch--sm input:checked + .switch-track .switch-knob {
	transform: translateX(18px);
}

.switch.switch--lg .switch-track {
	width: 64px;
	height: 32px;
}

.switch.switch--lg .switch-knob {
	width: 24px;
	height: 24px;
	top: 4px;
	left: 4px;
}

.switch.switch--lg input:checked + .switch-track .switch-knob {
	transform: translateX(32px);
}

/* Réduction des animations si l’utilisateur en fait la demande */
@media (prefers-reduced-motion: reduce) {
	.switch .switch-track,
	.switch .switch-knob {
		transition: none;
		border: 1px solid darkgrey;
	}
}
.grid-unit{
	padding-left:4px
}

.cmdGridRowAdd {
	align-self: anchor-center;
	padding: 8px;
	margin: 4px;
	cursor:pointer;
}

/* ligne sélectionnée */
.grid .row.is-selected {
	background: #e9f2ff !important;
	outline: 2px solid #68a0ff;
	outline-offset: -2px;
}
/* accessibilité focus sur la grille */
.grid:focus {
	outline: none;
}

.row.is-selected {
	background-color: #e9f2ff !important;
	outline: 2px solid #68a0ff;
	outline-offset: -2px;
}


.grid .footer button:hover {
	background: lightskyblue
}