/* Parent container to center the form */
.center-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 100vh; /* Full viewport height to center vertically */
}

/* Container for the form */
.form-container {
    display: grid;
    grid-template-columns: 1fr; /* Single column layout */
    gap: 20px; /* Space between rows */
    width: 600px; /* Fixed width */
    height: auto; /* Height adjusts based on content */
    padding: 20px; /* Padding inside the form */
    border: 1px solid #ddd; /* Optional border for visual effect */
    border-radius: 8px; /* Rounded corners for container */
    background-color: #fff; /* Background color for better visibility */
}

/* Form group for each input */
.form-group {
    margin-bottom: 20px; /* Space between form fields */
}

/* Form control styling */
.form-control, .form-select {
    width: 100%; /* Full width within grid cell */
    padding: 8px 8px; /* Padding inside the input */
    border: 1px solid #ced4da; /* Border color */
    border-radius: 4px; /* Slightly rounded corners */
    font-size: 14px; /* Consistent font size */
}

/* Label styling */
.form-label {
    font-weight: bold; /* Bold font for labels */
    color: #495057; /* Dark gray color */
    margin-bottom: 5px; /* Space between label and input */
    display: block; /* Make label a block element */
}

/* Submit and Cancel button styling */
.btn-submit, .btn-cancel {
    padding: 10px 20px; /* Padding for buttons */
    font-size: 14px; /* Font size */
    width: 100%; /* Full width */
    margin-top: 10px; /* Space above buttons */
    border-radius: 4px; /* Rounded corners */
    border: none; /* No border */
}

.btn-submit {
    background-color: #007bff; /* Primary blue color */
    color: white; /* White text */
}

.btn-cancel {
    background-color: #dc3545; /* Danger red color */
    color: white; /* White text */
}

/* Media query for small screens */
@media (max-width: 767.98px) {
    .form-container {
        width: 100%; /* Full width on small screens */
        padding: 10px; /* Adjust padding for small screens */
    }

    .btn-submit, .btn-cancel {
        width: 100%; /* Full width on small screens */
    }
}