intl-tel-input 20.2.0 → 21.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -44,12 +44,14 @@ By default, on mobile devices we show a fullscreen popup instead of the inline d
44
44
  * Automatically set the input placeholder to an example number for the selected country
45
45
  * Navigate the country dropdown by typing a country's name, or using up/down keys
46
46
  * Automatically format the number as the user types
47
- * Handle phone number extensions
48
- * The user types their national number and the plugin gives you the full standardized international number
49
- * Full validation, including specific error types
50
- * Retina flag icons
51
- * Lots of initialisation options for customisation, as well as public methods for interaction
47
+ * Optionally only allow numeric characters and cap the number at the maximum valid length
48
+ * The user types their national number and the plugin gives you the full standardised international number
49
+ * Number validation, including specific error types
50
+ * High-resolution flag images
51
+ * Lots of initialisation options for customisation, as well as public methods/events for interaction
52
52
  * Accessibility provided via ARIA tags
53
+ * Typescript declaration files provided
54
+ * Easily customise styles by overriding the provided CSS variables
53
55
 
54
56
 
55
57
  ## Browser Compatibility
@@ -62,16 +64,16 @@ _Note: We have now dropped support for all versions of Internet Explorer because
62
64
  ## Getting Started (Using a CDN)
63
65
  1. Add the CSS
64
66
  ```html
65
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@20.2.0/build/css/intlTelInput.css">
67
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@21.0.0/build/css/intlTelInput.css">
66
68
  ```
67
69
 
68
70
  2. Add the plugin script and initialise it on your input element
69
71
  ```html
70
- <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@20.2.0/build/js/intlTelInput.min.js"></script>
72
+ <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@21.0.0/build/js/intlTelInput.min.js"></script>
71
73
  <script>
72
74
  const input = document.querySelector("#phone");
73
75
  window.intlTelInput(input, {
74
- utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@20.2.0/build/js/utils.js",
76
+ utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@21.0.0/build/js/utils.js",
75
77
  });
76
78
  </script>
77
79
  ```
@@ -145,7 +147,7 @@ When you initialise the plugin, the first argument is the input element, and the
145
147
 
146
148
  **allowDropdown**
147
149
  Type: `Boolean` Default: `true`
148
- Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected flag is not clickable. Also, we display the selected flag on the right instead because it is just a marker of state. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--allowdropdown) (using the React component).
150
+ Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected country is not clickable. Also, if showFlags is enabled and showSelectedDialCode is disabled, we display the selected flag on the right instead because it is just a marker of state. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--allowdropdown) (using the React component).
149
151
 
150
152
  **autoPlaceholder**
151
153
  Type: `String` Default: `"polite"`
@@ -193,21 +195,21 @@ Format the input value (according to the `nationalMode` option) during initialis
193
195
 
194
196
  **geoIpLookup**
195
197
  Type: `Function` Default: `null`
196
- When setting `initialCountry` to `"auto"`, you must use this option to specify a custom function that calls an IP lookup service to get the user's location and then invokes the callback with the relevant country code. Also note that when instantiating the plugin, a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) object is returned under the `promise` instance property, so you can do something like `iti.promise.then(callback)` to know when initialisation requests like this have completed.
198
+ When setting `initialCountry` to `"auto"`, you must use this option to specify a custom function that calls an IP lookup service to get the user's location and then invokes the `success` callback with the relevant country code. Also note that when instantiating the plugin, a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) object is returned under the `promise` instance property, so you can do something like `iti.promise.then(...)` to know when initialisation requests like this have completed.
197
199
 
198
200
  Here is an example using the [ipapi](https://ipapi.co/api/?javascript#location-of-clients-ip) service:
199
201
  ```js
200
202
  intlTelInput(input, {
201
203
  initialCountry: "auto",
202
- geoIpLookup: function(callback) {
204
+ geoIpLookup: function(success, failure) {
203
205
  fetch("https://ipapi.co/json")
204
206
  .then(function(res) { return res.json(); })
205
- .then(function(data) { callback(data.country_code); })
206
- .catch(function() { callback(); });
207
+ .then(function(data) { success(data.country_code); })
208
+ .catch(function() { failure(); });
207
209
  }
208
210
  });
209
211
  ```
210
- _Note that the callback must still be called in the event of an error, hence the use of `catch()` in this example. Tip: store the result in a cookie to avoid repeat lookups!_
212
+ _Note that the `failure` callback must be called in the event of an error, hence the use of `catch()` in this example. Tip: store the result in a cookie to avoid repeat lookups!_
211
213
 
212
214
  **hiddenInput**
213
215
  Type: `Function` Default: `null`
@@ -297,7 +299,7 @@ Display the country dial code next to the selected flag. Play with this option o
297
299
 
298
300
  **strictMode**
299
301
  Type: `Boolean` Default: `false`
300
- Ignore irrelevant characters (e.g. only allow a plus at the beginning, followed by numbers), and cap the length at the maximum valid number length. Requires the `utilsScript` option.
302
+ As the user types in the input, ignore any irrelevant characters. Basically, the user can only enter numeric characters, and an optional plus at the beginning. Cap the length at the maximum valid number length. Requires the `utilsScript` option. [See example](https://intl-tel-input.com/examples/strict-mode.html).
301
303
 
302
304
  **useFullscreenPopup**
303
305
  Type: `Boolean` Default: `true on mobile devices, false otherwise`
@@ -350,7 +352,7 @@ if (numberType === intlTelInputUtils.numberType.MOBILE) {
350
352
  _Note that in the US there's no way to differentiate between fixed-line and mobile numbers, so instead it will return `FIXED_LINE_OR_MOBILE`._
351
353
 
352
354
  **getSelectedCountryData**
353
- Get the country data for the currently selected flag.
355
+ Get the country data for the currently selected country.
354
356
  ```js
355
357
  const countryData = iti.getSelectedCountryData();
356
358
  ```
@@ -398,7 +400,7 @@ iti.setCountry("gb");
398
400
  ```
399
401
 
400
402
  **setNumber**
401
- Insert a number, and update the selected flag accordingly. _Note that if `formatOnDisplay` is enabled, this will attempt to format the number to either national or international format according to the `nationalMode` option._
403
+ Insert a number, and update the selected country accordingly. _Note that if `formatOnDisplay` is enabled, this will attempt to format the number to either national or international format according to the `nationalMode` option._
402
404
  ```js
403
405
  iti.setNumber("+447733123456");
404
406
  ```
@@ -444,7 +446,7 @@ window.intlTelInputGlobals.loadUtils("build/js/utils.js");
444
446
  You can listen for the following events on the input.
445
447
 
446
448
  **countrychange**
447
- This is triggered when the selected flag is updated e.g. if the user selects a country from the dropdown, or they type a different dial code into the input, or you call `setCountry` etc.
449
+ This is triggered when the selected country is updated e.g. if the user selects a country from the dropdown, or they type a different dial code into the input, or you call `setCountry` etc.
448
450
  ```js
449
451
  input.addEventListener("countrychange", function() {
450
452
  // do something with iti.getSelectedCountryData()
@@ -526,7 +528,6 @@ See the [contributing guide](https://github.com/jackocnr/intl-tel-input/blob/mas
526
528
 
527
529
  ## Links
528
530
  * List of [integrations with intl-tel-input](https://github.com/jackocnr/intl-tel-input/wiki/Integrations)
529
- * Typescript type definitions are available in the [DefinitelyTyped repo](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/intl-tel-input/index.d.ts) (more info [here](https://github.com/jackocnr/intl-tel-input/issues/433#issuecomment-228517623))
530
531
 
531
532
  <img width="200" src="https://www.browserstack.com/images/layout/browserstack-logo-600x315.png" /><br />
532
533
  Testing powered by [BrowserStack Open-Source Program](https://www.browserstack.com/open-source)
@@ -10,7 +10,7 @@ body {
10
10
  }
11
11
 
12
12
  input,
13
- button {
13
+ .button {
14
14
  height: 35px;
15
15
  margin: 0;
16
16
  padding: 6px 12px;
@@ -20,7 +20,7 @@ button {
20
20
  color: inherit;
21
21
  }
22
22
  input[disabled],
23
- button[disabled] {
23
+ .button[disabled] {
24
24
  background-color: #eee;
25
25
  }
26
26
 
@@ -34,13 +34,13 @@ input::placeholder {
34
34
  color: #bbb;
35
35
  }
36
36
 
37
- button {
37
+ .button {
38
38
  color: #fff;
39
39
  background-color: #428bca;
40
40
  border: 1px solid #357ebd;
41
41
  margin-left: 5px;
42
42
  }
43
- button:hover {
43
+ .button:hover {
44
44
  background-color: #3276b1;
45
45
  border-color: #285e8e;
46
46
  cursor: pointer;
@@ -1,3 +1,26 @@
1
+ :root {
2
+ --iti-hover-color: rgba(0, 0, 0, 0.05);
3
+ --iti-text-gray: #999;
4
+ --iti-border-gray: #ccc;
5
+ --iti-spacer-horizontal: 8px;
6
+ --iti-flag-height: 15px;
7
+ --iti-flag-width: 20px;
8
+ --iti-border-width: 1px;
9
+ --iti-arrow-height: 4px;
10
+ --iti-arrow-width: 6px;
11
+ --iti-triangle-border: calc(var(--iti-arrow-width) / 2);
12
+ --iti-arrow-padding: 6px;
13
+ --iti-arrow-color: #555;
14
+ --iti-input-padding: 6px;
15
+ --iti-right-hand-selected-country-padding: calc(var(--iti-spacer-horizontal) + var(--iti-spacer-horizontal) + var(--iti-flag-width));
16
+ --iti-selected-country-arrow-padding: calc(var(--iti-arrow-padding) + var(--iti-arrow-padding) + var(--iti-flag-width) + var(--iti-spacer-horizontal) + var(--iti-arrow-width) + var(--iti-input-padding));
17
+ --iti-path-flags-1x: url("../img/flags.png?1");
18
+ --iti-path-flags-2x: url("../img/flags@2x.png?1");
19
+ --iti-path-globe-1x: url("../img/globe.png");
20
+ --iti-path-globe-2x: url("../img/globe@2x.png");
21
+ --iti-mobile-popup-margin: 30px;
22
+ }
23
+
1
24
  .iti {
2
25
  position: relative;
3
26
  display: inline-block;
@@ -25,39 +48,48 @@
25
48
  z-index: 0;
26
49
  margin-top: 0 !important;
27
50
  margin-bottom: 0 !important;
28
- padding-right: 36px;
51
+ padding-right: var(--iti-right-hand-selected-country-padding);
29
52
  margin-right: 0;
30
53
  }
31
- .iti__flag-container {
54
+ .iti__country-container {
32
55
  position: absolute;
33
56
  top: 0;
34
57
  bottom: 0;
35
58
  right: 0;
36
- padding: 1px;
59
+ padding: var(--iti-border-width);
37
60
  }
38
- .iti__selected-flag {
61
+ .iti__selected-country {
39
62
  z-index: 1;
40
63
  position: relative;
41
64
  display: flex;
42
65
  align-items: center;
43
66
  height: 100%;
44
- padding: 0 6px 0 8px;
67
+ padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal);
68
+ background: none;
69
+ border: 0;
70
+ margin: 0;
71
+ font-size: inherit;
72
+ color: inherit;
73
+ border-radius: 0;
74
+ font-weight: inherit;
75
+ line-height: inherit;
76
+ text-decoration: none;
45
77
  }
46
78
  .iti__arrow {
47
- margin-left: 6px;
79
+ margin-left: var(--iti-arrow-padding);
48
80
  width: 0;
49
81
  height: 0;
50
- border-left: 3px solid transparent;
51
- border-right: 3px solid transparent;
52
- border-top: 4px solid #555;
82
+ border-left: var(--iti-triangle-border) solid transparent;
83
+ border-right: var(--iti-triangle-border) solid transparent;
84
+ border-top: var(--iti-arrow-height) solid var(--iti-arrow-color);
53
85
  }
54
86
  [dir=rtl] .iti__arrow {
55
- margin-right: 6px;
87
+ margin-right: var(--iti-arrow-padding);
56
88
  margin-left: 0;
57
89
  }
58
90
  .iti__arrow--up {
59
91
  border-top: none;
60
- border-bottom: 4px solid #555;
92
+ border-bottom: var(--iti-arrow-height) solid var(--iti-arrow-color);
61
93
  }
62
94
  .iti__dropdown-content {
63
95
  border-radius: 3px;
@@ -67,8 +99,8 @@
67
99
  position: absolute;
68
100
  z-index: 2;
69
101
  margin-top: 3px;
70
- margin-left: -1px;
71
- border: 1px solid #ccc;
102
+ margin-left: calc(var(--iti-border-width) * -1);
103
+ border: var(--iti-border-width) solid var(--iti-border-gray);
72
104
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
73
105
  }
74
106
  .iti__dropdown-content--dropup {
@@ -82,7 +114,7 @@
82
114
  padding: 9px 12px;
83
115
  }
84
116
  .iti__search-input + .iti__country-list {
85
- border-top: 1px solid #ccc;
117
+ border-top: 1px solid var(--iti-border-gray);
86
118
  }
87
119
  .iti__country-list {
88
120
  list-style: none;
@@ -104,39 +136,39 @@
104
136
  }
105
137
  .iti__flag-box {
106
138
  display: inline-block;
107
- width: 20px;
139
+ width: var(--iti-flag-width);
108
140
  }
109
141
  .iti__divider {
110
142
  padding-bottom: 5px;
111
143
  margin-bottom: 5px;
112
- border-bottom: 1px solid #ccc;
144
+ border-bottom: var(--iti-border-width) solid var(--iti-border-gray);
113
145
  }
114
146
  .iti__country {
115
147
  display: flex;
116
148
  align-items: center;
117
- padding: 8px 8px;
149
+ padding: 8px var(--iti-spacer-horizontal);
118
150
  outline: none;
119
151
  }
120
152
  .iti__dial-code {
121
- color: #999;
153
+ color: var(--iti-text-gray);
122
154
  }
123
155
  .iti__country.iti__highlight {
124
- background-color: rgba(0, 0, 0, 0.05);
156
+ background-color: var(--iti-hover-color);
125
157
  }
126
158
  .iti__flag-box, .iti__country-name {
127
- margin-right: 8px;
159
+ margin-right: var(--iti-spacer-horizontal);
128
160
  }
129
161
  [dir=rtl] .iti__flag-box, [dir=rtl] .iti__country-name {
130
162
  margin-right: 0;
131
- margin-left: 8px;
163
+ margin-left: var(--iti-spacer-horizontal);
132
164
  }
133
165
  .iti--allow-dropdown input.iti__tel-input,
134
166
  .iti--allow-dropdown input.iti__tel-input[type=text],
135
167
  .iti--allow-dropdown input.iti__tel-input[type=tel], .iti--show-selected-dial-code input.iti__tel-input,
136
168
  .iti--show-selected-dial-code input.iti__tel-input[type=text],
137
169
  .iti--show-selected-dial-code input.iti__tel-input[type=tel] {
138
- padding-right: 6px;
139
- padding-left: 52px;
170
+ padding-right: var(--iti-input-padding);
171
+ padding-left: var(--iti-selected-country-arrow-padding);
140
172
  margin-left: 0;
141
173
  }
142
174
  [dir=rtl] .iti--allow-dropdown input.iti__tel-input,
@@ -144,48 +176,48 @@
144
176
  [dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--show-selected-dial-code input.iti__tel-input,
145
177
  [dir=rtl] .iti--show-selected-dial-code input.iti__tel-input[type=text],
146
178
  [dir=rtl] .iti--show-selected-dial-code input.iti__tel-input[type=tel] {
147
- padding-right: 52px;
148
- padding-left: 6px;
179
+ padding-right: var(--iti-selected-country-arrow-padding);
180
+ padding-left: var(--iti-input-padding);
149
181
  margin-right: 0;
150
182
  }
151
- .iti--allow-dropdown .iti__flag-container, .iti--show-selected-dial-code .iti__flag-container {
183
+ .iti--allow-dropdown .iti__country-container, .iti--show-selected-dial-code .iti__country-container {
152
184
  right: auto;
153
185
  left: 0;
154
186
  }
155
- [dir=rtl] .iti--allow-dropdown .iti__flag-container, [dir=rtl] .iti--show-selected-dial-code .iti__flag-container {
187
+ [dir=rtl] .iti--allow-dropdown .iti__country-container, [dir=rtl] .iti--show-selected-dial-code .iti__country-container {
156
188
  right: 0;
157
189
  left: auto;
158
190
  }
159
- .iti--allow-dropdown .iti__flag-container:hover {
191
+ .iti--allow-dropdown .iti__country-container:hover, .iti--allow-dropdown .iti__country-container:hover button {
160
192
  cursor: pointer;
161
193
  }
162
- .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
163
- background-color: rgba(0, 0, 0, 0.05);
194
+ .iti--allow-dropdown .iti__country-container:hover .iti__selected-country {
195
+ background-color: var(--iti-hover-color);
164
196
  }
165
- .iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
166
- .iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
197
+ .iti--allow-dropdown .iti__country-container:has(+ input[disabled]):hover,
198
+ .iti--allow-dropdown .iti__country-container:has(+ input[readonly]):hover {
167
199
  cursor: default;
168
200
  }
169
- .iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
170
- .iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
201
+ .iti--allow-dropdown .iti__country-container:has(+ input[disabled]):hover .iti__selected-country,
202
+ .iti--allow-dropdown .iti__country-container:has(+ input[readonly]):hover .iti__selected-country {
171
203
  background-color: transparent;
172
204
  }
173
- .iti--show-selected-dial-code .iti__selected-flag {
174
- background-color: rgba(0, 0, 0, 0.05);
205
+ .iti--show-selected-dial-code .iti__selected-country {
206
+ background-color: var(--iti-hover-color);
175
207
  }
176
208
  .iti--show-selected-dial-code.iti--show-flags .iti__selected-dial-code {
177
- margin-left: 6px;
209
+ margin-left: var(--iti-arrow-padding);
178
210
  }
179
211
  [dir=rtl] .iti--show-selected-dial-code.iti--show-flags .iti__selected-dial-code {
180
212
  margin-left: 0;
181
- margin-right: 6px;
213
+ margin-right: var(--iti-arrow-padding);
182
214
  }
183
215
  .iti--container {
184
216
  position: fixed;
185
217
  top: -1000px;
186
218
  left: -1000px;
187
219
  z-index: 1060;
188
- padding: 1px;
220
+ padding: var(--iti-border-width);
189
221
  }
190
222
  .iti--container:hover {
191
223
  cursor: pointer;
@@ -198,7 +230,7 @@
198
230
  left: 0;
199
231
  right: 0;
200
232
  position: fixed;
201
- padding: 30px;
233
+ padding: var(--iti-mobile-popup-margin);
202
234
  display: flex;
203
235
  flex-direction: column;
204
236
  justify-content: center;
@@ -1297,20 +1329,20 @@
1297
1329
  }
1298
1330
 
1299
1331
  .iti__flag {
1300
- height: 15px;
1332
+ height: var(--iti-flag-height);
1301
1333
  box-shadow: 0px 0px 1px 0px #888;
1302
- background-image: url("../img/flags.png?1");
1334
+ background-image: var(--iti-path-flags-1x);
1303
1335
  background-repeat: no-repeat;
1304
- background-position: 20px 0;
1336
+ background-position: var(--iti-flag-width) 0;
1305
1337
  }
1306
1338
  @media (min-resolution: 2x) {
1307
1339
  .iti__flag {
1308
- background-image: url("../img/flags@2x.png?1");
1340
+ background-image: var(--iti-path-flags-2x);
1309
1341
  }
1310
1342
  }
1311
1343
 
1312
1344
  .iti__globe {
1313
- background-image: url("../img/globe.png");
1345
+ background-image: var(--iti-path-globe-1x);
1314
1346
  background-size: contain;
1315
1347
  background-position: right;
1316
1348
  box-shadow: none;
@@ -1318,6 +1350,6 @@
1318
1350
  }
1319
1351
  @media (min-resolution: 2x) {
1320
1352
  .iti__globe {
1321
- background-image: url("../img/globe@2x.png");
1353
+ background-image: var(--iti-path-globe-2x);
1322
1354
  }
1323
1355
  }
@@ -1 +1 @@
1
- .iti{position:relative;display:inline-block}.iti *{box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti__a11y-text{width:1px;height:1px;clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute}.iti input.iti__tel-input,.iti input.iti__tel-input[type=tel],.iti input.iti__tel-input[type=text]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-right:36px;margin-right:0}.iti__flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.iti__selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 6px 0 8px}.iti__arrow{margin-left:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}[dir=rtl] .iti__arrow{margin-right:6px;margin-left:0}.iti__arrow--up{border-top:none;border-bottom:4px solid #555}.iti__dropdown-content{border-radius:3px;background-color:#fff}.iti--inline-dropdown .iti__dropdown-content{position:absolute;z-index:2;margin-top:3px;margin-left:-1px;border:1px solid #ccc;box-shadow:1px 1px 4px rgba(0,0,0,.2)}.iti__dropdown-content--dropup{bottom:100%;margin-bottom:3px}.iti__search-input{width:100%;border-width:0;border-radius:3px;padding:9px 12px}.iti__search-input+.iti__country-list{border-top:1px solid #ccc}.iti__country-list{list-style:none;padding:0;margin:0;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti--inline-dropdown .iti__country-list{max-height:185px}.iti--flexible-dropdown-width .iti__country-list{white-space:nowrap}@media (max-width:500px){.iti--flexible-dropdown-width .iti__country-list{white-space:normal}}.iti__flag-box{display:inline-block;width:20px}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.iti__country{display:flex;align-items:center;padding:8px 8px;outline:0}.iti__dial-code{color:#999}.iti__country.iti__highlight{background-color:rgba(0,0,0,.05)}.iti__country-name,.iti__flag-box{margin-right:8px}[dir=rtl] .iti__country-name,[dir=rtl] .iti__flag-box{margin-right:0;margin-left:8px}.iti--allow-dropdown input.iti__tel-input,.iti--allow-dropdown input.iti__tel-input[type=tel],.iti--allow-dropdown input.iti__tel-input[type=text],.iti--show-selected-dial-code input.iti__tel-input,.iti--show-selected-dial-code input.iti__tel-input[type=tel],.iti--show-selected-dial-code input.iti__tel-input[type=text]{padding-right:6px;padding-left:52px;margin-left:0}[dir=rtl] .iti--allow-dropdown input.iti__tel-input,[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel],[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],[dir=rtl] .iti--show-selected-dial-code input.iti__tel-input,[dir=rtl] .iti--show-selected-dial-code input.iti__tel-input[type=tel],[dir=rtl] .iti--show-selected-dial-code input.iti__tel-input[type=text]{padding-right:52px;padding-left:6px;margin-right:0}.iti--allow-dropdown .iti__flag-container,.iti--show-selected-dial-code .iti__flag-container{right:auto;left:0}[dir=rtl] .iti--allow-dropdown .iti__flag-container,[dir=rtl] .iti--show-selected-dial-code .iti__flag-container{right:0;left:auto}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:rgba(0,0,0,.05)}.iti--allow-dropdown .iti__flag-container:has(+input[disabled]):hover,.iti--allow-dropdown .iti__flag-container:has(+input[readonly]):hover{cursor:default}.iti--allow-dropdown .iti__flag-container:has(+input[disabled]):hover .iti__selected-flag,.iti--allow-dropdown .iti__flag-container:has(+input[readonly]):hover .iti__selected-flag{background-color:transparent}.iti--show-selected-dial-code .iti__selected-flag{background-color:rgba(0,0,0,.05)}.iti--show-selected-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:6px}[dir=rtl] .iti--show-selected-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:0;margin-right:6px}.iti--container{position:fixed;top:-1000px;left:-1000px;z-index:1060;padding:1px}.iti--container:hover{cursor:pointer}.iti--fullscreen-popup.iti--container{background-color:rgba(0,0,0,.5);top:0;bottom:0;left:0;right:0;position:fixed;padding:30px;display:flex;flex-direction:column;justify-content:center}.iti--fullscreen-popup.iti--container.iti--country-search{justify-content:flex-start}.iti--fullscreen-popup .iti__dropdown-content{display:flex;flex-direction:column;max-height:100%;position:relative}.iti--fullscreen-popup .iti__country{padding:10px 10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (min-resolution:2x){.iti__flag{background-size:5762px 15px}}.iti__flag.iti__ac{height:10px;background-position:0 0}.iti__flag.iti__ad{height:14px;background-position:-22px 0}.iti__flag.iti__ae{height:10px;background-position:-44px 0}.iti__flag.iti__af{height:14px;background-position:-66px 0}.iti__flag.iti__ag{height:14px;background-position:-88px 0}.iti__flag.iti__ai{height:10px;background-position:-110px 0}.iti__flag.iti__al{height:15px;background-position:-132px 0}.iti__flag.iti__am{height:10px;background-position:-154px 0}.iti__flag.iti__ao{height:14px;background-position:-176px 0}.iti__flag.iti__aq{height:14px;background-position:-198px 0}.iti__flag.iti__ar{height:13px;background-position:-220px 0}.iti__flag.iti__as{height:10px;background-position:-242px 0}.iti__flag.iti__at{height:14px;background-position:-264px 0}.iti__flag.iti__au{height:10px;background-position:-286px 0}.iti__flag.iti__aw{height:14px;background-position:-308px 0}.iti__flag.iti__ax{height:13px;background-position:-330px 0}.iti__flag.iti__az{height:10px;background-position:-352px 0}.iti__flag.iti__ba{height:10px;background-position:-374px 0}.iti__flag.iti__bb{height:14px;background-position:-396px 0}.iti__flag.iti__bd{height:12px;background-position:-418px 0}.iti__flag.iti__be{height:15px;background-position:-440px 0}.iti__flag.iti__bf{height:14px;background-position:-460px 0}.iti__flag.iti__bg{height:12px;background-position:-482px 0}.iti__flag.iti__bh{height:12px;background-position:-504px 0}.iti__flag.iti__bi{height:12px;background-position:-526px 0}.iti__flag.iti__bj{height:14px;background-position:-548px 0}.iti__flag.iti__bl{height:14px;background-position:-570px 0}.iti__flag.iti__bm{height:10px;background-position:-592px 0}.iti__flag.iti__bn{height:10px;background-position:-614px 0}.iti__flag.iti__bo{height:14px;background-position:-636px 0}.iti__flag.iti__bq{height:14px;background-position:-658px 0}.iti__flag.iti__br{height:14px;background-position:-680px 0}.iti__flag.iti__bs{height:10px;background-position:-702px 0}.iti__flag.iti__bt{height:14px;background-position:-724px 0}.iti__flag.iti__bv{height:15px;background-position:-746px 0}.iti__flag.iti__bw{height:14px;background-position:-768px 0}.iti__flag.iti__by{height:10px;background-position:-790px 0}.iti__flag.iti__bz{height:12px;background-position:-812px 0}.iti__flag.iti__ca{height:10px;background-position:-834px 0}.iti__flag.iti__cc{height:10px;background-position:-856px 0}.iti__flag.iti__cd{height:15px;background-position:-878px 0}.iti__flag.iti__cf{height:14px;background-position:-900px 0}.iti__flag.iti__cg{height:14px;background-position:-922px 0}.iti__flag.iti__ch{height:15px;background-position:-944px 0}.iti__flag.iti__ci{height:14px;background-position:-961px 0}.iti__flag.iti__ck{height:10px;background-position:-983px 0}.iti__flag.iti__cl{height:14px;background-position:-1005px 0}.iti__flag.iti__cm{height:14px;background-position:-1027px 0}.iti__flag.iti__cn{height:14px;background-position:-1049px 0}.iti__flag.iti__co{height:14px;background-position:-1071px 0}.iti__flag.iti__cp{height:14px;background-position:-1093px 0}.iti__flag.iti__cq{height:12px;background-position:-1115px 0}.iti__flag.iti__cr{height:12px;background-position:-1137px 0}.iti__flag.iti__cu{height:10px;background-position:-1159px 0}.iti__flag.iti__cv{height:12px;background-position:-1181px 0}.iti__flag.iti__cw{height:14px;background-position:-1203px 0}.iti__flag.iti__cx{height:10px;background-position:-1225px 0}.iti__flag.iti__cy{height:14px;background-position:-1247px 0}.iti__flag.iti__cz{height:14px;background-position:-1269px 0}.iti__flag.iti__de{height:12px;background-position:-1291px 0}.iti__flag.iti__dg{height:10px;background-position:-1313px 0}.iti__flag.iti__dj{height:14px;background-position:-1335px 0}.iti__flag.iti__dk{height:15px;background-position:-1357px 0}.iti__flag.iti__dm{height:10px;background-position:-1379px 0}.iti__flag.iti__do{height:14px;background-position:-1401px 0}.iti__flag.iti__dz{height:14px;background-position:-1423px 0}.iti__flag.iti__ea{height:14px;background-position:-1445px 0}.iti__flag.iti__ec{height:14px;background-position:-1467px 0}.iti__flag.iti__ee{height:13px;background-position:-1489px 0}.iti__flag.iti__eg{height:14px;background-position:-1511px 0}.iti__flag.iti__eh{height:10px;background-position:-1533px 0}.iti__flag.iti__er{height:10px;background-position:-1555px 0}.iti__flag.iti__es{height:14px;background-position:-1577px 0}.iti__flag.iti__et{height:10px;background-position:-1599px 0}.iti__flag.iti__eu{height:14px;background-position:-1621px 0}.iti__flag.iti__ez{height:14px;background-position:-1643px 0}.iti__flag.iti__fi{height:12px;background-position:-1665px 0}.iti__flag.iti__fj{height:10px;background-position:-1687px 0}.iti__flag.iti__fk{height:10px;background-position:-1709px 0}.iti__flag.iti__fm{height:11px;background-position:-1731px 0}.iti__flag.iti__fo{height:15px;background-position:-1753px 0}.iti__flag.iti__fr{height:14px;background-position:-1775px 0}.iti__flag.iti__fx{height:14px;background-position:-1797px 0}.iti__flag.iti__ga{height:15px;background-position:-1819px 0}.iti__flag.iti__gb{height:10px;background-position:-1841px 0}.iti__flag.iti__gd{height:12px;background-position:-1863px 0}.iti__flag.iti__ge{height:14px;background-position:-1885px 0}.iti__flag.iti__gf{height:14px;background-position:-1907px 0}.iti__flag.iti__gg{height:14px;background-position:-1929px 0}.iti__flag.iti__gh{height:14px;background-position:-1951px 0}.iti__flag.iti__gi{height:10px;background-position:-1973px 0}.iti__flag.iti__gl{height:14px;background-position:-1995px 0}.iti__flag.iti__gm{height:14px;background-position:-2017px 0}.iti__flag.iti__gn{height:14px;background-position:-2039px 0}.iti__flag.iti__gp{height:14px;background-position:-2061px 0}.iti__flag.iti__gq{height:14px;background-position:-2083px 0}.iti__flag.iti__gr{height:14px;background-position:-2105px 0}.iti__flag.iti__gs{height:10px;background-position:-2127px 0}.iti__flag.iti__gt{height:13px;background-position:-2149px 0}.iti__flag.iti__gu{height:11px;background-position:-2171px 0}.iti__flag.iti__gw{height:10px;background-position:-2193px 0}.iti__flag.iti__gy{height:12px;background-position:-2215px 0}.iti__flag.iti__hk{height:14px;background-position:-2237px 0}.iti__flag.iti__hm{height:10px;background-position:-2259px 0}.iti__flag.iti__hn{height:10px;background-position:-2281px 0}.iti__flag.iti__hr{height:10px;background-position:-2303px 0}.iti__flag.iti__ht{height:12px;background-position:-2325px 0}.iti__flag.iti__hu{height:10px;background-position:-2347px 0}.iti__flag.iti__ic{height:14px;background-position:-2369px 0}.iti__flag.iti__id{height:14px;background-position:-2391px 0}.iti__flag.iti__ie{height:10px;background-position:-2413px 0}.iti__flag.iti__il{height:15px;background-position:-2435px 0}.iti__flag.iti__im{height:10px;background-position:-2457px 0}.iti__flag.iti__in{height:14px;background-position:-2479px 0}.iti__flag.iti__io{height:10px;background-position:-2501px 0}.iti__flag.iti__iq{height:14px;background-position:-2523px 0}.iti__flag.iti__ir{height:12px;background-position:-2545px 0}.iti__flag.iti__is{height:15px;background-position:-2567px 0}.iti__flag.iti__it{height:14px;background-position:-2589px 0}.iti__flag.iti__je{height:12px;background-position:-2611px 0}.iti__flag.iti__jm{height:10px;background-position:-2633px 0}.iti__flag.iti__jo{height:10px;background-position:-2655px 0}.iti__flag.iti__jp{height:14px;background-position:-2677px 0}.iti__flag.iti__ke{height:14px;background-position:-2699px 0}.iti__flag.iti__kg{height:12px;background-position:-2721px 0}.iti__flag.iti__kh{height:13px;background-position:-2743px 0}.iti__flag.iti__ki{height:10px;background-position:-2765px 0}.iti__flag.iti__km{height:12px;background-position:-2787px 0}.iti__flag.iti__kn{height:14px;background-position:-2809px 0}.iti__flag.iti__kp{height:10px;background-position:-2831px 0}.iti__flag.iti__kr{height:14px;background-position:-2853px 0}.iti__flag.iti__kw{height:10px;background-position:-2875px 0}.iti__flag.iti__ky{height:10px;background-position:-2897px 0}.iti__flag.iti__kz{height:10px;background-position:-2919px 0}.iti__flag.iti__la{height:14px;background-position:-2941px 0}.iti__flag.iti__lb{height:14px;background-position:-2963px 0}.iti__flag.iti__lc{height:10px;background-position:-2985px 0}.iti__flag.iti__li{height:12px;background-position:-3007px 0}.iti__flag.iti__lk{height:10px;background-position:-3029px 0}.iti__flag.iti__lr{height:11px;background-position:-3051px 0}.iti__flag.iti__ls{height:14px;background-position:-3073px 0}.iti__flag.iti__lt{height:12px;background-position:-3095px 0}.iti__flag.iti__lu{height:12px;background-position:-3117px 0}.iti__flag.iti__lv{height:10px;background-position:-3139px 0}.iti__flag.iti__ly{height:10px;background-position:-3161px 0}.iti__flag.iti__ma{height:14px;background-position:-3183px 0}.iti__flag.iti__mc{height:15px;background-position:-3205px 0}.iti__flag.iti__md{height:10px;background-position:-3226px 0}.iti__flag.iti__me{height:10px;background-position:-3248px 0}.iti__flag.iti__mf{height:14px;background-position:-3270px 0}.iti__flag.iti__mg{height:14px;background-position:-3292px 0}.iti__flag.iti__mh{height:11px;background-position:-3314px 0}.iti__flag.iti__mk{height:10px;background-position:-3336px 0}.iti__flag.iti__ml{height:14px;background-position:-3358px 0}.iti__flag.iti__mm{height:14px;background-position:-3380px 0}.iti__flag.iti__mn{height:10px;background-position:-3402px 0}.iti__flag.iti__mo{height:14px;background-position:-3424px 0}.iti__flag.iti__mp{height:10px;background-position:-3446px 0}.iti__flag.iti__mq{height:14px;background-position:-3468px 0}.iti__flag.iti__mr{height:14px;background-position:-3490px 0}.iti__flag.iti__ms{height:10px;background-position:-3512px 0}.iti__flag.iti__mt{height:14px;background-position:-3534px 0}.iti__flag.iti__mu{height:14px;background-position:-3556px 0}.iti__flag.iti__mv{height:14px;background-position:-3578px 0}.iti__flag.iti__mw{height:14px;background-position:-3600px 0}.iti__flag.iti__mx{height:12px;background-position:-3622px 0}.iti__flag.iti__my{height:10px;background-position:-3644px 0}.iti__flag.iti__mz{height:14px;background-position:-3666px 0}.iti__flag.iti__na{height:14px;background-position:-3688px 0}.iti__flag.iti__nc{height:10px;background-position:-3710px 0}.iti__flag.iti__ne{height:15px;background-position:-3732px 0}.iti__flag.iti__nf{height:10px;background-position:-3752px 0}.iti__flag.iti__ng{height:10px;background-position:-3774px 0}.iti__flag.iti__ni{height:12px;background-position:-3796px 0}.iti__flag.iti__nl{height:14px;background-position:-3818px 0}.iti__flag.iti__no{height:15px;background-position:-3840px 0}.iti__flag.iti__np{height:15px;background-position:-3862px 0}.iti__flag.iti__nr{height:10px;background-position:-3877px 0}.iti__flag.iti__nu{height:10px;background-position:-3899px 0}.iti__flag.iti__nz{height:10px;background-position:-3921px 0}.iti__flag.iti__om{height:10px;background-position:-3943px 0}.iti__flag.iti__pa{height:14px;background-position:-3965px 0}.iti__flag.iti__pe{height:14px;background-position:-3987px 0}.iti__flag.iti__pf{height:14px;background-position:-4009px 0}.iti__flag.iti__pg{height:15px;background-position:-4031px 0}.iti__flag.iti__ph{height:10px;background-position:-4053px 0}.iti__flag.iti__pk{height:14px;background-position:-4075px 0}.iti__flag.iti__pl{height:13px;background-position:-4097px 0}.iti__flag.iti__pm{height:14px;background-position:-4119px 0}.iti__flag.iti__pn{height:10px;background-position:-4141px 0}.iti__flag.iti__pr{height:14px;background-position:-4163px 0}.iti__flag.iti__ps{height:10px;background-position:-4185px 0}.iti__flag.iti__pt{height:14px;background-position:-4207px 0}.iti__flag.iti__pw{height:13px;background-position:-4229px 0}.iti__flag.iti__py{height:11px;background-position:-4251px 0}.iti__flag.iti__qa{height:8px;background-position:-4273px 0}.iti__flag.iti__re{height:14px;background-position:-4295px 0}.iti__flag.iti__ro{height:14px;background-position:-4317px 0}.iti__flag.iti__rs{height:14px;background-position:-4339px 0}.iti__flag.iti__ru{height:14px;background-position:-4361px 0}.iti__flag.iti__rw{height:14px;background-position:-4383px 0}.iti__flag.iti__sa{height:14px;background-position:-4405px 0}.iti__flag.iti__sb{height:10px;background-position:-4427px 0}.iti__flag.iti__sc{height:10px;background-position:-4449px 0}.iti__flag.iti__sd{height:10px;background-position:-4471px 0}.iti__flag.iti__se{height:13px;background-position:-4493px 0}.iti__flag.iti__sg{height:14px;background-position:-4515px 0}.iti__flag.iti__sh{height:10px;background-position:-4537px 0}.iti__flag.iti__si{height:10px;background-position:-4559px 0}.iti__flag.iti__sj{height:15px;background-position:-4581px 0}.iti__flag.iti__sk{height:14px;background-position:-4603px 0}.iti__flag.iti__sl{height:14px;background-position:-4625px 0}.iti__flag.iti__sm{height:15px;background-position:-4647px 0}.iti__flag.iti__sn{height:14px;background-position:-4669px 0}.iti__flag.iti__so{height:14px;background-position:-4691px 0}.iti__flag.iti__sr{height:14px;background-position:-4713px 0}.iti__flag.iti__ss{height:10px;background-position:-4735px 0}.iti__flag.iti__st{height:10px;background-position:-4757px 0}.iti__flag.iti__su{height:10px;background-position:-4779px 0}.iti__flag.iti__sv{height:12px;background-position:-4801px 0}.iti__flag.iti__sx{height:14px;background-position:-4823px 0}.iti__flag.iti__sy{height:14px;background-position:-4845px 0}.iti__flag.iti__sz{height:14px;background-position:-4867px 0}.iti__flag.iti__ta{height:10px;background-position:-4889px 0}.iti__flag.iti__tc{height:10px;background-position:-4911px 0}.iti__flag.iti__td{height:14px;background-position:-4933px 0}.iti__flag.iti__tf{height:14px;background-position:-4955px 0}.iti__flag.iti__tg{height:13px;background-position:-4977px 0}.iti__flag.iti__th{height:14px;background-position:-4999px 0}.iti__flag.iti__tj{height:10px;background-position:-5021px 0}.iti__flag.iti__tk{height:10px;background-position:-5043px 0}.iti__flag.iti__tl{height:10px;background-position:-5065px 0}.iti__flag.iti__tm{height:14px;background-position:-5087px 0}.iti__flag.iti__tn{height:14px;background-position:-5109px 0}.iti__flag.iti__to{height:10px;background-position:-5131px 0}.iti__flag.iti__tr{height:14px;background-position:-5153px 0}.iti__flag.iti__tt{height:12px;background-position:-5175px 0}.iti__flag.iti__tv{height:10px;background-position:-5197px 0}.iti__flag.iti__tw{height:14px;background-position:-5219px 0}.iti__flag.iti__tz{height:14px;background-position:-5241px 0}.iti__flag.iti__ua{height:14px;background-position:-5263px 0}.iti__flag.iti__ug{height:14px;background-position:-5285px 0}.iti__flag.iti__uk{height:10px;background-position:-5307px 0}.iti__flag.iti__um{height:11px;background-position:-5329px 0}.iti__flag.iti__un{height:14px;background-position:-5351px 0}.iti__flag.iti__us{height:11px;background-position:-5373px 0}.iti__flag.iti__uy{height:14px;background-position:-5395px 0}.iti__flag.iti__uz{height:10px;background-position:-5417px 0}.iti__flag.iti__va{height:15px;background-position:-5439px 0}.iti__flag.iti__vc{height:14px;background-position:-5456px 0}.iti__flag.iti__ve{height:14px;background-position:-5478px 0}.iti__flag.iti__vg{height:10px;background-position:-5500px 0}.iti__flag.iti__vi{height:14px;background-position:-5522px 0}.iti__flag.iti__vn{height:14px;background-position:-5544px 0}.iti__flag.iti__vu{height:12px;background-position:-5566px 0}.iti__flag.iti__wf{height:14px;background-position:-5588px 0}.iti__flag.iti__ws{height:10px;background-position:-5610px 0}.iti__flag.iti__xk{height:15px;background-position:-5632px 0}.iti__flag.iti__ye{height:14px;background-position:-5654px 0}.iti__flag.iti__yt{height:14px;background-position:-5676px 0}.iti__flag.iti__za{height:14px;background-position:-5698px 0}.iti__flag.iti__zm{height:14px;background-position:-5720px 0}.iti__flag.iti__zw{height:10px;background-position:-5742px 0}.iti__flag{height:15px;box-shadow:0 0 1px 0 #888;background-image:url(../img/flags.png?1);background-repeat:no-repeat;background-position:20px 0}@media (min-resolution:2x){.iti__flag{background-image:url(../img/flags@2x.png?1)}}.iti__globe{background-image:url(../img/globe.png);background-size:contain;background-position:right;box-shadow:none;height:19px}@media (min-resolution:2x){.iti__globe{background-image:url(../img/globe@2x.png)}}
1
+ :root{--iti-hover-color:rgba(0, 0, 0, 0.05);--iti-text-gray:#999;--iti-border-gray:#ccc;--iti-spacer-horizontal:8px;--iti-flag-height:15px;--iti-flag-width:20px;--iti-border-width:1px;--iti-arrow-height:4px;--iti-arrow-width:6px;--iti-triangle-border:calc(var(--iti-arrow-width) / 2);--iti-arrow-padding:6px;--iti-arrow-color:#555;--iti-input-padding:6px;--iti-right-hand-selected-flag-padding:calc(var(--iti-spacer-horizontal) + var(--iti-spacer-horizontal) + var(--iti-flag-width));--iti-selected-flag-arrow-padding:calc(var(--iti-arrow-padding) + var(--iti-arrow-padding) + var(--iti-flag-width) + var(--iti-spacer-horizontal) + var(--iti-arrow-width) + var(--iti-input-padding));--iti-path-flags-1x:url("../img/flags.png?1");--iti-path-flags-2x:url("../img/flags@2x.png?1");--iti-path-globe-1x:url("../img/globe.png");--iti-path-globe-2x:url("../img/globe@2x.png");--iti-mobile-popup-margin:30px}.iti{position:relative;display:inline-block}.iti *{box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti__a11y-text{width:1px;height:1px;clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute}.iti input.iti__tel-input,.iti input.iti__tel-input[type=tel],.iti input.iti__tel-input[type=text]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-right:var(--iti-right-hand-selected-flag-padding);margin-right:0}.iti__flag-container{position:absolute;top:0;bottom:0;right:0;padding:var(--iti-border-width)}.iti__selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal)}.iti__arrow{margin-left:var(--iti-arrow-padding);width:0;height:0;border-left:var(--iti-triangle-border) solid transparent;border-right:var(--iti-triangle-border) solid transparent;border-top:var(--iti-arrow-height) solid var(--iti-arrow-color)}[dir=rtl] .iti__arrow{margin-right:var(--iti-arrow-padding);margin-left:0}.iti__arrow--up{border-top:none;border-bottom:var(--iti-arrow-height) solid var(--iti-arrow-color)}.iti__dropdown-content{border-radius:3px;background-color:#fff}.iti--inline-dropdown .iti__dropdown-content{position:absolute;z-index:2;margin-top:3px;margin-left:calc(var(--iti-border-width) * -1);border:var(--iti-border-width) solid var(--iti-border-gray);box-shadow:1px 1px 4px rgba(0,0,0,.2)}.iti__dropdown-content--dropup{bottom:100%;margin-bottom:3px}.iti__search-input{width:100%;border-width:0;border-radius:3px;padding:9px 12px}.iti__search-input+.iti__country-list{border-top:1px solid var(--iti-border-gray)}.iti__country-list{list-style:none;padding:0;margin:0;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti--inline-dropdown .iti__country-list{max-height:185px}.iti--flexible-dropdown-width .iti__country-list{white-space:nowrap}@media (max-width:500px){.iti--flexible-dropdown-width .iti__country-list{white-space:normal}}.iti__flag-box{display:inline-block;width:var(--iti-flag-width)}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:var(--iti-border-width) solid var(--iti-border-gray)}.iti__country{display:flex;align-items:center;padding:8px var(--iti-spacer-horizontal);outline:0}.iti__dial-code{color:var(--iti-text-gray)}.iti__country.iti__highlight{background-color:var(--iti-hover-color)}.iti__country-name,.iti__flag-box{margin-right:var(--iti-spacer-horizontal)}[dir=rtl] .iti__country-name,[dir=rtl] .iti__flag-box{margin-right:0;margin-left:var(--iti-spacer-horizontal)}.iti--allow-dropdown input.iti__tel-input,.iti--allow-dropdown input.iti__tel-input[type=tel],.iti--allow-dropdown input.iti__tel-input[type=text],.iti--show-selected-dial-code input.iti__tel-input,.iti--show-selected-dial-code input.iti__tel-input[type=tel],.iti--show-selected-dial-code input.iti__tel-input[type=text]{padding-right:var(--iti-input-padding);padding-left:var(--iti-selected-flag-arrow-padding);margin-left:0}[dir=rtl] .iti--allow-dropdown input.iti__tel-input,[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel],[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],[dir=rtl] .iti--show-selected-dial-code input.iti__tel-input,[dir=rtl] .iti--show-selected-dial-code input.iti__tel-input[type=tel],[dir=rtl] .iti--show-selected-dial-code input.iti__tel-input[type=text]{padding-right:var(--iti-selected-flag-arrow-padding);padding-left:var(--iti-input-padding);margin-right:0}.iti--allow-dropdown .iti__flag-container,.iti--show-selected-dial-code .iti__flag-container{right:auto;left:0}[dir=rtl] .iti--allow-dropdown .iti__flag-container,[dir=rtl] .iti--show-selected-dial-code .iti__flag-container{right:0;left:auto}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:var(--iti-hover-color)}.iti--allow-dropdown .iti__flag-container:has(+input[disabled]):hover,.iti--allow-dropdown .iti__flag-container:has(+input[readonly]):hover{cursor:default}.iti--allow-dropdown .iti__flag-container:has(+input[disabled]):hover .iti__selected-flag,.iti--allow-dropdown .iti__flag-container:has(+input[readonly]):hover .iti__selected-flag{background-color:transparent}.iti--show-selected-dial-code .iti__selected-flag{background-color:var(--iti-hover-color)}.iti--show-selected-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:var(--iti-arrow-padding)}[dir=rtl] .iti--show-selected-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:0;margin-right:var(--iti-arrow-padding)}.iti--container{position:fixed;top:-1000px;left:-1000px;z-index:1060;padding:var(--iti-border-width)}.iti--container:hover{cursor:pointer}.iti--fullscreen-popup.iti--container{background-color:rgba(0,0,0,.5);top:0;bottom:0;left:0;right:0;position:fixed;padding:var(--iti-mobile-popup-margin);display:flex;flex-direction:column;justify-content:center}.iti--fullscreen-popup.iti--container.iti--country-search{justify-content:flex-start}.iti--fullscreen-popup .iti__dropdown-content{display:flex;flex-direction:column;max-height:100%;position:relative}.iti--fullscreen-popup .iti__country{padding:10px 10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (min-resolution:2x){.iti__flag{background-size:5762px 15px}}.iti__flag.iti__ac{height:10px;background-position:0 0}.iti__flag.iti__ad{height:14px;background-position:-22px 0}.iti__flag.iti__ae{height:10px;background-position:-44px 0}.iti__flag.iti__af{height:14px;background-position:-66px 0}.iti__flag.iti__ag{height:14px;background-position:-88px 0}.iti__flag.iti__ai{height:10px;background-position:-110px 0}.iti__flag.iti__al{height:15px;background-position:-132px 0}.iti__flag.iti__am{height:10px;background-position:-154px 0}.iti__flag.iti__ao{height:14px;background-position:-176px 0}.iti__flag.iti__aq{height:14px;background-position:-198px 0}.iti__flag.iti__ar{height:13px;background-position:-220px 0}.iti__flag.iti__as{height:10px;background-position:-242px 0}.iti__flag.iti__at{height:14px;background-position:-264px 0}.iti__flag.iti__au{height:10px;background-position:-286px 0}.iti__flag.iti__aw{height:14px;background-position:-308px 0}.iti__flag.iti__ax{height:13px;background-position:-330px 0}.iti__flag.iti__az{height:10px;background-position:-352px 0}.iti__flag.iti__ba{height:10px;background-position:-374px 0}.iti__flag.iti__bb{height:14px;background-position:-396px 0}.iti__flag.iti__bd{height:12px;background-position:-418px 0}.iti__flag.iti__be{height:15px;background-position:-440px 0}.iti__flag.iti__bf{height:14px;background-position:-460px 0}.iti__flag.iti__bg{height:12px;background-position:-482px 0}.iti__flag.iti__bh{height:12px;background-position:-504px 0}.iti__flag.iti__bi{height:12px;background-position:-526px 0}.iti__flag.iti__bj{height:14px;background-position:-548px 0}.iti__flag.iti__bl{height:14px;background-position:-570px 0}.iti__flag.iti__bm{height:10px;background-position:-592px 0}.iti__flag.iti__bn{height:10px;background-position:-614px 0}.iti__flag.iti__bo{height:14px;background-position:-636px 0}.iti__flag.iti__bq{height:14px;background-position:-658px 0}.iti__flag.iti__br{height:14px;background-position:-680px 0}.iti__flag.iti__bs{height:10px;background-position:-702px 0}.iti__flag.iti__bt{height:14px;background-position:-724px 0}.iti__flag.iti__bv{height:15px;background-position:-746px 0}.iti__flag.iti__bw{height:14px;background-position:-768px 0}.iti__flag.iti__by{height:10px;background-position:-790px 0}.iti__flag.iti__bz{height:12px;background-position:-812px 0}.iti__flag.iti__ca{height:10px;background-position:-834px 0}.iti__flag.iti__cc{height:10px;background-position:-856px 0}.iti__flag.iti__cd{height:15px;background-position:-878px 0}.iti__flag.iti__cf{height:14px;background-position:-900px 0}.iti__flag.iti__cg{height:14px;background-position:-922px 0}.iti__flag.iti__ch{height:15px;background-position:-944px 0}.iti__flag.iti__ci{height:14px;background-position:-961px 0}.iti__flag.iti__ck{height:10px;background-position:-983px 0}.iti__flag.iti__cl{height:14px;background-position:-1005px 0}.iti__flag.iti__cm{height:14px;background-position:-1027px 0}.iti__flag.iti__cn{height:14px;background-position:-1049px 0}.iti__flag.iti__co{height:14px;background-position:-1071px 0}.iti__flag.iti__cp{height:14px;background-position:-1093px 0}.iti__flag.iti__cq{height:12px;background-position:-1115px 0}.iti__flag.iti__cr{height:12px;background-position:-1137px 0}.iti__flag.iti__cu{height:10px;background-position:-1159px 0}.iti__flag.iti__cv{height:12px;background-position:-1181px 0}.iti__flag.iti__cw{height:14px;background-position:-1203px 0}.iti__flag.iti__cx{height:10px;background-position:-1225px 0}.iti__flag.iti__cy{height:14px;background-position:-1247px 0}.iti__flag.iti__cz{height:14px;background-position:-1269px 0}.iti__flag.iti__de{height:12px;background-position:-1291px 0}.iti__flag.iti__dg{height:10px;background-position:-1313px 0}.iti__flag.iti__dj{height:14px;background-position:-1335px 0}.iti__flag.iti__dk{height:15px;background-position:-1357px 0}.iti__flag.iti__dm{height:10px;background-position:-1379px 0}.iti__flag.iti__do{height:14px;background-position:-1401px 0}.iti__flag.iti__dz{height:14px;background-position:-1423px 0}.iti__flag.iti__ea{height:14px;background-position:-1445px 0}.iti__flag.iti__ec{height:14px;background-position:-1467px 0}.iti__flag.iti__ee{height:13px;background-position:-1489px 0}.iti__flag.iti__eg{height:14px;background-position:-1511px 0}.iti__flag.iti__eh{height:10px;background-position:-1533px 0}.iti__flag.iti__er{height:10px;background-position:-1555px 0}.iti__flag.iti__es{height:14px;background-position:-1577px 0}.iti__flag.iti__et{height:10px;background-position:-1599px 0}.iti__flag.iti__eu{height:14px;background-position:-1621px 0}.iti__flag.iti__ez{height:14px;background-position:-1643px 0}.iti__flag.iti__fi{height:12px;background-position:-1665px 0}.iti__flag.iti__fj{height:10px;background-position:-1687px 0}.iti__flag.iti__fk{height:10px;background-position:-1709px 0}.iti__flag.iti__fm{height:11px;background-position:-1731px 0}.iti__flag.iti__fo{height:15px;background-position:-1753px 0}.iti__flag.iti__fr{height:14px;background-position:-1775px 0}.iti__flag.iti__fx{height:14px;background-position:-1797px 0}.iti__flag.iti__ga{height:15px;background-position:-1819px 0}.iti__flag.iti__gb{height:10px;background-position:-1841px 0}.iti__flag.iti__gd{height:12px;background-position:-1863px 0}.iti__flag.iti__ge{height:14px;background-position:-1885px 0}.iti__flag.iti__gf{height:14px;background-position:-1907px 0}.iti__flag.iti__gg{height:14px;background-position:-1929px 0}.iti__flag.iti__gh{height:14px;background-position:-1951px 0}.iti__flag.iti__gi{height:10px;background-position:-1973px 0}.iti__flag.iti__gl{height:14px;background-position:-1995px 0}.iti__flag.iti__gm{height:14px;background-position:-2017px 0}.iti__flag.iti__gn{height:14px;background-position:-2039px 0}.iti__flag.iti__gp{height:14px;background-position:-2061px 0}.iti__flag.iti__gq{height:14px;background-position:-2083px 0}.iti__flag.iti__gr{height:14px;background-position:-2105px 0}.iti__flag.iti__gs{height:10px;background-position:-2127px 0}.iti__flag.iti__gt{height:13px;background-position:-2149px 0}.iti__flag.iti__gu{height:11px;background-position:-2171px 0}.iti__flag.iti__gw{height:10px;background-position:-2193px 0}.iti__flag.iti__gy{height:12px;background-position:-2215px 0}.iti__flag.iti__hk{height:14px;background-position:-2237px 0}.iti__flag.iti__hm{height:10px;background-position:-2259px 0}.iti__flag.iti__hn{height:10px;background-position:-2281px 0}.iti__flag.iti__hr{height:10px;background-position:-2303px 0}.iti__flag.iti__ht{height:12px;background-position:-2325px 0}.iti__flag.iti__hu{height:10px;background-position:-2347px 0}.iti__flag.iti__ic{height:14px;background-position:-2369px 0}.iti__flag.iti__id{height:14px;background-position:-2391px 0}.iti__flag.iti__ie{height:10px;background-position:-2413px 0}.iti__flag.iti__il{height:15px;background-position:-2435px 0}.iti__flag.iti__im{height:10px;background-position:-2457px 0}.iti__flag.iti__in{height:14px;background-position:-2479px 0}.iti__flag.iti__io{height:10px;background-position:-2501px 0}.iti__flag.iti__iq{height:14px;background-position:-2523px 0}.iti__flag.iti__ir{height:12px;background-position:-2545px 0}.iti__flag.iti__is{height:15px;background-position:-2567px 0}.iti__flag.iti__it{height:14px;background-position:-2589px 0}.iti__flag.iti__je{height:12px;background-position:-2611px 0}.iti__flag.iti__jm{height:10px;background-position:-2633px 0}.iti__flag.iti__jo{height:10px;background-position:-2655px 0}.iti__flag.iti__jp{height:14px;background-position:-2677px 0}.iti__flag.iti__ke{height:14px;background-position:-2699px 0}.iti__flag.iti__kg{height:12px;background-position:-2721px 0}.iti__flag.iti__kh{height:13px;background-position:-2743px 0}.iti__flag.iti__ki{height:10px;background-position:-2765px 0}.iti__flag.iti__km{height:12px;background-position:-2787px 0}.iti__flag.iti__kn{height:14px;background-position:-2809px 0}.iti__flag.iti__kp{height:10px;background-position:-2831px 0}.iti__flag.iti__kr{height:14px;background-position:-2853px 0}.iti__flag.iti__kw{height:10px;background-position:-2875px 0}.iti__flag.iti__ky{height:10px;background-position:-2897px 0}.iti__flag.iti__kz{height:10px;background-position:-2919px 0}.iti__flag.iti__la{height:14px;background-position:-2941px 0}.iti__flag.iti__lb{height:14px;background-position:-2963px 0}.iti__flag.iti__lc{height:10px;background-position:-2985px 0}.iti__flag.iti__li{height:12px;background-position:-3007px 0}.iti__flag.iti__lk{height:10px;background-position:-3029px 0}.iti__flag.iti__lr{height:11px;background-position:-3051px 0}.iti__flag.iti__ls{height:14px;background-position:-3073px 0}.iti__flag.iti__lt{height:12px;background-position:-3095px 0}.iti__flag.iti__lu{height:12px;background-position:-3117px 0}.iti__flag.iti__lv{height:10px;background-position:-3139px 0}.iti__flag.iti__ly{height:10px;background-position:-3161px 0}.iti__flag.iti__ma{height:14px;background-position:-3183px 0}.iti__flag.iti__mc{height:15px;background-position:-3205px 0}.iti__flag.iti__md{height:10px;background-position:-3226px 0}.iti__flag.iti__me{height:10px;background-position:-3248px 0}.iti__flag.iti__mf{height:14px;background-position:-3270px 0}.iti__flag.iti__mg{height:14px;background-position:-3292px 0}.iti__flag.iti__mh{height:11px;background-position:-3314px 0}.iti__flag.iti__mk{height:10px;background-position:-3336px 0}.iti__flag.iti__ml{height:14px;background-position:-3358px 0}.iti__flag.iti__mm{height:14px;background-position:-3380px 0}.iti__flag.iti__mn{height:10px;background-position:-3402px 0}.iti__flag.iti__mo{height:14px;background-position:-3424px 0}.iti__flag.iti__mp{height:10px;background-position:-3446px 0}.iti__flag.iti__mq{height:14px;background-position:-3468px 0}.iti__flag.iti__mr{height:14px;background-position:-3490px 0}.iti__flag.iti__ms{height:10px;background-position:-3512px 0}.iti__flag.iti__mt{height:14px;background-position:-3534px 0}.iti__flag.iti__mu{height:14px;background-position:-3556px 0}.iti__flag.iti__mv{height:14px;background-position:-3578px 0}.iti__flag.iti__mw{height:14px;background-position:-3600px 0}.iti__flag.iti__mx{height:12px;background-position:-3622px 0}.iti__flag.iti__my{height:10px;background-position:-3644px 0}.iti__flag.iti__mz{height:14px;background-position:-3666px 0}.iti__flag.iti__na{height:14px;background-position:-3688px 0}.iti__flag.iti__nc{height:10px;background-position:-3710px 0}.iti__flag.iti__ne{height:15px;background-position:-3732px 0}.iti__flag.iti__nf{height:10px;background-position:-3752px 0}.iti__flag.iti__ng{height:10px;background-position:-3774px 0}.iti__flag.iti__ni{height:12px;background-position:-3796px 0}.iti__flag.iti__nl{height:14px;background-position:-3818px 0}.iti__flag.iti__no{height:15px;background-position:-3840px 0}.iti__flag.iti__np{height:15px;background-position:-3862px 0}.iti__flag.iti__nr{height:10px;background-position:-3877px 0}.iti__flag.iti__nu{height:10px;background-position:-3899px 0}.iti__flag.iti__nz{height:10px;background-position:-3921px 0}.iti__flag.iti__om{height:10px;background-position:-3943px 0}.iti__flag.iti__pa{height:14px;background-position:-3965px 0}.iti__flag.iti__pe{height:14px;background-position:-3987px 0}.iti__flag.iti__pf{height:14px;background-position:-4009px 0}.iti__flag.iti__pg{height:15px;background-position:-4031px 0}.iti__flag.iti__ph{height:10px;background-position:-4053px 0}.iti__flag.iti__pk{height:14px;background-position:-4075px 0}.iti__flag.iti__pl{height:13px;background-position:-4097px 0}.iti__flag.iti__pm{height:14px;background-position:-4119px 0}.iti__flag.iti__pn{height:10px;background-position:-4141px 0}.iti__flag.iti__pr{height:14px;background-position:-4163px 0}.iti__flag.iti__ps{height:10px;background-position:-4185px 0}.iti__flag.iti__pt{height:14px;background-position:-4207px 0}.iti__flag.iti__pw{height:13px;background-position:-4229px 0}.iti__flag.iti__py{height:11px;background-position:-4251px 0}.iti__flag.iti__qa{height:8px;background-position:-4273px 0}.iti__flag.iti__re{height:14px;background-position:-4295px 0}.iti__flag.iti__ro{height:14px;background-position:-4317px 0}.iti__flag.iti__rs{height:14px;background-position:-4339px 0}.iti__flag.iti__ru{height:14px;background-position:-4361px 0}.iti__flag.iti__rw{height:14px;background-position:-4383px 0}.iti__flag.iti__sa{height:14px;background-position:-4405px 0}.iti__flag.iti__sb{height:10px;background-position:-4427px 0}.iti__flag.iti__sc{height:10px;background-position:-4449px 0}.iti__flag.iti__sd{height:10px;background-position:-4471px 0}.iti__flag.iti__se{height:13px;background-position:-4493px 0}.iti__flag.iti__sg{height:14px;background-position:-4515px 0}.iti__flag.iti__sh{height:10px;background-position:-4537px 0}.iti__flag.iti__si{height:10px;background-position:-4559px 0}.iti__flag.iti__sj{height:15px;background-position:-4581px 0}.iti__flag.iti__sk{height:14px;background-position:-4603px 0}.iti__flag.iti__sl{height:14px;background-position:-4625px 0}.iti__flag.iti__sm{height:15px;background-position:-4647px 0}.iti__flag.iti__sn{height:14px;background-position:-4669px 0}.iti__flag.iti__so{height:14px;background-position:-4691px 0}.iti__flag.iti__sr{height:14px;background-position:-4713px 0}.iti__flag.iti__ss{height:10px;background-position:-4735px 0}.iti__flag.iti__st{height:10px;background-position:-4757px 0}.iti__flag.iti__su{height:10px;background-position:-4779px 0}.iti__flag.iti__sv{height:12px;background-position:-4801px 0}.iti__flag.iti__sx{height:14px;background-position:-4823px 0}.iti__flag.iti__sy{height:14px;background-position:-4845px 0}.iti__flag.iti__sz{height:14px;background-position:-4867px 0}.iti__flag.iti__ta{height:10px;background-position:-4889px 0}.iti__flag.iti__tc{height:10px;background-position:-4911px 0}.iti__flag.iti__td{height:14px;background-position:-4933px 0}.iti__flag.iti__tf{height:14px;background-position:-4955px 0}.iti__flag.iti__tg{height:13px;background-position:-4977px 0}.iti__flag.iti__th{height:14px;background-position:-4999px 0}.iti__flag.iti__tj{height:10px;background-position:-5021px 0}.iti__flag.iti__tk{height:10px;background-position:-5043px 0}.iti__flag.iti__tl{height:10px;background-position:-5065px 0}.iti__flag.iti__tm{height:14px;background-position:-5087px 0}.iti__flag.iti__tn{height:14px;background-position:-5109px 0}.iti__flag.iti__to{height:10px;background-position:-5131px 0}.iti__flag.iti__tr{height:14px;background-position:-5153px 0}.iti__flag.iti__tt{height:12px;background-position:-5175px 0}.iti__flag.iti__tv{height:10px;background-position:-5197px 0}.iti__flag.iti__tw{height:14px;background-position:-5219px 0}.iti__flag.iti__tz{height:14px;background-position:-5241px 0}.iti__flag.iti__ua{height:14px;background-position:-5263px 0}.iti__flag.iti__ug{height:14px;background-position:-5285px 0}.iti__flag.iti__uk{height:10px;background-position:-5307px 0}.iti__flag.iti__um{height:11px;background-position:-5329px 0}.iti__flag.iti__un{height:14px;background-position:-5351px 0}.iti__flag.iti__us{height:11px;background-position:-5373px 0}.iti__flag.iti__uy{height:14px;background-position:-5395px 0}.iti__flag.iti__uz{height:10px;background-position:-5417px 0}.iti__flag.iti__va{height:15px;background-position:-5439px 0}.iti__flag.iti__vc{height:14px;background-position:-5456px 0}.iti__flag.iti__ve{height:14px;background-position:-5478px 0}.iti__flag.iti__vg{height:10px;background-position:-5500px 0}.iti__flag.iti__vi{height:14px;background-position:-5522px 0}.iti__flag.iti__vn{height:14px;background-position:-5544px 0}.iti__flag.iti__vu{height:12px;background-position:-5566px 0}.iti__flag.iti__wf{height:14px;background-position:-5588px 0}.iti__flag.iti__ws{height:10px;background-position:-5610px 0}.iti__flag.iti__xk{height:15px;background-position:-5632px 0}.iti__flag.iti__ye{height:14px;background-position:-5654px 0}.iti__flag.iti__yt{height:14px;background-position:-5676px 0}.iti__flag.iti__za{height:14px;background-position:-5698px 0}.iti__flag.iti__zm{height:14px;background-position:-5720px 0}.iti__flag.iti__zw{height:10px;background-position:-5742px 0}.iti__flag{height:var(--iti-flag-height);box-shadow:0 0 1px 0 #888;background-image:var(--iti-path-flags-1x);background-repeat:no-repeat;background-position:var(--iti-flag-width) 0}@media (min-resolution:2x){.iti__flag{background-image:var(--iti-path-flags-2x)}}.iti__globe{background-image:var(--iti-path-globe-1x);background-size:contain;background-position:right;box-shadow:none;height:19px}@media (min-resolution:2x){.iti__globe{background-image:var(--iti-path-globe-2x)}}