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

@viewport{
    zoom: 1.0;
    width: device-width;
}

@-ms-viewport{
    zoom: 1.0;
	width: device-width;
    
}


text, tspan {user-select: none;}

* {margin:0; padding:0;}
body	{font-family: sans-serif; font-size:11px; line-height:15px;color:#fff;background:#000;overflow:hidden;}
a {text-decoration:none; font-weight:bold; color:#76bdd5;cursor:pointer;}   
p  {margin-bottom:7px;padding:5px 0px;text-align:justify;}
ul {padding-left:15px;list-style-type:square;}
li {text-align:justify;}

/* Title & headers */
h1 {font-size:30px;font-weight:bold;background:#000;color: #fff;padding:10px;line-height:36px;clear:both;text-transform:uppercase;}
h2 {font-size:12px;clear:both;width:85%;margin-bottom:5px;text-transform:uppercase;}
h3 {font-size:24px;font-weight:bold;color: #333;line-height:30px;clear:both;}
h4 {font-size:14px;font-weight:bold;color: #333;text-transform:uppercase;line-height:20px;clear:both;}
h5, h6 {font-size:12px;font-weight:bold;color: #333;clear:both;}

button {cursor:pointer;background:none;color:#fff;border:0;font-family:'FontAwesome';font-weight:300;font-size:18px;padding:3px; }
button:hover {color:#a0a0a0;}
select {margin:10px 0 10px 0;padding:2px;width:100%;height:25px;}
optgroup {background:#000;color:#fff;font-size:12px;}
option {background:#333;color:#fff;font-size:11px;}
input  {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; }

.right {float:right;}
.left {float:left;}
.clr {clear:both;}
#lightbox img {margin:0;}
.hide {display:none !important;}
img {vertical-align:middle;margin:5px 25px;}
table {margin:10px 0;font-size:11px;}
caption {font-size:16px;}
th {vertical-align:top;padding:0 3px;text-align:left;}
td {vertical-align:top;padding:0 3px;}
#description tr:nth-child(even) {}
#description tr:nth-child(odd) {}
.popuplink {border-bottom:1px dashed #a0a0a0;}
.let {font-size:19px; font-weight:bold;}
.anot {font-weight:bold; color:olive;}
.tab {margin-left: 10px; }
.encadre {background:#f0f0f0; padding:10px;}
.marge {border-left:5px solid #c3c3c3;margin:20px 0 20px 30px;padding-left:10px;font-size:11px;}
.close {position:relative;float:right;padding:0;background:transparent;border:0;cursor:pointer;}

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

/* Panneau de commandes */
#board {position:absolute;top:5px;right:35px;background:#000;opacity:0.8;padding:0 5px;width:fit-content;border-radius:5px 0 0 5px;z-index:0;}
#hideboard {outline:none;position:absolute;top:5px;right:5px;width:30px;padding:5px 10px;background:#000;opacity:0.8;font-size:28px;border-radius:0 5px 5px 0;height:47px;margin-right:1px;}
#autres {display:none;padding:10px;width:300px;}
#autres p {margin:0;}
#autres a {color:#fff;}
#autres a:hover {color:#a0a0a0;}
#autres i {font-size:15px;margin-right:5px;}

#panel {height:45px;}
#searchpanel {float:left;width:200px;padding:0;margin:2px 0 0;}
#buttonpanel {float:left;padding:5px;margin:5px 0 0 5px;}

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

/* openitem */
.item_container {display:none;position:absolute;left:10px;top:10px;/*transform:translate(-50%, -50%);*/background:#fff;border-radius:15px;color:#000;cursor:move;z-index:1;}
.top_item {height:30px;border: 1px solid #c3c3c3;border-radius:15px 15px 0 0;background:linear-gradient(#e7e7e7, #fff);cursor:move;}
.item {display:none;overflow-y:auto;scrollbar-color:#000 #ccc;scrollbar-width:thin;min-width:300px;max-width:500px;max-height:500px;padding:10px;cursor:text;border:1px solid #c3c3c3;border-radius:0 0 15px 15px;border-top:0;}
.close_item {padding:3px 5px;border:0;cursor:pointer;float:right;color:#000;}
#fond {display:none;position:absolute;width:100%;height:100%;top:0;left:0;background:#000;opacity:0.8;z-index:3;}
.item p {margin-bottom:7px;}
.item img {max-width:97%;height:auto;margin:10px !important;} 
.item a {color:blueviolet;}

/* Panneau des cartes et légendes */
#panelmap {display:none;position:absolute;top:10px;left:10px;background:#000;color:#fff;padding:10px;border-radius:15px;line-height:20px;text-align:justify;cursor:move;z-index:1;}
#panelmap {width:315px;}
#panelmap h2 {clear:none;}
#panelmap img {margin:0;cursor:default;}
#panelmap a img {margin:0;cursor:pointer;}

/* Panneau des Zones */
#panelzones {display:none;position:fixed;bottom:10px;right:70px;width:100px;height:fit-content;background:#000;color:#fff;padding:10px;border-radius:5px;line-height:20px;text-align:justify;cursor:move;z-index:1;opacity:0.8;}

/* Panneau Checkbox */
#filtreItems {display:none;position:fixed;bottom:10px;left:10px;/*right:50px;*/background:#000;color:#fff;padding:10px;border-radius:5px;width:fit-content;height:fit-content;cursor:move;z-index:1;}
input[type="checkbox"] {width:auto;margin:0;cursor:pointer;}
.label_type {height:10px;width:10px;display:inline-block;margin:0 5px;}
.icon_legend:before {content:attr(data-before);}

/* Panneau Itinéraire */
#panelitineraire {display:none;background:#000;width:250px;/*cursor:move;*/}
#panelitineraire button {float:right;padding:5px;}
#paneltitle {min-height:20px;padding:3px 10px 0;font-weight:bold;}
#paneltitle::after {content:"Traçage d'itinéraire et calcul de distance";}
#panelitineraire-txt {padding:10px;height:50px;}
#panelitineraire .tooltip:hover span {top:40px;left:-100px;}
#panelitineraire .tooltip:hover::after {top:30px;}

/* Panneau textuel */
#textepanel {margin:0;padding:10px;display:inline-block;position:relative;width:300px;border-radius:5px;background:#000;/*cursor:move;*/}
#txt {cursor:text;}
#txt p {width:95%;padding:0 5px;margin:0;}
#txt img {max-width:95%;margin:2px 10px 10px 10px;float:left;}
#lien {margin:0 7px -15px 0;float:right;font-size:16px;position:relative;z-index:0;}
#surface {margin-top:5px;}
div.readmore::before {font-family:"FontAwesome";content:"\f477";}
#sources {float:right;font-size:9px;margin-top:5px;}
#sources span::before {font-family:'FontAwesome';content:"\A\f02d";white-space:pre;margin-right:5px;}
#sources span:first-child::before {content:"\f02d";}
#credits {font-size:10px;margin:30px 5px;}
#credits a {color:white;}

/* Zoom */
#zoom {position:absolute;right:10px;bottom:10px;}
#zoom button {background:#000;opacity:0.8;border:1px solid #fff;margin:0;padding:7px;font-size:20px;}
.zoommoins {border-top: 0px !important;}

/* Icones des boutons */
.close::before {content:"\f057";}
.close_item::before {content:"\f057";}
.layers::before  {content:"\f3c5";}
.itineraire::before {content:"\f277";}
.panelmap::before {content:"\f03e";}
.panelzones::before {content:"\f5ee";}
.panelhelp::before {content:"\f29c";}
.togglesearch::before  {content:"\f0ec";}
.remove-all-point::before  {content:"\f2ed";}
.remove-point::before  {content:"\f056";}
.zoomplus::before {content:"\f067";}
.zoommoins::before {content:"\f068";}
.toright::before {content:"\f105";}
.toleft::before {content:"\f104";} 
.folder_close::before {content:"\f07b";}
.folder_open::before {content:"\f07c";}
.fullscreen::before {content:"\f065";}

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

/* Masquer le texte Undefined en haut à gauche de la carte */
text[font-family='"Arial"'] {display:none;}

/* CSS pour fond de page noir */
body.black-bg {background:#000;}
 
/* CSS pour fond de page blanc */
body.white-bg {background:#fff;color:#000;}
body.white-bg #board {background:#fff;border:1px solid #606060;opacity:1;}
body.white-bg button {color:#000;}
body.white-bg #hideboard,
body.white-bg #panelmap,
body.white-bg #panelzones,
body.white-bg #filtreItems,
body.white-bg #panelitineraire, 
body.white-bg #textepanel,
body.white-bg #autres,
body.white-bg #autres a,
body.white-bg #zoom button {background:#fff;color:#000;opacity:1;}
body.white-bg a {color:blueviolet;}
body.white-bg #autres a:hover,
body.white-bg button:hover,
body.white-bg #zoom button:hover {color: #606060;}
body.white-bg #hideboard, body.white-bg #zoom button, body.white-bg #filtreItems {border:1px solid #606060;}

body.white-bg .tooltip {}
body.white-bg .tooltip span {border:1px solid #000;}
body.white-bg .tooltip:hover span {background:#000;color:#fff;}
body.white-bg .tooltip:hover::after {border-color:transparent transparent #000 transparent;}



@media screen and (max-height: 600px) {
  .item {max-height:400px;}
}

@media screen and (max-height: 500px) {
  .item {max-height:300px;}
}

@media screen and (max-height: 400px) {
  .item {max-height:200px;}
}

@media screen and (max-height: 300px) {
  .item {max-height:100px;}
}