#map{
  width:100%;
  height:100%;
  position: relative;
}
.tdtMapControl{
  position: absolute;
  width:2em;
  height:2em;
  border-radius: 50%;
  z-index:2;
  color:#fff;
  text-align: center;
  cursor:pointer;
}
#zoom-in{
  left: 1em;
  top: 1em;
  background-image:url("../img/plus.png") !important; /* Pour safari */
  background-repeat: no-repeat;
  background:url("../img/plus.png") no-repeat var(--color-80);
  background-size:60%;
  background-position: center;
}
#zoom-out{
  left: 1em;
  top: 3.5em;
  background-image:url("../img/moins.png") !important; /* Pour safari */
  background:url("../img/moins.png") no-repeat var(--color-80);
  background-size:60%;
  background-position: center;
}
#layers{
  left: 1em;
  background-image:url("../img/layers.png") !important; /* Pour safari */
  background:url("../img/layers.png") no-repeat var(--color-80);
  background-size:60%;
  background-position: center;
}
#marker{
	background-image: url("../img/target.png");
	width:40px;
	height:40px;
	display:none;
}
#btnTraces{
  left: 1em;
  background-image:url("../img/traces.png") !important; /* Pour safari */
  background:url("../img/traces.png") no-repeat var(--color-80);
  background-size:60%;
  background-position: center;
}
#btnProfil{
  left: 1em;
  background-image:url("../img/profil.png") !important; /* Pour safari */
  background:url("../img/profil.png") no-repeat var(--color-80);
  background-size:70%;
  background-position: center;
}
#btnPoi{
  left: 1em;
  background-image:url("../img/poi.png") !important; /* Pour safari */
  background:url("../img/poi.png") no-repeat var(--color-80);
  background-size:70%;
  background-position: center;
}
#btnFullscreen{
  left: 1em;
  background-image:url("../img/fullscreen.png") !important; /* Pour safari */
  background:url("../img/fullscreen.png") no-repeat var(--color-80);
  background-size:70%;
  background-position: center;
}
#btnXyz{
  left: 1em;
  background-image:url("../img/xyz.png") !important; /* Pour safari */
  background:url("../img/xyz.png") no-repeat var(--color-80);
  background-size:70%;
  background-position: center;
}
#btnXyz.active{
  background-image:url("../img/close.png") !important; /* Pour safari */
  background:url("../img/close.png") no-repeat var(--color-80);
  background-size:60%;
  background-position: center;
}
.tdtMainTool{
  width:2em;
  height:2em;
  border-radius: 50%;
  color:#fff;
  text-align: center;
  cursor:pointer;
}
.tdtMapToolInput{
  position: absolute;
  z-index:2;
}
.position1{
  top: 7em;
}
.position2{
  top: 9.5em;
}
.position3{
  top: 12em;
}
.position4{
  top: 14.5em;
}
.position5{
  top: 17em;
}
.position6{
  top: 19.5em;
}
.position7{
  top: 22em;
}
.position8{
  top: 24.5em;
}
.position9{
  top: 27em;
}
#search{
  left: 1em;
}
#searchMainTool{
  background-image:url("../img/search.png") !important; /* Pour safari */
  background:url("../img/search.png") no-repeat var(--color-80);
  background-size:60%;
  background-position: center;
}
#searchMainTool.active{
  background-image:url("../img/close.png") !important; /* Pour safari */
  background:url("../img/close.png") no-repeat var(--color-80);
  background-size:60%;
  background-position: center;
}
.tdtMapToolInputContainer{
  top: 0;
  position: absolute;
  height: 2em;
  width: 15em;
  left: 2.2em;
  background-color:rgba(255,255,255,0.8);
  border-radius:1em;
}
#tdtMapToolInputText{
  border-radius: 1em;
  border: none;
  width:13em;
}
#tdtMapToolInputText:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
#tdtMapToolInputFr{
  position: absolute;
  top: 0.25em;
  left: 14em;
  color: var(--color);
  cursor: pointer;
}
.tdtMainToolDetails{
  display: none;
}
#searchResultat{
  display:none;
  position: absolute;
  width: 15em;
  top: 2.2em;
  left: 2.2em;
  max-height: 15em;
overflow-y: scroll;
}
.searchItem{
  font-size: .8em;
}
#infoPoint {
    position: absolute;
    height: 1px;
    width: 1px;
    z-index: 100;
}

/* LAYERS */
#layersContainer{
  position:absolute;
  left:4em;
  top:1.5em;
  border-radius: .25em;
  overflow: hidden;
  z-index:2;
  display:none;
  max-height: 80%;
  overflow-y: scroll;
}
.itemMap,.itemPoi{
  font-size:.8em;
  padding:.25rem .5rem;
}
.markerPoi{
  height:2.5em;
}
.slider {
  /* -webkit-appearance: none; */
  height: 2px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider:hover {
  opacity: 1;
}
.slider::-webkit-slider-thumb {
  /* -webkit-appearance: none; */
  appearance: none;
  background: var(--color);
  cursor: pointer;
  border-radius:50%;
}
.slider::-moz-range-thumb {
  background: var(--color);
  cursor: pointer;
  border-radius:50%;
}
.titreGroupe {
  padding: .1em .25em;
  background-color: var(--color);
  color: #fff;
  border-radius: .25rem;
}
/* FIN LAYERS */

/* TRACES */
#tracesContainer,#poiContainer{
  position:absolute;
  left:4em;
  top:1.5em;
  border-radius: .25em;
  overflow: hidden;
  z-index:2;
  display:none;
  max-height: 80%;
  overflow-y: scroll;
  width: 15em;
  max-width: 70%;
}
#listeTraces,#listePoi{
  width:100%;
}
.itemPoi{
  font-size:.8em;
  padding:.25rem .5rem;
  background-color:rgba(255,255,255,.7);
  cursor:pointer;
}
.itemTrace{
  font-size:.8em;
  padding:.25rem .5rem;
  background-color:rgba(255,255,255,.7);
  cursor:pointer;
}
.itemTrace.active{
  background-color:var(--color-80);
  border-color: var(--color);
}
.checkTrace{
  width:100%;
}
.checkTraceLabel{
  width:100%;
}
.nomTraceLabel{
  max-width:100%
}
.nomTraceLabel > a {
    color: var(--color2);
}
.showOptions{
  width: 7em;
  margin: auto;
  cursor:pointer;
}
.optionsTrace{
  display: none;
  text-align: center;
}
.actionTrace{
  cursor:pointer;
}
.color {
  width: 100%;
  height: 18px;
  border: solid .5px rgb(78,78,78);
  border-radius: .2em;
  padding: 2px;
  background-color: #fff;
}
.inputColor {
  width: 100%;
  height: 100%;
  background-color: #cc1046;
  cursor: pointer;
}
#addTrace{
  cursor:pointer;
}
.labelTrace{
  font-size: .8em;
  margin-bottom: -.5em;
  margin-top: .5em;
}
.selectTrait{
  font-size:.8em;
}
.modal-title{
  font-size:1em;
}
/* .modal-header{
  border:none !important;
} */
.modal-footer{
  font-size:.8em;
  border:none !important;
}
.colorTraceInput{
  width:100%;
  max-width:none;
}
.resetColors {
  cursor: pointer;
}
/* FIN TRACES */
/*XYZ*/
#mousePosition{
	position:absolute;
	right:1em;
	top:1em;
	color:#FFFFFF;
	background-color:rgba(78,78,78,.7);
	border-radius:.5em;
	z-index:10;
	padding:0 .5em;
}
#mouseAlti{
	position:absolute;
	right:1em;
	top:1em;
	color:#FFFFFF;
	background-color:var(--color);
	border-radius:.5em;
	z-index:10;
	padding:0 .5em;
}
#altiOverlay{
	background-image:  url("../img/targetAlti.png");
	width:32px;
	height:32px;
	display:none;
}
/*FIN XYZ*/
#popup{
	display:none;
}
.ol-popup {
	position: absolute;
	background-color: white;
	-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
	filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
	padding: 15px;
	border-radius: 10px;
	border: 1px solid #cccccc;
	bottom: 12px;
	left: -50px;
	min-width: 280px;
	max-width:30em;
	z-index:1;
}
.ol-popup:after, .ol-popup:before {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.ol-popup:after {
	border-top-color: white;
	border-width: 10px;
	left: 48px;
	margin-left: -10px;
}
.ol-popup:before {
	border-top-color: #cccccc;
	border-width: 11px;
	left: 48px;
	margin-left: -11px;
}
.popupTitre{
  font-size:.9em;
  color:var(--color);
  font-weight:bold;
}
.popupImg {
  display: block;
  max-width: 95%;
  max-height: 95%;
  margin: .3em auto;
  min-width: 20em;
  min-height:12em;
  background-image:url("../img/widget/loader.svg");
  background-repeat: no-repeat;
  background-position: center;
  max-height: 20em;
}
.popupText{
  font-size:.8em;
}
.infoTitre{
  color:var(--color);
  font-weight:bold;
  font-size:.9em;
}
.infoText{
  font-size:.9em;
}
.infoImg>img{
  max-width:18em;
  display:block;
  margin:auto;
  background-image:url("../img/widget/loader.svg");
  background-repeat: no-repeat;
  background-position: center;
}
.closeInfos{
  position: absolute;
  top: 0;
  right: 0;
}
.infoContent{
  position:absolute;
  width:35%;
  max-width:50em;
  top:1em;
  display:none;
  right:1em;
  background-color:rgba(255,255,255,.95);
  z-index:100;
  max-height: calc(75% - 2em);
  overflow-y:auto;
  padding: 0 1em 1em 1em;
  border-radius: .5em;
  min-width: 20em;
}
#infoSelection{
  position:absolute;
  bottom: calc(25% + 2.5em);
  background-color:rgba(0,0,0,0.4);
  display:none;
  width:90%;
  left:5%;
  color:#ffffff;
  text-align:center;
  border-radius: .5em;
  padding:.2em 0;
  z-index:5;
}
#removeSel{
  float:right;
  width: 1.5em;
  cursor: pointer;
}
.msgTrace{
  position: absolute;
  top: .5em;
  z-index: 5;
  left: 50%;
  transform: translate(-50%, 0px);
}
.msgTrace span {
    white-space: normal;
}
#profil{
	position:absolute;
	bottom:0;
	right:0;
	background-color:rgba(255,255,255,0.8);
	z-index:2;
	width:100%;
	height:25%;
}
#graph2{
	display:none;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	cursor: crosshair;
}
#graphPos{
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	cursor: crosshair;
}
#bulle{
	display:none;
	background-color:rgba(255,255,255,0.7);
	position: absolute;
	left:0;
	/* bottom:0; */
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	text-align:center;
	text-shadow:none;
	line-height:1em;
	border-style:solid;
}
.bulle1{
	width:100px;
	/* height:45px; */
	border-radius:5px;
	padding:2px;
	border-width: 1px;
	font-size:0.7em;
}
.bulle2{
	width:130px;
	/* height:55px; */
	border-radius:7px;
	padding:2px;
	border-width: 1px;
	font-size:0.9em;
}
.bulle3{
	width:160px;
	/* height:70px; */
	border-radius:8px;
	padding:3px;
	border-width: 2px;
	font-size:1.2em;
}
.bulle4{
	width:200px;
	/* height:90px; */
	border-radius:10px;
	padding:4px;
	border-width: 3px;
	font-size:1.4em;
}
#altidist {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid;
    border-radius: 4px;
    font-family: Verdana,Arial,sans-serif;
    font-size: 0.8em;
    height: auto;
    padding: 2px;
    text-align: center;
    width: auto;
		display:none;
}