.notification{position:relative; top:0px; left:0px; width:100%; height:auto; padding: 5px 20px 5px 5px; line-height:18px; background-color: var(--notification-bg-color); color: var(--notification-font-color) !important; cursor:pointer; box-sizing:border-box;}
.notification:hover, .notification.selected{background-color: var(--notification-hover-bg-color);}
.notification:first-child{border-top: 0px;}
.notification.isnew{background-color: var(--notification-isnew-bg-color);}
.notification table{pointer-events:none;}
.notification table tr td{vertical-align:top; text-align:left; }
.notification table tr td:first-child{width: 39px;}
.notification .avatar{position:relative; top:0px; left:0px; width: 32px; height:32px; margin-top: 3px; pointer-events:none; background-repeat: no-repeat; background-position:top center; background-size:cover;}
.notification .name{font-weight:bold; pointer-events:none;}
.notification.viewed .name{font-weight:normal;}
.notification .time{color: var(--notification-time-font-color); pointer-events:none; font-size: 12px;}
.notification .message{white-space:normal; word-wrap:break-word; word-break:break-all; max-width: 100%; max-height: 54px; display:block; text-align:justify; line-height: 18px; overflow:hidden;}
.notification .close{position:absolute; top: 5px; right: 3px; width: 16px; height:16px;}
.notification .close:before{content: "\f00d"; position:absolute; top: 50%; left: 50%; width: auto; height:auto; transform:translate(-50%, -50%); font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 16px; color: #ccc;}
.notification .close:hover:before{color: #000;}

.bubble-notification{position:fixed; top:auto; left:auto; right: 50px; bottom: auto; width: 250px; height: auto; line-height:18px; padding: 5px 20px 5px 5px; cursor:pointer; background-color: var(--bubble-notification-bg-color); border: 0px; box-shadow: var(--bubble-notification-shadow); border-radius: 5px; z-index: 5;}
.bubble-notification table {width: 100%;}
.bubble-notification table tr td{vertical-align:middle; text-align:left;}
.bubble-notification table tr td:first-child{width: 39px; vertical-align:top;}
.bubble-notification .avatar{position:relative; top:0px; left:0px; width: 32px; height:32px; margin-top: 3px; pointer-events:none; background-image: url(../images/user_no_image.png); background-repeat: no-repeat; background-position:center center; background-size:cover; border-radius: 0px;}
.bubble-notification .avatar.warning{background-image:none;}
.bubble-notification .avatar.warning:before{content: "\f071"; position:absolute; top: 50%; left: 50%; width:auto; height:auto; transform:translate(-50%, -50%); font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 32px; color: #f7b217;}
.bubble-notification .name{font-weight:bold; pointer-events:none;}
.bubble-notification .time{color: var(--bubble-notification-time-font-color); pointer-events:none; font-size: 12px;}
.bubble-notification .message{text-align:justify; pointer-events:none;}
.bubble-notification .close{position:absolute; top: 5px; right: 3px; width: 16px; height:16px;}
.bubble-notification .close:before{content: "\f00d"; position:absolute; top: 50%; left: 50%; width: auto; height:auto; transform:translate(-50%, -50%); font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 16px; color: #ccc;}
.bubble-notification .close:hover:before{color: #000;}

@media (max-width: 767px) {
    .bubble-notification{left: 10px; right: 10px; width: auto;}
}