body {
  background-color: #f8f9fa; /* Very light gray background color for the body */
  color: #495057; /* Dark gray text color */
}

.container-fluid {
  background-color: #f8f9fa; /* Very light gray background color for the container-fluid */
}

.row {
  background-color: #f8f9fa; /* Very light gray background color for rows */
}

.card {
  background-color: #ffffff; /* White background color for cards */
  color: #495057; /* Dark gray text color for cards */
  border: 1px solid #ced4da; /* Light gray border for cards */
}

.form-control {
  background-color: #ffffff; /* White background color for form controls */
  color: #495057; /* Dark gray text color for form controls */
  border: 1px solid #ced4da; /* Light gray border for form controls */
}

label {
  color: #495057; /* Dark gray text color for labels */
}

.btn {
  background-color: #007bff; /* Blue background color for buttons */
  color: #ffffff; /* White text color for buttons */
}

.btn-secondary {
  background-color: #28a745; /* Green background color for secondary buttons */
  color: #ffffff; /* White text color for secondary buttons */
}

#imageContainer {
  background-color: #f8f9fa; /* Very light gray background color for image container */
  padding: 20px;
  margin-top: 20px;
  border-radius: 5px;
}

/* Add this to your styles.css */
.img-container img {
  max-width: 100%; /* Ensure the image does not exceed the container width */
  max-height: 100%; /* Set a maximum height for the image container */
  object-fit: contain;
  margin: 0 auto; /* Center the image horizontally */
}

/* Additional styles for error messages, if applicable */
.error-message {
  color: #dc3545; /* Red color for error messages */
}