@keyframes bell-shake {

    0%,
    100% {
        transform: rotate(0);
    }

    15%,
    45%,
    75% {
        transform: rotate(15deg);
    }

    30%,
    60%,
    90% {
        transform: rotate(-15deg);
    }
}

.bell-animation {
    display: inline-block;
    animation: bell-shake 0.5s ease-in-out;
    color: #ef4444 !important;
    /* Temporarily change color to red during animation */
}

/* For Tailwind group-hover if used */
.group:hover .shake {
    animation: bell-shake 0.5s ease-in-out;
}

.notification-dropdown {
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

.notification-dropdown::-webkit-scrollbar {
    width: 6px;
}

.notification-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.notification-dropdown::-webkit-scrollbar-thumb {
    background-color: #e2e8f0;
    border-radius: 20px;
}