.notification-card{border-radius:.75rem;box-shadow:0 2px 8px rgba(44,62,80,0.05);transition:box-shadow .2s,background .2s;border:0;margin-bottom:.75rem;position:relative}.notification-card.unread{background:#f5faff}.notification-card.read{background:#fff;opacity:.85}.notification-card.unread::before{content:'';display:block;position:absolute;left:0;top:0;bottom:0;width:4px;background:#29aae0;border-radius:.75rem 0 0 .75rem}.notification-card:hover{box-shadow:0 4px 16px rgba(44,62,80,0.13);background:#eaf6fb}.notification-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:#e3f3fb;border-radius:50%;margin-right:1rem;flex-shrink:0}