/*
 __  __          _____  ____   ______   __    __  __          _____  
|  \/  |   /\   |  __ \|  _ \ / __ \ \ / /   |  \/  |   /\   |  __ \ 
| \  / |  /  \  | |__) | |_) | |  | \ V /    | \  / |  /  \  | |__) |
| |\/| | / /\ \ |  ___/|  _ <| |  | |> <     | |\/| | / /\ \ |  ___/ 
| |  | |/ ____ \| |    | |_) | |__| / . \    | |  | |/ ____ \| |     
|_|  |_/_/    \_\_|    |____/ \____/_/ \_\   |_|  |_/_/    \_\_|

// CSS SPECIFIC TO MAPBOXGL

*/

#mapbox {
	width: 100%;
	height: 100%;
  overflow: unset;

  width: 100%;    /* Full width of the parent element */
  height: 100%;   /* Adjust the height as necessary */
  position: relative;

}

#mapbox,
#mapbox div:not(.avatar-marker),
.mapboxgl-map,
#mapbox .canvas {
  outline: none !important;
  border: none !important;
}

/*.mapboxgl-ctrl-top-left,*/
.mapboxgl-ctrl-top-right,
.mapboxgl-ctrl-bottom-left, 
.mapboxgl-ctrl-bottom-right {
  display: none;
}

.map-overlay {
  font: 12px/20px;
  font-family: var(--font-family);
  position: absolute;
  width: 200px;
  top: 0;
  left: 0;
  padding: 10px;
}

#mapbox canvas {
  /* THIS STRETCHES THE CANVAS. NEED TO FIND ANOTHER WAY */
  /*width: 100% !important;
  height: 100% !important;*/
}

.mapboxgl-popup-close-button {
  background-color: transparent;
  border: 0;
  border-radius: 0 3px 0 0;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  width: 15px;
  min-width: 15px;
  height: 15px;
  color: var(--brand);
}

#mapbox {
  position: relative;
  z-index: 0;
}

#mapbox > .map-wrapper {
  position: relative;
  z-index: 5;
}

#mapbox:before {
  content: '';
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  z-index: 10;
  pointer-events: none;

  -webkit-box-shadow: var(--box-shadow-inset-dark);
  -moz-box-shadow: var(--box-shadow-inset-dark);
  box-shadow: var(--box-shadow-inset-dark);
}

#cluster-count { border-radius: 50% !important; }



#compass {

  color: var(--brand);
  position: absolute;
  top: 30px;
  left: 30px;
  transition: var(--transition);
  cursor: pointer;
  
/*        opacity: 0;*/

  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);


  /*
  -ms-transform: translateY(-110px);
      transform: translateY(-110px); */

  /*transform-origin: bottom;
  transform: translateY(-110px) rotate(-45deg);*/

  z-index: 2;

  background-color: var(--white);
  border-radius: 50%;
  

}
#mapbox:hover + #compass,
#compass:hover {

  /*-ms-transform: translateY(-0px);
      transform: translateY(-0px) rotate(-45deg);
  opacity: 1;*/

}


#pitch {
  /* Basic reset of appearance */
  width: 0px;
  height: 175px;
  /* padding: 0 5px; */
  /* -webkit-appearance: none; */
  /* appearance: none; */
  /* height: 1px; */
  transform: rotate(180deg);
  /* transform-origin: bottom left; */
  /* background: red; */
  /* outline: none; */
  /* z-index: 99; */
  position: absolute;
  top: 200px;
  left: 30px;
  writing-mode: vertical-lr;
  direction: rtl;
}

#pitch::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;  /* Width of the thumb */
    height: 10px; /* Height of the thumb */
    background: var(--brand); /* Color of the thumb */
    cursor: pointer;
}

#pitch::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: var(--brand);
  cursor: pointer;
}





.map-overlay {
  font:
      12px/20px 'Helvetica Neue',
      Arial,
      Helvetica,
      sans-serif;
  position: absolute;
  width: 200px;
  top: 0;
  left: 0;
  padding: 10px;
}

.map-overlay .map-overlay-inner {
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
}

.map-overlay-inner fieldset {
    display: flex;
    justify-content: space-between;
    border: none;
}

    .map-overlay-inner label {
      font-weight: bold;
      margin-right: 10px;
    }

    .map-overlay-inner .select-fieldset {
        display: block;
    }

    .map-overlay-inner .select-fieldset label {
        display: block;
        margin-bottom: 5px;
    }

    .map-overlay-inner .select-fieldset select {
      width: 100%;
    }

    .card-body { 
/*      display:none !important; */
    }

    .isotope-gridz .card {
      margin: 15px 0px;
    }

    .mapboxgl-popup {

      padding: 0;
      margin: 0;
      border-radius: var(--border-radius) !important;
      box-shadow: var(--box-shadow) !important;

    }

    body.theme-round .mapboxgl-popup {
      border-radius: var(--theme-round-border-radius);
      
    }

    .mapboxgl-popup {
      box-shadow: none !important;
    }

    .mapboxgl-popup-content {
      padding: 0 !important;
      margin: 0;

      border-radius: var(--border-radius) !important;
      box-shadow: none !important;
    }



    .mapboxgl-popup-content .card {

      margin: 0;
    }

    .mapboxgl-popup-content .card-header {

      padding: 0px;
    }


    body.theme-round .mapboxgl-popup-content {

      border-radius: var(--theme-round-border-radius) !important;
    
    }

    /*.mapboxgl-popup-tip {
      display: none !important;
    }*/