.content {
  height: 100vh;
  position: fixed;
  width: 100%;

  .buttons {
    direction: rtl;
    position: absolute;
    right: $buttondistance;
    top: $buttondistance;
    unicode-bidi: bidi-override;
    z-index: 100;

    button {
      margin-left: $buttondistance;
    }
    @media screen and (max-width: $minscreenwidth) {
      right: -1rem;
      top: 0;
      transform: scale(.8);
    }
  }

  @media screen and (max-width: $minscreenwidth) {
    height: calc(100vh - 150px);
    min-height: 240px;
    position: relative;
    width: auto;
  }

  @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    height: 800px;
  }

  @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
    height: 400px;
  }
}

.stroke-first {
  paint-order: stroke;
}

.pick-coordinates {
  cursor: crosshair;
}

.map {
  height: 100%;
  width: 100%;
}