.notification-item {
    cursor: pointer;
}

/* Style for notification-item when it has the 'read' class */
.notification-content {
    border: 0.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 5px;
}

/* Style for notification-item when it does not have the 'read' class */
.notification-content:not(.read) {
    background-color: rgba(172, 226, 241, 0.2);
}

.notification-dropdown .border-bottom {
    border-width: 0.5px !important;
}

.notification-dropdown .border-top {
    border-width: 0.5px !important;
}

.dropdown-item.notification-item:hover {
    background-color: transparent !important;
}

@media (min-width: 576px) {
    .dropdown-lg {
        width: 320px;
    }
}

#clear-notifications {
    font-size: 12px;
    text-decoration: underline;
    color: rgba(255, 255, 255, .8) !important;
}

#view-notifications {
   color: #4a93dd;
   text-decoration: none;
   font-size: 14px;
}

#notifications-list {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin; /* For Firefox, optional */
    scrollbar-color: #d7d7d7 transparent; /* Optional: Scrollbar styling */
}