.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.badge {
    font-weight: 400;
    padding: 4px 10px;
}
.badge {
    font-weight: 400;
    padding: 4px 10px;
}
.badge {
    border-radius: 18px;
    padding: 2px 15px 3px;
    font-weight: 600;
}
.badge-warning {
    background-color: hsl(29 100% 63% /0.15);
    border: 1px solid hsl(29 100% 63%);
    color: hsl(29 100% 63%) !important;
}
.badge-primary {
    background-color: hsl(var(--hue) var(--sat) var(--light)/0.15);
    border: 1px solid hsl(var(--hue) var(--sat) var(--light));
    color: hsl(29 var(--hue) var(--sat) var(--light)) !important;
}


.badge-success {
    background-color: hsl(147 67% 47%/0.15);
    border: 1px solid hsl(147 67% 47%);
    color: hsl(147 67% 47%) !important;;
}

.badge-danger {
    background-color: hsl(360 78% 62%/0.15);
    border: 1px solid hsl(360 78% 62%);
    color: hsl(360 78% 62%) !important;
}

.badge-light-primary {
    color: var(--theme-color);
}

.badge-light-dark {
    color: #2c323f;
}

.badge-light-success {
    color: #54BA4A;
}
.btn-danger:focus, .btn-danger:hover {
    box-shadow: 0 4px 11px rgb(234 84 85 / 35%);
}