/* Body styling for background and padding */
body {
    background-color: #f4f4f4; /* Light gray background */
    padding: 20px; /* Space around the page */
    font-family: Arial, sans-serif; /* Use a clean, sans-serif font */
}


/* Centering the form and adding 'island' effect */
.multi-page-form-page {
    max-width: 600px; /* Limit the form width */
    margin: 0 auto; /* Center the form horizontally */
    background-color: white; /* Form background */
    padding: 20px; /* Inner padding */
    border-radius: 8px; /* Rounded corners */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: flex-start; /* Start content at the top */
}

#multi-page-form-form
{
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Default styles for form fields */
.form-field {
    box-sizing: border-box; /* Include padding and border in the width */
    padding: 0 10px; /* Adjust as needed */
}

/* For desktop and tablet devices */
@media only screen and (min-width: 768px) {
    .form-row {
        /*display: flex;*/
        flex-wrap: wrap;
    }

    .form-field {
        width: calc(90% - 20px); /* Each field takes up most of the row with spacing */
        margin-right: 20px; /* Add margin between fields */
    }

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

/* For mobile devices */
@media only screen and (max-width: 767px) {
    .form-row {
        display: block; /* Display each field in a separate row */
        margin-bottom: 20px; /* Add margin between rows */
    }

    .form-field {
        width: 100%; /* Each field takes up the full width of the container */
        margin-right: 0; /* No margin between fields */
    }
}

/* Styling for all button types */
[type="button"],
[type="submit"],
button {
    background-color: #057A5A !important;
    color: white !important;
    padding: 10px 15px !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: background-color 0.3s !important;
}

[type="button"]:hover,
[type="submit"]:hover,
button:hover {
    background-color: #045c46 !important;
}

/* Style for the form rows */
.form-row {
   /* display: flex;  This allows you to control layout */

}

/* Style for individual form fields */
.form-field {
    margin-bottom: 10px; /* Space between fields */
}

/* Optional: Make the select and input fields full width */
input[type="text"],
select {
    width: 100%; /* Full width for input fields */
    padding: 10px; /* Padding for better usability */
    border: 1px solid #ccc; /* Basic border styling */
    border-radius: 5px; /* Rounded corners */
}

label {
    font-weight: bold; /* Bold labels */
    margin-bottom: 5px; /* Space between label and field */
}
        /* Progress Bar Container */
		[type="Progress"],
        .progress-bar-container {
            width: 100% !important;
            background-color: #e0e0e0 !important;
            border-radius: 20px !important;
            overflow: hidden !important;
            margin-bottom: 20px !important;
            height: 20px !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
        }

        /* Progress Bar */
		[type="Progress"],
        .progress-bar {
            width: 0 !important;
            height: 100% !important;
            background: linear-gradient(90deg, #057A5A, #04B4A7) !important;
            transition: width 0.4s ease-in-out !important;
            border-radius: 20px !important;
            position: relative !important;
        }

        /* Optional: Add percentage text inside the progress bar */
		[type="Progress"],
        .progress-bar::after {
            content: attr(data-progress) '%' !important;
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            color: white !important;
            font-weight: bold !important;
            font-size: 14px !important;
        }
/* Footer styles inside the form container */
.form-footer {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space buttons evenly */
    padding-top: 20px; /* Padding above buttons */
    width: 100%; /* Ensure it spans the entire form width */
    box-sizing: border-box; /* Ensure padding is included in width */
    margin-top: auto; /* Pushes footer to the bottom */
}

/* Button styling */
button[type="button"],
button[type="submit"] {
    background-color: #057A5A; /* Button background color */
    color: white; /* Button text color */
    padding: 10px 15px; /* Button padding */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    width: 30%; /* Make buttons wide */
}

.form-title {
    font-size: 24px;
    margin-bottom: 20px;
}
/* Align the buttons within the form */
#prev_page {
    margin-right: auto; /* Align to the left */
}

#next_page {
    margin-left: auto; /* Align to the right */
}

button[type="button"]:hover,
button[type="submit"]:hover {
    background-color: #045c46; /* Darker color on hover */
}