/* ========================================================================== iti-fix.css Scoped layout fixes for intl-tel-input v17.0.8 on ragroup.qa Load AFTER css/intlTelInput.css. Every rule is scoped to .iti so no other form on the site is affected. ========================================================================== */ /* 1. Wrapper width The library wraps the input in
which is display:inline-block with no width. The theme's .form-control inputs are width:100%, so inside an inline-block wrapper the field collapses to its shrink-to-fit width. Making the wrapper a full-width block restores the original field size. */ .iti { display: block; width: 100%; } .iti > input, .iti > input[type=tel], .iti > input[type=text] { width: 100%; } /* 2. Country list Stops the theme's global ul/li rules (bullets, padding, line-height, floats) from breaking the flag / country name / dial code row. */ .iti__country-list { list-style: none !important; margin: 0 0 0 -1px !important; padding: 0 !important; text-align: left !important; min-width: 280px; max-height: 220px; background-color: #fff; border: 1px solid #ccc; box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.18); } .iti__country { display: flex !important; align-items: center; float: none !important; width: auto !important; margin: 0 !important; padding: 7px 10px !important; line-height: 1.4 !important; font-size: 14px; color: #222; list-style: none !important; background: none; } .iti__country::before, .iti__country::after { content: none !important; } .iti__country-name { flex: 1 1 auto; margin-right: 8px !important; white-space: nowrap; } .iti__dial-code { flex: 0 0 auto; color: #888; white-space: nowrap; } .iti__flag-box { flex: 0 0 20px; margin-right: 8px !important; } .iti__divider { margin: 5px 0 !important; padding: 0 0 5px 0 !important; } /* 3. Selected flag and dial code alignment (separateDialCode: true) */ .iti--separate-dial-code .iti__selected-flag { background-color: rgba(0, 0, 0, 0.05); border-radius: 4px 0 0 4px; padding: 0 8px; } .iti__selected-dial-code { font-size: 14px; line-height: 1; color: #222; margin-left: 6px; } .iti__arrow { margin-left: 6px; } /* 4. Stacking The dropdown is appended to (dropdownContainer: document.body), so it has to sit above the sticky header, the preloader overlay and the step wrapper. */ .iti--container { z-index: 99999 !important; } /* 5. Mobile */ @media (max-width: 600px) { .iti__country-list { min-width: 0; width: 100%; white-space: normal; } .iti__country { padding: 10px !important; } .iti-mobile .iti--container { z-index: 99999 !important; } }