/* 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;}   
a.button:link, a.button:visited, a.button:hover {text-decoration:none; font-weight:bold; color:#fff;font-size:1.3rem;background:#170d2b;padding:5px;border-radius:5px;line-height:25px;} 

#zoom {position:absolute;right:2px;bottom:2px;z-index:2;}
#zoom button {background:#fff;font-size:20px;}
#board {position:absolute;left:2px;top:2px;z-index:2;cursor:move;width:12%;}

#panel {margin:0;padding:10px;display:inline-block; vertical-align:top;background:black;opacity:0.8;}

#hidepanel {outline:none;position:relative;float:left;background:#000;opacity:0.8;color:#fff;}
.toright::after {content:"►";}
.toleft::after {content:"◄";}

#map {position:relative;background-repeat: no-repeat !important;margin:0;display: inline-block;cursor:pointer;width:100%;}
#header {text-align:center;}

#lien {padding:0 0 0 10px;}

p  {padding:10px 0px 10px 0px;}
ul {padding-left:15px;}
li {list-style-type:square;}

button {width:25px; height:25px;margin:1px;border:1px solid #fff;cursor:pointer;}
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; }

#togglesearch {float:left;margin:10px 0 10px 0;height:25px;width:25px;}
.togglesearch {color:#fff;margin:0 1px;}

.clr {clear:both;}

.up {background:url('images/up.png') no-repeat center center;border-width:2px 1px 0 1px;margin:0 28px;}
.left {background:url('images/left.png') no-repeat center center;border-width:1px 0 1px 2px;clear:left;}
.right {background:url('images/right.png') no-repeat center center;border-width:1px 2px 1px 0;clear:right;}
.down {background:url('images/down.png') no-repeat center center;border-width:0 1px 2px 1px;clear:both;margin:0 28px;}
#resetsize {background:url('images/zoom.png') no-repeat center center;background-size: 18px;border:2px solid transparent;width:25px;height:27px;margin:0;padding:10px;float:left;}
.arrows {border-color:#fff;border-style:solid;padding: 12px;float:left;}

#navmap a {color:white;}
#viewListe {display:none;float:left;width:80%;}
#viewInputText {float:left;width:80%;}
#slider {margin:8px;cursor:pointer;}
.close {float:right;font-size:3rem;cursor:pointer;border: 2px solid #fff;border-radius: 12px;}
.scroll {overflow-y:auto;overflow-x:hidden;max-height:500px;}

#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;}

/* Tooltip */
.tooltip {position:relative;z-index:1;outline:none;cursor:pointer;}
.tooltip span {display: none;}
.tooltip:hover span {display:block;position:absolute;top:45px; right:-10px;width:auto;white-space: nowrap;background-color:#000; color:#fff;border-radius:5px;padding:10px;outline : none;}
.tooltip:hover::after {content: "";position: absolute;top: 40px;left:50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: #000 transparent transparent transparent;outline : none;}

#panelzoom {display:none;position:absolute;width:82px;height:110px;top:10px;right:10px;background:#000;opacity:0.7;color:#fff;font-weight:bold;padding:10px;z-index:1;border-radius:15px;line-height:2rem;cursor:move;}
#panelmap, #panellegende {display:none;position:absolute;top:10px;left:20%;background:#000;color:#fff;padding:10px;z-index:3;border-radius:15px;line-height:2rem;text-align:justify;cursor:move;}
#panelmap {width:511px;}

#controlpanel {position:absolute;top:0;right:0;z-index:2;background:#000;opacity:0.8;padding:5px;border-radius:5px;}
#buttonpanel {float:right;padding:5px;margin:5px 0 0;}
#searchpanel {float:right;width:200px;}
button.itineraire  {background:url('images/itineraire.png') no-repeat;border:0;filter:invert(0);margin:0 5px;position:relative;}
button.panelmap  {background:url('images/map.png') no-repeat;border:0;filter:invert(0);margin:0 5px;position:relative;}
button.layers  {background:url('images/layers.png') no-repeat;border:0;filter:invert(0);margin:0 5px;position:relative;}
button.panelhelp {background:url('images/help.png') no-repeat;border:0;filter:invert(0);margin:0 5px;position:relative;}
button.togglesearch  {background:url('images/togglesearch.png') no-repeat;border:1px solid #fff;}
button.remove-all-point  {background:url('images/remove_all.png') no-repeat;border:0;filter:invert(0);margin:0 5px;float:right;}
button.remove-point  {background:url('images/remove.png') no-repeat;border:0;filter:invert(0);margin:0 5px;float:right;}
#panelhelp p {padding:5px;}

#fond{display:none;position:absolute;width:100%;height:100%;background:#000;opacity:0.5;z-index:2;}

/* Affichage de distance pour fonction itinéraire */
#panelitineraire {display:none;border:1px solid #fff;margin:0 0 15px;min-height:80px;z-index:1;cursor:move;}
#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;height:36px;}