/*
======================
    Rankings Table
======================
*/
.sp-rankings-table .sp-class-col {
    width: 80px;
}

.sp-rankings-table .sp-class-icon {
    text-align: center;
    vertical-align: middle;
}

.sp-rankings-table .sp-class-icon img {
    display: inline-block;
    vertical-align: middle;
    width: 42px;
    height: 42px;
}

.sp-rank-guild {
    font-size: 0.82rem;
    color: var(--sp-text-muted);
}

.sp-rankings-table .sp-rank-col {
    width: 70px;
    text-align: center;
}

.sp-rankings-table .sp-points-col {
    width: 140px;
    text-align: right;
}

.sp-rankings-table td.sp-rank-num {
    text-align: center;
    font-weight: 700;
    color: var(--sp-text-muted);
}

.sp-rankings-table td.sp-rank-name {
    font-weight: 700;
    color: var(--sp-text-heading);
}

.sp-rankings-table td.sp-rank-points {
    text-align: right;
    font-family: var(--sp-font-display);
    font-size: 0.9rem;
    color: var(--sp-primary);
}

/*
====================
    Top 3 Medals
====================
*/
.sp-rank-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-family: var(--sp-font-display);
    font-size: 0.8rem;
    font-weight: 700;
}

.sp-medal-1 {
    background: rgba(255, 215, 0, 0.15);
    color: #FFD700;
    border: 1px solid #FFD700;
}

.sp-medal-2 {
    background: rgba(192, 192, 192, 0.15);
    color: #C0C0C0;
    border: 1px solid #C0C0C0;
}

.sp-medal-3 {
    background: rgba(205, 127, 50, 0.15);
    color: #CD7F32;
    border: 1px solid #CD7F32;
}

.sp-rank-1 td {
    background: rgba(255, 215, 0, 0.04) !important;
}

.sp-rank-2 td {
    background: rgba(192, 192, 192, 0.04) !important;
}

.sp-rank-3 td {
    background: rgba(205, 127, 50, 0.04) !important;
}