/* General form container styles */
.multi-step-form-container {
    max-width: 600px; /* Maximum width of the form container */
    margin: 0 auto; /* Center the form container */
    padding: 40px; /* Padding inside the form container */
    border: 1px solid #ccc; /* Border around the form container */
    border-radius: 10px; /* Rounded corners for the form container */
    background-color: #fff; /* Background color of the form container */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow for the form container */
}

/* General form step styles */
.form-container {
    position: relative; /* Position relative to contain the form steps */
}

/* Hidden steps */
.form-step {
    display: none; /* Hide form steps by default */
}

/* Active step */
.form-step.active {
    display: block; /* Display active form step */
}

/* Hidden class for elements */
.hidden {
    display: none; /* Hide elements with the hidden class */
}

/* Section title styles */
.section-title {
    font-size: 24px; /* Font size for section titles */
    margin-bottom: 10px; /* Margin below section titles */
}

/* Form group styles */
.form-group {
    margin-bottom: 20px; /* Margin below form groups */
}

/* Form label styles */
.form-group label {
    display: flex; /* Display labels as flex elements */
    align-items: center; /* Vertically center align label and asterisk */
    margin-bottom: 5px; /* Margin below labels */
}

.form-group label .required {
    color: red; /* Red color for the asterisk */
    margin-left: 5px; /* Space between label text and asterisk */
}

/* Input, textarea, and select styles */
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%; /* Full width for form controls */
    padding: 10px; /* Padding inside form controls */
    border: 1px solid #ccc; /* Border around form controls */
    border-radius: 5px; /* Rounded corners for form controls */
}

/* Button styles */
.form-group button {
    margin-right: 10px; /* Margin to the right of buttons */
    padding: 10px 20px; /* Padding inside buttons */
    border: none; /* No border for buttons */
    border-radius: 5px; /* Rounded corners for buttons */
    font-size: 16px; /* Font size for button text */
    cursor: pointer; /* Pointer cursor for buttons */
}

/* Specific button styles */
/* Blue buttons (Start, Next, Submit) */
#startFormV2,
#nextToStep2V2,
#nextToStep3V2,
#nextToStep4V2,
#submitComplaintV2,
#submitGeneralInquiryV2 {
    background-color: #007bff; /* Blue background color */
    color: #fff; /* White text color */
}

/* Gray buttons (Back, Reset) */
#resetComplaintV2,
#resetGeneralInquiryV2,
#backToStep0V2,
#backToStep1V2,
#backToStep2V2,
#backToStep3V2 {
    background-color: #ccc; /* Light gray background color */
    color: #333; /* Darker gray text color */
}

/* Disabled button styles */
.form-group button:disabled {
    background-color: #ccc; /* Light gray background color for disabled buttons */
}

/* Responsive styles for small screens */
@media (max-width: 576px) {
    .form-group button {
        display: block; /* Display buttons as block elements */
        width: 100%; /* Full width for buttons */
        margin-bottom: 10px; /* Margin below buttons */
    }
}

/* Progress bar container styles */
.progress-bar-container {
    display: grid; /* Use CSS Grid for layout */
    grid-template-columns: repeat(4, 1fr); /* Four equal columns */
    align-items: center; /* Center align items vertically */
    margin-bottom: 20px; /* Margin below the progress bar */
    padding: 10px; /* Padding around the progress bar */
}

/* Progress titles */
.progress-titles {
    display: contents; /* Display as part of the grid */
}

.progress-titles div {
    text-align: center; /* Center text */
    font-size: 14px; /* Font size for titles */
}

/* Progress bar */
.progress-bar {
    display: contents; /* Display as part of the grid */
    list-style-type: none; /* Remove list style */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

.progress-bar li {
    text-align: center; /* Center text */
    position: relative; /* Position relative for indicators */
}

.progress-bar li::before {
    content: ''; /* Empty content */
    width: 25px; /* Width of the circle */
    height: 25px; /* Height of the circle */
    background-color: #ccc; /* Background color of the circle */
    border-radius: 50%; /* Make the circle */
    display: inline-block; /* Display as inline-block */
    line-height: 25px; /* Vertical align center */
    margin: 0 auto 5px; /* Center the circle and add margin below */
    position: relative; /* Position relative to use left property */
    left: -10px; /* Shift the circle left to center it */
}

.progress-bar li::after {
    content: ''; /* Empty content */
    height: 4px; /* Height of the connecting line */
    background-color: #ccc; /* Background color of the line */
    position: absolute; /* Position absolute */
    top: 12px; /* Align with the center of the circle */
    left: calc(50% + 2.5px); /* Position from the left adjusted with the circle width */
    width: calc(100% - 25px); /* Full width minus the circle width */
    z-index: -1; /* Behind the circles */
}

.progress-bar li:first-child::after {
    content: none; /* Remove connecting line for the first item */
}

.progress-bar li:last-child::after {
    content: none; /* Remove connecting line for the last item */
}

.progress-bar li.active::before {
    background-color: #007bff; /* Blue color for active step */
}

.progress-bar li.active + li::after {
    background-color: #007bff; /* Blue color for connecting line to next active step */
}

/* Instructions */
/* To adjust the horizontal position of the progress circles, modify the 'left' property in the '.progress-bar li::before' selector */
/* To adjust the horizontal position of the connecting lines, modify the 'left' property in the '.progress-bar li::after' selector */