.step-container {
    position: relative;
    text-align: center;
    transform: translateY(-43%);
}

.step-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #007bff;
    line-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.step-line {
    position: absolute;
    top: 16px;
    left: 50px;
    width: calc(100% - 100px);
    height: 2px;
    background-color: #007bff;
    z-index: -1;
}

#form_data {
    overflow-x: hidden;
}

/** SELECT 2 TELEPHONE SELECTOR */
/* Limit the dropdown height and enable scrolling */
.select2-container--custom-theme .select2-results__options {
    max-height: 200px; /* Set the max height for the dropdown */
    overflow-y: auto; /* Enable vertical scrolling */
}

/* Base Select2 style for purina-form */
.purina-form .select2-container--custom-theme .select2-selection--single {
    border-width: 1px 0;
    border: solid transparent;
    border-bottom: var(--bs-border-width) var(--bs-border-style) #bdbdbd !important; /* Default gray border */
    border-radius: 0; /* No border radius */
    background: transparent; /* Transparent background */
    padding: 0.375rem 0; /* Adjust padding to align with input styles */
    min-height: 38px;
    line-height: 19px;
    font-size: 16px; /* Match form font size */
    color: #333; /* Default text color */
}

/* Focused and active states */
.purina-form .select2-container--custom-theme .select2-selection--single:focus,
.purina-form .select2-container--custom-theme .select2-selection--single:active,
.purina-form .select2-container--custom-theme .select2-selection--single:focus-visible {
    border-bottom: 1px solid #E91C24 !important; /* Red border for focused/active states */
    outline: none !important; /* Remove default focus outline */
}


/* Placeholder styling */
.purina-form .select2-container--custom-theme .select2-selection__placeholder {
    color: #bdbdbd; /* Placeholder text color */
    font-style: italic; /* Optional: italicize placeholder */
}

/* Selected item text */
.purina-form .select2-container--custom-theme .select2-selection__rendered {
    position:absolute;
    padding-left: 0; /* Align text with the border */
}

/* Dropdown menu styles */
.purina-form .select2-container--custom-theme .select2-dropdown {
    border: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional dropdown shadow */
}

/* Dropdown item styles */
.purina-form .select2-container--custom-theme .select2-results__option {
    padding: 8px 12px; /* Adjust padding */
    font-size: 16px; /* Match form font size */
}

/* Highlight selected/hovered option */
.purina-form .select2-container--custom-theme .select2-results__option--highlighted {
    background-color: #E91C24; /* Red highlight */
    color: #fff; /* White text for highlighted item */
}

/* Clear button styling */
.purina-form .select2-container--custom-theme .select2-selection__clear {
    color: #E91C24; /* Red clear button */
    font-size: 14px;
    cursor: pointer;
}

/* Restore the dropdown arrow for Select2 */
.purina-form .select2-container--custom-theme .select2-selection--single {
    position: relative; /* Ensure we can position the arrow */
    padding-right: 24px; /* Add space for the arrow */
}

/* Add the arrow */
.purina-form .select2-container--custom-theme .select2-selection--single .select2-selection__arrow {
    position: absolute;
    top: 30%;
    right: 4px; /* Adjust as needed */
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    pointer-events: none; /* Prevent arrow from interfering with clicks */
}

/* Add a custom style for the arrow icon */
.purina-form .select2-container--custom-theme .select2-selection--single .select2-selection__arrow b {
    border: solid #bdbdbd; /* Match the default border color */
    border-width: 0 1px 1px 0; /* Arrow pointing down */
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg); /* Create the arrow shape */
    margin-top: -2px;
}

/* Change arrow color on focus/active */
.purina-form .select2-container--custom-theme .select2-selection--single:focus .select2-selection__arrow b,
.purina-form .select2-container--custom-theme .select2-selection--single:active .select2-selection__arrow b,
.purina-form .select2-container--custom-theme .select2-selection--single:focus-visible .select2-selection__arrow b {
    border-color: #E91C24; /* Match the active border color */
}