/* Overlay for the dialog box */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background-color: rgba(0, 0, 0, 0.5); /* Transparent dark background */
    display: flex; /* Flexbox for centering */
    justify-content: center; /* Horizontal center */
    align-items: center; /* Vertical center */
    z-index: 9999; /* Ensure it's above other elements */
    transition: none !important;
}

.dialog-box {
    background: white; /* Dialog background */
    border-radius: 8px;
    width: 400px;
    max-width: 90%; /* Responsive on smaller screens */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    padding: 16px; /* Add padding inside the dialog */
    text-align: center; /* Center content inside the dialog */
    z-index: 10000; /* Ensure it stays above the overlay */
}


/* Header for the dialog */
.dialog-header h3 {
    margin: 0;
    font-size: 1.5em;
    font-weight: bold;
    color: #333; /* Neutral dark text color */
}

/* Body of the dialog */
.dialog-body p {
    margin: 16px 0;
    font-size: 1em;
    color: #555; /* Medium text color for better readability */
}

/* Action buttons inside the dialog */
.dialog-actions button {
    margin: 0 8px;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    border: none; /* Remove default button border */
    font-size: 1em;
}

/* Warning dialog styles */
.dialog-box.warning {
    border: 2px solid #ffa500;
    background: white !important; /* Orange for warnings */
}

/* Error dialog styles */
.dialog-box.error {
    border: 2px solid #ff4d4d; /* Red for errors */
}

/* Info dialog styles */
.dialog-box.info {
    border: 2px solid #007bff; /* Blue for informational dialogs */
}

/* Styling for Confirm button */
.dialog-actions .btn-primary {
    background-color: #007bff; /* Blue background */
    color: white; /* White text */
    transition: background-color 0.3s ease;
}

    .dialog-actions .btn-primary:hover {
        background-color: #0056b3; /* Darker blue on hover */
    }

/* Styling for Cancel button */
.dialog-actions .btn-secondary {
    background-color: #6c757d; /* Gray background */
    color: white; /* White text */
    transition: background-color 0.3s ease;
}

    .dialog-actions .btn-secondary:hover {
        background-color: #5a6268; /* Darker gray on hover */
    }