/**
    * The zoomslider in the second map shall be placed between the zoom-in and
    * zoom-out buttons.
    */

    .ol-control button{
      background-color: rgba(102, 102, 102, 0.7) !important;
    }

   #olMap.ol-zoom .ol-zoom-out {
     margin-top: 204px;
   }
   #olMap.ol-zoomslider {
     background-color: transparent;
     top: 2.3em;
   }

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

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

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

   #olMap.olControlNavToolbar .olControlNavigationItemActive {
     background-image: url("img/panning-hand-on.png");
     background-repeat: no-repeat;
   }


    #olMap {
      width: 100%;
              height:400px;

      /*width: 100%;
      height: 100%;*/
      margin: 0;
    }
    .ol-mouse-position {
       /*left: auto;*/
       /*top:auto;*/
       /*border: 1px solid black;*/
       font-weight: bold;
       color: #000;
       top: 2px;
   }
   .ol-overviewmap {
       bottom: 2em;
   }

   .ol-rotate {
       top: 2.5em;
   }
   .draw-point {
       right: 3em;
       top: .5em;
   }


.ol-custom-overviewmap,
      .ol-custom-overviewmap.ol-uncollapsible {
        bottom: auto;
        left: auto;
        right: 0;
        top: 0;
      }

      .ol-custom-overviewmap:(.ol-collapsed)  {
        border: 1px solid black;
      }

      .ol-custom-overviewmap .ol-overviewmap-map {
        border: none;
        width: 300px;
      }

      .ol-custom-overviewmap .ol-overviewmap-box {
        border: 2px solid red;
      }

      .ol-custom-overviewmap:not(.ol-collapsed) button{
        bottom: auto;
        left: auto;
        right: 1px;
        top: 1px;
      }

      .ol-rotate {
        top: 170px;
        right: 0;
      }

      html, body, #map{
        width: 100%;
        height:400px;
    /*width:100%;
    height:100%;*/
    overflow: hidden;

    position:absolute;
    z-index:1;
    top:0; bottom:0;
}
      .ol-popup {
       position: absolute;
       background-color: white;
       box-shadow: 0 1px 4px rgba(0,0,0,0.2);
       padding: 15px;
       border-radius: 10px;
       border: 1px solid #cccccc;
       bottom: 12px;
       left: -50px;
       min-width: 280px;
     }
     .ol-popup:after, .ol-popup:before {
       top: 100%;
       border: solid transparent;
       content: " ";
       height: 0;
       width: 0;
       position: absolute;
       pointer-events: none;
     }
     .ol-popup:after {
       border-top-color: white;
       border-width: 10px;
       left: 48px;
       margin-left: -10px;
     }
     .ol-popup:before {
       border-top-color: #cccccc;
       border-width: 11px;
       left: 48px;
       margin-left: -11px;
     }
     .ol-popup-closer {
       text-decoration: none;
       position: absolute;
       top: 2px;
       right: 8px;
     }
     .ol-popup-closer:after {
       content: "✖";
     }

/* control opacity */

     .hideOpacity .layerswitcher-opacity {
          display:none;
        }
        .hideOpacity .ol-layerswitcher .layerup {
          height: 1.5em;
        }
        .showPercent .layerSwitcher .ol-layerswitcher .layerswitcher-opacity-label {
          display: block;
        }

        .ol-header > div {
          width:100%;
        }
        .toggleVisibility {
          padding-left: 1.6em;
          cursor: pointer;
          border-bottom: 2px solid #369;
          margin-bottom: 0.5em;
        }
        .toggleVisibility:before {
          background-color: #fff;
          border: 2px solid #369;
          box-sizing: border-box;
          content: "";
          display: block;
          height: 1.2em;
          left: 0.1em;
          margin: 0;
          position: absolute;
          width: 1.2em;
        }
        .toggleVisibility.show:before {
          background: #369;
        }


      img.legend {
          margin: 3px 0 0 0;
          border: 1px solid transparent;
          border-radius: 6px;
          float: left;
          padding-left: 100px;
      }