/* /Funkcje/Obieg/ZlecenieKlienta.razor.rz.scp.css */
/*
   Styl podgladu zlecenia przez link. Siedzi obok komponentu (izolacja CSS Blazora),
   bo dotyczy jednego ekranu - w wwwroot/styl.css lezy tylko to, co wspolne.

   Kolory wylacznie ze zmiennych z :root. Wartosc wpisana tu wprost wypadlaby z tabeli
   kontrastow (sekcja 2.2 wymagan) i nikt by tego nie zauwazyl.
*/

/*
   Stan ma byc pierwsza rzecza, ktora widac - i to bez czytania. Stad rozmiar naglowkowy
   przy zwyklym akapicie: to jest zdanie, a nie tytul sekcji, wiec nie moze byc <h2>
   (drugi naglowek tego samego poziomu co „Czego dotyczy" mylilby nawigacje po naglowkach).
*/
.stan[b-36zwau6uvj] {
    font-size: var(--tekst-naglowek);
    line-height: 1.25;
    font-weight: 600;
    margin: 0 0 var(--odstep-3);
    padding: var(--odstep-4);
    border-left: 6px solid var(--kolor-marka);
    border-radius: var(--promien-karta);
    background: var(--kolor-tlo-2);
    color: var(--kolor-tekst);
}

/*
   Kolor tylko WZMACNIA informacje (zasada Z4) - nosnikiem jest zdanie w srodku.
   Po wydruku na czarno-bialej drukarce i w skali szarosci strona nie traci niczego.
*/
.stan-nieoplacone[b-36zwau6uvj] {
    border-left-color: var(--kolor-blad);
    background: var(--kolor-blad-tlo);
}

.stan-gotowe[b-36zwau6uvj] {
    border-left-color: var(--kolor-sukces);
    background: var(--kolor-sukces-tlo);
}

.akcja[b-36zwau6uvj] {
    margin: 0 0 var(--odstep-5);
}

.akcja p[b-36zwau6uvj] {
    margin: 0 0 var(--odstep-2);
}

/* Kwota brutto na pierwszym planie; rozbicie na netto i VAT drobnym drukiem pod nia.
   Konsumentowi wystarcza brutto - rozbicie jest dostepne, ale nie konkuruje o uwage. */
.kwota-brutto[b-36zwau6uvj] {
    font-size: var(--tekst-naglowek);
    margin: 0 0 var(--odstep-1);
    font-variant-numeric: tabular-nums;
}

.rozbicie[b-36zwau6uvj] {
    font-size: var(--tekst-podpowiedz);
    color: var(--kolor-tekst-2);
    margin: 0 0 var(--odstep-6);
    font-variant-numeric: tabular-nums;
}

.historia[b-36zwau6uvj] {
    margin: 0 0 var(--odstep-4);
    padding-left: var(--odstep-5);
}

.historia li[b-36zwau6uvj] {
    margin-bottom: var(--odstep-1);
}
/* /Funkcje/Panel/ListaZgloszen.razor.rz.scp.css */
/*
   Wyglad listy zlecen. Arkusz lezy OBOK komponentu (izolacja CSS Blazora), bo dotyczy
   wylacznie tego ekranu: reguly przeniesione do wwwroot/styl.css obowiazywalyby wszedzie
   i kazda zmiana wygladu listy bylaby zmiana wygladu calej aplikacji.

   Kolory, odstepy i promienie pochodza WYLACZNIE ze zmiennych z :root. Wartosc wpisana
   tu z reki wypadlaby z palety, a paleta jest jedynym miejscem, gdzie policzono kontrasty.
*/

/* ---------------------------------------------------------------- pasek filtrow */

.pasek-filtrow[b-p9x5a42rty] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    /* Ten odstep dzieli takze Filtruj od Wyczysc. WCAG 2.5.8 wymaga minimum 8 px miedzy
       sasiednimi celami; te dwa przyciski maja przeciwny skutek, wiec pomylka kosztuje
       wpisane warunki filtrowania. */
    gap: var(--odstep-4);
    margin-bottom: var(--odstep-5);
}

/* Pola rosna z dostepnym miejscem i zawijaja sie na telefonie; przyciski zostaja przy
   swoim rozmiarze, zeby "Filtruj" nie rozciagal sie na pol ekranu. */
.pole-filtra[b-p9x5a42rty] {
    flex: 1 1 12rem;
}

.akcja-filtra[b-p9x5a42rty] {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------- tabela i karty */

/* Przewija sie tabela, a nie strona - dzieki temu naglowek i pasek filtrow zostaja
   na miejscu. Pojemnik ma tabindex="0" w znaczniku, bo obszaru przewijalnego trzeba
   dosiegnac takze bez myszy. */
.region-tabeli[b-p9x5a42rty] {
    overflow-x: auto;
}

/*
   WYROWNANIE KWOT DO PRAWEJ. To nie jest powtorzenie reguly z wwwroot/styl.css, tylko
   jej naprawa: tam obok siebie stoja ".table th, .table td { text-align: left }"
   i ".kwota, .text-end { text-align: right }". Pierwsza ma wyzsza szczegolowosc (klasa
   plus dwa elementy), wiec w kazdej tabeli WYGRYWA - klasa text-end w znaczniku nie robi
   wtedy nic. Zmierzone w przegladarce: computed text-align = "left".
   Selektor ponizej ma scope komponentu, czyli jest szczegolowszy od obu.
*/
.region-tabeli th.text-end[b-p9x5a42rty],
.region-tabeli td.text-end[b-p9x5a42rty] {
    text-align: right;
}

/*
   Ponizej 48rem tabela przestaje byc tabela i staje sie lista kart: piec kolumn na 360 px
   daje kolumny pojedynczych slow albo poziome przewijanie calej strony, a jedno i drugie
   psuje ten ekran bardziej niz brak siatki.

   Naglowek tabeli znika, a etykiete kolumny wnosi do komorki atrybut data-etykieta.
   Tekst etykiety siedzi w znaczniku, nie w CSS - inaczej zmiana nazwy kolumny wymagalaby
   poprawki w dwoch plikach i cicho rozjechalaby sie z naglowkiem.
*/
@media (max-width: 47.99rem) {
    .region-tabeli[b-p9x5a42rty] {
        overflow-x: visible;
    }

    .region-tabeli table[b-p9x5a42rty],
    .region-tabeli tbody[b-p9x5a42rty],
    .region-tabeli tr[b-p9x5a42rty],
    .region-tabeli td[b-p9x5a42rty] {
        display: block;
    }

    .region-tabeli thead[b-p9x5a42rty] {
        display: none;
    }

    .region-tabeli tr[b-p9x5a42rty] {
        border: 1px solid var(--kolor-obwodka);
        border-radius: var(--promien-karta);
        padding: var(--odstep-3);
        margin-bottom: var(--odstep-4);
    }

    .region-tabeli td[b-p9x5a42rty] {
        border-bottom: 0;
        padding: var(--odstep-1) 0;
        text-align: left;
    }

    .region-tabeli td[b-p9x5a42rty]::before {
        content: attr(data-etykieta) ": ";
        font-weight: 600;
    }

    /* Adres jest naglowkiem karty - to po nim Dorota poznaje zlecenie ("ten z Zabrza"),
       wiec nie potrzebuje podpisu "Adres nieruchomości:". */
    .region-tabeli td[data-test="adres"][b-p9x5a42rty] {
        font-size: var(--tekst-wyrozniony);
        font-weight: 600;
    }

    .region-tabeli td[data-test="adres"][b-p9x5a42rty]::before {
        content: none;
    }
}

/* ---------------------------------------------------------------- stronicowanie */

.stronicowanie[b-p9x5a42rty] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--odstep-4);
    align-items: center;
    margin-top: var(--odstep-5);
}
/* /Funkcje/Panel/SzczegolyZgloszenia.razor.rz.scp.css */
/*
   Wyglad szczegolow zlecenia. Arkusz lezy OBOK komponentu (izolacja CSS Blazora), bo reguly
   dotycza wylacznie tego ekranu.

   Odrozniamy odpowiedzi wypelnione przez asystenta AI od tych od klienta.
   Kolor to tylko wzmocnienie - nosnikiem informacji jest napis w .znacznik-ai,
   bo Dorota ma te pola SPRAWDZIC, a nie zgadnac po odcieniu tla.
*/

/* ---------------------------------------------------------------- kwoty i akcje */

/* Rozbicie netto/VAT drobnym drukiem pod naglowkiem. Kwota brutto jest w naglowku - to
   jedyna liczba czytana przy kazdym wejsciu; netto i VAT sa potrzebne raz w miesiacu,
   przy deklaracji, i wtedy bierze sie je z zestawienia. */
.rozbicie-kwot[b-34pfz9a65j] {
    color: var(--kolor-tekst-2);
    font-size: var(--tekst-podpowiedz);
    font-variant-numeric: tabular-nums;
    /* Pelny identyfikator to 36 znakow bez spacji - bez lamania rozpycha strone na telefonie. */
    overflow-wrap: anywhere;
}

/* Regula .pasek-akcji przeniesiona do wwwroot/styl.css - TRZECI raz ten sam przypadek
   (po .stan-biezacy i .przycisk-usuwania). Uzywaja jej ekrany z roznych folderow, a arkusz
   obok komponentu dziala wylacznie w tym jednym komponencie: drugi ekran dostawal znacznik
   bez wygladu. Zlapal to ArkuszTesty. */

.pole-akcji[b-34pfz9a65j] {
    flex: 1 1 12rem;
}

.akcja[b-34pfz9a65j] {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------- odpowiedzi */

/*
   Para etykieta-wartosc. NA WASKIM EKRANIE JEDNA KOLUMNA, dwie dopiero powyzej 40rem.
   Poprzednia wersja miala siatke minmax(14rem, 22rem) 1fr na kazdej szerokosci: na 360 px
   zostawialo to okolo 136 px na wartosc, czyli kolumne pojedynczych slow dla adresu
   albo opisu zrodla ogrzewania. Nie przywracaj tej siatki jako reguly bazowej.
*/
.odpowiedzi[b-34pfz9a65j] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: var(--odstep-6);
}

.odpowiedz[b-34pfz9a65j] {
    display: contents;
}

.odpowiedz dt[b-34pfz9a65j],
.odpowiedz dd[b-34pfz9a65j] {
    padding: var(--odstep-2) var(--odstep-3);
    margin: 0;
}

/* W jednej kolumnie etykieta i wartosc stoja jedna pod druga, wiec linia rozdzielajaca
   idzie pod CALA para - inaczej kazda odpowiedz wyglada jak dwie osobne pozycje. */
.odpowiedz dd[b-34pfz9a65j] {
    border-bottom: 1px solid var(--kolor-linia);
    /* Adres e-mail i opis OZE to najdluzsze nieprzerwane ciagi na tym ekranie. Bez lamania
       w dowolnym miejscu wypychaja tresc poza prawa krawedz (WCAG 1.4.10). */
    overflow-wrap: anywhere;
}

.odpowiedz dt[b-34pfz9a65j] {
    font-weight: 600;
    padding-bottom: 0;
}

@media (min-width: 40rem) {
    .odpowiedzi[b-34pfz9a65j] {
        grid-template-columns: minmax(12rem, 20rem) 1fr;
    }

    .odpowiedz dt[b-34pfz9a65j] {
        border-bottom: 1px solid var(--kolor-linia);
        padding-bottom: var(--odstep-2);
    }
}

/* ---------------------------------------------------------------- pochodzenie odpowiedzi */

.od-asystenta dt[b-34pfz9a65j],
.od-asystenta dd[b-34pfz9a65j] {
    background-color: var(--kolor-zrodlo-ai-tlo);
    border-left: 4px solid var(--kolor-zrodlo-ai);
}

.znacznik-ai[b-34pfz9a65j] {
    display: inline-block;
    margin-left: var(--odstep-2);
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--kolor-zrodlo-ai);
    border-radius: var(--promien-znacznik);
    background-color: var(--kolor-tlo);
    color: var(--kolor-zrodlo-ai);
    font-size: var(--tekst-znacznik);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ostrzezenie-ai[b-34pfz9a65j] {
    padding: var(--odstep-3) var(--odstep-4);
    border-left: 4px solid var(--kolor-zrodlo-ai);
    background-color: var(--kolor-zrodlo-ai-tlo);
}

/* ---------------------------------------------------------------- historia */

/* Przewija sie tabela, a nie strona; pojemnik ma tabindex="0" w znaczniku, bo obszaru
   przewijalnego trzeba dosiegnac takze bez myszy (sekcja 4.7 dokumentu). */
.region-tabeli[b-34pfz9a65j] {
    overflow-x: auto;
}

@media (max-width: 47.99rem) {
    .region-tabeli[b-34pfz9a65j] {
        overflow-x: visible;
    }

    .region-tabeli table[b-34pfz9a65j],
    .region-tabeli tbody[b-34pfz9a65j],
    .region-tabeli tr[b-34pfz9a65j],
    .region-tabeli td[b-34pfz9a65j] {
        display: block;
    }

    .region-tabeli thead[b-34pfz9a65j] {
        display: none;
    }

    .region-tabeli tr[b-34pfz9a65j] {
        border: 1px solid var(--kolor-obwodka);
        border-radius: var(--promien-karta);
        padding: var(--odstep-3);
        margin-bottom: var(--odstep-4);
    }

    .region-tabeli td[b-34pfz9a65j] {
        border-bottom: 0;
        padding: var(--odstep-1) 0;
    }

    .region-tabeli td[b-34pfz9a65j]::before {
        content: attr(data-etykieta) ": ";
        font-weight: 600;
    }
}
/* /Funkcje/Raporty/DoWyslania.razor.rz.scp.css */
/*
   Wyglad listy pakowania. Arkusz lezy OBOK komponentu (izolacja CSS Blazora).

   Reguly sa te same co na liscie zlecen i powtarzaja sie tu celowo: izolacja CSS przykleja
   do selektora atrybut zakresu KONKRETNEGO komponentu, wiec regula z ListaZgloszen.razor.css
   fizycznie nie moze zadzialac na tym ekranie. Przeniesienie ich do wwwroot/styl.css
   zamienilo by je w reguly globalne, obowiazujace takze na formularzu publicznym.
*/

/* Przewija sie tabela, a nie strona; pojemnik ma tabindex="0" w znaczniku, bo obszaru
   przewijalnego trzeba dosiegnac takze bez myszy. */
.region-tabeli[b-duee9w9a6m] {
    overflow-x: auto;
}

@media (max-width: 47.99rem) {
    .region-tabeli[b-duee9w9a6m] {
        overflow-x: visible;
    }

    .region-tabeli table[b-duee9w9a6m],
    .region-tabeli tbody[b-duee9w9a6m],
    .region-tabeli tr[b-duee9w9a6m],
    .region-tabeli td[b-duee9w9a6m] {
        display: block;
    }

    .region-tabeli thead[b-duee9w9a6m] {
        display: none;
    }

    .region-tabeli tr[b-duee9w9a6m] {
        border: 1px solid var(--kolor-obwodka);
        border-radius: var(--promien-karta);
        padding: var(--odstep-3);
        margin-bottom: var(--odstep-4);
    }

    .region-tabeli td[b-duee9w9a6m] {
        border-bottom: 0;
        padding: var(--odstep-1) 0;
    }

    .region-tabeli td[b-duee9w9a6m]::before {
        content: attr(data-etykieta) ": ";
        font-weight: 600;
    }

    /* Adres wysylki jest tu trescia wlasciwa - to on idzie na koperte. */
    .region-tabeli td[data-test="adres-wysylki"][b-duee9w9a6m] {
        font-weight: 600;
    }
}
/* /Funkcje/Raporty/ZestawienieMiesieczne.razor.rz.scp.css */
/*
   Wyglad zestawienia. Arkusz lezy OBOK komponentu (izolacja CSS Blazora), bo reguly dotycza
   wylacznie tego ekranu.

   Na ten ekran wchodzi sie RAZ W MIESIACU po trzy liczby do deklaracji VAT. Cala reszta -
   rozbicie na statusy i lista pozycji - jest kontekstem, nie trescia.
*/

/* ---------------------------------------------------------------- zakres dat */

.pasek-zakresu[b-olduxn3dsd] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    /* Ten sam odstep dzieli Pokaz od Wroc do listy zlecen - WCAG 2.5.8 wymaga minimum 8 px
       miedzy sasiednimi celami. */
    gap: var(--odstep-4);
    margin-bottom: var(--odstep-5);
}

.pole-zakresu[b-olduxn3dsd] {
    flex: 1 1 12rem;
}

.akcja-zakresu[b-olduxn3dsd] {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------- trzy liczby */

/* Trzy liczby w jednym rzedzie na laptopie, jedna pod druga na telefonie. Bez sztywnej
   wysokosci: pojemnik tekstowy musi urosnac przy powiekszeniu pisma (WCAG 1.4.12). */
.podsumowanie-kwot[b-olduxn3dsd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--odstep-5);
    margin: 0 0 var(--odstep-6);
    padding: var(--odstep-4);
    background: var(--kolor-tlo-marka);
    border-radius: var(--promien-karta);
}

.kwota-podsumowania[b-olduxn3dsd] {
    flex: 1 1 8rem;
}

.kwota-podsumowania dt[b-olduxn3dsd] {
    color: var(--kolor-tekst-2);
    font-size: var(--tekst-podpowiedz);
}

.kwota-glowna[b-olduxn3dsd] {
    margin: 0;
    font-size: var(--tekst-naglowek-duzy);
    font-weight: 600;
    line-height: 1.25;
    /* Kwoty czyta sie kolumnowo tylko wtedy, gdy cyfry maja jednakowa szerokosc. */
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- tabele */

/* Przewija sie tabela, a nie strona; pojemnik ma tabindex="0" w znaczniku, bo obszaru
   przewijalnego trzeba dosiegnac takze bez myszy (sekcja 4.7 dokumentu). */
.region-tabeli[b-olduxn3dsd] {
    overflow-x: auto;
}

/*
   WYROWNANIE KWOT DO PRAWEJ. To nie jest powtorzenie reguly z wwwroot/styl.css, tylko
   jej naprawa: tam obok siebie stoja ".table th, .table td { text-align: left }"
   i ".kwota, .text-end { text-align: right }". Pierwsza ma wyzsza szczegolowosc (klasa
   plus dwa elementy), wiec w kazdej tabeli WYGRYWA - klasa text-end w znaczniku nie robi
   wtedy nic. Zmierzone w przegladarce: computed text-align = "left". Bez tej reguly wymog
   liczbowy z sekcji 3.5 dokumentu jest spelniony w znaczniku, a nie na ekranie.
*/
.region-tabeli th.text-end[b-olduxn3dsd],
.region-tabeli td.text-end[b-olduxn3dsd] {
    text-align: right;
}

/* Zdanie kierujace do CSV pokazuje sie wylacznie tam, gdzie lista pozycji znika. */
.tylko-waski[b-olduxn3dsd] {
    display: none;
}

@media (max-width: 47.99rem) {
    /*
       Lista pozycji ma szesc kolumn i na 360 px nie da sie jej przeczytac ani zamienic
       w sensowne karty (jedna pozycja to szesc wierszy, a pozycji bywa kilkanascie).
       Zamiennik juz istnieje i jest lepszy: eksport CSV. Dlatego tu tabela pozycji znika,
       a zostaje zdanie mowiace, gdzie tych pozycji szukac.
    */
    .region-pozycji[b-olduxn3dsd] {
        display: none;
    }

    .tylko-waski[b-olduxn3dsd] {
        display: block;
    }

    /* Rozbicie na statusy zostaje - ma piec waskich kolumn i jeden wiersz na status,
       wiec jako lista kart nadal sie czyta. */
    .region-tabeli[b-olduxn3dsd] {
        overflow-x: visible;
    }

    .region-tabeli table[b-olduxn3dsd],
    .region-tabeli tbody[b-olduxn3dsd],
    .region-tabeli tr[b-olduxn3dsd],
    .region-tabeli td[b-olduxn3dsd] {
        display: block;
    }

    .region-tabeli thead[b-olduxn3dsd] {
        display: none;
    }

    .region-tabeli tr[b-olduxn3dsd] {
        border: 1px solid var(--kolor-obwodka);
        border-radius: var(--promien-karta);
        padding: var(--odstep-3);
        margin-bottom: var(--odstep-4);
    }

    .region-tabeli td[b-olduxn3dsd] {
        border-bottom: 0;
        padding: var(--odstep-1) 0;
        text-align: left;
    }

    .region-tabeli td[b-olduxn3dsd]::before {
        content: attr(data-etykieta) ": ";
        font-weight: 600;
    }
}
/* /Funkcje/Rodo/UsuniecieDanych.razor.rz.scp.css */
/* Regula .ostrzezenie-nieodwracalne przeniesiona do wwwroot/styl.css - PIATY raz ten sam
   przypadek. Uzywaja jej dwa ekrany usuwania (dane osobowe i trwale skasowanie), a arkusz
   obok komponentu dziala wylacznie w tym jednym. Drugi ekran dostawal ostrzezenie o akcji
   NIEODWRACALNEJ bez wygladu ostrzezenia. */


.komunikat-usunieto[b-gqe1yt5vw3] {
    padding: var(--odstep-4);
    border-left: 4px solid var(--kolor-sukces);
    border-radius: var(--promien-karta);
    background: var(--kolor-sukces-tlo);
}

.lista-skutkow[b-gqe1yt5vw3] {
    margin: 0 0 var(--odstep-5);
    padding-left: var(--odstep-5);
}

.lista-skutkow li[b-gqe1yt5vw3] {
    margin-bottom: var(--odstep-1);
}

/* Pole bariery jest krotkie z premedytacja: ma pomiescic jedno slowo i wygladac
   na pole na jedno slowo. Szerokie pole zaprasza do wklejenia czegokolwiek. */
.pole-potwierdzenia[b-gqe1yt5vw3] {
    max-width: 12rem;
    text-transform: none;
}

/*
   Przycisk destrukcyjny wg tabeli stanow 2.6: obwodka i tekst w kolorze bledu,
   wypelnienie dopiero pod kursorem. Odwrotnie niz przycisk glowny - operacja,
   ktorej nie da sie cofnac, nie ma wygladac jak domyslne "dalej".

   Bez pigulki (--promien-pigulka): pigulka jest cytatem z marki i zostaje
   zarezerwowana dla przycisku glownego.
*/
/* Regula .przycisk-usuwania przeniesiona do wwwroot/styl.css. Uzywaja jej DWA ekrany
   (usuniecie danych osobowych i kasowanie zlecen pokazowych), a arkusz obok komponentu
   dziala wylacznie w tym jednym komponencie - drugi ekran dostawal przycisk niszczacy
   bez wygladu przycisku niszczacego. Przy akcji nieodwracalnej to nie jest kosmetyka.
   Zlapal to ArkuszTesty. */

/* /Funkcje/Tozsamosc/Logowanie.razor.rz.scp.css */
/*
   Wyglad ekranu logowania. Arkusz lezy OBOK komponentu (izolacja CSS Blazora).

   Formularz o dwoch polach rozciagniety na cala szerokosc tresci wyglada na niedokonczony
   i zmusza oko do przebiegniecia calego wiersza miedzy etykieta a polem. Kolumna 20rem
   jest wezsza niz kolumna formularza publicznego, bo tu sa dwa pola, a nie czternascie.

   Szerokosc w rem, nie w px: przy powiekszonym pismie przegladarki kolumna ma rosnac
   razem z tekstem (WCAG 1.4.4).
*/

.kolumna-logowania[b-qmxy771fk4] {
    width: 100%;
    max-width: 20rem;
    margin: 0 auto;
}
/* /Funkcje/Ustawienia/EkranUstawienFormularza.razor.rz.scp.css */
/*
   Wyglad ekranu ustawien formularza. Arkusz lezy OBOK komponentu (izolacja CSS Blazora).
*/

/* Pole wyboru i jego nazwa w jednym wierszu. Bez tego etykieta - blok w arkuszu glownym -
   laduje pod polem wyboru i para przestaje wygladac na jedna calosc. */
.przelacznik[b-4dpt5r7hj3] {
    display: flex;
    align-items: center;
    gap: var(--odstep-2);
}

/* Regula .stan-biezacy przeniesiona do wwwroot/styl.css: uzywaja jej juz DWA ekrany ustawien
   (przelaczniki formularza i zlecenia pokazowe), a arkusz obok komponentu dziala WYLACZNIE
   w tym jednym komponencie. Drugi ekran dostawal przez to znacznik bez wygladu - i nie widac
   tego inaczej niz na oko, bo brak stylu nie jest bledem. Zlapal to ArkuszTesty. */