.notification-btn{

    position:relative;
    width:45px;
    height:45px;

    display:flex;
    justify-content:center;
    align-items:center;

    cursor:pointer;

    transition:.2s;

}


.notification-btn:active{

    transform:scale(.92);

}



.bell-icon{

    width:32px;
    height:32px;

    fill:#a0aec0;

    transition:.3s;

    transform-origin:top center;

}



.notification-btn:hover .bell-icon{

    fill:#00f2fe;

    animation:ringBell .6s ease-in-out infinite alternate;

}


.bell-shake{

    animation:ringBell .15s ease-in-out infinite alternate!important;

    fill:#00f2fe!important;

}


@keyframes ringBell{

0%{
transform:rotate(-12deg);
}

100%{
transform:rotate(12deg);
}

}



.notification-badge{

position:absolute;

top:0;

right:0;

background:#ff3b30;

color:white;

font-size:11px;

font-weight:bold;

width:18px;

height:18px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

transform:scale(0);

}



.badge-active{

transform:scale(1);

animation:bounceBadge .4s;

}



@keyframes bounceBadge{

0%{
transform:scale(0);
}

70%{
transform:scale(1.3);
}

100%{
transform:scale(1);
}

}