.notification-kind-icon{flex:0 0 42px;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;background:#edf2ff;color:#245af3}
.notification-kind-icon svg{width:22px;height:22px;flex:none}
.notification-kind-icon[data-notification-kind="reaction"]{background:#fff0f5;color:#db3981}
.notification-kind-icon[data-notification-kind="reply"],.notification-kind-icon[data-notification-kind="comment"]{background:#edf2ff;color:#245af3}
.notification-kind-icon[data-notification-kind="follow"]{background:#f1edff;color:#7841cf}
.notification-kind-icon[data-notification-kind="donation"],.notification-kind-icon[data-notification-kind="donation-confirmed"]{background:#e6f8f0;color:#078b61}
.notification-kind-icon[data-notification-kind="donation-rejected"],.notification-kind-icon[data-notification-kind="moderation"]{background:#fff4e3;color:#b66809}
.notification-kind-icon[data-notification-kind="verification"]{background:#e9f1ff;color:#0753ff}
.notification-item{min-height:80px;gap:12px;align-items:flex-start}
.notification-item-content{font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.notification-item-content time{display:block;margin-top:5px;font-size:13px;line-height:1.4;color:#72809b}
.notification-popover .notification-item-icon{margin-top:2px}
.notification-list>a{gap:14px;align-items:flex-start;min-height:86px;padding:17px 20px;font-size:16px;line-height:1.5}
.notification-list>a>span:not(.notification-kind-icon){min-width:0;overflow-wrap:anywhere}
.notification-list small{display:block;margin-top:6px;color:#72809b;font-size:13px;line-height:1.4}
.notification-list>a:focus-visible,.notification-item:focus-visible{outline:3px solid #7296ff;outline-offset:-3px}
.instant-route-screen[data-story-loading="true"] .instant-route-caption{display:flex;align-items:center;gap:10px}
.instant-route-screen[data-story-loading="true"] .instant-route-caption:before{content:"";width:19px;height:19px;border:2px solid #dce6ff;border-top-color:#0753ff;border-radius:50%;animation:notification-route-spin .8s linear infinite}
@keyframes notification-route-spin{to{transform:rotate(360deg)}}
@media(max-width:767px){.notification-list>a{padding:16px 14px}.notification-kind-icon{flex-basis:40px;width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.instant-route-screen[data-story-loading="true"] .instant-route-caption:before{animation:none}}