/*
====================================================
 POLSKAELITA.PL - LEGENDA GRUP
 Green Dark | MyBB 1.8.41
 pe_group_legend.css | WERSJA 2.0

 24 grupy - zachowane wszystkie kolory.
 Nowy wyglad panelu dopasowany do reszty forum.
====================================================
*/

/* GLOWNY PANEL */

.pe-group-legend {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    margin: 18px 0 22px;
    padding: 0;

    background: #151e21;

    border: 1px solid #365347;
    border-radius: 10px;

    overflow: hidden;
    color: #dfe7e2;

    box-shadow:
        0 4px 16px rgba(0,0,0,.16),
        inset 0 1px rgba(255,255,255,.03);
}

/* NAGLOWEK */

.pe-group-legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 10px;
    min-height: 48px;
    padding: 12px 18px;

    box-sizing: border-box;

    background: linear-gradient(
        115deg,
        #1c292a 0%,
        #172327 75%,
        #162b22 100%
    );

    border-bottom: 1px solid #365347;
}

/* TYTUL */

.pe-group-legend-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #f2f8f3;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
}

.pe-group-legend-heading i,
.pe-group-legend-heading svg {
    color: #4fd37b;
    font-size: 14px;
}

/* DOPISEK POLSKAELITA.PL */

.pe-group-legend-subtitle {
    color: #a4b9ac;
    font-size: 11px;
    font-weight: 600;
}

/* LISTA GRUP */

.pe-group-legend-list {
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;

    gap: 8px;

    width: 100%;
    box-sizing: border-box;

    padding: 14px 16px;

    background: #151e21;
}

/* WYGLAD RANG */

.pe-group-legend .pe-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    box-sizing: border-box;
    min-height: 32px;
    padding: 7px 11px;

    color: var(--pe-rank-color, #b8c8bd);

    background-color: var(
        --pe-rank-bg,
        #1d2327
    );

    border: 1px solid var(
        --pe-rank-border,
        rgba(255,255,255,.14)
    );

    border-radius: 6px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;

    white-space: nowrap;
    cursor: default;

    box-shadow:
        inset 0 1px rgba(255,255,255,.03);

    transition:
        border-color .2s ease,
        background-color .2s ease,
        transform .2s ease;
}

/* IKONY RANG */

.pe-group-legend .pe-rank i,
.pe-group-legend .pe-rank svg {
    flex-shrink: 0;
    color: inherit;
    font-size: 11px;
    line-height: 1;
}

/* HOVER */

.pe-group-legend .pe-rank:hover {
    transform: translateY(-1px);

    border-color: var(
        --pe-rank-color,
        #b8c8bd
    );

    filter: brightness(1.04);
}

/*
====================================================
 24 GRUPY - ORYGINALNE KOLORY POLSKAELITA.PL
====================================================
*/

/* 01 - WLASCICIEL */

.pe-group-legend .pe-owner {
    --pe-rank-color: #f4c84c;
    --pe-rank-bg: #2a2414;
    --pe-rank-border: rgba(244,200,76,.45);
}

/* 02 - ADMINISTRATOR */

.pe-group-legend .pe-admin {
    --pe-rank-color: #ff7d7d;
    --pe-rank-bg: #2b1c20;
    --pe-rank-border: rgba(255,125,125,.45);
}

/* 03 - JUNIOR ADMIN - LEKKO CZERWONY */

.pe-group-legend .pe-junioradmin {
    --pe-rank-color: #eb8c91;
    --pe-rank-bg: #2e1d22;
    --pe-rank-border: rgba(235,140,145,.50);
}

/* 04 - OPIEKUN MODERACJI */

.pe-group-legend .pe-modchief {
    --pe-rank-color: #c89dff;
    --pe-rank-bg: #251f31;
    --pe-rank-border: rgba(200,157,255,.45);
}

/* 05 - MODERATOR */

.pe-group-legend .pe-moderator {
    --pe-rank-color: #409b70;
    --pe-rank-bg: #11271e;
    --pe-rank-border: rgba(64,155,112,.55);
}

/* 06 - REDAKTOR */

.pe-group-legend .pe-redaktor {
    --pe-rank-color: #8fdc70;
    --pe-rank-bg: #202a1a;
    --pe-rank-border: rgba(143,220,112,.45);
}

/* 07 - GRAFIK */

.pe-group-legend .pe-grafik {
    --pe-rank-color: #e89dd7;
    --pe-rank-bg: #2a1f28;
    --pe-rank-border: rgba(232,157,215,.45);
}

/* 08 - UBTEAM */

.pe-group-legend .pe-ubteam {
    --pe-rank-color: #b88fff;
    --pe-rank-bg: #251d31;
    --pe-rank-border: rgba(184,143,255,.45);
}

/* 09 - ZASLUZONY */

.pe-group-legend .pe-honored {
    --pe-rank-color: #86c7b9;
    --pe-rank-bg: #17302e;
    --pe-rank-border: rgba(134,199,185,.45);
}

/* 10 - SPONSOR - NIEBIESKI */

.pe-group-legend .pe-sponsor {
    --pe-rank-color: #608ed2;
    --pe-rank-bg: #142437;
    --pe-rank-border: rgba(96,142,210,.55);
}

/* 11 - DONATOR - IDENTYCZNY NIEBIESKI */

.pe-group-legend .pe-donator {
    --pe-rank-color: #608ed2;
    --pe-rank-bg: #142437;
    --pe-rank-border: rgba(96,142,210,.55);
}

/* 12 - WLASCICIEL SERWERA */

.pe-group-legend .pe-serverowner {
    --pe-rank-color: #f0b56f;
    --pe-rank-bg: #2d241b;
    --pe-rank-border: rgba(240,181,111,.45);
}

/* 13 - OPIEKUN SERWERA */

.pe-group-legend .pe-servercaretaker {
    --pe-rank-color: #e5a58e;
    --pe-rank-bg: #31211f;
    --pe-rank-border: rgba(229,165,142,.45);
}

/* 14 - ADMIN CS 1.6 */

.pe-group-legend .pe-cs16 {
    --pe-rank-color: #eda35e;
    --pe-rank-bg: #30231a;
    --pe-rank-border: rgba(237,163,94,.45);
}

/* 15 - ADMIN CS2 */

.pe-group-legend .pe-cs2 {
    --pe-rank-color: #ffb05e;
    --pe-rank-bg: #2b231b;
    --pe-rank-border: rgba(255,176,94,.45);
}

/* 16 - ADMIN DISCORD */

.pe-group-legend .pe-discord {
    --pe-rank-color: #93a3ff;
    --pe-rank-bg: #21253a;
    --pe-rank-border: rgba(147,163,255,.45);
}

/* 17 - TYPER */

.pe-group-legend .pe-typer {
    --pe-rank-color: #b38cf0;
    --pe-rank-bg: #251b37;
    --pe-rank-border: rgba(179,140,240,.50);
}

/* 18 - VIP */

.pe-group-legend .pe-vip {
    --pe-rank-color: #f2cf5e;
    --pe-rank-bg: #2a2517;
    --pe-rank-border: rgba(242,207,94,.45);
}

/* 19 - PARTNER */

.pe-group-legend .pe-partner {
    --pe-rank-color: #71c6e8;
    --pe-rank-bg: #1b2730;
    --pe-rank-border: rgba(113,198,232,.45);
}

/* 20 - PRZYJACIEL */

.pe-group-legend .pe-friend {
    --pe-rank-color: #8bd7ff;
    --pe-rank-bg: #173041;
    --pe-rank-border: rgba(139,215,255,.50);
}

/* 21 - KOBIETA */

.pe-group-legend .pe-woman {
    --pe-rank-color: #f0a4d2;
    --pe-rank-bg: #2c1f29;
    --pe-rank-border: rgba(240,164,210,.45);
}

/* 22 - UZYTKOWNIK */

.pe-group-legend .pe-user {
    --pe-rank-color: #ffa358;
    --pe-rank-bg: #302315;
    --pe-rank-border: rgba(255,163,88,.50);
}

/* 23 - URLOP */

.pe-group-legend .pe-urlop {
    --pe-rank-color: #90cf93;
    --pe-rank-bg: #1c2b22;
    --pe-rank-border: rgba(144,207,147,.45);
}

/* 24 - ZBANOWANY */

.pe-group-legend .pe-banned {
    --pe-rank-color: #a7adb3;
    --pe-rank-bg: #24292d;
    --pe-rank-border: rgba(167,173,179,.35);
}

/*
====================================================
 RESPONSYWNOSC
====================================================
*/

@media screen and (max-width: 768px) {

    .pe-group-legend {
        margin-top: 14px;
        margin-bottom: 16px;
    }

    .pe-group-legend-header {
        padding: 11px 13px;
        min-height: 44px;
    }

    .pe-group-legend-list {
        gap: 7px;
        padding: 12px;
    }

    .pe-group-legend .pe-rank {
        min-height: 30px;
        padding: 6px 10px;
        font-size: 10px;
    }
}

@media screen and (max-width: 480px) {

    .pe-group-legend-header {
        padding: 11px 13px;
    }

    .pe-group-legend-subtitle {
        display: none;
    }

    .pe-group-legend-list {
        gap: 6px;
        padding: 11px;
    }

    .pe-group-legend .pe-rank {
        min-height: 28px;
        padding: 6px 9px;
        font-size: 10px;
        white-space: normal;
    }
}

/* MNIEJ ANIMACJI */

@media (prefers-reduced-motion: reduce) {

    .pe-group-legend .pe-rank {
        transition: none;
    }

    .pe-group-legend .pe-rank:hover {
        transform: none;
    }
}