.notification-wrap{position:relative;margin-right:18px}.notification-button{position:relative;background:#edf7f7;color:#075e61;padding:9px 12px}.notification-button span{position:absolute;right:-5px;top:-6px;background:#c84b4b;color:#fff;border-radius:99px;min-width:20px;padding:2px 5px;font-size:11px}.notification-panel{position:absolute;right:0;top:48px;width:min(390px,calc(100vw - 32px));max-height:520px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 18px 50px #18333525;z-index:50}.notification-head{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid var(--line)}.notification-head .mark-all{background:transparent;color:var(--petrol);padding:4px}.notification-list>a{display:block;padding:13px 15px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}.notification-list>a.unread{background:#eefdfe}.notification-list p{margin:4px 0;color:var(--muted);font-size:13px}.notification-list time{color:var(--muted);font-size:11px}.notification-empty{padding:16px;color:var(--muted)}.comments{margin-top:18px}.comments-list article{padding:14px 0;border-bottom:1px solid var(--line)}.comments-list article header{height:auto;padding:0;border:0;display:flex;justify-content:space-between;background:transparent}.comments-list article p{white-space:pre-wrap;margin-bottom:0}.comments form{margin-top:20px;max-width:720px}@media(max-width:850px){.notification-wrap{margin:0 10px 0 auto}.notification-panel{position:fixed;right:16px;top:72px}}