.notification-container{--content-color: black;--background-color: #f3f3f3;--font-size-content: 1em;--icon-size: 1.5em;max-width:90%;display:flex;flex-direction:column;gap:.5em;list-style-type:none;font-family:sans-serif;color:var(--content-color);position:fixed;top:2%;right:2%;left:auto;z-index:10000}.notification-item{position:relative;display:flex;justify-content:space-between;align-items:center;flex-direction:row;gap:1em;overflow:hidden;padding:10px 15px;border-radius:6px;box-shadow:#6f6f6f33 0 8px 24px;background-color:var(--background-color);transition:all .25s ease;--grid-color: rgba(225, 225, 225, .7);background-image:linear-gradient(0deg,transparent 23%,var(--grid-color) 24%,var(--grid-color) 25%,transparent 26%,transparent 73%,var(--grid-color) 74%,var(--grid-color) 75%,transparent 76%,transparent),linear-gradient(90deg,transparent 23%,var(--grid-color) 24%,var(--grid-color) 25%,transparent 26%,transparent 73%,var(--grid-color) 74%,var(--grid-color) 75%,transparent 76%,transparent);background-size:55px 55px}.notification-item svg{transition:.25s ease;width:var(--icon-size);height:var(--icon-size);color:var(--content-color)}.notification-item:hover{transform:scale(1.01)}.notification-item:active{transform:scale(1.05)}.notification-item .notification-close{padding:2px;border-radius:5px;transition:all .25s;cursor:pointer}.notification-item .notification-close:hover{background-color:#cccccc73}.notification-item .notification-close:hover svg{color:#000}.notification-item .notification-close:active svg{transform:scale(1.1)}.notification-icon{display:flex;align-items:center}.success{color:#047857;background-color:#7dffbc;--grid-color: rgba(16, 185, 129, .25)}.success svg{color:#047857}.success .notification-progress-bar{background-color:#047857}.success:hover{background-color:#5bffaa}.info{color:#1e3a8a;background-color:#7eb8ff;--grid-color: rgba(59, 131, 246, .25)}.info svg{color:#1e3a8a}.info .notification-progress-bar{background-color:#1e3a8a}.info:hover{background-color:#5ba5ff}.warning{color:#78350f;background-color:#ffe57e;--grid-color: rgba(245, 159, 11, .25)}.warning svg{color:#78350f}.warning .notification-progress-bar{background-color:#78350f}.warning:hover{background-color:#ffde59}.error{color:#7f1d1d;background-color:#ff7e7e;--grid-color: rgba(239, 68, 68, .25)}.error svg{color:#7f1d1d}.error .notification-progress-bar{background-color:#7f1d1d}.error:hover{background-color:#ff5f5f}.notification-content{display:flex;justify-content:flex-start;align-items:center;gap:.5em}.notification-text{font-size:var(--font-size-content);-webkit-user-select:none;user-select:none}.notification-progress-bar{position:absolute;bottom:0;left:0;height:1px;background:var(--content-color);width:100%;transform:translate(100%);animation:progressBar 5s linear forwards}@keyframes progressBar{0%{transform:translate(0)}to{transform:translate(-100%)}}