#mapContainer { width:100%;height:350px;position:relative; }
#map-containerDiv { position:absolute;top:0;left:0;right:0;bottom:0;z-index:0; }
#map { height: 100%; width: 100%; }
#mapOptions { width:23.84%;position:absolute;top:0;left:-23.84%;bottom:0;z-index:1;box-shadow:-2px 0 5px rgba(0,0,0,0.1);z-index:99 }

.tabbable-panel { border-left:1px solid #5cffff; }
.tabbable-panel .tabw { width:1px;height:1px;position:absolute;top:20px;left:-31px;-ms-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-ms-transform-origin:bottom right;-moz-transform-origin:bottom right;-webkit-transform-origin:bottom right;transform-origin:bottom right; }
.tabbable-panel .tabw a { height:30px;padding:0 15px;border:1px Solid #5cffff;border-bottom:0;border-radius:10px 10px 0 0;text-decoration:none;line-height:30px;float:right;white-space:nowrap;outline:none; }
.tabbable-panel .tabw a:hover { color:white;background:#24ccda; }
.tabbable-panel .tabw a:focus { color:white; }
.tabbable-panel .content { padding:20px;position:absolute;top:0;left:0;right:0;bottom:0;overflow:auto; }
.tabbable-panel.tab-right { border-left:none;border-right:1px solid #5cffff; }
.tabbable-panel.tab-right .tab { left:auto;right:-31px;-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);-ms-transform-origin:bottom left;-moz-transform-origin:bottom left;-webkit-transform-origin:bottom left;transform-origin:bottom left; }
.tabbable-panel.tab-right .tab a { float:left; }
.tabbable-panel,.tabbable-target { -ms-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; }


#mapContainer.options-open #map-containerDiv { left:23.84%; }
#mapContainer.options-open #mapOptions { left:0; }


/*///////////////////////////////////////////////////////*/
/* MAIN */
/* Style the tab */
.tabmain {
	overflow: hidden;
	border: 0px solid #ccc;
	background-color: var(--cGlobal);
	background-color: red;
	width: 500px;
	/*padding: 1px 1px;*/
	z-index: 10;
	height: 40px;
	flex: auto;
	/*background: linear-gradient(#cfd8dc,#aaa);*/
}

/* Style the buttons that are used to open the tab content */
.tabmain button {
	background-color: inherit;
	/*float: left;*/
	border-radius: 20px;
	outline: none;
	cursor: pointer;
	padding: 7px 7px;
	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;
}

/* Change background color of buttons on hover 
	background: linear-gradient(#f0c3a3  10%,#eee 80%);
*/
.tabmain button:hover {
	/*background: linear-gradient(#f0c3a3,#eee);*/
	background-color: #FAFAD2;

}

/* Create an active/current tablink class #336699 */
.tabmain button.active {
	/*background: linear-gradient(#f0c3a3,#eee);*/
	background-color: #FAFAD2;

}

/* Style the tab content */
.tabcontentmain {
	display: none;
	padding: 1px 1px;
	border: 0px solid #ccc;
	border-top: none;
	width: 100%;
	z-index: -10;
	vertical-align: middle;
}

.tabcontentmain {
	animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
/*///////////////////////////////////////////////////////*/


/*///////////////////////////////////////////////////////*/
/*ANALYSIS*/
.tab-container {
	width: 100%;
	z-index:999
  }
.tab {
	overflow: hidden;
	border: 0px solid #ccc;
	background-color: var(--cGlobal);
	width: 266px;
	/*padding: 1px 1px;*/
	/*hz-index: 10;*/
	/*height: 40px;*/
	/*background: linear-gradient(#cfd8dc,#aaa);*/
	display: flex;
	margin-bottom: 2px;
	vertical-align: middle;
	background-color: transparent;
}

/* Style the buttons that are used to open the tab content 
background-color: inherit;*/
.tab button {
	border-radius: 0px;

	width: 25px;
	height: 25px;

	vertical-align: middle;
	cursor: pointer;
	background-color: transparent;
	padding: 2px 2px;
	border: none;
	outline: none;
	transition: background-color 0.3s ease;
}


/* Change background color of buttons on hover */
.tab button:hover {
	/*background: linear-gradient(#f0c3a3,#eee);*/
	background-color: #fafad2;
	/*background-color: #f5087b77;*/
	border-radius: 5px;


}

/* Create an active/current tablink class #336699 */
.tab button.active {
	color: white;
	/*background: linear-gradient(#f0c3a3,#eee);*/
	background-color: #FAFAD2;
	/*background-color: #f5087b75;*/
	border-radius: 5px;


}

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 1px 1px;
	border: 0px solid #ccc;
	border-top: none;
	width: 265px;
	z-index: -10;
	vertical-align: middle;

}

.tabcontent {
	animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
/*///////////////////////////////////////////////////////*/



/*///////////////////////////////////////////////////////*/
/* onglets scenario layout*/
.tablayout-container {
	width: 100%;
  }
.tabslayout {
	display: flex;
	margin-bottom: 2px;
	vertical-align: middle;

  }
.tablayout-button {
	padding: 2px 2px;

	width: 25px;
	height: 25px;
	border-radius: 0px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	background-color: transparent;
	border: none;
	outline: none;
	transition: background-color 0.3s ease;
  }
  .tablayout-button:hover {
	background-color: #FAFAD2;
	border-radius: 5px;
  }
  .tablayout-button.active {
	background-color: #FAFAD2;
	border-radius: 5px;
  }
  .tablayout-content {
	display: none;
	border: 0px solid #ccc;
	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;
	background-color: var(--c1light);
  }
  .tablayout-content.active {
	display: block;
  }
  /*///////////////////////////////////////////////////////*/