#notif_lst {
    padding: 0 0;
    border-radius: 8px;
    height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
}
    #notif_lst h3 {
        padding: 5px;
        font-size: 20px;
        text-align: center;
        background-color: #4c9ce1;
        color: #fff;
        border-radius: 5px 5px 0 0;
        margin: 0;
    }

    #notif_lst ul {
        position: relative !important;
        /*   background-color: #808080;*/
        display: inline-block;
        border-bottom: 0px !important;
        border-right: 0px !important;
    }
        #notif_lst ul li {
            padding: 0px 0;
            position: relative;
            border-bottom: 1px solid #f3f3f3;
            height: 70px;
        }
       
    #notif_lst ul li:hover {
    background-color: #ff80283d
}

    #notif_lst ul li.unread {
        background-color:rgba(250, 5, 230, 0.25)
    }
            #notif_lst ul li a {
                padding: 5px 5px;
                border: none !important;
                float: right;
            }
       
   
    #notif_lst ul li span {
        text-align: left;
        font-size: 12px;
        color: black !important;
        padding-left: 0px;
    }
        #notif_lst ul li span.time {
            display: block;
            text-align: right;
            color: #007bff !important;
        }
  


    #notif_lst ul li .n-pimg {
        float: right;
        position: relative;
        width: 60px;
        height: 60px;
    }
    #notif_lst ul li img {
        position: relative;
        float: right;
        width: 3.6rem;
        height: 3.6rem;
        max-width: 50px;
        max-height: 50px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        border-radius: 50px;
        border: 3px solid #eee;
    }
   
    
    #notif_lst ul li .n-pimg .sp_BJqrwqEeczl {
        position: relative;
        background-size: auto;
        background-repeat: no-repeat;
        display: inline-block;
        height: 29px;
        width: 29px;
        position: absolute;
        bottom: 5px;
        right: 30px;
    }
            #notif_lst ul li .n-pimg .n0, #notif_lst ul li .n-pimg .n1 {
                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAADiklEQVRIS8WXW0hTcRzHz2X3eSEUy8KtIJqaSV6GpYZTVz4kdA9E6qGwJCjyUkgPhT6YkFYYhCX20IWgixXogzV1gUriFS/TmRBO1JKJeNl955z4HznzOP9nbmvQeRg7O7/f9/P7/y7/8x+K/KcL9Yaraq+MToqT5FkcVjUP5+3CSEwG/EiMNDgJ54yYL9L0jZjfajPvjHujB2w8glU99WfjZUvVDGgrURDIkCG0VKss+LCVLRQMVhirwBoIkkwFAmJcRFkIK20L+87+DdjgGNal05OXPWVgEzixsywrfW/4C5vDLt8qak/PhXzBVMek8VJ/WlUbzG4DGECV8pDWfwG6+/ZMLWfD4C4wSK9Mbh0LJJTRMkyJYtzT7gJfm63qXLWa6ZoG+goSSbqe7ixLY+vSYNC9srDp92a7BZEIxIHm0nqGhahz7G6nwSd1xXoehu+DEY+FHEJyQtOR7YJwRMjDoEHZnCTyx25EWpY6kK/LP6A2TpKY+Bz7UME8REFtwyMXobUF0ILI0z5loH6ukRNunNvmqjV6aqykHEexuzD1mqhSRCaJ8AlsMM8jJdPVUB+CIis+xdTco3euo4OF7QKcr4JZfox+zJlermhA2s+M34Q+thMO7beDdZk0GNTXQTig9W2Kq/VptYxx7sgNqB8f57vqjB4fvk5ZHTaooSbhmV9g9cBVqJ+IL0SaDzyhGxrN7r9CcakHGgw4rYnP18Cp3Rf0Yr4YmupAgy0Oy0RXyit6pOjmWrasQJvre/JLv5oro/ciNIkh4uD15orVnigPFgZBx+ld/EO/xun8UDEUvGJbrdCpvqyNE9hALKJR6AZyeHcS9WhHkVenFIZUOHMfGZwehYLF1v3rGwiwAHUmSHJTnU02M6VWHEGKQvJRTxsJs2VWLjbQUOAnFUo2BIxjmKu+9IrBB3gP2x16jafZGc5odAkxu9P470noRAAogLP1BHyFmv1edonJW9R9wcLgBC44A+5cmEVKft6mV+XtkK/YVgamcjRJbPsNBwEj2qPjEmtW1qHg7VM78dprIKMVTiljOQ8C7JSbbGafGoorWKlQQrmnmLGFHvZAvf2BAxDj5wnqai73iMGI/bK3vcEQPNHbOrLtSITo3yPIyvfpeMsWAN2+sNr7wNsAADAsKPkW15EW2lyeVgYyMI9255lsplxgxwQCQOBeKpQ2RVApgfsL40+avfX5Cx+/jy6RkDCxAAAAAElFTkSuQmCC');
            }
            #notif_lst ul li .n-pimg .n2, #notif_lst ul li .n-pimg .n3 {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 16 16'%3e%3cdefs%3e%3clinearGradient id='a' x1='50%25' x2='50%25' y1='0%25' y2='100%25'%3e%3cstop offset='0%25' stop-color='%2318AFFF'/%3e%3cstop offset='100%25' stop-color='%230062DF'/%3e%3c/linearGradient%3e%3cfilter id='c' width='118.8%25' height='118.8%25' x='-9.4%25' y='-9.4%25' filterUnits='objectBoundingBox'%3e%3cfeGaussianBlur in='SourceAlpha' result='shadowBlurInner1' stdDeviation='1'/%3e%3cfeOffset dy='-1' in='shadowBlurInner1' result='shadowOffsetInner1'/%3e%3cfeComposite in='shadowOffsetInner1' in2='SourceAlpha' k2='-1' k3='1' operator='arithmetic' result='shadowInnerInner1'/%3e%3cfeColorMatrix in='shadowInnerInner1' values='0 0 0 0 0 0 0 0 0 0.299356041 0 0 0 0 0.681187726 0 0 0 0.3495684 0'/%3e%3c/filter%3e%3cpath id='b' d='M8 0a8 8 0 00-8 8 8 8 0 1016 0 8 8 0 00-8-8z'/%3e%3c/defs%3e%3cg fill='none'%3e%3cuse fill='url(%23a)' xlink:href='%23b'/%3e%3cuse fill='black' filter='url(%23c)' xlink:href='%23b'/%3e%3cpath fill='white' d='M12.162 7.338c.176.123.338.245.338.674 0 .43-.229.604-.474.725a.73.73 0 01.089.546c-.077.344-.392.611-.672.69.121.194.159.385.015.62-.185.295-.346.407-1.058.407H7.5c-.988 0-1.5-.546-1.5-1V7.665c0-1.23 1.467-2.275 1.467-3.13L7.361 3.47c-.005-.065.008-.224.058-.27.08-.079.301-.2.635-.2.218 0 .363.041.534.123.581.277.732.978.732 1.542 0 .271-.414 1.083-.47 1.364 0 0 .867-.192 1.879-.199 1.061-.006 1.749.19 1.749.842 0 .261-.219.523-.316.666zM3.6 7h.8a.6.6 0 01.6.6v3.8a.6.6 0 01-.6.6h-.8a.6.6 0 01-.6-.6V7.6a.6.6 0 01.6-.6z'/%3e%3c/g%3e%3c/svg%3e");
            }
            #notif_lst ul li .n-pimg .n4 {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 16 16'%3e%3cdefs%3e%3clinearGradient id='a' x1='50%25' x2='50%25' y1='0%25' y2='100%25'%3e%3cstop offset='0%25' stop-color='%2318AFFF'/%3e%3cstop offset='100%25' stop-color='%230062DF'/%3e%3c/linearGradient%3e%3cfilter id='c' width='118.8%25' height='118.8%25' x='-9.4%25' y='-9.4%25' filterUnits='objectBoundingBox'%3e%3cfeGaussianBlur in='SourceAlpha' result='shadowBlurInner1' stdDeviation='1'/%3e%3cfeOffset dy='-1' in='shadowBlurInner1' result='shadowOffsetInner1'/%3e%3cfeComposite in='shadowOffsetInner1' in2='SourceAlpha' k2='-1' k3='1' operator='arithmetic' result='shadowInnerInner1'/%3e%3cfeColorMatrix in='shadowInnerInner1' values='0 0 0 0 0 0 0 0 0 0.299356041 0 0 0 0 0.681187726 0 0 0 0.3495684 0'/%3e%3c/filter%3e%3cpath id='b' d='M8 0a8 8 0 00-8 8 8 8 0 1016 0 8 8 0 00-8-8z'/%3e%3c/defs%3e%3cg fill='none'%3e%3cuse fill='url(%23a)' xlink:href='%23b'/%3e%3cuse fill='black' filter='url(%23c)' xlink:href='%23b'/%3e%3cpath fill='white' d='M12.162 7.338c.176.123.338.245.338.674 0 .43-.229.604-.474.725a.73.73 0 01.089.546c-.077.344-.392.611-.672.69.121.194.159.385.015.62-.185.295-.346.407-1.058.407H7.5c-.988 0-1.5-.546-1.5-1V7.665c0-1.23 1.467-2.275 1.467-3.13L7.361 3.47c-.005-.065.008-.224.058-.27.08-.079.301-.2.635-.2.218 0 .363.041.534.123.581.277.732.978.732 1.542 0 .271-.414 1.083-.47 1.364 0 0 .867-.192 1.879-.199 1.061-.006 1.749.19 1.749.842 0 .261-.219.523-.316.666zM3.6 7h.8a.6.6 0 01.6.6v3.8a.6.6 0 01-.6.6h-.8a.6.6 0 01-.6-.6V7.6a.6.6 0 01.6-.6z'/%3e%3c/g%3e%3c/svg%3e");
                /*transform: rotate(181deg);*/
                -webkit-transform: scaleY(-1);
                transform: scaleY(-1);
                -webkit-transform: scaleY(-1);
            }



#notif_lst ul li .n-text {
    float: right;
    width: calc(100% - 65px);
    margin-right: 5px;
}
      
    #notif_lst ul li .n-text .n-unopend {
            background-color: #4c9ce1;
            width: 10px;
            height: 10px;
            border-radius: 79px;
            display: block;
            float: left;
            position: absolute;
            left: 10px;
            bottom: 17px;
        }

div#logintab .fa-user {
    color: #FFF;
}