.marker {
  background-image: url('https://www.mapbox.com/help/demos/custom-markers-gl-js/mapbox-icon.png');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  -webkit-box-shadow: 2px 2px 14px -2px rgba(0,0,0,0.1);
  -moz-box-shadow: 2px 2px 14px -2px rgba(0,0,0,0.1);
  box-shadow: 2px 2px 14px -2px rgba(0,0,0,0.1);
  transition: box-shadow 0.4s ease-in-out;
}
.marker:hover,.marker.active{
  -webkit-box-shadow: 2px 2px 14px 1px rgba(0,0,0,1);
  -moz-box-shadow: 2px 2px 14px 1px rgba(0,0,0,1);
  box-shadow: 2px 2px 14px 1px rgba(0,0,0,1);
  transition: box-shadow 0.1s ease-in-out;
}

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

.mapboxgl-popup-content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

.mapboxgl-ctrl-markers {
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Emarker-stroked-15%3C/title%3E%3Cg%3E%3Ctitle%3Ebackground%3C/title%3E%3Crect fill='none' id='canvas_background' height='32' width='32' y='-1' x='-1'/%3E%3C/g%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cpath d='m15.01872,22.45972l-0.4,-0.495c-0.973,-1.189 -4.9,-6.556 -4.9,-9.16a5.066,5.066 0 0 1 4.836,-5.286q0.222,-0.01 0.445,0a5.066,5.066 0 0 1 5.286,4.836q0.01,0.225 0,0.45c0,2.213 -2.669,6.111 -4.678,8.851l-0.589,0.804zm-0.019,-13.955a4.077,4.077 0 0 0 -4.3,4.3c0,1.832 2.759,6.038 4.286,8.034c1.25,-1.71 4.315,-5.989 4.315,-8.034a4.077,4.077 0 0 0 -4.3,-4.3l-0.001,0z' id='Layer_7'/%3E%3C/g%3E%3C/svg%3E");
}

.mapboxgl-ctrl-map {
  background-image: url('data:image/svg+xml;charset=utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="#333333%22%20viewBox=%22-10%20-10%2060%2060%22%20preserveAspectRatio=%22xMidYMid%20meet%22%3E%3Cg%3E%3Cpath%20d=%22m25%2031.640000000000004v-19.766666666666673l-10-3.511666666666663v19.766666666666666z%20m9.140000000000008-26.640000000000004q0.8599999999999923%200%200.8599999999999923%200.8600000000000003v25.156666666666666q0%200.625-0.625%200.783333333333335l-9.375%203.1999999999999993-10-3.5133333333333354-8.906666666666668%203.4383333333333326-0.2333333333333334%200.07833333333333314q-0.8616666666666664%200-0.8616666666666664-0.8599999999999994v-25.156666666666663q0-0.625%200.6233333333333331-0.7833333333333332l9.378333333333334-3.198333333333334%2010%203.5133333333333336%208.905000000000001-3.4383333333333344z%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
}

.mapboxgl-ctrl.markers input{
  padding: 5px;
}