/* water/static/water/css/styles.css */
body {
    font-family: Arial, sans-serif; /* Set a default font */
    margin: 0; /* Remove default body margin */
    padding: 0; /* Remove default padding */
}

nav {
    background-color: #007BFF; /* Background color for the navigation bar */
    padding: 10px; /* Padding around the nav */
}

.menu {
    list-style-type: none; /* Remove default list styles */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    display: flex; /* Use flexbox to align items horizontally */
}

.menu li {
    margin-right: 20px; /* Space between menu items */
}

.menu li a {
    color: white; /* Text color for links */
    text-decoration: none; /* Remove underline from links */
    padding: 10px 15px; /* Padding inside the links */
    border-radius: 5px; /* Rounded corners for links */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.menu li a:hover {
    background-color: #0056b3; /* Darker background on hover */
}

/* Input styles */
input[type="datetime-local"] {
    padding: 5px;
    width: 100%;
    max-width: 300px;
    margin-bottom: 15px;
}

/* Form styles */
.form-container {
    max-width: 600px; /* Maximum width of the form */
    margin: 0 auto; /* Center the form */
    padding: 20px;
    border: 1px solid #ccc; /* Optional border */
    border-radius: 5px; /* Rounded corners */
    background-color: #f9f9f9; /* Light background color */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.form-group {
    margin-bottom: 15px; /* Space between fields */
}

label {
    display: block; /* Ensure labels are above the input fields */
    margin-bottom: 5px; /* Space below labels */
}

input[type="text"],
input[type="number"],
input[type="datetime-local"] {
    width: 100%; /* Full width of the form */
    padding: 8px; /* Inner spacing */
    border: 1px solid #ccc; /* Border color */
    border-radius: 4px; /* Rounded corners */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Button styles */
button {
    background-color: #007BFF; /* Button color */
    color: white; /* Text color */
    padding: 10px 15px; /* Button padding */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth transition */
}

button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Navbar styles */
.navbar {
    display: flex;
    justify-content: center; /* Center the menu */
    background-color: #f8f9fa; /* Light background */
    padding: 10px 0; /* Add some padding */
    border-bottom: 1px solid #dee2e6; /* Bottom border for separation */
}

.navbar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex; /* Display inline */
}

.navbar li {
    margin-right: 20px; /* Spacing between menu items */
}

.navbar a {
    color: #007BFF; /* Link color */
    text-decoration: none; /* No underline */
    padding: 10px 15px; /* Padding for click area */
    transition: background-color 0.3s, color 0.3s; /* Smooth transitions */
}

.navbar a:hover {
    background-color: #007BFF; /* Change background on hover */
    color: white; /* Change text color on hover */
    border-radius: 5px; /* Rounded corners */
}

/* Content container styles */
.content-container {
    max-width: 800px; /* Set a max width for content */
    margin: 20px auto; /* Center the content */
    padding: 20px; /* Add padding around content */
    background-color: #fff; /* White background for content */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* water/static/water/css/styles.css */

/* Center the form and align items */
.form-container {
    max-width: 600px; /* Maximum width of the form */
    margin: 40px auto; /* Center the form with margin at the top and bottom */
    padding: 20px; /* Padding inside the form */
    border: 1px solid #ccc; /* Optional border */
    border-radius: 5px; /* Rounded corners */
    background-color: #f9f9f9; /* Light background color */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.form-group {
    margin-bottom: 20px; /* Increased space between fields for better readability */
}

label {
    display: block; /* Ensure labels are above the input fields */
    margin-bottom: 5px; /* Space below labels */
    font-weight: bold; /* Make labels bold for emphasis */
}

input[type="text"],
input[type="number"],
input[type="datetime-local"] {
    width: 100%; /* Full width of the form */
    padding: 10px; /* Inner spacing */
    border: 1px solid #ccc; /* Border color */
    border-radius: 4px; /* Rounded corners */
    box-sizing: border-box; /* Include padding in width calculation */
}

button {
    width: 100%; /* Full width for buttons */
    padding: 10px; /* Button padding */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth transition */
    background-color: #007BFF; /* Button color */
    color: white; /* Text color */
}

button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}


body {
    font-family: Arial, sans-serif; /* Add a default font */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

.navbar {
    display: flex;
    justify-content: center; /* Center the menu */
    background-color: #f8f9fa; /* Light background */
    padding: 10px 0; /* Add some padding */
    border-bottom: 1px solid #dee2e6; /* Bottom border for separation */
}

.navbar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex; /* Display inline */
}

.navbar li {
    margin-right: 20px; /* Spacing between menu items */
}

.navbar a {
    color: #007BFF; /* Link color */
    text-decoration: none; /* No underline */
    padding: 10px 15px; /* Padding for click area */
    transition: background-color 0.3s, color 0.3s; /* Smooth transitions */
}

.navbar a:hover {
    background-color: #007BFF; /* Change background on hover */
    color: white; /* Change text color on hover */
    border-radius: 5px; /* Rounded corners */
}

.content-container {
    max-width: 800px; /* Set a max width for content */
    margin: 20px auto; /* Center the content */
    padding: 20px; /* Add padding around content */
    background-color: #fff; /* White background for content */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.content-container {
    margin: 20px auto; /* Center the container */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9; /* Light background */
    max-width: 600px; /* Set a max width for the container */
}

h2 {
    margin-bottom: 20px;
    color: #333; /* Darker text for better contrast */
    text-align: center; /* Center the heading */
}

.form-container {
    margin: 0 auto; /* Center the form */
}

.form-group {
    margin-bottom: 15px; /* Space between form groups */
}

label {
    display: block; /* Ensure labels take up full width */
    margin-bottom: 5px; /* Space between label and input */
    font-weight: bold; /* Make labels bold */
    color: #555; /* Lighter color for labels */
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"] {
    width: 100%; /* Make input fields full width */
    padding: 10px; /* Padding for input fields */
    border: 1px solid #ccc; /* Light border for input fields */
    border-radius: 4px; /* Rounded corners for input fields */
    box-sizing: border-box; /* Include padding in width */
}

button {
    width: 100%; /* Full width button */
    padding: 10px; /* Padding for button */
    border: none; /* Remove default border */
    border-radius: 4px; /* Rounded corners for button */
    cursor: pointer; /* Pointer on hover */
    background-color: #007bff; /* Bootstrap primary color */
    color: white; /* White text */
    font-weight: bold; /* Make button text bold */
}

button:hover {
    background-color: #0056b3; /* Darker shade on hover */
}


/* General Styles */
body {
    font-family: Arial, sans-serif; /* Add a default font */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

.content-container {
    max-width: 800px; /* Set a max width for content */
    margin: 20px auto; /* Center the content */
    padding: 20px; /* Add padding around content */
    background-color: #fff; /* White background for content */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Navigation Styles */
.navbar {
    display: flex;
    justify-content: center; /* Center the menu */
    background-color: #f8f9fa; /* Light background */
    padding: 10px 0; /* Add some padding */
    border-bottom: 1px solid #dee2e6; /* Bottom border for separation */
}

.navbar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex; /* Display inline */
}

.navbar li {
    margin-right: 20px; /* Spacing between menu items */
}

.navbar a {
    color: #007BFF; /* Link color */
    text-decoration: none; /* No underline */
    padding: 10px 15px; /* Padding for click area */
    transition: background-color 0.3s, color 0.3s; /* Smooth transitions */
}

.navbar a:hover {
    background-color: #007BFF; /* Change background on hover */
    color: white; /* Change text color on hover */
    border-radius: 5px; /* Rounded corners */
}

/* Form Styles */
.form-group {
    margin-bottom: 15px; /* Space between form groups */
}

label {
    display: block; /* Ensure labels take up full width */
    margin-bottom: 5px; /* Space between label and input */
    font-weight: bold; /* Make labels bold */
    color: #555; /* Lighter color for labels */
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"] {
    width: 100%; /* Make input fields full width */
    padding: 10px; /* Padding for input fields */
    border: 1px solid #ccc; /* Light border for input fields */
    border-radius: 4px; /* Rounded corners for input fields */
    box-sizing: border-box; /* Include padding in width */
}

button {
    width: 100%; /* Full width button */
    padding: 10px; /* Padding for button */
    border: none; /* Remove default border */
    border-radius: 4px; /* Rounded corners for button */
    cursor: pointer; /* Pointer on hover */
    background-color: #007bff; /* Bootstrap primary color */
    color: white; /* White text */
    font-weight: bold; /* Make button text bold */
}

button:hover {
    background-color: #0056b3; /* Darker shade on hover */
}