/* General styles for the notification list */
#notification-list::-webkit-scrollbar{
    width: 3px; height: 5px; background-color: #ffffff}
#notification-list::-webkit-scrollbar-thumb{
    border-radius: 3px; background-color: var(--primary);
}

    #notification-list {
        max-height: 300px; /* Set a max height for the dropdown */
        overflow-y: auto;  /* Enable vertical scrolling */
        padding: 0;
        display: none;
        flex-direction: column;
        gap: 1rem;
        right: 0px;
        border: 0px;
        box-shadow: 0px 0px 50px 0px rgb(82 63 105 / 15%);
        --bs-dropdown-font-size : 0.85rem;
        --bs-dropdown-item-border-radius : 0.375rem;
        --bs-dropdown-border-color : #d0d7d5; 

    }
    #notification-list.dropdown-menu.show{
        padding: 0.5rem;
        display: flex !important;

    }
    #notification-list .dropdown-item:after {
        content: '';
        width: calc(100% + 1rem);
        position: absolute;
        height: 1px;
        bottom: -0.5rem;
        left: -0.5rem;
        background: var(--bs-dropdown-border-color);
    }
   #notification-list .dropdown-item {
        display: flex; /* Use flexbox for layout */
        justify-content: space-between; /* Space items between */
        align-items: center; /* Center items vertically */
        padding: 0.5rem; /* Add padding */
        transition: background-color 0.3s; /* Smooth background transition */
        white-space: normal;
        gap: 0.5rem;
        position: relative;
    }
    /*#notification-list .dropdown-item:not(:last-child){
        border-bottom: 1px solid #d0d7d5;    
    }*/

   #notification-list .dropdown-item:hover {
/*        background-color: #f8f9fa; */
        color: var(--bs-dropdown-link-hover-color);
        background-color: var(--bs-dropdown-link-hover-bg);
    }
    #notification-list .dropdown-item .notification-item-text a{
        text-decoration: underline;
    }

    /* Styles for unread notifications */
    .notification-item.unread {
        background-color: #ebebeb;
        color: var(--text-color); 
    }

    /* Styles for read notifications */
    .notification-item.read {
/*        background-color: #ffffff;*/
        color: var(--text-color); 
    }

    /* Bold text for unread notifications */
    .bold-text {
        font-weight: 400;  /* Bold text for unread notifications */
    }

    /* Normal text for read notifications */
    .normal-text {
        font-weight: 400;  /* Normal text for read notifications */
    }

    /* Icon styles */
    .notification-icon {
        margin-left: 10px; /* Space between text and icon */
        font-size: 0.8em; /* Adjust icon size */
    }
#notification-list {
    /*max-height: 300px;*/  /* Set a fixed height for the dropdown */
    /*overflow-y: auto;*/   /* Enable vertical scrollbar */
    /*width: 100%;*/        /* Ensure it uses full width */
}