.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: 100%; left: calc(100% - 350px); right: auto; bottom: auto; width: 300px; height: auto; line-height:18px; padding: 5px 20px 5px 5px; cursor:pointer; background-color: rgba(243, 243, 243, 0.85); border: 0px; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;; border-radius: 5px; z-index: 5; transition: 0.5s; overflow: hidden;}
.bubble-notification.show{top: calc(100% - 120px);}
.bubble-notification:before{border: 1px solid rgba(255,255,255, 0.8); background-color: rgba(255,255,255, 0.45) !important; border-radius: 5px;}
.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: 5px;}
.bubble-notification .avatar:not(:empty){background-image: none;}
.bubble-notification .avatar i{font-size: 32px; color: var(--app-item-icon-font-color);}
.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{position:relative; top: 0px; left: 0px; width: 100%; height: auto; overflow:hidden; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; 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;}

.alert-container{position:relative; top: 0px; left: 0px; width: 100%; height:auto;  min-width: 320px; max-height: 100%; padding: 38px 0px 0px 0px; overflow:auto; display:block;}
.alert-container .item{position:relative; top: 0px; left: 0px; width: 300px; max-width: 100%; height:auto; display:block; border: 1px solid #ababab; border-radius: 5px; margin: 0px; padding: 5px 5px 5px 50px; transition: 0.3s; margin-bottom: 10px; cursor:pointer;}
.alert-container .item:hover{background-color: var(--ribbon-button-hover-bg-color); border-color: var(--ribbon-button-focus-border-color);}
.alert-container .item i{position:absolute; top: 10px; left: 5px; font-size: 32px; color: var(--app-item-icon-font-color); pointer-events:none;}
.alert-container .item img{position:absolute; top: 10px; left: 5px; width: 32px; height: 32px; display:block; border-radius: 5px; object-fit:cover;}
.alert-container .item .info{position:relative; top: 0px; left: 0px; width: 100%; height:auto; pointer-events:none;}
.alert-container .item span{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; white-space:normal; pointer-events:none;}
.alert-container .item span.content{color: var(--app-item-description-font-color);}
.alert-container .item span.time{color: #ababab;}
.alert-container .item[data-watched='0']{background-color: rgba(171,171,171,0.45);}
.alert-container .item[data-watched='0'] span.title{font-weight: bold;}
.alert-container .item:last-child{margin-bottom: 0px;}

.alert-container .alert-list{position:relative; top: 0px ;left: 0px; right: 0px; width: 100%; height:auto; max-height: 100%; padding: 10px; border-top: 1px solid var(--border-color); overflow-x:hidden; overflow-y:auto;}
.alert-container .alert-list:empty{display:none;}

.alert-container .tool-bar{position:absolute; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: rgba(241, 241, 241, 0.65);}
.alert-container .tool-bar .btn-switch{position:relative; top: 0px; left: 0px; width:max-content; height:auto; background-color: #d5d5d5; border-radius: 5px;}
.alert-container .tool-bar .btn-switch span{position:relative; top: 0px; left: 0px; width:max-content; height:auto; display:inline-block; vertical-align: top; padding: 3px 10px; border-radius: 5px; cursor:pointer; transition: 0.3s;}
.alert-container .tool-bar .btn-switch span.selected{background-color: #fff; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.alert-container .tool-bar .btn-more{position:absolute; top: 50%; left:auto; right: 5px; transform:translateY(-50%); cursor:pointer; width:max-content; height:auto; color: #ababab; cursor:pointer; padding-left: 15px;}
.alert-container .tool-bar .btn-more *{pointer-events:none;}
.alert-container .tool-bar .btn-more:hover{color: #2a579a;}
.alert-container .tool-bar .btn-more:before{content: "\f00c"; position:absolute; top: 50%; left: 0px; transform:translateY(-50%); font-weight: 300; font-family: "Font Awesome 5 Pro";}

.dark-mode .bubble-notification .name{color: #000;}

@media (max-width: 767px) {
    .bubble-notification{top: 0px; left: calc(50% - 150px); transform: translateY(-100%); box-shadow: var(--popup-shadow);}
    .bubble-notification.show{top: 50px; transform: unset;}
}