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 */
}

#tytul {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 20px;
  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-left: auto; /* Aby wypośrodkować w kontenerze lewym. */
  margin-right: auto; /* Aby wypośrodkować w kontenerze lewym. */
  background-color: rgb(194, 230, 115); /* Jasna, żywa limonka */
  border: 1px solid black;
  padding: 5px 10px 10px 10px;
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.4); /* Przesunięcie w prawo | Przesunięcie w dół | Rozmycie */
}

#panel-szukaj-adres div:nth-child(1) {
  text-align: center;
  font-weight: bold;
  margin-bottom: 5px
}

#panel-szukaj-adres select {
  width: 240px;
  cursor: pointer;
  font-size: 0.75em;
}

.przycisk {
  display: flex;
  align-items: center;
  width: 75%;
  cursor: pointer;
  margin-left: auto;
  margin-right: 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;
}

.przycisk span:nth-child(1) { /* Ikonka na przycisku */
  width: 50px;
  margin-right: 8px;
}

.przycisk span:nth-child(2) { /* Napis na przycisku */
  width: 100%;
}

.przycisk:hover {
  background-color: rgb(231, 231, 231); /* Jasny szary */
  box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.6);
  transition-duration: 0.4s;
}

.przycisk:nth-of-type(2) {
  display: none;
}

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

#data-aktual {
  margin-top: 10px;
}

#data-aktual,
#ilosc-ulic,
#ilosc-adresow {
  visibility: hidden;
  text-align: center;
}

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

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

#dymek {
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 0px 10px; /* top/bottom | left/right */
  text-align: center;
}

.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;
}