/* Style for input fields */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
textarea {
  width: 100%; /* Full width */
  padding: 12px 15px; /* Padding inside input fields */
  border: 1px solid #ccc; /* Light border */
  border-radius: 5px; /* Rounded corners */
  font-size: 16px; /* Font size */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
  margin-bottom: 10px; /* Margin at the bottom */
  transition: border-color 0.3s; /* Smooth transition for border color */
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus {
  border-color: #4CAF50; /* Change border color on focus */
  outline: none; /* Remove default outline */
}

/* Style for select dropdown */
select {
  width: 100%; /* Full width */
  padding: 12px 15px; /* Padding inside dropdown */
  border: 1px solid #ccc; /* Light border */
  border-radius: 5px; /* Rounded corners */
  font-size: 16px; /* Font size */
  background-color: #fff; /* White background */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
  margin-bottom: 10px; /* Margin at the bottom */
  transition: border-color 0.3s; /* Smooth transition for border color */
}

select:focus {
  border-color: #4CAF50; /* Change border color on focus */
  outline: none; /* Remove default outline */
}

/* Style for radio buttons */
input[type="radio"] {
  margin-right: 5px; /* Margin to the right of the radio button */
}

input[type="radio"] + label {
  display: inline-block; /* Inline display for labels */
  vertical-align: middle; /* Align with radio button */
  margin-right: 15px; /* Space between radio buttons */
}

/* Style for checkboxes */
input[type="checkbox"] {
  margin-right: 5px; /* Margin to the right of the checkbox */
}

input[type="checkbox"] + label {
  display: inline-block; /* Inline display for labels */
  vertical-align: middle; /* Align with checkbox */
  margin-right: 15px; /* Space between checkboxes */
}

/* Style for both reset and submit buttons */
button {
  background-color: #4CAF50; /* Green background */
  border: none; /* Remove border */
  color: white; /* White text */
  padding: 10px 20px; /* Some padding */
  text-align: center; /* Centered text */
  text-decoration: none; /* Remove underline */
  display: inline-block; /* Inline-block layout */
  font-size: 16px; /* Font size */
  margin: 4px 2px; /* Margin for spacing */
  cursor: pointer; /* Pointer cursor on hover */
  border-radius: 5px; /* Rounded corners */
  transition: background-color 0.3s, transform 0.2s; /* Smooth transitions */
}

button:hover {
  background-color: #45a049; /* Darker green on hover */
  transform: scale(1.05); /* Slightly enlarge button on hover */
}

button:active {
  background-color: #397d3a; /* Even darker green when clicked */
  transform: scale(0.98); /* Slightly shrink button on click */
}

/* Style for reset button */
button[type="reset"] {
  background-color: #f44336; /* Red background */
}

button[type="reset"]:hover {
  background-color: #d32f2f; /* Darker red on hover */
}

/* Style for submit button */
button[type="submit"] {
  background-color: #4CAF50; /* Green background */
}

button[type="submit"]:hover {
  background-color: #45a049; /* Darker green on hover */
}

#success-message {
  display: none;
  color: green;
  font-weight: bold;
  font-size: 120%;
}