/* Modal Overlay Styles */
.modal-overlay {
    position: fixed;
    left: 0;
    width: 100%;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 12000 !important;
    font-weight: bold;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px 10px 0 0;
    animation: slideUp 0.3s ease-in-out;
    color: white;
}

    /* Centering the text */
    .modal-overlay p {
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 1.2rem;
    }

    /* Close button positioning */
    .modal-overlay .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: transparent;
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        .modal-overlay .close-btn:hover {
            background-color: rgba(0, 0, 0, 0.3);
        }

/* Slide-up Animation */
@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Slide-down Animation for closing */
@keyframes slideDown {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }
}

.modal-overlay.slideDown {
    animation: slideDown 0.3s ease-out;
}

/* Error Modal */
.modal-overlay.error {
    background-color: #dc3545;
}

/* Caution Modal */
.modal-overlay.caution {
    background-color: #fd7e14;
}

/* Success Modal */
.modal-overlay.success {
    background-color: #28a745;
}