.header-notification{position:relative}.header-notification .bell-icon{color:#fff}.header-notification .bell-icon.red{animation:blinkRed 2s ease-in-out infinite}.header-notification:hover .notification-wrapper{display:block}.header-notification .notification-wrapper{z-index:99;display:none;position:absolute;bottom:0;left:50%;transform:translate(-50%,100%);background-color:#fff;border:1px solid var(--base-color);padding:.5em;min-width:12em}.header-notification .notification-wrapper .button-wrapper{width:100%}.header-notification .notification-wrapper .button-wrapper button{padding:6px 10px}.header-notification .notification-wrapper .notification-list{max-height:30em;overflow-y:auto;margin:1em 0;display:flex;flex-direction:column;justify-content:start;align-items:stretch;gap:.5em}.header-notification .notification-wrapper .notification-list .notification{width:100%;box-sizing:border-box;padding:.25em}.header-notification .notification-wrapper .notification-list .notification p{margin:0}.header-notification .notification-wrapper .notification-list .notification .message{font-size:10pt;margin-top:1em}.header-notification .notification-wrapper .notification-list .notification.unseen .title{color:var(--base-color)}.header-notification .notification-wrapper .notification-list .notification .title{font-size:12pt}.header-notification .notification-wrapper .notification-list .notification .title.grey{text-align:center;opacity:60%}@keyframes blinkRed{0%{color:#fff}10%{color:var(--other-color)}100%{color:#fff}}