/*Général*/

#structure
{
	display:flex;
  	flex-direction:column;
  	height:100%;
}

.middle
{
	flex-grow:1;
    min-height: 0px;
    display:flex;
    flex-direction:column;
    position:relative;
}

html, body
{

	margin: 0;
	height: 100%;
	overflow:hidden;
}

label
{
	margin-right: 10%;
}

input
{

	background:none;
}

.cn
{
	font-family : Courier New, times;
}
.stb
{
	font-weight: bold;
	color: white;
}

.stbDG
{
	font-weight: bold;
	color: darkgrey;
}

.stb2{
	font-weight: bold;
}

table
{
	margin-bottom: 10px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(14px);
}

.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
}


/*-----------------------------------------------------------*/


/*connexion */

#general
{
	display: flex;
}

.general{
	display: flex;
	flex-direction: column;
	width: 500px;
	height: 300px;
	margin: auto;
	background: linear-gradient(to top right, #fff calc(50% - 20px), red, #fff calc(50% + 1px) )

}

.zum
{
	float: right;
	margin-top: 10px;
	font-weight: bold;
	font-family : Courier New, times;
}

.dotted
{
	border-bottom: dotted;
	border-top: none;
	border-right: none;
	border-left: none;
}

.title_2
{
	display: flex;
	width: auto;
	justify-content: space-around;

}

.title
{
	display: flex;
	width: auto;
	justify-content: space-around;
	margin-bottom: 20px;
}
.form
{
	display: flex;
	width: auto;
	margin-left: auto;
	margin-right: auto;
}
.messages
{
	display: flex;
	width: auto;
	justify-content: space-around;
}

/*-----------------------------------------------------------*/

/*Header*/




header.header1
{border-bottom: solid grey 2px;
	background-color: black;
	width: 100%;}

h1.title
{
	color: white;
	margin-left: 5px;
}

h3.title
{
	color: white;
	margin-left: 20px;
}


.title
{
	display: flex;
	align-items: baseline;
	
	margin: 0;
}

.title2
{
	display: flex;
	flex-direction: column;
	margin-bottom: 1px;
	color: white;
}

p.title
{
	margin-left: 20px;
	font-weight: bold;
}

header.header2
{
	display: none;

}


#header_hmw
{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#menu_hmw
{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.liens_menu_hmw
{
	margin-left: 10px;
	margin-right: 10px;
}

select
{
	color: white;
	font-weight: bold;
	background-color: black;
	border: none;
	overflow: hidden;
	
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	width: 110%; 

	
	height: auto;
	border: 0; 
	margin: 0;
padding: .45em;
	border-radius: 0;
	text-overflow: ellipsis;

	
}

li.liens_menu_hmw
{
	display: flex;
}


ul.liens_menu_hmw
{
	display: flex;
	list-style-type: none;
	flex-wrap: nowrap;
	margin: auto;
	padding: 0;
}

a.liens_menu_hmw
{
	display: flex;
	text-decoration: none;
	justify-content: space-around;
	align-items: center;
	color: white;
	/*width: 100px;*/
	height: 50px;
	border-left: solid #d2d6d8 1px;
	font-weight: bold;
	padding-right: 15px;
	padding-left: 15px;
}


a.liens_menu_hmw:hover
{
	transition: all 0.5s;
	background-color: #a6a6a6;
	color: white;
	font-weight: bold;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: white;
  text-align: center;
  border-radius: 6px;
  border: solid grey;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltip:hover .tooltiptext {
	transition: all 0.5s;
  visibility: visible;
}

/*-----------------------------------------------------------*/

/*leaflet*/

#map{
	position:absolute;
	top:0;
	bottom:0;
	width:100%;
	z-index: 1;
	max-height: 100%;
	overflow:hidden;
}

#opacity_control
{
	z-index: 5;
	background-color: white;
	

}

.container_global
{
	display: flex;
	flex-direction: column;
	margin-bottom: 50px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}


.sous_menus
{
	background-color: white;
	border-left: solid black;
	display: flex;
flex-direction: column;
}

.titre_sous_menu
{
	background-color: black;
	border-top:solid grey 2px;
	border-bottom: solid grey 2px;
	
}



.slider_appearance
{
	display: flex;
	flex-direction: column;
	-webkit-appearance: none;
  height: 10px;
  background: #d7d7d7;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  margin-bottom: 20px;
  margin-top: 10px;
}

.slider_appearance:hover {
  opacity: 1;
}

.slider_appearance::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 0;
	background-color: darkgray;
  cursor: pointer;
  
}

.slider_appearance::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
	background-color: darkgray;

  cursor: pointer;
  
}


.slider{

	display: flex;
	flex-direction: column;

}


#menu_2
{
	display: none;
}


#cr
{
	position: absolute;
	border-radius: 10px 100px / 120px;
	z-index: 2000;
	bottom: 5px;
	right: 5px;
	background-color: white;
	padding: 5px;
	opacity: 65%;

}

#cr:hover
{
	transition: all 0.5s;
	opacity: 100%;	
}
/*-----------------------------------------------------------*/

.button_black {
  background-color: black;
  border: none;
  color: white;
  font-weight: bold;
  padding: 15px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.arrow {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/*collapse button*/
.collapsible {
  background-color: white;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
}


.active, .collapsible:hover {
  background-color: white;
}

.active_black, .button_black:hover {
  background-color: black;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: white;
  opacity: 80%;
  margin-bottom: 20px;
}



/*-----------------------------------------------------------*/
/*mediaquery*/

@media only screen and (max-width: 768px) {


		.top
		{
			display: none;
		}
	  	  #menu_2
	  	  {
	  	  	display: flex;
	  	  	justify-content: center;
	  	  	max-height: 31.8vh;
			overflow: auto;
			overflow-x: hidden;
			overflow-y: scroll;
			padding: 5px;
	  	  }

	  	  #menu{
	display: none;
}

#cr
		{
			display: none;
		}
}




/*================================*/
/*=== Partie sur le Swipe Menu ===*/
/*================================*/
/* Menu burger */
#menu-burger 
{
	display:inline-block; 
	cursor:pointer;
}

#menu-burger .bar1,#menu-burger .bar2, #menu-burger .bar3 
{
	width:32px; 
	height:5px; 
	background-color:#F1F1F1; 
	margin:6px 0; 
	transition:0.4s;
}

#menu-burger:hover 
{
	opacity:.75; 
	transition:.5s;
}

#menu-burger.clicked .bar1 
{
	-webkit-transform:rotate(-90deg) translate(-9px, 6px); 
	transform:rotate(-90deg) translate(-9px, 6px);
}

#menu-burger.clicked .bar2 
{
	opacity: 0;
}

#menu-burger.clicked .bar3 
{
	-webkit-transform:rotate(90deg) translate(-13px, 10px); 
	transform:rotate(90deg) translate(-13px, 10px);
}

/* Main menu (slide) */

#menu 
{
	z-index:9999; 
	left:-50%; 
	top:-2px; 
	background: white; 
	padding: 5px; 
	width: 300px;
	min-height:100%; 
	box-shadow:1px 0 1px grey; 
	max-height: 100vh; 
	position: absolute; 
	overflow: auto;
}

#menu ul li 
{
	list-style:none;
}

#menu ul li a 
{
	display:block; 
	color:#fff; 
	text-decoration:none; 
	font-weight:700; 
	background:#2c3e50; 
	transition:background .5s; 
	padding:1em; 
	text-align:center; 
	margin-bottom:.5em; 
	box-shadow:1px 1px 0 #666;
}

#menu ul li a:hover 
{
	background:#f1c40f; 
	transition:background .5s;
}

#menu.visible 
{
	animation:.3s slideRight ease-in forwards; 
	transition-delay:0;
}

#menu.invisible 
{
	animation:1s slideLeft ease-out forwards; 
	transition-delay:0;
}

/* Animations pour le menu slide */
@keyframes slideRight {
	from {left:-50%;}
	to {left:0%;}
}
@-webkit-keyframes slideRight {
	from {left:-50%;}
	to {left:0%;}
}
@keyframes slideLeft {
	from {left:0%;}
	to {left:-50%;}
}
@-webkit-keyframes slideLeft {
	from {left:0%;}
	to {left:-50%;}
}

/* Responsive design */
@media (max-width:1024px) {
	#menu {left:-100%; width:50%;}
	

	/* Animations pour le menu slide */
	@keyframes slideRight {
		from {left:-100%;}
		to {left:0%;}
	}
	@-webkit-keyframes slideRight {
		from {left:-100%;}
		to {left:0%;}
	}
	@keyframes slideLeft {
		from {left:0%;}
		to {left:-100%;}
	}
	@-webkit-keyframes slideLeft {
		from {left:0%;}
		to {left:-100%;}
	}
}