.body {
    background: url('images/bathroom-remodel-contractor-fraser.jpeg') no-repeat center center fixed;
    background-size: cover;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
.logo {
    margin-top: 50px;
    max-width: 600px;
    margin-bottom: 10px;
  }
  .Client_Management_System {
    font-size: 30px;
    font-family: "Myriad Pro", sans-serif;
    color: rgb(0, 47, 183);
    font-weight: bold;
    line-height: 1.2;
    text-shadow: 0px 6px 6.65px rgba(0, 0, 0, 0.35);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    margin-top: 120px;
  }
.menu_container {
    padding-bottom: 60px;
}
.container {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h2 {
    text-align: center;
}
/* Basic Form Styling */
#specs-form .form-row #email-secondary {
    flex: 0 0 33%; /* Takes up 33% of the row */
}
 #property-type {
    width: auto;
    min-width: 8ch; /* Adjust this value to fit your longest option */
    padding: 5px;
}
#project-location {
    width: auto;
    min-width: 10ch; /* Adjust this value to fit the longest option in the Project Location dropdown */
    padding: 5px;
}
#back_wall_width, 
#back_wall_length {
    width: 5ch; /* Ensures room for 3 digits plus some padding */
    padding: 5px;
    text-align: center; /* Optional: center-aligns the text inside the input */
    font-family: monospace; /* Optional: uses monospace font for better consistency in digit width */
}
/* Specs Section: Flexbox layout for the form rows */
#specs-form .form-row {
    display: flex;
    flex-wrap: wrap;  /* Allows items to wrap onto the next line */
    gap: 20px; /* Space between fields */
    margin-bottom: 20px;  /* Space between rows */
}

/* Individual fields inside the row */
#specs-form .form-field {
    flex: 1 1 22%; /* This allows fields to take up 22% of the row's width and scale with available space */
    min-width: 150px; /* Ensures that fields don't shrink below this size */
    margin-right: 20px; /* Space between fields */
}

/* Remove the margin-right from the last field in each row */
#specs-form .form-row .form-field:last-child {
    margin-right: 0;
}

/* Ensuring labels are consistent */
#specs-form label {
    display: block;
    margin-bottom: 5px;
}

/* Input fields inside the specs form */
#specs-form input, #specs-form select {
    width: auto;
    padding: 8px;
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 16px;
}

form {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Form Rows */
.form-row {
    display: flex;
    justify-content: space-between;  /* Distribute fields evenly */
    margin-bottom: 1rem;
}

/* Individual Form Fields */
.form-field {
    
    margin-right: 60px;
    padding-right: 10px;
}

/* Remove right margin from the last field in each row */
.form-row .form-field:last-child {
    margin-right: 0;
}

/* Label Styling */
label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Input and Select Fields Styling */
input, select, textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #80b667;
    border-radius: 4px;
    font-size: 16px;
}

input[type="radio"], select, textarea {
    width: auto;
    padding: 8px;
    font-size: 16px;
}

#zip {
    width: 10ch;
}

textarea {
    resize: none;
    height: 50px; /* Customize height as needed */
    background-color: aliceblue;
border-style: solid;
border-color: bisque;
}

#email-secondary {
        width: 28ch;
}

.new-shower-inline {
    display: flex;             /* Use flexbox to align items inline */
    align-items: center;       /* Vertically align radio button and label */
}

.new-shower-inline input[type="radio"] {
    order: 0;                  /* Ensure radio button appears first */
    margin-right: 5px;         /* Optional: space between radio button and label */
}

.new-shower-inline label {
    order: 1;                  /* Ensure label appears after radio button */
}

.new-walk-in-tub-inline {
    display: flex;             /* Use flexbox to align items inline */
    align-items: center;       /* Vertically align radio button and label */
}

.new-walk-in-tub--inline input[type="radio"] {
    order: 0;                  /* Ensure radio button appears first */
    margin-right: 5px;         /* Optional: space between radio button and label */
}

.new-walk-in-tub-inline label {
    order: 1;                  /* Ensure label appears after radio button */
}
.new-walk-in-tub-inline,
.new-shower-inline {
    background-color: #f0f8ff;  /* Light blue background to highlight */
    border: 2px solid #007BFF;  /* Blue border for emphasis */
    padding: 10px;
    border-radius: 5px;  /* Optional: rounded corners */
}
/*submit button*/
input[type="submit"] {
    background-color: #4CAF50;  /* Change to your desired background color (green here) */
    color: white;               /* White text */
    padding: 12px 24px;         /* Padding for button size */
    border: none;               /* Remove default border */
    border-radius: 4px;         /* Optional: Rounded corners */
    font-size: 24px;            /* Font size */
    cursor: pointer;           /* Show pointer cursor when hovered */
    transition: background-color 0.3s ease; /* Smooth color transition on hover */
}

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

/* Sidebar Styling */
@media only screen and (max-width: 599px) {
    .sidebar {
        display: none;
    }
}
@media only screen and (min-width: 600px) {
    .sidebar {
        position: sticky;
        top: 100px;
        left: 0;
        width: 200px;  /* Sidebar width */
        background-color: rgba(46, 125, 199, 0.5);  
        padding-top: 20px;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: auto; /* Allow the height to adjust based on content */
        /*padding-bottom: 50px; /* 50px space after the last menu item */
    }

    /* Remove default padding and margins for the list */
    .sidebar ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    /* List item styling */
    .sidebar ul li {
        margin: 15px 0;
        width: 100%;
    }

    /* Link styling */
    .sidebar ul li a {
        display: block;
        padding: 10px;
        color: white;
        text-decoration: none;
        background-color: #11449782;  /* Dark background for links */
        border-radius: 5px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Hover effect for links */
    .sidebar ul li a:hover {
        background-color: #555;  /* Lighter background on hover */
    }

    /* Active link styling */
    .sidebar ul li.active a {
        background-color: #007BFF;  /* Active state highlight */
    }

    /* Add padding to the bottom of the last list item */
    .sidebar ul li:last-child {
        margin-bottom: 50px;  /* Create space at the bottom of the last item */
    }

    /* Active link styling */
    .sidebar ul li.active a {
        background-color: #007BFF;  /* Active state highlight */
        font-weight: bold;          /* Optional: Makes the active item stand out more */
    }
}
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;  /* Stack fields vertically on smaller screens */
    }

    .form-field {
        margin-right: 0;  /* Remove right margin on smaller screens */
        margin-bottom: 10px;  /* Add bottom margin between fields */
    }
}


/*#######################   Welcome Page  ###########################*/

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f7fa;
    color: #333;
    line-height: 1.6;
}
.container {
    background-image: url('https://streamlinebathsolutions.com/images/gray_background.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    /*background: white;*/
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
td, th {
    padding: 5px;
}
tbody {
    background-color: white;
}
/* Welcome Section */
.welcome-section {
    background-image: url('papers.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #1e90ff;
    color: white;
    padding: 20px;
}

.welcome-container {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.5); 
    padding: 20px;
    color: black;
    border-radius: 10px;
}

.welcome-container h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.welcome-container p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.feature-highlights {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.feature-item {
    width: 30%;
    text-align: center;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.feature-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
}

.feature-item h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.feature-item p {
    font-size: 1rem;
    color: #666;
}

.cta-container {
    margin-top: 50px;
    margin-bottom: 50px;
}

.cta-button {
    padding: 15px 30px;
    background-color: #ff8c00;
    color: white !important;
    font-size: 1.2rem;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #e07b00;
}

.cta-container p {
    margin-top: 20px;
    font-size: 1rem;
}

.cta-container a {
    color: #ff8c00;
    text-decoration: none;
}

.cta-container a:hover {
    text-decoration: underline;
}

/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
}

footer a {
    color: #ff8c00;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}