/* Globalne tło strony */
body {
  background-color: #faf3e0;  /* Kolor tła całej strony */

}

/* Tło modala */
#modalOverlay {
  display: none;  /* Ukrywa tło modala na początku */
  position: fixed; /* Ustawia tło w stałej pozycji */
  inset: 0; /* Ustala pozycję na całej szerokości i wysokości ekranu */
  background-color: rgba(0, 0, 0, 0.4);  /* Ciemne, półprzezroczyste tło */
  z-index: 9999;  /* Wysoki indeks z-index, aby tło było na wierzchu */
}

/* Styl okna modala */
#myMsgBox {
  display: none;  /* Ukrywa okno modala na początku */
  position: fixed; /* Ustawia okno w stałej pozycji */
  top: 30%; /* Ustala okno na 30% wysokości ekranu */
  left: 50%; /* Ustawia okno na 50% szerokości ekranu */
  transform: translateX(-50%);  /* Przesuwa okno w lewo, aby było wyśrodkowane */
  background: #e6d1b6;  /* Kolor tła okna */
  border: 4px double #333;  /* Ramka okna */
  color: black;  /* Kolor tekstu w oknie */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);  /* Cień wokół okna */
  padding: 20px;  /* Wewnętrzne odstępy w oknie */
  z-index: 10000;  /* Wysoki z-index, aby okno było na wierzchu */
  min-width: 280px;  /* Minimalna szerokość okna */
  font-family: sans-serif;  /* Czcionka dla tekstu w oknie */
  font-size: 14px;  /* Rozmiar czcionki */
  border-radius: 8px;  /* Zaokrąglenie rogów okna */
  animation: fadeIn 0.25s ease-in-out;  /* Animacja pojawiania się okna */
}

/* Animacja pojawiania się okna modala */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

/* Tytuł wiadomości w oknie modalnym */
.msgbox-title {
  font-weight: bold;  /* Pogrubienie tekstu tytułu */
  margin-bottom: 10px;  /* Odstęp poniżej tytułu */
}

/* Tekst wiadomości w oknie modalnym */
.msgbox-text {
  margin-bottom: 15px;  /* Odstęp poniżej tekstu */
}

/* Przycisk w oknie modalnym */
.msgbox-buttons {
  text-align: right;  /* Wyrównanie przycisków do prawej */
}

.msgbox-btn {
  padding: 5px 12px;  /* Wewnętrzne odstępy w przyciskach */
  margin-left: 8px;  /* Odstęp po lewej stronie przycisku */
}

/* Panel audio */
.panel_audio {
  border: 2px solid #8b5e3c;  /* Brązowa ramka wokół panelu audio */
  border-radius: 10px;  /* Zaokrąglenie rogów panelu */
  padding: 0.2rem 0.2rem;  /* Wewnętrzne odstępy */
  margin: 0.1rem auto;  /* Automatyczne wyśrodkowanie panelu */
  max-width: 800px;  /* Maksymalna szerokość panelu */
  background-color: #d2b48c;  /* Kolor tła panelu */
  box-shadow: 0 0 10px rgba(0, 87, 183, 0.15);  /* Cień wokół panelu */
  text-align: center;  /* Wyrównanie zawartości do środka */
  margin-bottom: 0.2rem;  /* Odstęp poniżej panelu */
}

/* Flex dla panelu audio */
.audio-flex {
  display: flex;  /* Użycie flexboxa do rozmieszczenia elementów */
  align-items: center;  /* Wyrównanie elementów w pionie */
  justify-content: space-between;  /* Rozmieszczenie elementów na całej szerokości */
  gap: 1rem;  /* Odstęp między elementami */
  flex-wrap: wrap;  /* Umożliwia zawijanie elementów */
}

/* Odtwarzacz audio */
.audio-player {
  flex: 1 1 auto;  /* Elastyczne dopasowanie szerokości */
  min-width: 250px;  /* Minimalna szerokość odtwarzacza */
  max-width: 100%;  /* Maksymalna szerokość do dostępnej przestrzeni */
  height: 28px;  /* Wysokość odtwarzacza */
}

/* Panel prędkości audio */
.audio-speed {
  display: flex;  /* Flexbox dla panelu prędkości */
  align-items: center;  /* Wyrównanie w pionie */
  gap: 0.5rem;  /* Odstęp między elementami */
  font-size: 1rem;  /* Rozmiar czcionki */
  flex-shrink: 0;  /* Zapobieganie kurczeniu się panelu */
  white-space: nowrap;  /* Zapobiega zawijaniu tekstu */
}

/* Etykieta prędkości */
.audio-speed label {
  font-size: 1.2rem;  /* Rozmiar czcionki etykiety */
  color: #0057b7;  /* Kolor tekstu etykiety */
}

/* Suwak prędkości */
#speed-range {
  width: 100px;  /* Szerokość suwaka */
  accent-color: #0057b7;  /* Kolor akcentu suwaka */
}

/* Wartość prędkości */
#speed-value {
  min-width: 40px;  /* Minimalna szerokość wyświetlanej wartości */
  text-align: right;  /* Wyrównanie wartości do prawej */
  color: black;  /* Kolor tekstu wartości */
}

/* Styl przycisku w panelu audio */
.play-button {
  display: inline-block;  /* Wyświetlanie jako blok */
  background-color: #8b5e3c;  /* Kolor tła przycisku */
  color: white;  /* Kolor tekstu */
  padding: 0.1rem 0.1rem;  /* Wewnętrzne odstępy */
  border-radius: 6px;  /* Zaokrąglenie rogów przycisku */
  text-decoration: none;  /* Usunięcie podkreślenia */
  margin-top: 0.1rem;  /* Odstęp nad przyciskiem */
  font-weight: bold;  /* Pogrubienie tekstu */
  transition: background-color 0.3s;  /* Animacja zmiany tła */
}

.play-button:hover {
  background-color: #5c3e26;  /* Zmiana tła przy najechaniu */
}

/* Nagłówek strony */
header {
  margin-top: 1rem;  /* Zwiększenie odstępu nad nagłówkiem */
  text-align: center;  /* Wyśrodkowanie nagłówka */
}

header .Foto-header {
  display: flex;  /* Ustawienie elementów w linii */
  justify-content: center;  /* Wyśrodkowanie elementów */
  align-items: center;  /* Wyrównanie elementów w pionie */
}

header h1 {
  margin: 15px 0;  /* Zwiększenie odstępu góra/dół */
  padding: 0.5rem 0.7rem;  /* Zwiększenie wewnętrznych odstępów góra/dół, lewo/prawo */
  border: 2px solid #8b5e3c;  /* Brązowa ramka wokół nagłówka */
  border-radius: 6px;  /* Zaokrąglenie rogów nagłówka */
  display: inline-block;  /* Ustawienie nagłówka w linii */
  background-color: transparent;  /* Przezroczyste tło */
  font-size: 1.3rem;  /* Rozmiar czcionki */
  font-weight: bold;  /* Pogrubienie */
}

header .lewy-obrazek, 
header .prawy-obrazek {
  width: 80px; /* Dopasowanie szerokości obrazków */
  height: auto; /* Automatyczna wysokość */
  margin: 0 50px;  /* Odstęp między obrazkami a nagłówkiem */
}





/* Główny kontener dla ramek */
#kontener-ramek {
  display: flex;               /* Ustawia elementy w jednym wierszu (Flexbox) */
  justify-content: center;     /* Wyśrodkowuje elementy w poziomie */
  align-items: stretch;        /* Rozciąga obie ramki do wspólnej wysokości */
  gap: 5px;                   /* Odstęp między ramkami w kontenerze */
  padding: 1px;                /* Wewnętrzny odstęp wokół zawartości kontenera */
  box-sizing: border-box;      /* Upewnia się, że padding i border są wliczane do szerokości i wysokości elementu */
  flex-wrap: nowrap;           /* Zapewnia, że elementy nie przełamią się na nowy wiersz, nawet jeśli braknie miejsca */
}

/* Ramka dla wyszukiwarki */
#ramka-wyszukiwarki {
  display: flex;               
  flex-direction: column;      /* Układ w kolumnie */
  align-items: flex-start;     /* Wyrównanie elementów do lewej */
  flex: 1 1 0;
  gap: 5px;                   /* Odstęp między elementami */
  padding: 5px;               /* Odstęp między wszystkimi elementami w kontenerze */
  border: 2px solid #8b5e3c;   /* Brązowa ramka wokół wyszukiwarki */
  border-radius: 8px;          /* Zaokrąglone rogi */
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

#ramka-wyszukiwarki p {
  margin-bottom: 0;  /* Usuwamy margines pod paragrafem */
  text-align: center; /* Wyśrodkowanie tekstu */
  width: 100%;        /* Upewniamy się, że paragraf zajmuje całą szerokość */
  display: block;     /* Zapewniamy, że element jest blokowy */
  line-height: 0.8;   /* Zmniejszamy odstęp między wierszami tekstu */
}

.input-container {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;        /* Zapewnia, że inne elementy w input-container zajmą całą szerokość */
}

.jump-verse-container {
  margin-top: 2px;
}

#searchBox {
  padding: 1px;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  border: 1px solid #8b5e3c;   /* Ramka wokół pola */
  border-radius: 5px;          /* Zaokrąglone rogi */
  box-sizing: border-box;
}

#verseJumpBox {
  padding: 1px;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  border: 1px solid #8b5e3c;
  border-radius: 5px;
  box-sizing: border-box;
}

button {
  padding: 8px 16px;           /* Wewnętrzne odstępy przycisków */
  background-color: #8b5e3c;   /* Brązowe tło przycisków */
  color: white;                /* Kolor tekstu w przyciskach */
  border: none;                /* Usunięcie domyślnej ramki */
  border-radius: 5px;          /* Zaokrąglenie rogów przycisków */
  cursor: pointer;             /* Wskazanie, że jest to element klikany */
  font-size: 0.8rem;  /* Zmniejszamy rozmiar czcionki do 90% domyślnego rozmiaru */
}

button:hover {
  background-color: #5c3e26;   /* Zmiana koloru tła przycisku przy najechaniu */
}

/* Ramka dla panelu sterowania */
#ramka-panelu {
  display: flex;               /* Ustawia elementy w jednym wierszu */
  flex-direction: column;      /* Ustawienie elementów w kolumnie */
  flex: 1 1 0;
  width: 100%;
  padding: 5px;
  border: 2px solid #8b5e3c;   /* Brązowa ramka wokół panelu sterowania */
  border-radius: 8px;          /* Zaokrąglenie rogów */
  gap: 5px;                   /* Odstęp między przyciskami */
  box-sizing: border-box;
}

.przyciski-nawigacji {
  display: flex;               /* Ustawienie przycisków w linii */
  flex-direction: column;      /* Ustawienie przycisków w kolumnie */
  gap: 5px;                    /* Odstęp między przyciskami */
  width: 100%;
}

.wiersz-przyciskow {
  display: flex;               /* Ustawienie przycisków w jednym wierszu */
  gap: 5px;                   /* Odstęp między przyciskami w wierszu */
  justify-content: center;  /* Wyśrodkowuje przyciski w poziomie */
  width: 100%;
}

  select.przycisk-nawigacji {
  padding: 7px 16px;           /* Wewnętrzne odstępy przycisków */
  background-color: #8b5e3c;   /* Brązowy kolor tła przycisków */
  color: white;                /* Kolor tekstu na przycisku */
  text-decoration: none;       /* Usuwanie podkreślenia z linków */
  font-size: 0.7rem;       /* Zmniejszamy rozmiar czcionki na 90% domyślnego rozmiaru */
  border-radius: 5px;          /* Zaokrąglenie rogów przycisków */
  cursor: pointer;             /* Wskaźnik kursora nad przyciskiem */
  display: inline-block;
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  }

.przycisk-nawigacji {
  padding: 7px 16px;           /* Wewnętrzne odstępy przycisków */
  background-color: #8b5e3c;   /* Brązowy kolor tła przycisków */
  color: white;                /* Kolor tekstu na przycisku */
  text-decoration: none;       /* Usuwanie podkreślenia z linków */
  font-size: 0.8rem;       /* Zmniejszamy rozmiar czcionki na 90% domyślnego rozmiaru */
  border-radius: 5px;          /* Zaokrąglenie rogów przycisków */
  cursor: pointer;             /* Wskaźnik kursora nad przyciskiem */
  display: inline-block;        /* Wyświetlanie jako element blokowy z możliwością ustawienia paddingu */
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
}

.przycisk-nawigacji:hover {
  background-color: #5c3e26;   /* Zmiana koloru tła przycisku przy najechaniu */
}


/* === BLOK Z FILTRAMI I PRZYCISKAMI (np. nad tabelą) === */
.filtry-i-przyciski {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 16px auto 10px auto;
  max-width: auto;
}

input[type="checkbox"] {
    appearance: none; /* Usuwa domyślny wygląd checkboxa */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 16px; /* Szerokość checkboxa */
    height: 16px; /* Wysokość checkboxa */
    background-color: #8b5e3c; /* Brązowe tło */
    border-radius: 5px; /* Zaokrąglone rogi */
    border: 2px solid #8b5e3c; /* Brązowe obramowanie */
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Płynna zmiana koloru tła */
}

input[type="checkbox"]:checked {
    background-color: #8b5e3c; /* Ciemniejszy brąz, gdy zaznaczone */
}

input[type="checkbox"]:checked::after {
    content: '\2713'; /* Unicode dla ptaszka (✔) */
    position: absolute;
    top: 50%; /* Ustalamy pozycję w pionie */
    left: 50%; /* Ustalamy pozycję w poziomie */
    transform: translate(-50%, -50%); /* Wyśrodkowanie ptaszka */
    font-size: 16px; /* Rozmiar ptaszka */
    font-weight: bold; /* Pogrubiony ptaszek */
    color: white; /* Kolor ptaszka */
}

input[type="checkbox"]:hover {
    background-color: #d2b48c; /* Jaśniejszy brąz, gdy najechano myszką */
}

/* === Kolory podświetlenia kolejnych wyszukanych wyrazów === */
         .highlight-1 { background-color: lightgreen; color: black; }   /* Pierwsze słowo */
         .highlight-2 { background-color: yellow; color: black; }       /* Drugie słowo */
         .highlight-3 { background-color: orange; color: black; }       /* Trzecie słowo */
         .highlight-4 { background-color: lightblue; color: black; }    /* Czwarte słowo */
         .highlight-5 { background-color: pink; color: black; }         /* Piąte słowo */
         .highlight-6 { background-color: violet; color: black; }       /* Szóste słowo */
		 
		 
.highlight-match {
   background-color: lightgreen;
   font-weight: bold;
}

.current-search-result {
   outline: 3px solid #2f7d32;
   outline-offset: 1px;
   box-shadow: 0 0 0 3px rgba(47, 125, 50, 0.16);
}

.trailing-empty-cell-hidden {
   display: none !important;
}

.search-floating-panel {
   position: fixed;
   right: 18px;
   bottom: 82px;
   z-index: 100080;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
   border: 2px solid #8b5e3c;
   border-radius: 10px;
   background: rgba(255, 248, 234, 0.98);
   box-shadow: 0 10px 26px rgba(43, 29, 14, 0.18);
   backdrop-filter: blur(3px);
}

.search-floating-panel[hidden] {
   display: none !important;
}

.search-floating-status {
   min-width: 118px;
   color: #5c3e26;
   font-size: 0.92rem;
   font-weight: 600;
   text-align: center;
}

.search-floating-actions {
   display: flex;
   gap: 6px;
}

.search-floating-actions button {
   min-width: 42px;
   padding: 6px 10px;
   line-height: 1;
}

a.lex-code {
  color: #7a1f1f;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

a.lex-code:hover,
a.lex-code:focus {
  color: #b22222;
  text-decoration: underline;
}

.lex-tooltip-popup {
   position: absolute;
   display: flex;
   flex-direction: column;
  box-sizing: border-box;
  z-index: 100000;
  width: min(360px, calc(100vw - 24px));
  min-height: 120px;
  background: #fffdf9;
  border: 1px solid #dfcfbc;
  border-radius: 20px;
  box-shadow: 0 22px 42px rgba(43, 29, 14, 0.16);
  overflow: hidden;
}

.lex-tooltip-popup[hidden] {
  display: none !important;
}

.lex-tooltip-popup.is-pinned-popup {
   position: fixed;
   z-index: 100050;
   resize: both;
}

.lex-tooltip-popup iframe {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 120px;
  border: 0;
  background: transparent;
}

.grammar-tooltip-trigger {
  display: block;
  width: 100%;
  cursor: help;
  color: inherit;
  text-decoration: none;
}

.grammar-tooltip-trigger:hover,
.grammar-tooltip-trigger:focus {
  color: #8a592d;
  text-decoration: underline dotted;
  outline: none;
}

.grammar-tooltip-popup {
   position: absolute;
   display: flex;
   flex-direction: column;
  box-sizing: border-box;
  z-index: 100000;
  width: min(300px, calc(100vw - 24px));
  min-height: 100px;
  background: #fffdf9;
  border: 1px solid #dfcfbc;
  border-radius: 16px;
  box-shadow: 0 16px 30px rgba(43, 29, 14, 0.16);
  overflow: hidden;
}

.grammar-tooltip-popup[hidden] {
  display: none !important;
}

.grammar-tooltip-popup.is-pinned-popup {
   position: fixed;
   z-index: 100050;
   resize: both;
}

.grammar-tooltip-popup iframe {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 100px;
  border: 0;
  background: transparent;
}

.tooltip-popup-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 8px 4px;
  background: linear-gradient(180deg, #fff7ed 0%, #f8ead7 100%);
  border-bottom: 1px solid #ead7c0;
}

.tooltip-popup-toolbar.is-draggable {
  cursor: move;
  user-select: none;
}

.tooltip-popup-toolbar button {
  padding: 4px 8px;
  font-size: 0.72rem;
  line-height: 1.1;
}

.tooltip-pin-btn.is-pinned {
  background-color: #486b2d;
}

.tooltip-close-btn {
  min-width: 34px;
}

.scroll-top-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 999px;
  font-size: 1.35rem;
  font-weight: bold;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(43, 29, 14, 0.24);
  z-index: 100020;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.scroll-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.verse-jump-target td {
  background-color: #d9f3c8 !important;
  transition: background-color 0.25s ease;
}

/* Styl stopki */
.Cezary_Podolski {
  text-align: center;  /* Wyśrodkowanie tekstu w stopce */
  margin-top: 2rem;  /* Odstęp nad stopką */
  padding: 1rem 0;  /* Wewnętrzne odstępy w stopce */
  font-size: 0.9rem;  /* Rozmiar czcionki */
  color: #444;  /* Kolor tekstu */
}

/* === GŁÓWNA TABELA WIDOKU === */
.tabela-glowna {
  margin: 4px auto 0 auto; /* Wyśrodkowanie i górny margines */
  border-collapse: collapse;
  max-width: 90%;
  width: auto;
  border: 1px solid black;
}

.tabela-glowna,
.tabela-glowna th,
.tabela-glowna td {
  border: 1px solid black;
}

/* === KOMÓRKI TABELI - OGÓLNE USTAWIENIA === */
td {
  padding: 4px;
}

/* === KOMÓRKI UKRYTE - DO FILTROWANIA LUB TECHNICZNE === */
.ukryta-komorka {
  display: none;
}


/* === WIERSZE L01-L20 - STANDARDOWE WIERSZE Z DANYMI === */
tr.L01 td,
tr.L02 td,
tr.L03 td,
tr.L04 td,
tr.L05 td,
tr.L06 td,
tr.L07 td,
tr.L08 td,
tr.L09 td,
tr.L10 td,
tr.L11 td,
tr.L12 td,
tr.L13 td,
tr.L14 td,
tr.L15 td,
tr.L16 td,
tr.L17 td,
tr.L18 td,
tr.L19 td,
tr.L20 td {
  font-size: 14px;
  padding: 3px 6px;
}
tr.L10 td:nth-child(n+3) {
  color: #ff0000;
  font-weight: bold;
}
tr.L07 td:nth-child(n+3) {
  white-space: nowrap;
}

/* === DRUGA KOLUMNA TABELI - FORMATOWANIE SZCZEGÓLNE === */
td:nth-child(2) {
  white-space: nowrap;
  width: 1%;
}

/* === OBRAMOWANIA DLA NIEPUSTYCH KOMÓREK === */
td:not(:empty) {
  border: 1px solid #000;
}
/* === WIERSZ L05 - PODŚWIETLONY === */
tr.L05 td {
  font-size: 14px; /* Określa rozmiar czcionki */
  padding: 3px 6px; /* Ustawia odstęp wewnętrzny elementu (od krawędzi do zawartości) */
  background-color: #E9D8B9; /* Ustawia kolor tła */
  font-weight: bold; /* Pogrubienie tekstu */
}
.highlight {
      font-weight: bold;
      color: red;
   }
.checkbox-button {
  margin-left: 10px;
  padding: 2px 6px;
  font-size: 0.8em;
  line-height: 1;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #8b5e3c;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.checkbox-button:hover {
  background-color: #5c3e26;
}
.Stopka {
  background-color: #E9D8B9;
  border-top: 2px solid #ccc;
  padding: 20px;
  margin-top: 20px;
  font-family: "Segoe UI", sans-serif;
}

.stopka-title {
  text-align: center;
  font-size: 18px;
  color: #444;
  margin-top: 0;
  margin-bottom: 12px;
  padding-top: 1px; /* minimalny odstęp od ramki */
}

.stopka-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 16px;
  max-width: 1000px;
  margin: 0 auto;
}

.stopka-grid a {
  color: #336699;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  transition: color 0.3s;
}

.stopka-grid a:hover {
  color: #003366;
  text-decoration: underline;
}
/* =====================================================================
   Tooltips dla LXX – morfologia (data-tooltip)
   ===================================================================== */

td.morph {
  position: relative;
  cursor: help;
}

/* chmurka */
td.morph[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 6px;

  background: #fff7e6;
  border: 1px solid #8b5e3c;
  border-radius: 6px;
  padding: 6px 8px;

  color: #000;
  font-size: 13px;
  line-height: 1.25;
  white-space: pre-line;   /* pozwala na \n */
  z-index: 99999;

  min-width: 160px;
  max-width: 420px;

  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* strzałka */
td.morph[data-tooltip]:hover::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 0px;

  border: 7px solid transparent;
  border-bottom-color: #8b5e3c;
  z-index: 99999;
}

#themeToggleButton.theme-toggle-button {
  min-width: 150px;
}

body.theme-night {
  background-color: #191510;
  color: #eadfce;
}

body.theme-night #myMsgBox {
  background: #2b2118;
  border-color: #8c6b49;
  color: #f0e7d8;
}

body.theme-night .panel_audio,
body.theme-night #ramka-wyszukiwarki,
body.theme-night #ramka-panelu,
body.theme-night header h1 {
  background-color: #241b14;
  border-color: #8c6b49;
  color: #f0e7d8;
}

body.theme-night .audio-speed label,
body.theme-night #speed-value,
body.theme-night .msgbox-title,
body.theme-night .msgbox-text,
body.theme-night .filtry-i-przyciski,
body.theme-night #stopka,
body.theme-night .grammar-tooltip-trigger,
body.theme-night .lex-code {
  color: #f0e7d8;
}

body.theme-night #searchBox,
body.theme-night #verseJumpBox {
  background: #17120e;
  color: #f2eadc;
  border-color: #8c6b49;
}

body.theme-night button,
body.theme-night .przycisk-nawigacji,
body.theme-night select.przycisk-nawigacji {
  background-color: #5a402a;
  color: #f7efe3;
  border-color: #a37c55;
}

body.theme-night button:hover,
body.theme-night .przycisk-nawigacji:hover,
body.theme-night select.przycisk-nawigacji:hover {
  background-color: #745134;
}

body.theme-night .tabela-glowna,
body.theme-night .tabela-glowna th,
body.theme-night .tabela-glowna td {
  border-color: #81664a;
}

body.theme-night .tabela-glowna td,
body.theme-night tr.L01 td,
body.theme-night tr.L02 td,
body.theme-night tr.L03 td,
body.theme-night tr.L04 td,
body.theme-night tr.L06 td,
body.theme-night tr.L07 td,
body.theme-night tr.L08 td,
body.theme-night tr.L09 td,
body.theme-night tr.L10 td,
body.theme-night tr.L11 td,
body.theme-night tr.L12 td,
body.theme-night tr.L13 td,
body.theme-night tr.L14 td,
body.theme-night tr.L15 td {
  background-color: #211912;
  color: #f0e7d8;
}

body.theme-night tr.L05 td {
  background-color: #3a2a1c;
  color: #fff3e3;
}

body.theme-night a,
body.theme-night a.verse-ref-link {
  color: #8cb8ff;
}

body.theme-night .tooltip-popup-toolbar {
  background: #241b14;
  border-bottom-color: #8c6b49;
}

body.theme-night .lex-tooltip-popup,
body.theme-night .grammar-tooltip-popup,
body.theme-night .search-floating-panel {
  background: #241b14;
  border-color: #8c6b49;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
}

body.theme-night .search-floating-status {
  color: #f0e7d8;
}

body.theme-night #scrollTopButton {
  background-color: #5a402a;
  color: #fff6eb;
}

body.theme-night #scrollTopButton:hover {
  background-color: #745134;
}