/* =================================== C */
/* graph thomas C */

.link {
	stroke: #999;
	stroke-width: 2px;
	marker-end: url(#arrow);
  }
  
  .pie-label {
	font-size: 8px;
	fill: #333;
	text-anchor: middle;
  }
/* =================================== C */

  

/* =================================== C */
/* light: c ; dark: c +80 (50% opacity) */
:root {
	/* C0 SYSTEM GREY */
	--c0light:#dbdbdb80; 
	--c0dark: #dbdbdb80;
	--c1light:#cec9c090; 
	--c1dark: #cec9c090; 
	--c2dark :#e1ceb980; 
	--c2light : #e1ceb980; 
	--c3light:#cddae780; 
	--c3dark:#cddae780; 
	--c4light:#cadbc080; 
	--c4dark: #cadbc080; 

	--cGlobal: #EEE;
	--fGlobal: #336699; 

	--cCtrlF:#000;
	--cCtrlB: #CCC;

	--cCtrlFhi: #000;
	--cCtrlBhi: #FAFAD2;
	
	--cHiF: #000;
	--cHiB: #FAFAD2;

	--cevolapsinfo:#336699;

	--image-play: url('../i/play.png');
	--image-pause: url('../i/pause.png');
	--image-stop: url('../i/stop.png');
	--image-rose: url('../i/rosevent.png');
	--image-l1: url('../i/1.png');
	--image-l2: url('../i/2.png');
	--image-l3: url('../i/3.png');
	--image-l4: url('../i/4.png');

	--image-tab1: url('../i/data.png');
	--image-tab2: url('../i/path.png');
	--image-tab3: url('../i/tree.png');
	--image-tab4: url('../i/metadata.png');
	--image-tab5: url('../i/library.png');
	--image-tab6: url('../i/overlay.png');
	--image-tab7: url('../i/manual.png');
}
.mapboxgl-ctrl-attrib a[href*="map-feedback"] {
    display: none;
}
@font-face {
	font-family: 'evolapsfont';
	src: url('font/SFProDisplay-Thin.woff2') format('woff2'),
		 url('font/SFProDisplay-Thin.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'evolapsfontbold';
	src: url('font/SFProDisplay-Semibold.woff2') format('woff2'),
		 url('font/SFProDisplay-Semibold.woff') format('woff');
}
.blinking-link {
    animation: blink 1s infinite;
}
@keyframes blink {
     50% {
        opacity: 0;
    }
}

a.documentation:link {
    text-decoration: none;
    color: #336699;
}

a.documentation:visited {
    text-decoration: none;
    color: #336699;
}

a.documentation:hover {
    text-decoration: none;
    color: #f5087b;
    font-weight: 800;
}

a.documentation:active {
    text-decoration: none;
    color: #f5087b;
}

a.documentation.clicked {
    color: #f5087b;
    font-weight: bold;
}
ul {
    padding-left: 20px; 
    margin-left: 0; 
}
.number-circle {
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    border-radius: 50%;
    background-color: #33669980;
    color: white;
    font-size: 10px;
    font-family: evolapsfont;
  }
html {
	background: var(--cGlobal); 
	font: 10px evolapsfont;
	border: 0px solid grey;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 1px;
	margin-right: 1px;
}
body {
	background: var(--cGlobal);
	font: 10px evolapsfont;
	margin: 0 auto;
	border: 0px solid grey;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 1px;
	margin-right: 1px;
	width: 99%;
}
.bandeau {
	text-align: left;
	vertical-align: bottom;
	font: 14px evolapsfont;
	background: #EEE;
	width: 250px;
}
article {
	clear: both;
	border-top: 0px solid #998;
	border-bottom: 1px solid #998;
	font-weight: normal;
	letter-spacing: 0px;
	margin: 0 5px;
	padding: 5px 0;
	text-align: left;
}
p {
	width: 100%;
	font: 10px evolapsfont;
	font-style: normal;
	color: #29627e;
	font-weight: lighter;
}
.controlpanel {
	opacity: 1;
	border-width: 0px;
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	width: 266px;
}
.headertab {
	clear: both;
	background-color: var(--cGlobal);
	color: var(--fGlobal);
	border-top: 0px dashed #998;
	border-bottom: Opx dashed #998;
	font-weight: bold;
	font: 14px evolapsfont;
	letter-spacing: 0px;
	margin: 0px 0px;
	padding: 0px 0px;
	text-align: left;
	height: 20px;
	z-index: -10;
	width: 260px;
	background-color: transparent;

}
.headercontainer {
	width: 260px;
	position: relative;
	text-align: center;
	color: white;
	z-index: 1;
	font-weight: bold;
	font: 14px evolapsfont;
	background-color: transparent;
}
.headercentered {
	font: 14px evolapsfont;
	font-weight: Bold;
	color: var(--fGlobal);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -20%);
	z-index: 1;
	width: 260px;
	vertical-align: middle;
	background-color: transparent;

}

/* Styles pour le bouton */
.dropdown-btn {
    background-color: inherit;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    padding: 5px 5px;
    transition: 0.3s;
    vertical-align: middle;
    border-top: 0px solid #998;
    border-bottom: 0px solid #998;
    border-left: 0px solid #998;
    border-right: 0px solid #998;
}
/* Styles pour le menu déroulant (masqué par défaut) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
/* Styles pour les éléments du menu déroulant */
.dropdown-content-a {
    padding: 5px 5px;
    display: block;
    color: #336699;
    text-decoration: none;
    text-align: left;
}
/* Changement de couleur au survol */
.dropdown-content-a:hover {
    background-color: #ddd;
}
.tablinksmain {
	align-items: center;
	justify-content: center;
}
.overlay {
	position: absolute;
	top: 12px;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0); /* Fond semi-transparent pour l'overlay */
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0; /* Initialement invisible */
	transition: opacity 0.3s ease; /* Ajoute une transition fluide */
}
.containerf:hover .overlay {
	opacity: 1; /* Rend visible au survol */
}
.textbutton {
	font-family: evolapsfont;
	font-size: 10px;
	opacity: 1;
	color : #336699;
}
.containerf {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	background-color: transparent;
}
input[type="radio"] {
	vertical-align: middle;
}
.headeright {
	position: absolute;
	top: 8px;
	right: 16px;
}
.icontab {
	width: 30px;
	height: 30px;
	opacity: 0.9;
}
.icontabsmall1 {
	width: 20px;
	height: 20px;
	opacity: 1;
	content: var(--image-tab1);
}
.icontabsmall2 {
	width: 20px;
	height: 20px;
	opacity: 1;
	content: var(--image-tab2);
}
.icontabsmall3 {
	width: 20px;
	height: 20px;
	opacity: 1;
	content: var(--image-tab3);
}
.icontabsmall4 {
	width: 20px;
	height: 20px;
	opacity: 1;
	content: var(--image-tab4);
}
.icontabsmall5 {
	width: 20px;
	height: 20px;
	opacity: 1;
	content: var(--image-tab5);
}
.icontabsmall6 {
	width: 20px;
	height: 20px;
	opacity: 1;
	content: var(--image-tab6);
}
.icontabsmall7 {
	width: 20px;
	height: 20px;
	opacity: 1;
	content: var(--image-tab7);
}
.info {
	width: 10px;
	height: 10px;
	opacity: 0.6;
	vertical-align: middle;
	z-index: 1;
}
a.tooltip {
	position: relative;
	z-index: 1;
}
.tooltip {
	z-index: 1;
}
.contolsecond {
	display: none;
}
a.tooltip::before {
	content: attr(data-tip);
	font-family: evolapsfont;
	font-size: 10px;
	font-weight: lighter;
	position: absolute;
	z-index: 1;
	/*white-space:nowrap;*/
	top: 9999px;
	left: 5px;
	background: #606d7a;
	color: white;
	padding: 3px 3px;
	/*line-height: 24px;*/
	/*height: 48px;*/
	width: 80px;
	opacity: 0;
	border-radius: 3px;
	-webkit-transition: opacity 0.4s ease-out;
	-moz-transition: opacity 0.4s ease-out;
	-o-transition: opacity 0.4s ease-out;
	transition: opacity 0.4s ease-out;
}
a.tooltip:hover::before {
	opacity: 0.9;
	top: +15px;
	z-index: 1;
	transform: translateX(-20%);
}
.uilogo {
	width: 40px;
	padding: 2px 2px 2px 2px;
	opacity: 0.9;
	border: 0;
	text-align: center;
	border-radius: 3px;
	background: rgb(205, 218, 231);
}
nav {
	width: 100%;
	padding-left: .5rem;
	margin-left: .5rem;
	float: left;
	color: #29627e;
}
.multiselect-container>li>a>label {
	padding: 4px 20px 3px 20px;
}
input {
	font: 12px evolapsfont;
	font-weight: lighter;
}
legend {
	color: #336699;
	font: 12px evolapsfont;
	font-weight: lighter;
}
label {
	font: 10px evolapsfont;
	color: #000;
	font-weight: normal;
	letter-spacing: 0px;
	text-align: left;
	vertical-align: middle;
}
#AAoutput {
	overflow:auto;
	scrollbar-width: thin;
	background: var(--c3light);
	color: #336699;
	clear: both;
	border: 0;
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	border-left: 0px solid #998;
	border-right: 0px solid #998;
	scroll-behavior: smooth;
	letter-spacing: 0px;
	margin: 0 0px;
	padding: 0px 0;
	text-align: left;
	width: 220px;
	height: 40px;
	font: 10px evolapsfont;
	outline: none;
}
/*
#infodiv {
	overflow:auto;
	background: transparent;
	scrollbar-width: thin;
	color: var(--cevolapsinfo);
	clear: both;
	letter-spacing: 0px;
	margin: 0 0px;
	padding: 5px 5px;
	width: 100%;
	height: 30px;
	vertical-align: top;
	margin-top: 10px ;
	margin-left: 10px ;
	font: 12px evolapsfont;
	outline: none;
	font-style: italic;
	border-radius: 5px;
	visibility: hidden;
	z-index: 99999;
	text-align: left;
}
*/
.infodivc {
    position: absolute;
    background: transparent;
	color: var(--cevolapsinfo);

   /* font: 10px evolapsfontbold;*/

	font-style: italic;
	font: 12px evolapsfont;
	text-align: left;

    z-index: 10;
    pointer-events: none; /* Permet de cliquer à travers */
	top: 10px; 
	left: 10px;
}

#ClusterSetList {
	overflow:auto;
	scrollbar-width: thin;
	background: var(--c3light);
	color: var(--fGlobal);
	clear: both;
	border: 0;
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	border-left: 0px solid #998;
	border-right: 0px solid #998;
	scroll-behavior: smooth;
	letter-spacing: 0px;
	margin: 0 0px;
	padding: 0px 0;
	text-align: left;
	width: 200px;
	height: 40px;
	font: 10px evolapsfont;
	outline: none;
}
#selectvariablestoleaves {
	overflow:auto;
	overflow-y: auto; /* Activez la barre de défilement verticale si nécessaire */
	scrollbar-width: thin;
	/*background: var(--c3light); */
	color: var(--fGlobal);
	clear: both;
	border: 0;
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	border-left: 0px solid #998;
	border-right: 0px solid #998;
	scroll-behavior: smooth;
	letter-spacing: 0px;
	margin: 0 0px;
	padding: 0px 0;
	text-align: left;
	width: 200px;
	height: 40px;
	font: 10px evolapsfont;
	outline: none;
}
#scenariolist {
	overflow:auto;
	overflow-y: auto; /* Activez la barre de défilement verticale si nécessaire */
	scrollbar-width: thin;
	/*background: var(--c1light); */
	color: var(--fGlobal);
	clear: both;
	border: 0;
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	border-left: 0px solid #998;
	border-right: 0px solid #998;
	scroll-behavior: smooth;
	letter-spacing: 0px;
	margin-left: 15px;
	margin-top: 15px;
	padding: 0px 0;
	text-align: left;
	width: 220px;
	height: 60px;
	font: 10px evolapsfont;
	outline: none;
}
#layerlist {
	overflow:auto;
	overflow-y: auto; /* Activez la barre de défilement verticale si nécessaire */
	overflow-x: auto; /* Activez la barre de défilement verticale si nécessaire */
	scrollbar-width: thin;
	/*background: var(--c1light); */
	color: #336699;
	clear: both;
	border: 0;
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	border-left: 0px solid #998;
	border-right: 0px solid #998;
	scroll-behavior: smooth;
	letter-spacing: 0px;
	margin: 0 0px;
	padding: 0px 0;
	text-align: left;
	width: 220px;
	height: 80px;
	font: 10px evolapsfont;
	outline: none;
}
#cameraviewlist {
	overflow:auto;
	overflow-y: auto; /* Activez la barre de défilement verticale si nécessaire */
	overflow-x: auto; /* Activez la barre de défilement verticale si nécessaire */
	scrollbar-width: thin;
	/*background: var(--c1light); */
	color: var(--fGlobal);
	clear: both;
	border: 0;
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	border-left: 0px solid #998;
	border-right: 0px solid #998;
	scroll-behavior: smooth;
	letter-spacing: 0px;
	margin: 0 0px;
	padding: 0px 0;
	text-align: left;
	width: 220px;
	height: 80px;
	font: 10px evolapsfont;
	outline: none;
}
.datepicker {
	background-color: #DDD;
	color: #336699;
	border-top: 1px solid #336699;
	border-bottom: 1px solid #336699;
	border-left: 1px solid #336699;
	border-right: 1px solid #336699;
	border-radius: 3px;
	font: 12px evolapsfont;
}
.legend1 {
	color: #336699;
}
.mapboxgl-ctrl-scale {
    background-color: #DDDDDD80;
    color: #33669980;
    font-weight: light;
    border-radius: 0px;
	height: 10px
}
/* =================================== LVL 0 */
.detailslvl0 {
	background: var(--c1dark) ;
	color: var(--fGlobal);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-top: 0px solid var(--c0dark);
	border-bottom: 0px solid var(--c0dark);
	border-left: 0px solid var(--c0dark);
	border-right: 0px solid var(--c0dark);
	border-radius: 5px;
	font: 12px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 252px;
	font-weight: bold;
	text-align: left;
}
.detailslvl0 summary {
	text-align: left;
	font: 12px evolapsfontbold;
}
/* =================================== LVL 1 */
.detailslvl1 {
	background: var(--c1dark) ;
	color: var(--fGlobal);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-top: 0px solid var(--c0dark);
	border-bottom: 0px solid var(--c0dark);
	border-left: 0px solid var(--c0dark);
	border-right: 0px solid var(--c0dark);
	border-radius: 5px;
	font: 11px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 240px;
	font-weight: bold;
	text-align: left;
}
.detailslvl1 summary {
	text-align: left;
	font: 11px evolapsfontbold;
}
.fieldsetlvl0b {
	background: var(--c1light)   ;
	color: var(--fGlobal);
	border-top: 0px solid var(--c0dark);
	border-bottom: 0px solid var(--c0dark);
	border-left: 0px solid var(--c0dark);
	border-right: 0px solid var(--c0dark);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-radius: 5px;
	font: 12px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 252px;
}
.fieldsetlvl0b legend {
	color: var(--fGlobal);
	font: 11px evolapsfontbold;
	padding: 3px 3px;
	letter-spacing: 0px;
	margin: 0px 0px;
	padding: 2px 2px;
	text-align: left;
} 
.fieldsetlvl1 {
	background: var(--c1light)   ;
	color: var(--fGlobal);
	border-top: 0px solid var(--c0dark);
	border-bottom: 0px solid var(--c0dark);
	border-left: 0px solid var(--c0dark);
	border-right: 0px solid var(--c0dark);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-radius: 5px;
	font: 11px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 240px;
}
.fieldsetlvl1 legend {
	color: var(--fGlobal);
	font: 11px evolapsfontbold;
	padding: 3px 3px;
	letter-spacing: 0px;
	margin: 0px 0px;
	padding: 2px 2px;
	text-align: left;
}
/* =================================== LVL 2 */
.detailslvl2 {
	background: var(--c1light)   ;
	border-top: 0px solid #eee;
	border-bottom: 0px solid #eee;
	border-left: 0px solid #eee;
	border-right: 0px solid #eee;
	opacity: 1;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	margin: 3px;
	border-radius: 5px;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 228px;
	font: 10px evolapsfont;
}
.detailslvl2 > summary {
	text-align: left;
	list-style-type: none;
	cursor: pointer;
	font: 10px evolapsfont;
}
.fieldsetlvl2 {
	background: var(--c1light);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	color: var(--fGlobal);
	border-top: 0px solid #eee;
	border-bottom: 0px solid #eee;
	border-left: 0px solid #eee;
	border-right: 0px solid #eee;
	border-radius: 5px;
	font: 10px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 228px;
}
.fieldsetlvl2 legend {
	color: var(--fGlobal);
	font: 10px evolapsfont;
	padding: 3px 3px;
	font-weight: light;
	letter-spacing: 0px;
	margin: 0px 0px;
	padding: 2px 2px;
	text-align: left;
}
.fieldsetlvl3 {
	background: var(--c1light);
	/*box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);*/
	color: var(--fGlobal);
	border-top: 0px solid #eee;
	border-bottom: 0px solid #eee;
	border-left: 0px solid #eee;
	border-right: 0px solid #eee;
	border-radius: 5px;
	font: 10px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 216px;
}
.fieldsetlvl3 legend {
	color: var(--fGlobal);
	font: 10px evolapsfont;
	padding: 3px 3px;
	font-weight: light;
	letter-spacing: 0px;
	margin: 0px 0px;
	padding: 2px 2px;
	text-align: left;
}
details>summary {
	text-align: center;
	list-style-type: none;
	cursor: pointer;
	font: 12px evolapsfont;
}
.mainframe {
	border: 1px solid rgb(22, 79, 134, 0.3);
	border-radius: 1px;
}
header {
	clear: both;
	background: linear-gradient(#aaa, #eee);
	color: #336699;
	border-top: 0px dashed #998;
	border-bottom: Opx dashed #998;
	font-weight: bold;
	font: 10px evolapsfont;
	letter-spacing: 0px;
	margin: 0px 0px;
	padding: 2px 2px;
	text-align: left;
	height: 40px;
}
#phy {
	font: 30px evolapsfont;
	color: #336699;
	font-weight: normal;
	letter-spacing: 0px;
	display: inline;
	text-align: left;
	vertical-align: top;
}
#transview {
	font: 30px evolapsfont;
	color: #333;
	font-weight: normal;
	display: inline;
	letter-spacing: 0px;
	opacity: 0.7;
	vertical-align: middle;
}
#sequentialcolorscale {
	border-radius: 5px;
}
#version {
	font: 12px evolapsfont;
	color: 	#D2691E;
	font-weight: normal;
	letter-spacing: 0px;
	display: inline;
	vertical-align: baseline;
	text-align: left;
}
/*#D2691E;*/
#version2 {
	font: 9px evolapsfont;
	color: 	#f5087b;
	font-weight: normal;
	letter-spacing: 0px;
	display: inline;
	vertical-align: baseline;
	text-align: left;
}
.buttonplay2 {
	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 20px;
	margin: 0px 0px;
	padding: 0px 0px;
	opacity: 0.8;
} 
.infoplay {
	width: 20px;
	height: 20px;
	border: none;
	margin: 0px 0px;
	background-color: transparent;
	opacity: 0.8;
	padding: 0px 0px;
	cursor: pointer;
	vertical-align: middle;
	content: var(--image-play);
}
.infopause {
	width: 20px;
	height: 20px;
	border: none;
	margin: 0px 0px;
	background-color: transparent;
	opacity: 0.8;
	padding: 0px 0px;
	cursor: pointer;
	vertical-align: middle;
	content: var(--image-pause);
}
.infopausescenario {
	width: 20px;
	height: 20px;
	border: none;
	margin: 0px 0px;
	background-color: transparent;
	opacity: 0.8;
	padding: 0px 0px;
	cursor: pointer;
	vertical-align: middle;
	content: var(--image-pause);
}
.infoplayscenario {
	width: 20px;
	height: 20px;
	border: none;
	margin: 0px 0px;
	background-color: transparent;
	opacity: 0.8;
	padding: 0px 0px;
	cursor: pointer;
	vertical-align: middle;
	content: var(--image-play);
}
.infostop {
	width: 20px;
	height: 20px;
	border: none;
	margin: 0px 0px;
	background-color: transparent;
	opacity: 0.8;
	padding: 0px 0px;
	cursor: pointer;
	vertical-align: middle;
	content: var(--image-stop);
}
.infoplay4 {
	width: 20px;
	height: 20px;
	border: none;
	margin: 0px 0px;
	background-color: transparent;
	opacity: 0.8;
	padding: 3px 3px;
	cursor: pointer;
	vertical-align: middle;
	content: var(--image-rose);
}
.buttonplaynew {
	padding: 0px;
	margin: 0px;
	border: 0px;
	box-shadow:0px;
	border-radius:0px;
	background-size: contain;
	background-color: transparent;
	cursor: pointer;
}
.buttonplay {
	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 20px;
	height: 20px;
	margin: 0px 0px;
	padding: 3px 3px;
	opacity: 0.9;
} 
.buttonpause {
	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 20px;
	height: 20px;
	margin: 0px 0px;
	padding: 3px 3px;
	opacity: 0.9;
	font-weight: 400;
	font-family: evolapsfont;
} 
.buttonstop {
	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 20px;
	height: 20px;
	margin: 0px 0px;
	padding: 3px 3px;
	opacity: 0.9;
} 
.buttonplayl1 {
	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 20px;
	height: 20px;
	opacity: 0.8;
	content: var(--image-l1);
} 
.buttonplayl2 {
	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 20px;
	height: 20px;
	opacity: 0.8;
	content: var(--image-l2);
}
.buttonplayl3 {
	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 20px;
	height: 20px;
	opacity: 0.8;
	content: var(--image-l3);
}
.buttonplayl4 {
	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 20px;
	height: 20px;
	opacity: 0.8;
	content: var(--image-l4);
}
.infoplay2 {
	width: 12px;
	height: 12px;
	opacity: 0.8;
	vertical-align: middle;
}
.infoplay3 {
	width: 12px;
	height: 12px;
	opacity: 0.8;
	vertical-align: middle;
}
.tutorial {
	width: 100%;
	font: 16px evolapsfont;
	font-style: normal;
	color: #142d39;
	font-weight: lighter;
  	text-align:left;
}
#logotitre {
	font-size: 35px;
	font-weight: lighter;
	font-family: evolapsfont;
	color: var(--fGlobal);
	display: inline;
	vertical-align: middle;
	text-align: center;
	opacity: 0.9;
}
#logotitre2 {
	font-size: 18px;
	font-weight: lighter;
	font-family: evolapsfont;
	color: var(--fGlobal);
	display: inline;
	vertical-align: middle;
	text-align: center;
	opacity: 0.9;
    height:20px;
	transition: font-size 0.5s ease, 
}
#titrelogo {
	font-size: 30px;
	font-weight: lighter;
	font-family: evolapsfont;
	color: var(--fGlobal);
	display: inline;
	vertical-align: top;
	text-align: left;
	opacity: 0.9;
	font-style: italic;
}
.contoldisplayonoffimage {
	position: absolute;
	top: -20px; 
	left: 250px; 
	width: 20px;
	height: 20px;
	border: 0px;
	background-color: #e0e0e0;
	border: 0px solid #999;
	z-index: 999;
}
#logoversion {
	border-radius: 5px;
	vertical-align: baseline;
	background: linear-gradient(#eee, #cfd8dc 95% 100%);
}
#logosoustitre {
	font-size: 12px;
	font-weight: lighter;
	font-family: evolapsfont;
	color:  var(--fGlobal);
	letter-spacing: 5px;
	display: inline;
	vertical-align: bottom;
	text-align: left;
	opacity: 0.9;
	position: absolute;
	top: 20px;
	left: 198px;
}
#logo {
	font: 9px evolapsfont;
	text-align: right;
	vertical-align: middle;
	opacity: 0.7;
}
#logoimg {
	height: 20px;
	text-align: left;
	vertical-align: top;
}
.mycluster {
	background-color: #336699;
	text-align: center;
	font-size: 12px;
	border-width: 0px;
	padding: 10px 10px 10px 10px;
	vertical-align: middle;
}
footer {
	clear: both;
	color: #443;
	font-weight: normal;
	letter-spacing: 0px;
	margin: 0 5px;
	padding: 5px 0;
	text-align: center;
	font: 10px evolapsfont;
}

H1 {
	clear: both;
	color: #FFF;
	border-top: 0px dashed #998;
	border-bottom: Opx dashed #998;
	font-weight: bold;
	font: 36px evolapsfont;
	letter-spacing: 0px;
	margin: 0 5px;
	padding: 5px 0;
	text-align: left;
	height: 5%;
}

table {
	border-width: 1px;
	background-color: "white";
	font: 10px evolapsfont;
	border-collapse: collapse;
	width: 100%;
}

td {
	border-width: 1px;
	font: 10px evolapsfont;
	background-color: "white";
	vertical-align: middle;
	text-align: left;
	padding: 2px 0;
	margin: 0px
}

.ctrlinfomap {
	stroke: black;
	text-anchor: middle;
	width: 40px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: "black";
	background: #f4ebc6;
	stroke-width: 0;
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

.ctrlinfomaptime {
	stroke: black;
	text-anchor: middle;
	width: 40px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: "black";
	background: #f4ebc6;
	stroke-width: 0;
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}
.ctrl40c {
	stroke: black;
	text-anchor: middle;
	width: 20px;
	height: 20px;
	font: 10px evolapsfont;
	opacity: 0.9;
	color: #336699;
	background: #f4ebc6;
	border: none;
	border-radius: 3px;
	display: flex;
    align-items: center;
    justify-content: center;
}

#champRecherche {
	stroke: black;
	text-anchor: middle;
	width: 120px;
	height: 18px;
	font: 10px evolapsfont;
	opacity: 0.9;
	color: #336699;
	background: #f4ebc6;
	border: none;
	border-radius: 3px;
	display: flex;
    align-items: center;
    justify-content: center;
} 

#playslice {
    display: flex;
    align-items: center;
	margin-bottom: 5px;
}
td2 {
	border-width: 0px;
	font: 12px evolapsfont;
	background-color: "white";
	vertical-align: top;
	text-align: left;
}

th {
	border-width: 0px;
	background-color: #DDD;
	font: 12px evolapsfont;
	background-color: white;
}

nav {
	border-width: 3px;
	background-color: "white";
	font: 12px evolapsfont;
	width: 100px;
}

iframe {
	background-color: white;
	background: white;
	font: 12px evolapsfont;
	border-width: 0px;
}

object {
	background: white;
	font: 8px evolapsfont;
	width: 100%;
	height: 400px;
}

textarea {
	background: #EEE;
	font: 7px evolapsfont;
	color: "black";
}

summary {
	font-weight: 400;
	font: 12px evolapsfont;
}

.ctrlh {
	stroke: black;
	text-anchor: middle;
	width: 40px;
	height: 16px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 0.9;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 0;
	font-size: 10px;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}
.ctrlhlong {
	stroke: black;
	text-anchor: middle;
	width: 80px;
	height: 16px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 0.9;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 0;
	font-size: 10px;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}
.ctrl {
	stroke: black;
	text-anchor: middle;
	width: 70px;
	height: 16px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 0.9;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 0;
	font-size: 10px;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}


.ctrlsquare {
	stroke: black;
	text-anchor: middle;
	width: 45px;
	height: 45px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 0.9;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 0;
	font-size: 10px;
	border: none;
	border-radius: 10px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}
.ctrl30 {
	stroke: black;
	text-anchor: middle;
	width: 25px;
	height: 16px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 0.9;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 0;
	font-size: 8px;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

.ctrlmenu {
	stroke: black;
	text-anchor: middle;
	width: 70px;
	height: 16px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 0.9;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 0;
	font-size: 10px;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
}


.ctrlmenu3 {
	stroke: black;
	text-anchor: middle;
	width: 40px;
	height: 16px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 0.9;
	color: var(--fGlobal);
	background:var(--gGlobal);
	stroke-width: 0;
	font-size: 10px;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
}
.ctrlmenu4 {
	stroke: black;
	text-anchor: middle;
	width: 30px;
	height: 16px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 0.9;
	color: var(--fGlobal);
	background:var(--gGlobal);
	stroke-width: 0;
	font-size: 10px;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
}

.ctrlflat {
	stroke: black;
	text-anchor: middle;
	width: 40px;
	height: 15px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: #000000;
	background: #CCC;
	stroke-width: 0;
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 1px;
	transition-duration: 0.4s;
	box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.24), 0 0px 0px 0 rgba(0, 0, 0, 0.19);
}

.ctrlflat2 {
	stroke: black;
	text-anchor: middle;
	width: 30px;
	height: 15px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: var(--fGlobal);
	background:var(--cCtrlF);
	stroke-width: 0;
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 1px;
	transition-duration: 0.4s;
	box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.24), 0 0px 0px 0 rgba(0, 0, 0, 0.19);
}

.controlslayoutpath {
	max-height: 100px; /* Hauteur maximale avant de défiler */
    overflow-y: auto;  /* Activer le défilement vertical */
    border: 0px solid #ccc; /* Optionnel : ajout d'une bordure pour mieux visualiser la zone de défilement */
    padding: 3px; /* Optionnel : ajout d'un padding pour améliorer la lisibilité */ 	
}
.ctrlcolor {
	stroke: black;
	text-anchor: middle;
	width: 60px;
	height: 16px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: "black";
	background: #CCC;
	stroke-width: 0;
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}
.ctrlcolor2 {
	stroke: black;
	text-anchor: middle;
	width: 10px;
	height: 16px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: "black";
	background: #CCC;
	stroke-width: 0;
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}


.ctrlf {
	stroke: black;
	text-anchor: middle;
	width: 40px;
	height: 16px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: "black";
	background: #CCC;
	stroke-width: 0;
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

input {
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
}

.ctrlb {
	stroke: black;
	text-anchor: middle;
	width: 100px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: "black";
	background: #DDD;
	stroke-width: 0;
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

.ctrl1 {
	text-anchor: middle;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 0.9;
	opacity: 1;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 0;
	cursor: pointer;
	border: none;
	border-radius: 10px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}
.ctrl1:hover {
	color: var(--cCtrlFhi);
	background: var(--cCtrlBhi);
	

}
.ctrl2 {
	stroke: black;
	text-anchor: middle;
	width: 90px;
	height: 25px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: white;
	background: #336699;
	stroke-width: 0;
	font-size: 11px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

input {
	font-size: 12;
	font-weight: 400;
	font-family: 'evolapsfont';
}

.ctrl2b {
	stroke: black;
	text-anchor: middle;
	width: 50px;
	height: 25px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 0.7;
	color: white;
	background: #336699;
	stroke-width: 0;
	font: 11px evolapsfont;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

#divcontainer {
	border: 0px solid lightgray;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
#makeitmovex {
	position: absolute;
	background: rgba(255, 255, 255, 0);
	resize: both;
	/*overflow: hidden;*/
	text-align: center;
	/*width: 300px;
	height: 100%;
	border: 0px solid grey;
	box-shadow: rgba(0, 0, 0, 0.25) 1px 1px 5px -1px;	
	display: none;*/
	z-index:9999999999;
}
#makeitmove0 {
	position: absolute;
	background: rgba(255, 255, 255, 0);
	resize: both;
	/*overflow: hidden;*/
	text-align: center;
	/*width: 300px;
	height: 100%;
	display: none;*/
	border: 1px solid #EEEEEE80;

	box-shadow: rgba(0, 0, 0, 0.25) 1px 1px 5px -1px;	

	z-index:9999999999;
	top: 10px; 
	left: 10px;
	border-radius: 5px;
}
#makeitmove1 {
	position: absolute;
	background: rgba(255, 255, 255, 0);
	resize: both;
	overflow: hidden;
	text-align: center;
	width: 300px;
	height: 300px;
	border: 0px solid grey;
	/*box-shadow: rgba(0, 0, 0, 0.25) 1px 1px 5px -1px;	*/
	display: none;
	top: 10px; 
	left: 280px;

}
#makeitmove2 {
	position: absolute;
	background: rgba(255, 255, 255, 0);
	resize: both;
	overflow: hidden;
	text-align: center;
	width: 300px;
	height: 300px;
	border: 0px solid grey;
	display: none;
	/*box-shadow: rgba(0, 0, 0, 0.25) 1px 1px 5px -1px;	*/
}
#makeitmove3 {
	position: absolute;
	background: rgba(255, 255, 255, 0);
	resize: both;
	overflow: hidden;
	text-align: center;
	width: 300px;
	height: 300px;
	border: 0px solid grey;
	display: none;
	/*box-shadow: rgba(0, 0, 0, 0.25) 1px 1px 5px -1px;	*/
}
#makeitmove4 {
	position: absolute;
	background: transparent;
	resize: both;
	overflow: hidden;
	text-align: center;
	width: 300px;
	height: 300px;
	border: 0px solid grey;
	/*box-shadow: rgba(0, 0, 0, 0.25) 1px 1px 5px -1px;	*/
	display: none;
	top: 10px; 
	left: 280px;
}
#makeitmove5 {
	position: absolute;
	background: white;
	resize: both;
	overflow: hidden;
	text-align: center;
	width: 300px;
	height: 300px;
	border: 0px solid grey;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
#makeitmove6 {
	position: absolute;
	background: white;
	resize: both;
	overflow: hidden;
	text-align: center;
	width: 300px;
	height: 300px;
	border: 0px solid grey;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 2px -1px, rgba(0, 0, 0, 0.3) 0px 1px 2px -1px;
}
#handlex {
	background: linear-gradient(45deg, #cfd8dc00 20%, #eeeeee00 50%);
	opacity: 1;
	height: 7px;
	/*width : 50px;*/
	cursor: move;
	text-align: left;
	font-size: 6px;
	color: #f5087b;
}

#handle0 {
	background: linear-gradient(45deg, #cfd8dc00 20%, #eeeeee00 50%);
	opacity: 1;
	height: 15px;
	/*width : 50px;*/
	cursor: move;
	text-align: left;
	font-size: 6px;
	color: #f5087b00;
}

#handle1 {
	background: linear-gradient(45deg, #cfd8dc00 20%, #eeeeee00 50%);
	opacity: 1;
	height: 15px;
	/*width : 50px;*/
	cursor: move;
	text-align: left;
	font-size: 6px;
	color: #f5087b00;

	width:100%;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 10; 	
}
#handle2 {
	background: linear-gradient(45deg, #cfd8dc00 20%, #eeeeee00 50%);
	opacity: 1;
	height: 15px;
	/*width : 50px;*/
	cursor: move;
	text-align: left;
	font-size: 6px;
	color: #f5087b00;

 
}
#handle3 {
	background: linear-gradient(45deg, #cfd8dc00 20%, #eeeeee00 50%);
	opacity: 1;
	height: 15px;
	/*width : 50px;*/
	cursor: move;
	text-align: left;
	font-size: 6px;
	color: #f5087b00;
}
#handle4 {
	background: linear-gradient(45deg, #cfd8dc00 20%, #eeeeee00 50%);
	opacity: 1;
	height: 15px;
	/*width : 50px;*/
	cursor: move;
	text-align: left;
	font-size: 6px;
	color: #f5087b00;
}
#handle5 {
	background: linear-gradient(45deg, #cfd8dc 20%, #eee 50%);
	opacity: 1;
	height: 7px;
	cursor: move;
	text-align: left;
	text-align: left;
	font-size: 6px;
	color: #f5087b;
}

.makeitmovedeleteicon {
	height: 7px;
	width: 7px;
	background: #ddd;
	display: inline;
	border: 0px silver solid;
	cursor: pointer;
	color: #336699;
	text-anchor: middle;
	font-size: 6px;
	font-style: normal;
	font-stretch: condensed;
	font-weight: lighter;
	font-family: evolapsfont;
	text-decoration: none;
	vertical-align: middle;
}

.handlestyleleft {
	height: 7px;
	width: 50%;
	background: linear-gradient(45deg, #cfd8dc 50%, #eee);
	border: 0px silver solid;
	cursor: move;
	color: #336699;
	font-size: 6px;
	font-style: normal;
	font-stretch: condensed;
	font-weight: lighter;
	font-family: evolapsfont;
	text-decoration: none;
	vertical-align: middle;
	text-align: left;
	padding: 0%;
}

.handlestyleright {
	height: 7px;
	width: 50%;
	background: #eee;
	border: 0px silver solid;
	cursor: move;
	color: #336699;
	font-size: 6px;
	font-style: normal;
	font-stretch: condensed;
	font-weight: lighter;
	font-family: evolapsfont;
	text-decoration: none;
	vertical-align: top;
	text-align: right;
	padding: 0%;
}

.handlestylebutton {
	height: 7px;
	width: 7px;
	background: #eee;
	display: inline;
	border: 0px silver solid;
	cursor: pointer;
	color: #336699;
	text-anchor: middle;
	font-size: 6px;
	font-style: normal;
	font-stretch: condensed;
	font-weight: lighter;
	font-family: evolapsfont;
	text-decoration: none;
	vertical-align: top;
	padding: 0%;
}

#geographicmap {
	width: 100%;
	/*height: calc(100% - 7px);*/
	height:100%;
	/*height: 95%;*/
	background-color:  #EEEEEEFF;

	/*resize:both;	*/

	overflow: hidden;
	display: flex;
	border: 0px silver solid;
}

#treedisplay {
	width: 100%;
	height: 100%;
	background: #eee;
	/*resize:both;	*/
	overflow: hidden;
	display: flex;
	border: 0px silver solid;
}


#manual {
	width: 100%;
	height: calc(100% - 7px);
	/*height: 95%;*/
	/*background: #fffefe80;*/
	background: transparent;		
	/*background: rgba(255, 255, 255, 0);*/
	/*resize:both;	*/
	overflow: hidden;
	display: flex;
	border: 0px silver solid;
	font: 12px evolapsfont;
}





.mapboxgl-ctrl-bottom-right {
    left: 20px;   /* Décale le cartouche de copyright à 10px de la gauche */
}

#migration {
	width: 100%;
	height: 100%;
	background: #eee;
	/*resize:both;*/
	overflow: hidden;
	display: flex;
	border: 0px silver solid;
}

#transitionmap {
	width: 100%;
	height: 100%;
	background: #eee;
	/*resize:both;*/
	overflow: hidden;
	display: flex;
	border: 0px silver solid;
}

#transitionchart {
	width: 100%;
	height: 100%;
	background: #eee;
	/*resize:both;*/
	overflow: hidden;
	display: flex;
	border: 0px silver solid;
	text-align: center;
}

.boxtreeanddiagram {
	resize: vertical;
	width: 100%;
	height: 500px;
	display: flex;
	overflow: hidden;
	border: 1px solid #CCC;
	border-radius: 1px;
}

.node {
	stroke: #fff;
	stroke-width: 0.5;
}

.link {
	stroke: black;
	stroke-opacity: 0.5;
	stroke-width: 0.5;
}

.nodetxt {
	stroke: black;
	text-anchor: middle;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 1;
	stroke-opacity: 0.5;
	stroke-width: 0;
	font-size: 8px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
}

#DATAsession {
	cursor: pointer;
	font: 12px evolapsfont;
	text-align: left;
	height: 70px;
	width: 250px;
	/*background: var(--c0light);*/
	color: #336699;
	border: none;
	border-radius: 5px;
	opacity: 1;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	overflow: hidden;
	padding: 1px 1px;
}

.imagepalette {
	width: 100px;
	border: 0;
}

/* unvisited link */
a:link {
	color: #336699;
	font-weight: normal;
	text-decoration: none;
}

/* visited link */
a:visited {
	color: #336699;
}

/* mouse over link */
a:hover {
	color: #336699;
}

/* selected link */
a:active {
	color: #336699;
}

.deck-tooltip {
    background-color: rgba(0, 0, 0, 0.9);
    color: rgba(255, 255, 255, 1);
    padding: 8px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
	font: 9px evolapsfont;
}

.ctrlinputfile {
	stroke: black;
	text-anchor: middle;
	width: 50px;
	height: 16px;
	opacity: 0.9;
	stroke-width: 0;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
	font: 9px evolapsfont;

}
input[type=file]::file-selector-button {
	border-radius: 3px;
	height: 16px;
	border: none;
	background-color: #FFFFFF80;
	color: #336699;
	cursor: pointer;
	font: 9px evolapsfont;
  }

  .color-box {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 1px;
}

#color-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1px;
	justify-content: center; 
	padding: 2px;
	text-align:center;
	width: 100%;
	border: 1px solid #33669950;
	border-radius: 10px; 
}

.cluster-box {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 1px;
}
#cluster-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1px;
	justify-content: center; 
	padding: 2px;
	text-align:center;
	width: 100%;
	border: 1px solid #33669950;
	border-radius: 10px; 
}
#iconifiedcontainer {
	display: flex;
	flex-wrap: wrap;  
	flex-direction: row; 
	align-items: left;
	gap: 5px;
	justify-content: left; 
	padding: 2px;
	text-align:center;
	width: 95%;
	height: 20px;
	position: relative;
	border: 1px solid #33669950;
	border-radius: 10px; 

}
.iconified {
	width: 20px;
	height: 20px;
	background-color: #33669980;
	border-radius: 50%;
	cursor: pointer;
	position: static; /* important pour le flexbox container */
	transition: all 1s ease; /* transition fluide sur tous les changements */
  }

.checkbox {
	vertical-align:middle;

}
input[type="checkbox"] {
	margin-top: 10px; 
}


/* Menu Z-index et Automatic */
.zdropdown-btn {
	/*padding: 10px 20px;*/
	background-color: #007bff;
	color: #fff;
	border: none;
	cursor: pointer;
	font: 11px evolapsfontbold;
}

/* Style du conteneur du menu déroulant */
.zdropdown-menu {
	display: none; /* Masqué par défaut */
	position: absolute;
	background-color: #EEE;
	/*min-width: 50px;*/
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10000; 
	padding: 3px;
	border-radius: 4px;
}

/* Style des éléments de menu */
.zdropdown-menu li {
	list-style: none;
	padding: 3px 3px;
	cursor: pointer;
	font: 11px evolapsfont;
	text-align: left;
	color: #336699;

}

/* Style de la checkbox */
.zdropdown-menu li label {
	display: flex;
	align-items: left;
	cursor: pointer;
}

.corner-display {
    position: absolute;
    background: transparent;
	/*color: var(--fGlobal);*/
	color: 'black';
    font: 9px evolapsfontbold;
    z-index: 10;
    pointer-events: none; /* Permet de cliquer à travers */

}

#nw-corner {
    top: 2px;
    left: 2px;
}

#ne-corner {
    top: 2px;
    right: 2px;
}

#sw-corner {
    bottom: 2px;
    left: 2px;
}

#se-corner {
    bottom: 2px;
	right: 2px;
}
#mapinfobulleid {
	/*bottom: 2px;
	right: 400px;
	position: absolute;
    width: 100px;
    height: 10px;
    /*background-color: rgba(255, 255, 255, 0);*/
    background-color: #DDDDDD;
    border: 0px solid #336699;
    padding: 10px;
    cursor: move;
	display: none;
	z-index: 10;
	text-align: center;
	vertical-align: middle;
    border-radius: 3px; 
	font: evolapsfontbold;
	font-size: 12px ;
   /* box-shadow: 2px 2px 10px rgba(0,0,0,0.)"; */
}

.cartoucheinfotree {
    
	
	font: evolapsfont;
	font-weight: 400;
	font-size: 10px ;	
}

.context-menu {
    position: absolute;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
    border: 0px solid #ccc;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    padding: 1px;
    z-index: 1000;
    border-radius: 3px;
    /*min-width: 120px;
	background: rgba(255, 255, 255, 0.95); /* Fond blanc semi-transparent
	*/
    backdrop-filter: blur(5px); /* Effet de flou pour un look moderne */
}

.context-menu-item {
    padding: 3px 3px;
    cursor: pointer;
	font: evolapsfont;
	font-weight: 400;
	font-size: 10px ;
    color: #333;
    transition: background 0.2s;
}

.context-menu-item:hover {
    background: #336699; /* Bleu foncé pour l'effet hover */
    color: white;
    border-radius: 4px;
}