/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[9].use[5]!./src/styles/home_hero_section.module.scss ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .home_hero_section_blockHeroContainer__z9f9I { max-width: 1920px; width: 100%; margin-left: 0px; } @media screen and (max-width: 576px) { .home_hero_section_blockHeroContainer__z9f9I { max-width: 100vw; width: 100vw; margin-left: -12px; } } .home_hero_section_blockHeroSliderContainer__jeG0s { background: rgba(255, 255, 255, 0.04); border-top: 1px solid rgba(249, 183, 255, 0.1); border-bottom: 1px solid rgba(249, 183, 255, 0.1); -webkit-backdrop-filter: blur(12.5px); backdrop-filter: blur(12.5px); } .home_hero_section_title__Imshk { background: linear-gradient(180deg, #ccaeda 30.5%, #ee8a93); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: "Nevan", sans-serif; } @media screen and (max-width: 767px) { .home_hero_section_title__Imshk { font-size: 24px; } } /*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[9].use[5]!./src/styles/service.module.scss ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .service_infoServiceContainer__EwK6V { background: radial-gradient(60.11% 60.11% at 50% 39.89%, rgba(204, 174, 218, 0.4) 43%, rgba(219, 151, 174, 0.4) 100%), linear-gradient(rgba(238, 138, 147, 0.6) 0%, rgba(238, 138, 147, 0.49) 99.99%, rgba(238, 138, 147, 0.6) 100%); box-shadow: rgba(255, 216, 216, 0.15) 0px 4px 204px 0px inset; filter: blur(0px); } .service_heroHeading__kSb87 { color: rgb(255, 255, 255); font-size: 26px; font-weight: 700; font-family: "Nevan", sans-serif; } @media screen and (min-width: 960px) { .service_heroHeading__kSb87 { font-size: 30px; } } @media screen and (min-width: 1440px) { .service_heroHeading__kSb87 { font-size: 40px; } } .service_heroDescription__ZgqWH { color: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 400; line-height: 19px; margin-top: 22px; padding-bottom: 84px; } @media screen and (max-width: 960px) { .service_heroDescription__ZgqWH { font-size: 14px; padding-bottom: 68px; } } .service_heroButton__IuUCW { background: rgb(22, 22, 22); border: 1px solid rgba(255, 255, 255, 0.17); } .service_heroImg__pkHP_ { color: transparent; width: 100%; height: auto; max-height: 500px; -o-object-fit: fill; object-fit: fill; margin: auto; } @media screen and (max-width: 960px) { .service_heroImg__pkHP_ { width: auto !important; } } /*!************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./node_modules/react-toastify/dist/ReactToastify.css ***! \************************************************************************************************************************************************************************************************************************************************************************************************/ :root { --toastify-color-light: #fff; --toastify-color-dark: #121212; --toastify-color-info: #3498db; --toastify-color-success: #07bc0c; --toastify-color-warning: #f1c40f; --toastify-color-error: #e74c3c; --toastify-color-transparent: rgba(255, 255, 255, 0.7); --toastify-icon-color-info: var(--toastify-color-info); --toastify-icon-color-success: var(--toastify-color-success); --toastify-icon-color-warning: var(--toastify-color-warning); --toastify-icon-color-error: var(--toastify-color-error); --toastify-toast-width: 320px; --toastify-toast-background: #fff; --toastify-toast-min-height: 64px; --toastify-toast-max-height: 800px; --toastify-font-family: sans-serif; --toastify-z-index: 9999; --toastify-text-color-light: #757575; --toastify-text-color-dark: #fff; --toastify-text-color-info: #fff; --toastify-text-color-success: #fff; --toastify-text-color-warning: #fff; --toastify-text-color-error: #fff; --toastify-spinner-color: #616161; --toastify-spinner-color-empty-area: #e0e0e0; --toastify-color-progress-light: linear-gradient( to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55 ); --toastify-color-progress-dark: #bb86fc; --toastify-color-progress-info: var(--toastify-color-info); --toastify-color-progress-success: var(--toastify-color-success); --toastify-color-progress-warning: var(--toastify-color-warning); --toastify-color-progress-error: var(--toastify-color-error); } .Toastify__toast-container { z-index: var(--toastify-z-index); -webkit-transform: translate3d(0, 0, var(--toastify-z-index)); position: fixed; padding: 4px; width: var(--toastify-toast-width); box-sizing: border-box; color: #fff; } .Toastify__toast-container--top-left { top: 1em; left: 1em; } .Toastify__toast-container--top-center { top: 1em; left: 50%; transform: translateX(-50%); } .Toastify__toast-container--top-right { top: 1em; right: 1em; } .Toastify__toast-container--bottom-left { bottom: 1em; left: 1em; } .Toastify__toast-container--bottom-center { bottom: 1em; left: 50%; transform: translateX(-50%); } .Toastify__toast-container--bottom-right { bottom: 1em; right: 1em; } @media only screen and (max-width : 480px) { .Toastify__toast-container { width: 100vw; padding: 0; left: 0; margin: 0; } .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right { top: 0; transform: translateX(0); } .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right { bottom: 0; transform: translateX(0); } .Toastify__toast-container--rtl { right: 0; left: initial; } } .Toastify__toast { position: relative; min-height: var(--toastify-toast-min-height); box-sizing: border-box; margin-bottom: 1rem; padding: 8px; border-radius: 4px; box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05); display: flex; justify-content: space-between; max-height: var(--toastify-toast-max-height); overflow: hidden; font-family: var(--toastify-font-family); cursor: default; direction: ltr; /* webkit only issue #791 */ z-index: 0; } .Toastify__toast--rtl { direction: rtl; } .Toastify__toast--close-on-click { cursor: pointer; } .Toastify__toast-body { margin: auto 0; flex: 1 1 auto; padding: 6px; display: flex; align-items: center; } .Toastify__toast-body > div:last-child { word-break: break-word; flex: 1; } .Toastify__toast-icon { margin-inline-end: 10px; width: 20px; flex-shrink: 0; display: flex; } .Toastify--animate { animation-fill-mode: both; animation-duration: 0.7s; } .Toastify--animate-icon { animation-fill-mode: both; animation-duration: 0.3s; } @media only screen and (max-width : 480px) { .Toastify__toast { margin-bottom: 0; border-radius: 0; } } .Toastify__toast-theme--dark { background: var(--toastify-color-dark); color: var(--toastify-text-color-dark); } .Toastify__toast-theme--light { background: var(--toastify-color-light); color: var(--toastify-text-color-light); } .Toastify__toast-theme--colored.Toastify__toast--default { background: var(--toastify-color-light); color: var(--toastify-text-color-light); } .Toastify__toast-theme--colored.Toastify__toast--info { color: var(--toastify-text-color-info); background: var(--toastify-color-info); } .Toastify__toast-theme--colored.Toastify__toast--success { color: var(--toastify-text-color-success); background: var(--toastify-color-success); } .Toastify__toast-theme--colored.Toastify__toast--warning { color: var(--toastify-text-color-warning); background: var(--toastify-color-warning); } .Toastify__toast-theme--colored.Toastify__toast--error { color: var(--toastify-text-color-error); background: var(--toastify-color-error); } .Toastify__progress-bar-theme--light { background: var(--toastify-color-progress-light); } .Toastify__progress-bar-theme--dark { background: var(--toastify-color-progress-dark); } .Toastify__progress-bar--info { background: var(--toastify-color-progress-info); } .Toastify__progress-bar--success { background: var(--toastify-color-progress-success); } .Toastify__progress-bar--warning { background: var(--toastify-color-progress-warning); } .Toastify__progress-bar--error { background: var(--toastify-color-progress-error); } .Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error { background: var(--toastify-color-transparent); } .Toastify__close-button { color: #fff; background: transparent; outline: none; border: none; padding: 0; cursor: pointer; opacity: 0.7; transition: 0.3s ease; align-self: flex-start; } .Toastify__close-button--light { color: #000; opacity: 0.3; } .Toastify__close-button > svg { fill: currentColor; height: 16px; width: 14px; } .Toastify__close-button:hover, .Toastify__close-button:focus { opacity: 1; } @keyframes Toastify__trackProgress { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } .Toastify__progress-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; z-index: var(--toastify-z-index); opacity: 0.7; transform-origin: left; } .Toastify__progress-bar--animated { animation: Toastify__trackProgress linear 1 forwards; } .Toastify__progress-bar--controlled { transition: transform 0.2s; } .Toastify__progress-bar--rtl { right: 0; left: initial; transform-origin: right; } .Toastify__spinner { width: 20px; height: 20px; box-sizing: border-box; border: 2px solid; border-radius: 100%; border-color: var(--toastify-spinner-color-empty-area); border-right-color: var(--toastify-spinner-color); animation: Toastify__spin 0.65s linear infinite; } @keyframes Toastify__bounceInRight { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } to { transform: none; } } @keyframes Toastify__bounceOutRight { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); } to { opacity: 0; transform: translate3d(2000px, 0, 0); } } @keyframes Toastify__bounceInLeft { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } to { transform: none; } } @keyframes Toastify__bounceOutLeft { 20% { opacity: 1; transform: translate3d(20px, 0, 0); } to { opacity: 0; transform: translate3d(-2000px, 0, 0); } } @keyframes Toastify__bounceInUp { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes Toastify__bounceOutUp { 20% { transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); } to { opacity: 0; transform: translate3d(0, -2000px, 0); } } @keyframes Toastify__bounceInDown { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } to { transform: none; } } @keyframes Toastify__bounceOutDown { 20% { transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); } to { opacity: 0; transform: translate3d(0, 2000px, 0); } } .Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left { animation-name: Toastify__bounceInLeft; } .Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right { animation-name: Toastify__bounceInRight; } .Toastify__bounce-enter--top-center { animation-name: Toastify__bounceInDown; } .Toastify__bounce-enter--bottom-center { animation-name: Toastify__bounceInUp; } .Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left { animation-name: Toastify__bounceOutLeft; } .Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right { animation-name: Toastify__bounceOutRight; } .Toastify__bounce-exit--top-center { animation-name: Toastify__bounceOutUp; } .Toastify__bounce-exit--bottom-center { animation-name: Toastify__bounceOutDown; } @keyframes Toastify__zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes Toastify__zoomOut { from { opacity: 1; } 50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .Toastify__zoom-enter { animation-name: Toastify__zoomIn; } .Toastify__zoom-exit { animation-name: Toastify__zoomOut; } @keyframes Toastify__flipIn { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @keyframes Toastify__flipOut { from { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .Toastify__flip-enter { animation-name: Toastify__flipIn; } .Toastify__flip-exit { animation-name: Toastify__flipOut; } @keyframes Toastify__slideInRight { from { transform: translate3d(110%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } @keyframes Toastify__slideInLeft { from { transform: translate3d(-110%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } @keyframes Toastify__slideInUp { from { transform: translate3d(0, 110%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } @keyframes Toastify__slideInDown { from { transform: translate3d(0, -110%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } @keyframes Toastify__slideOutRight { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(110%, 0, 0); } } @keyframes Toastify__slideOutLeft { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(-110%, 0, 0); } } @keyframes Toastify__slideOutDown { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, 500px, 0); } } @keyframes Toastify__slideOutUp { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, -500px, 0); } } .Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left { animation-name: Toastify__slideInLeft; } .Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right { animation-name: Toastify__slideInRight; } .Toastify__slide-enter--top-center { animation-name: Toastify__slideInDown; } .Toastify__slide-enter--bottom-center { animation-name: Toastify__slideInUp; } .Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left { animation-name: Toastify__slideOutLeft; } .Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right { animation-name: Toastify__slideOutRight; } .Toastify__slide-exit--top-center { animation-name: Toastify__slideOutUp; } .Toastify__slide-exit--bottom-center { animation-name: Toastify__slideOutDown; } @keyframes Toastify__spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*# sourceMappingURL=ReactToastify.css.map */ /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[9].use[5]!./src/styles/biography_modal.module.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .biography_modal_biographyModalOverlay__ETJFo { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 1000; opacity: 0; transition: opacity 0.3s ease-in-out; } .biography_modal_biographyModalOverlay__ETJFo.biography_modal_show__R9z_Q { display: flex; opacity: 1; } .biography_modal_biographyModalMain__HjQyu { position: relative; max-width: 1200px; width: 90%; min-height: 180px; padding: 40px 20px 20px 20px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border-radius: 30px; border: 1px solid rgba(238, 138, 147, 0.1); background: rgb(25, 24, 24); max-height: 90vh; overflow-y: auto; } .biography_modal_closeBtnModal__lzuSD { position: absolute; top: 15px; right: 20px; } .biography_modal_biographyContent__LxdjF { display: flex; gap: 20px; } .biography_modal_contentNameJob___Ozd8 { max-width: 200px; width: 100%; margin-top: 20px; } .biography_modal_teamName__5ZqoM { color: #ccaeda; font-size: 22px; font-weight: 700; } .biography_modal_teamJobTitle__fJW3i { color: #ccaeda; font-size: 18px; font-weight: 400; margin-bottom: 10px; } .biography_modal_teamModalImage__b5NT3 { border-radius: 0.5rem; max-height: 250px; max-width: 200px; min-width: 200px; width: 100%; height: auto; } .biography_modal_popupContent__QC5qu p { margin-bottom: 10px; font-size: 16px; line-height: normal; color: #fff; } .biography_modal_popupContent__QC5qu span { margin-bottom: 10px; font-size: 14px; line-height: normal; color: #fff; } .biography_modal_popupContent__QC5qu h3 { margin-bottom: 10px; padding-top: 10px; font-size: 20px; color: #db97ae; } .biography_modal_popupContent__QC5qu h4 { margin-bottom: 10px; padding-top: 10px; font-size: 18px; color: #db97ae; } .biography_modal_popupContent__QC5qu div { padding-top: 20px; } .biography_modal_popupContent__QC5qu ul { list-style-type: disc; padding-left: 20px; } .biography_modal_popupContent__QC5qu li { margin-bottom: 8px; font-size: 16px; color: #fff; } @media screen and (max-width: 767px) { .biography_modal_biographyContent__LxdjF { flex-direction: column; margin-top: 20px; } .biography_modal_teamModalImage__b5NT3 { max-width: 150px; } } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[9].use[5]!./src/styles/slider_in.module.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .slider_in_slideIn__R1Om_ { opacity: 0; /* Start hidden */ transform: translateY(100%); } /*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./node_modules/react-phone-number-input/style.css ***! \*********************************************************************************************************************************************************************************************************************************************************************************************/ /* 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; /* 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 `