/* The phone field (phone-field.js, intl-tel-input) in the style of the application: the same type, underline and colours as the other answers.
   Load this file after /vendor/intl-tel-input/css/intlTelInput.min.css. */
.iti.ph{display:block;width:min(100%,520px);font:24px Arial,sans-serif;color:#000;
  --iti-hover-color:#f3f8ed;--iti-border-color:#e4e5e8;--iti-icon-color:#777;--iti-spacer-horizontal:12px}
.iti.ph .text-input{width:100%}
.text-input.ph-bad,.text-input.ph-bad:focus,.text-input.ph-bad:focus-visible{border-bottom-color:#b42318} /* the page's focus colour (green) must not hide the error */
@media(max-width:650px){.iti.ph{font-size:22px}}
.ph .iti__country-container{padding:0}
.ph .iti__selected-country-primary{padding:0 6px 0 0}
.ph .iti__selected-dial-code{margin-left:8px}
.ph .iti__country-selector{border:1px solid var(--line,#e4e5e8);border-radius:10px;box-shadow:0 14px 34px -14px rgba(23,51,26,.38);overflow:hidden;font:16px/1.35 Arial,sans-serif;color:var(--ink,#111);margin-top:4px}
.ph .iti__search-input{font:16px Arial,sans-serif;color:var(--ink,#111);background:#fff;outline:none;border-radius:0}
.ph .iti__search-input::placeholder{color:#888}
.ph .iti__search-input::-webkit-search-cancel-button,.ph .iti__search-input::-webkit-search-decoration{display:none;-webkit-appearance:none} /* WebKit draws its own clear button. The library has one too. */
.ph .iti__search-input-wrapper:focus-within{border-bottom-color:#2e6e22}
.ph .iti__country-list{max-height:232px}
.ph .iti__country.iti__highlight{background:#e5f7d8}
.ph .iti__country-check{color:#2e6e22}
.ph .iti__dial-code{color:#777}
.ph-err{margin:6px 0 0;font:12px Arial,sans-serif;color:#b42318}
/* The message "Enter a valid phone number." shows beside OK on a wide screen and under OK on a phone. OK keeps its shape. */
.actions .ok{flex:none;white-space:nowrap}
#err:empty{display:none}
@media(max-width:480px){.apply .actions{flex-wrap:wrap}.apply .actions #err{flex-basis:100%}}