*{
    box-sizing:border-box;
}

:root{
    --szerokosc:1120px;

    --pomarancz:#f47d1d;
    --pomarancz2:#ff9d39;

    --ciemny:#343a40;
    --ciemny2:#2f353b;
    --ciemny3:#272c31;

    --obramowanie:#4b535b;

    --bialy:#ffffff;
    --tekst:#f4f6f8;
    --szary:#c5cbd1;

    --zielony:#20a849;
    --czerwony:#e84b5b;
}


/* =========================================================
   PODSTAWA
   ========================================================= */

html,
body{
    margin:0;
    min-height:100%;
    font-family:"Segoe UI",Arial,sans-serif;
    color:var(--tekst);
}

body{
    background:
        linear-gradient(rgba(7,15,27,.22),rgba(7,15,27,.22)),
        url('images/nemots_polskie_tlo.jpg') center top/cover fixed no-repeat;
}

a{
    text-decoration:none;
    color:inherit;
}

.srodek{
    width:min(var(--szerokosc),calc(100% - 28px));
    margin-left:auto;
    margin-right:auto;
}


/* =========================================================
   GÓRA
   ========================================================= */

.gora{
    background:rgba(7,13,22,.64);
    border-bottom:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(3px);
}

.pasek-gora{
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    display:flex;
    align-items:center;
    gap:13px;
    text-shadow:0 2px 8px rgba(0,0,0,.7);
}

.znak-logo{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:8px;

    background:linear-gradient(180deg,#ff9e31,#b94b0e);
    border:2px solid rgba(255,255,255,.58);

    color:#fff;
    font:700 28px Georgia,serif;

    box-shadow:0 5px 20px rgba(0,0,0,.35);
}

.napis-logo{
    display:flex;
    flex-direction:column;
}

.napis-logo b{
    color:#fff;
    font:700 28px Georgia,serif;
    letter-spacing:2px;
}

.napis-logo b span{
    color:#ffc06d;
}

.napis-logo small{
    margin-top:5px;
    color:#e2ebf5;
    font-size:8px;
    letter-spacing:2.2px;
}

.status-mini{
    padding:9px 13px;
    border-radius:8px;

    background:rgba(4,10,18,.82);
    border:1px solid rgba(255,255,255,.18);

    color:#edf2f7;

    display:flex;
    align-items:center;
    gap:8px;

    font-size:11px;
}

.kropka{
    width:8px;
    height:8px;
    border-radius:50%;
}

.kropka.online{
    background:#3fe36d;
    box-shadow:0 0 10px #3fe36d;
}

.kropka.offline{
    background:#ff4d60;
    box-shadow:0 0 10px #ff4d60;
}


/* =========================================================
   BANER
   ========================================================= */

.baner{
    min-height:430px;
    margin-top:18px;

    position:relative;
    overflow:hidden;

    border:4px solid rgba(255,185,72,.86);
    border-radius:8px;

    background:
        linear-gradient(
            100deg,
            rgba(4,11,22,.82) 0%,
            rgba(7,17,31,.62) 43%,
            rgba(8,17,31,.17) 76%
        ),
        url('images/nemots_polskie_tlo.jpg') center 43%/cover no-repeat;

    box-shadow:
        0 18px 50px rgba(0,0,0,.42),
        inset 0 0 0 2px rgba(0,0,0,.35);
}

.baner:before{
    content:"";
    position:absolute;
    inset:8px;

    border:1px solid rgba(255,220,158,.34);

    pointer-events:none;
}

.baner-cien{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(0,201,255,.14),
            transparent 24%
        ),
        radial-gradient(
            circle at 81% 17%,
            rgba(255,91,0,.16),
            transparent 25%
        );
}

.baner-tekst{
    position:relative;
    z-index:2;

    width:58%;
    padding:78px 60px;
}

.maly-napis{
    color:#ffb342;
    font-size:10px;
    letter-spacing:3px;
    font-weight:900;
}

.baner-tekst h1{
    margin:12px 0;

    color:#fff;

    font:700 50px/1.05 Georgia,serif;

    text-shadow:0 4px 18px rgba(0,0,0,.76);
}

.baner-tekst p{
    margin:0;

    color:#e6edf5;

    font-size:15px;
    line-height:1.8;
}

.baner-info{
    position:absolute;
    z-index:2;

    left:36px;
    bottom:28px;

    display:flex;
    gap:10px;
}

.baner-info div{
    min-width:110px;

    padding:10px 14px;

    border-radius:5px;

    background:rgba(6,14,24,.80);
    border:1px solid rgba(255,255,255,.17);
}

.baner-info span{
    display:block;

    color:#9da9b7;

    font-size:7px;
    letter-spacing:1.2px;

    margin-bottom:4px;
}

.baner-info b{
    color:#fff;
    font-size:16px;
}

.baner-info b.zielony{
    color:#80ef9c;
}

.baner-info b.czerwony{
    color:#ff8793;
}


/* =========================================================
   MENU
   ========================================================= */

.menu{
    min-height:62px;

    margin-top:18px;
    margin-bottom:30px;

    padding:0 14px;

    display:flex;
    align-items:center;
    gap:18px;

    background:#111215;

    border:1px solid var(--pomarancz);
    border-radius:11px;

    box-shadow:0 8px 26px rgba(0,0,0,.32);
}

.menu-logo{
    color:var(--pomarancz);

    font-size:20px;
    font-weight:800;
}

.menu-linki{
    display:flex;
    align-items:center;
    gap:2px;

    flex:1;
}

.menu-linki a{
    color:#f3f3f3;

    padding:21px 9px;

    font-size:11px;
    font-weight:700;

    border-bottom:2px solid transparent;
}

.menu-linki a:hover,
.menu-linki a.aktywna{
    color:#ff9f38;
    border-bottom-color:#ff7b13;
}

.menu-przyciski{
    display:flex;
    gap:7px;
}

.przycisk{
    padding:10px 12px;

    border-radius:5px;

    font-size:11px;
    font-weight:800;
}

.przycisk.konto,
.przycisk.pobierz{
    color:#fff !important;

    background:linear-gradient(
        180deg,
        #ff9d39,
        #e36c16
    ) !important;

    border:1px solid #d56010 !important;
}


/* =========================================================
   UKŁAD
   ========================================================= */

.uklad{
    display:grid;

    grid-template-columns:minmax(0,1fr) 300px;

    gap:20px;

    align-items:start;
}


/* =========================================================
   GŁÓWNY PANEL
   ========================================================= */

.panel-glowny{
    background:var(--ciemny);

    border:1px solid var(--obramowanie);
    border-radius:7px;

    box-shadow:0 14px 40px rgba(0,0,0,.42);

    overflow:hidden;
}

.naglowek-panelu{
    padding:18px 20px;

    background:var(--ciemny2);

    border-bottom:2px solid var(--pomarancz);
}

.naglowek-panelu span{
    display:block;

    color:var(--pomarancz);

    font-size:8px;
    font-weight:900;
    letter-spacing:2px;
}

.naglowek-panelu h2{
    margin:4px 0 0;

    color:#fff;

    font:700 24px Georgia,serif;
}

.stara-tresc{
    min-height:350px;

    padding:20px;

    overflow-x:auto;

    background:var(--ciemny);

    color:var(--tekst);
}


/* =========================================================
   PRAWA KOLUMNA
   ========================================================= */

.prawa-kolumna{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.karta{
    padding:18px;

    background:var(--ciemny);

    border:1px solid var(--obramowanie);
    border-radius:7px;

    color:var(--tekst);

    box-shadow:0 12px 32px rgba(0,0,0,.34);
}

.karta h3{
    margin:0 0 14px;

    padding-bottom:12px;

    border-bottom:1px solid var(--obramowanie);

    text-align:center;

    font:700 18px Georgia,serif;

    color:#fff;
}

.karta p{
    font-size:12px;
    line-height:1.65;

    color:var(--szary);
}


/* =========================================================
   STATUS
   ========================================================= */

.duzy-status{
    text-align:center;

    font-size:16px;
    font-weight:900;

    padding:9px;

    border-radius:5px;

    margin-bottom:10px;
}

.duzy-status.online{
    color:#54dc7a;

    background:#263f30;

    border:1px solid #356345;
}

.duzy-status.offline{
    color:#ff6c79;

    background:#472c30;

    border:1px solid #744047;
}

.wiersz{
    display:flex;

    justify-content:space-between;

    padding:9px 0;

    border-bottom:1px solid var(--obramowanie);

    font-size:12px;

    color:var(--szary);
}

.wiersz b{
    color:#fff;
}


/* =========================================================
   PUNKTY PREMIUM
   ========================================================= */

.punkty{
    display:flex;

    justify-content:space-between;
    align-items:flex-end;

    padding:12px;

    background:var(--ciemny3);

    border:1px solid var(--pomarancz);
    border-radius:5px;

    margin-bottom:10px;
}

.punkty span{
    font-size:9px;

    color:#d7dbe0;
}

.punkty b{
    font-size:22px;

    color:var(--pomarancz);
}


/* =========================================================
   DUŻE PRZYCISKI
   ========================================================= */

.duzy-przycisk{
    display:block;

    text-align:center;

    padding:11px;

    margin-top:8px;

    border-radius:5px;

    color:#fff !important;

    font-size:11px;
    font-weight:800;

    background:linear-gradient(
        180deg,
        #ff9d39,
        #e36c16
    ) !important;

    border:1px solid #d56010 !important;

    box-shadow:0 2px 6px rgba(0,0,0,.25);

    transition:.15s;
}

.duzy-przycisk:hover{
    filter:brightness(1.08);

    transform:translateY(-1px);
}

.duzy-przycisk.pomarancz,
.duzy-przycisk.niebieski{
    background:linear-gradient(
        180deg,
        #ff9d39,
        #e36c16
    ) !important;

    color:#fff !important;

    border:1px solid #d56010 !important;
}


/* =========================================================
   SZYBKIE LINKI
   ========================================================= */

.szybki-link{
    display:flex;

    justify-content:space-between;

    padding:10px 2px;

    border-bottom:1px solid var(--obramowanie);

    color:var(--szary);

    font-size:12px;
}

.szybki-link:hover{
    color:var(--pomarancz);
}

.szybki-link b{
    font-size:15px;
}


/* =========================================================
   EVENTY
   ========================================================= */

.eventy{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;
}

.eventy span{
    padding:9px 8px;

    text-align:center;

    border-radius:5px;

    background:var(--ciemny3);

    border:1px solid var(--obramowanie);

    color:#fff;

    font-size:10px;
    font-weight:700;
}


/* =========================================================
   STARY GESIOR
   GLOBALNY CIEMNY WYGLĄD
   ========================================================= */

.stara-tresc h1,
.stara-tresc h2,
.stara-tresc h3,
.stara-tresc h4,
.stara-tresc h5{
    color:#fff !important;

    font-family:Georgia,serif;
}

.stara-tresc p,
.stara-tresc label{
    color:var(--tekst);
}

.stara-tresc strong,
.stara-tresc b{
    color:#fff;
}

.stara-tresc a{
    color:#ff9638 !important;
}

.stara-tresc a:hover{
    color:#ffb066 !important;
}


/* =========================================================
   TABELE GESIORA
   ========================================================= */

.stara-tresc table{
    max-width:100%;

    color:var(--tekst);

    border-color:var(--obramowanie);
}

.stara-tresc .TableContainer,
.stara-tresc .InnerTableContainer,
.stara-tresc .TableContentContainer,
.stara-tresc .TableContent,
.stara-tresc .SmallBox,
.stara-tresc .MessageContainer,
.stara-tresc .Message{
    background:var(--ciemny) !important;

    background-image:none !important;

    color:var(--tekst) !important;

    border-color:var(--obramowanie) !important;
}

.stara-tresc .TableContainer table,
.stara-tresc .InnerTableContainer table{
    width:100% !important;

    background:transparent !important;

    border-collapse:separate !important;

    border-spacing:0 !important;
}

.stara-tresc .TableContainer tr,
.stara-tresc .InnerTableContainer tr,
.stara-tresc .TableContainer td,
.stara-tresc .InnerTableContainer td,
.stara-tresc td.LabelV,
.stara-tresc .Odd,
.stara-tresc .Even,
.stara-tresc tr[bgcolor],
.stara-tresc tr[bgcolor] td{
    background:var(--ciemny) !important;

    background-image:none !important;

    color:var(--tekst) !important;

    border-color:var(--obramowanie) !important;
}


/* =========================================================
   NAGŁÓWKI TABEL
   ========================================================= */

.stara-tresc .CaptionContainer,
.stara-tresc .CaptionInnerContainer,
.stara-tresc .CaptionContainer td,
.stara-tresc .CaptionInnerContainer td{
    background:var(--ciemny3) !important;

    background-image:none !important;

    color:#fff !important;

    border-color:var(--pomarancz) !important;
}

.stara-tresc td.LabelV{
    font-weight:700 !important;

    padding:7px 10px !important;
}


/* =========================================================
   STARE RAMKI GRAFICZNE
   ========================================================= */

.stara-tresc .BoxFrameHorizontal,
.stara-tresc .BoxFrameVerticalLeft,
.stara-tresc .BoxFrameVerticalRight,
.stara-tresc .BoxFrameEdgeLeftTop,
.stara-tresc .BoxFrameEdgeRightTop,
.stara-tresc .BoxFrameEdgeRightBottom,
.stara-tresc .BoxFrameEdgeLeftBottom{
    background-image:none !important;

    background-color:var(--ciemny) !important;
}


/* =========================================================
   FORMULARZE
   ========================================================= */

.stara-tresc input[type=text],
.stara-tresc input[type=password],
.stara-tresc input[type=email],
.stara-tresc input[type=number],
.stara-tresc input[type=search],
.stara-tresc select,
.stara-tresc textarea{
    background:#f7f7f7 !important;

    color:#20262d !important;

    border:1px solid #c5cbd1 !important;

    border-radius:5px !important;

    padding:8px 10px !important;

    min-height:32px;
}

.stara-tresc input[type=text]:focus,
.stara-tresc input[type=password]:focus,
.stara-tresc input[type=email]:focus,
.stara-tresc input[type=number]:focus,
.stara-tresc input[type=search]:focus,
.stara-tresc select:focus,
.stara-tresc textarea:focus{
    border-color:var(--pomarancz) !important;

    outline:none !important;

    box-shadow:
        0 0 0 2px rgba(244,125,29,.18) !important;
}


/* =========================================================
   PRZYCISKI FORMULARZY
   ========================================================= */

.stara-tresc input[type=submit],
.stara-tresc input[type=button],
.stara-tresc input[type=reset],
.stara-tresc button{
    background:linear-gradient(
        180deg,
        #ff9d39,
        #e36c16
    ) !important;

    border:1px solid #d56010 !important;

    color:#fff !important;

    border-radius:5px !important;

    padding:8px 18px !important;

    min-height:34px !important;

    font-weight:800 !important;

    cursor:pointer !important;

    box-shadow:0 2px 5px rgba(0,0,0,.25);
}


/* =========================================================
   SKLEP
   ========================================================= */

.stara-tresc a.shop-nemots-btn{
    display:inline-block !important;

    background:linear-gradient(
        180deg,
        #ff9d39,
        #e36c16
    ) !important;

    border:1px solid #d56010 !important;

    color:#fff !important;

    border-radius:5px !important;

    padding:8px 14px !important;

    font-weight:800 !important;

    text-decoration:none !important;

    box-shadow:0 2px 5px rgba(0,0,0,.25);
}


/* =========================================================
   CREATE ACCOUNT
   OBSŁUGA WCZEŚNIEJSZEGO WRAPPERA
   ========================================================= */

.nemots-create-wrap{
    background:var(--ciemny) !important;

    color:#fff !important;

    border-color:var(--obramowanie) !important;
}

.nemots-create-wrap table,
.nemots-create-wrap tbody,
.nemots-create-wrap tr,
.nemots-create-wrap td{
    background:var(--ciemny) !important;

    background-image:none !important;

    color:#fff !important;

    border-color:var(--obramowanie) !important;
}

.nemots-create-wrap input[type=text],
.nemots-create-wrap input[type=password],
.nemots-create-wrap input[type=email]{
    background:#fff !important;

    color:#222 !important;
}


/* =========================================================
   DODATKOWE WYMUSZENIE KOLORÓW
   ========================================================= */

.stara-tresc td{
    color:var(--tekst) !important;
}

.stara-tresc th{
    color:#fff !important;
}

.stara-tresc tr{
    border-color:var(--obramowanie) !important;
}

.stara-tresc hr{
    border:0;

    border-top:1px solid var(--obramowanie);
}


/* =========================================================
   STOPKA
   ========================================================= */

.stopka{
    margin-top:80px;

    padding:30px 0 28px;

    color:#fff;

    text-shadow:0 2px 6px rgba(0,0,0,.7);
}

.stopka-kolumny{
    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:40px;

    max-width:720px;
}

.stopka-kolumny div{
    display:flex;

    flex-direction:column;

    gap:5px;
}

.stopka-kolumny b{
    margin-bottom:4px;

    color:#ffd497;

    font-size:13px;
}

.stopka-kolumny a{
    font-size:12px;

    color:#fff;
}

.stopka-kolumny a:hover{
    color:#ffb45b;
}

.copyright{
    text-align:center;

    margin-top:30px;

    font-size:11px;

    color:#e1e7ef;
}


/* =========================================================
   TELEFON / TABLET
   ========================================================= */

@media(max-width:940px){

    .uklad{
        grid-template-columns:1fr;
    }

    .menu-linki{
        flex-wrap:wrap;
    }

    .menu{
        align-items:flex-start;

        padding-top:8px;
        padding-bottom:8px;
    }

    .menu-przyciski{
        flex-direction:column;
    }

    .baner-tekst{
        width:75%;

        padding-left:38px;
    }
}


@media(max-width:680px){

    .srodek{
        width:calc(100% - 14px);
    }

    .status-mini{
        display:none;
    }

    .napis-logo b{
        font-size:22px;
    }

    .napis-logo small{
        display:none;
    }

    .baner{
        min-height:390px;
    }

    .baner-tekst{
        width:100%;

        padding:44px 24px;
    }

    .baner-tekst h1{
        font-size:36px;
    }

    .baner-info{
        left:20px;
        right:20px;
        bottom:18px;
    }

    .baner-info div{
        min-width:0;

        flex:1;
    }

    .menu{
        flex-direction:column;

        align-items:stretch;

        gap:4px;
    }

    .menu-logo{
        text-align:center;

        padding-top:8px;
    }

    .menu-linki{
        justify-content:center;
    }

    .menu-linki a{
        padding:9px 6px;
    }

    .menu-przyciski{
        flex-direction:row;

        justify-content:center;

        padding-bottom:8px;
    }

    .stopka-kolumny{
        grid-template-columns:1fr;

        gap:18px;
    }
}
/* LOGIN - usuniecie bialej ramki */
.stara-tresc .TableContainer,
.stara-tresc .InnerTableContainer,
.stara-tresc .TableContentContainer,
.stara-tresc .TableContent,
.stara-tresc .SmallBox,
.stara-tresc .MessageContainer {
    background:#343a40 !important;
    border-color:#343a40 !important;
}

/* zewnetrzne elementy starej ramki Gesiora */
.stara-tresc .BoxFrameHorizontal,
.stara-tresc .BoxFrameVerticalLeft,
.stara-tresc .BoxFrameVerticalRight,
.stara-tresc .BoxFrameEdgeLeftTop,
.stara-tresc .BoxFrameEdgeRightTop,
.stara-tresc .BoxFrameEdgeRightBottom,
.stara-tresc .BoxFrameEdgeLeftBottom {
    background:#343a40 !important;
    background-image:none !important;
    border-color:#343a40 !important;
}

/* dodatkowe komorki tworzace obramowanie */
.stara-tresc td {
    border-color:#343a40 !important;
}

/* NEMOTS - tylko szara ramka formularza logowania.
   Nadpisuje jasne tlo ustawione w accountmanagement.php. */
.stara-tresc form[action="?subtopic=accountmanagement"] .InnerTableContainer {
    background:#343a40 !important;
    background-image:none !important;
    border-color:#4b535b !important;
}

/* Czytelne podpisy na szarym tle. */
.stara-tresc form[action="?subtopic=accountmanagement"] .InnerTableContainer td.LabelV,
.stara-tresc form[action="?subtopic=accountmanagement"] .InnerTableContainer td.LabelV span {
    color:#f4f6f8 !important;
}
/* Powi�kszenie �Aktualno�ci� w g�rnym menu */
.menu-linki > a[href*="subtopic=latestnews"] {
  font-size: 16px !important;
  font-weight: 700 !important;
}