/*
 * POLSKAELITA.PL - LEGENDA GRUP
 * Green Dark | MyBB 1.8.41
 * 24 grupy
 */

.pe-group-legend {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 18px 0 0;
    padding: 0;
    background: #11161a;
    border: 1px solid #20282d;
    border-radius: 8px;
    overflow: hidden;
    color: #dfe7e2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

/* NAGLOWEK */

.pe-group-legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 13px 16px;
    background: #151b20;
    border-bottom: 1px solid #20282d;
}

.pe-group-legend-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #eef4ef;
    font-size: 13px;
    font-weight: 700;
}

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

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

/* LISTA GRUP */

.pe-group-legend-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    background: #11161a;
}

/* 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 0 rgba(255,255,255,.03);
    transition:
        border-color .2s ease,
        background-color .2s ease,
        transform .2s ease;
}

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

.pe-group-legend .pe-rank:hover {
    transform: translateY(-1px);
    border-color: var(--pe-rank-color, #b8c8bd);
    filter: brightness(1.04);
}

/* 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 - TEN SAM 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-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;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pe-group-legend .pe-rank {
        transition: none;
    }

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