.viewer-page {
  padding-bottom: 1rem;
}

.viewer-page section p,
.viewer-page .viewer-status {
  max-width: 36rem;
  margin-inline: auto;
}

.viewer-file-input {
  display: block;
  width: 100%;
  max-width: 30rem;
  margin: 1rem auto 1.2rem;
  font: inherit;
  font-size: 0.95rem;
  color: inherit;
}

.viewer-file-input::file-selector-button {
  font: inherit;
  font-size: 0.95rem;
  color: inherit;
  background: transparent;
  border: 1px solid #c7c3bb;
  border-radius: 0;
  padding: 0.45rem 0.8rem;
  margin-inline-end: 0.8rem;
  cursor: pointer;
}

.viewer-dropzone {
  margin: 0 auto;
  padding: 1.4rem 1rem;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background: rgba(0, 0, 0, 0.018);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.viewer-dropzone p {
  text-align: center;
  margin: 0.35rem 0;
}

.viewer-dropzone.is-dragging,
.viewer-dropzone:focus-visible {
  background: #f4f1ea;
  border-color: #beb7aa;
}

.viewer-status {
  min-height: 1.5rem;
  margin-top: 1rem;
  color: #5f5b55;
  text-align: center;
}

.viewer-status.is-error {
  color: #7d4b40;
}

.viewer-status.is-success {
  color: #4c5c4d;
}

.viewer-map {
  width: 100%;
  height: 26rem;
  margin: 0 auto 0.5rem;
  border: 1px solid #ddd;
  background-color: #f7f4ee;
}

.viewer-map-shell {
  position: relative;
}

.viewer-map-shell:fullscreen {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: #fff;
}

.viewer-map-shell:fullscreen::backdrop {
  background-color: #fff;
}

.viewer-map-shell:fullscreen .viewer-map {
  height: 100%;
  margin-bottom: 0;
  border: 0;
}

.viewer-map.leaflet-container {
  background: transparent;
  font: inherit;
}

.viewer-option-label {
  text-align: center;
  width: 100%;
  text-align-last: center;
}

.viewer-page p.small.small--right {
  text-align: right;
  text-align-last: right;
}

.viewer-map-toggle {
  margin-top: 0;
}

.viewer-map-shell:fullscreen .viewer-map-toggle {
  position: absolute;
  right: 0.9rem;
  bottom: 0.7rem;
  z-index: 1000;
  margin: 0;
  padding: 0.15rem 0.35rem;
  background: rgba(255, 255, 255, 0.88);
}

#viewer-route-meta p {
  margin: 0.2rem 0;
}

#viewer-route-meta #viewer-meta-summary {
  margin-bottom: 1rem;
}

@media only screen and (max-width: 640px) {
  .viewer-map {
    height: 22rem;
  }

  .viewer-file-input::file-selector-button {
    display: block;
    margin: 0 auto 0.75rem;
  }
}