/* Ensure the container for the phone input is styled correctly */
.iti {
    width: 100% !important;
    position: relative;
}

/* Style the flag container */
.iti__flag-container {
    position: absolute !important;
    top: 50%;
    left: 10px;
    transform: translateY(-2%);
    z-index: 1000;
}

/* Style the selected flag and dial code */
.iti--separate-dial-code .iti__selected-flag {
    background-color: #f8f9fa; /* Light gray background */
    border-radius: 8px 0 0 8px;
    padding: 5px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px; /* Adjusted width for country code and partial name */
    overflow: hidden; /* Hide overflow to show half of the country name */
}

.iti--separate-dial-code .iti__selected-dial-code {
    margin-right: 5px; /* Add spacing between dial code and country name */
}

.iti--separate-dial-code .iti__country-name {
    white-space: nowrap; /* Prevent country name from wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ellipsis for overflow */
    max-width: 50%; /* Show only half of the country name */
}

/* Adjust padding for the phone input field */
.welcome-box-field {
    padding-left: 140px !important; /* Adjust padding for country selector */
}

/* Ensure the dropdown appears below the input field */
.iti__country-list {
    z-index: 1050 !important;
    position: absolute;
    background: white;
    border-radius: 4px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    width: 300px !important; /* Increased width for better visibility */
    font-size: 12px !important; /* Smaller font */
    padding: 5px 8px !important; /* Less padding */
    max-height: 200px !important; /* Prevents it from getting too big */
    overflow-y: auto !important; /* Scroll if too many countries */
    top: 100% !important; /* Position below the input field */
    left: 0 !important; /* Align with the left edge of the input field */
    margin-top: 5px !important; /* Add some spacing */
}






 .iti--separate-dial-code .iti__selected-flag {
    background-color: #f8f9fa;
    border-radius: 8px 0 0 8px;
    /* padding: 5px; */
    height: 45px !important;
    display: flex
;
    align-items: center;
    justify-content: center;
    width: 120px;
    overflow: hidden;
}