.container-alert{align-items:center;display:flex;justify-content:center;position:relative;width:400px;z-index:10100}.context-alert{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:#ffffff8a;border-radius:16px;box-shadow:0 6px 11px -1px #1a1a1a59;overflow:hidden;padding:12px;position:relative;width:95%}.body-alert-one,.body-alert-two{align-items:center;display:flex;justify-content:space-between}.body-alert-two{gap:10px}.progress-bar-notification{animation:progress-bar 7s linear both}@keyframes progress-bar{0%{background-color:#0004ff;width:100%}to{background-color:#0004ff38;width:0}}.body-alert-one_contend{align-content:center;display:flex;gap:10px;justify-content:center}.circle-body-alert{background-color:#fff;border-radius:50%;box-shadow:1px 2px 7px 1px #1a1a1a30}.circle-body-alert,.expand-button-closet{align-items:center;display:flex;justify-content:center}.text-body{font-size:12px;font-weight:600;margin:4px 0 0;text-transform:uppercase}.context-in{animation:in-contenxt .5s ease both;display:flex}.context-out{animation:out-contenxt 0s ease both;display:flex;gap:12px;opacity:1}.time-in{align-items:center;display:flex;gap:5px;position:absolute;right:12px;top:12px;z-index:10200}@keyframes in-contenxt{0%{display:flex;gap:12px}to{display:initial}}@keyframes out-contenxt{0%{display:initial}to{display:flex;gap:12px;opacity:1}}.text-expander{animation:expand-text .3s ease-in-out .3s both;opacity:0}.text-reduce{left:20px;opacity:0;position:absolute;visibility:hidden}@keyframes reduce-text{0%{opacity:1;position:relative;visibility:visible}to{left:20px;opacity:0;position:absolute;visibility:hidden}}@keyframes expand-text{0%{opacity:0;position:absolute;transform:translate(-20px);visibility:hidden}80%{opacity:.5;position:relative}to{opacity:1;position:relative;visibility:visible}}.circle-expander{animation:expand .5s ease both}.circle-reduce{animation:reduce .5s ease both;height:40px;width:40px}@keyframes expand{0%{height:40px;width:40px}to{height:25px;width:25px}}@keyframes reduce{0%{height:25px;width:25px}to{height:40px;width:40px}}.animation-in{animation:fadeIn .5s ease both}@keyframes fadeIn{0%{transform:translateY(-200px)}to{transform:translateY(0)}}.animation-out{animation:fadeOut .6s ease-in-out both;transform:translateY(-200px)}@keyframes fadeOut{0%{position:relative;transform:translateY(0)}90%{position:relative}to{position:absolute;transform:translate(-500%)}}.img-expander{animation:expand-img .5s ease both}.img-reduce{animation:reduce-img .5s ease both;opacity:0;position:absolute;visibility:hidden}@media screen and (max-width:600px){.container-alert{width:100%}}
