#routebuilder-map {
  width: 98%;
  height: 800px;
  margin-top: 15px;
  left: 1%;
}

.flex-div-col, .routebuilder-overlay {
  display: flex;
  flex-direction: column;
}

.flex-div-row, .editing-route-subsection, .routebuilder-button {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.routebuilder-overlay {
  position: absolute;
  padding: 20px 40px;
  border-radius: 20px;
  background: var(--color-neutral-white);
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 25%);
  color: var(--color-neutral-black);
}

.routebuilder-centered-overlay {
  width: 590px;
  top: calc(4% + var(--navbar-height) + 15px); /* 2% + navbar height + map margin-top */
  left: calc(50% - 295px); /* 50% - width/2 */
}

.routebuilder-h1 {
  font-size: 22px;
  font-weight: 700;
  line-height: 28px; /* 127.273% */
}

.routebuilder-h2 {
  font-size: 16px;
}

#routebuilder-intro-instruction {
  color: #236EE0;
  font-weight: 800;
  padding-top: 16px;
}

#creating-route-overlay {
  visibility: hidden; /* Show once the first street has been selected. */
  top: calc(2% + var(--navbar-height) + 15px); /* 2% + navbar height + map margin-top */
  right: 3%;
  width: 320px;
  gap: 16px;
}

#route-length-val {
  font-size: 36px;
  line-height: 44px; /* 122.222% */
}

#line-divider {
  height: 1px;
  background: #b6b6b6;
}

#editing-route-section {
  gap: 12px;
}

.editing-route-subsection {
  gap: 12px;
}

.editing-route-icon {
  width: 48px;
  height: 48px;
}

.editing-route-subsection-content {
  flex: 1 0 0;
}

#creating-route-buttons {
  gap: 12px;
}

.routebuilder-button {
  height: 30px;
  padding: 8px 13px;
  font-size: 13px;
  border-radius: 6px;
}

.blue-button {
  background: #236EE0;
  color: var(--color-neutral-white);
  border: 1.5px solid #236EE0;
}

.white-button {
  background: var(--color-neutral-white);
  color: var(--color-asphalt-500);
  border: 1.5px solid #525252;
}

.routebuilder-overlay-backdrop {
  visibility: hidden; /* Show using JS at the appropriate times. */
  height: calc(var(--navbar-height) + 865px); /* navbar height + map height and margin + filler */
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgb(0 0 0 / 10%);
  z-index: 2;
}

#delete-route-modal {
  align-items: center;
  gap: 24px;
}

#route-saved-modal {
  gap: 24px;
}

#route-saved-title-section, #delete-route-title-section {
  padding-top: 8px;
  align-items: center;
  gap: 12px;
}

#route-saved-explore-title {
  align-self: stretch;
}

#route-saved-buttons, #delete-route-buttons {
  gap: 12px;
  justify-content: center;
}

#route-saved-share-section {
  gap: 8px;
}

#share-route-subsection {
  padding: 10px 20px;
  border-radius: 10px;
  background: #F2F2F2;
}

#share-route-link {
  flex: 1 0 0;
  color: #5F5F5F;
  font-size: 12px;
}

#copy-link-button {
  padding: 4px 8px;
  font-size: 12px;
}

#route-saved-share-warnings {
  color: var(--color-label-surface-problem);
  font-weight: 600;
}

.marker-start, .marker-end {
  width: 27px;
  height: 27px;
}

.marker-start {
  background-image: url("/assets/images/icons/routebuilder/start-point.png");
}

.marker-end {
  background-image: url("/assets/images/icons/routebuilder/end-point.png");
}

.marker-number {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  color: var(--color-neutral-white);
  text-align: center;
  font-family: Roboto, serif;
  font-weight: 900;
}

/* Overwriting Mapbox popup styling. */
.mapboxgl-popup-content {
  padding: 10px; /* Default 10px 10px 15px */
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 25%); /* Default 0 1px 2px rgb(0 0 0/10%) */
  border-radius: 10px; /* Default 3px */
}

.tooltip-no-outline {
  background: none;
  box-shadow: none;
  padding: 10px;
}