/********************************************
***** CSS commun aux différentes cartes *****
********************************************/

* {margin:0; padding:0;}
html {font-size:62.5%; }
body	{font-family: sans-serif; font-size:1.2rem; color:#fff;background:#000;overflow:hidden;}
a {text-decoration:none; font-weight:bold; color:lightblue;cursor:pointer;}   
p  {padding:10px 0px 10px 0px;}
ul {padding-left:15px;}
li {list-style-type:square;}
button {cursor:pointer;background:none;color:#fff;border:0;font-family:'FontAwesome';font-size:1.5em;padding:0.2em;}
button:hover {color:#a0a0a0;}
select {font-size:1.2rem; margin:10px 0 10px 0;padding:2px;width:100%;height:25px;}
optgroup {background:#000;color:#fff;}
input  {font-size:1.2rem; margin:10px 0 10px 0;padding:2px;width:100%;height:17px;}
input:-moz-placeholder {color: #000;}
input::-webkit-input-placeholder {color: #000;}
/* Enlever le placeholder au focus */
input:focus::-webkit-input-placeholder {color:transparent; }
input:focus:-moz-placeholder {color:transparent; }
.clr {clear:both;}
.close {float:right;}


/* Carte et fond noir transparent */
#map {position:relative;background-repeat: no-repeat !important;margin:0;display: inline-block;cursor:pointer;width:100%;}
#fond {display:none;position:absolute;width:100%;height:100%;background:#000;opacity:0.5;z-index:3;}

/* Panneau de commandes */
#board {position:absolute;top:5px;right:35px;background:#000;opacity:0.8;padding:0 5px;width:250px;cursor:move;border-radius:5px 0 5px 5px;}
#hideboard {outline:none;position:absolute;top:5px;right:5px;width:30px;padding:5px 10px;background:#000;opacity:0.8;font-size:2.5em;border-radius:0 5px 5px 0;}

/* Panneau textuel */
#panel {margin:0;padding:10px;display:inline-block; vertical-align:top;border-radius:5px 5px 5px 0;}
#lien {padding:0 0 0 10px;}
#txt {font-size:1.2rem;}
#txt p {width:95%;text-align:justify;padding:10px;word-spacing: 2px;overflow-wrap:break-word;hyphens: auto;}
#txt img {max-width:95%;margin:2px 10px 10px 10px;float:left;}

.changepanel {outline:none;float:right;width:30px;padding:5px 10px;}
.changepanel:before {content:"\f079"}
#content {}
#content2 {display:none;padding:10px;}
#content2 a {color:#fff;}
#content2 a:hover {color:#a0a0a0;}
#content2 i {font-size:1.5em;margin-right:5px;}
#menu {float:right;margin:10px 0 10px 0;height:25px;width:25px;}
#searchpanel {float:left;width:200px;padding:0 20px 0 2px;}
#buttonpanel {float:left;padding:5px;margin:5px 0 0 35px;}
#buttonpanel button {margin:0;}


/* Recherche */
#togglesearch {float:left;margin:10px 5px 10px 0;height:25px;width:25px;}
#viewListe {display:none;float:left;width:80%;}
#viewInputText {float:left;width:80%;}


/* Zoom */
#zoom {position:absolute;right:5px;bottom:5px;z-index:2;}
#zoom button {background:#000;opacity:0.8;border-radius:5px;border:2px solid #fff;margin:3px 0;padding:5px;}

/* Panneau des cartes */
#panelmap, #panellegende {display:none;position:absolute;top:10px;left:20%;background:#000;color:#fff;padding:10px;z-index:4;border-radius:15px;line-height:2rem;text-align:justify;cursor:move;}
#panelmap {width:511px;}


/* Icones des boutons */
.close:before {content:"\f057";}
.menu:before {content:"\f0c9";}
.layers:before  {content:"\f041";}
.itineraire:before {content:"\f277";}
.panelmap:before {content:"\f03e";}
.panelhelp:before {content:"\f29c";}
.togglesearch:before  {content:"\f0ec";}
.remove-all-point:before  {content:"\f014";}
.remove-point:before  {content:"\f056";}
.zoomplus:before {content:"\f067";}
.zoommoins:before {content:"\f068";}
.toright::before {content:"\f105";}
.toleft::before {content:"\f104";}

.maps:before {content:"\f278";}


/* Tooltip */
.tooltip {position:relative;z-index:1;outline:none;cursor:pointer;}
.tooltip span {display:none;font-size:0.8em;border:1px solid #fff;font-family: sans-serif;}
.tooltip:hover span {display:block;position:absolute;top:40px;right:-2px;width:auto;white-space:nowrap;background:#fff;color:#000;border-radius:5px;padding:10px;outline:none;font-weight:bold;font-size:0.7em;}
.tooltip:hover::after {content:"";position:absolute;top:30px;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent #fff transparent;outline:none;z-index:555;}


/* Panneau Itinéraire */
#panelitineraire {width:250px;display:none;position:absolute;top:5px;left:30%;border:1px solid #fff;margin:0 0 15px;min-height:80px;z-index:1;cursor:move;}
#panelitineraire button {float:right;}
#paneltitle {background:#fff;color:#000;min-height:20px;padding:3px 10px 0;font-weight:bold;border-bottom:1px solid #000;}
#paneltitle::after {content:"Traçage d'itinéraire et calcul de distance";}
#panelitineraire-txt {padding:10px;background:#000;opacity:0.8;height:36px;}
#panelitineraire .tooltip:hover span {top:40px;}
#panelitineraire .tooltip:hover::after {top: 30px;}