.notification-centre{position:fixed;z-index:900;top:22px;right:24px}.notification-centre>summary{position:relative;display:grid;place-items:center;width:49px;height:49px;border:1px solid #ddd3f5;border-radius:16px;color:#fff;background:linear-gradient(135deg,#6d42e9,#8b56f3);box-shadow:0 12px 28px #4b2c9a35;cursor:pointer;list-style:none}.notification-centre>summary::-webkit-details-marker{display:none}.bell-shape{font-size:1.15rem;filter:grayscale(1) brightness(0) invert(1)}.notification-centre>summary>b{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border:3px solid #fff;border-radius:99px;color:#fff;background:#ff8d49;font-size:.65rem}.notification-drawer{position:absolute;top:60px;right:0;width:min(390px,calc(100vw - 28px));overflow:hidden;border:1px solid #ded5f3;border-radius:22px;color:#2b1763;background:#fff;box-shadow:0 25px 70px #28155045}.notification-drawer header{display:flex;justify-content:space-between;align-items:center;padding:19px 20px;background:linear-gradient(120deg,#f8f3ff,#fff2e6)}.notification-drawer h2{margin:2px 0}.notification-drawer header small{color:#168e86;font-size:.62rem;font-weight:900;letter-spacing:.09em}.notification-drawer header form{width:auto}.notification-drawer header button{width:auto;border:0;background:none;color:#6940df;cursor:pointer}.notification-list{max-height:430px;overflow:auto}.notification-item{display:grid;grid-template-columns:11px 1fr;gap:11px;padding:16px 19px;border-top:1px solid #eee8f8;background:#fff}.notification-item:hover{background:#faf7ff}.notification-item>i{width:9px;height:9px;margin-top:6px;border-radius:50%;background:#d7cee9}.notification-item.unread>i{background:#45c8bb;box-shadow:0 0 0 5px #45c8bb1d}.notification-item span{display:grid}.notification-item strong{font-size:.86rem}.notification-item small{margin-top:3px;color:#786e98;line-height:1.4}.notification-item time{margin-top:7px;color:#a198b6;font-size:.65rem}.notification-empty{padding:38px 25px;text-align:center}.notification-empty>span{font-size:1.8rem}.notification-empty strong{display:block}.notification-empty p{margin:4px;color:#80769d}@media(max-width:700px){.notification-centre{top:13px;right:13px}.notification-centre>summary{width:44px;height:44px}.notification-drawer{top:53px}}