#map {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #807A80;
}

#parentcategory:hover {
  cursor: pointer;
}

.mapboxgl-marker:not(.custom-marker) {
  background-image: url("../../images/mappin.svg");
  background-size: contain;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.mapboxgl-marker:not(.custom-marker):hover {
  background-image: url("../../images/mappinactive.svg");
}

#marker {
  transition: all 0.2s;
}

#marker svg {
  stroke: #e3dfd9;
}

.mapboxgl-marker {
  cursor: pointer;
  transition: filter 0.3s;
  animation: fadeIn 0.5s forwards;
}

.mapboxgl-marker.highlight {
  filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.5));
}

.mapboxgl-marker.hidden {
  animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#marker:hover {
  margin: 10px 0 0 0;
}

.mapboxgl-popup {
  max-width: 200px;
}

.mapboxgl-ctrl-fullscreen {
  background: #ded9d2 url("../../images/fullscreen.svg");
  background-size: cover;
}

.mapboxgl-ctrl-shrink {
  background: #ded9d2 url("../../images/shrink.svg");
  background-size: cover;
}

.mapboxgl-ctrl-group:not(:empty) {
  box-shadow: none !important;
}

/* sidebar */
.rounded-rect, .mapboxgl-ctrl-group {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0.25em 0.25em rgba(211, 205, 195, 0.75);
}

.flex-center {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center.left {
  left: 0px;
}

.flex-center.right {
  right: 0px;
}

.sidebar-content {
  position: absolute;
  width: 95%;
  height: 75%;
  color: #666167;
}

.sidebar-toggle {
  position: absolute;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar-toggle.left {
  right: -3.5em;
}

.sidebar-toggle:hover {
  color: #e48965;
  cursor: pointer;
}

.sidebar {
  transition: transform 1s;
  z-index: 1;
  width: 300px;
  height: 100%;
}

/*
The sidebar styling has them "expanded" by default, we use CSS transforms to push them offscreen
The toggleSidebar() function removes this class from the element in order to expand it.
*/
.left.collapsed {
  transform: translateX(-295px);
}

.custom-marker {
  background-color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0px 3px 5px #666;
  border: 4px solid #c66e4c;
  animation: pointload 1s;
}

@keyframes pointload {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    width: 25px;
    height: 25px;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    width: 18px;
    height: 18px;
  }
}
.mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right {
  display: none !important;
}/*# sourceMappingURL=map.css.map */