/*
|===========================================|
| Custom CSS for Notification Bell Animation|
|===========================================|
*/

/* Remove any animation on notification bell */
.notification-box .feather-bell,
.notification-box svg
{
    animation: none !important;
}

/* Define the bell shake animation */
@keyframes bell-shake
{
    0% { transform: rotate(0); }
    15% { transform: rotate(15deg); }
    30% { transform: rotate(-15deg); }
    45% { transform: rotate(10deg); }
    60% { transform: rotate(-10deg); }
    75% { transform: rotate(5deg); }
    85% { transform: rotate(-5deg); }
    100% { transform: rotate(0); }
}

/* Activation rule being very specific */
.notification-box svg.bell-active
{
    animation: bell-shake 2s infinite ease-in-out !important;
    transform-origin: 50% 0;
}