/*! notif.css v1.0.0 | MIT License | https://github.com/darko-r/notif */
[id^=notif]{--container-vertical-gap:28px;--container-horizontal-gap:24px;--notificaton-gap:20px;--close-button-size:13px;--close-button-thickness:2px;--close-button-color:currentColor}[id^=notif].notifications-container{position:fixed;display:flex;flex-direction:column;width:100%;max-width:37rem;margin-top:calc((var(--notificaton-gap) / 2) * -1);margin-bottom:calc((var(--notificaton-gap) / 2) * -1);z-index:50}[id^=notif].top{top:var(--container-vertical-gap)}[id^=notif].bottom{bottom:var(--container-vertical-gap)}[id^=notif].left{left:var(--container-horizontal-gap);align-items:flex-start}[id^=notif].center{left:50%;transform:translateX(-50%);align-items:center}[id^=notif].right{right:var(--container-horizontal-gap);align-items:flex-end}[id^=notif] .notification{position:relative;display:none;width:100%;margin-top:calc(var(--notificaton-gap) / 2);margin-bottom:calc(var(--notificaton-gap) / 2)}[id^=notif] .notification__inner{position:relative;width:100%;opacity:0;overflow:hidden;background-color:#fff}[id^=notif] .notification.display{display:block}[id^=notif] .notification__close-button{position:absolute;top:0;right:0;display:flex;justify-content:center;align-items:center;width:var(--close-button-size,1rem);height:var(--close-button-size,1rem);padding:8px;margin:10px 12px;border:none;background-color:transparent;box-sizing:content-box;cursor:pointer;color:inherit;z-index:10;transition:opacity .2s ease-in-out}[id^=notif] .notification__close-button:hover{opacity:.7}[id^=notif] .notification__close-button:before,[id^=notif] .notification__close-button:after{content:' ';position:absolute;width:calc(var(--close-button-size, 1rem) * 1.41);height:var(--close-button-thickness,2px);border-radius:var(--close-button-thickness,2px);background-color:var(--close-button-color,#999)}[id^=notif] .notification__close-button:before{transform:rotate(45deg)}[id^=notif] .notification__close-button:after{transform:rotate(135deg)}@media screen and (max-width:768px){[id^=notif].notifications-container{left:var(--container-horizontal-gap);width:auto;max-width:none}[id^=notif] .notification{max-width:none}}