.area-location {
  width: 100%;
  height: 50vh;
  background: white;
  border: solid 1px black;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
}
.area-location__map {
  flex-grow: 1;
  border-bottom: solid 1px #ccc;
}
.area-location__controls {
  height: 2em;
}
.area-location__controls button {
  border-radius: 0;
}
.area-location__controls input {
  border-radius: 0;
  border: none;
}
.area-location__approximation-radius-input {
  width: 10ch;
}
.area-location__text {
  opacity: 0.5;
}
.area-location__text:first-child {
  padding-left: 1ch;
}
.area-location__start-new-shape,
.area-location__cancel-drawing-perimeter,
.area-location__update-approximation,
.area-location__update-perimeter {
  flex-flow: row nowrap;
  display: flex;
  justify-content: space-between;
  height: 2em;
  line-height: 2em;
}
.area-location__start-new-shape[hidden],
.area-location__cancel-drawing-perimeter[hidden],
.area-location__update-approximation[hidden],
.area-location__update-perimeter[hidden] {
  display: none;
}

.area-page-flexible-data-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--dissimilar-input-gap);
}
.area-page-flexible-data-inputs .area-fields {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.area-page-flexible-data-inputs .area-tags {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.area-page-flexible-data-inputs .area-notes {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.area-page-other-inputs .area-alternate-names {
  width: 50%;
}

.area-uuid::before { content: 'areas/'; }
.area-uuid::after { content: '.json'; }

.area-name {
  margin-bottom: var(--dissimilar-input-gap);
}

.area-alternate-names {
  display: flex;
  width: 60ch;
  flex-flow: column nowrap;
  gap: var(--similar-input-gap);
}
.area-alternate-names li {
  display: contents;
}

.area-rating {
  display: flex;
  flex-flow: column nowrap;
}

.area-project-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 2em;
}
.area-project-status__checkbox {
  margin: 0 0.5em;
}
.area-project-status__checkbox ~ .area-project-status__text {
  display: none;
}
.area-project-status__checkbox ~ .area-project-status__not-project {
  display: block;
  opacity: 0.5;
}
.area-project-status__checkbox:checked ~ .area-project-status__text {
  display: block;
  border: none;
  width: auto;
}
.area-project-status__checkbox:checked ~ .area-project-status__not-project {
  display: none;
}

.area-page__main {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}
.area-page__history {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.area-resources {
  display: flex;
  flex-direction: column;
  gap: var(--similar-input-gap);
}
.area-resource {
  display: flex;
  flex-direction: column;
}
.area-resource__resource {
  font-size: 0.8rem;
}
.area-resource__title { }
.area-resource__description { }

.area-tags {
  display: flex;
  flex-flow: row wrap;
  gap: 0.25em;
  align-content: flex-start;
}
.area-tags__tag {
   max-width: 15ch;
}

.area-notes {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--similar-input-gap);
}
.area-note {
  display: flex;
  flex-flow: column nowrap;
}
.area-note__topic { }
.area-note__content {
  height: 100%;
}

.area-fields {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--similar-input-gap);
}
.area-field { display: flex; flex-flow: row; }
.area-field__field { width: 15ch; }
.area-field__value { width: auto; flex-grow: 1; flex-shrink: 1; }

.area-page__photos {
  background: rgba(255,255,255,0.5);
  margin-top: 5vh;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  max-width: 1000px;
  gap: 1em;
  padding: 1em;
}
.area-page__photos svg {
  display: block;
  height: 200px;
  width: auto;
}