*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    margin-top: auto;
    margin-bottom: auto;
}

body{
    height: 100vh;
    width: 100vw;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
}


label {
    padding: 5px;
}

select,
input[type="file"],
input[type="submit"] {
    padding: 8px;
    margin-bottom: 10px;
}

.custom-file-input {
    display: inline-block;
    background-color: #3498db;
    color: #fff;
    padding: 5px;
    cursor: pointer;
    border-radius: 4px;
}

.custom-file-label {
    padding: 8px;
    display: inline-block;
    color: #555;
    background-color: #ecf0f1;
    border-radius: 4px;
}

/* Align file input names */
.custom-file-input {
    width: 150px; /* Adjust the width as needed for alignment */
    text-align: center;
    margin-right: 10px; /* Adjust the margin between file input names */
}



.header {
    width: 100vw;
    background-color: black;
    padding: 10px;
    color: white;
    text-align: center;
    margin-bottom: 20px;
}

    input[type="submit"] {
    background-color: rgb(23, 61, 95); /* Background color */
    color: white; /* Text color */
    padding: 10px 20px; /* Padding around text */
    border: none; /* Remove border */
    cursor: pointer; /* Change cursor on hover */
    border-radius: 5px; /* Rounded corners */
}

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

input[type="file"] {
    background-color: rgb(23, 61, 95); /* Background color */
    color: white; /* Text color */
    padding: 10px 20px; /* Padding around text */
    margin: 2px;
    border: none; /* Remove border */
    cursor: pointer; /* Change cursor on hover */
    border-radius: 5px; /* Rounded corners */
}

/* Hover effect */
input[type="file"]:hover {
    background-color: #45a049; /* Darker background color on hover */
}

input[type="file"] {
    display: none;
}

form{
    padding: 10px;
} */

/* Style the custom file input container */
.custom-file-input {
    background-color: rgb(23, 61, 95); /* Background color */
    color: white; /* Text color */
    padding: 10px 20px; /* Padding around text */
    border: none; /* Remove border */
    cursor: pointer; /* Change cursor on hover */
    border-radius: 5px; /* Rounded corners */
}

/* Hover effect for the custom file input container */
.custom-file-input:hover {
    background-color: #45a049; /* Darker background color on hover */
}

/* Style the label for the file input */
.custom-file-label {
    font-size: 16px; /* Adjust font size as needed */
}

/* Style for flash message container */
.flash-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

/* Style for individual flash messages */
.flash-message {
    background-color: rgb(23, 61, 95);
    color: #fff;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
    transition: opacity 0.5s ease-in-out;
    max-width: 300px; /* Adjust the maximum width as needed */
    word-wrap: break-word; /* Enable text wrapping */
    opacity: 1; /* Start fully visible */
}

/* styles.css */

.validation_table {
    width: 100%;
    border-collapse: collapse;
}

.validation_table th, .validation_table td {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
}

.validation_table th {
    background-color: #f2f2f2;
}

.validation_table, .validation_table td:first-child {
    text-align: left;
}

.form-label {
    font-weight: bold;
    margin-right: 5px;
    border: 1px solid #dddddd;
    padding: 8px;
    display: inline-block;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Styles for input fields */
.form-input {
    border: 1px solid #dddddd;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Styles for form buttons */
.form-button {
    display: inline-block;
    padding: 8px 16px;
    margin: 10px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: #4CAF50;
    color: #ffffff;
    border: 1px solid #4CAF50;
    border-radius: 4px;
}

/*<<<<NEW CSS CODE>>>> */


.header h1 {
    margin: 0 0 10px 0; /* Adds spacing below the title */
    font-size: 2.2em; /* Adjust title font size as needed */
}


body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
}

/* Adjust Padding and Margins */

.form-container, .header, .container {
    padding: 10px; /* Adjust padding as necessary */
    margin: 0;
}

/* Style the Validation Table */

.validation_table {
        width: 100%;
        max-height: 50vh; /* Set the maximum height of the table */
        overflow-y: auto; /* Allows scrolling within the table */
        margin-bottom: 20px; /* Space below the table */
}    

@media (max-width: 600px) {
    .validation_table th, .validation_table td {
        padding: 4px;
        font-size: 12px;
    }
}

/* Consistency and Spacing for Buttons */

input[type="submit"], .form-button {
    background-color: #3498db; /* Primary color */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 5px;
}

.form-row {
    display: flex;
    justify-content: center;
    gap: 10px; /* Space between buttons */
    margin: 0;
}

.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Adds space between form elements */
    padding:0;
}

.custom-file-input,
input[type="submit"] {
    margin: 10px 0; /* Adds vertical spacing and removes horizontal spacing */
}

/* Ensure the select and input fields are of the same width */
select,
input[type="file"],
input[type="submit"] {
    width: 200px; 
    text-align: center;
}

/* Center the text inside the select box */
select {
    text-align-last: center;
}

/* Adding CSS for Flexbox Layout when showing results  */

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

.results-container {
    display: none; /* Hide by default */
}

/* Styles for when there are results */
.content-container.with-results {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px; /* Adjust the space between the columns */
}

.content-container.with-results .validation-table-container,
.content-container.with-results .results-container {
    flex: 1; /* Allows the children to grow */
    max-width: 60%; /* Limits the width to 50% of the parent container */
    display: block; /* Change to block layout */
}

.validation-table-container {
    margin:0; /* Removes the top margin */
    /* ... other styles ... */
}

.content-container.with-results .results-container {
    flex: 1;  /* Allows the results container to grow */
    max-width: 40%; /* Adjust the width as needed */
    display: block; /* Make the results container visible */
}

/* CSS for 'Download Encrypted File' Button */

button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 15px;
    cursor: pointer;
    justify-content: center;
    transition: background-color 0.3s ease-in-out;
}

button:hover {
    background-color: #008000;
}

button:active {
    background-color: #3498db;
}

/* >>>>>>>>>>>>> */

.header {
    margin-bottom: 0; /* Or you can set a smaller value if needed */
    /* ... other styles ... */
}

/* Style for "Select a WWTP" to match other buttons, but without hover effects */
.custom-file-input2 {
    background-color: #3498db; /* Match the button background color */
    color: white; /* Match the button text color */
    padding: 8px; /* Match the button padding */
    border-radius: 4px; /* Match the button border radius */
    display: inline-block; /* Allows you to set dimensions and use margin */
    margin-right: 10px; /* Space after label if needed */
}

/* Make sure it doesn't change on hover since it's not a button */
.custom-file-input2:hover {
    background-color: #3498db; /* Keep the background color the same */
    color: white; /* Text color remains the same */
    cursor: default; /* Ensure the cursor doesn't change to pointer */
}


/* About us button */

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: black; /* Or your desired color */
    color: white;
}

.header-content {
    width: 100%;
    text-align: center;
}

.header h1 {
    margin: 0;
    display: inline-block; /* This keeps the header from stretching full width */
}


.header-link {
    background-color: #000000; /* Or any color that fits your design */
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none; /* Removes underline from links */
    display: inline-block; /* Aligns with inline elements like text */
    white-space: nowrap;
}

/* Optional: Add hover effect for the link */
.header-link:hover {
    background-color: #2980b9; /* Darker shade for hover */
}