body { margin: 0; padding: 0; overflow: hidden; height: 100%; }
div#map { width: 100%; height: 100%; min-height: 300px; }

.leaflet-container a.leaflet-popup-close-button { padding: 6px 20px 0 0; }
.leaflet-div-icon { border-radius: 32px; border: none; text-align: center; line-height: 32px; background: #6a0dad; color: white; }
.leaflet-div-icon.square { border-radius: 5px; }
.leaflet-div-icon.route { background: #6a0dad; font-size: larger; font-weight: bold; }
.leaflet-div-icon.route.grey { background: #666; }
.leaflet-div-icon.route.orange { background: #d50; }
.leaflet-div-icon.route.green { background: #0a0; }
.leaflet-div-icon b { font-weight: normal; }

.leaflet-marker-icon.van { border-radius: 24px; border: none; text-align: center; line-height: 24px; color: white; background: #080; font-weight: bold; }

.leaflet-div-icon.label { background: rgba(0,0,0,0.5); height: 36px; display: block; font-size: 16px; padding: 2px 20px 0 20px; border: 2px solid #222; }
.leaflet-div-icon.label.detail { border-color: transparent; }

.leaflet-div-icon.markname { background: transparent; text-align: center; color: black; line-height: 18px; }

.leaflet-div-icon.carpark { width: 32px; height: 32px; background: blue; border-radius: 5px; color: 'white'; text-align: center; line-height: 32px; }

div.svg-icon svg { overflow: visible; }
div.svg-icon div.boatdetails { width: 200px; text-align: center; font-size: 10px; margin: -40px 0 0 -75px; padding: 5px; border-radius: 5px; }
div.leaflet-marker-icon.svg-icon.hover { z-index: 9999998 !important; }
div.leaflet-marker-icon.svg-icon.hover div.boatdetails { background: rgba(0,0,0,0.7); z-index: 9999999 !important; }
div.leaflet-marker-icon.coordinate { z-index: 999; overflow: visible; width: 32px !important; margin-left: -16px !important; font-size: 12px; line-height: 12px; color: white; opacity: 0.5; }




a.jnc-navionics-overlay-logo { left: 50%; margin-left: -70px; bottom: 5px; }
a.g-navionics-overlay-logo { bottom: 45px !important; }

/* for measure tool */
.leaflet-draw-tooltip {
  background: rgba(0, 0, 0, 0.5) !important;
  color: #fff !important;
  font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/* edit box */
.editBox { display: none; position: absolute; top: 10px; left: 60px; z-index: 999; background: #f5f5f5; border: 2px solid #ccc; border-radius: 3px; padding: 15px; } 
.editBox input#id { width: 60px; margin-right: 10px; }
.editBox label { padding-right: 10px; }

/** marker icons */
.zoom-0  .cross, .zoom-0  .question, .zoom-0  .tick,
.zoom-1  .cross, .zoom-1  .question, .zoom-1  .tick,
.zoom-2  .cross, .zoom-2  .question, .zoom-2  .tick,
.zoom-3  .cross, .zoom-3  .question, .zoom-3  .tick,
.zoom-4  .cross, .zoom-4  .question, .zoom-4  .tick,
.zoom-5  .cross, .zoom-5  .question, .zoom-5  .tick,
.zoom-6  .cross, .zoom-6  .question, .zoom-6  .tick, .zoom-6  .label.detail,
.zoom-7  .cross, .zoom-7  .question, .zoom-7  .tick, .zoom-7  .label.detail,
.zoom-8  .cross, .zoom-8  .question, .zoom-8  .tick, .zoom-8  .label.detail,
.zoom-9  .cross, .zoom-9  .question, .zoom-9  .tick, .zoom-9  .label.detail,
.zoom-10 .cross, .zoom-10 .question, .zoom-10 .tick, .zoom-10 .label.detail,
.zoom-11 .cross, .zoom-11 .question, .zoom-11 .tick, .zoom-11 .label.detail { display: none } 

.zoom-0  .warning, .zoom-0  .label,
.zoom-1  .warning, .zoom-1  .label,
.zoom-2  .warning, .zoom-2  .label,
.zoom-3  .warning, .zoom-3  .label,
.zoom-4  .warning, .zoom-4  .label,
.zoom-5  .warning, .zoom-5  .label,
.zoom-6  .warning, .XXzoom-6  .label,
.zoom-7  .warning, .XXzoom-7  .label,
                   .XXzoom-8  .label { display: none }