@media (min-width:460px){
    .error-message {
        position: absolute;
        bottom: 20px;
        right: 0;
        width: 300px;
        background-color: rgba(255, 193, 24, 0.74);
        color: #3b3b3b;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        animation: slide-in 0.5s forwards;
        transform: translateX(100%);
        font-family: 'Roboto', sans-serif; 
        text-align: center;
        z-index: 10;
    }
    @keyframes slide-in {
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(-2%);
        }
    }
}

@media (max-width:460px){
    .error-message {
        top: 20px;
        right: 0;
        width: 300px;
        background-color: rgba(255, 193, 24, 0.74);
        color: #3b3b3b;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        animation: slide-in 0.5s forwards;
        font-family: 'Roboto', sans-serif; 
        text-align: center;
        z-index: 10;
    }

    @keyframes slide-in {
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(12%);
        }
    }
}

@keyframes remove-error {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.remove_error {
    animation: remove-error 0.5s forwards;
}
#ErrorWindow{position: fixed; width: auto; height: auto; right:0; bottom: 50px; z-index: 99;}