@keyframes blinker {
    50% {
        background-color: transparent; /* Highlight disappears */
    }
}

.mmct-success-highlight-blinker {
    background-color: lightgreen;
    color: darkgreen;
    padding: 3px 6px;
    font-weight: bold;
    animation: blinker 1.25s ease-in-out infinite; /* Different timing function */
}

.mmct-danger-highlight-blinker {
    background-color: lightcoral;
    color: maroon;
    padding: 3px 6px;
    font-weight: bold;
    animation: blinker 1.25s ease-in-out infinite; /* Different timing function */
}

.mmct-waning-highlight-blinker {
    background-color: lightgoldenrodyellow;
    color: orange;
    padding: 3px 6px;
    font-weight: bold;
    animation: blinker 1.25s ease-in-out infinite; /* Different timing function */
}

.mmct-info-highlight-blinker {
    background-color: lightblue;
    color: darkblue;
    padding: 3px 6px;
    font-weight: bold;
    animation: blinker 1.25s ease-in-out infinite; /* Different timing function */
}

/* Hide the native checkbox */
.custom-box-input {
    display: none;
}

/* Container for the 5 boxes */
.custom-box-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.custom-box-label {
    height: 50px;
    background: linear-gradient(145deg, #1f2937, #0f172a);
    padding: 10px;
    border: 1px solid #4b5563;
    border-radius: .375rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .3s ease-in-out;
    color: #d1d5db;
    user-select: none;
}

/* Checked state */
.custom-box-input:checked + .custom-box-label {
    border-color: #10b981;
    background: linear-gradient(145deg, #059669, #10b981);
    color: #fff;
    box-shadow: 0 0 10px #10b981aa;
    transform: scale(1.05);
}