body {
  margin: 0; /* Aby nie było białej ramki (marginesu) wokół zawartości strony. */
  font-family: Calibri, Sans-serif;
}

#kontener-strony {
  height: 100vh; /* Aby zajmował całą wysokość strony. */
  display: flex; /* Aby wewnętrzne kontenery (elementy div) były obok siebie, a nie jeden pod drugim. */
}

#kontener-lewy {
  width: 275px;
  flex-shrink: 0; /* Konieczne, aby szerokość lewego kontenera faktycznie wynosiła tyle, ile określa width. */
  overflow: auto; /* Aby przy zawartości przekraczającej wysokość okna pojawił scrollbar z lewej strony lewego kontenera. */
  resize: horizontal; /* Aby na krawędzi między kontenerami (u dołu) był uchwyt umożliw. zmianę szer. obu kontenerów jednocześnie. */
  background-color: rgb(233, 236, 139); /* Pastelowy kremowy żółty */
  border-right: 1px solid black;
}

#kontener-prawy {
  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: rgb(233, 236, 239); /* Jasnoszary */
}

#beta {
  position: absolute;
  top: 0px;
  left: 0px;
}

#tytul {
  margin: 10px 0px 20px 0px;
  text-align: center;
  text-shadow: /* Cień zrobiony sposobem multiple shadows. */
    1px 1px 2px black,
    0 0 1em green,
    0 0 0.2em green;
  color: white;
  font:
    1.8em 'Georgia',
    serif;
}

#panel-szukaj-adres {
  display: table; /* Aby wypośrodkować w kontenerze lewym. */
  margin: 0px auto; /* Aby wypośrodkować w kontenerze lewym. */
  padding: 10px;
  background-color: rgb(194, 230, 115); /* Jasna, żywa limonka */
  border: 1px solid black;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

#panel-szukaj-adres select {
  width: 140px;
  cursor: pointer;
}

.przycisk {
  display: flex;
  align-items: center;
  width: 75%;
  margin: 0px auto;
  padding: 12px 8px 8px 8px;
  background: white; /* Ponieważ domyślnie w Chrome element <button> ma tło (240, 240, 240). */
  border: 1px solid black;
  border-radius: 10px;
  cursor: pointer;
}

.przycisk span:nth-child(1) {
  width: 50px;
  margin-right: 8px;
}

.przycisk span:nth-child(2) {
  width: 100%;
}

.przycisk:hover {
  background-color: #e7e7e7;
  box-shadow:0 4px 8px 0 rgba(0,0,0,0.6);
  transition-duration: 0.4s;
}

.przycisk:nth-of-type(4) {
  opacity: 0.6;
  cursor: not-allowed;
}

.separator {
  height: 5px;
  /* background: blue; */
}

#data-aktualizacji {
  visibility: hidden;
  margin-top: 10px;
  text-align: center;
}

#autor-strony {
  margin-top: 10px;
  text-align: center;
}

#kontener-mapy {
  width: 100%;
  height: 100%; /* Wymagane dla kontenera mapy. */
}

#dymek {
  padding: 0px 10px;
  text-align: center;
  color: white;
  background: rgba(0, 0, 0, 0.5);
}

.ol-zoom {
  right: .5em; /* Przenosi kontrolkę z lewej strony mapy na prawą. */
  left: auto !important; /* !importan konieczne, aby było pierwszeńsatwo przed deklaracją z ol.css. */
}

.ol-rotate {
  top: 3.5em !important; /* Przesuwa kontrolkę ROTATE pod ZOOM. */
}

.ol-zoom-in,
.ol-zoom-out,
.ol-rotate button { 
  cursor: pointer;
}

.layer-switcher {
  top: .5em !important; /* Nadpisuje deklarację z pliku ol-layerswitcher.css. */
  left: .5em !important; /* Nadpisuje deklarację z pliku ol-layerswitcher.css. */
  right: auto !important;
}