/* Center the content vertically and horizontally */
.wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

/* Style the rectangular area */
.setup-wizard-container {
    max-width: 800px; /* Adjust the max-width to your preference */
    margin: 0 auto;
    padding: 20px;
    background-color: #fff; /* Background color for the container */
    border: 1px solid #ccc; /* Border for a raised effect */
    border-radius: 5px; /* Add rounded corners for a raised effect */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add box shadow for a raised effect */
	color: #5A5A5A; /* Dark grey color, you can adjust the color code as needed */
}

.setup-wizard-progress {
    width: 100%; /* Adjust the width as needed */
    background-color: #4AC948; /* Adjust the background color */
    height: 20px; /* Adjust the height as needed */
}

.progress-bar {
    width: 0; /* The width will be adjusted dynamically with JavaScript */
    height: 100%;
    background-color: #b74e91; /* Progress bar color */
    transition: width 0.5s; /* Smooth transition for width changes */
}

/* Style for the primary button */
.custom-button {
    background-color: #4AC948; /* Button background color */
    color: #fff; /* Text color */
    border: none; /* Remove the button border */
    padding: 10px 20px; /* Adjust padding as needed */
    border-radius: 5px; /* Add rounded corners */
    font-size: 16px; /* Adjust font size */
    cursor: pointer; /* Show pointer cursor on hover */
}

.custom-button.button-primary {
    background-color: #b74e91; /* Customize the primary button color */
}

/* Hover effect for buttons */
.custom-button:hover {
    background-color: #59cb7b; /* Change color on hover */
}

.error-message {
    color: red;
}

.success-message {
    color: green;
}

.form-group {
    margin-bottom: 5px; /* Adjust this value as needed for the desired spacing */
}

/* Adjust the width of the input fields if needed */
input[type="email"],
input[type="text"],
input[type="password"] {
    width: 20%;
}
.form-group label {
    margin-bottom: 5px; /* You can adjust the value as needed */
}

/* Apply uniform spacing to all input fields */
.form-group input {
    margin-bottom: 5px; /* You can adjust the value as needed */
}