@charset "UTF-8";

/* ===========================================================================
   Securion - warstwa spojnosci wizualnej
   ===========================================================================

   Ten arkusz NIE zastepuje base.css / content-style.css / forms-style.css.
   Laduje sie po nich i po arkuszach kontrolerow, i prostuje to, co przez lata
   rozjechalo sie miedzy nimi. Stare pliki zostaja nietkniete, wiec wycofanie
   calej zmiany to usuniecie jednej linijki z layout.tpl.

   Skad sie wziela potrzeba: w arkuszach siedzialo CZTERNASCIE roznych
   deklaracji font-family (Arial, Tahoma, Helvetica Neue, Trebuchet MS, Lucida
   Sans, PT Sans...) i kilkanascie rozmiarow tekstu podawanych raz w px, raz
   w em, raz w procentach. Jeden ekran potrafil pokazac trzy kroje naraz -
   etykiety Tahoma, wartosci Arial, przyciski znowu Arial w innym rozmiarze.
   Oko czyta to jako balagan, zanim zdazy przeczytac tresc.

   Zasady, ktore trzymamy tutaj:
     1. Jeden krój pisma w calej aplikacji.
     2. Piec stopni wielkosci tekstu, nie kilkanascie.
     3. Kolory z jednej palety, podanej zmiennymi na :root.
     4. Ten sam ksztalt ramek, zaokraglen i odstepow w tabelach, kartach,
        polach i przyciskach.

   Dodajac nowy ekran: siegaj po zmienne stad, zamiast wpisywac wartosci
   z palca. Inaczej za rok bedzie pietnascie krojow zamiast czternastu.
   =========================================================================== */

:root {
    /* Krój systemowy: Segoe UI na Windows, San Francisco na Macu, Roboto na
       Androidzie. Zaden nie wymaga pobierania - aplikacja dziala takze
       w sieciach bez wyjscia na zewnatrz, wiec czcionek z internetu tu nie ma. */
    --sc-pismo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
    --sc-pismo-stale: Menlo, Consolas, "Courier New", monospace;

    /* Skala tekstu. Wszystko w px, bo mieszanka px/em/% byla drugim powodem,
       dla ktorego te same etykiety mialy rozna wielkosc na roznych ekranach. */
    --sc-tekst: 13px;        /* tresc */
    --sc-tekst-maly: 11.5px; /* etykiety, podpisy, drobiazgi */
    --sc-tekst-h4: 12px;
    --sc-tekst-h3: 14px;
    --sc-tekst-h2: 16px;
    --sc-tekst-h1: 20px;

    /* Paleta. Granat i blekit sa te same, ktore juz byly w aplikacji -
       chodzilo o ich uporzadkowanie, a nie o zmiane charakteru. */
    --sc-atrament: #24303d;
    --sc-atrament-slaby: #6b7785;
    --sc-akcent: #15428B;
    --sc-akcent-jasny: #5B94DF;
    --sc-dobry: #2e7d32;
    --sc-zly: #c0392b;
    --sc-uwaga: #b26a00;

    --sc-kreska: #dde3ea;
    --sc-kreska-mocna: #c3ccd6;
    --sc-tlo: #ffffff;
    --sc-tlo-delikatne: #f6f8fa;
    --sc-tlo-naglowka: #eef2f7;

    --sc-zaokraglenie: 4px;
    --sc-odstep: 8px;
}

/* ---------------------------------------------------------------------------
   1. Jeden krój pisma
   ---------------------------------------------------------------------------
   !important jest tu uzasadnione: to jedyny sposob, zeby jedna regula
   przykryla czternascie rozsianych deklaracji, nie ruszajac plikow, w ktorych
   siedza. Dotyczy WYLACZNIE font-family - reszta wlasciwosci zostaje
   normalnie kaskadowana.
   --------------------------------------------------------------------------- */

body,
input, select, textarea, button,
table, th, td,
.content, .content *,
.wrapper-wide, .wrapper-wide *,
#main-menu, #main-menu *,
div#main-menu-sub, div#main-menu-sub *,
.toolTip, .toolTipKontener, .tooltip,
ul.departmentList,
.button-clear, .button-blue {
    font-family: var(--sc-pismo) !important;
}

/* Fragmenty, ktore MAJA byc pisane maszyna: sciezki plikow, przyklady nazw.
   Odzyskujemy je po regule wyzej. */
code, kbd, pre, samp,
table.zdjecia-przyklad code {
    font-family: var(--sc-pismo-stale) !important;
}

/* Ikony jQuery UI rysowane sa czcionka/sprite'em widgetu - nie dotykamy. */
.ui-icon, .ui-icon * {
    font-family: inherit !important;
}

/* ---------------------------------------------------------------------------
   2. Skala tekstu
   --------------------------------------------------------------------------- */

body {
    font-size: var(--sc-tekst);
    line-height: 1.45;
    color: var(--sc-atrament);
}

.content, .content p, .content td, .content th, .content li, .content label {
    font-size: var(--sc-tekst);
}

.drobne, .drobne-podpowiedz, .wersja, small {
    font-size: var(--sc-tekst-maly);
    color: var(--sc-atrament-slaby);
}

/* ---------------------------------------------------------------------------
   3. Naglowki
   ---------------------------------------------------------------------------
   Byly cztery rozne sposoby oznaczenia naglowka sekcji: h2 granatowe, h3 na
   tle kropkowanej linii (obrazek, ktorego juz nie ma), legend fieldsetu
   i zwykly pogrubiony tekst. Teraz roznia sie tylko wielkoscia.
   --------------------------------------------------------------------------- */

.content h1, .content h2, .content h3, .content h4, .content h5 {
    color: var(--sc-atrament);
    font-weight: bold;
    background-image: none;
    line-height: 1.3;
}

.content h1 { font-size: var(--sc-tekst-h1); margin: 0 0 10px; }
.content h2 { font-size: var(--sc-tekst-h2); margin: 18px 0 8px; color: var(--sc-akcent); }
.content h3 { font-size: var(--sc-tekst-h3); margin: 14px 0 6px; }
.content h4 { font-size: var(--sc-tekst-h4); margin: 12px 0 6px; }

.content h3 span { background: none; padding: 0; margin: 0; }

.page-title {
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--sc-kreska);
    margin-bottom: 14px;
}

.page-title h1 {
    font-size: var(--sc-tekst-h1);
    padding: 0 0 0 10px;
    border-left: 4px solid var(--sc-akcent-jasny);
    color: var(--sc-atrament);
}

/* ---------------------------------------------------------------------------
   4. Karty i fieldsety
   --------------------------------------------------------------------------- */

.content fieldset.edycja-pozycji,
.content fieldset.do-srodka {
    background: var(--sc-tlo);
    border: 1px solid var(--sc-kreska);
    border-radius: var(--sc-zaokraglenie);
    padding: 14px 16px 16px;
    margin: 0 0 16px 0;
}

.content fieldset legend {
    font-size: var(--sc-tekst-h3);
    font-weight: bold;
    color: var(--sc-akcent) !important;
    padding: 0 6px;
}

/* ---------------------------------------------------------------------------
   5. Tabele z danymi (etykieta - wartosc)
   --------------------------------------------------------------------------- */

table.tabela-dane {
    line-height: 1.45;
}

table.tabela-dane tr td {
    padding: 5px 8px;
}

table.tabela-dane tr td.td-etykieta {
    font-size: var(--sc-tekst-maly);
    font-weight: bold;
    color: var(--sc-atrament-slaby);
    text-align: right;
    vertical-align: top;
    border-bottom: 1px solid var(--sc-kreska);
    line-height: 1.45;
    padding-left: 10px;
    padding-right: 6px;
}

table.tabela-dane tr td.td-wartosc {
    font-size: var(--sc-tekst);
    color: var(--sc-atrament);
    border-bottom: 1px solid var(--sc-kreska);
    line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   6. Tabele list
   --------------------------------------------------------------------------- */

.content table.color {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 14px;
}

.content table.color th {
    background: var(--sc-tlo-naglowka);
    color: var(--sc-akcent);
    font-size: var(--sc-tekst-maly);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 8px;
    text-align: left;
    vertical-align: middle;
    border: 1px solid var(--sc-kreska);
}

.content table.color td {
    padding: 7px 8px;
    border: 1px solid var(--sc-kreska);
    vertical-align: middle;
}

/* Pasy zebry siedza na WIERSZU, nie na komorce.
   Gdy leza na komorce, przykrywaja kazde tlo, ktore komorka nadaje sobie
   sama - a tak oznaczane sa terminy graniczne (deadline-red / -orange)
   i wyniki kontroli zdjec. Data po terminie robila sie wtedy zoltym tekstem
   na bialym tle, czyli znikala. Tlo wiersza rysuje sie POD tlem komorki,
   wiec taki uklad nie wymaga zadnych wyjatkow. */
.content table.color tbody tr.light { background: var(--sc-tlo); }
.content table.color tbody tr.dark  { background: var(--sc-tlo-delikatne); }
.content table.color tbody tr:hover { background: #eef4fc; }

/* Terminy graniczne. Czerwien #ff0000 z zoltym tekstem byla czytelna
   wylacznie z zalozenia - zostaje ten sam sygnal, ale w kolorach, ktore
   daja sie przeczytac. Przekreslenie zostaje: to istniejaca konwencja
   i uzytkownicy ja znaja. */
.content table.color td.deadline-red,
.content table td.deadline-red {
    background-color: #fdecea;
    color: #a02216;
    font-weight: bold;
    text-decoration: line-through;
}

.content table.color td.deadline-orange,
.content table td.deadline-orange {
    background-color: #fdf0e3;
    color: #8a5200;
    font-weight: bold;
}

.content table.color tfoot td {
    border: none;
    background: none;
    padding: 8px 2px;
}

/* ---------------------------------------------------------------------------
   7. Pola formularzy
   ---------------------------------------------------------------------------
   Pola mialy trzy rozne obramowania (niebieskie #5074A4, szare #D1D1D1
   i cieniowane), rozne zaokraglenia i rozna wysokosc, przez co select nigdy
   nie stal rowno z sasiednim input.
   --------------------------------------------------------------------------- */

.content input[type="text"],
.content input[type="password"],
.content input[type="email"],
.content input[type="number"],
.content input[type="date"],
.content textarea,
.content select {
    font-size: var(--sc-tekst);
    color: var(--sc-atrament);
    background: var(--sc-tlo);
    border: 1px solid var(--sc-kreska-mocna);
    border-radius: var(--sc-zaokraglenie);
    box-shadow: none;
    padding: 5px 7px;
    line-height: 1.35;
    margin: 1px 0;
    box-sizing: border-box;
    max-width: 100%;
}

.content select {
    /* Bez tego select jest o kilka pikseli nizszy od inputa obok. */
    height: 30px;
    padding: 4px 6px;
}

/* Listy rozwijane w panelu wyszukiwania maja twardy limit szerokosci.
 *
 * "max-width: 100%" wyzej znaczy "nie wychodz poza rodzica", ale w tabeli
 * o ukladzie automatycznym to za malo: szerokosc kolumny bierze sie wtedy
 * z najdluzszej opcji. Pole "Oddzial" ma w opcjach "Klient - Oddzial",
 * wiec przy dluzszych nazwach rozpychalo tabele filtra, a za nia cala
 * strone - pozioma belka przewijania pojawiala sie dla calego widoku.
 *
 * Limit 150px obowiazywal tu od zawsze (forms-style.css), ale ta regula ma
 * te sama specyficznosc co "max-width: 100%" powyzej i przegrywala samym
 * miejscem w kolejce arkuszy. Przywracamy go z wyzsza specyficznoscia.
 * Ucieta nazwa konczy sie wielokropkiem, a po rozwinieciu listy widac ja
 * w calosci.
 */
.content .wyszukiwarka-filtr select {
    max-width: 150px;
    text-overflow: ellipsis;
}

/* Listy wielokrotnego wyboru musza pokazac tyle wierszy, ile deklaruje
   atrybut size. Sztywne 30px powyzej scisnelo je do jednej linijki, wiec
   z listy piatki klientow widac bylo jednego i trzeba bylo scrollowac
   mysza wewnatrz paska o wysokosci jednego wiersza. */
.content select[multiple],
.content select[size]:not([size="1"]) {
    height: auto;
    min-height: 5.6em;
    padding: 3px 4px;
}

.content select[multiple] option,
.content select[size]:not([size="1"]) option {
    padding: 2px 4px;
}

.content textarea {
    line-height: 1.5;
    padding: 7px;
}

.content input[type="text"]:focus,
.content input[type="password"]:focus,
.content textarea:focus,
.content select:focus {
    border-color: var(--sc-akcent-jasny);
    outline: none;
    box-shadow: 0 0 0 2px rgba(91, 148, 223, .18);
}

.content input[type="text"][aria-invalid="true"],
.content select[aria-invalid="true"] {
    border-color: var(--sc-zly);
}

.pole-wymagane {
    color: var(--sc-zly);
    font-weight: bold;
}

.td-error, .content .td-error, ul.td-error {
    color: var(--sc-zly);
    font-size: var(--sc-tekst-maly);
}

.content label {
    color: var(--sc-atrament-slaby);
    font-weight: bold;
    text-shadow: none;
}

/* ---------------------------------------------------------------------------
   8. Przyciski
   ---------------------------------------------------------------------------
   Byly gradientami z cieniem tekstu w stylu 2010 roku, w trzech wariantach
   generowanych przez cztery prefiksy przegladarek. Zostaje plaski ksztalt,
   ten sam dla <a>, <button> i <input type="submit">.

   float: left zostaje - na nim opiera sie uklad pasków z przyciskami
   w kilkudziesieciu szablonach i zdjecie go rozsypuje te ekrany.
   --------------------------------------------------------------------------- */

.content .buttons a,
.content .buttons button,
.content .buttons input[type="submit"],
.content button,
.content input[type="submit"] {
    background: var(--sc-tlo);
    background-image: none;
    filter: none;
    border: 1px solid var(--sc-kreska-mocna);
    border-radius: var(--sc-zaokraglenie);
    box-shadow: none;
    text-shadow: none;
    color: var(--sc-atrament);
    font-size: var(--sc-tekst);
    font-weight: bold;
    line-height: 1.2;
    padding: 7px 12px;
    margin: 0 7px 4px 0;
    cursor: pointer;
}

.content .buttons a:hover,
.content .buttons button:hover,
.content .buttons input[type="submit"]:hover,
.content button:hover,
.content input[type="submit"]:hover {
    background: var(--sc-tlo-delikatne);
    background-image: none;
    filter: none;
    border-color: var(--sc-akcent-jasny);
    color: var(--sc-akcent);
}

.content .buttons a:active,
.content .buttons button:active,
.content .buttons input[type="submit"]:active,
.content button:active,
.content input[type="submit"]:active {
    top: 0;
    background: #e8eef7;
    color: var(--sc-akcent);
}

.content .buttons a.positive,
.content button.positive,
.content .buttons input[type="submit"].positive,
.content input[type="submit"].positive {
    color: #fff;
    background: var(--sc-akcent);
    border-color: var(--sc-akcent);
}

.content .buttons a.positive:hover,
.content button.positive:hover,
.content .buttons input[type="submit"].positive:hover,
.content input[type="submit"].positive:hover {
    background: #103567;
    border-color: #103567;
    color: #fff;
}

.content .buttons a.negative,
.content button.negative,
.content .buttons input[type="submit"].negative,
.content input[type="submit"].negative {
    color: var(--sc-zly);
    background: var(--sc-tlo);
    border-color: #e6bdb7;
}

.content .buttons a.negative:hover,
.content button.negative:hover,
.content .buttons input[type="submit"].negative:hover,
.content input[type="submit"].negative:hover {
    background: #fbeceb;
    border-color: var(--sc-zly);
    color: var(--sc-zly);
}

/* Formularz w pasku przyciskow.
   Wiele przyciskow w tej aplikacji to osobne <form method="post"> - inaczej
   sie nie da, bo usuwanie i wysylanie musza byc POST-em. <form> jest elementem
   blokowym, wiec bez tego kazdy taki przycisk lamal linie i pasek robil sie
   schodkami. Zagniezdzone <p class="buttons"> dokladalo do tego wlasne
   marginesy - stad wyzerowanie. */
.content .buttons form {
    display: inline;
    float: left;
    margin: 0;
}

.content .buttons form p,
.content .buttons p {
    display: inline;
    margin: 0;
    padding: 0;
}

/* Pasek przyciskow konczy plywanie po sobie - bez tego tresc pod nim
   podjezdza na wysokosc przyciskow. */
.content .buttons::after {
    content: "";
    display: block;
    clear: both;
}

/* Znacznik stanu gwarancji. Serwisant stojacy przy urzadzeniu nie ma czasu
   porownywac daty z dzisiejsza - a pomylka w te strone kosztuje pieniadze. */
.znacznik-gwarancji {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: var(--sc-tekst-maly);
    font-weight: bold;
    white-space: nowrap;
}

.gwarancja-trwa { background: #e6f4ec; color: var(--sc-dobry); border-color: #bfe0cd; }
.gwarancja-konczy_sie { background: #fdf0e3; color: var(--sc-uwaga); border-color: #f2d6b6; }
.gwarancja-minela { background: #f1f3f5; color: var(--sc-atrament-slaby); border-color: var(--sc-kreska); }
.gwarancja-brak { display: none; }

/* ---------------------------------------------------------------------------
   9. Komunikaty
   ---------------------------------------------------------------------------
   Tla wskazywaly na pliki icon_warn.html i icon_ok.html - czyli na ikony,
   ktorych nigdy nie bylo pod tym adresem. Zostawal wciety na 36 px pusty
   obszar po lewej. Kolorowy pasek z boku mowi to samo bez obrazka.
   --------------------------------------------------------------------------- */

.message-error, .message-ok {
    background-image: none;
    padding: 10px 12px;
    border-radius: var(--sc-zaokraglenie);
    font-size: var(--sc-tekst);
    margin-bottom: 12px;
}

.message-error {
    background: #fbeceb;
    border: 1px solid #f0cbc8;
    border-left: 4px solid var(--sc-zly);
    color: #8c2a1e;
}

.message-ok {
    background: #eef6ef;
    border: 1px solid #cfe4d1;
    border-left: 4px solid var(--sc-dobry);
    color: #23602a;
}

/* ---------------------------------------------------------------------------
   10. Drobiazgi
   --------------------------------------------------------------------------- */

.content a {
    color: var(--sc-akcent);
}

.content a:hover {
    color: #0d2f66;
}

/* Tabela kontenerowa nie jest siatka danych - nie rysujemy jej ramek. */
table.kontener-danych, table.kontener-danych > tbody > tr > td {
    border: none;
    background: none;
}

/* Pole formularza z przyciskiem "dodaj", np. model urzadzenia.
   Ikona ma stac przy polu, do ktorego nalezy, a nie odplywac na prawy
   skraj tabeli - inaczej nikt jej z tym polem nie skojarzy. */
.content .pole-z-dodaniem {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.content .pole-z-dodaniem .pole-wymagane {
    margin: 0;
}

.content a.przycisk-dodania {
    flex: 0 0 auto;
    float: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-position: center;
    padding: 0;
    /* Bez tego ikona "wisi" nad linia bazowa pola tekstowego. */
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   11. Drzewo rzutow: oddzial > lokalizacja > kondygnacja
   ---------------------------------------------------------------------------
   Wyglad samej listy siedzi w content-style.css. Tutaj tylko to, co
   dokłada drzewo-rzutow.js: strzalki, liczniki i pole szukania.
   --------------------------------------------------------------------------- */

.drzewo-szukajka {
    margin: 8px 5px 6px;
}

.content .drzewo-szukajka input {
    width: 100%;
    box-sizing: border-box;
    min-height: 30px;
}

.drzewo-pusto {
    margin: 6px 5px;
    color: var(--sc-atrament-slaby);
    font-size: var(--sc-tekst-maly);
}

/* Nazwa galezi jest teraz przelacznikiem - musi to po sobie pokazywac. */
ul.drzewo-rzutow li.department > span.department-name,
ul.drzewo-rzutow ul.locationList > li > span {
    cursor: pointer;
    user-select: none;
}

ul.drzewo-rzutow li.department > span.department-name:hover,
ul.drzewo-rzutow ul.locationList > li > span:hover {
    color: var(--sc-akcent);
}

/* Odnosnik "edytuj" w nazwie ma dalej byc odnosnikiem, nie przelacznikiem. */
ul.drzewo-rzutow span a {
    cursor: pointer;
}

.galaz-strzalka {
    display: inline-block;
    width: 14px;
    margin-right: 2px;
    color: var(--sc-atrament-slaby);
    font-size: 10px;
    line-height: inherit;
    text-align: center;
}

/* Ile rzutow kryje sie w zwinietej galezi - inaczej nie wiadomo, czy
   warto ja otwierac. */
.galaz-licznik {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    background: var(--sc-tlo-naglowka);
    color: var(--sc-atrament-slaby);
    font-size: 10px;
    font-weight: normal;
    white-space: nowrap;
}

/* Lokalizacja bez strzalki mialaby wciecie z tla-ikony z content-style.css,
   a teraz miejsce zajmuje strzalka. */
ul.drzewo-rzutow ul.locationList > li > span {
    background: none;
    padding-left: 0;
}

/* ---------------------------------------------------------------------------
   12. Formularz oferty
   ---------------------------------------------------------------------------
   Pola mialy szerokosc z atrybutu size, ustawionego kiedys "na oko": temat
   i numer po 32 znaki, nazwa pozycji kosztorysu bez zadnej deklaracji, czyli
   domyslne dwadziescia kilka. Przy prawdziwej tresci - "Demontaz, montaz
   i uruchomienie radiolinii" - widac bylo trzecia czesc wpisu i trzeba bylo
   jezdzic strzalkami, zeby sprawdzic, co sie wpisalo.

   Szerokosci sa tu podane w em, a nie w procentach: tabela formularza nie ma
   ustawionej szerokosci i zwiera sie do zawartosci, wiec procent liczylby sie
   od tego, co juz jest, i niczego by nie zmienil. Kosztorys to inna sprawa -
   tamta tabela ma 100% szerokosci, wiec pole moze wypelnic kolumne.
   --------------------------------------------------------------------------- */

.content .formularz-oferty input#temat,
.content .formularz-oferty input#numer {
    width: 34em;
    max-width: 100%;
    box-sizing: border-box;
}

/* Uwagi to miejsce na opis usterki i warunki - kilka zdan, nie jedno. */
.content .formularz-oferty textarea#uwagi {
    width: 46em;
    max-width: 100%;
    min-height: 11em;
    box-sizing: border-box;
    resize: vertical;
}

/* Nazwa pozycji dostaje cala kolumne; reszta kolumn ma swoje size i tak
   ma zostac, bo to liczby. */
.content .formularz-oferty .pozycja-nazwa {
    width: 100%;
    box-sizing: border-box;
}

/* Kolumna z nazwa ma byc najszersza - bez tego przegladarka rozdziela
   szerokosc po rowno i opis znowu sie nie miesci. */
.content .formularz-oferty #pozycje-tabela th:nth-child(2) {
    width: 45%;
}

/* Podpowiedzi z magazynu musza byc szersze niz pole, bo nazwy z kartoteki
   bywaja dluzsze od tego, co czlowiek zdazyl wpisac. */
.content .formularz-oferty .ui-autocomplete {
    max-width: 46em;
}

/* ---------------------------------------------------------------------------
   13. Oznaczenia instancji: podpis
   --------------------------------------------------------------------------- */

/* Drugi blok w tym samym formularzu - potrzebuje wyraznej kreski, zeby nie
   wygladal na dalszy ciag danych firmy. */
h4.marka-naglowek {
    margin: 22px 0 8px;
    padding-top: 14px;
    border-top: 1px solid var(--sc-kreska);
    font-size: var(--sc-tekst-h3);
    color: var(--sc-atrament);
}

/* Podpis jest szeroki i niski - przy ograniczeniu wysokosci jak dla logo
   bylby paskiem nie do obejrzenia. */
img.marka-podglad-podpis {
    max-height: 90px;
    max-width: 360px;
}

/* Kolumna z uwagami w zestawieniu ofert: tekst jest skracany w szablonie,
   a to jest zapora na wypadek dlugiego ciagu bez spacji (numer, adres),
   ktorego nie ma gdzie zlamac. */
.content td.kolumna-uwagi {
    max-width: 28em;
    word-break: break-word;
}