#legend {
  grid-area: map;
  position: absolute;
  font-size: 0.8em;
  &[data-position="SW"] {
    left: var(--scaleHeight);
    bottom: var(--scaleHeight);
  }
  &[data-position="NW"] {
    left: var(--scaleHeight);
    top: var(--scaleHeight);
  }
  &[data-position="NE"] {
    right: var(--scaleHeight);
    top: var(--scaleHeight);
  }
  &[data-position="SE"] {
    right: var(--scaleHeight);
    bottom: calc(var(--scaleHeight)+ 17px);
  }
  z-index: 500;
  border: solid 3px #888;
  border-radius: 8px;
  background-color: #eee;
  padding: 0 3px 3px 3px;
  & .walkD {
    display: flex;
    flex-direction: row;
    div {
      text-align: center;
    }
    & .walk {
      background-color: #eee;
      color: black;
      width: 45px;
    }
    &.walk1 {
      background-color: var(--walkColor_1);
      color: contrast-color(var(--walkColor_1));
    }
    &.walk2 {
      background-color: var(--walkColor_2);
      color: contrast-color(var(--walkColor_2));
    }
    &.walk3 {
      background-color: var(--walkColor_3);
      color: contrast-color(var(--walkColor_3));
    }
    &.walk4 {
      background-color: var(--walkColor_4);
      color: contrast-color(var(--walkColor_4));
    }
    &.walk5 {
      background-color: var(--walkColor_5);
      color: contrast-color(var(--walkColor_5));
    }
    & div:not(.walk) {
      min-width: 80px;
      text-align: center;
      padding: 0 2px;
    }
  }
}
#legend {
  &.hideWalk1 .walk1 {
    display: none;
  }
  &.hideWalk2 .walk2 {
    display: none;
  }
  &.hideWalk3 .walk3 {
    display: none;
  }
  &.hideWalk4 .walk4 {
    display: none;
  }
  &.hideWalk5 .walk5 {
    display: none;
  }
}
@media print {
  .side {
    & #legend[data-position="SW"],
    & #legend[data-position="NW"] {
      left: calc(var(--headingHeight) + var(--scaleHeight));
    }
  }
  .top {
    & #legend[data-position="NW"],
    & #legend[data-position="NE"] {
      top: calc(var(--headingHeight) + var(--scaleHeight));
    }
  }
}