/* =========================================================
   EVOLERA.PL - DARK OBSIDIAN MENU
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL MENU COLORS
   --------------------------------------------------------- */

.Menu,
.menu,
#menu,
.sidebar,
.left-menu,
.LeftMenu {

    color: #ffffff !important;

}


/* ---------------------------------------------------------
   LINKI
   --------------------------------------------------------- */

.Menu a,
.menu a,
#menu a,
.sidebar a,
.left-menu a,
.LeftMenu a,
.MenuContent a,
.MenuContentContainer a {

    color: #ffffff !important;

    text-decoration: none !important;

    text-shadow:
        0 1px 2px #000000 !important;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        padding-left 0.15s ease,
        box-shadow 0.15s ease !important;
}


/* ---------------------------------------------------------
   ZWYKŁE WIERSZE MENU
   --------------------------------------------------------- */

.MenuContent,
.MenuContentContainer,
.menu-item,
.sidebar-item {

    color: #ffffff !important;

    background:

        linear-gradient(
            90deg,
            #08080b 0%,
            #111116 50%,
            #09090c 100%
        ) !important;

}


/* ---------------------------------------------------------
   ELEMENTY TABEL
   --------------------------------------------------------- */

.MenuContent td,
.MenuContentContainer td {

    color: #ffffff !important;

    background:

        linear-gradient(
            90deg,
            #09090c 0%,
            #111116 55%,
            #08080b 100%
        ) !important;

    border-bottom:
        1px solid #35353d !important;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.Menu a:hover,
.menu a:hover,
#menu a:hover,
.sidebar a:hover,
.left-menu a:hover,
.LeftMenu a:hover,
.MenuContent a:hover,
.MenuContentContainer a:hover {

    color: #ffffff !important;

    text-shadow:
        0 0 4px rgba(255,255,255,0.35),
        0 1px 2px #000000 !important;
}


/* menu row hover */

.MenuContent td:hover,
.MenuContentContainer td:hover {

    background:

        linear-gradient(
            90deg,
            #351448 0%,
            #211329 20%,
            #16131b 48%,
            #101014 100%
        ) !important;

    box-shadow:

        inset 3px 0 0 #ffffff,

        inset 7px 0 13px
        rgba(113,38,170,0.30) !important;
}


/* ---------------------------------------------------------
   STARE ZIELONE TŁO -> CZARNE
   --------------------------------------------------------- */

.MenuContent,
.MenuContentContainer,

div[class*="MenuContent"] {

    background-color:
        #0b0b0e !important;

}


/* ---------------------------------------------------------
   SEPARATORY
   --------------------------------------------------------- */

.MenuContent td,
.MenuContentContainer td,
.menu li,
.sidebar li {

    border-color:
        #36363e !important;
}


/* ---------------------------------------------------------
   NAGŁÓWKI
   Jeżeli nagłówek nie jest grafiką
   --------------------------------------------------------- */

.menu-header,
.menu-title,
.sidebar-title,
.box-title {

    color: #ffffff !important;

    background:

        linear-gradient(
            180deg,
            #303036 0%,
            #1b1b20 20%,
            #101014 55%,
            #050506 100%
        ) !important;

    border-top:
        1px solid #66666f !important;

    border-bottom:
        1px solid #050505 !important;

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,0.12),

        inset 0 -3px 5px
        rgba(0,0,0,0.9),

        0 2px 6px
        rgba(0,0,0,0.8) !important;

    text-shadow:

        0 2px 2px #000000,

        0 0 5px
        rgba(255,255,255,0.15) !important;
}


/* ---------------------------------------------------------
   FIOLETOWY AKCENT
   --------------------------------------------------------- */

.MenuContent a:hover::before,
.MenuContentContainer a:hover::before {

    content: "›";

    color: #a553df;

    margin-right: 4px;

    text-shadow:
        0 0 6px
        rgba(155,70,220,0.65);
}


/* ---------------------------------------------------------
   TEKST
   --------------------------------------------------------- */

.MenuContent,
.MenuContentContainer,
.MenuContent span,
.MenuContentContainer span,
.MenuContent div,
.MenuContentContainer div {

    color: #ffffff !important;
}


/* ---------------------------------------------------------
   OBSIDIAN PANEL
   --------------------------------------------------------- */

.Menu,
.menu,
.sidebar,
.LeftMenu {

    background:
        #08080b !important;

    box-shadow:

        0 0 12px
        rgba(0,0,0,0.95),

        0 0 18px
        rgba(74,22,117,0.20) !important;
}


/* ---------------------------------------------------------
   DROBNE OBRAMOWANIA
   --------------------------------------------------------- */

.MenuContentContainer {

    border-left:
        1px solid #292930 !important;

    border-right:
        1px solid #292930 !important;
}


/* ---------------------------------------------------------
   BIALY TEKST ZAMIAST SZAREGO
   --------------------------------------------------------- */

.MenuContent a:link,
.MenuContent a:visited,
.MenuContentContainer a:link,
.MenuContentContainer a:visited {

    color:
        #ffffff !important;
}


/* ---------------------------------------------------------
   AKTYWNY ELEMENT
   --------------------------------------------------------- */

.MenuContent .active,
.MenuContentContainer .active,
.menu .active {

    color:
        #ffffff !important;

    background:

        linear-gradient(
            90deg,
            #341348,
            #1c1422 40%,
            #101014
        ) !important;

    box-shadow:

        inset 3px 0 0
        #ffffff !important;
}


/* ---------------------------------------------------------
   SCROLLBAR
   --------------------------------------------------------- */

::-webkit-scrollbar {

    width: 8px;

}

::-webkit-scrollbar-track {

    background:
        #08080b;

}

::-webkit-scrollbar-thumb {

    background:
        #45454e;

    border-radius:
        4px;

}

::-webkit-scrollbar-thumb:hover {

    background:
        #76508d;

}


/* =========================================================
   EVOLERA DARK MENU V2
   Exact selectors for templates/evolera
   ========================================================= */


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

#Menu {
    position: relative !important;

    background:
        linear-gradient(
            90deg,
            #07070a 0%,
            #101014 50%,
            #07070a 100%
        ) !important;

    box-shadow:
        0 0 18px rgba(0,0,0,0.95),
        0 0 15px rgba(80,25,125,0.16) !important;
}


/* =========================================================
   NEWS / ACCOUNT / COMMUNITY / FORUM / LIBRARY / SHOP
   ========================================================= */

#Menu .MenuButton {

    position: relative !important;

    height: 32px !important;
    width: 170px !important;

    /* zabija stary beige button-background.gif */
    background-image: none !important;

    background:
        linear-gradient(
            180deg,
            #34343b 0%,
            #222228 12%,
            #121216 48%,
            #08080b 76%,
            #030304 100%
        ) !important;

    border-top:
        1px solid #777780 !important;

    border-bottom:
        1px solid #000000 !important;

    box-sizing:
        border-box !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.13),
        inset 0 -3px 6px rgba(0,0,0,0.95),
        0 2px 5px rgba(0,0,0,0.85) !important;

    cursor:
        pointer !important;

    overflow:
        hidden !important;
}


/* delikatna tekstura */

#Menu .MenuButton::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 35% 0%,
            rgba(255,255,255,0.08),
            transparent 48%
        ),
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255,255,255,0.025) 35%,
            transparent 36%,
            transparent 100%
        );

    z-index: 0;
}


/* =========================================================
   HOVER NAGŁÓWKA
   ========================================================= */

#Menu .MenuButton:hover {

    background:
        linear-gradient(
            180deg,
            #45414a 0%,
            #29232f 18%,
            #17121d 52%,
            #0b090e 100%
        ) !important;

    border-top:
        1px solid #9e91a7 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.20),
        inset 3px 0 0 #ffffff,
        inset 6px 0 13px rgba(98,34,145,0.25),
        0 0 8px rgba(87,30,130,0.28) !important;
}


/* stary hover GIF wyłączamy */

#Menu .MenuButton .Button {

    background-image:
        none !important;

    background:
        transparent !important;
}


/* =========================================================
   IKONY
   zostają stare ikonki Tibii
   ========================================================= */

#Menu .Icon {

    z-index:
        3 !important;

    filter:
        brightness(0.82)
        contrast(1.20)
        saturate(0.75) !important;

    transition:
        filter 0.15s ease !important;
}

#Menu .MenuButton:hover .Icon {

    filter:
        brightness(1.15)
        contrast(1.15)
        saturate(0.9)
        drop-shadow(0 0 3px rgba(177,110,220,0.35)) !important;
}


/* =========================================================
   STARE GRAFICZNE LABEL-*.GIF WYŁĄCZAMY
   ========================================================= */

#Menu .Label {

    background-image:
        none !important;

    z-index:
        4 !important;

    height:
        26px !important;

    top:
        3px !important;

    left:
        42px !important;

    width:
        118px !important;

    color:
        #ffffff !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        17px !important;

    font-weight:
        bold !important;

    line-height:
        26px !important;

    letter-spacing:
        0.3px !important;

    text-align:
        center !important;

    text-shadow:
        0 2px 2px #000000,
        0 0 4px rgba(255,255,255,0.22) !important;
}


/* =========================================================
   TEKST NAGŁÓWKÓW
   ========================================================= */

#news_Label::after {
    content: "News";
}

#account_Label::after {
    content: "Account";
}

#community_Label::after {
    content: "Community";
}

#forum_Label::after {
    content: "Forum";
}

#library_Label::after {
    content: "Library";
}

#shops_Label::after {
    content: "Shop";
}


/* =========================================================
   PLUS / MINUS
   ========================================================= */

#Menu .Extend {

    z-index:
        5 !important;

    filter:
        grayscale(1)
        brightness(1.75)
        contrast(1.15) !important;

    opacity:
        0.85 !important;
}


/* =========================================================
   ZIELONE LAMPKI -> FIOLETOWO/SREBRNE
   ========================================================= */

#Menu .Lights div {

    background-image:
        none !important;

    background:
        #a25be0 !important;

    box-shadow:
        0 0 5px rgba(162,91,224,0.75) !important;
}


/* =========================================================
   SUBMENU
   ========================================================= */

#Menu .Submenu {

    position:
        relative !important;

    margin-left:
        5px !important;

    margin-right:
        5px !important;

    width:
        160px !important;

    /* stare #0D2E2B usunięte */
    background-color:
        #09090c !important;

    background:
        linear-gradient(
            90deg,
            #07070a 0%,
            #111116 50%,
            #08080b 100%
        ) !important;

    border-left:
        1px solid #303038 !important;

    border-right:
        1px solid #303038 !important;

    box-sizing:
        border-box !important;

    box-shadow:
        inset 0 0 11px rgba(0,0,0,0.75) !important;
}


/* =========================================================
   WIERSZ SUBMENU
   ========================================================= */

#Menu .Submenuitem {

    position:
        relative !important;

    min-height:
        22px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        linear-gradient(
            90deg,
            #09090c 0%,
            #111116 55%,
            #09090c 100%
        ) !important;

    border-bottom:
        1px solid #34343c !important;

    box-sizing:
        border-box !important;

    transition:
        background 0.12s ease,
        box-shadow 0.12s ease !important;
}


/* =========================================================
   HOVER SUBMENU
   ========================================================= */

#Menu .Submenuitem:hover {

    background:
        linear-gradient(
            90deg,
            #321343 0%,
            #211329 18%,
            #17131b 47%,
            #101014 100%
        ) !important;

    box-shadow:
        inset 3px 0 0 #ffffff,
        inset 8px 0 15px rgba(106,37,155,0.26) !important;
}


/* =========================================================
   NAZWY LINKÓW
   ========================================================= */

#Menu .SubmenuitemLabel {

    color:
        #ffffff !important;

    font-weight:
        bold !important;

    text-shadow:
        0 1px 2px #000000 !important;

    transition:
        color 0.12s ease,
        text-shadow 0.12s ease !important;
}


#Menu .Submenuitem:hover .SubmenuitemLabel {

    color:
        #ffffff !important;

    text-shadow:
        0 0 5px rgba(255,255,255,0.30),
        0 1px 2px #000000 !important;
}


/* linki */

#Menu a,
#Menu a:link,
#Menu a:visited,
#Menu a:hover,
#Menu a:active {

    color:
        #ffffff !important;

    text-decoration:
        none !important;
}


/* =========================================================
   ŁAŃCUCHY
   ========================================================= */

#Menu .LeftChain,
#Menu .RightChain {

    filter:
        grayscale(1)
        brightness(0.48)
        contrast(1.55) !important;

    opacity:
        0.95 !important;
}


/* =========================================================
   IKONA AKTYWNEGO SUBMENU
   ========================================================= */

#Menu .ActiveSubmenuItemIcon {

    filter:
        hue-rotate(235deg)
        saturate(1.7)
        brightness(1.25)
        drop-shadow(0 0 3px rgba(151,70,205,0.65)) !important;

    z-index:
        5 !important;
}


/* =========================================================
   TOP / BOTTOM MENU
   ========================================================= */

#MenuTop,
#MenuBottom {

    filter:
        grayscale(1)
        brightness(0.38)
        contrast(1.60) !important;
}


/* =========================================================
   CZYSTY BIAŁY TEKST
   ========================================================= */

#Menu,
#Menu span,
#Menu div {

    --evolera-white:
        #ffffff;
}


/* =========================================================
   KONIEC EVOLERA DARK MENU V2
   ========================================================= */


/* =========================================================
   EVOLERA DARK LOGIN BOX
   ========================================================= */

/* cały box logowania */
#Loginbox,
#LoginBox,
#Login,
#LoginArea {
    color: #ffffff !important;
}

/* wszystko w środku na biało */
#Loginbox *,
#LoginBox *,
#Login *,
#LoginArea * {
    color: #ffffff !important;
    text-shadow: 0 1px 2px #000000 !important;
}

/* góra / dół boxa */
#LoginTop,
#LoginBottom {
    filter: grayscale(1) brightness(0.40) contrast(1.55) !important;
}

/* boczne łańcuchy / border */
.LoginBorder,
#BorderLeft,
#BorderRight {
    filter: grayscale(1) brightness(0.48) contrast(1.45) !important;
    opacity: 0.96 !important;
}

/* środek boxa */
.Loginstatus {
    background:
        linear-gradient(
            180deg,
            #34343b 0%,
            #1f1f25 20%,
            #111116 52%,
            #09090c 100%
        ) !important;

    border-top: 1px solid #75757e !important;
    border-bottom: 1px solid #050505 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -3px 6px rgba(0,0,0,0.92),
        0 2px 8px rgba(0,0,0,0.75) !important;
}

/* tekst "You are not logged in" itp */
.Loginstatus,
.Loginstatus div,
.Loginstatus span,
.Loginstatus td,
.Loginstatus strong,
.Loginstatus b {
    color: #ffffff !important;
}

/* linki typu Create Account */
.Loginstatus a,
.Loginstatus a:link,
.Loginstatus a:visited {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: bold !important;
}

.Loginstatus a:hover {
    color: #d8c6ee !important;
    text-shadow:
        0 0 5px rgba(170,110,220,0.35),
        0 1px 2px #000000 !important;
}

/* inputy login/hasło */
.Loginstatus input[type="text"],
.Loginstatus input[type="password"],
.Loginstatus input[type="email"],
#Loginbox input[type="text"],
#Loginbox input[type="password"],
#LoginBox input[type="text"],
#LoginBox input[type="password"] {

    background: #0c0c10 !important;
    color: #ffffff !important;

    border: 1px solid #4c4c57 !important;
    outline: none !important;

    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.85),
        0 0 0 1px rgba(255,255,255,0.03) !important;
}

/* przycisk LOGIN */
.Loginstatus input[type="submit"],
.Loginstatus input[type="button"],
.Loginstatus button,
#Loginbox input[type="submit"],
#LoginBox input[type="submit"] {

    background-image: none !important;

    background:
        linear-gradient(
            180deg,
            #5d4920 0%,
            #b58a2b 18%,
            #d8b356 50%,
            #9b7122 82%,
            #654814 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid #e2c170 !important;
    border-bottom: 1px solid #5e4314 !important;

    font-weight: bold !important;
    text-shadow: 0 1px 2px #000000 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 2px 4px rgba(0,0,0,0.45) !important;

    cursor: pointer !important;
}

.Loginstatus input[type="submit"]:hover,
.Loginstatus input[type="button"]:hover,
.Loginstatus button:hover,
#Loginbox input[type="submit"]:hover,
#LoginBox input[type="submit"]:hover {

    background:
        linear-gradient(
            180deg,
            #745924 0%,
            #d0a13a 20%,
            #f0ca6b 50%,
            #b28026 82%,
            #715018 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 0 7px rgba(177,127,37,0.38) !important;
}

/* jeśli jest tabela wewnątrz */
.Loginstatus table,
.Loginstatus tr,
.Loginstatus td {
    background: transparent !important;
    border: 0 !important;
}

/* lekkie wyrównanie tekstu */
.Loginstatus {
    letter-spacing: 0.2px !important;
}

/* =========================================================
   KONIEC LOGIN PATCH
   ========================================================= */

/* =========================================================
   EVOLERA - MY ACCOUNT / LOGIN BUTTON FINAL OVERRIDE
   ========================================================= */

#Loginbox #LoginButton,
#LoginBox #LoginButton,
#LoginButton {

    background-image: none !important;

    background:
        linear-gradient(
            180deg,
            #34343a 0%,
            #222228 16%,
            #131318 50%,
            #0a0a0d 78%,
            #050506 100%
        ) !important;

    border:
        1px solid #5a5a64 !important;

    border-top:
        1px solid #898993 !important;

    border-bottom:
        1px solid #000000 !important;

    box-sizing:
        border-box !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.13),
        inset 0 -3px 5px rgba(0,0,0,0.85),
        0 2px 5px rgba(0,0,0,0.80) !important;

    overflow:
        hidden !important;

    cursor:
        pointer !important;
}


/* WYŁĄCZAMY sbutton_over.gif */

#Loginbox #LoginButton .Button,
#LoginBox #LoginButton .Button,
#LoginButton .Button {

    background-image:
        none !important;

    background:
        transparent !important;

    visibility:
        visible !important;

    position:
        absolute !important;

    inset:
        0 !important;

    width:
        100% !important;

    height:
        100% !important;

    pointer-events:
        none !important;
}


/* FIOLETOWY HOVER */

#Loginbox #LoginButton:hover,
#LoginBox #LoginButton:hover,
#LoginButton:hover {

    background:
        linear-gradient(
            180deg,
            #48414f 0%,
            #2d2433 18%,
            #1b1420 52%,
            #0d0a10 100%
        ) !important;

    border-top:
        1px solid #a9a0b0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.20),
        inset 3px 0 0 #ffffff,
        inset 7px 0 13px rgba(115,45,170,0.25),
        0 0 7px rgba(90,30,135,0.30) !important;
}


/* NAPIS MY ACCOUNT / LOGIN */

#Loginbox #LoginButton #ButtonText,
#LoginBox #LoginButton #ButtonText,
#LoginButton #ButtonText {

    background-image:
        none !important;

    color:
        #ffffff !important;

    font-family:
        Arial, Helvetica, sans-serif !important;

    font-size:
        13px !important;

    font-weight:
        bold !important;

    line-height:
        100% !important;

    text-align:
        center !important;

    text-shadow:
        0 1px 2px #000000,
        0 0 4px rgba(255,255,255,0.20) !important;

    z-index:
        10 !important;
}


/* kontener pod guzikiem */

#LoginButtonContainer {

    background-image:
        none !important;

    background:
        #08080b !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/* LOGOUT */

#LoginstatusText_2,
#LoginstatusText_2_1,
#LoginstatusText_2_2 {

    background-image:
        none !important;

    color:
        #bfbfc7 !important;

    font-family:
        Arial, Helvetica, sans-serif !important;

    font-size:
        11px !important;

    font-weight:
        bold !important;

    text-align:
        center !important;

    text-shadow:
        0 1px 2px #000000 !important;
}

#LoginstatusText_2_2:hover {

    color:
        #ffffff !important;
}

/* =========================================================
   KONIEC BUTTON FINAL OVERRIDE
   ========================================================= */


/* =========================================================
   EVOLERA - LOGIN / MY ACCOUNT BUTTON CENTER + FONT FIX
   ========================================================= */

#LoginButton {
    position: relative !important;
}

#LoginButton #ButtonText {
    background-image: none !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    /* font bardziej zbliżony do starego stylu */
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;

    color: #ffffff !important;
    text-align: center !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;

    text-shadow:
        0 1px 2px #000000,
        0 0 3px rgba(255,255,255,0.18) !important;

    z-index: 25 !important;
    pointer-events: none !important;
}

/* wewnętrzny wrapper w buttonie */
#LoginButton > div {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

/* lekka korekta pionowa */
#LoginButton #ButtonText {
    transform: translateY(-1px) !important;
}


/* ===== LOGOUT - normalny tekst ===== */

#LoginstatusText_2,
#LoginstatusText_2_1,
#LoginstatusText_2_2 {
    background-image: none !important;
}

/* tekst pokazujemy na głównym elemencie */
#LoginstatusText_2::after {
    content: "Logout";

    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #c8c8ce;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;

    text-align: center;
    text-shadow:
        0 1px 2px #000,
        0 0 3px rgba(255,255,255,.12);

    pointer-events: none;
}

#LoginstatusText_2:hover::after {
    color: #ffffff;
    text-shadow:
        0 0 5px rgba(160,90,210,.45),
        0 1px 2px #000;
}

/* ===== WIĘKSZY LOGIN BOX ===== */

#Loginbox {
    transform: scale(1.10);
    transform-origin: top left;
    margin-bottom: 12px;
}

#LoginButton {
    height: 38px !important;
}

#LoginButton #ButtonText {
    font-size: 15px !important;
}

#LoginstatusText_2::after {
    font-size: 12px !important;
}

.Loginstatus {
    min-height: 24px !important;
}

/* =========================================================
   LOGIN BOX - większy panel, mniejszy button, miejsce na Logout
   ========================================================= */

#Loginbox {
    transform: scale(1.12) !important;
    transform-origin: top left !important;

    /* dodatkowe miejsce pod Logout */
    margin-bottom: 18px !important;
}


/* górny status */
#Loginbox .Loginstatus {
    min-height: 22px !important;
}


/* kontener buttona */
#LoginButtonContainer {
    min-height: 32px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}


/* sam przycisk LOGIN / MY ACCOUNT */
#LoginButton {
    height: 28px !important;

    margin-top: 1px !important;
    margin-bottom: 1px !important;

    position: relative !important;
}


/* tekst na środku buttona */
#LoginButton #ButtonText {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transform: none !important;

    padding: 0 !important;
    margin: 0 !important;

    font-size: 13px !important;
    line-height: 28px !important;

    text-align: center !important;
}


/* LOGOUT - osobny pasek pod buttonem */
#LoginstatusText_2 {
    position: relative !important;

    min-height: 18px !important;

    margin-top: 2px !important;
}


/* normalny tekst Logout */
#LoginstatusText_2::after {
    content: "Logout";

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #bdbdc5 !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 18px !important;

    text-align: center !important;

    text-shadow:
        0 1px 2px #000000 !important;
}


/* hover Logout */
#LoginstatusText_2:hover::after {
    color: #ffffff !important;

    text-shadow:
        0 0 4px rgba(160,90,210,.45),
        0 1px 2px #000000 !important;
}


/* =========================================================
   LOGIN BOX - większy panel, mniejszy button, miejsce na Logout
   ========================================================= */

#Loginbox {
    transform: scale(1.12) !important;
    transform-origin: top left !important;

    /* dodatkowe miejsce pod Logout */
    margin-bottom: 18px !important;
}


/* górny status */
#Loginbox .Loginstatus {
    min-height: 22px !important;
}


/* kontener buttona */
#LoginButtonContainer {
    min-height: 32px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}


/* sam przycisk LOGIN / MY ACCOUNT */
#LoginButton {
    height: 28px !important;

    margin-top: 1px !important;
    margin-bottom: 1px !important;

    position: relative !important;
}


/* tekst na środku buttona */
#LoginButton #ButtonText {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transform: none !important;

    padding: 0 !important;
    margin: 0 !important;

    font-size: 13px !important;
    line-height: 28px !important;

    text-align: center !important;
}


/* LOGOUT - osobny pasek pod buttonem */
#LoginstatusText_2 {
    position: relative !important;

    min-height: 18px !important;

    margin-top: 2px !important;
}


/* normalny tekst Logout */
#LoginstatusText_2::after {
    content: "Logout";

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #bdbdc5 !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 18px !important;

    text-align: center !important;

    text-shadow:
        0 1px 2px #000000 !important;
}


/* hover Logout */
#LoginstatusText_2:hover::after {
    color: #ffffff !important;

    text-shadow:
        0 0 4px rgba(160,90,210,.45),
        0 1px 2px #000000 !important;
}


/* Logout troszkę wyżej */
#Loginbox #LogoutText {
    margin-top: -2px !important;
    margin-bottom: 3px !important;
}

/* ===== FINALNE USTAWIENIE LOGIN BOX ===== */

#Loginbox #LogoutText {
    margin-top: -7px !important;
    margin-bottom: 0 !important;

    height: 16px !important;
    line-height: 16px !important;

    font-size: 10px !important;
}

/* mniej pustego miejsca pod login boxem */
#Loginbox {
    margin-bottom: 5px !important;
}

/* nie rozpychaj kontenera My Account */
#LoginButtonContainer {
    padding-bottom: 0 !important;
    min-height: 29px !important;
}

/* My Account trochę wyżej i ciaśniej */
#LoginButton {
    height: 27px !important;
    margin-bottom: 0 !important;
}

#LoginButton #ButtonText {
    height: 27px !important;
    line-height: 27px !important;
}

/* =========================================================
   LOGOUT FIX - ALWAYS VISIBLE
   ========================================================= */

#Loginbox {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin-bottom: 8px !important;
}

#LoginButtonContainer {
    height: auto !important;
    min-height: 29px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
}

#LoginButton {
    height: 27px !important;
    margin: 0 !important;
    overflow: hidden !important;
}

#LoginButton #ButtonText {
    height: 27px !important;
    line-height: 27px !important;
    transform: none !important;
}

/* LOGOUT */
#Loginbox #LogoutText {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    top: auto !important;
    left: auto !important;

    z-index: 999 !important;

    width: 100% !important;
    height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 18px !important;
    text-align: center !important;

    color: #c7c7cc !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: bold !important;

    background: #09090d !important;

    text-decoration: none !important;
    text-shadow: 0 1px 2px #000 !important;

    overflow: visible !important;
}

#Loginbox #LogoutText:hover {
    color: #ffffff !important;
    background: #151019 !important;
}


/* ===== LOGIN BOX FINAL POLISH ===== */

#Loginbox #LogoutText {
    transform: translateY(-2px) !important;

    color: #d2d2d8 !important;
    font-size: 10px !important;
    letter-spacing: 0.2px !important;

    height: 17px !important;
    line-height: 17px !important;

    background:
        linear-gradient(
            180deg,
            #101014 0%,
            #08080b 100%
        ) !important;
}

#Loginbox #LogoutText:hover {
    color: #ffffff !important;

    text-shadow:
        0 0 4px rgba(160,90,210,.45),
        0 1px 2px #000 !important;
}

/* mniej pustego miejsca przed News */
#Loginbox {
    margin-bottom: 2px !important;
}


/* ===== LOGOUT IDEALNIE WYŚRODKOWANY ===== */

#Loginbox #LogoutText {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    text-align: center !important;

    transform: translateY(-2px) !important;
    box-sizing: border-box !important;
}


/* =========================================================
   EVOLERA DARK NEWS ARCHIVE
   ========================================================= */

.EvoleraNewsArchive {
    width: 100%;
    color: #ffffff;
    box-sizing: border-box;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.EvoleraNewsArchiveHeader {
    margin-bottom: 10px;
    padding: 17px 18px 15px;

    text-align: center;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(112, 46, 165, .18),
            transparent 62%
        ),
        linear-gradient(
            180deg,
            #2c2c32 0%,
            #17171c 40%,
            #09090c 100%
        );

    border: 1px solid #55555e;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -3px 7px rgba(0,0,0,.85),
        0 3px 8px rgba(0,0,0,.50);
}

.EvoleraNewsArchiveTitle {
    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: bold;

    letter-spacing: 1.3px;

    text-shadow:
        0 2px 2px #000,
        0 0 5px rgba(255,255,255,.15);
}

.EvoleraNewsArchiveSubtitle {
    margin-top: 4px;

    color: #96969f;

    font-size: 9px;
    font-weight: bold;

    letter-spacing: .6px;
    text-transform: uppercase;
}

.EvoleraNewsArchiveList {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.EvoleraNewsCard {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #08080b 0%,
            #111116 50%,
            #09090c 100%
        );

    border: 1px solid #36363e;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 2px 5px rgba(0,0,0,.42);

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.EvoleraNewsCard:hover,
.EvoleraNewsCard:focus-within {
    background:
        linear-gradient(
            90deg,
            #21102b 0%,
            #171219 30%,
            #111116 72%,
            #09090c 100%
        );

    border-color: #665970;

    box-shadow:
        inset 3px 0 0 #ffffff,
        inset 8px 0 18px rgba(105,35,160,.20),
        0 0 10px rgba(80,28,125,.23);
}

.EvoleraNewsMain {
    min-height: 58px;

    display: flex;
    align-items: center;

    padding: 7px 11px;

    box-sizing: border-box;
}

.EvoleraNewsIcon {
    width: 34px;
    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.EvoleraNewsIcon img {
    max-width: 24px;
    max-height: 24px;

    filter: brightness(.9) contrast(1.1);

    transition:
        filter .18s ease,
        transform .18s ease;
}

.EvoleraNewsCard:hover .EvoleraNewsIcon img {
    filter:
        brightness(1.15)
        drop-shadow(0 0 4px rgba(160,80,210,.38));

    transform: scale(1.08);
}

.EvoleraNewsDate {
    width: 74px;
    flex: 0 0 74px;

    padding-left: 8px;

    border-left: 1px solid #383840;

    box-sizing: border-box;
}

.EvoleraNewsDay {
    display: block;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: bold;

    line-height: 19px;
}

.EvoleraNewsMonth {
    display: block;

    margin-top: 2px;

    color: #92929b;

    font-size: 8px;
    font-weight: bold;

    letter-spacing: .4px;
}

.EvoleraNewsInfo {
    flex: 1;
    min-width: 0;

    padding-left: 12px;
}

.EvoleraNewsTitle {
    display: block;

    color: #ffffff !important;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: bold;

    line-height: 18px;

    text-decoration: none !important;

    text-shadow:
        0 1px 2px #000;
}

.EvoleraNewsTitle:hover {
    color: #ffffff !important;

    text-shadow:
        0 0 5px rgba(255,255,255,.22),
        0 1px 2px #000;
}

.EvoleraNewsHint {
    margin-top: 3px;

    color: #777781;

    font-size: 9px;

    text-transform: uppercase;
    letter-spacing: .4px;

    transition: color .18s ease;
}

.EvoleraNewsCard:hover .EvoleraNewsHint {
    color: #b08ac8;
}

.EvoleraNewsArrow {
    width: 24px;
    flex: 0 0 24px;

    color: #8f689f;

    font-size: 9px;
    text-align: center;

    transition:
        transform .25s ease,
        color .18s ease;
}

.EvoleraNewsCard:hover .EvoleraNewsArrow {
    color: #ffffff;
    transform: rotate(180deg);
}

/* preview */

.EvoleraNewsPreview {
    max-height: 0;

    opacity: 0;

    overflow: hidden;

    transform: translateY(-6px);

    transition:
        max-height .42s ease,
        opacity .25s ease,
        transform .30s ease;
}

.EvoleraNewsCard:hover .EvoleraNewsPreview,
.EvoleraNewsCard:focus-within .EvoleraNewsPreview {
    max-height: 320px;
    opacity: 1;
    transform: translateY(0);
}

.EvoleraNewsPreviewInner {
    padding:
        0 16px 14px 46px;
}

.EvoleraNewsPreviewLine {
    height: 1px;

    margin-bottom: 10px;

    background:
        linear-gradient(
            90deg,
            rgba(160,90,205,.55),
            #3a3740 45%,
            transparent
        );
}

.EvoleraNewsPreviewText {
    color: #c7c7ce;

    font-size: 11px;
    line-height: 17px;

    text-align: left;

    text-shadow:
        0 1px 1px #000;
}

.EvoleraNewsReadMore {
    display: inline-block;

    margin-top: 9px;

    color: #b69ac9 !important;

    font-size: 10px;
    font-weight: bold;

    text-decoration: none !important;
}

.EvoleraNewsReadMore:hover {
    color: #ffffff !important;

    text-shadow:
        0 0 5px rgba(155,80,210,.50);
}

.EvoleraNewsEmpty {
    padding: 25px;

    color: #9999a2;

    text-align: center;

    background: #0b0b0e;

    border: 1px solid #34343c;
}


/* =========================================================
   EVOLERA OBSIDIAN NEWS ARCHIVE
   ========================================================= */

.ObsNewsArchive {
    width: 100%;
    box-sizing: border-box;
    font-family: Verdana, Arial, sans-serif;
}

/* główna belka */
.ObsNewsArchiveHeader {
    height: 42px;

    display: flex;
    align-items: center;

    padding: 0 16px;

    background:
        radial-gradient(
            ellipse at 50% -30%,
            rgba(100, 40, 145, .20),
            transparent 62%
        ),
        linear-gradient(
            180deg,
            #323238 0%,
            #1a1a20 35%,
            #0b0b0e 100%
        );

    border: 1px solid #5b5b65;
    border-bottom-color: #222228;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -3px 7px rgba(0,0,0,.9),
        0 3px 8px rgba(0,0,0,.50);
}

.ObsNewsArchiveHeader span {
    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: bold;

    text-shadow:
        0 2px 2px #000,
        0 0 4px rgba(255,255,255,.18);
}

/* obszar newsów */
.ObsNewsArchiveBody {
    padding: 10px;

    background:
        linear-gradient(
            180deg,
            #0b0b0e 0%,
            #08080a 100%
        );

    border-left: 1px solid #35353d;
    border-right: 1px solid #35353d;
    border-bottom: 1px solid #35353d;

    box-sizing: border-box;
}

/* pojedynczy news */
.ObsNewsEntry {
    margin-bottom: 7px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #09090c 0%,
            #121217 50%,
            #09090c 100%
        );

    border: 1px solid #383841;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 2px 5px rgba(0,0,0,.45);

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.ObsNewsEntry:last-child {
    margin-bottom: 0;
}

.ObsNewsEntry:hover,
.ObsNewsEntry:focus-within {
    background:
        linear-gradient(
            90deg,
            #201029 0%,
            #17121c 27%,
            #111116 70%,
            #09090c 100%
        );

    border-color: #675872;

    box-shadow:
        inset 3px 0 0 #ffffff,
        inset 8px 0 18px rgba(110,38,165,.22),
        0 0 9px rgba(85,30,130,.20);
}

/* widoczny pasek */
.ObsNewsEntryHeader {
    min-height: 46px;

    display: flex;
    align-items: center;

    padding: 5px 11px;

    box-sizing: border-box;
}

.ObsNewsIcon {
    width: 34px;
    flex: 0 0 34px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.ObsNewsIcon img {
    max-width: 24px;
    max-height: 24px;

    filter:
        brightness(.9)
        contrast(1.10);

    transition:
        transform .18s ease,
        filter .18s ease;
}

.ObsNewsEntry:hover .ObsNewsIcon img {
    transform: scale(1.08);

    filter:
        brightness(1.15)
        drop-shadow(0 0 4px rgba(155,75,210,.35));
}

/* data + tytuł */
.ObsNewsMeta {
    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 10px;

    padding-left: 9px;

    border-left: 1px solid #373740;
}

.ObsNewsDate {
    color: #9797a0;

    font-size: 10px;
    font-weight: bold;

    white-space: nowrap;
}

.ObsNewsTitle {
    color: #ffffff !important;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: bold;

    text-decoration: none !important;

    text-shadow:
        0 1px 2px #000;
}

.ObsNewsTitle:hover {
    color: #ffffff !important;

    text-shadow:
        0 0 5px rgba(255,255,255,.22),
        0 1px 2px #000;
}

/* strzałka */
.ObsNewsArrow {
    width: 24px;
    flex: 0 0 24px;

    color: #8f689f;

    font-size: 15px;
    text-align: center;

    transition:
        transform .25s ease,
        color .18s ease;
}

.ObsNewsEntry:hover .ObsNewsArrow {
    color: #ffffff;
    transform: rotate(180deg);
}

/* rozwijana treść */
.ObsNewsPreview {
    max-height: 0;

    opacity: 0;

    overflow: hidden;

    transform: translateY(-5px);

    transition:
        max-height .42s ease,
        opacity .25s ease,
        transform .30s ease;
}

.ObsNewsEntry:hover .ObsNewsPreview,
.ObsNewsEntry:focus-within .ObsNewsPreview {
    max-height: 320px;

    opacity: 1;

    transform: translateY(0);
}

.ObsNewsPreviewInner {
    padding:
        0 16px 14px 54px;
}

.ObsNewsDivider {
    height: 1px;

    margin-bottom: 10px;

    background:
        linear-gradient(
            90deg,
            rgba(155,85,205,.55),
            #3a3841 45%,
            transparent
        );
}

.ObsNewsText {
    color: #c7c7ce;

    font-size: 11px;
    line-height: 17px;

    text-align: left;

    text-shadow:
        0 1px 1px #000;
}

.ObsNewsMore {
    display: inline-block;

    margin-top: 9px;

    color: #b69acb !important;

    font-size: 10px;
    font-weight: bold;

    text-decoration: none !important;
}

.ObsNewsMore:hover {
    color: #ffffff !important;

    text-shadow:
        0 0 5px rgba(155,80,210,.48);
}

.ObsNewsEmpty {
    padding: 24px;

    color: #9999a2;

    text-align: center;

    background: #0b0b0e;

    border: 1px solid #34343c;
}

/* =========================================================
   END OBSIDIAN NEWS ARCHIVE
   ========================================================= */


/* =========================================================
   EVOLERA HOME NEWS - COMPACT TIBIA-LIKE LAYOUT
   ========================================================= */

#EvoleraHomeNews {
    width: 100% !important;
    margin: 0 0 10px 0 !important;

    border: 1px solid #3a3a42 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 2px 6px rgba(0,0,0,.45) !important;
}


/* niski nagłówek */

#EvoleraHomeNews .EvoNewsHeader {
    min-height: 30px !important;
    height: 30px !important;

    padding: 0 10px !important;
}

#EvoleraHomeNews .EvoNewsHeaderTitle {
    font-size: 16px !important;
    line-height: 30px !important;
}

#EvoleraHomeNews .EvoNewsHeaderSub {
    font-size: 7px !important;
    letter-spacing: .4px !important;
}


/* lista ciaśniejsza */

#EvoleraHomeNews .EvoNewsList {
    padding: 4px !important;
}


/* każdy news */

#EvoleraHomeNews .EvoNewsCard {
    margin-bottom: 2px !important;

    border: 1px solid #2f2f36 !important;
}


/* główny wiersz */

#EvoleraHomeNews .EvoNewsMain {
    min-height: 29px !important;
    height: 29px !important;

    padding: 2px 7px !important;
}


/* mała ikonka */

#EvoleraHomeNews .EvoNewsIcon {
    width: 24px !important;
    flex: 0 0 24px !important;
}

#EvoleraHomeNews .EvoNewsIcon img {
    max-width: 18px !important;
    max-height: 18px !important;
}


/* data */

#EvoleraHomeNews .EvoNewsDate {
    flex: 0 0 67px !important;

    padding-left: 6px !important;

    font-size: 9px !important;
}


/* tytuł */

#EvoleraHomeNews .EvoNewsTitle {
    padding-left: 8px !important;

    font-size: 12px !important;
    line-height: 15px !important;
}


/* strzałka */

#EvoleraHomeNews .EvoNewsArrow {
    width: 18px !important;
    flex: 0 0 18px !important;

    font-size: 9px !important;
}


/* rozwinięcie */

#EvoleraHomeNews .EvoNewsPreviewInner {
    padding:
        5px 12px 9px 38px !important;
}

#EvoleraHomeNews .EvoNewsDivider {
    margin-bottom: 6px !important;
}

#EvoleraHomeNews .EvoNewsText {
    font-size: 10px !important;
    line-height: 15px !important;
}

#EvoleraHomeNews .EvoNewsMore {
    margin-top: 5px !important;

    font-size: 9px !important;
}


/* footer */

#EvoleraHomeNews .EvoNewsFooter {
    padding: 4px 7px 5px !important;
}

#EvoleraHomeNews .EvoNewsFooter a {
    font-size: 8px !important;
}

/* Evolera main rotating tip */
#News {
    position: relative !important;
}

#EvoleraMainTip {
    position: absolute !important;
    top: 8px !important;
    right: 18px !important;
    z-index: 50 !important;

    max-width: 55%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: Verdana, Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: normal !important;

    color: #f4f4f4 !important;
    text-shadow: 1px 1px 2px #000 !important;

    opacity: .95;
    transition: opacity .3s ease;
    pointer-events: none;
}

#EvoleraMainTip.fade {
    opacity: 0;
}

@media (max-width: 900px) {
    #EvoleraMainTip {
        display: none !important;
    }
}