* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -ms-content-zooming: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  background-color: #000;
  color: #fff;
}

a, a:hover, a:active, a:visited {
  text-decoration: none;
  color: inherit;
}

#pano {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.debug-center-crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 20;
  background:
    radial-gradient(circle at center,
      rgba(255, 32, 32, 0.95) 0 3px,
      rgba(255, 255, 255, 0.92) 3px 5px,
      transparent 5px 12px);
}

.debug-center-crosshair:before,
.debug-center-crosshair:after {
  content: "";
  position: absolute;
  background: rgba(255, 32, 32, 0.92);
  box-shadow:
    0 0 2px rgba(255, 255, 255, 0.95),
    0 0 5px rgba(0, 0, 0, 0.75);
}

.debug-center-crosshair:before {
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.debug-center-crosshair:after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

/* Roadview Debug Mode */

.roadview-debug-hotspot {
  position: relative;
  width: 72px;
  height: 72px;
  margin-left: -36px;
  margin-top: -36px;
  pointer-events: none;
  z-index: 15;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.65));
}

.roadview-debug-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 42px solid rgba(45, 126, 255, 0.92);
  transform: translate(-50%, -58%);
}

.roadview-debug-hotspot-b .roadview-debug-arrow {
  border-bottom-color: rgba(255, 145, 33, 0.94);
}

.roadview-debug-formula {
  position: absolute;
  left: -12px;
  top: 18px;
  width: 24px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.roadview-debug-label {
  position: absolute;
  left: 50%;
  top: 48px;
  min-width: 40px;
  max-width: 190px;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(8, 14, 24, 0.82);
  color: #fff;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

#titleBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 40px;
  height: 40px;
  text-align: center;
}

.mobile #titleBar {
  height: 50px;
  right: 50px;
}

/* If there is a fullscreen button the title bar must make space for it */
body.fullscreen-enabled #titleBar {
  right: 80px;
}

body.fullscreen-enabled.mobile #titleBar {
  right: 100px;
}

/* If there are multiple scenes the title bar must make space for the scene list toggle */
body.multiple-scenes #titleBar {
  left: 40px;
}

body.multiple-scenes.mobile #titleBar {
  left: 50px;
}

#titleBar .sceneName {
  width: 100%;
  height: 100%;
  line-height: 30px;
  padding: 5px;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

body.roadview-mode:not(.debug-mode) #titleBar .sceneName {
  display: none;
}

.mobile #titleBar .sceneName {
  line-height: 40px;
}

#fullscreenToggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #fullscreenToggle {
  width: 50px;
  height: 50px;
}

body.fullscreen-enabled #fullscreenToggle {
  display: block;
}

body.roadview-mode #fullscreenToggle {
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), transparent 38%),
    rgba(8, 14, 24, 0.62);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.roadview-mode #fullscreenToggle:before,
body.roadview-mode #fullscreenToggle:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 246, 206, 0.94);
  border-radius: 4px;
  transition:
    left 0.14s ease,
    top 0.14s ease,
    width 0.14s ease,
    height 0.14s ease,
    opacity 0.14s ease;
}

body.roadview-mode #fullscreenToggle:after {
  left: 15px;
  top: 15px;
  width: 8px;
  height: 8px;
  opacity: 0.58;
}

body.roadview-mode #fullscreenToggle.enabled:before {
  left: 14px;
  top: 14px;
  width: 10px;
  height: 10px;
}

body.roadview-mode #fullscreenToggle.enabled:after {
  left: 10px;
  top: 10px;
  width: 16px;
  height: 16px;
}

#fullscreenToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

body.roadview-mode #fullscreenToggle .icon {
  opacity: 0;
}

.mobile #fullscreenToggle .icon {
  top: 10px;
  right: 10px;
}

#fullscreenToggle .icon.on {
  display: none;
}

#fullscreenToggle .icon.off {
  display: block;
}

#fullscreenToggle.enabled .icon.on {
  display: block;
}

#fullscreenToggle.enabled .icon.off {
  display: none;
}

#autorotateToggle {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #autorotateToggle {
  width: 50px;
  height: 50px;
}

/* If there is a fullscreen button, autorotate must placed a bit to the left */
body.fullscreen-enabled #autorotateToggle {
  right: 40px;
}

body.fullscreen-enabled.mobile #autorotateToggle {
  right: 50px;
}

#autorotateToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #autorotateToggle .icon {
  top: 10px;
  right: 10px;
}

#autorotateToggle .icon.on {
  display: none;
}

#autorotateToggle .icon.off {
  display: block;
}

#autorotateToggle.enabled .icon.on {
  display: block;
}

#autorotateToggle.enabled .icon.off {
  display: none;
}

body.roadview-mode:not(.debug-mode) #autorotateToggle {
  display: none;
}

#sceneListToggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #sceneListToggle {
  width: 50px;
  height: 50px;
}

#sceneListToggle .text {
  position: absolute;
  top: 5px;
  left: 15px;
  width: 100%;
  line-height: 30px;
}

#sceneListToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #sceneListToggle .icon {
  top: 10px;
  right: 10px;
}

#sceneListToggle .icon.on {
  display: none;
}

#sceneListToggle .icon.off {
  display: block;
}

#sceneListToggle.enabled .icon.on {
  display: block;
}

#sceneListToggle.enabled .icon.off {
  display: none;
}

#sceneList {
  position: absolute;
  top: 0;
  left: -220px;
  padding-top: 40px;
  width: 220px;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: 0;
  -webkit-transition: margin-left 0.5s ease-in-out;
  transition: margin-left 0.5s ease-in-out;
}

body.debug-mode:not(.mobile) #sceneList {
  left: -300px;
  width: 300px;
}

.mobile #sceneList {
  padding-top: 50px;
}

#sceneList .scenes {
  width: 100%;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
}

.mobile #sceneList {
  width: 100%;
  height: 100%;
  left: -100%;
}

.mobile #sceneList.enabled {
  margin-left: 100%;
}

.mobile #sceneList .scenes {
  height: 100%;
}

#sceneList.enabled {
  margin-left: 220px;
}

body.debug-mode:not(.mobile) #sceneList.enabled {
  margin-left: 300px;
}

#sceneList .scene {
  display: block;
  width: 100%;
  height: 30px;
}

.mobile #sceneList .scene {
  height: 40px;
}

#sceneList .scene .text {
  width: 100%;
  height: 100%;
  padding: 0 15px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile #sceneList .scene .text {
  line-height: 40px;
}

.no-touch #sceneList .scene:hover {
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

#sceneList .scene.current {
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

/* Hide scene list when only a single scene exists */
body.single-scene #sceneList, body.single-scene #sceneListToggle {
  display: none;
}

body.roadview-mode:not(.debug-mode) #sceneList,
body.roadview-mode:not(.debug-mode) #sceneListToggle {
  display: none;
}

/* Roadview MiniMap Scene Selector */

.roadview-minimap {
  position: fixed;
  left: 16px;
  top: 16px;
  width: 220px;
  height: 154px;
  border: 1px solid rgba(221, 236, 246, 0.34);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(244, 248, 251, 0.22), rgba(73, 88, 99, 0.28)),
    rgba(45, 53, 60, 0.82);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  overflow: hidden;
  pointer-events: auto;
  z-index: 28;
}

.roadview-minimap.is-expanded {
  width: min(820px, 58vw, calc(100vw - 32px));
  height: min(620px, 58vh, calc(100vh - 32px));
}

.roadview-minimap.is-resizing {
  transition: none;
}

body.debug-mode:not(.mobile) .roadview-minimap {
  left: 316px;
}

.roadview-minimap-kakao-layer {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.roadview-minimap-kakao-layer * {
  cursor: grab;
}

.roadview-minimap-kakao-layer:active,
.roadview-minimap-kakao-layer:active * {
  cursor: grabbing;
}

.roadview-minimap[data-roadview-map-provider="kakao"] .roadview-minimap-kakao-layer {
  display: block;
}

.roadview-minimap-kakao-links {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}

.roadview-minimap[data-roadview-map-provider="kakao"] .roadview-minimap-kakao-links {
  display: block;
}

.roadview-minimap-kakao-link {
  stroke: rgba(229, 57, 53, 0.48);
  stroke-width: 2;
  stroke-linecap: round;
  transition:
    opacity 0.14s ease,
    stroke 0.14s ease,
    stroke-width 0.14s ease;
}

.roadview-minimap-kakao-link.is-current-link {
  stroke: rgba(255, 214, 80, 0.96);
  stroke-width: 4;
}

.roadview-minimap-kakao-link[data-roadview-line-hidden="true"] {
  opacity: 0;
}

.roadview-minimap.is-resizing .roadview-minimap-kakao-layer {
  pointer-events: none;
}

.roadview-minimap[data-roadview-map-provider="kakao"] .roadview-minimap-svg {
  opacity: 0;
  pointer-events: none;
}

.roadview-minimap-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.roadview-minimap-size-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.22), transparent 42%),
    rgba(8, 14, 24, 0.82);
  color: #fff4c2;
  cursor: pointer;
  font-size: 22px;
  font-weight: 800;
  line-height: 28px;
  text-align: center;
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.roadview-minimap-size-toggle:focus-visible,
.no-touch .roadview-minimap-size-toggle:hover {
  border-color: rgba(255, 224, 111, 0.72);
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.34),
    0 0 0 3px rgba(255, 214, 80, 0.2);
}

.roadview-minimap-size-icon {
  position: absolute;
  inset: 0;
}

.roadview-minimap-size-icon-collapse {
  display: none;
  line-height: 26px;
}

.roadview-minimap.is-expanded .roadview-minimap-size-icon-expand {
  display: none;
}

.roadview-minimap.is-expanded .roadview-minimap-size-icon-collapse {
  display: block;
}

.roadview-minimap-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 6;
  width: 46px;
  height: 46px;
  cursor: nwse-resize;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 39%, rgba(255, 255, 255, 0.3) 40% 45%, transparent 46%),
    linear-gradient(135deg, transparent 0 54%, rgba(255, 214, 80, 0.9) 55% 61%, transparent 62%),
    linear-gradient(135deg, transparent 0 69%, rgba(255, 214, 80, 0.74) 70% 76%, transparent 77%),
    radial-gradient(circle at 100% 100%, rgba(8, 14, 24, 0.68), rgba(8, 14, 24, 0) 64%);
}

.roadview-minimap-resize-handle:before {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 18px;
  height: 18px;
  border-right: 3px solid rgba(255, 246, 206, 0.96);
  border-bottom: 3px solid rgba(255, 246, 206, 0.96);
  border-radius: 0 0 8px 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.roadview-minimap-resize-handle:after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 30px;
  height: 30px;
  border-right: 1px solid rgba(255, 214, 80, 0.72);
  border-bottom: 1px solid rgba(255, 214, 80, 0.72);
  border-radius: 0 0 10px 0;
}

.roadview-minimap-resize-handle:focus-visible,
.no-touch .roadview-minimap-resize-handle:hover {
  background:
    linear-gradient(135deg, transparent 0 39%, rgba(255, 255, 255, 0.42) 40% 45%, transparent 46%),
    linear-gradient(135deg, transparent 0 54%, rgba(255, 225, 90, 1) 55% 61%, transparent 62%),
    linear-gradient(135deg, transparent 0 69%, rgba(255, 225, 90, 0.88) 70% 76%, transparent 77%),
    radial-gradient(circle at 100% 100%, rgba(8, 14, 24, 0.82), rgba(8, 14, 24, 0) 68%);
}

.roadview-minimap-context-menu {
  position: absolute;
  z-index: 7;
  min-width: 132px;
  padding: 6px;
  border: 1px solid rgba(255, 225, 118, 0.46);
  border-radius: 8px;
  background: rgba(8, 14, 24, 0.92);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.roadview-minimap-context-menu[hidden] {
  display: none;
}

.roadview-minimap-context-menu-button {
  display: block;
  width: 100%;
  min-height: 30px;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff7d7;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.roadview-minimap-context-menu-button:focus-visible,
.no-touch .roadview-minimap-context-menu-button:hover {
  background: rgba(255, 214, 80, 0.18);
  color: #ffffff;
}

.roadview-minimap-background {
  fill: rgba(62, 71, 78, 0.76);
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
}

.roadview-minimap-grid line {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-dasharray: 3 5;
  stroke-linecap: round;
}

.roadview-minimap-links {
  pointer-events: none;
}

.roadview-minimap-link {
  stroke: rgba(229, 57, 53, 0.48);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition:
    opacity 0.14s ease,
    stroke 0.14s ease,
    stroke-width 0.14s ease;
}

.roadview-minimap-link.is-current-link {
  stroke: rgba(255, 214, 80, 0.96);
  stroke-width: 3.4;
}

.roadview-minimap-link.is-linked-from-current {
  stroke: rgba(255, 214, 80, 0.96);
  stroke-dasharray: none;
}

.roadview-minimap-point {
  cursor: pointer;
  outline: none;
}

.roadview-minimap-point-halo,
.roadview-minimap-point-dot {
  vector-effect: non-scaling-stroke;
}

.roadview-minimap-point-halo {
  fill: rgba(255, 222, 98, 0);
  stroke: rgba(255, 222, 98, 0);
  stroke-width: 2;
  transition:
    fill 0.14s ease,
    stroke 0.14s ease,
    opacity 0.14s ease;
}

.roadview-minimap-point-dot {
  fill: #62d2ff;
  stroke: #f5fbff;
  stroke-width: 2;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  transition:
    fill 0.14s ease,
    stroke 0.14s ease,
    stroke-width 0.14s ease,
    filter 0.14s ease,
    opacity 0.14s ease;
}

.roadview-minimap-point.is-estimated .roadview-minimap-point-dot {
  fill: rgba(128, 217, 255, 0.64);
  stroke: rgba(245, 251, 255, 0.78);
  stroke-dasharray: 2 2;
}

.roadview-minimap-point.is-verified .roadview-minimap-point-dot {
  fill: #7de2a6;
  stroke: #f7fff9;
}

.roadview-minimap-point.is-current .roadview-minimap-point-halo,
.roadview-minimap-point:focus-visible .roadview-minimap-point-halo,
.no-touch .roadview-minimap-point:hover .roadview-minimap-point-halo {
  fill: rgba(255, 222, 98, 0.18);
  stroke: rgba(255, 230, 135, 0.95);
}

.roadview-minimap-point.is-current .roadview-minimap-point-dot {
  fill: #ffda5e;
  stroke: #fff8d8;
  stroke-width: 3;
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 8px rgba(255, 218, 94, 0.52));
}

.roadview-minimap-point.is-linked-from-current .roadview-minimap-point-dot {
  stroke: #ffe17a;
  stroke-width: 3;
}

.roadview-minimap-point-flag-pole,
.roadview-minimap-point-flag-cloth {
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.roadview-minimap-point-flag-pole {
  stroke: #7a4a27;
  stroke-linecap: round;
  stroke-width: 1.2;
}

.roadview-minimap-point-flag-cloth {
  fill: #f04d46;
  stroke: #fff4c2;
  stroke-linejoin: round;
  stroke-width: 0.7;
}

.no-touch .roadview-minimap-point:hover .roadview-minimap-point-dot,
.roadview-minimap-point:focus-visible .roadview-minimap-point-dot {
  stroke: #fff1a8;
  stroke-width: 3.5;
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 7px rgba(255, 228, 125, 0.5));
}

.roadview-kakao-minimap-marker {
  display: block;
  position: relative;
  width: 17px;
  height: 17px;
  margin: 0;
  padding: 0;
  border: 2px solid #f7fff9;
  border-radius: 50%;
  background: #7de2a6;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.38),
    0 0 0 3px rgba(17, 30, 36, 0.24);
  cursor: pointer;
  outline: none;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    opacity 0.14s ease;
}

.roadview-minimap-marker-flag {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 12px;
  pointer-events: none;
  transform: translate(-43%, -58%);
}

.roadview-minimap-marker-flag:before,
.roadview-minimap-marker-flag:after {
  content: "";
  position: absolute;
  display: block;
}

.roadview-minimap-marker-flag:before {
  left: 2px;
  top: 2px;
  width: 1.5px;
  height: 10px;
  border-radius: 999px;
  background: #7a4a27;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.45);
}

.roadview-minimap-marker-flag:after {
  left: 3px;
  top: 2px;
  width: 7px;
  height: 5px;
  border: 1px solid rgba(255, 244, 194, 0.82);
  border-left: 0;
  border-radius: 1px 4px 4px 0;
  background: #f04d46;
  clip-path: polygon(0 0, 100% 12%, 78% 50%, 100% 88%, 0 78%);
  box-shadow: 0 1px 2px rgba(73, 28, 25, 0.18);
}

.roadview-minimap-kakao-layer .roadview-kakao-minimap-marker,
.roadview-minimap-kakao-layer .roadview-kakao-minimap-marker * {
  cursor: pointer;
}

.roadview-kakao-minimap-marker.is-estimated {
  border-color: rgba(245, 251, 255, 0.78);
  border-style: dashed;
  background: rgba(128, 217, 255, 0.78);
}

.roadview-kakao-minimap-marker.is-current {
  border-color: #fff8d8;
  background: #ffda5e;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 0 0 5px rgba(255, 218, 94, 0.22),
    0 0 12px rgba(255, 218, 94, 0.58);
}

.roadview-kakao-minimap-marker.is-linked-from-current {
  border-color: #ffe17a;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.38),
    0 0 0 4px rgba(255, 214, 80, 0.2);
}

.no-touch .roadview-kakao-minimap-marker:hover,
.roadview-kakao-minimap-marker:focus-visible {
  border-color: #fff1a8;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 0 0 5px rgba(255, 228, 125, 0.24),
    0 0 10px rgba(255, 228, 125, 0.55);
}

/* Link hotspot */

.link-hotspot {
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  opacity: 0.9;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.no-touch .link-hotspot:hover {
  opacity: 1;
}

body.scene-transitioning .link-hotspot,
body.scene-transitioning .viewControlButton {
  pointer-events: none;
}

body.scene-transitioning .link-hotspot {
  opacity: 0.45;
}

body.scene-transitioning .link-hotspot.link-hotspot-transition-source {
  visibility: hidden;
  opacity: 0;
}

.mobile .link-hotspot {
  width: 70px;
  height: 70px;
}

.link-hotspot-icon {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.link-hotspot-tooltip {
  position: absolute;
  left: 100%;
  top: 14px; /* ( 60 - (16 + 2*8) ) / 2 */

  margin-left: 3px;

  font-size: 16px;

  max-width: 300px;

  padding: 8px 10px;

  border-radius: 5px;

  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);

  color: #fff;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  cursor: pointer;

  opacity: 0;

  -ms-transform: translateX(-8px);
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);

  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      opacity 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              opacity 0.3s;
}

.mobile .link-hotspot {
  top: 19px; /* ( 70 - (16 + 2*8) ) / 2 */
}

.no-touch .link-hotspot:hover .link-hotspot-tooltip {
  opacity: 1;
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* Prevent tooltip from triggering */
.link-hotspot-tooltip {
  pointer-events: none;
}
.no-touch .link-hotspot:hover .link-hotspot-tooltip {
  pointer-events: all;
}

/* Fallback mode without pointer-events (IE8-10) */
.tooltip-fallback .link-hotspot-tooltip {
  display: none;
}
.no-touch .tooltip-fallback .link-hotspot:hover .link-hotspot-tooltip {
  display: block;
}

/* Roadview compass navigation */

.roadview-compass-panel {
  position: fixed;
  left: 50%;
  bottom: 34px;
  width: 324px;
  height: 324px;
  transform: translateX(-50%);
  z-index: 30;
  pointer-events: none;
}

.roadview-north-compass {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 98px;
  height: 98px;
  margin: 0;
  padding: 0;
  border: 2px solid rgba(255, 239, 186, 0.86);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.34), transparent 30%),
    #17222b;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.42),
    0 0 0 8px rgba(9, 18, 29, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  cursor: pointer;
  font: inherit;
  pointer-events: auto;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  transition:
    filter 0.16s ease,
    opacity 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
  z-index: 20;
}

.roadview-north-compass.is-pressed {
  transform: translate(-50%, -50%) scale(0.94);
}

.roadview-north-compass.is-aligning {
  filter: drop-shadow(0 0 12px rgba(80, 224, 255, 0.88));
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.42),
    0 0 0 8px rgba(9, 18, 29, 0.58),
    0 0 0 14px rgba(70, 210, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.roadview-north-compass-dial {
  position: absolute;
  inset: 9px;
  border: 2px solid rgba(255, 255, 255, 0.56);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #effbff 0 12%, transparent 13%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.12) 0 58%, rgba(8, 16, 27, 0.64) 59% 100%),
    conic-gradient(from 45deg, rgba(65, 223, 255, 0.2), rgba(255, 224, 101, 0.18), rgba(112, 231, 164, 0.2), rgba(65, 223, 255, 0.2));
  color: #eaf8ff;
  transform-origin: center center;
  transition: transform 0.12s linear;
}

.roadview-north-compass-dial:before,
.roadview-north-compass-dial:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 8px;
  border-radius: 999px;
  background: rgba(64, 59, 50, 0.55);
  transform-origin: 50% 21px;
}

.roadview-north-compass-dial:before {
  transform: translate(-50%, -21px);
}

.roadview-north-compass-dial:after {
  transform: translate(-50%, -21px) rotate(90deg);
}

.roadview-north-compass-label {
  position: absolute;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.58);
}

.roadview-north-compass-label-north {
  left: 50%;
  top: 5px;
  color: #ff675f;
  transform: translateX(-50%);
}

.roadview-north-compass-label-east {
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

.roadview-north-compass-label-south {
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
}

.roadview-north-compass-label-west {
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}

.roadview-north-compass-needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
}

.roadview-north-compass-needle:before,
.roadview-north-compass-needle:after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
}

.roadview-north-compass-needle:before {
  bottom: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 24px solid #ff6658;
}

.roadview-north-compass-needle:after {
  top: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 24px solid #73d8ff;
}

.roadview-north-compass-fallback {
  opacity: 0.72;
  cursor: default;
}

.roadview-compass-dial {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(135, 228, 255, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(4, 12, 22, 0.92) 0 24%, transparent 25%),
    radial-gradient(circle at center, transparent 0 32%, rgba(106, 219, 255, 0.18) 33% 34%, transparent 35%),
    radial-gradient(circle at center, transparent 0 48%, rgba(255, 230, 117, 0.18) 49% 50%, transparent 51%),
    radial-gradient(circle at center, transparent 0 64%, rgba(126, 238, 174, 0.17) 65% 66%, transparent 67%),
    radial-gradient(circle at center, transparent 0 81%, rgba(255, 255, 255, 0.18) 82% 83%, transparent 84%),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(142, 229, 255, 0.18) 50%, transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(142, 229, 255, 0.18) 50%, transparent calc(50% + 1px)),
    radial-gradient(circle at center, rgba(20, 36, 53, 0.74) 0 100%);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.42),
    inset 0 0 0 12px rgba(9, 18, 29, 0.36),
    inset 0 0 34px rgba(101, 224, 255, 0.13);
  z-index: 1;
}

.roadview-flag-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}

.roadview-compass-dial:before,
.roadview-compass-dial:after {
  content: "";
  position: absolute;
  inset: 38px;
  border: 1px dashed rgba(196, 242, 255, 0.22);
  border-radius: 50%;
  pointer-events: none;
}

.roadview-compass-dial:after {
  inset: 82px;
  border-color: rgba(255, 235, 145, 0.24);
}

.roadview-compass-panel.is-direction-miss .roadview-compass-dial {
  animation: roadview-radar-miss 0.18s ease-out;
}

.roadview-destination-flag {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
}

.roadview-destination-flag {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 64px;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  pointer-events: auto;
  transform-origin: center center;
  z-index: 2;
  opacity: 0.9;
  transition:
    filter 0.15s ease,
    opacity 0.15s ease,
    transform 0.12s ease;
}

.roadview-destination-flag.is-active:before,
.roadview-destination-flag:active:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  border: 2px solid rgba(255, 226, 126, 0.95);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255, 226, 126, 0.2) 0 38%, rgba(255, 226, 126, 0.08) 39% 62%, transparent 63%),
    radial-gradient(circle at center, transparent 0 69%, rgba(255, 226, 126, 0.2) 70% 100%);
  box-shadow:
    0 0 0 6px rgba(255, 219, 92, 0.2),
    0 0 28px rgba(255, 212, 72, 0.9),
    inset 0 0 22px rgba(255, 238, 178, 0.36);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.roadview-flag-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 35% 28%, rgba(255, 255, 255, 0.38), transparent 34%),
    linear-gradient(180deg, #9ac74b 0%, #70a32c 64%, #4e7f22 100%);
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.34),
    inset 0 -3px 0 rgba(41, 93, 29, 0.22);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
  z-index: 4;
}

.roadview-flag-pin:before {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 23px;
  height: 4px;
  border-radius: 50%;
  background: rgba(178, 218, 92, 0.72);
}

.roadview-flag-pole,
.roadview-flag-cloth {
  content: "";
  position: absolute;
  display: block;
}

.roadview-flag-pole {
  left: 17px;
  top: -31px;
  width: 3px;
  height: 37px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7a4a27, #a96a32 55%, #5f391f);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.26);
  transform-origin: top center;
  z-index: 2;
}

.roadview-flag-pole:before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 7px;
  height: 7px;
  border: 2px solid #7a4a27;
  border-radius: 50%;
  background: #e5be82;
  transform: translateX(-50%);
}

.roadview-flag-cloth {
  left: 20px;
  top: -29px;
  width: 25px;
  height: 18px;
  border-radius: 4px 9px 8px 2px;
  background:
    radial-gradient(circle at 35% 42%, rgba(255, 244, 204, 0.96) 0 11%, transparent 12%),
    linear-gradient(180deg, #ff7b63 0%, #f04d46 56%, #d83b3e 100%);
  box-shadow:
    inset 0 -4px 0 rgba(138, 33, 38, 0.2),
    0 2px 4px rgba(73, 28, 25, 0.18);
  clip-path: polygon(0 0, 100% 10%, 84% 50%, 100% 90%, 0 80%);
  transform-origin: left center;
  z-index: 2;
}

.roadview-flag-cloth:after {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  width: 10px;
  height: 5px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 50%, #fff3ce 0 38%, transparent 39%),
    radial-gradient(circle at 50% 35%, #fff3ce 0 42%, transparent 43%),
    radial-gradient(circle at 78% 50%, #fff3ce 0 34%, transparent 35%);
}

.roadview-distance-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 38px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(146, 232, 255, 0.34);
  border-radius: 999px;
  background: rgba(9, 22, 34, 0.86);
  box-shadow:
    0 5px 13px rgba(0, 0, 0, 0.32),
    0 0 12px rgba(94, 223, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #f4fbff;
  font-size: 12px;
  font-weight: 800;
  line-height: 22px;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.48);
  transform: translate(-50%, 14px);
  white-space: nowrap;
  z-index: 3;
}

.roadview-destination-flag[data-roadview-distance-status="unknown"] .roadview-distance-badge {
  min-width: 24px;
  color: #ffe6a7;
}

.roadview-destination-flag.is-candidate {
  opacity: 1;
  filter:
    drop-shadow(0 0 9px rgba(255, 222, 108, 0.72))
    drop-shadow(0 4px 9px rgba(0, 0, 0, 0.32));
}

.roadview-destination-flag.is-candidate .roadview-flag-pin {
  box-shadow:
    0 7px 13px rgba(0, 0, 0, 0.36),
    0 0 15px rgba(255, 223, 92, 0.28),
    inset 0 -3px 0 rgba(41, 93, 29, 0.22);
}

.roadview-destination-flag.is-active {
  opacity: 1;
  filter:
    drop-shadow(0 0 13px rgba(255, 226, 107, 0.96))
    drop-shadow(0 5px 10px rgba(0, 0, 0, 0.34));
}

.roadview-destination-flag.is-active .roadview-flag-pin {
  animation: roadview-flag-bounce 0.2s ease-out;
  background:
    radial-gradient(ellipse at 35% 28%, rgba(255, 255, 255, 0.45), transparent 34%),
    linear-gradient(180deg, #acd957 0%, #78ad30 64%, #568724 100%);
}

.no-touch .roadview-destination-flag:hover {
  opacity: 1;
  filter:
    drop-shadow(0 0 12px rgba(255, 226, 107, 0.74))
    drop-shadow(0 4px 9px rgba(0, 0, 0, 0.28));
}

.no-touch .roadview-destination-flag:hover .roadview-flag-pin {
  transform: translate(-50%, -50%) scale(1.06);
}

@keyframes roadview-flag-bounce {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  55% {
    transform: translate(-50%, -54%) scale(1.08);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes roadview-radar-miss {
  0% {
    filter: none;
  }
  45% {
    filter: drop-shadow(0 0 12px rgba(255, 111, 111, 0.7));
  }
  100% {
    filter: none;
  }
}

.roadview-compass-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(8, 14, 24, 0.82);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

body.roadview-mode .viewControlButton {
  display: none;
}

.mobile .roadview-compass-panel {
  bottom: 30px;
  width: 292px;
  height: 292px;
}

.mobile .roadview-north-compass {
  width: 84px;
  height: 84px;
}

.mobile .roadview-destination-flag {
  width: 58px;
  height: 58px;
}

.mobile .roadview-minimap {
  left: 12px;
  top: 12px;
  width: 176px;
  height: 124px;
}

.mobile .roadview-minimap.is-expanded {
  width: min(88vw, calc(100vw - 24px));
  height: min(48vh, calc(100vh - 24px));
}

/* Info hotspot */

.info-hotspot {
  line-height: 1.2em;
  opacity: 0.9;
  -webkit-transition: opacity 0.2s 0.2s;
  transition: opacity 0.2s 0.2s;
}

.no-touch .info-hotspot:hover {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.info-hotspot.visible {
  opacity: 1;
}

.info-hotspot .info-hotspot-header {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: rgb(103,115,131);
  cursor: pointer;
  -webkit-transition: width 0.3s ease-in-out 0.5s,
                      border-radius 0.3s ease-in-out 0.5s;
  transition: width 0.3s ease-in-out 0.5s,
              border-radius 0.3s ease-in-out 0.5s;
}

.mobile .info-hotspot .info-hotspot-header {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

.desktop.no-touch .info-hotspot .info-hotspot-header:hover {
  width: 260px;
  border-radius: 5px;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
}

.desktop .info-hotspot.visible .info-hotspot-header,
.desktop.no-touch .info-hotspot.visible .info-hotspot-header:hover {
  width: 260px;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
}

.info-hotspot .info-hotspot-icon-wrapper {
  width: 40px;
  height: 40px;
}

.mobile .info-hotspot .info-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info-hotspot .info-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info-hotspot .info-hotspot-title-wrapper {
  position: absolute;
  left: 40px;
  top: 0;
  width: 0;
  height: 40px;
  padding: 0;
  overflow: hidden;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.desktop .info-hotspot.visible .info-hotspot-title-wrapper,
.desktop.no-touch .info-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper {
  width: 220px;
  padding: 0 5px;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.info-hotspot .info-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info-hotspot .info-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot .info-hotspot-close-wrapper {
  position: absolute;
  left: 260px;
  top: 0;
  height: 40px;
  width: 40px;
  border-top-right-radius: 5px;
  background-color: rgb(78,88,104);
  visibility: hidden;
  -ms-transform: perspective(200px) rotateY(90deg);
  -webkit-transform: perspective(200px) rotateY(90deg);
  transform: perspective(200px) rotateY(90deg);
  -ms-transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0.6s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0.6s;
}

.desktop .info-hotspot.visible .info-hotspot-close-wrapper {
  visibility: visible;
  -ms-transform: perspective(200px) rotateY(0deg);
  -webkit-transform: perspective(200px) rotateY(0deg);
  transform: perspective(200px) rotateY(0deg);
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0s;
}

.info-hotspot .info-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info-hotspot .info-hotspot-text {
  position: absolute;
  width: 300px;
  height: auto;
  max-height: 200px;
  top: 40px;
  left: 0;
  padding: 10px;
  background-color: rgb(58,68,84);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow-y: auto;
  visibility: hidden;
  /* rotate(90deg) causes transition flicker on Firefox 58 */
  -ms-transform: perspective(200px) rotateX(-89.999deg);
  -webkit-transform: perspective(200px) rotateX(-89.999deg);
  transform: perspective(200px) rotateX(-89.999deg);
  -ms-transform-origin: 50% 0 0;
  -webkit-transform-origin: 50% 0 0;
  transform-origin: 50% 0 0;
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0.3s;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.desktop .info-hotspot.visible .info-hotspot-text {
  visibility: visible;
  -ms-transform: perspective(200px) rotateX(0deg);
  -webkit-transform: perspective(200px) rotateX(0deg);
  transform: perspective(200px) rotateX(0deg);
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0s;
}

/* Info hotspot modal */

.desktop .info-hotspot-modal {
  display: none;
}

.info-hotspot-modal {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 11000 !important;
  background-color: rgba(0,0,0,.5);
  line-height: 1.2em;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.2s ease-in-out 0.5s,
                      visibility 0s 0.7s;
  transition: opacity 0.2s ease-in-out 0.5s,
              visibility 0s 0.7s;
}

.info-hotspot-modal.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s ease-in-out,
                      visibility 0s 0s;
  transition: opacity 0.2s ease-in-out,
              visibility 0s 0s;
}

.info-hotspot-modal .info-hotspot-header {
  position: absolute;
  top: 60px;
  left: 10px;
  right: 10px;
  width: auto;
  height: 50px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info-hotspot-modal.visible .info-hotspot-header {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info-hotspot-modal .info-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info-hotspot-modal .info-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info-hotspot-modal .info-hotspot-title-wrapper {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  width: auto;
  height: 50px;
  padding: 0 10px;
}

.info-hotspot-modal .info-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info-hotspot-modal .info-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot-modal .info-hotspot-close-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: rgb(78,88,104);
  background-color: rgba(78,88,104,0.8);
  cursor: pointer;
}

.info-hotspot-modal .info-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info-hotspot-modal .info-hotspot-text {
  position: absolute;
  top: 110px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 10px;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  overflow-y: auto;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot-modal.visible .info-hotspot-text {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.4s;
  transition: opacity 0.3s ease-in-out 0.4s;
}

/* View control buttons */

.viewControlButton {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

body.view-control-buttons .viewControlButton {
  display: block;
}

/* Hide controls when width is too small */
@media (max-width: 600px) {
  body.view-control-buttons .viewControlButton {
    display: none;
  }
}

.viewControlButton .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

/* Center is at margin-left: -20px */
.viewControlButton-1 {
  margin-left: -145px;
}
.viewControlButton-2 {
  margin-left: -95px;
}
.viewControlButton-3 {
  margin-left: -45px;
}
.viewControlButton-4 {
  margin-left: 5px;
}
.viewControlButton-5 {
  margin-left: 55px;
}
.viewControlButton-6 {
  margin-left: 105px;
}

body.roadview-mode.view-control-buttons .viewControlButton {
  display: none;
}