/* General Styles */
body {
    background-color: #f8f9fa;
}

.iig-logo {
    max-width: 30%;
}

.custom-container {
    max-width: 31.25rem; /* Increased width */
    margin-top: 6.25rem; /* Spacing from top */
    padding: 1.25rem;
    background: white; /* White background for the form */
    border-radius: 0.625rem; /* Rounded corners */
    box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.form-group {
    margin-bottom: 1.25rem; /* Space between form groups */
}

input {
    transition: border-color 0.3s ease;
    border-radius: 0.3125rem; /* Rounded input corners */
}

.error-message {
    font-size: 12px;
    color: red;
    display: none; /* Initially hidden */
    transition: opacity 0.3s ease;
    opacity: 0; /* Start hidden */
}

.error-message.show {
    display: block; /* Show when needed */
    opacity: 1; /* Fade in */
}

.text-danger{
    color: red; /* Ensure the asterisk is red */
}

/* Dashboard Styles */
.header-content {
    background-color: #474789;
    color: white;
    padding: 0.3125rem 0;
    position: relative;
    box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between; /* Space between logo and buttons */
    align-items: center; /* Center items vertically */
    margin: 0 auto; /* Center the header */
    padding: 0 0.3125rem; /* Padding on the sides */
}

.header-logo {
    font-size: 1.5rem; /* Logo text size */
    font-weight: bold; /* Bold logo */
}

.header-buttons {
    display: flex; /* Flex container for buttons */
}

.header-button {
    background-color: white; /* Button background */
    color: #474789; /* Button text color */
    border: none; /* No border */
    border-radius: 0.3125rem; /* Rounded corners */
    padding: 0.625rem 0.9375rem; /* Padding for buttons */
    margin-left: 0.625rem; /* Space between buttons */
    cursor: pointer; /* Pointer on hover */
    transition: background-color 0.3s, color 0.3s; /* Transition for hover effects */
}

.header-button:hover {
    background-color: #e2e6ea; /* Light background on hover */
    color: #333; /* Dark text on hover */
}

.step-indicator {
    display: inline-block;
    width: 1.875rem; /* Adjust the size as needed */
    height: 1.875rem; /* Adjust the size as needed */
    border-radius: 50%;
    border: 0.125rem solid #474789; /* Border color */
    color: #474789; /* Text color */
    text-align: center;
    line-height: 1.6875rem; /* Vertically center the text */
    margin: 0 0.5rem; /* Space between circles */
    font-weight: bold; /* Bold text */
    position: relative; /* Position for the line */
}

.step-indicator.active {
    background-color: #474789; /* Active step background color */
    color: white; /* Active step text color */
}

.step-line {
    display: inline-block;
    width: 3.125rem; /* Adjust the line length as needed */
    height: 0.125rem; /* Line thickness */
    background-color: #474789; /* Line color */
    vertical-align: middle; /* Align with the circles */
    position: relative; /* To position line in the center of circles */
}

.btn.btn-primary {
    background-color: #474789 !important;
    border-color: #474789 !important;
}

.input-group .input-group-text {
    display: flex;
    align-items: center; /* Center the icon vertically */
    height: 100%; /* Match the height of the input */
}

.bootstrap-select{
    border: 1px solid #dddddd !important;
}

#grl-widget{
    margin-top: 1%;
}