/* reset parent custom icon div */
.custom-marker-div-icon-reset {
  width: auto !important;
  height: auto !important;
  border: 0;
  background-color: transparent;
}

/* styles for clustering */
.marker-cluster {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  aspect-ratio: 1 / 1;
  padding: 8px;
  color: #fff;
  border: 0;
  border-radius: 100%;
  /* copied from typography.ts */
  font-family: "L10-Web", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "sans-serif", "L10-Web";
  font-size: 0.8125rem; /* rem(13) */
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem; /* rem(20) */
}

/*
  two layers for vehicle start icon:
  1. start-outer is white border and shadow
  2. start is car shape clip (background color applied dynamically)
*/
.map-marker-vehicle-start-outer {
  display: block;
  width: 21px;
  height: 21px;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 21px;
  background-image: url("data:image/svg+xml,%3csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg filter='url(%23filter0_d)'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.08993 0.124901C6.33576 0.124704 5.60064 0.361846 4.98874 0.802741ZM4.98874 0.802741C4.37667 1.24376 3.91897 1.86625 3.68051 2.58197L2.24392 6.89208L2.22516 6.96737C2.17757 7.15839 2.14604 7.35306 2.13091 7.54934L2.125 7.62607V14.078C2.125 14.8198 2.41967 15.5312 2.94418 16.0557C3.4687 16.5802 4.1801 16.8749 4.92188 16.8749H5.71875C6.46053 16.8749 7.17192 16.5802 7.69644 16.0557C8.12424 15.6279 8.39914 15.0758 8.48598 14.4843H12.514C12.6009 15.0758 12.8758 15.6279 13.3036 16.0557C13.8281 16.5802 14.5395 16.8749 15.2812 16.8749H16.0781C16.8199 16.8749 17.5313 16.5802 18.0558 16.0557C18.5803 15.5312 18.875 14.8198 18.875 14.078V7.62597L18.8691 7.54915C18.8539 7.35289 18.8224 7.15822 18.7748 6.96718L18.756 6.89199L17.3196 2.58249C17.0812 1.86678 16.6233 1.24377 16.0113 0.802757C15.3994 0.361857 14.6642 0.124709 13.9101 0.124901H7.08993' fill='white'/%3e %3c/g%3e %3cdefs%3e %3cfilter id='filter0_d' x='0.125' y='0.124901' width='20.75' height='20.75' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e %3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e %3cfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e %3cfeMorphology radius='1' operator='erode' in='SourceAlpha' result='effect1_dropShadow'/%3e %3cfeOffset dy='2'/%3e %3cfeGaussianBlur stdDeviation='1.5'/%3e %3cfeColorMatrix type='matrix' values='0 0 0 0 0.0614706 0 0 0 0 0.0671863 0 0 0 0 0.0679412 0 0 0 0.34 0'/%3e %3cfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3e %3cfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3e %3c/filter%3e %3c/defs%3e %3c/svg%3e");
  transform: translate(-50%, -50%)
}
.map-marker-vehicle-start {
  display: block;
  width: 17px;
  height: 17px;
  margin: 2px;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.8341 7.45089L13.4221 3.21438C13.3164 2.897 13.1135 2.62096 12.8421 2.4254C12.5707 2.22985 12.2446 2.12471 11.9101 2.1249H5.08993C4.75542 2.1247 4.42933 2.22984 4.15793 2.4254C3.88652 2.62095 3.68358 2.897 3.57789 3.21438L2.16583 7.45089C2.14521 7.53365 2.13155 7.61799 2.125 7.70303V14.078C2.125 14.2894 2.20896 14.4921 2.3584 14.6415C2.50784 14.7909 2.71053 14.8749 2.92188 14.8749H3.71875C3.93009 14.8749 4.13278 14.7909 4.28223 14.6415C4.43167 14.4921 4.51562 14.2894 4.51562 14.078V12.4843H12.4844V14.078C12.4844 14.2894 12.5683 14.4921 12.7178 14.6415C12.8672 14.7909 13.0699 14.8749 13.2812 14.8749H14.0781C14.2895 14.8749 14.4922 14.7909 14.6416 14.6415C14.791 14.4921 14.875 14.2894 14.875 14.078V7.70303C14.8684 7.61799 14.8548 7.53365 14.8341 7.45089ZM5.08993 3.71865H11.9101L12.9725 6.90615H4.02755L5.08993 3.71865ZM3.71875 8.83C3.71875 8.64775 3.8665 8.5 4.04875 8.5H5.77938C5.96163 8.5 6.10938 8.64775 6.10938 8.83V9.76375C6.10938 9.946 5.96163 10.0938 5.77938 10.0938H4.04875C3.8665 10.0938 3.71875 9.946 3.71875 9.76375V8.83ZM11.2206 8.5C11.0384 8.5 10.8906 8.64775 10.8906 8.83V9.76375C10.8906 9.946 11.0384 10.0938 11.2206 10.0938H12.9513C13.1335 10.0938 13.2812 9.946 13.2812 9.76375V8.83C13.2812 8.64775 13.1335 8.5 12.9513 8.5H11.2206Z' fill='%23FFFFFF'/%3e %3c/svg%3e");
}

/* background color passed dynamically */
.map-marker-vehicle-end {
  display: block;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  box-shadow: 0 2px 3px -1px rgba(15, 17, 17, 0.34);
}

/*
  Popup custom styling (style overrides +
  some duplicate styles for context)
*/

/* dropshadow */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  box-shadow:
    0 0 2px 0 rgba(16, 17, 17, 0.34),
    0 2px 16px -4px rgb(16, 17, 17, 0.16) !important;
}

.leaflet-popup-content-wrapper {
  padding: 0 !important;
  border-radius: 3px !important;
}

/* inner content */
.leaflet-popup-content {
  margin: 0 !important;
  padding: 8px 16px 8px 12px !important;

}
.leaflet-popup-content p {
  margin: 0 !important;
}

/* stop annotation */
.map-stop-annotation {
  box-shadow: 0px 2px 3px -1px rgba(16, 17, 17, 0.34);
  display: flex;
  color: white;
  position: relative;
  align-items: center;
  border: 2px solid white;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 12px;
  font-family: "L10";
  font-weight: 600;
  width: auto !important;
  height: 25px !important;
  white-space: nowrap;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.map-stop-annotation-inner {
  border-radius: 3px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 6px;
}

.map-stop-annotation-divider {
  height: 25px;
  width: 1px;
  background: white;
  margin: 0 6px;
  box-shadow: 0.5px 0 0 0 #fff;
}

/* close icon */
.leaflet-popup-close-button {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  position: absolute;
  right: 2px !important;
  top: 2px !important;
  overflow: hidden !important;
  text-indent: -9999px !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 12px !important;
  background-image: url("data:image/svg+xml,%3csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.4934 3.30659C2.26885 3.08203 2.26885 2.71796 2.4934 2.49341C2.71795 2.26886 3.08202 2.26886 3.30657 2.49341L5.99999 5.18683L8.6934 2.49341C8.91795 2.26886 9.28202 2.26886 9.50657 2.49341C9.73113 2.71796 9.73113 3.08203 9.50657 3.30659L6.81316 6L9.50657 8.69341C9.73113 8.91796 9.73113 9.28203 9.50657 9.50658C9.28202 9.73114 8.91795 9.73114 8.6934 9.50658L5.99999 6.81317L3.30657 9.50658C3.08202 9.73114 2.71795 9.73114 2.4934 9.50658C2.26885 9.28203 2.26885 8.91796 2.4934 8.69341L5.18682 6L2.4934 3.30659Z' fill='black'/%3e %3c/svg%3e") !important;
  opacity: 0.5 !important;
}
.leaflet-popup-close-button:hover {
  opacity: 0.92 !important;
}
.leaflet-popup-close-button:active {
  opacity: 1.0 !important;
}
.leaflet-popup-close-button:focus-visible {
  opacity: 0.92 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px #02e1f8 !important;
}

/* bottom triangle arrow container */
.leaflet-popup-tip-container {
  width: 16px !important;
  height: 8px !important;
  margin-top: -1px !important;
  margin-left: -8px !important;
  position: absolute;
  left: 50%;
}
/* bottom triangle arrow shape */
.leaflet-popup-tip {
  width: 8px !important;
  height: 8px !important;
  margin-top: -4px !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  padding: 0 !important;
}

/* custom scrollbar */
.leaflet-popup-scrolled {
  border: 0 !important;
  /* firefox */
  scrollbar-width: thin;
  /* thumb track */
  scrollbar-color: #abafaf transparent;
}
/* chrome, edge */
.leaflet-popup-scrolled::-webkit-scrollbar {
  width: 12px;
  background-color: transparent;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");
  background-repeat: repeat;
  background-size: 100% auto;
}
.leaflet-popup-scrolled::-webkit-scrollbar-track {
  border: 3px solid transparent;
  background: transparent;
}
.leaflet-popup-scrolled::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 6px;
  box-shadow: inset 0 0 0 3px #abafaf;
}

/*
  disable popup animation
  this was done so that when the active popup pane is
  removed and redrawn because of the clustering algorithm
  the action is impercetible
*/
.leaflet-popup {
  transition: none !important;
}