@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');@import url('https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css');*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif}:root{--dark: #34495E;--light: #ffffff;--success: #0ABF30;--error: #E24D4C;--warning: #E9BD0C;--info: #3498DB}.notifications{position: fixed;top: 30px;right: 20px}.notifications :where(.toast, .column){display: flex;align-items: center}.notifications .toast{width: 400px;position: relative;overflow: hidden;list-style: none;border-radius: 4px;padding: 10px 17px;margin-bottom: 10px;background: var(--light);justify-content: space-between;animation: show_toast 0.3s ease forwards;transition: all .3s ease}@keyframes show_toast{0%{transform: translateX(100%)}40%{transform: translateX(-5%)}80%{transform: translateX(0%)}100%{transform: translateX(-10px)}}.notifications .toast.hide{animation: hide_toast 0.3s ease forwards}@keyframes hide_toast{0%{transform: translateX(-10px)}40%{transform: translateX(0%)}80%{transform: translateX(-5%)}100%{transform: translateX(calc(100% + 20px))}}.toast::before{position: absolute;content: "";height: 3px;width: 100%;bottom: 0px;left: 0px;animation: progress linear forwards;animation-duration: 5s}@keyframes progress{100%{width: 0%}}.toast.success::before{background: var(--success)}.toast.error::before{background: var(--error)}.toast.warning::before{background: var(--warning)}.toast.info::before{background: var(--info)}i{font-size: 1.50rem}i::before{display: inline-block;font-style: normal;font-variant: normal;text-rendering: auto;font-family: "Font Awesome 6 Pro";font-weight: 900;-webkit-font-smoothing: antialiased}.popup i::before{font-weight: 300;font-size: 4rem}i.success::before{content: "\f058"}i.error::before{content: "\f057"}i.warning::before{content: "\f06a"}i.info::before{content: "\f05a"}i.success{color: var(--success)}i.error{color: var(--error)}i.warning{color: var(--warning)}i.info{color: var(--info)}.toast .column span{font-size: 1.07rem;margin-left: 12px}.toast i:last-child{color: #aeb0d7;cursor: pointer}.toast i:last-child:hover{color: var(--dark)}@media screen and (max-width: 530px){.notifications{width: 95%}.notifications .toast{width: 100%;font-size: 1rem;margin-left: 20px}.buttons .btn{margin: 0 1px;font-size: 1.1rem;padding: 8px 15px}}.buttons .btn{border: none;outline: none;cursor: pointer;margin: 0 5px;color: var(--light);font-size: 1.2rem;padding: 10px 20px;border-radius: 4px}.btn#success{background: var(--success)}.btn#error{background: var(--error)}.btn#warning{background: var(--warning)}.btn#info{background: var(--info)}.popup{font-family: 'poppins', sans-serif;position: absolute;width: 380px;height: 260px;left: 50%;top: 50%;transform: translate(-50%,-50%);background: var(--light);padding: 1rem 2rem;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 2rem;border-radius: 5px;animation: popup .3s linear forwards}@keyframes popup{0%{transform: translate(-50%,-50%) scale(0)}50%{transform: translate(-50%,-50%) scale(0.5)}100%{transform: translate(-50%,-50%) scale(1)}}.hide.popup{animation: popup_hide .3s linear forwards}@keyframes popup_hide{0%{transform: translate(-50%,-50%) scale(1)}50%{transform: translate(-50%,-50%) scale(0.5)}100%{transform: translate(-50%,-50%) scale(0)}}@media screen and (max-width: 448px){.popup{max-width: 320px !important;max-height: 220px !important;padding: 1rem 1.5rem;gap: 1rem}}@media screen and (max-width: 320px){.popup{max-width: 260px !important;max-height: 140px !important;padding: 1.2rem 0rem;gap: 1rem}.popup i::before{font-weight: 300;font-size: 2rem}.popup .buttons .btn{font-size: .8rem;padding: 8px 16px}.popup .text{font-size: .8rem}}