html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size: small;
}

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


 /**
       * The zoomslider in the second map shall be placed between the zoom-in and
       * zoom-out buttons.
       */
      #map .ol-zoom .ol-zoom-out {
        margin-top: 204px;
      }
      #map .ol-zoomslider {
        background-color: transparent;
        top: 2.3em;
      }

      #map .ol-touch .ol-zoom .ol-zoom-out {
        margin-top: 212px;
      }
      #map .ol-touch .ol-zoomslider {
        top: 2.75em;
      }

      #map .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
      #map .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
        top: 3px;
      }

      #map .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
      #map .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
        top: 232px;
      }

      /**
       * The zoomslider in the third map shall be horizontal, placed in the top-right
       * corner, smaller and orange.
       */