/* 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;} 

#panel {margin:0;padding:0.3%;display: inline-block; vertical-align:top;}
#map {position:relative;background-repeat: no-repeat !important;border:2px solid #000;margin:0;display: inline-block;cursor:pointer;}
#header {text-align:center;}

#changepanel {position:absolute;top:10px;left:10px;color:#fff;outline:none;}
#content2 {display:none;}
#content2 a {color:#fff;font-weight:normal;}
.toright::after {content:"►";}
.toleft::after {content:"◄";}

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

button {width:25px; height:25px;background:#000;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, #content2 {font-size:1.2rem;}
#txt p, #content2 p {width:95%;text-align:justify;padding:10px;word-spacing: 2px;overflow-wrap:break-word;hyphens: auto;}
#txt img, #content2 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; left:-2px;width:auto;white-space: nowrap;background-color:#fff; color:#000;border-radius:5px;padding:10px;outline : none;}
.tooltip:hover::after {content: "";position: absolute;top: -10px;left:50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: #fff transparent transparent transparent;outline : none;}

#panelzoom {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 {border:1px solid #fff;border-radius:5px;padding:5px;}
button.itineraire  {background:url('images/itineraire.png') no-repeat;border:0;filter:invert(0);margin:0 5px;position:relative;}
button.panelzoom  {background:url('images/zoom.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.color  {background:url('images/color.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;}
#panelzoom p, #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;}

/* CSS pour fond de page noir */
body.black-bg {color: white; background: black;}
body.black-bg a {color: lightblue;}
body.black-bg #navmap a {color:white;}
body.black-bg button.tooltip {filter: invert(0);}
body.black-bg #controlpanel {border: 1px solid white;}
 
/* CSS pour fond de page blanc */
body.white-bg {color: black; background: white;}
body.white-bg a {color:#170d2b;}
body.white-bg #navmap a, body.white-bg #content2 a {color:black;}
body.white-bg #panelbonus a {color: lightblue;}
body.white-bg button.tooltip, body.white-bg #content2 img {filter:invert(1);}
body.white-bg #logo_blindhealer {filter:invert(1);}
body.white-bg #controlpanel {border: 1px solid black;}
body.white-bg #map {background-color:#fff;border:2px solid #fff;}
body.white-bg .tooltip:hover span {background:#000;color:#fff;filter:invert(1);}
body.white-bg #panelitineraire {border:1px solid #000;}
body.white-bg #panelitineraire-txt {background:#fff;}
body.white-bg #paneltitle {background:#000;color:#fff;}

/* Responsive */
@media screen and (max-width: 1200px)
{
#txt p {padding:10px 0px 10px 0px;}
div#txt {font-size:1.1rem;}
h2 {font-size:1.3rem;}
}