.container::before {
    content: "INTERNET TOYBOX - BADGES";
    position: absolute;
    top: -10px;
    left: 14px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;

    background: #e9e9e9;
    padding: 2px 6px;
    border: 1px solid #c7c7c7;
}


.badges-page {
    padding: 20px;
}

.badges-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 14px;

    background: white;
    border: 1px solid #cfcfcf;

    padding: 14px;
}

.badge-total {
    font-weight: 700;
    color: #4b72b3;
}

.badge-list {
    background: white;
    border: 1px solid #cfcfcf;
}

.badge-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 14px;

    border-bottom: 1px solid #ececec;

    transition: .15s ease;
}

.badge-row:last-child {
    border-bottom: none;
}

.badge-row:hover {
    background: #f7f7f7;
}

.badge-name {
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 2px;
}

.badge-count {
    color: #666;
    font-size: 13px;
    font-weight: 700;
}

.bronze {
    background: #c7844a;
    color: white;
}

.silver {
    background: #b8b8b8;
    color: white;
}

.gold {
    background: #d4aa00;
    color: white;
}

.red {
    background: #d84c4c;
    color: white;
}

.blue {
    background: #4b72b3;
    color: white;
}

.purple {
    background: #7d4ec9;
    color: white;
}

.green {
    background: #3e9d56;
    color: white;
}