body {
  margin: 0; /* Aby nie było białej ramki (marginesu) wokół zawartości strony. */
  font-family: Calibri, Sans-serif;
  /* font-size: 50px; */
}

#kontenerStrony {
  height: 100vh; /* Aby zajmował całą wysokość strony. */
  display: flex; /* Aby wewnętrzne kontenery (elementy div) były obok siebie, a nie jeden pod drugim. */
  flex-direction: row; /* Tego mogłoby - w tym przypadku-  nie być. */
  background-color: red;
}

#kontenerLewy {
  width: 300px; /* Lewy kontener ma zajmować 20% szerokości strony (czyli kontenera strony). */
  flex-shrink: 0; /* Konieczne, aby szerokość lewego kontenera faktycznie wynosiła 25%. */
  overflow: auto; /* Aby przy zawartości przekraczającej wysokość okna pojawił scrollbar z lewej strony lewego kontenera. */
  resize: horizontal; /* Aby na krawędzi pomiędzy kontenerami (u dołu) pojawił się uchwyt umożliwiający zmianę szerokości obu kontenerów jednocześnie. */
  background-color: lime;
}

#kontenerPrawy {
  width: 100%; /* Musi być 100%, aby przy zmianie rozmiaru (resize: horizontal) oba kontenery wypełniały cały kontener strony. */
  overflow: auto; /* Aby przy zawartości przekraczającej wysokość okna pojawił scrollbar z lewej strony lewego kontenera. */
  background-color: magenta;
}

#logo {
  width: 200px;
  display: table; /* Aby wypośrodkować w kontenerze lewym. */
  margin-left: auto; /* Aby wypośrodkować w kontenerze lewym. */
  margin-right: auto; /* Aby wypośrodkować w kontenerze lewym. */
  margin-top: 20px;
  margin-bottom: 20px;
}

#panelSzukajAdres {
  display: table; /* Aby wypośrodkować w kontenerze lewym. */
  margin-left: auto; /* Aby wypośrodkować w kontenerze lewym. */
  margin-right: auto; /* Aby wypośrodkować w kontenerze lewym. */
  background-color: rgba(255, 165, 0, 0.8);
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

#panelSzukajAdres select {
  width: 140px;
  cursor: pointer;
}

#kontenerMapy {
  width: 100%;
  height: 100%; /* Wymagane (!!!) dla kontenera mapy w Leaflet. */
}



      .ol-popup {
        position: absolute;
        background-color: white;
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-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: "✖";
      }


