#toastContainer {
    position: fixed;
    max-width: 400px !important;
    min-width: 300px !important;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    z-index: 1000;
}


#loginToastContainer {
    position: relative;
    z-index: 9999;
    width: 350px;

    visibility: hidden;
    min-height:60px;
    transition: visibility 0.3s, opacity 0.3s ease-in-out;
    opacity: 0;
}

#loginToastContainer.show {
    visibility: visible;
    opacity: 1;
}

#errorToastContainer {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 100%;
    max-width: 400px; /* optional, for centering */
}

/* Animations */


.toast-width {
    max-width: 400px !important;
    min-width: 300px !important;
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
    transform: translateX(100%); /* start off-screen */
    opacity: 0;
}

/* When showing */
.toast-show {
    transform: translateX(0);
    opacity: 1;
}

/* When hiding */
.toast-hide {
    transform: translateX(100%);
    opacity: 0;
}