:root {
  --mapWidth: 1200px;
  --mapHeight: 800px;
  --headingHeight: 76px;
  --scaleHeight: 9px;

  --walkColor_1: #f00;
  --walkColor_2: #06f;
  --walkColor_3: #0f0;
  --walkColor_4: #ffa500;
  --walkColor_5: #800080;
}

html,
body {
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}
.leaflet-OSsheets-pane {
  z-index: 310;
}
.leaflet-OSgrid-pane {
  z-index: 300;
}
.leaflet-debug-pane {
  z-index: 250;
}
.leaflet-container {
  height: 1200px;
  width: 800px;
  max-width: 100%;
  max-height: 100%;
}

#map {
  width: 1200px;
  height: 800px;
  position: relative;
  /* margin: 15px; */
}

.flex-h {
  display: flex;
  flex-direction: row;
}

.wLink {
  display: flex;
  flex-direction: column;
  border: solid thin black;
  padding: 2px;
  margin: 0 3px;
}

.leaflet-container.print {
  max-width: var(--mapWidth);
  max-height: var(--mapHeight);
  min-width: var(--mapWidth);
  min-height: var(--mapHeight);
}

#instruct {
  display: none;
  /* position: absolute;
  top: -15px;
  left: auto;
  right: auto; */
  z-index: 2000;
  background-color: mediumaquamarine;
  width: 200px;
  text-align: center;
  & #orientation {
    font-weight: bold;
  }
  &.print {
    display: block;
  }
}
.headerSpace {
  display: none;
  /* display: flex; */
  flex-direction: row;
  img {
    width: calc(var(--headingHeight) - 9px);
  }
}
.print_header {
  display: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#content {
  display: flex;
  position: relative;

  & #orientation {
    font-weight: bold;
    color: crimson;
  }
  & .logo {
    display: flex;
    flex-direction: column;
    writing-mode: initial;
    align-items: center;
    .stEds {
      width: 100%;
      text-align: center;
      font-size: 6px;
    }
  }
  & .venue {
    display: flex;
    flex-direction: column;
    text-transform: capitalize;
    font-size: calc(var(--headingHeight) * 0.2);
    & #venue {
      font-size: calc(var(--headingHeight) * 0.4);
    }
    & #byLine {
      font-size: calc(var(--headingHeight) * 0.15);
    }
  }

  & #mapNo,
  & #dispDate {
    font-size: calc(var(--headingHeight) * 0.3);
  }
  & #date {
  }

  /* & #walks {
    text-transform: capitalize;
    font-size: calc(var(--headingHeight) * 0.2);
  } */

  &.top {
    flex-direction: column;
    .headerSpace {
      max-height: var(--headingHeight);
      min-height: var(--headingHeight);
      flex-direction: row;
      justify-content: flex-start;
      .print_header {
        width: 100%;
        padding: 0 9px;
      }
    }

    & .logo.side {
      display: none;
    }
  }

  &.side {
    flex-direction: row;
    .headerSpace {
      height: 100%;
      max-width: var(--headingHeight);
      min-width: var(--headingHeight);
      flex-direction: column;
      justify-content: flex-start;
      .print_header {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        height: calc(var(--mapHeight) + 2 * var(--scaleHeight) - var(--headingHeight));
        justify-content: space-between;
        padding: 9px 0;
      }
    }

    & .logo.top {
      display: none;
    }

    .print_header {
      writing-mode: sideways-lr;
    }
  }
}

.tweakers {
  display: none;
}

.my-div-icon .marker-5x {
  /* transform-origin: 50% 75%; */
  transform: rotate(-0.25turn);
}

@media print {
  #instruct.print {
    display: none;
  }

  .headerSpace {
    display: flex;
  }

  .leaflet-control-zoom {
    display: none;
  }

  .leaflet-container {
    width: var(--mapWidth);
    height: var(--mapHeight);
    max-width: var(--mapWidth);
    max-height: var(--mapHeight);
    min-width: var(--mapWidth);
    min-height: var(--mapHeight);
  }

  .screen {
    display: none;
  }
}