.Col_col__YJ9Hr{flex:0 0 100%;max-width:100%;padding-left:.5rem;padding-right:.5rem}@media(min-width: 0){.Col_col-xs-1__6MKy9{flex:0 0 8.3333333333%;max-width:8.3333333333%}}@media(min-width: 0){.Col_col-xs-2__2DGH6{flex:0 0 16.6666666667%;max-width:16.6666666667%}}@media(min-width: 0){.Col_col-xs-3__k8RqU{flex:0 0 25%;max-width:25%}}@media(min-width: 0){.Col_col-xs-4__g4tnr{flex:0 0 33.3333333333%;max-width:33.3333333333%}}@media(min-width: 0){.Col_col-xs-5__AWcdo{flex:0 0 41.6666666667%;max-width:41.6666666667%}}@media(min-width: 0){.Col_col-xs-6___goDc{flex:0 0 50%;max-width:50%}}@media(min-width: 0){.Col_col-xs-7__lZWcw{flex:0 0 58.3333333333%;max-width:58.3333333333%}}@media(min-width: 0){.Col_col-xs-8__BwU_w{flex:0 0 66.6666666667%;max-width:66.6666666667%}}@media(min-width: 0){.Col_col-xs-9__PuhO0{flex:0 0 75%;max-width:75%}}@media(min-width: 0){.Col_col-xs-10__44gmS{flex:0 0 83.3333333333%;max-width:83.3333333333%}}@media(min-width: 0){.Col_col-xs-11__rJOU3{flex:0 0 91.6666666667%;max-width:91.6666666667%}}@media(min-width: 0){.Col_col-xs-12__3MvBZ{flex:0 0 100%;max-width:100%}}@media(min-width: 768px){.Col_col-sm-1__dBcoE{flex:0 0 8.3333333333%;max-width:8.3333333333%}}@media(min-width: 768px){.Col_col-sm-2__UIAss{flex:0 0 16.6666666667%;max-width:16.6666666667%}}@media(min-width: 768px){.Col_col-sm-3__pP5be{flex:0 0 25%;max-width:25%}}@media(min-width: 768px){.Col_col-sm-4__IZw5m{flex:0 0 33.3333333333%;max-width:33.3333333333%}}@media(min-width: 768px){.Col_col-sm-5__NVj_Z{flex:0 0 41.6666666667%;max-width:41.6666666667%}}@media(min-width: 768px){.Col_col-sm-6__bWRd5{flex:0 0 50%;max-width:50%}}@media(min-width: 768px){.Col_col-sm-7__T3rAu{flex:0 0 58.3333333333%;max-width:58.3333333333%}}@media(min-width: 768px){.Col_col-sm-8__lTR6S{flex:0 0 66.6666666667%;max-width:66.6666666667%}}@media(min-width: 768px){.Col_col-sm-9__ucdWb{flex:0 0 75%;max-width:75%}}@media(min-width: 768px){.Col_col-sm-10__8GcOL{flex:0 0 83.3333333333%;max-width:83.3333333333%}}@media(min-width: 768px){.Col_col-sm-11__V1pQr{flex:0 0 91.6666666667%;max-width:91.6666666667%}}@media(min-width: 768px){.Col_col-sm-12__iGyye{flex:0 0 100%;max-width:100%}}@media(min-width: 992px){.Col_col-md-1__2T0Mc{flex:0 0 8.3333333333%;max-width:8.3333333333%}}@media(min-width: 992px){.Col_col-md-2__hQGui{flex:0 0 16.6666666667%;max-width:16.6666666667%}}@media(min-width: 992px){.Col_col-md-3__BQXt6{flex:0 0 25%;max-width:25%}}@media(min-width: 992px){.Col_col-md-4__U4uXk{flex:0 0 33.3333333333%;max-width:33.3333333333%}}@media(min-width: 992px){.Col_col-md-5__V_g5H{flex:0 0 41.6666666667%;max-width:41.6666666667%}}@media(min-width: 992px){.Col_col-md-6__Qdn2B{flex:0 0 50%;max-width:50%}}@media(min-width: 992px){.Col_col-md-7__KyTj_{flex:0 0 58.3333333333%;max-width:58.3333333333%}}@media(min-width: 992px){.Col_col-md-8__kmCPt{flex:0 0 66.6666666667%;max-width:66.6666666667%}}@media(min-width: 992px){.Col_col-md-9__UIaXf{flex:0 0 75%;max-width:75%}}@media(min-width: 992px){.Col_col-md-10__6Hg5g{flex:0 0 83.3333333333%;max-width:83.3333333333%}}@media(min-width: 992px){.Col_col-md-11__SrP_u{flex:0 0 91.6666666667%;max-width:91.6666666667%}}@media(min-width: 992px){.Col_col-md-12__tVQUG{flex:0 0 100%;max-width:100%}}@media(min-width: 1200px){.Col_col-lg-1__H8bi6{flex:0 0 8.3333333333%;max-width:8.3333333333%}}@media(min-width: 1200px){.Col_col-lg-2__PaXTu{flex:0 0 16.6666666667%;max-width:16.6666666667%}}@media(min-width: 1200px){.Col_col-lg-3__8h_E2{flex:0 0 25%;max-width:25%}}@media(min-width: 1200px){.Col_col-lg-4__aF_HB{flex:0 0 33.3333333333%;max-width:33.3333333333%}}@media(min-width: 1200px){.Col_col-lg-5__j6hrZ{flex:0 0 41.6666666667%;max-width:41.6666666667%}}@media(min-width: 1200px){.Col_col-lg-6__b9rmb{flex:0 0 50%;max-width:50%}}@media(min-width: 1200px){.Col_col-lg-7__3EcBv{flex:0 0 58.3333333333%;max-width:58.3333333333%}}@media(min-width: 1200px){.Col_col-lg-8__WZXK8{flex:0 0 66.6666666667%;max-width:66.6666666667%}}@media(min-width: 1200px){.Col_col-lg-9__RewC_{flex:0 0 75%;max-width:75%}}@media(min-width: 1200px){.Col_col-lg-10__Bk44G{flex:0 0 83.3333333333%;max-width:83.3333333333%}}@media(min-width: 1200px){.Col_col-lg-11__5lX4r{flex:0 0 91.6666666667%;max-width:91.6666666667%}}@media(min-width: 1200px){.Col_col-lg-12__QitSl{flex:0 0 100%;max-width:100%}}@media(min-width: 1400px){.Col_col-xl-1___Kwnm{flex:0 0 8.3333333333%;max-width:8.3333333333%}}@media(min-width: 1400px){.Col_col-xl-2__D2Snm{flex:0 0 16.6666666667%;max-width:16.6666666667%}}@media(min-width: 1400px){.Col_col-xl-3___uip5{flex:0 0 25%;max-width:25%}}@media(min-width: 1400px){.Col_col-xl-4__Whi9d{flex:0 0 33.3333333333%;max-width:33.3333333333%}}@media(min-width: 1400px){.Col_col-xl-5__p0ZHN{flex:0 0 41.6666666667%;max-width:41.6666666667%}}@media(min-width: 1400px){.Col_col-xl-6__f9YB_{flex:0 0 50%;max-width:50%}}@media(min-width: 1400px){.Col_col-xl-7__uvJVs{flex:0 0 58.3333333333%;max-width:58.3333333333%}}@media(min-width: 1400px){.Col_col-xl-8__dzqoE{flex:0 0 66.6666666667%;max-width:66.6666666667%}}@media(min-width: 1400px){.Col_col-xl-9__SgeWo{flex:0 0 75%;max-width:75%}}@media(min-width: 1400px){.Col_col-xl-10__AcV_t{flex:0 0 83.3333333333%;max-width:83.3333333333%}}@media(min-width: 1400px){.Col_col-xl-11__Vdnx5{flex:0 0 91.6666666667%;max-width:91.6666666667%}}@media(min-width: 1400px){.Col_col-xl-12___YKfb{flex:0 0 100%;max-width:100%}} .Container_container__XyVqB{margin-right:auto;margin-left:auto}@media(min-width: 576px){.Container_container__XyVqB{width:540px}}@media(min-width: 768px){.Container_container__XyVqB{width:720px}}@media(min-width: 992px){.Container_container__XyVqB{width:960px}}@media(min-width: 1200px){.Container_container__XyVqB{width:1140px}}@media(min-width: 1400px){.Container_container__XyVqB{width:1320px}} .Hidden_hidden__6eSGU{display:none}@media(min-width: 576px){.Hidden_xs__PVQYq{display:inline-block}}@media(min-width: 768px){.Hidden_sm__wLv_f{display:inline-block}}@media(min-width: 992px){.Hidden_md__15ONh{display:inline-block}}@media(min-width: 1200px){.Hidden_lg__bOq4A{display:inline-block}}@media(min-width: 1400px){.Hidden_xl__9v_wV{display:inline-block}} .Row_row__fASh3{display:flex;flex-wrap:wrap;margin-right:-0.5rem;margin-left:-0.5rem}.Row_row__fASh3.Row_justify-start__Fmo2n{justify-content:flex-start}.Row_row__fASh3.Row_justify-end__5gqyg{justify-content:flex-end}.Row_row__fASh3.Row_justify-center__KwW64{justify-content:center}.Row_row__fASh3.Row_justify-space-between__UXV5U{justify-content:space-between}.Row_row__fASh3.Row_justify-space-around__Iojy9{justify-content:space-around} .Visible_visible__yc1hi{display:block}@media(min-width: 576px){.Visible_xs__Fw6xo{display:none}}@media(min-width: 768px){.Visible_sm__FGZuN{display:none}}@media(min-width: 992px){.Visible_md__8ExJP{display:none}}@media(min-width: 1200px){.Visible_lg__EY_Ux{display:none}}@media(min-width: 1400px){.Visible_xl__FJZam{display:none}} /* CSS variables. */ :root { --PhoneInput-color--focus: #03b2cb; --PhoneInputInternationalIconPhone-opacity: 0.8; --PhoneInputInternationalIconGlobe-opacity: 0.65; --PhoneInputCountrySelect-marginRight: 0.35em; --PhoneInputCountrySelectArrow-width: 0.3em; --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight); --PhoneInputCountrySelectArrow-borderWidth: 1px; --PhoneInputCountrySelectArrow-opacity: 0.45; --PhoneInputCountrySelectArrow-color: currentColor; --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus); --PhoneInputCountrySelectArrow-transform: rotate(45deg); --PhoneInputCountryFlag-aspectRatio: 1.5; --PhoneInputCountryFlag-height: 1em; --PhoneInputCountryFlag-borderWidth: 1px; --PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5); --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus); --PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1); } .PhoneInput { /* This is done to stretch the contents of this component. */ display: flex; align-items: center; } .PhoneInputInput { /* The phone number input stretches to fill all empty space */ flex: 1 1; /* The phone number input should shrink to make room for the extension input */ min-width: 0; } .PhoneInputCountryIcon { width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio)); height: var(--PhoneInputCountryFlag-height); } .PhoneInputCountryIcon--square { width: var(--PhoneInputCountryFlag-height); } .PhoneInputCountryIcon--border { /* Removed `background-color` because when an `` was still loading it would show a dark gray rectangle. */ /* For some reason the `` is not stretched to 100% width and height and sometime there can be seen white pixels of the background at top and bottom. */ background-color: var(--PhoneInputCountryFlag-backgroundColor--loading); /* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */ /* For some reason the `` is not stretched to 100% width and height and sometime there can be seen white pixels of the background at top and bottom, so an additional "inset" border is added. */ box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor); } .PhoneInputCountryIconImg { /* Fixes weird vertical space above the flag icon. */ /* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */ display: block; /* 3rd party flag icons won't stretch if they have `width` and `height`. Also, if an icon's aspect ratio was different, it wouldn't fit too. */ width: 100%; height: 100%; } .PhoneInputInternationalIconPhone { opacity: var(--PhoneInputInternationalIconPhone-opacity); } .PhoneInputInternationalIconGlobe { opacity: var(--PhoneInputInternationalIconGlobe-opacity); } /* Styling native country `