/*
 * bootstrap includes
 * keep it at the end
 */
@keyframes pulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(0.8); }
  100% {
    transform: scale(1); } }

@keyframes fade {
  0% {
    opacity: 1; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

.mapAPI-map {
  height: 30rem;
  margin-bottom: 4rem; }

.mapboxgl-popup {
  width: 16rem;
  height: 7rem;
  font-size: 0.8rem;
  line-height: 1.2em;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  pointer-events: none;
  z-index: 4; }

.mapboxgl-popup-anchor-bottom, .mapboxgl-popup-anchor-bottom-left, .mapboxgl-popup-anchor-bottom-right {
  flex-direction: column-reverse; }

.mapboxgl-popup-content {
  min-width: 16rem;
  background: #fff;
  color: #212121;
  position: relative;
  pointer-events: auto;
  padding: 0.8rem;
  border-radius: 0.25rem;
  min-height: 5rem;
  box-shadow: 0 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.4); }

.mapboxgl-popup-close-button {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 2rem;
  padding: 0.5rem;
  border-top-right-radius: 0.25rem;
  z-index: 2; }
  .mapboxgl-popup-close-button:hover, .mapboxgl-popup-close-button:focus {
    background: #2196f3;
    color: #fff; }

.mapboxgl-popup-tip {
  width: 0;
  height: 0;
  border: 0.8rem solid transparent;
  z-index: 1; }

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
  border-top-color: #fff;
  align-self: center;
  border-bottom: none; }

.mapboxgl-marker {
  width: 30px;
  height: 30px;
  font-size: 30px;
  line-height: 1em;
  color: #2196f3;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: flex-end;
  justify-content: center; }
  .mapboxgl-marker .marker-icon,
  .mapboxgl-marker .fas,
  .mapboxgl-marker .fab,
  .mapboxgl-marker .far {
    animation: pulse 0.8s linear infinite; }

.mapboxgl-cluster {
  background: #00bcd4;
  color: #fff;
  border-radius: 100%;
  font-weight: bold;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  animation: pulse 0.8s linear infinite; }
  .mapboxgl-cluster::before, .mapboxgl-cluster::after {
    content: "";
    display: block;
    position: absolute;
    width: 140%;
    height: 140%;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background: #00bcd4;
    opacity: 0.2;
    border-radius: 100%;
    z-index: -1; }
  .mapboxgl-cluster::after {
    width: 180%;
    height: 180%; }