.userAvailability {
    width: fit-content;
    background-color: rgb(144 238 144 / 70%) !important;
}

.userAvailability > * {
    color: rgba(0, 0, 0, 0.7);
}

.notifications-button .fas {
    font-size: 15px;
}

@keyframes ring-bell {
    0% { transform: rotate(0); }
    10% { transform: rotate(25deg); }
    20% { transform: rotate(-25deg); }
    30% { transform: rotate(20deg); }
    40% { transform: rotate(-20deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(-10deg); }
    70% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    90%, 100% { transform: rotate(0); }
}

@keyframes flash-colors {
    0%, 100% {
        color: #dfdfdf;
    }
    50% {
        color: #e4a133;
    }
}

a.notifications-button:has(span.number-badge:not(.hidden)) .fa-bell {
    animation:
            ring-bell 1.5s ease-in-out infinite,
            flash-colors 1s ease-in-out infinite;

    transform-origin: top center;
}