/* Position Modals in the Top-Right Corner */
.custom-modal-position {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 300px; /* Set a fixed width for better layout */
    margin: 0;
    z-index: 2555; /* Ensure it’s above other elements */
    transition: transform 0.2s ease-in-out;
}

/* Success Modal Styling (Blue Version) */
.success-modal-content {
    background-color: #007bff; /* Light blue background */
    color: #004085; /* Dark blue text */
    border: 2px solid #0d6efd; /* Border in blue */
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.4); /* Blue shadow */
    animation: glowBlue 1.5s infinite alternate;
}

/* Error Modal Styling */
.error-modal-content {
    background-color: #f8d7da; /* Light red background */
    color: #721c24; /* Dark red text */
    border: 2px solid #dc3545;
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.4); /* Red shadow */
    animation: glowRed 1.5s infinite alternate;
}

/* Glowing Animations */
@keyframes glowBlue {
    from {
        box-shadow: 0 8px 20px rgba(13, 110, 253, 0.4);
    }
    to {
        box-shadow: 0 8px 20px rgba(13, 110, 253, 0.8);
    }
}

@keyframes glowRed {
    from {
        box-shadow: 0 8px 20px rgba(220, 53, 69, 0.4);
    }
    to {
        box-shadow: 0 8px 20px rgba(220, 53, 69, 0.8);
    }
}

/* Close Button Customization */
.success-modal-content .btn-close,
.error-modal-content .btn-close {
    background-color: #fff;
    opacity: 1;
}