

.noti-wrapper a {
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
    padding-top: 8px;
    padding-right: 0;
    text-decoration: none;
    color: var(--font-color);
}

.noti-title{
  display: flex;
  flex-direction: column;
  
}

@keyframes noti-flash {
  0% { background-color:var(--hl-yellow-light); } 
  50% { background-color: var(--hl-yellow-strong); }
  100% { background-color:var(--hl-yellow-light); } 
}
.noti-item[data-read="0"] .noti-item {  
    background-color:var(--hl-yellow-light);
    z-index: 0;
    position: relative;
    animation: noti-flash 1s ease;

}

.noti-item .noti-wrapper a { 
    display: flex;
    position: relative;
    flex-direction: row;
}
#drawer-inner .noti-item .noti-wrapper > a{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  gap: 10px;
}

.noti-item .noti-wrapper a { transition: background 0s; }


.noti-item[data-type="info"] .notis-message{
  font-weight: 600;
}

.noti-title:hover {
  color: black;
}

 /*UNSEEN and UNCLICKED notifications*/
.noti-item[data-seen="0"][data-read="0"] {
    animation: none !important;
    background-color: var(--post-bg-hover-new);
}
/*UNCLICKED and SEEN notifications*/
.noti-item[data-seen="1"][data-read="0"]{
      background-color: white;
}
/*CLICKED and SEEN notifications*/
.noti-item[data-read="1"] {
  background-color: white;
}
.noti-item:hover{
    background-color: var(--post-bg-hover-new) !important;  
}

.notis-sender{
  font-weight: 600;
}
.notis-message, .notis-sender, .notis-comment, .notis-timestamp{
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
}


.notis-load-more-wrapper {
  display: flex;
  justify-content: center; 
  margin-bottom: 20px;
}

.notis-load-more-btn {
  padding: 12px 22px;
  font-weight: 600; 
  background-color: var(--pink); 
  border: none; 
  border-radius: 999px; 
  cursor: pointer; 
  font-size: 14px; 
  color: white;
  margin-top: 10px;
}
.notification-list-wr{
  padding-bottom: 10px;
}

.notis-load-more-btn:hover:not(.disabled):not(:disabled) {
  background-color: var(--pink-hover);
}

.notis-load-more-btn.disabled,
.notis-load-more-btn:disabled {
  display: none;
}

.multi-avatar-wr .slot-1 { 
    bottom: 0; 
    left: 0; 
    z-index: 350;
}
.multi-avatar-wr .slot-2 { 
  bottom: 0; 
  left: calc(var(--tiny-notis-avatar-width) - 6px); 
}
.multi-avatar-wr .slot-3 { 
  top: 0; 
  left: calc((var(--tiny-notis-avatar-width) - 6px) / 2); 
}
#drawer-inner .notification-list-wr .notification-list .notis-content .noti-item .multi-avatar-wr{
  position: relative; 
  width: calc(var(--tiny-notis-avatar-width) * 2 - 6px);
  height: calc(var(--tiny-notis-avatar-height) * 2 - 6px);
  margin-right: 30px;
}
#drawer-inner .notification-list-wr .avatar-wrapper.noti{
  margin-right: 10px;
}
.multi-avatar-wr{
  position: relative; 
  width: calc(var(--tiny-notis-avatar-width) * 2 - 6px);
  height: calc(var(--tiny-notis-avatar-height) * 2 - 6px);
  margin-right: 28px;
}
