.user-notifications{
    padding: 20px 0px;
}

.user-notifications .notification-item{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 4px;
    padding: 15px;
    margin: 10px 0px;
    border-radius: 10px;
    border-right: 5px;
    border-style: solid;
}

.user-notifications .message{
    grid-column: span 2 / span 2;
    
}

.user-notifications .notification-item .title{
    font-family: inherit;
    font-weight: 700;
}


.user-notifications .notification-item .btn-delete{
    direction: ltr;
}

.user-notifications .btn-delete .close{
    padding: 0;
    background-color: transparent;
}

.user-notifications .btn-delete .close:hover{
    background-color: transparent;
}

.user-notifications .warning{
    background-color: #FFF1F1;
    border-color: #DA1822;
}

.user-notifications .news{
    background-color: #EDF5FF;
    border-color: #033FCD;
}

.user-notifications .general{
    background-color: #FDF5D6;
    border-color: #F1C117;
}

.user-notifications .message {
    color: var(--color-primary-300);
}

.user-notifications .message a {
    color: var(--color-primary-default);
}

.user-notifications .notifications{
    height: 500px;
    overflow-y: auto;
    padding-left: 10px;
}

.user-notifications .notifications::-webkit-scrollbar {
    width: 6px;
}

.user-notifications .notifications::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: var(--color-primary-default);
}

.user-notifications .notifications::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}


.notification-count {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: red;
    border-radius: 50%;
    padding: 0px 6px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    animation: tada 2s linear infinite;
}

@keyframes tada {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    10%, 20% {
        -webkit-transform: scale(.9) rotate(-8deg);
        transform: scale(.9) rotate(-8deg);
    }
    30%, 50%, 70% {
        -webkit-transform: scale(1.3) rotate(8deg);
        transform: scale(1.3) rotate(8deg);
    }
    40%, 60% {
        -webkit-transform: scale(1.3) rotate(-8deg);
        transform: scale(1.3) rotate(-8deg);
    }
    100%, 80% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}