body {
  margin: 0;
  padding: 0;
}

h1 {
  margin: 0;
  padding: 5px;
  font-family: "Yuji Syuku", serif;
  font-size: 13px;
}
h1 a {
  color: goldenrod;
}

#map {
  position: absolute;
  top: 30px;
  bottom: 0;
  right: 0;
  left: 0;
}

#zoom-in-message {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 30px;
  text-align: center;
  z-index: 1000;
  pointer-events: none;
}
#zoom-in-message span {
  padding: 4px;
  font-size: 18px;
  font-weight: bold;
  color: green;
  background: #ffffffaa;
}
@media (max-width: 768px) {
  #zoom-in-message span {
    font-size: 14px;
  }
}

#terms-link {
  margin-top: 4px;
}
#terms-link a:hover {
  color: darkred;
}

.logo-link img {
  margin-right: 10px;
  float: left;
  height: 30px;
}

.sep {
  color: silver;
}

.div-icon {
  display: table-cell;
  color: #f00;
  background-color: #ff4;
  opacity: 0.7;
  white-space: nowrap;
  font-size: 12px;
  font-weight: bold;
}

.map-icon {
  font-size: 30px;
  line-height: 0;
  text-indent: -2px;
  -webkit-text-stroke: 3px white;
  text-stroke: 3px white;
  paint-order: stroke;
}

.map-icon-dot {
  font-size: 5px;
  line-height: 5px;
  color: red;
  -webkit-text-stroke: 1px white;
  text-stroke: 1px white;
  paint-order: stroke;
}

.popup-content {
  font-size: 0.9em;
}
.popup-content h1 {
  font-size: 1.5em;
  padding-left: 0;
  font-family: "Yuji Syuku", serif;
}
.popup-content h2 {
  font-size: 1.1em;
  margin: 0;
  padding: 0;
  font-family: "Yuji Syuku", serif;
}
.popup-content p {
  margin: 0;
  padding: 5px 0 3px 0;
}
.popup-content .link-area {
  padding-top: 0;
  word-break: break-all;
}
.popup-content .link-area i {
  padding-right: 2px;
}
.popup-content .link-area a {
  text-decoration: none;
}
.popup-content .link-area a:hover {
  text-decoration: underline;
}
.popup-content .popup-text {
  text-align: center;
}
.popup-content .credit {
  color: gray;
}
.popup-content .edit-request-link {
  position: absolute;
  bottom: 15px;
  right: 26px;
  font-size: 0.8em;
}
.popup-content .edit-request-link a {
  text-decoration: none;
}

.popup-arrows {
  text-align: center;
  font-size: 3em;
  line-height: 40px;
}
.popup-arrows i:hover {
  color: gray;
}

.routing {
  font-weight: bold;
  color: goldenrod;
}
.routing:before {
  font-family: "Font Awesome 5 Free";
  content: "\f277"; /* fa-signs-post */
  font-weight: 900;
  padding-right: 2px;
}
.routing:after {
  content: ": ";
}

.warning {
  font-weight: bold;
  color: red;
}
.warning:before {
  font-family: "Font Awesome 5 Free";
  content: "\f071"; /* fa-triangle-exclamation */
  font-weight: 900;
  padding-right: 2px;
}
.warning:after {
  content: ": ";
}

@media (max-width: 768px) {
  .hidden-on-mobile {
    display: none !important;
  }
}

.map-legend {
  font-weight: bold;
  line-height: 1.2em;
  user-select: none;
  -webkit-text-stroke: 2px white;
  text-stroke: 2px white;
  paint-order: stroke;
}

.non-map-screen {
  position: absolute;
  top: 30px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0;
  padding: 10px;
  color: black;
  display: none;
  font-size: 0.8em;
}
.non-map-screen h2 {
  color: goldenrod;
  font-size: 2em;
  font-family: "Yuji Syuku", serif;
}