@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css";

$background-color : #f8f9fa ;

html, body, #container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  padding-top: 50px;
}

#map {
  // padding-top: 80px;
  width: inherit;
  height: inherit;
}

h1, h2, h3, h4, h5 ,h6 {
  font-weight: bold;
}

p, ul, ol, pre, blockquote {
  margin-bottom: 1em;
}

.navbar .navbar-light {
 max-height: 50px;
}

.navbar-light .navbar-toggler-icon{
  font-size: 15px !important;
}


.navbar-light .navbar-brand {
  font-weight: bold;
  text-transform: uppercase;
}

.navbar-light .bg-light {
  background-color: $background-color;
}

.footer {
  background-color: $background-color;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

.footer p {
  font-size: 11px;
}

/* Leaflet fullscreen */
$assetPath : "images";
.leaflet-control-fullscreen a {
  background: #fff url(#{$assetPath}/fullscreen.png) no-repeat 0 0;
  background-size: 26px 52px;
}

.leaflet-touch .leaflet-control-fullscreen a {
  background-position: 2px 2px;
}

.leaflet-fullscreen-on .leaflet-control-fullscreen a {
  background-position: 0 -26px;
}

.leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a {
  background-position: 2px -24px;
}

/* Do not combine these two rules; IE will break. */

.leaflet-container {
  &:-webkit-full-screen, &.leaflet-fullscreen-on {
    width: 100% !important;
    height: 100% !important;
  }
}

.leaflet-pseudo-fullscreen {
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 99999;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .leaflet-control-fullscreen a {
    background-image: url(#{$assetPath}/fullscreen@2x.png);
  }
}