.badge {
    display: inline-block;
    padding: 0.45em 0.6em;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    border-radius: 0.25rem;
    /*color: #fff; */
}

/* Number-based colors */
.badge-1 { background-color: #f72585; }
.badge-2 { background-color: #b5179e; }
.badge-3 { background-color: #7209b7; }
.badge-4 { background-color: #560bad; }
.badge-5 { background-color: #480ca8; }
.badge-6 { background-color: #3a0ca3; }
.badge-7 { background-color: #3f37c9; }
.badge-8 { background-color: #4361ee; }
.badge-9 { background-color: #4895ef; }
.badge-10 { background-color: #4cc9f0; }

/* Letter-based classes */
.badge-a { background-color: #70E000; }
.badge-b { background-color: #38B000; }
.badge-c { background-color: #008000; }
.badge-d { background-color: #007200; }
.badge-e { background-color: #006400; }
.badge-f { background-color: #004B23; }

/* Color-based classes */
.badge-orange { background-color: #f77f00; }
.badge-green { background-color: #06d6a0; }
.badge-red { background-color: #e63946; }
.badge-blue { background-color: #1d3557; }
.badge-purple { background-color: #9b5de5; }
.badge-yellow { background-color: #ffb703; }
.badge-black { background-color: #000000; }
.badge-brown { background-color: #8d6e63; }
.badge-pink { background-color: #ff69b4; }
.badge-navy { background-color: #001f3f; }

.badge-default {
    /*background-color: #6c757d; /* Bootstrap-like gray */
    background-color: #44badc;
    color: #fff;
}

/* Focus effect */
.badge:focus, .badge:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(68, 186, 220, 0.5);
}