/* General styles for the body */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  padding: 10px;
  color: #333;
}

/* Styling the form */
form {
  background-color:#ffbfbf;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* max-width: 800px; */
  max-width: 1000px;
  margin: 0 auto;
}

/* Title styles */
h2, h4 {
  margin-bottom: 15px;
}

/* Flex container for aligning the inputs */
.flex-container {
  display: flex;
  background-color: #ffffff;
  margin: 10px;
  padding: 10px;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Flex content inside each input wrapper */
.flex-content {
  flex: 1;
  min-width: 100px;
  min-height: 70px;
  margin-bottom: 5px;
  margin-top: 10px;
  padding: 5px;
  gap: 5px;
  justify-content: space-between;
}

/* Label styling */
label {
  font-weight: bold;
  margin-bottom: 5px;
  display: inline-block;
  color: #3a3737;
}

/* Input field styling */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
select,
textarea {
  width: 50%;
  padding: 5px;
  margin-bottom: 15px;
  border-radius: 5px;
  margin-top: 5px;
  border: 1px solid #ffffff;
  font-size: 14px;
}

/* Textarea adjustments */
textarea {
  resize: vertical;
}

/* Button styling */
button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  width: 20%;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn{
  display: flex;
  justify-content: center;
  align-items: center;
}

button[type="submit"]:hover {
  background-color: #ffffff;
  color: #45a049;
  font-weight: bold;
  transition: all 0.3s ease;
}

h4{
  margin-top: 20px;
}

/* Input fields with specific widths */
input[type="number"]:disabled {
  background-color: #e9ecef;
}

/* Margin for the final section to give space */
.flex-content:last-child {
  margin-bottom: 0;
}

/* Select options styling */
select {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #242222;
}

/* Adjustments for different screen sizes */
@media (max-width: 768px) {
  .flex-container {
      flex-direction: column;
  }
  
  .flex-content {
      min-width: 100%;
  }
}


/* Title styling */
h2 {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 10px;
}


/* Input fields styling */
input[type="text"],
input[type="number"] {
  width: 60%;
  margin-top: 5px;
  border-radius: 5px;
  border: 1px solid #1b1a1a;
  font-size: 14px;
}

/* Add some space between inputs */
input[type="text"]:focus,
input[type="number"]:focus {
  outline: none;
  border-color: #e2eee3;
}

/* Ensuring responsiveness of the form */
@media (max-width: 768px) {
  .flex-container {
      flex-direction: column;
  }
  
  .flex-content {
      min-width: 100%;
  }

  input[type="number"] {
      width: 100%; /* Ensuring the input field is full-width on smaller screens */
  }
}


/* Styling for section headers */
h4 {
  color: #2e2e2e;
  margin-bottom: 15px;
  font-size: 1.2em;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
  text-align: center;
}



/* Focus effect for input fields */
input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus, select:focus {
  outline: none;
  border-color: #4CAF50;
}

/* Ensure inputs and select fields have consistent look */
select {
  padding: 10px;
  font-size: 14px;
}


/* Input fields styling */
input[type="text"], input[type="number"], select {
  width: 100%;
  margin-top: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 14px;
}

/* Focus effect for input fields */
input[type="text"]:focus, input[type="number"]:focus, select:focus {
  outline: none;
  border-color: #4CAF50;
}


/* Input fields styling */
input[type="text"], input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  margin-top: 5px;
  gap: 20px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 14px;
}

/* Focus effect for input fields */
input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #4CAF50;
}

/* Textarea styling */
textarea {
  resize: vertical;
}



/* Input fields styling */
input[type="text"], input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  gap: 20px;
  margin-top: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 14px;
}

/* Focus effect for input fields */
input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #4CAF50;
}

/* Textarea styling */
textarea {
  resize: vertical;
}

/* Specific styling for water sources inputs */
input[type="number"] {
  width: 50%;
}
.flash-message {
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
  text-align: center;
  font-weight: bold;
}

.flash-message-success {
  background-color: #2dbe82;
  color: #0a180d;
  padding: 10px;
  border: 1px solid #24d800;
  border-radius: 5px;
  margin-bottom: 15px;
  text-align: center;
}

.flash-message-error {
  background-color: #df580a;
  color: #181515;
  padding: 10px;
  border: 1px solid #f5c6cb;
  border-radius: 5px;
  margin-bottom: 15px;
  text-align: center;
}