#notification-list .head, #notification-list .footer {
    padding: 5px 15px;
    color: #ccc;
    background-color: #333 !important;
}

#notification-list .head {
    border-radius: 6px 6px 0px 0px;
}

    #notification-list .head a, #notification-list .footer a {
        color: #fff !important;
        text-decoration: none;
    }

        #notification-list .head a:hover, #notification-list .footer a:hover {
            text-decoration: underline;
        }

#notification-list .footer {
    border-radius: 0px 0px 6px 6px;
}

#notification-list .notification-box {
    padding: 10px 10px;
}

    #notification-list .notification-box.unread {
        background-color: #E5F4FD;
    }

    #notification-list .notification-box.read a {
        color: #666;
    }

    #notification-list .notification-box a {
        font-weight: bold;
        text-decoration: none;
    }

        #notification-list .notification-box a:hover {
            text-decoration: underline;
        }

#notification-list .notification-datetime {
    color: #666;
}

ul#notification-list.dropdown-menu > li {
    border-bottom: 1px solid #ddd;
}

@media (max-width: 640px) {
    .notifications .dropdown-menu {
        top: 50px;
        left: -16px;
        width: 290px;
    }

    .notifications .nav {
        display: block;
    }

        .notifications .nav .nav-item, .notifications .nav .nav-item a {
            padding-left: 0px;
        }

    .notifications .message {
    }
}

.notifications .bi-bell {
    font-size: 1.2rem;
}

.notification-badge {
    position: absolute;
    top: 0px;
    left: 24px;
    background-color: #c00;
    border-radius: 40%;
    text-align: center;
    font-size: .7rem;
    padding: 0px 5px;
}

.notifications .dropdown-menu {
    font-size: 0.9rem;
    top: 44px;
    right: -55px;
    left: unset;
    width: 360px;
    box-shadow: 0px 5px 7px -1px #c1c1c1;
    padding-bottom: 0px;
    padding: 0px;
}