@import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap");:root{--tr:all 0.5s ease 0s;--ch1:#05478a;--ch2:#0070e0;--ch3:#0070e040;--cs1:#005e38;--cs2:#03a65a;--cs3:#03a65a40;--cw1:#c24914;--cw2:#fc8621;--cw3:#fc862140;--ce1:#851d41;--ce2:#db3056;--ce3:#db305640}@property --bg-help{syntax:"<percentage>";inherits:false;initial-value:-10%}@property --bg-success{syntax:"<percentage>";inherits:false;initial-value:145%}@property --bg-warning{syntax:"<percentage>";inherits:false;initial-value:-55%}@property --bg-error{syntax:"<percentage>";inherits:false;initial-value:112%}@property --bsc{syntax:"<color>";inherits:false;initial-value:red}.toast-panel{position:fixed;top:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:2000}.toast-item{overflow:hidden;max-height:25rem;transition:var(--tr);position:relative;animation:show-toast 4s ease 3s 1}@keyframes show-toast{0%,50%,to{max-height:0;opacity:0}10%,25%{max-height:15rem;opacity:1}}.toast{background:linear-gradient(90deg,#1f2333,#22232b);color:#f5f5f5;padding:1rem 2rem 1rem 6rem;text-align:center;border-radius:.25rem;position:relative;font-weight:300;margin:1rem 0;text-align:left;height:6.15rem;transition:var(--tr);opacity:1;border:.15rem solid #fff2;box-shadow:inset 0 0 .5rem 0 #1d1e26}.toast:before{width:6.5rem;height:6.15rem;bottom:-.15rem;left:-.15rem;z-index:0;border-radius:.35rem;background:radial-gradient(circle at 0 50%,var(--clr),#fff0 5rem),radial-gradient(circle at -50% 50%,var(--bg),#fff0 5rem);opacity:.5}.toast:after,.toast:before{content:"";position:absolute}.toast:after{width:3.5rem;height:3.5rem;background:radial-gradient(circle at 50% 50%,var(--clr) 1.25rem,var(--brd) calc(1.25rem + 1px) 100%);top:1.2rem;left:1rem;border-radius:3rem;padding-top:.2rem;display:flex;align-items:center;justify-content:center;font-size:1.75rem;box-sizing:border-box}.toast h3{font-size:1.35rem;margin:0;line-height:1.35rem;font-weight:300;position:relative}.toast p{position:relative;font-size:.95rem;z-index:1;margin:.25rem 0 0}.close{width:1.35rem;height:1.35rem;text-align:center;right:1rem;cursor:pointer}.close,.close:after{position:absolute;border-radius:100%}.close:after{font-family:Varela Round,san-serif;width:100%;height:100%;left:0;font-size:1.8rem;content:"+";transform:rotate(45deg);display:flex;align-items:center;justify-content:center}.close:hover{background:var(--clr);color:#22232c}.toast-item.success{animation-delay:2s}.toast-item.warning{animation-delay:1s}.toast-item.error{animation-delay:0s}.toast.help{--bg:var(--ch1);--clr:var(--ch2);--brd:var(--ch3)}.icon-help:after,.toast.help:after{content:"?"}.toast.success{--bg:var(--cs1);--clr:var(--cs2);--brd:var(--cs3)}.icon-success:after,.toast.success:after{content:"L";font-size:1.5rem;font-weight:700;padding-bottom:.35rem;transform:rotateY(180deg) rotate(-38deg);text-indent:.1rem}.toast.warning{--bg:var(--cw1);--clr:var(--cw2);--brd:var(--cw3)}.icon-warning:after,.toast.warning:after{content:"!";font-weight:700}.toast.error{--bg:var(--ce1);--clr:var(--ce2);--brd:var(--ce3)}.icon-error:after,.toast.error:after{content:"+";font-size:2.85rem;line-height:1.2rem;transform:rotate(45deg)}.toast a{color:#fff}.toast a:hover{color:var(--clr)}.toast-item.closed{max-height:0}.toast-icons{background:linear-gradient(90deg,#1f2333,#22232b);padding:1rem 1rem 1.25rem;display:flex;justify-content:space-around;border-radius:.25rem;gap:1.5rem;width:100%;box-sizing:border-box;margin-top:1rem;margin-bottom:1rem;position:relative;border:.15rem solid #fff2;box-shadow:inset 0 0 .5rem 0 #1d1e26}.toast-icons:before{position:absolute;width:calc(100% + .3rem);height:calc(100% + .25rem);--bg-help:45%;--bg-success:45%;--bg-warning:45%;--bg-error:45%;--bsc:#fff0;background:radial-gradient(circle at 14% var(--bg-help),var(--ch1),#fff0 2rem),radial-gradient(circle at 38% var(--bg-success),var(--cs1),#fff0 2rem),radial-gradient(circle at 62% var(--bg-warning),var(--cw1),#fff0 2rem),radial-gradient(circle at 86% var(--bg-error),var(--ce1),#fff0 2rem);content:"";bottom:-.15rem;border-radius:.25rem;z-index:0;transition:--bg-help .5s ease 0s,--bg-success .5s ease 0s,--bg-warning .5s ease 0s,--bg-error .5s ease 0s,--bsc .5s ease 0s;box-shadow:0 0 .35rem 0 var(--bsc) inset}.toast-icons:has(label[for=t-help]:hover):before{--bg-help:53%;--bsc:var(--ch2)}.toast-icons:has(label[for=t-success]:hover):before{--bg-success:53%;--bsc:var(--cs2)}.toast-icons:has(label[for=t-warning]:hover):before{--bg-warning:53%;--bsc:var(--cw2)}.toast-icons:has(label[for=t-error]:hover):before{--bg-error:53%;--bsc:var(--ce2)}.toast-icon{width:3.5rem;height:3.5rem;border-radius:100%;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;position:relative;background:radial-gradient(circle at 50% 50%,var(--clr) 1.25rem,var(--brd) calc(1.25rem + 1px) 100%);background:radial-gradient(circle at 50% 50%,var(--clr) 1.25rem,#fff0 calc(1.25rem + 1px) 100%),radial-gradient(circle at 50% 50%,var(--brd) calc(1.25rem + 1px) 100%)}.toast-icon:after{font-size:1.75rem}.icon-success:after{font-size:1.5rem;padding-bottom:.25rem}.icon-error:after{font-size:2.85rem;line-height:2rem;font-weight:500;padding-top:.25rem;max-height:2rem}.icon-help,.toast-item.help{--clr:#0070e0;--brd:#0070e040}.icon-success,.toast-item.success{--clr:#03a65a;--brd:#03a65a40}.icon-warning,.toast-item.warning{--clr:#fc8621;--brd:#fc862140}.icon-error,.toast-item.error{--clr:#db3056;--brd:#db305640}@media (max-width:480px){.toast-item{left:10px;right:10px}.toast{padding-left:5rem}.toast:before{width:4.5rem;background:radial-gradient(circle at 0 50%,var(--clr),#fff0 4rem),radial-gradient(circle at -50% 50%,var(--bg),#fff0 4rem)}.toast:after{left:.6rem}.toast h3{font-size:1.15rem}.toast p{font-size:.9rem}}