/* alert modal */
.alert-modal {
   position: absolute;
   bottom: 5vh;
   right: 5vw;
   padding: 6px 16px;
   /* opacity: 1; */
   background-color: #fff;
   display: none;
   border-radius: 16px;
   width: auto;
   height: auto;
   animation: fadeEffect 5s ease-in-out forwards;
   font-family: Pragmatica Book;
   z-index: 200;
}
.alert-modal-header {
   display: flex;
   gap: 10px;
   padding: 6px 0;
   color: #212624;
   font-size: clamp(0.75rem, 1rem, 1.25rem);
}
.alert-modal-body {
   color: #212624;
   font-size: clamp(0.75rem, 1rem, 1.25rem);
}
.alert-modal-info {
   background-color: #fff;
   border: #2196F3 solid 1px;
}
.alert-modal-warning {
   background-color: #FFF9C4;
   border: #FFF9C4 solid 1px;
}
.alert-modal-error {
   background-color: #fff;
   border: #e98074 solid 1px;
   border-radius: 16px;
}
.alert-modal-success {
   background-color: #fff;
   border: #53ED32 solid 1px;
   border-radius: 16px;
}
.alert-icon {
   width: 32px;
   height: 32px;
   display: inline-block;
}

@keyframes fadeEffect {
   0% { opacity: 0; transform: translateY(-10px); }   /* Скрыт и чуть смещен */
   15% { opacity: 1; transform: translateY(0); }      /* Полностью появился */
   85% { opacity: 1; transform: translateY(0); }      /* Держится (пауза) */
   100% { opacity: 0; transform: translateY(-10px);} /* Плавно исчез */
}