{"version":3,"sources":["webpack://OnfidoAuth/./components/Modal/style.scss","webpack://OnfidoAuth/./components/Theme/constants.scss","webpack://OnfidoAuth/../node_modules/@onfido/castor/src/components/button/button.scss","webpack://OnfidoAuth/../node_modules/@onfido/castor/src/helpers/font/font.scss","webpack://OnfidoAuth/../node_modules/@onfido/castor/src/mixins/interactive.scss","webpack://OnfidoAuth/../node_modules/@onfido/castor/src/mixins/with-inner-focus.scss","webpack://OnfidoAuth/./components/Theme/style.scss","webpack://OnfidoAuth/../node_modules/@onfido/castor/src/theme/tokens.scss","webpack://OnfidoAuth/../node_modules/@onfido/castor/src/theme/themes/day.scss","webpack://OnfidoAuth/./components/Theme/tokens.scss","webpack://OnfidoAuth/../node_modules/@onfido/castor/src/theme/theme.scss","webpack://OnfidoAuth/./components/NavigationBar/style.scss","webpack://OnfidoAuth/./components/Spinner/style.scss","webpack://OnfidoAuth/./components/PageTitle/style.scss","webpack://OnfidoAuth/./components/GenericError/style.scss","webpack://OnfidoAuth/./components/Welcome/style.scss","webpack://OnfidoAuth/./components/UserConsent/style.scss","webpack://OnfidoAuth/./components/DocumentSelector/style.scss","webpack://OnfidoAuth/./components/Select/style.scss","webpack://OnfidoAuth/./components/CountrySelector/style.scss","webpack://OnfidoAuth/./components/Uploader/style.scss","webpack://OnfidoAuth/./components/CustomFileInput/style.scss","webpack://OnfidoAuth/./components/Photo/style.scss","webpack://OnfidoAuth/./components/Overlay/style.scss","webpack://OnfidoAuth/./components/CameraPermissions/Primer/style.scss","webpack://OnfidoAuth/./components/CameraPermissions/Recover/style.scss","webpack://OnfidoAuth/./components/Error/style.scss","webpack://OnfidoAuth/./components/CameraError/style.scss","webpack://OnfidoAuth/./components/Camera/style.scss","webpack://OnfidoAuth/./components/Button/style.scss","webpack://OnfidoAuth/./components/DocumentVideo/PaperIdFlowSelector/style.scss","webpack://OnfidoAuth/./components/DocumentVideo/CaptureControls/style.scss","webpack://OnfidoAuth/./components/DocumentVideo/reusables/style.scss","webpack://OnfidoAuth/./components/Capture/style.scss","webpack://OnfidoAuth/./components/FaceVideo/style.scss","webpack://OnfidoAuth/./components/CaptureViewer/style.scss","webpack://OnfidoAuth/./components/Pannable/style.scss","webpack://OnfidoAuth/./components/EnlargedPreview/style.scss","webpack://OnfidoAuth/./components/Confirm/style.scss","webpack://OnfidoAuth/./components/DocumentVideo/Confirm/style.scss","webpack://OnfidoAuth/./components/Complete/style.scss","webpack://OnfidoAuth/./components/crossDevice/MobileConnected/style.scss","webpack://OnfidoAuth/./components/crossDevice/CrossDeviceSubmit/style.scss","webpack://OnfidoAuth/./components/crossDevice/MobileNotificationSent/style.scss","webpack://OnfidoAuth/./components/crossDevice/CrossDeviceLink/style.scss","webpack://OnfidoAuth/./components/PhoneNumberInput/style.scss","webpack://OnfidoAuth/./components/QRCode/style.scss","webpack://OnfidoAuth/./components/crossDevice/ClientIntro/style.scss","webpack://OnfidoAuth/./components/crossDevice/ClientSuccess/style.scss","webpack://OnfidoAuth/./components/crossDevice/Intro/style.scss","webpack://OnfidoAuth/./components/ProofOfAddress/Guidance/style.scss","webpack://OnfidoAuth/./components/ProofOfAddress/PoAIntro/style.scss"],"names":[],"mappings":";AAEA,2BAQE,eAGA,kBACA,cACA,YAEA,WACA,cCuBwB,CDtBxB,cACA,kBACA,+BACA,4DACA,oDACA,oDACA,oDACA,sDAEA,oDACA,qCACA,yCACA,gBAEA,yBA/BF,2BAgCI,WACA,eACA,YACA,kBACA,iBAGF,iIAIE,oDAIJ,iCACE,6BACA,iiBACA,wBACA,kBACA,SACA,eACA,yCACA,WACA,kBACA,cACA,qBACA,YACA,UACA,UAEA,yBAhBF,iCAiBI,WACA,YAMA,6EACE,cAEA,yBAHF,6EAMI,cAKN,wCACE,uCACE,iEAIJ,wCACE,iEAIJ,sCACE,aACA,kBACA,WACA,QACA,8DACA,gBACA,iCACA,kBAGF,2CACE,8hBAEA,iDACE,iiBACA,kDChCiC,CDmCnC,kDACE,kDCnCkC,CDsCpC,iFACE,yCC5DU,C;;AA6Ed,+BACE,cACA,yBAFF,+BAGI,iBAEF,yBALF,+BAMI,eASJ,4BACE,kBACA,wDACA,0CACA,oBACA,iCACA,gBACA,2BACA,cCnJA,YC8FA,oBACA,eACA,gBACA,mBACA,oBC1GE,eACA,qFFWA,uEACA,6DACA,6BACA,6BACA,8CACA,oDACA,oBACA,QACA,sBACA,8EACA,kBACA,kBACA,qBACA,mEErBF,2CAEE,mBFqBA,cACE,8CAGF,6BACE,0DACA,+CAEA,mCACE,gEAGF,oCACE,iEAIJ,+BACE,kDAEA,2EAEE,wDAIJ,6DAEE,4CAEA,yEACE,uEAGF,2EACE,iEAIJ,0FGvCA,aAGF,4GACE,wQAGE,wDHsCF,kCACE,4DACA,kDAEA,wCACE,kEAGF,yCACE,mEAIJ,oCACE,oDAGF,uEAEE,8CAEA,mFACE,yEAGF,qFACE,mEAIJ,yGG3EA,aAGF,2HACE,4QAGE,0DH0EF,qBACE,8CAKA,iFACE,4DAMF,qFACE,oDAQF,wKACE,6BIhIN,YACE,+CAGA,6BACE,6DACA,oDACA,qDAEA,oCACE,oEAGF,mCACE,mEAGF,sCACE,oDACA,yBAKJ,+BACE,+DACA,sDACA,uDAEA,sCACE,sEACA,uDAGF,qCACE,qEACA,uDAMR,MC7CE,iCACA,+BACA,gCACA,+BACA,gCACA,oCACA,oCACA,sCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,yCACA,mCACA,qCACA,qCACA,qCACA,sCACA,uCACA,uCACA,uCACA,uCACA,6CACA,6CACA,wCACA,wCACA,wCACA,uCACA,uCACA,wCACA,uCACA,uCACA,wCACA,oCACA,oCACA,qCACA,sCACA,uCACA,uCACA,uCACA,6CACA,4CACA,6CACA,kCACA,kCACA,kCACA,mCACA,oCACA,oCACA,oCACA,oCACA,0CACA,0CACA,oCACA,qCACA,sCACA,uCACA,uCACA,uCACA,uCACA,4CACA,4CACA,6CACA,iCACA,mCACA,mCACA,qCACA,qCACA,qCACA,qCACA,yCACA,2CCtEE,mBAEA,0DACA,+DACA,4DACA,iEACA,8DACA,0DACA,gEACA,mEACA,4DACA,6DACA,8DACA,uDACA,6DACA,0DACA,kEACA,uEACA,+DACA,uEACA,kEACA,iEACA,6DACA,gEACA,oEACA,+DACA,qEACA,sEACA,wEACA,+EACA,iEACA,+DACA,qEACA,sEACA,wEACA,+EACA,gEACA,yEACA,iEACA,0EACA,0DACA,mEACA,8DACA,uEACA,mEACA,oEACA,2EACA,qEACA,wEACA,yEACA,8DACA,0DACA,gEACA,2DACA,iEACA,kEACA,6DACA,2DACA,kEACA,4DACA,yEACA,6DACA,0EACA,sDACA,6DACA,mEACA,kEACA,iEACA,iEACA,qECpDF,qBAGA,uCAEA,yCACA,0CACA,4CACA,0CACA,4CAGA,0CAGA,6CACA,iDACA,8BACA,gEAEA,gDACA,iDACA,iCACA,mEAEA,4CACA,6CACA,6BACA,+DAGA,mFAGA,qEACA,uCACA,yCACA,mEAGA,sEAGA,6EACA,gGAGA,kGAKA,kFAGA,8EAGA,mGAGA,qGAKA,4EAGA,qFAIA,mFAGA,+FAGA,iGAIA,yEAGA,oFAIA,sDACA,wGAGA,mGAIA,2EAGA,6DACA,mCAGA,qEACA,6EAEA,yEACA,wFAGA,yFAKA,6EACA,8EAGA,sEACA,iFAGA,kFAKA,yEACA,iFAGA,qFAGA,uFAKA,0EACA,4ECrJE,+BJ+BJ,MI9BM,+BJmCN,0BACE,WACA,gBACA,SACA,kBACA,sDACA,6GAGF,oCACE,gBACA,mBACA,8CLNY,CKSd,yCACE,sDACA,6GACA,6FACA,WAIA,yBADF,+CAEI,sDACA,6GACA,6FACA,YAIJ,mCACE,uDAGF,6BAIE,0BACA,kBACA,sDACA,6GACA,iCACA,wBACA,yBAVF,6BAaI,2BAGF,+BAEE,mDAIJ,uCACE,uDACA,cACA,YAGF,8CACE,gBAGF,sCACE,gBACA,mDAOF,4LACE,UAHY,CAIZ,wBACA,2BACA,4BAGF,mCACE,sDACA,YLjGc,CKkGd,yGACA,8EACA,uEACA,iBACA,yBAPF,mCAQI,oBAEF,yBAVF,mCAWI,kBAGF,qEACE,yCACA,iBACA,sDACA,yGACA,cAIA,sGACE,mBACA,gBACA,uBACA,sBACA,mDAGF,oGACE,oCAGF,yGACE,yCLlHQ,CKmHR,UAIJ,yEAEE,SArDiB,CAsDjB,aACA,uDACA,mDAEA,kJACE,oDACA,SA5De,CA6Df,aACA,UAIJ,6DAEE,8/EACA,SArEiB,CAsEjB,aACA,uDAEA,uIACE,2/EACA,SA3Ee,CA4Ef,aACA,UAKN,4BACE,WACA,YLzKc,CK0Kd,uDAEA,gEACE,UAGF,sDAEE,gBAEA,uFACE,g1JAGF,0HAEE,w0JAGF,kFACE,sBAKN,4BACE,kBAGF,mCACE,gBAGF,mCACE,YACA,WACA,qDACA,eACA,eACA,YAGF,0BACE,cACA,4BACA,2BACA,WAIF,4BAEE,kBACA,0BACA,0BAIF,0BACE,sBACA,gBACA,oJACA,mBACA,oBAGF,8BACE,SACA,mBAGF,0DAEE,yCACA,qBACA,6BACA,4DACA,6BACA,qCAGE,oGACE,yDACA,gDAGF,sGACE,0DACA,gDAKN,kCACE,qBACA,qCAGF,0DAEE,eACA,iCACA,iBACA,YACA,YAEA,4EACE,mBAKJ,2CACE,2CACA,6BACA,6BACA,yDAEA,iDACE,oEAGF,kDACE,qEAKJ,oEAEE,6BACA,6BACA,0DAEA,kKAEE,4CAGF,gFACE,qEAGF,kFACE,sEAIJ,qCACE,YAGF,+BACE,iCACA,qBL3RuB,CK4RvB,yBAHF,+BAII,UL5RqB,EKgSzB,+BACE,iCACA,qBLhSuB,CKiSvB,yBAHF,+BAII,qBLjSqB,EKoSvB,4DACE,qBLzSqB,CK+SzB,8BAGE,UAGF,+BACE,qEAGF,kCACE,sDACA,eACA,MACA,OACA,QACA,SAEA,+BLjVoB,CKkVpB,4FAGA,8CACE,UAGF,gDACE,UAKF,4DACE,WACA,UACA,4FAIF,8EACE,YACA,UACA,0D;AK1aJ,wCAEE,UVwCkB,CUvClB,iBAFyB,CAGzB,gBACA,sDACA,yBANF,wCASI,cVkC0B,CUjC1B,qBAHyB,EAO7B,kCACE,WACA,qCACA,UACA,kBACA,yCACA,cACA,SACA,6BACA,eAEA,yBAXF,kCAYI,YAIJ,sCACE,WACA,UACA,isBACA,4BACA,2BACA,wBACA,6BACA,kBACA,qBACA,sBAGF,2CAEE,wMAMA,UAII,qIACE,isBACA,kDVoB6B,CUfnC,6EACE,yCVNU,CUQV,oFACE,isBAEA,0HACE,kDVS8B,CUJpC,iFACE,+qBAOA,8KACE,mBAKF,0FACE,gEAKF,2FACE,iEAKN,sCACE,aAGF,mCACE,kBACA,iBACA,iCAEA,yBALF,mCAMI,c;AVhBJ,8BACE,YACA,kBACA,MACA,OACA,SACA,QWpGF,8BAGE,UACA,WACA,aACA,UAGF,oEACE,GACE,kDACA,UAGF,IACE,8CACA,WAGF,KACE,WAZJ,4DACE,GACE,kDACA,UAGF,IACE,8CACA,WAGF,KACE,WAIJ,6BACE,kBACA,sEAEA,8CACE,oDAGF,8CACE,oDAGF,8CACE,oDAGF,8CACE,oDAGF,iCACE,0DACA,kBACA,aACA,cACA,cACA,eACA,mBACA,yBACA,0O;ACtDJ,+BACE,sCACA,0CACA,0CACA,kBAGF,mCACE,sCACA,iBACA,yBAHF,mCAII,iBAIJ,yCACE,aAGF,kCACE,yCACA,yCACA,6CACA,6CAGF,sCACE,iBACA,oCAIA,wDAEA,yBARF,sCASI,gBAIJ,iCACE,aAGF,oCACE,yCZaY,CYZZ,SACA,UAEA,yIAEE,yCZOU,CYJZ,mEACE,mBAGF,uEACE,gCACA,gB;AZqFJ,6FACE,mDACA,kBalJF,gJACE,WACA,UACA,wBACA,iBACA,iBACA,kBAGF,6CAGE,qoGAGF,gDAGE,65BAGF,mDAEE,0sBACA,e;ACxBF,iCACE,sDACA,6GACA,mBAGF,+BACE,sDACA,6GACA,uEACA,6FACA,yCAEA,yBAPF,+BAQI,+EAIJ,0CACE,4CAGF,oCACE,eAEA,uCACE,2BACA,UAGF,0CACE,kBAGF,kDACE,8CAGF,yBAhBF,oCAiBI,gBAEA,uCACE,kBAKN,sCACE,sDACA,8EAEA,mEACE,k9BACA,aACA,8CAGF,kEACE,yCACA,gB;AC3DJ,wCACE,WACA,YACA,kBAEA,2CACE,sCACA,0CACA,sCACA,iBACA,kBACA,6BACA,yBAPF,2CAQI,iBAIJ,2CACE,eAGF,0CACE,gBAGF,2CACE,kBACA,kBAIA,yDACE,WAKN,mCACE,UACA,WACA,sDACA,6FAEA,sEACE,8HACA,uEAIJ,qEACE,gBACA,eACA,qBf6BuB,Ce1BzB,qCACE,iBACA,yBAFF,qCAGI,mBAMJ,6CACE,eAEA,WACA,mBACA,YAEA,oBACA,wDACA,4DAEA,oDAEA,qCACA,gBACA,gBAEA,cAGA,qEApBF,6CAqBI,UAGF,yBAxBF,6CAyBI,WACA,mBAGF,yBA7BF,6CA8BI,WACA,iBAGF,yMAIE,oDAIJ,wCACE,Yf1EkB,Ce4ElB,yBAHF,wCAII,Uf5EkB,Ee+EpB,2CACE,iCACA,mBACA,SAGF,0CACE,gBACA,oBAKF,yBADF,wCAEI,6GACA,uEACA,WAEA,+CACE,WAGF,2DACE,eACA,oBAKN,0CACE,YACA,sDACA,6GACA,gGAGF,qCACE,aACA,wBACA,wd;AfRF,wXACE,mDACA,kBgBlJF,qCACE,gBACA,UACA,gBAEA,yBALF,qCAMI,cAOJ,uCACE,WACA,gDACA,wDACA,+CACA,sDACA,mBACA,iBACA,eACA,sDACA,aACA,iBACA,mBACA,YACA,kBAEA,8CACE,sZACA,wBACA,WACA,cACA,aACA,kBACA,UACA,QACA,sEACA,WAGF,+FACE,gJAIF,8CACE,kJAKJ,wCACE,gBACA,4CACA,wCAGF,2CACE,sDACA,8EACA,6GACA,qBACA,eAGF,sCACE,SACA,gBACA,gBAGF,qCACE,qCACA,gBACA,iCACA,4BAGF,wCACE,gBACA,iCACA,4BAIF,oCACE,qBACA,iCACA,wBACA,2BACA,yBAGF,qCACE,eACA,4BACA,4BACA,wBACA,oCACA,UACA,WACA,iBACA,oDAcA,8CAEE,yyBAFF,4DAEE,g0BAFF,qDAEE,87CAFF,sDAEE,6xBAFF,qEAEE,iyGAFF,kDAEE,orCAFF,4CAEE,8jC;AC1HJ,6BACE,e;ACKF,yCACE,uDACA,gBAGF,iFACE,iCAOF,8CACE,gBAOF,4CACE,qBACA,kBAGF,iFACE,qBACA,4BACA,qBACA,2BACA,eACA,cACA,kBAGF,wCAEE,+fAGF,yCAEE,ibAGF,2CACE,kBACA,WACA,SACA,YACA,aACA,6BACA,4BACA,sBACA,2BACA,kBAGF,4CACE,sBACA,sDACA,uEAwCF,4CACE,6BACA,ihBACA,8BAZsB,CAatB,4BACA,4BAGF,+CACE,kBAGF,yFAEE,oDA3BwB,CA4BxB,oBACA,oDACA,gBACA,WAGF,6CACE,YACA,6BACA,kBAEA,gCACA,oCA1CgB,CA6ClB,4CACE,YACA,cACA,kBAGF,sDACE,iBACA,oEAGF,8DACE,iEAEA,eAGF,4CAEE,qBA1DsB,CA2DtB,oBA3DsB,CA4DtB,kBACA,kBACA,oBAGF,4CACE,sBACA,oDAvEwB,CAwExB,aACA,oCA3EgB,CA4EhB,SACA,oBArEqB,CAsErB,kBACA,UACA,0BAGF,qDACE,cAGF,oDACE,aAGF,qDACE,sGACA,OACA,kBACA,SACA,YAGF,oDACE,kBAGF,8CACE,eA3F0B,CA4F1B,eACA,cACA,kBAGF,gDACE,oBAGF,4DACE,mBAGF,2DACE,sBAGF,2GAEE,kEAlHwB,CAmHxB,8DAnHwB,CAoHxB,WACA,aAGF,0DACE,yBACA,cACA,mBAGF,0FAEE,gCA5Ie,CA6If,0BA5IiB,CA+InB,0FAEE,qBApIoB,CAyItB,qDACE,mEA3IyB,CA4IzB,+DA5IyB,C;AlBEzB,0BADF,6CAEI,mDACA,SACA,gFACA,UACA,kBACA,WACA,WACA,UAEA,oDACE,WA6BN,8IACE,mDACA,kBmBlJF,kCACE,sDAGF,yDACE,YACA,sDACA,yCACA,6GACA,6FACA,qBAIA,yBADF,qCAEI,sDACA,iDACA,6GACA,mEAIJ,yCACE,0BACA,iCACA,iBAEA,yBALF,yCAMI,gCACA,qBAIJ,8BACE,8CAGF,gCACE,sDACA,kEAEA,gEACE,8HACA,uEACA,eAIJ,mCACE,kBACA,yBAFF,mCAGI,qBAIJ,wCACE,sDACA,WAOF,+BACE,sDACA,qFACA,gBAGF,2CACE,iBACA,yBAFF,2CAGI,mBAGF,2EACE,eACA,gBAIJ,0CACE,eACA,kBAKA,qEAFF,sCAGI,iBAEF,yBALF,sCAMI,kBAMF,qEAFF,yCAGI,iBAEF,yBALF,yCAMI,eACA,WACA,WAIJ,6GAEE,w7EACA,sBACA,4BACA,4BACA,WACA,UACA,YAUA,yBAHF,qCAII,qfACA,2BACA,6BACA,wBACA,gBACA,YACA,YAOF,yBAHF,2CAII,YACA,WACA,6kDACA,yBAIJ,iCAEE,yBACA,y+CACA,uBACA,4BACA,4BACA,WACA,UACA,YAEA,yBAXF,iCAYI,qfACA,2BACA,6BACA,wBACA,gBACA,YACA,YAIJ,+EAEE,sDACA,6GACA,mDACA,WAGF,mCACE,sDACA,6GACA,mDACA,kBACA,qBACA,kEAMA,WAEA,yBAdF,mCAeI,6BACA,SACA,6FACA,WAIJ,6CACE,sDACA,6FACA,mDAGF,2CACE,yCACA,YACA,iBAGF,2CACE,4BACA,4BACA,wBACA,oCACA,eACA,eACA,eACA,cACA,mBAGF,+CACE,+rZAGF,iDACE,upjBAGF,gDACE,usgBAGF,+CACE,ujiBAGF,6CACE,kBAGF,0CACE,kBAGF,6CACE,c;AC5PF,yCACE,kBACA,eAGF,qCACE,SACA,OAGA,wBACA,kBACA,QACA,MACA,WACA,U;ACbF,+BACE,sDAGF,+BACE,cACA,kBACA,OACA,MACA,UACA,WAIF,gCACE,oBACA,0mKACA,4BACA,2BACA,mDACA,kBAGF,iCACE,oBACA,+iDACA,4BACA,2BACA,mDACA,kBAGF,iCACE,iBACA,kBACA,kBACA,gBAEA,0BANF,iCAOI,mBAGF,4CACE,gBAIF,yCACE,WACA,cACA,kDrBYyB,CqBXzB,aACA,YACA,kBACA,UACA,cAGF,oDACE,aAIJ,kCACE,eACA,oBACA,cACA,gBAEA,0BANF,kCAOI,gBAIJ,+BACE,sBACA,8DACA,WACA,mBACA,sBAGF,+BACE,mBACA,c;AClFF,gCACE,8CACA,kBACA,SACA,OACA,QACA,MAGF,oCACE,YACA,WAGF,yCACE,qBACA,sBAGF,kEACE,mBtB4CqB,CsB3CrB,mBAGF,8DACE,iBACA,0CtB6BY,CsB5BZ,iBAGF,mEACE,2BACA,4BACA,wBACA,kBACA,sDACA,uEACA,8EAEA,8FACE,guCAGF,kGACE,ipVAGF,mGACE,yjCAGF,mGACE,k6BAIJ,8DACE,kBACA,SACA,OACA,QACA,sDAiBF,4BALE,gCACA,yCAMA,yoBACA,4BACA,YACA,oBACA,kBACA,MACA,OACA,WAEA,yBAXF,4BALE,mCACA,0CAmBA,iEACE,2fAIJ,iCACE,U;ACrGF,oDACE,sDACA,6GACA,yCACA,6FACA,uEAGF,qDACE,iCACA,yCAGF,8CACE,YACA,WACA,iCACA,sDACA,6GACA,2EACA,0BACA,yBACA,WACA,sBACA,YAIA,wDAEA,yBAjBF,8CAkBI,0BAIJ,gDACE,iCAEA,kBACA,eAGF,+CACE,yBAGF,gDACE,6BACA,wjFACA,4BACA,qBACA,2BACA,aACA,WAEA,yBATF,gDAUI,wBACA,mDACA,aAIJ,8CACE,QACA,kBACA,QACA,kBACA,UACA,gBAEA,yBARF,8CASI,SAIJ,gDACE,sDACA,6GACA,6F;AvBuEF,kDACE,kBACA,wDACA,0CACA,oBACA,iCACA,gBACA,2BACA,cwB7JF,sDACE,iCACA,gBACA,uCACA,kBACA,oDACA,+CANF,sDAOI,oCAEF,yBATF,sDAUI,uCAIJ,2DACE,gBACA,yBAGF,kDAEE,kBACA,MACA,oBACA,8DAGF,+CACE,UACA,SAGF,8CACE,sCAGF,gDACE,iBACA,kB;ACtCF,+BACE,qBACA,gBACA,yCzBsDY,CyBrDZ,kBACA,2BACA,kBACA,yBAPF,+BAQI,oBAIJ,qCACE,0DACA,4CAGF,uCACE,yDACA,2CAGF,iCACE,aACA,gBACA,kBAGF,sCACE,iCACA,iBAGF,2BACE,kBAGF,gCACE,qBACA,gBACA,gBACA,mBAGF,gCACE,kBACA,YACA,UACA,kBACA,2BACA,4BACA,wBAGF,sCACE,8jBAGF,wCACE,s8BAGF,qCACE,kBACA,gBACA,uBACA,WACA,YACA,kCACA,oCACA,qCACA,mCACA,kCACA,0DAGF,qCACE,iEACA,+DAGF,mCACE,kEACA,gEAGF,6BACE,qfACA,2BACA,4BACA,wBACA,6BACA,kBACA,YACA,aACA,kBACA,WACA,aACA,eACA,SACA,aAEA,mCACE,sCAGF,oCACE,sC;AzBiBJ,wCACE,aACA,yBAFF,wCAGI,gBAEF,yBALF,wCAMI,c0BlIJ,0CACE,OACA,kBACA,QACA,MACA,UAIA,sDACE,WACA,cACA,YACA,OACA,kBACA,QACA,MACA,WACA,UAQJ,4CAEE,SAnBA,oDACE,WACA,cACA,YACA,OACA,kBACA,QACA,MACA,WACA,UAYF,oDACE,wB1BoCyB,C0BnCzB,YAIJ,wCAEE,QACA,OACA,QACA,kBACA,U;AC1CF,6BACE,WACA,YACA,sDACA,6GACA,6FAEA,sEACE,cACA,qFAIJ,gCACE,gBAGF,0EACE,kBAGF,wCACE,WACA,cACA,gBAGF,8BACE,WACA,YACA,MACA,kBACA,UAGF,4BACE,cACA,YACA,UAEA,oCALF,4BAMI,WACA,MACA,OACA,YACA,kBAGF,sEAQE,mBAIJ,8BACE,kBACA,aACA,WACA,SACA,UAEA,4DACE,UAIJ,0BACE,eACA,sBACA,uDACA,kBACA,kBACA,yDACA,8HACA,aACA,iBACA,kBACA,UACA,YAEA,gCACE,kEAGF,iCACE,mEAGF,mCACE,aAIJ,sCACE,kBACA,MACA,OACA,YACA,WAEA,gFACE,OACA,QACA,YACA,oEACA,YACA,WAIF,+BAjBF,sCAkBI,SACA,YACA,qE;ACvHJ,qCACE,eACA,qBACA,SACA,UACA,cACA,aACA,0BACA,gBACA,S;ACTF,qEACE,0EACA,gDACA,oD7BsDY,C6BrDZ,sDACA,6GACA,yCACA,YACA,gBACA,UAGF,4HACE,kBAGF,4EACE,uEACA,oD7BuCY,C6BtCZ,oBACA,oDACA,sDACA,yCACA,gCACA,WACA,gBACA,gBAEA,mFACE,uDAGF,kIACE,yCACA,gBACA,gBAGF,uQAEE,8CACA,YAIJ,8GACE,8eAGF,+GACE,kfAGF,yDACE,8W;ACtDF,sDACE,yCACA,iBACA,sDACA,6GAGF,+DACE,WAGF,sDACE,4CACA,sCACA,oBACA,yC9B0CY,C8BzCZ,iCACA,eACA,qBACA,yB;ACnBF,oDACE,yCACA,sDACA,6GACA,8EAGF,yDACE,yC/BiDY,C+BhDZ,yCACA,gCACA,mBAEA,0BANF,yDAOI,mCACA,iBAIJ,iGACE,iBACA,gBAEA,0BAJF,iGAKI,kCAIJ,oGACE,mBAGF,mGACE,soBACA,2BACA,4BACA,wBACA,WAGF,qGACE,UAGF,mGACE,4CACA,oBACA,sDACA,aACA,eACA,gBACA,UAEA,wGACE,oBACA,4DAGF,iJACE,SACA,oD/BHU,C+BIV,wKAGF,qJACE,WACA,uDACA,YACA,wFAIJ,yEACE,GACE,SAGF,KACE,YANJ,iEACE,GACE,SAGF,KACE,Y;AC9EJ,yCACE,kBACA,gBAGF,qCACE,gB;ACNF,8CACE,iBAGF,mFACE,gBACA,iBAGF,wCAEE,gBAGF,2CAEE,cAGF,mCACE,mBAGF,sCACE,gBACA,mBAEA,yBAJF,sCAKI,gBAIJ,qCACE,qBACA,oBACA,gBACA,kBAGF,gCACE,gBAGF,mCACE,cACA,kBACA,OACA,MACA,4BACA,wBACA,cACA,eAGF,0CACE,grBACA,wBAGF,wCACE,s3BACA,wBAGF,kCACE,iUACA,wBACA,qBACA,eACA,gBACA,eAGF,2CACE,0DAGF,gCACE,cACA,kBACA,gBACA,iBACA,qBAGF,iCACE,kBACA,aACA,WACA,SACA,UAEA,kEACE,UAIJ,+IACE,UACA,iBACA,kBAGF,4CACE,yCjC/CY,CiCgDZ,iCACA,4BAGE,yBADF,iFAEI,cAKN,iCACE,yCjC3DY,CiC4DZ,kBACA,kBACA,UACA,QACA,OACA,QAsCF,wCAlCE,eACA,aACA,cACA,kBACA,SACA,wBACA,4BACA,6BACA,wCAkBA,2lBAhBA,iDACE,mBACA,WAGF,6DACE,wDAGF,+CACE,sDAkBJ,uCAtCE,eACA,aACA,cACA,kBACA,SACA,wBACA,4BACA,6BACA,wCAuBA,mbArBA,gDACE,mBACA,WAGF,4DACE,wDAGF,8CACE,sD;AClJJ,qCACE,qBACA,cACA,eACA,eACA,oBAEA,4BACA,4BACA,+vHAGF,6KAIE,sDACA,kBACA,mBACA,8EAIA,yBADF,iDAEI,iBAIJ,iMAEE,gBAGF,0CACE,kBACA,yCAGF,wCACE,cACA,iBAGF,mCACE,eACA,gBACA,cACA,sBACA,uDACA,8CACA,mBAOF,kDACE,WACA,YACA,iBACA,uBAEA,yBANF,kDAOI,aAIJ,mCACE,WACA,YACA,mB;ACzEF,kCACE,c;ACCF,wCACE,kBACA,MACA,OACA,WACA,YACA,UACA,oDpCkDY,CoC/Cd,8CACE,kBACA,MACA,OACA,WACA,YAGF,qCACE,gBACA,eACA,mBACA,uBACA,cACA,kBAQA,+EACE,kBACA,SACA,UACA,wEACA,wBACA,SAEA,uFACE,WACA,qBACA,YACA,aACA,uwBACA,4BACA,wBACA,sBACA,oBACA,oBAGF,0HACE,mCACA,kBACA,YAMJ,8EACE,SACA,WACA,kBAEA,sFACE,cACA,eACA,qBACA,kBACA,00BAKN,8CACE,+CACA,oBACA,yCpCvBY,CoCwBZ,aACA,gBACA,uBACA,gBACA,qBAEA,oDACE,kCpCfuB,CoCkBzB,qDACE,mCpClBwB,C;AqC1E5B,yCACE,WACA,YACA,sDACA,yCACA,6GACA,6FAEA,6FACE,MAIJ,6BACE,uDAGF,+BACE,iBACA,yBAFF,+BAGI,cAIJ,+BACE,UACA,WACA,sDACA,6FACA,kBACA,yBANF,+BAOI,qBAGF,8DACE,8HACA,uEAIJ,oCACE,cACA,mBAGF,oCACE,iBACA,yBAFF,oCAGI,mBAGF,mEACE,eACA,gBACA,qBrC2BqB,C;AsCjFzB,+CACE,sDACA,6GACA,6FAGF,0FACE,8EAGF,6CACE,sDACA,6GACA,uEAGF,2CACE,gBACA,iBAGF,uFACE,wnBACA,4BACA,wBACA,WACA,UACA,mBAGF,uFACE,mBAGF,+FACE,UACA,kBAGF,6DACE,e;ACxCF,gCACE,kBAGF,6BACE,WACA,wBACA,wnBACA,oB;AvCwIF,gDACE,mDACA,kBwClJF,gDAEE,WACA,UACA,wBACA,syFACA,iBACA,kBACA,iBACA,kBAOF,kDACE,e;ACjBF,kDACE,cACA,aACA,oBACA,WACA,osDACA,wBAGF,wDACE,qBACA,eACA,eACA,oBAGF,4DACE,oBACA,gBACA,gBASF,sDACE,iB;AzCmHF,uDACE,mDACA,kB0ClJF,uDAEE,WACA,UACA,wBACA,gqDACA,kBACA,iBACA,kBAGF,6DACE,gBAGF,8DACE,aACA,kBACA,gBAOF,yDACE,e;ACxBF,qDACE,WACA,sDACA,6GACA,6FAGF,0DACE,mDACA,sDACA,6GACA,+EAIA,wDAGF,4DACE,yCAGF,yDACE,eAGF,2DACE,WACA,kBAGF,sDACE,cACA,iBAGF,iDACE,gBACA,gBACA,qCACA,WAGF,8DACE,WACA,WACA,WACA,iBAGF,8G3CqEE,qB2ChEF,0DACE,YACA,qDACA,6BACA,gCACA,eACA,sDACA,WACA,gJAGF,sDACE,yDACA,eACA,wJAGF,uDACE,8CACA,iCACA,iBACA,gBACA,yBAGF,2DACE,WACA,kBACA,UACA,WACA,WACA,WAEA,4sGACA,gCACA,4BAEA,oIACA,4DACA,8EACA,0EAGF,kEAEE,KACE,sDAEF,GACE,2DANJ,0DAEE,KACE,sDAEF,GACE,2DAKJ,2DACE,mBACA,gBAGF,yDACE,WACA,sDACA,6FACA,gBAGF,0HACE,cACA,eACA,qBACA,8EACA,WACA,4BACA,wvBACA,UAGF,oDACE,YACA,SACA,aACA,gBACA,uBACA,kBACA,gBACA,qCACA,mBACA,yCAGF,kHACE,gCAGF,mDACE,mDACA,mBAGF,+C3CnCE,qB2CsCA,WACA,YACA,8BACA,UAGF,uDACE,sDACA,UACA,8EACA,uEACA,kBACA,cAGF,6HAEE,WACA,mDACA,qBACA,6DAGF,8DACE,oBAGF,4DACE,WACA,sDACA,8EAGF,sDACE,aAGF,uMACE,cACA,WACA,qBACA,WACA,2BACA,4BAGF,iEAEE,65CAGF,oEAEE,0xBAGF,kEAEE,20D;ACxNF,wCACE,iDACA,iCACA,gBACA,YACA,WAGF,qDACE,WACA,WACA,mBAKA,yKAEE,aACA,YAGF,qFACE,aACA,YACA,SACA,cAGF,oFACE,6BACA,wCAMF,2DACE,gBACA,WACA,eACA,SACA,gCAGF,mIAEE,0CAIJ,yCACE,qBACA,4BACA,2B;ACvDF,iCACE,iBAGF,uCACE,eAGF,qCACE,aACA,WACA,qBACA,2BACA,WACA,4BACA,2yCAGF,qCACE,iCACA,gBACA,kB;A7C2HF,4CACE,mDACA,kB8ClJF,iDACE,aAGF,+CACE,sDACA,6GACA,mDACA,kEACA,8EAGF,4CAEE,WACA,UACA,wBACA,gsFACA,aACA,gBACA,iBACA,kBAEA,0BAXF,4CAYI,aACA,YACA,aACA,iBAGF,0BAlBF,4CAmBI,eACA,mBAIJ,kDACE,WACA,WACA,cACA,cAEA,0BANF,kDAOI,aACA,gBACA,aACA,iBAGF,0BAbF,kDAcI,gBAIJ,8CACE,kBACA,UACA,aACA,QAGF,4CACE,UACA,gBACA,qCAEA,0BALF,4CAMI,iCACA,2B;AC9DJ,8CACE,oBACA,WACA,UACA,oBACA,mgFACA,4BACA,+BACA,mDACA,kBAGF,8CACE,iCACA,iB;A/C4HF,2CACE,mDACA,kBgDlJF,2CACE,sDACA,6GAGF,iDAEE,mBAGF,yCACE,sDACA,6GACA,mDACA,8EAGF,sCACE,gBACA,UAGF,uCACE,sDACA,uEAGA,mBACA,kBAGA,+CACE,WACA,cACA,kDhD4ByB,CgD3BzB,aACA,YACA,kBACA,MACA,cAGF,0DACE,aAIJ,2CAEE,wBACA,oCACA,WACA,WACA,UACA,kBACA,UAEA,+CACE,8xDAGF,uDACE,89DAGF,uDACE,w5CAGF,8DACE,qrDAIJ,8CACE,gBACA,oBACA,mDACA,wCAEA,6KAGE,qC;ACnFJ,+CACE,kBACA,kBACA,yCACA,6GACA,sDAGF,gDACE,iCAEA,wDACE,WACA,qBACA,qBACA,sBACA,8fACA,wBACA,sBACA,cACA,2BACA,0BAIJ,8CACE,gBAGF,gDACE,qCACA,gBACA,mBAEA,yBALF,gDAMI,iBAIJ,yDACE,kBACA,yCACA,cACA,cACA,yBALF,yDAMI,YAIJ,gDACE,YACA,WACA,kBACA,MACA,OACA,QACA,SAGF,6CACE,oCACA,iC;AC7DF,+CACE,gBACA,kBAEA,yBAJF,+CAKI,iBAIJ,oDACE,gBACA,qCACA,kBAGF,mDACE,sDACA,mBACA,iBACA,kBAEA,2DACE,WACA,yDACA,kBACA,qBACA,cACA,aACA,kBACA,OACA,WAIJ,8CACE,gB","file":"style.css","sourcesContent":["@import '../Theme/constants';\n\n.inner {\n  /*\n   * We set the `font-size` to 16px here. This will fix the rest of the SDK\n   * (which uses relative units) to this absolute unit.\n\n   * To opt-in to relative font-sizes, you can override this style to a relative\n   * font-size e.g. `font-size: 1em`\n   */\n  font-size: 16px;\n\n  /* Relative positioning so overflow affects absolute children */\n  position: relative;\n  overflow: auto;\n  margin: auto;\n\n  width: 94vw;\n  max-width: $sdk-container-max-width;\n  height: 600 * $unit;\n  text-align: center;\n  max-height: calc(100% + #{4 * $unit});\n  background-color: var(--osdk-color-background-surface-modal);\n  border-color: var(--osdk-color-border-surface-modal);\n  border-width: var(--osdk-border-width-surface-modal);\n  border-style: var(--osdk-border-style-surface-modal);\n  border-radius: var(--osdk-border-radius-surface-modal);\n\n  font-family: var(--osdk-font-family-body) !important;\n  color: var(--osdk-color-content-body);\n  font-weight: var(--osdk-font-weight-body);\n  line-height: 1.5;\n\n  @media (--small-viewport) {\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    position: absolute;\n    border-radius: 0;\n  }\n\n  &,\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n.closeButton {\n  background-color: transparent;\n  background-image: url('./assets/cross.svg');\n  background-size: contain;\n  border-radius: 16 * $unit;\n  border: 0;\n  cursor: pointer;\n  font-family: var(--osdk-font-family-body);\n  height: 32 * $unit;\n  position: absolute;\n  right: 15 * $unit;\n  text-decoration: none;\n  top: 15 * $unit;\n  width: 32 * $unit;\n  z-index: 4;\n\n  @media (--small-viewport) {\n    top: 10 * $unit;\n    right: 8 * $unit;\n  }\n}\n\n.closeButton {\n  &:hover {\n    .closeButtonLabel {\n      display: block;\n\n      @media (--small-viewport) {\n        /* Safari Mobile tries to show \"hover\" text on click, so we make sure\n         * that mobile devices don't have any \"hover text\" */\n        display: none;\n      }\n    }\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    &:hover {\n      background-color: var(--osdk-color-background-button-icon-hover);\n    }\n  }\n\n  &:active {\n    background-color: var(--osdk-color-background-button-icon-active);\n  }\n}\n\n.closeButtonLabel {\n  display: none;\n  position: absolute;\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  font-weight: 500;\n  font-size: var(--font-size-small);\n  margin-right: 7 * $unit-small;\n}\n\n.closeButtonFullScreen {\n  background-image: url('./assets/cross-white.svg');\n\n  &:hover {\n    background-image: url('./assets/cross.svg');\n    background-color: $color-fullscreen-icon-button-hover;\n  }\n\n  &:active {\n    background-color: $color-fullscreen-icon-button-active;\n  }\n\n  .closeButtonLabel {\n    color: $color-white;\n  }\n}\n","@use 'sass:math';\n\n/* UNITS */\n\n/**\n * We want our units to be based on `em`, so that our SDK can accommodate for\n * the user changing their browser font size.\n * At the same time, `px` is a unit often used in templates etc. from Design.\n * To accommodate for both of these cases, we make our $unit be 1/16 of an `em`.\n * This results in each $unit into being the same as 1px (when the parent\n * font-size is 16px, as it is by default).\n *\n * So each \"unit\" isn't a pixel, but it is when the parent font size is 16px,\n * and it's proportionate to the difference otherwise.\n */\n$unit: math.div(1, 16) * 1em;\n\n/*\n * We also need different units for when trying to do `px` \"equivalents\" when\n * our parent has a different font size.\n */\n$unit-x-large: math.div(1, 30) * 1em;\n$unit-large: math.div(1, 20) * 1em;\n$unit-small: math.div(1, 14) * 1em;\n$unit-x-small: math.div(1, 11) * 1em;\n\n/*\n * We also have a special unit for the react-phone-number-input library, so\n * we can keep its units in line with whatever units we decide to pick\n */\n$unit-rrui: 1em;\n\n/* MARGINS & PADDINGS */\n\n$large-text-margin: 32 * $unit;\n$small-text-margin: 24 * $unit;\n$smaller-text-margin: 16 * $unit;\n$padding-lg: 16 * $unit;\n$padding-sm: 10 * $unit;\n$padding-xs: 8 * $unit;\n\n$sdk-container-max-width: 512 * $unit;\n$footer-height: 40 * $unit;\n$footer-margin: 0 * $unit;\n$navigation-height: 32 * $unit;\n$navigation-height-sm-screen: 38 * $unit;\n$navigation-padding-top: $padding-lg;\n$navigation-padding-sides: $padding-lg;\n$navigation-padding-top-sm-screen: $padding-sm;\n$navigation-padding-sides-sm-screen: $padding-xs;\n\n/* COLORS */\n/*\n *  NOTE: Use rgb() notation instead of rgba() when using Castor basic color tokens.\n *        The CSS color values do not have an opacity value. Only RGB.\n *        Color reverts to browser default on IE11 which flags color value as invalid when rgba() used.\n */\n\n/* Solid colors */\n$color-white: rgb(var(--ods-color-neutral-white));\n$color-black: rgb(var(--ods-color-neutral-black));\n\n$color-icon-temporary: rgb(var(--ods-color-neutral-300));\n$color-divider: rgb(var(--ods-color-neutral-400));\n$color-icons-connector-line: rgb(var(--ods-color-neutral-800));\n\n/* Transparent colors */\n$color-modal-overlay: rgba(0, 0, 0, 0.6);\n$color-camera-overlay: rgba(0, 0, 0, 0.7);\n$color-camera-error-overlay: #1c1f21;\n$color-navbar-gradient-one: rgba(28, 31, 33, 0);\n$color-navbar-gradient-two: rgba(28, 31, 33, 0.35);\n\n/* Doc/Face capture preview \"Enlarge image\" button colors */\n$color-small-button: rgba(15, 37, 54, 0.85);\n$color-small-button-hover: rgba(15, 37, 54, 0.6);\n$color-small-button-active: rgba(15, 37, 54, 0.85);\n\n/* Live Camera Capture screens' Back, Close icon button background is not customisable */\n$color-fullscreen-icon-button-hover: rgb(var(--ods-color-neutral-400));\n$color-fullscreen-icon-button-active: rgb(var(--ods-color-neutral-600));\n\n/* Primary/Secondary Button width variables */\n$lg-btn-width-lg-screen: 272 * $unit-small;\n$lg-btn-width-sm-screen: 100%;\n\n$sm-btn-width-lg-screen: 200 * $unit-small;\n$sm-btn-width-sm-screen: 160 * $unit-small;\n\n/* Modal */\n$modal-animation-duration: 200ms;\n// Export is required for ^ variable to be accessible at React/JS side\n:export {\n  modal_animation_duration: $modal-animation-duration;\n}\n\n%absolute-center {\n  margin: auto;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n\n%overflow-drop-shadow {\n  @media (--shorter-viewport) {\n    background-color: rgb(var(--ods-color-neutral-050));\n    bottom: 0;\n    box-shadow: 0 -5px 10px -5px #7b7b7b;\n    left: -1em;\n    position: absolute;\n    right: -1em;\n    top: -8 * $unit;\n    z-index: 0;\n    /* By default the sibling button will be hidden by this shadow span */\n    + button {\n      z-index: 1;\n    }\n  }\n}\n\n@mixin width-parent-relative($base-width, $parent-width) {\n  width: 100% * math.div($base-width, $parent-width);\n}\n\n%global-margin {\n  margin: 0 $large-text-margin;\n  @media (--small-viewport) {\n    margin: 0 $small-text-margin;\n  }\n  @media (--smaller-viewport) {\n    margin: 0 $smaller-text-margin;\n  }\n}\n\n%global-padding {\n  padding: 0 $large-text-margin;\n  @media (--small-viewport) {\n    padding: 0 $small-text-margin;\n  }\n  @media (--smaller-viewport) {\n    padding: 0 $smaller-text-margin;\n  }\n}\n\n%icon-circle-background {\n  background-color: var(--osdk-color-background-icon);\n  border-radius: 50%;\n}\n\n%header-highlight-pill {\n  border-radius: 14 * $unit-small;\n  background-color: var(--osdk-color-background-info-pill);\n  color: var(--osdk-color-content-info-pill);\n  font-family: inherit;\n  font-size: var(--font-size-small);\n  font-weight: 600;\n  line-height: 24 * $unit-small;\n  padding: 0 14 * $unit-small;\n}\n","@use '../../helpers';\n@use '../../mixins';\n\n@mixin Button() {\n  @if not mixins.includes('Button') {\n    @include _Button();\n  }\n}\n\n@mixin _Button() {\n  $border-width: 1px;\n\n  .ods-button {\n    @include helpers.font('300-regular');\n    @include mixins.interactive();\n\n    align-items: center;\n    appearance: none;\n    background-color: transparent;\n    border: $border-width solid transparent;\n    border-radius: helpers.border-radius('medium');\n    box-sizing: border-box;\n    display: inline-grid;\n    gap: helpers.space(1);\n    grid-auto-flow: column;\n    justify-content: center;\n    padding: helpers.space(1.5) - $border-width helpers.space(3) - $border-width;\n    position: relative;\n    text-decoration: none;\n    width: fit-content;\n\n    > * {\n      box-sizing: inherit;\n    }\n\n    &.-action--primary {\n      background-color: helpers.color('background-action');\n      color: helpers.color('content-on-action');\n\n      &:hover {\n        background-color: helpers.color('background-action-hover');\n      }\n\n      &:active {\n        background-color: helpers.color('background-action-active');\n      }\n    }\n\n    &.-action--secondary {\n      border-color: helpers.color('border-action');\n\n      &:hover,\n      &:active {\n        border-color: helpers.color('border-action-hover');\n      }\n    }\n\n    &.-action--secondary,\n    &.-action--tertiary {\n      color: helpers.color('content-action');\n\n      &:hover {\n        background-color: helpers.color('background-action-subtle-hover');\n      }\n\n      &:active {\n        background-color: helpers.color('background-action-subtle');\n      }\n    }\n\n    &.-action--primary,\n    &.-action--secondary,\n    &.-action--tertiary {\n      @include mixins.with-inner-focus('action', $border-width);\n    }\n\n    &.-destructive--primary {\n      background-color: helpers.color('background-negative');\n      color: helpers.color('content-always-light');\n\n      &:hover {\n        background-color: helpers.color('background-negative-hover');\n      }\n\n      &:active {\n        background-color: helpers.color('background-negative-active');\n      }\n    }\n\n    &.-destructive--secondary {\n      border-color: helpers.color('border-negative');\n    }\n\n    &.-destructive--secondary,\n    &.-destructive--tertiary {\n      color: helpers.color('content-negative');\n\n      &:hover {\n        background-color: helpers.color('background-negative-subtle-hover');\n      }\n\n      &:active {\n        background-color: helpers.color('background-negative-subtle');\n      }\n    }\n\n    &.-destructive--primary,\n    &.-destructive--secondary,\n    &.-destructive--tertiary {\n      @include mixins.with-inner-focus('negative', $border-width);\n    }\n\n    &:disabled {\n      color: helpers.color('content-disabled');\n    }\n\n    &.-action--primary,\n    &.-destructive--primary {\n      &:disabled {\n        background-color: helpers.color('background-disabled');\n      }\n    }\n\n    &.-action--secondary,\n    &.-destructive--secondary {\n      &:disabled {\n        border-color: helpers.color('border-disabled');\n      }\n    }\n\n    &.-action--secondary,\n    &.-action--tertiary,\n    &.-destructive--secondary,\n    &.-destructive--tertiary {\n      &:disabled {\n        background-color: transparent;\n      }\n    }\n  }\n}\n","@use 'sass:list';\n@use 'sass:map';\n@use 'sass:string';\n\n$_allowed-combinations: (\n  '800-bold',\n  '700-bold',\n  '600-bold',\n  '500-bold',\n  '400-bold',\n  '300-bold',\n  '200-bold',\n  '100-bold',\n  '800-regular',\n  '700-regular',\n  '600-regular',\n  '500-regular',\n  '400-regular',\n  '300-regular',\n  '200-regular',\n  '100-regular',\n  '800-light',\n  '700-light',\n  '600-light',\n  '500-light',\n  '400-allcaps',\n  '300-allcaps',\n  '200-allcaps',\n  '100-allcaps',\n  '400-mono',\n  '300-mono',\n  '200-mono'\n);\n\n$_sizes: (\n  '800': (\n    font-size: 3.375rem,\n    line-height: 4rem,\n  ),\n  '700': (\n    font-size: 2.875rem,\n    line-height: 3.5rem,\n  ),\n  '600': (\n    font-size: 1.875rem,\n    line-height: 2.5rem,\n  ),\n  '500': (\n    font-size: 1.5rem,\n    line-height: 2rem,\n  ),\n  '400': (\n    font-size: 1.25rem,\n    line-height: 1.5rem,\n  ),\n  '300': (\n    font-size: 1rem,\n    line-height: 1.5rem,\n  ),\n  '200': (\n    font-size: 0.875rem,\n    line-height: 1.5rem,\n  ),\n  '100': (\n    font-size: 0.75rem,\n    line-height: 1rem,\n  ),\n);\n\n$_types: (\n  'bold': (\n    font-weight: 500,\n  ),\n  'regular': (\n    font-weight: 400,\n  ),\n  'light': (\n    font-weight: 300,\n  ),\n  'allcaps': (\n    text-transform: uppercase,\n  ),\n  'mono': (\n    font-family: string.unquote('\"Roboto Mono\", Consolas, Menlo, monospace'),\n  ),\n);\n\n@mixin font($name) {\n  @if not list.index($_allowed-combinations, $name) {\n    @error 'Font token not supported: #{$name}';\n  }\n\n  $styles: ();\n\n  @if $name {\n    $separator-index: string.index($name, '-');\n\n    $size-key: string.slice($name, 1, $separator-index - 1);\n    $size-styles: map.get($_sizes, $size-key);\n    $styles: map.merge($styles, $size-styles);\n\n    $type-key: string.slice($name, $separator-index + 1);\n    $type-styles: map.get($_types, $type-key);\n    $styles: map.merge($styles, $type-styles);\n  }\n\n  font-family: _get-or-default($styles, font-family, inherit);\n  font-size: _get-or-default($styles, font-size, initial);\n  font-weight: _get-or-default($styles, font-weight, initial);\n  line-height: _get-or-default($styles, line-height, initial);\n  text-transform: _get-or-default($styles, text-transform, none);\n}\n\n@function _get-or-default($map, $key, $default) {\n  @if map.has-key($map, $key) {\n    @return map.get($map, $key);\n  }\n\n  @return $default;\n}\n","@use './wrap-if' as mixins;\n\n@mixin interactive($target: null) {\n  @include mixins.wrap-if($target) {\n    cursor: pointer;\n    user-select: none;\n  }\n\n  &.-disabled #{$target},\n  &:disabled #{$target} {\n    cursor: not-allowed;\n  }\n}\n","@use 'sass:list';\n@use '../helpers';\n@use './wrap-if' as mixins;\n\n$_allowed-types: ('action', 'negative');\n\n$_spread: 4px;\n$_inner-size: 1px;\n$_color-size: $_spread - $_inner-size;\n\n$_max-border-width: $_color-size; // when max, border used instead of color line\n\n@mixin with-inner-focus($type, $border-width: 0, $target: null) {\n  @if not list.index($_allowed-types, $type) {\n    @error '$type must be one of (#{$_allowed-types})';\n  }\n\n  @if type-of($border-width) != number {\n    @error '$border-width must be a number';\n  }\n  @if $border-width < 0 or $border-width > $_max-border-width {\n    @error '$border-width must be between 0 and #{$_max-border-width}';\n  }\n\n  $inner-spread: $_spread - $border-width;\n  $color-spread: $inner-spread - $_inner-size;\n\n  $inner-line: inset 0 0 0 $inner-spread helpers.color('border-focus-inner');\n  $color-line: inset 0 0 0 $color-spread helpers.color('border-#{$type}-focus');\n\n  @include mixins.wrap-if($target) {\n    outline: none;\n  }\n\n  &:focus #{$target} {\n    box-shadow: $color-line, $inner-line;\n\n    @if $border-width > 0 {\n      border-color: helpers.color('border-#{$type}-focus');\n    }\n  }\n}\n","@use '~@onfido/castor';\n@use './tokens' as onfidoSdk;\n@import './constants';\n\n:global {\n  @include castor.Button();\n\n  .ods-button {\n    border-radius: var(--osdk-border-radius-button);\n\n    /* stylelint-disable-next-line selector-class-pattern */\n    &.-action--primary {\n      background-color: var(--osdk-color-background-button-primary);\n      color: var(--osdk-color-content-button-primary-text);\n      border-color: var(--osdk-color-border-button-primary);\n\n      &:active {\n        background-color: var(--osdk-color-background-button-primary-active);\n      }\n\n      &:hover {\n        background-color: var(--osdk-color-background-button-primary-hover);\n      }\n\n      &:disabled {\n        background-color: rgba(var(--ods-color-neutral-300));\n        border-color: transparent;\n      }\n    }\n\n    /* stylelint-disable-next-line selector-class-pattern */\n    &.-action--secondary {\n      background-color: var(--osdk-color-background-button-secondary);\n      color: var(--osdk-color-content-button-secondary-text);\n      border-color: var(--osdk-color-border-button-secondary);\n\n      &:active {\n        background-color: var(--osdk-color-background-button-secondary-active);\n        border-color: var(--osdk-color-border-button-secondary);\n      }\n\n      &:hover {\n        background-color: var(--osdk-color-background-button-secondary-hover);\n        border-color: var(--osdk-color-border-button-secondary);\n      }\n    }\n  }\n}\n\n:root {\n  @include castor.day();\n  @include onfidoSdk.tokens();\n}\n\n.step {\n  width: 100%;\n  min-height: 100%;\n  height: 0; /*necessary for IE11, see: https://stackoverflow.com/questions/24396205/flex-grow-not-working-in-internet-explorer-11-0*/\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\n.fullScreenStep {\n  overflow: hidden;\n  border-radius: 8 * $unit;\n  background: $color-black;\n}\n\n.fullHeightContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 100%;\n}\n\n.fullHeightMobileContainer {\n  @media (--small-viewport) {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    width: 100%;\n  }\n}\n\n.navigationBar {\n  flex: 0 0 auto;\n}\n\n.content {\n  /* Content height is 100% - non content height (total height of footer + total height of navbar) */\n  $non-content-height: $footer-height + $footer-margin + $navigation-height +\n    $navigation-padding-top;\n  height: calc(100% - #{$non-content-height});\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: none;\n  @media (--small-viewport) {\n    $non-content-height: $footer-height + $footer-margin +\n      $navigation-height-sm-screen + $navigation-padding-top-sm-screen;\n    height: calc(100% - #{$non-content-height});\n  }\n\n  > * {\n    @extend %global-padding;\n    flex-grow: 1;\n  }\n}\n\n.scrollableContent {\n  flex: 1 1 auto; /* .content will fit remaining space */\n  overflow: auto; /* scrollbar will only appear when child element exceeds .content height */\n  height: 100%;\n}\n\n.fullScreenContentWrapper {\n  position: static;\n}\n\n.actionsContainer {\n  margin-top: 8 * $unit;\n  flex-grow: 0;\n}\n\n$footer-top-margin: 0 * $unit;\n$cobrand-logo-width: 80 * $unit;\n$logo-height: 32 * $unit;\n\n%_logo {\n  height: $logo-height;\n  background-size: contain;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\n.cobrandFooter {\n  display: flex;\n  height: $footer-height;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  margin: $footer-top-margin $large-text-margin 0;\n  @media (--small-viewport) {\n    margin: $footer-top-margin $small-text-margin 0;\n  }\n  @media (--smaller-viewport) {\n    margin: $footer-top-margin $smaller-text-margin 0;\n  }\n\n  .cobrandLabel {\n    color: rgba(var(--ods-color-neutral-700));\n    font-size: 10 * $unit;\n    display: flex;\n    flex-direction: row;\n    max-width: 80%;\n\n    /* if \"XXX powered by Onfido\" exceeds the allowed space (with paddings on both sides of the screen), */\n    /* then XXX should by truncated */\n    .cobrandText {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-right: 5 * $unit; /* space between XXX and \" powered by\" text */\n      flex-grow: 1;\n    }\n\n    .poweredBy {\n      flex-shrink: 0;\n    }\n\n    .fullScreenStep & {\n      color: $color-white;\n      z-index: 0; /* to make the text visible, otherwise it is hidden by overlay */\n    }\n  }\n\n  .logoCobrandImage {\n    @extend %_logo;\n    width: $cobrand-logo-width;\n    margin-top: 0;\n    flex: 0 0 auto;\n    background-image: var(--osdk-dark-cobrand-logo-src);\n\n    .fullScreenStep.logoCobrandImage & {\n      background-image: var(--osdk-light-cobrand-logo-src);\n      width: $cobrand-logo-width;\n      margin-top: 0;\n      z-index: 0; /* to make the logo visible, otherwise it is hidden by overlay */\n    }\n  }\n\n  .logo {\n    @extend %_logo;\n    background-image: url('./assets/onfido-logo.svg');\n    width: $cobrand-logo-width;\n    margin-top: 0;\n    flex: 0 0 auto;\n\n    .fullScreenStep.onfidoCobrandLogo & {\n      background-image: url('./assets/onfido-logo-light.svg');\n      width: $cobrand-logo-width;\n      margin-top: 0;\n      z-index: 0; /* to make the logo visible, otherwise it is hidden by overlay */\n    }\n  }\n}\n\n.footer {\n  width: 100%;\n  height: $footer-height;\n  flex: 0 0 auto;\n\n  .fullScreenStep & {\n    z-index: 1;\n  }\n\n  .logo {\n    @extend %_logo;\n    margin-top: $footer-height - $logo-height;\n\n    .defaultLogo & {\n      background-image: url('./assets/watermark.svg');\n    }\n\n    .fullScreenStep.defaultLogo & {\n      /* A full screen step will be a video/stream step, with a darker background */\n      background-image: url('./assets/watermark_night.svg');\n    }\n\n    .noLogo & {\n      background-image: none;\n    }\n  }\n}\n\n.center {\n  text-align: center;\n}\n\n.alignTextLeft {\n  text-align: left;\n}\n\n.iconContainer {\n  height: auto;\n  width: 100%;\n  flex: 2 1 16 * $unit;\n  min-height: 16 * $unit;\n  max-height: 144 * $unit;\n  margin: auto;\n}\n\n.icon {\n  display: block;\n  background-repeat: no-repeat;\n  background-position: center;\n  height: 64 * $unit;\n}\n\n/* Header Pill element in Camera Permission Recovery, Cross Device Connected screens */\n.header {\n  @extend %header-highlight-pill;\n  position: absolute;\n  margin-top: -10 * $unit-small;\n  margin-left: 10 * $unit-small;\n}\n\n/* Cross Device Connected screen Tips info box */\n.help {\n  padding: 24 * $unit 16 * $unit 16 * $unit;\n  text-align: left;\n  box-shadow: inset 0 0 0 1 * $unit var(--osdk-color-border-surface-modal);\n  border-radius: 8 * $unit;\n  margin-bottom: 24 * $unit;\n}\n\n.helpList {\n  margin: 0;\n  padding-left: 24 * $unit;\n}\n\n.link,\n.textButton {\n  font-family: var(--osdk-font-family-body);\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-bottom-color: var(--osdk-color-border-link-underline);\n  background-color: transparent;\n  color: var(--osdk-color-content-body);\n\n  &:not(:disabled) {\n    &:hover {\n      background-color: var(--osdk-color-background-link-hover);\n      color: var(--osdk-color-content-link-text-hover);\n    }\n\n    &:active {\n      background-color: var(--osdk-color-background-link-active);\n      color: var(--osdk-color-content-link-text-hover);\n    }\n  }\n}\n\n.link:visited {\n  text-decoration: none;\n  color: var(--osdk-color-content-body);\n}\n\n.link,\n.textButton {\n  cursor: pointer;\n  font-size: var(--font-size-small);\n  line-height: 1.43;\n  margin: auto;\n  padding: 2px;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n/* Link/Text Button for Live Doc/Face Capture fallback on Warning popup */\n.warningFallbackButton {\n  color: var(--osdk-color-content-alert-info);\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-bottom-color: var(--osdk-color-content-alert-info);\n\n  &:hover {\n    background-color: var(--osdk-color-background-alert-info-link-hover);\n  }\n\n  &:active {\n    background-color: var(--osdk-color-background-alert-info-link-active);\n  }\n}\n\n/* Basic camera fallback for \"Camera not working\" Error popup */\n.errorFallbackButton,\n.error {\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-bottom-color: var(--osdk-color-content-alert-error);\n\n  &:hover,\n  &:active {\n    color: var(--osdk-color-content-alert-error);\n  }\n\n  &:hover {\n    background-color: var(--osdk-color-background-alert-error-link-hover);\n  }\n\n  &:active {\n    background-color: var(--osdk-color-background-alert-error-link-active);\n  }\n}\n\n.button-centered {\n  margin: auto;\n}\n\n.button-lg {\n  font-size: var(--font-size-small);\n  width: $lg-btn-width-lg-screen;\n  @media (--small-viewport) {\n    width: $lg-btn-width-sm-screen;\n  }\n}\n\n.button-sm {\n  font-size: var(--font-size-small);\n  width: $sm-btn-width-lg-screen;\n  @media (--small-viewport) {\n    width: $sm-btn-width-sm-screen;\n  }\n\n  &.vertical {\n    width: $lg-btn-width-lg-screen;\n  }\n}\n\n/* Modal */\n\n.portal > * {\n  // When the modal is closed, overlay div has no css class\n  // This selector should be overridden by the `&--after-open` class below\n  opacity: 0;\n}\n\n.modalBody {\n  /*! Just a placeholder no namespace this element using css modules*/\n}\n\n.modalOverlay {\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  background-color: $color-modal-overlay;\n  transition: opacity $modal-animation-duration,\n    z-index 0s $modal-animation-duration;\n\n  &--after-open {\n    opacity: 1;\n  }\n\n  &--before-close {\n    opacity: 0;\n  }\n}\n\n.modalInner {\n  .portal & {\n    z-index: -1;\n    opacity: 0;\n    transition: opacity $modal-animation-duration,\n      z-index 0s $modal-animation-duration;\n  }\n\n  .modalOverlay--after-open & {\n    z-index: 100;\n    opacity: 1;\n    transition: opacity $modal-animation-duration;\n  }\n}\n","// token generation by Theo (https://github.com/salesforce-ux/theo)\n// edit `tokens.json` instead\n\n@mixin tokens() {\n  --ods-transition-duration: 0.15s;\n  --ods-border-radius-small: 2px;\n  --ods-border-radius-medium: 4px;\n  --ods-border-radius-large: 8px;\n  --ods-border-radius-full: 100vw;\n  --ods-color-neutral-900: 30, 30, 36;\n  --ods-color-neutral-800: 43, 45, 51;\n  --ods-color-neutral-700: 99, 102, 112;\n  --ods-color-neutral-600: 130, 136, 147;\n  --ods-color-neutral-500: 180, 186, 197;\n  --ods-color-neutral-400: 213, 218, 224;\n  --ods-color-neutral-300: 233, 236, 240;\n  --ods-color-neutral-200: 247, 249, 250;\n  --ods-color-neutral-050: 252, 252, 253;\n  --ods-color-neutral-white: 255, 255, 255;\n  --ods-color-neutral-black: 0, 0, 0;\n  --ods-color-primary-700: 28, 19, 101;\n  --ods-color-primary-600: 35, 42, 173;\n  --ods-color-primary-500: 54, 64, 245;\n  --ods-color-primary-400: 92, 108, 255;\n  --ods-color-primary-300: 130, 143, 255;\n  --ods-color-primary-200: 189, 195, 255;\n  --ods-color-primary-100: 235, 237, 255;\n  --ods-color-primary-050: 245, 246, 255;\n  --ods-color-primary-muted-600: 101, 105, 160;\n  --ods-color-primary-muted-300: 149, 185, 255;\n  --ods-color-accent-1-600: 255, 100, 100;\n  --ods-color-accent-1-500: 255, 137, 125;\n  --ods-color-accent-1-400: 255, 172, 163;\n  --ods-color-accent-2-600: 249, 178, 20;\n  --ods-color-accent-2-500: 255, 221, 84;\n  --ods-color-accent-2-400: 255, 236, 112;\n  --ods-color-accent-3-600: 129, 35, 173;\n  --ods-color-accent-3-500: 175, 95, 239;\n  --ods-color-accent-3-400: 222, 189, 255;\n  --ods-color-success-600: 0, 107, 36;\n  --ods-color-success-500: 5, 125, 39;\n  --ods-color-success-400: 21, 179, 18;\n  --ods-color-success-300: 81, 209, 123;\n  --ods-color-success-200: 157, 239, 184;\n  --ods-color-success-100: 203, 248, 218;\n  --ods-color-success-050: 236, 253, 241;\n  --ods-color-success-vivid-300: 145, 232, 123;\n  --ods-color-success-muted-500: 108, 137, 94;\n  --ods-color-success-muted-300: 137, 211, 163;\n  --ods-color-info-700: 28, 19, 101;\n  --ods-color-info-600: 35, 42, 173;\n  --ods-color-info-500: 54, 64, 245;\n  --ods-color-info-400: 92, 108, 255;\n  --ods-color-info-300: 130, 143, 255;\n  --ods-color-info-200: 189, 195, 255;\n  --ods-color-info-100: 235, 237, 255;\n  --ods-color-info-050: 245, 246, 255;\n  --ods-color-info-muted-600: 101, 105, 160;\n  --ods-color-info-muted-300: 149, 185, 255;\n  --ods-color-warning-600: 158, 75, 8;\n  --ods-color-warning-500: 196, 107, 4;\n  --ods-color-warning-400: 227, 133, 25;\n  --ods-color-warning-300: 251, 194, 127;\n  --ods-color-warning-200: 250, 218, 181;\n  --ods-color-warning-100: 253, 237, 219;\n  --ods-color-warning-050: 255, 245, 235;\n  --ods-color-warning-vivid-300: 253, 168, 70;\n  --ods-color-warning-muted-500: 150, 125, 96;\n  --ods-color-warning-muted-300: 235, 193, 144;\n  --ods-color-error-600: 170, 0, 0;\n  --ods-color-error-500: 195, 47, 47;\n  --ods-color-error-400: 245, 78, 78;\n  --ods-color-error-300: 252, 123, 123;\n  --ods-color-error-200: 255, 185, 185;\n  --ods-color-error-100: 252, 229, 229;\n  --ods-color-error-050: 255, 246, 246;\n  --ods-color-error-muted-500: 152, 93, 97;\n  --ods-color-error-muted-300: 239, 169, 169;\n}\n","// theme generation by Theo (https://github.com/salesforce-ux/theo)\n// edit `$$THEME.json` instead\n\n@use '../theme' as castor;\n\n@mixin day($types...) {\n  @include castor.theme('day', $types...) {\n    color-scheme: light;\n\n    --ods-color-content-main: var(--ods-color-neutral-800), 1;\n    --ods-color-content-secondary: var(--ods-color-neutral-700), 1;\n    --ods-color-content-action: var(--ods-color-primary-500), 1;\n    --ods-color-content-placeholder: var(--ods-color-neutral-600), 1;\n    --ods-color-content-disabled: var(--ods-color-neutral-600), 1;\n    --ods-color-content-link: var(--ods-color-primary-500), 1;\n    --ods-color-content-link-hover: var(--ods-color-primary-600), 1;\n    --ods-color-content-link-visited: var(--ods-color-accent-3-600), 1;\n    --ods-color-content-negative: var(--ods-color-error-500), 1;\n    --ods-color-content-warning: var(--ods-color-warning-600), 1;\n    --ods-color-content-positive: var(--ods-color-success-500), 1;\n    --ods-color-content-info: var(--ods-color-info-500), 1;\n    --ods-color-content-spinner: var(--ods-color-neutral-700), 1;\n    --ods-color-content-logo: var(--ods-color-primary-500), 1;\n    --ods-color-content-inverse-main: var(--ods-color-neutral-200), 1;\n    --ods-color-content-inverse-secondary: var(--ods-color-neutral-400), 1;\n    --ods-color-content-on-action: var(--ods-color-neutral-200), 1;\n    --ods-color-content-on-inverse-action: var(--ods-color-primary-500), 1;\n    --ods-color-content-always-light: var(--ods-color-neutral-200), 1;\n    --ods-color-content-always-dark: var(--ods-color-neutral-800), 1;\n    --ods-color-background-main: var(--ods-color-neutral-200), 1;\n    --ods-color-background-surface: var(--ods-color-neutral-050), 1;\n    --ods-color-background-surface-alt: var(--ods-color-neutral-300), 1;\n    --ods-color-background-action: var(--ods-color-primary-500), 1;\n    --ods-color-background-action-hover: var(--ods-color-primary-400), 1;\n    --ods-color-background-action-active: var(--ods-color-primary-600), 1;\n    --ods-color-background-action-subtle: var(--ods-color-primary-500), 0.1;\n    --ods-color-background-action-subtle-hover: var(--ods-color-primary-500), 0.05;\n    --ods-color-background-disabled: var(--ods-color-neutral-300), 1;\n    --ods-color-background-negative: var(--ods-color-error-500), 1;\n    --ods-color-background-negative-hover: var(--ods-color-error-400), 1;\n    --ods-color-background-negative-active: var(--ods-color-error-600), 1;\n    --ods-color-background-negative-subtle: var(--ods-color-error-500), 0.1;\n    --ods-color-background-negative-subtle-hover: var(--ods-color-error-500), 0.05;\n    --ods-color-background-warning: var(--ods-color-warning-400), 1;\n    --ods-color-background-warning-subtle: var(--ods-color-warning-400), 0.1;\n    --ods-color-background-positive: var(--ods-color-success-400), 1;\n    --ods-color-background-positive-subtle: var(--ods-color-success-400), 0.1;\n    --ods-color-background-info: var(--ods-color-info-500), 1;\n    --ods-color-background-info-subtle: var(--ods-color-info-500), 0.1;\n    --ods-color-background-input: var(--ods-color-neutral-050), 1;\n    --ods-color-background-input-selected: var(--ods-color-primary-500), 1;\n    --ods-color-background-spinner: var(--ods-color-neutral-700), 0.15;\n    --ods-color-background-overlay: var(--ods-color-neutral-black), 0.8;\n    --ods-color-background-overlay-subtle: var(--ods-color-neutral-black), 0.5;\n    --ods-color-background-inverse-main: var(--ods-color-neutral-900), 1;\n    --ods-color-background-inverse-surface: var(--ods-color-neutral-800), 1;\n    --ods-color-background-inverse-action: var(--ods-color-neutral-white), 1;\n    --ods-color-border-separator: var(--ods-color-neutral-300), 1;\n    --ods-color-border-input: var(--ods-color-neutral-600), 1;\n    --ods-color-border-input-hover: var(--ods-color-neutral-700), 1;\n    --ods-color-border-action: var(--ods-color-primary-500), 1;\n    --ods-color-border-action-hover: var(--ods-color-primary-400), 1;\n    --ods-color-border-action-subtle: var(--ods-color-primary-200), 1;\n    --ods-color-border-disabled: var(--ods-color-neutral-300), 1;\n    --ods-color-border-negative: var(--ods-color-error-500), 1;\n    --ods-color-border-negative-subtle: var(--ods-color-error-200), 1;\n    --ods-color-border-warning: var(--ods-color-warning-400), 1;\n    --ods-color-border-warning-subtle: var(--ods-color-warning-muted-300), 1;\n    --ods-color-border-positive: var(--ods-color-success-500), 1;\n    --ods-color-border-positive-subtle: var(--ods-color-success-muted-300), 1;\n    --ods-color-border-info: var(--ods-color-info-500), 1;\n    --ods-color-border-info-subtle: var(--ods-color-info-200), 1;\n    --ods-color-border-input-selected: var(--ods-color-primary-500), 1;\n    --ods-color-border-focus-inner: var(--ods-color-neutral-white), 1;\n    --ods-color-border-action-focus: var(--ods-color-primary-600), 1;\n    --ods-color-border-negative-focus: var(--ods-color-error-600), 1;\n    --ods-color-border-inverse-action: var(--ods-color-neutral-white), 1;\n  }\n}\n","/*\n *  NOTE on CSS variable prefix naming convention & Castor DS token mappings:\n *\n *  1) Supported SDK customisation options = CSS variables with --osdk- prefix.\n *     Anything without --osdk- prefix is not officially supported but is here as this is the single source for tokens.\n *\n *  2) Castor theme tokens = CSS variables with --ods- prefix.\n *\n *  Wherever it makes sense for color token mappings, the relevant Day theme design tokens from Castor should be used.\n *  See the Castor Day theme file for available tokens:\n *  https://github.com/onfido/castor/blob/main/packages/core/src/theme/themes/day.scss\n *  Where it does not, the basic color token, e.g. --ods-color-primary-500, should be used instead.\n *\n * Colors in theme color palette are RGB values but some also add a alpha level (opacity),\n * so all color related CSS variables must be wrapped with rgba(), e.g. rgba((var(--castor-color-theme-token))).\n *\n * If using Castor basic color tokens, use the rgb() notation instead of rgba() notation.\n * The CSS color values do not have an opacity value. Only RGB.\n * Color reverts to browser default on IE11 which flags color value as invalid when rgba() used.\n */\n\n/* stylelint-disable function-parentheses-space-inside */\n\n@mixin tokens() {\n  --unit: (1/16) * 1em;\n\n  /* Font settings */\n  --font-family: 'Open Sans', sans-serif;\n\n  --font-size-base: calc(16 * var(--unit));\n  --font-size-large: calc(20 * var(--unit));\n  --font-size-x-large: calc(30 * var(--unit));\n  --font-size-small: calc(14 * var(--unit));\n  --font-size-x-small: calc(11 * var(--unit));\n\n  /* Tokens that don't support customisation */\n  --color-background-button-custom: #d5dae0;\n\n  /* Tokens that support customisation */\n  --osdk-font-family-title: var(--font-family);\n  --osdk-font-size-title: var(--font-size-x-large);\n  --osdk-font-weight-title: 600;\n  --osdk-color-content-title: rgba(var(--ods-color-content-main));\n\n  --osdk-font-family-subtitle: var(--font-family);\n  --osdk-font-size-subtitle: var(--font-size-base);\n  --osdk-font-weight-subtitle: 600;\n  --osdk-color-content-subtitle: rgba(var(--ods-color-content-main));\n\n  --osdk-font-family-body: var(--font-family);\n  --osdk-font-size-body: var(--font-size-base);\n  --osdk-font-weight-body: 500;\n  --osdk-color-content-body: rgba(var(--ods-color-content-main));\n\n  /* Modal (SDK Container) */\n  --osdk-color-background-surface-modal: rgba(\n    var(--ods-color-background-surface)\n  );\n  --osdk-color-border-surface-modal: rgb(var(--ods-color-neutral-600));\n  --osdk-border-width-surface-modal: 1px;\n  --osdk-border-style-surface-modal: solid;\n  --osdk-border-radius-surface-modal: var(--ods-border-radius-large);\n\n  /* Warning/Info Message */\n  --osdk-color-background-alert-info: rgb(var(--ods-color-primary-500));\n\n  /* Warning/Info Message - fallback link */\n  --osdk-color-content-alert-info: rgba(var(--ods-color-content-inverse-main));\n  --osdk-color-background-alert-info-link-hover: rgba(\n    var(--ods-color-background-action-hover)\n  );\n  --osdk-color-background-alert-info-link-active: rgba(\n    var(--ods-color-background-action-active)\n  );\n\n  /* Error Message */\n  --osdk-color-background-alert-error: rgba(\n    var(--ods-color-background-negative)\n  );\n  --osdk-color-content-alert-error: rgba(var(--ods-color-content-inverse-main));\n\n  /* Error Message - fallback link */\n  --osdk-color-background-alert-error-link-hover: rgba(\n    var(--ods-color-background-negative-hover)\n  );\n  --osdk-color-background-alert-error-link-active: rgba(\n    var(--ods-color-background-negative-active)\n  );\n\n  /* Icon background circle color */\n  --osdk-color-background-icon: rgba(var(--ods-color-background-surface-alt));\n\n  /* Primary Button customisations */\n  --osdk-color-content-button-primary-text: rgba(\n    var(--ods-color-content-on-action)\n  );\n\n  --osdk-color-background-button-primary: rgba(\n    var(--ods-color-background-action)\n  );\n  --osdk-color-background-button-primary-hover: rgba(\n    var(--ods-color-background-action-hover)\n  );\n  --osdk-color-background-button-primary-active: rgba(\n    var(--ods-color-background-action-active)\n  );\n\n  --osdk-color-border-button-primary: rgba(var(--ods-color-border-action));\n\n  /* Secondary Button customisations */\n  --osdk-color-content-button-secondary-text: rgba(\n    var(--ods-color-content-action)\n  );\n\n  --osdk-color-background-button-secondary: transparent;\n  --osdk-color-background-button-secondary-hover: rgba(\n    var(--ods-color-background-action-subtle-hover)\n  );\n  --osdk-color-background-button-secondary-active: rgba(\n    var(--ods-color-background-action-subtle)\n  );\n\n  --osdk-color-border-button-secondary: rgba(var(--ods-color-border-action));\n\n  /* Button group customisations */\n  --osdk-border-radius-button: var(--ods-border-radius-medium);\n  --osdk-button-group-stacked: false;\n\n  /* Document Type Selectors option button colors */\n  --osdk-color-content-doc-type-button: var(--osdk-color-content-body);\n  --osdk-color-background-doc-type-button: rgb(var(--ods-color-neutral-white));\n\n  --osdk-color-border-doc-type-button: rgba(var(--ods-color-border-input));\n  --osdk-color-border-doc-type-button-hover: rgba(\n    var(--ods-color-border-action-hover)\n  );\n  --osdk-color-border-doc-type-button-active: rgba(\n    var(--ods-color-border-action-focus)\n  );\n\n  /* Back, Close (modal) icon button colors */\n  --osdk-color-background-button-icon-hover: rgb(var(--ods-color-neutral-400));\n  --osdk-color-background-button-icon-active: rgb(var(--ods-color-neutral-600));\n\n  /* Selfie Camera button colors */\n  --color-background-button-camera: rgb(var(--ods-color-neutral-white));\n  --osdk-color-background-button-camera-hover: rgb(\n    var(--ods-color-primary-400)\n  );\n  --osdk-color-background-button-camera-active: rgb(\n    var(--ods-color-primary-600)\n  );\n\n  /* Link colors */\n  --osdk-color-border-link-underline: rgba(var(--ods-color-border-action));\n  --osdk-color-content-link-text-hover: rgba(\n    var(--ods-color-content-on-action)\n  );\n  --osdk-color-background-link-hover: rgba(\n    var(--ods-color-background-action-hover)\n  );\n  --osdk-color-background-link-active: rgba(\n    var(--ods-color-background-action-active)\n  );\n\n  /* Header/Highlight Pills */\n  --osdk-color-background-info-pill: rgba(var(--ods-color-background-info));\n  --osdk-color-content-info-pill: rgba(var(--ods-color-content-inverse-main));\n}\n\n/* stylelint-enable function-parentheses-space-inside */\n","@use 'sass:list';\n@use '../mixins';\n@use './tokens' as castor;\n\n// ...$types: 'class' | 'raw';\n@mixin theme($name, $types...) {\n  $class: list.index($types, 'class');\n  $raw: list.index($types, 'raw');\n\n  $selector: if($class, '.castor-theme--#{$name}', null);\n\n  @include mixins.wrap-if($selector) {\n    @if not $raw {\n      @include castor.tokens();\n    }\n\n    @content;\n\n    @media (prefers-reduced-motion) {\n      --ods-transition-duration: 0s;\n    }\n  }\n}\n","@import '../Theme/constants';\n\n.navigation {\n  $navigation-all-padding: $navigation-padding-top $navigation-padding-sides 0;\n  height: $navigation-height;\n  padding: $navigation-all-padding;\n  text-align: left;\n  box-sizing: content-box;\n  @media (--small-viewport) {\n    $navigation-all-padding: $navigation-padding-top-sm-screen\n      $navigation-padding-sides-sm-screen 0;\n    height: $navigation-height-sm-screen;\n    padding: $navigation-all-padding;\n  }\n}\n\n.back {\n  height: 32 * $unit;\n  color: var(--osdk-color-content-body);\n  padding: 0;\n  font-size: inherit;\n  font-family: var(--osdk-font-family-body);\n  line-height: 1;\n  border: 0;\n  background-color: transparent;\n  cursor: pointer;\n\n  @media (--small-viewport) {\n    width: auto;\n  }\n}\n\n.iconBack {\n  height: 32 * $unit;\n  width: 32 * $unit;\n  background-image: url('./assets/back-black.svg');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  background-color: transparent;\n  border-radius: 16 * $unit;\n  display: inline-block;\n  vertical-align: middle;\n}\n\n.fullScreenNav {\n  /* stylelint-disable function-parentheses-space-inside */\n  background: linear-gradient(\n    0deg,\n    $color-navbar-gradient-one 0%,\n    $color-navbar-gradient-two 100%\n  );\n  /* stylelint-enable function-parentheses-space-inside */\n  z-index: 3;\n\n  .backHoverDesktop {\n    &:hover {\n      .iconBack {\n        background-image: url('./assets/back-black.svg');\n        background-color: $color-fullscreen-icon-button-hover;\n      }\n    }\n  }\n\n  .back {\n    color: $color-white;\n\n    &:active {\n      background-image: url('./assets/back-black.svg');\n\n      .iconBack {\n        background-color: $color-fullscreen-icon-button-active;\n      }\n    }\n  }\n\n  .iconBack {\n    background-image: url('./assets/back-white.svg');\n  }\n}\n\n.backHoverDesktop {\n  &:hover,\n  &:focus {\n    .label {\n      visibility: visible;\n    }\n  }\n\n  &:hover {\n    .iconBack {\n      background-color: var(--osdk-color-background-button-icon-hover);\n    }\n  }\n\n  &:active {\n    .iconBack {\n      background-color: var(--osdk-color-background-button-icon-active);\n    }\n  }\n}\n\n.disabled {\n  display: none;\n}\n\n.label {\n  visibility: hidden;\n  margin: 0 7 * $unit;\n  font-size: var(--font-size-small);\n\n  @media (--small-viewport) {\n    display: none;\n  }\n}\n","@import '../Theme/constants';\n\n.loader {\n  @extend %absolute-center;\n\n  width: 48 * $unit;\n  height: 48 * $unit;\n  outline: none;\n  padding: 0;\n}\n\n@keyframes ball-scale-ripple-multiple {\n  0% {\n    transform: scale(0.1);\n    opacity: 1;\n  }\n\n  70% {\n    transform: scale(1);\n    opacity: 0.7;\n  }\n\n  100% {\n    opacity: 0;\n  }\n}\n\n.inner {\n  position: relative;\n  transform: translateX(25 * $unit);\n\n  > div:nth-child(0) {\n    animation-delay: -0.8s;\n  }\n\n  > div:nth-child(1) {\n    animation-delay: -0.6s;\n  }\n\n  > div:nth-child(2) {\n    animation-delay: -0.4s;\n  }\n\n  > div:nth-child(3) {\n    animation-delay: -0.2s;\n  }\n\n  > div {\n    animation-fill-mode: both;\n    position: absolute;\n    top: -2 * $unit;\n    left: -26 * $unit;\n    width: 50 * $unit;\n    height: 50 * $unit;\n    border-radius: 100%;\n    border: 2 * $unit solid #ccc;\n    animation: ball-scale-ripple-multiple 1.25s 0s infinite\n      cubic-bezier(0.21, 0.53, 0.56, 0.8);\n  }\n}\n","@import '../Theme/constants';\n\n.title {\n  color: var(--osdk-color-content-title);\n  font-family: var(--osdk-font-family-title);\n  font-weight: var(--osdk-font-weight-title);\n  margin-bottom: 16 * $unit;\n}\n\n.titleSpan {\n  font-size: var(--osdk-font-size-title);\n  line-height: 1.34;\n  @media (--small-viewport) {\n    font-size: 24 * $unit;\n  }\n}\n\n.titleSpan:focus {\n  outline: none;\n}\n\n.subTitle {\n  color: var(--osdk-color-content-subtitle);\n  font-size: var(--osdk-font-size-subtitle);\n  font-family: var(--osdk-font-family-subtitle);\n  font-weight: var(--osdk-font-weight-subtitle);\n}\n\n.titleWrapper {\n  margin: 32 * $unit 0 16 * $unit;\n  flex-shrink: 0;\n\n  // To fix Safari flexbox rendering issue by forcing the div to be rendered in a new composite layer,\n  // see https://stackoverflow.com/questions/65524383/flexbox-bug-on-safari -> https://stackoverflow.com/questions/19169089/weird-css-stretching-issue-in-ios7-safari-and-chrome\n  transform: translateZ(0);\n\n  @media (--small-viewport) {\n    margin: 0 0 16 * $unit;\n  }\n}\n\n.smaller {\n  margin-top: 0;\n}\n\n.fullScreen {\n  color: $color-white;\n  margin: 0;\n  z-index: 1;\n\n  .title,\n  .subTitle {\n    color: $color-white;\n  }\n\n  .title {\n    margin-bottom: 8 * $unit;\n  }\n\n  .titleSpan {\n    font-size: var(--font-size-base);\n    line-height: 1.5;\n  }\n}\n","@import '../Theme/constants';\n\n%_icon {\n  height: 144 * $unit;\n  width: 144 * $unit;\n  background-size: contain;\n  margin-top: 56 * $unit;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.genericErrorIcon {\n  @extend %icon-circle-background;\n  @extend %_icon;\n  background-image: url('./assets/connection-error-large.svg');\n}\n\n.flowInterruptedIcon {\n  @extend %icon-circle-background;\n  @extend %_icon;\n  background-image: url('./assets/interrupted-flow.svg');\n}\n\n.unsupportedBrowserIcon {\n  @extend %_icon;\n  background-image: url('./assets/error-cross-small.svg');\n  height: 54 * $unit;\n}\n","@import '../Theme/constants';\n\n.container {\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 8 * $unit;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  flex: 1;\n\n  @media (--small-viewport) {\n    align-items: flex-start;\n  }\n}\n\n.customDescriptions {\n  align-self: center;\n}\n\n.instructions {\n  margin-top: 32 * $unit;\n\n  > ol {\n    list-style-position: inside;\n    padding: 0;\n  }\n\n  > ol li {\n    margin-bottom: 16 * $unit;\n  }\n\n  > ol li::marker {\n    color: var(--osdk-color-background-alert-info);\n  }\n\n  @media (--small-viewport) {\n    text-align: left;\n\n    > ol {\n      padding-left: 32 * $unit;\n    }\n  }\n}\n\n.recordingLimit {\n  display: flex;\n  align-items: flex-start;\n\n  > .timer {\n    background: url('./assets/timer.svg') left no-repeat;\n    width: 20 * $unit;\n    align-self: stretch;\n  }\n\n  > .text {\n    flex: 1;\n    text-align: left;\n  }\n}\n\n/* .text {\n  margin-top: 64 * $unit;\n} */\n","@import '../Theme/constants';\n\n.consentFrame {\n  width: 100%;\n  height: 100%;\n  border-style: none;\n\n  h1 {\n    color: var(--osdk-color-content-title);\n    font-weight: var(--osdk-font-weight-title);\n    font-size: var(--osdk-font-size-title);\n    line-height: 1.34;\n    text-align: center;\n    margin-bottom: 32 * $unit-x-large;\n    @media (--small-viewport) {\n      font-size: 24 * $unit;\n    }\n  }\n\n  hr {\n    margin: 24 * $unit 0;\n  }\n\n  > * {\n    text-align: left;\n  }\n\n  h4 {\n    margin-bottom: 32 * $unit;\n    margin-bottom: 16 * $unit;\n  }\n\n  div:last-child {\n    p {\n      height: 3em;\n    }\n  }\n}\n\n.actions {\n  padding: 0;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n\n  &.vertical {\n    flex-direction: column-reverse;\n    align-items: center;\n  }\n}\n\n.action.vertical {\n  margin-top: 8 * $unit;\n  margin-right: 0;\n  width: $lg-btn-width-lg-screen;\n}\n\n.secondary {\n  margin-right: 16 * $unit;\n  @media (--small-viewport) {\n    margin-right: 8 * $unit;\n  }\n}\n\n/* Decline Modal */\n\n.declineModalInner {\n  font-size: 16px;\n\n  width: 448 * $unit;\n  min-height: 236 * $unit;\n  margin: auto;\n\n  border-radius: 4 * $unit;\n  border: 1px solid var(--osdk-color-border-surface-modal);\n  background-color: var(--osdk-color-background-surface-modal);\n\n  font-family: var(--osdk-font-family-body) !important;\n\n  color: var(--osdk-color-content-body);\n  font-weight: 500;\n  line-height: 1.5;\n\n  overflow: auto;\n\n  /* HACK: only apply this fix to IE11*/\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    height: 0; /*necessary for IE11, see: https://stackoverflow.com/questions/24396205/flex-grow-not-working-in-internet-explorer-11-0*/\n  }\n\n  @media (--small-viewport) {\n    width: 100%;\n    margin: auto $small-text-margin;\n  }\n\n  @media (--smaller-viewport) {\n    width: 100%;\n    margin: auto $smaller-text-margin;\n  }\n\n  &,\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n.modalContent {\n  margin: $small-text-margin;\n\n  @media (--small-viewport) {\n    margin: $smaller-text-margin;\n  }\n\n  h2 {\n    font-size: var(--font-size-large);\n    line-height: 28 * $unit;\n    margin: 0;\n  }\n\n  p {\n    margin-top: 8 * $unit;\n    margin-bottom: 24 * $unit;\n  }\n}\n\n.modalActions {\n  @media (--small-viewport) {\n    flex-direction: column;\n    align-items: center;\n    width: 100%;\n\n    button {\n      width: 100%;\n    }\n\n    button:first-child {\n      margin-right: 0;\n      margin-bottom: 8 * $unit;\n    }\n  }\n}\n\n.contentFlexbox {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n}\n\n.errorIcon {\n  height: 40 * $unit;\n  background-size: contain;\n  background-image: url('./assets/error-circle.svg');\n}\n","@import '../Theme/constants';\n\n.list {\n  list-style: none;\n  padding: 0;\n  margin-top: 8 * $unit;\n\n  @media (--small-viewport) {\n    margin-top: 0;\n  }\n}\n\n/* Selector Button box shadow (offset-x | offset-y | blur-radius | spread-radius) */\n$selector-button-box-shadow: 0 0 0 2px;\n\n.option {\n  width: 100%;\n  color: var(--osdk-color-content-doc-type-button);\n  background: var(--osdk-color-background-doc-type-button);\n  border-radius: var(--osdk-border-radius-button);\n  border-color: var(--osdk-color-border-doc-type-button);\n  border-style: solid;\n  border-width: 1px;\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  line-height: 1.43;\n  margin-bottom: 8 * $unit;\n  padding: 16 * $unit;\n  position: relative;\n\n  &::after {\n    background: url('./assets/right.svg') no-repeat;\n    background-size: contain;\n    content: '';\n    display: block;\n    height: 12 * $unit;\n    position: absolute;\n    right: 16 * $unit;\n    top: 50%;\n    transform: translateY(-6 * $unit);\n    width: 8 * $unit;\n  }\n\n  &.optionHoverDesktop:hover {\n    box-shadow: $selector-button-box-shadow\n      var(--osdk-color-border-doc-type-button-hover);\n  }\n\n  &:active {\n    box-shadow: $selector-button-box-shadow\n      var(--osdk-color-border-doc-type-button-active);\n  }\n}\n\n.content {\n  text-align: left;\n  align-self: center;\n  flex-basis: 100%;\n}\n\n.optionMain {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-right: 18 * $unit;\n  min-height: 48 * $unit;\n}\n\n.label {\n  margin: 0;\n  font-weight: 600;\n  line-height: 1.5;\n}\n\n.hint {\n  color: var(--osdk-color-content-body);\n  font-weight: 500;\n  font-size: var(--font-size-small);\n  margin-bottom: 4 * $unit-small;\n}\n\n.warning {\n  font-weight: 600;\n  font-size: var(--font-size-small);\n  margin-bottom: 6 * $unit-small;\n}\n\n/* .tag class used for PoA document type buttons, i.e. \"e-statements accepted\" text */\n.tag {\n  display: inline-block;\n  font-size: var(--font-size-small);\n  padding: 0 12 * $unit-small;\n  margin-left: -12 * $unit-small;\n  margin-top: 2 * $unit-small;\n}\n\n.icon {\n  max-width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: contain;\n  flex-shrink: 0;\n  width: 48 * $unit;\n  height: 48 * $unit;\n  margin-right: 16 * $unit;\n  align-self: flex-start;\n}\n\n$_document-types: (\n  'passport',\n  'national-identity-card',\n  'driving-licence',\n  'residence-permit',\n  'bank-building-society-statement',\n  'utility-bill',\n  'letter'\n);\n\n@each $_document-type in $_document-types {\n  .icon-#{$_document-type} {\n    @extend %icon-circle-background;\n    background-image: url('./assets/icon-#{$_document-type}.svg');\n  }\n}\n",".select {\n  max-width: 100%;\n}\n","@import '../Theme/constants';\n\n.custom {\n  /* placeholder to force class name generation for custom styling */\n}\n\n.container {\n  flex: 1 1 auto;\n  padding-top: 16 * $unit;\n}\n\n%_text {\n  font-size: var(--font-size-small);\n}\n\n.label {\n  @extend %_text;\n}\n\n.errorContainer {\n  margin-top: 8 * $unit;\n}\n\n.fallbackText {\n  @extend %_text;\n}\n\n.fallbackLink {\n  display: inline-block;\n  font-size: inherit;\n}\n\n%_icon {\n  display: inline-block;\n  background-repeat: no-repeat;\n  background-size: 100%;\n  background-position: center;\n  height: 13 * $unit;\n  width: 13 * $unit;\n  margin-right: 8 * $unit;\n}\n\n.helpIcon {\n  @extend %_icon;\n  background-image: url('assets/question-icon.svg');\n}\n\n.errorIcon {\n  @extend %_icon;\n  background-image: url('assets/alert-icon.svg');\n}\n\n.countryFlag {\n  position: absolute;\n  left: 12 * $unit;\n  top: 8 * $unit;\n  width: 24 * $unit;\n  height: 24 * $unit;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: center;\n  border-radius: 50%;\n}\n\n.countryLabel {\n  padding-left: 35 * $unit;\n  display: flex;\n  align-items: center;\n}\n\n//-----------------------------//\n// accessible-autocomplete CSS //\n//-----------------------------//\n/*\n  All selector default BEM block name replaced with our custom CSS namespace\n  i.e. '.autocomplete__' to '.custom__'\n\n  NOTE (as per library's documentation):\n  \"You will need to rewrite the CSS class names to use your specified block name.\"\n\n  Copied as is from node_modules/accessible-autocomplete/src/autocomplete.css\n  except for the following confirmed unused styles that were removed:\n    - styling for media query breakpoint @media (min-width: 641px)\n    - .custom__option--odd\n    - .custom__input--show-all-values (.custom__dropdown-arrow-down is not used in SDK)\n\n  Changes only applied for linting errors and to apply SDK theme styles\n  Use Sass variables, placeholders as much as possible to easily maintain this\n*/\n\n$_sdk-font-size: var(--font-size-small);\n$_sdk-line-height: 18 * $unit-small;\n$_sdk-text-color: var(--osdk-color-content-body);\n\n$_sdk-input-border-style: 1px solid rgba(var(--ods-color-border-input));\n$_sdk-input-horizontal-padding: 8 * $unit-small;\n$_sdk-input-vertical-padding: 12 * $unit-small;\n$_sdk-input-icon-padding: 34 * $unit-small;\n$_sdk-search-icon-size: 24 * $unit-small;\n\n$_sdk-menu-max-height: 265 * $unit;\n$_sdk-menu-width-offset: 4 * $unit;\n$_sdk-option-hover-color: var(--osdk-color-background-button-primary-hover);\n$_sdk-option-active-color: var(--osdk-color-background-button-primary-active);\n$_sdk-option-padding: 8 * $unit-small;\n$_sdk-option-border-bottom: 0;\n\n%_sdk-search-icon {\n  background-color: transparent;\n  background-image: url('assets/search-icon.svg');\n  background-size: $_sdk-search-icon-size;\n  background-repeat: no-repeat;\n  background-position: 98% 50%;\n}\n\n.custom__wrapper {\n  position: relative;\n}\n\n.custom__hint,\n.custom__input {\n  border: $_sdk-input-border-style;\n  border-radius: 4 * $unit;\n  box-sizing: border-box;\n  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */\n  width: 100%;\n}\n\n.custom__input {\n  height: auto;\n  background-color: transparent;\n  position: relative;\n  /* font size for form elements (input, select, textarea) must be at least 16px otherwise iOS Safari intervenes & forces UI to zoom in */\n  font-size: var(--font-size-base);\n  color: $_sdk-text-color;\n}\n\n.custom__hint {\n  height: 100%;\n  color: #b1b4b6;\n  position: absolute;\n}\n\n.custom__input--focused {\n  outline-offset: 0;\n  box-shadow: inset 0 0 0 2 * $unit;\n}\n\n.custom__input--show-all-values {\n  padding: $_sdk-input-horizontal-padding $_sdk-input-icon-padding\n    $_sdk-input-horizontal-padding $_sdk-input-vertical-padding;\n  cursor: pointer;\n}\n\n.dropdownIcon {\n  @extend %_sdk-search-icon;\n  height: $_sdk-search-icon-size;\n  width: $_sdk-search-icon-size;\n  position: absolute;\n  top: 3 * $unit-small;\n  right: 4 * $unit-small;\n}\n\n.custom__menu {\n  background-color: #fff;\n  border: $_sdk-input-border-style;\n  border-top: 0;\n  color: $_sdk-text-color;\n  margin: 0;\n  max-height: $_sdk-menu-max-height;\n  overflow-x: hidden;\n  padding: 0;\n  width: calc(100% - #{$_sdk-menu-width-offset});\n}\n\n.custom__menu--visible {\n  display: block;\n}\n\n.custom__menu--hidden {\n  display: none;\n}\n\n.custom__menu--overlay {\n  box-shadow: rgba(0, 0, 0, 0.256863) 0 2 * $unit 6 * $unit;\n  left: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 100;\n}\n\n.custom__menu--inline {\n  position: relative;\n}\n\n.custom__option {\n  border-bottom: $_sdk-option-border-bottom;\n  cursor: pointer;\n  display: block;\n  position: relative;\n}\n\n.custom__option > * {\n  pointer-events: none;\n}\n\n.custom__option:first-of-type {\n  border-top-width: 0;\n}\n\n.custom__option:last-of-type {\n  border-bottom-width: 0;\n}\n\n.custom__option--focused,\n.custom__option:hover {\n  background-color: $_sdk-option-hover-color;\n  border-color: $_sdk-option-hover-color;\n  color: #fff;\n  outline: none;\n}\n\n.custom__option--no-results {\n  background-color: #fafafa;\n  color: #646b6f;\n  cursor: not-allowed;\n}\n\n.custom__hint,\n.custom__option {\n  font-size: $_sdk-font-size;\n  line-height: $_sdk-line-height;\n}\n\n.custom__hint,\n.custom__option {\n  padding: $_sdk-option-padding;\n}\n\n// Additional custom styling not in library's CSS\n\n.custom__option:active {\n  background-color: $_sdk-option-active-color;\n  border-color: $_sdk-option-active-color;\n}\n\n//------------------------------------//\n// END of accessible-autocomplete CSS //\n//------------------------------------//\n","@import '../Theme/constants';\n\n.container {\n  display: flex;\n}\n\n.crossDeviceInstructionsContainer {\n  height: 100%;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  justify-content: space-between;\n  margin-bottom: 20 * $unit;\n}\n\n.instructions {\n  @media (--small-viewport) {\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    justify-content: space-around;\n  }\n}\n\n.instructionsCopy {\n  margin: 14 * $unit-small 24 * $unit-small;\n  font-size: var(--font-size-small);\n  line-height: 1.43;\n\n  @media (--small-viewport) {\n    font-size: var(--font-size-base);\n    margin: 14 * $unit 24 * $unit;\n  }\n}\n\n.error {\n  color: rgba(var(--ods-color-content-negative));\n}\n\n.buttons {\n  display: flex;\n  justify-content: space-around;\n\n  &.vertical {\n    flex-direction: column-reverse;\n    align-items: center;\n    margin-right: 0;\n  }\n}\n\n.poaButtons {\n  margin-right: -16 * $unit;\n  @media (--small-viewport) {\n    margin-right: -8 * $unit;\n  }\n}\n\n.buttonContainer {\n  display: flex;\n  width: 100%;\n}\n\n.passportButtonShadow {\n  @extend %overflow-drop-shadow;\n}\n\n.poaBtn {\n  display: flex;\n  justify-content: flex-start;\n  overflow: hidden;\n}\n\n.poaBtn:first-child {\n  margin-right: 16 * $unit;\n  @media (--small-viewport) {\n    margin-right: 8 * $unit;\n  }\n\n  &.vertical {\n    margin-right: 0;\n    margin-top: 8 * $unit;\n  }\n}\n\n.crossDeviceButton {\n  margin-top: 16 * $unit;\n  margin-bottom: 16 * $unit;\n}\n\n.iconContainer {\n  /* HACK: max-height does not behave well on IE11 when using flexbox, so we reset it here */\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    max-height: none;\n  }\n  @media (--small-viewport) {\n    max-height: 72 * $unit;\n  }\n}\n\n.poaIconContainer {\n  /* HACK: max-height does not behave well on IE11 when using flexbox, so we reset it here */\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    max-height: none;\n  }\n  @media (--small-viewport) {\n    max-height: 144 * $unit;\n    height: 144 * $unit;\n    width: 144 * $unit;\n  }\n}\n\n%_document-upload-icon {\n  @extend %icon-circle-background;\n  background-image: url('./assets/cross-device-doc-icon.svg');\n  background-size: 72 * $unit;\n  background-position: 40% 50%;\n  background-repeat: no-repeat;\n  height: 144 * $unit;\n  width: 144 * $unit;\n  margin: auto;\n}\n\n.icon {\n  @extend %_document-upload-icon;\n}\n\n.identityIcon {\n  @extend %_document-upload-icon;\n\n  @media (--small-viewport) {\n    background-image: url('./assets/camera.svg');\n    background-position: center;\n    background-color: transparent;\n    background-size: contain;\n    border-radius: 0;\n    height: 100%;\n    width: auto;\n  }\n}\n\n.proofOfAddressIcon {\n  @extend %_document-upload-icon;\n\n  @media (--small-viewport) {\n    height: 100%;\n    width: 100%;\n    background-image: url('./assets/letter-focus.svg');\n    background-size: contain;\n  }\n}\n\n.faceIcon {\n  @extend %icon-circle-background;\n  background-size: 64 * $unit auto;\n  background-image: url('./assets/cross-device-selfie-icon.svg');\n  background-size: 100 * $unit;\n  background-position: 50% 30%;\n  background-repeat: no-repeat;\n  height: 144 * $unit;\n  width: 144 * $unit;\n  margin: auto;\n\n  @media (--small-viewport) {\n    background-image: url('./assets/camera.svg');\n    background-position: center;\n    background-color: transparent;\n    background-size: contain;\n    border-radius: 0;\n    height: 100%;\n    width: auto;\n  }\n}\n\n.contentWrapper,\n.uploaderWrapper {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  height: 16 * $unit;\n}\n\n.uploadArea {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  position: relative;\n  padding: 24 * $unit 0 8 * $unit;\n  justify-content: space-around;\n  /*\n    We need to define a height for the uploadArea\n    because safari does not supporting height:100% inside a flex child like\n    .identityIcon and .faceIcon\n  */\n  height: 16 * $unit;\n\n  @media (--small-viewport) {\n    background-color: transparent;\n    border: 0;\n    justify-content: space-between;\n    padding: 0;\n  }\n}\n\n.imageQualityGuideRow {\n  display: flex;\n  justify-content: space-between;\n  flex-grow: 1;\n}\n\n.documentExampleCol {\n  flex: 1;\n  margin: 8 * $unit;\n  font-size: 14 * $unit;\n}\n\n.documentExampleImg {\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: contain;\n  flex-shrink: 0;\n  max-width: 100%;\n  width: 149 * $unit;\n  height: 106 * $unit;\n  margin: 0 auto;\n  margin-bottom: 8 * $unit;\n}\n\n.documentExampleImgBlur {\n  background-image: url('./assets/img-blur.png');\n}\n\n.documentExampleImgCutoff {\n  background-image: url('./assets/img-cutoff.png');\n}\n\n.documentExampleImgGlare {\n  background-image: url('./assets/img-glare.png');\n}\n\n.documentExampleImgGood {\n  background-image: url('./assets/img-good.png');\n}\n\n.documentExampleLabel {\n  text-align: center;\n}\n\n.passportUploadBtn {\n  margin-bottom: 16 * $unit;\n}\n\n.buttonLinkUploadCopy {\n  display: block;\n}\n",".container {\n  position: relative;\n  cursor: pointer;\n}\n\n.input {\n  bottom: 0;\n  left: 0;\n  /* This input should always be hidden.\n  Highest specificity added to prevent the host app from overriding this style by mistake */\n  display: none !important;\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n}\n","@import '../Theme/constants';\n\n.container {\n  display: flex;\n}\n\n.introIcon {\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 48 * $unit;\n  height: 48 * $unit;\n}\n\n/* Follow icon styling in Uploader/style.scss for Selfie Intro icons */\n.selfieIcon {\n  background-size: 48 * $unit;\n  background-image: url('./assets/selfie-picto.svg');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-color: var(--osdk-color-background-icon);\n  border-radius: 50%;\n}\n\n.glassesIcon {\n  background-size: 48 * $unit;\n  background-image: url('./assets/glasses-picto.svg');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-color: var(--osdk-color-background-icon);\n  border-radius: 50%;\n}\n\n.introBullet {\n  padding-left: 48 * $unit;\n  margin-bottom: 48 * $unit;\n  position: relative;\n  text-align: left;\n\n  @media (--short-viewport) {\n    margin-bottom: 32 * $unit;\n  }\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  /* line connecting icons on Selfie Intro screen */\n  &::before {\n    content: '';\n    display: block;\n    background-color: $color-icons-connector-line;\n    width: 2 * $unit;\n    height: 150%;\n    position: absolute;\n    top: 24 * $unit;\n    left: 23 * $unit;\n  }\n\n  &:last-child::before {\n    display: none;\n  }\n}\n\n.introBullets {\n  padding-left: 0;\n  margin-top: 41 * $unit;\n  display: table;\n  list-style: none;\n\n  @media (--short-viewport) {\n    margin-top: 16 * $unit;\n  }\n}\n\n.introText {\n  padding-left: 17 * $unit;\n  box-decoration-break: clone;\n  height: 48 * $unit;\n  display: table-cell;\n  vertical-align: middle;\n}\n\n.introCopy {\n  margin-bottom: auto;\n  overflow: auto;\n}\n","@import '../Theme/constants';\n\n/* Document */\n\n.document {\n  border: 1px solid var(--ods-color-border-info); /* Doc Autocapture border colour */\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  top: 0;\n}\n\n.document svg {\n  height: 100%;\n  width: 100%;\n}\n\n.document svg > path {\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.document .fullScreen {\n  fill: $color-camera-overlay;\n  stroke: transparent;\n}\n\n.document .hollow {\n  fill: transparent;\n  stroke: $color-white;\n  stroke-width: 0.25;\n}\n\n.document .placeholder {\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: contain;\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &.card {\n    background-image: url('./assets/card-placeholder.svg');\n  }\n\n  &.passport {\n    background-image: url('./assets/passport-placeholder.svg');\n  }\n\n  &.frPaperDl {\n    background-image: url('./assets/fr-dl-placeholder.svg');\n  }\n\n  &.itPaperId {\n    background-image: url('./assets/it-id-placeholder.svg');\n  }\n}\n\n.document .footer {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n}\n\n/* Face */\n\n@mixin position-hole($scale) {\n  $overlay-width: 740 * $unit;\n  $overlay-height: 1800 * $unit;\n  $hole-width: 264 * $unit;\n  $hole-height: 328 * $unit;\n  $offset-y: 105 * $unit;\n\n  background-size: ($overlay-width * $scale) ($overlay-height * $scale);\n  background-position: 50%\n    calc(#{($hole-height - $overlay-height) * $scale * 0.5 + $offset-y});\n}\n\n.face {\n  @include position-hole(1);\n  background-image: url('./assets/face-with-hole.svg');\n  background-repeat: no-repeat;\n  height: 100%;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n\n  @media (--smaller-viewport) {\n    @include position-hole(0.85);\n  }\n\n  .isWithoutHole & {\n    background-image: url('./assets/face-without-hole.svg');\n  }\n}\n\n.ariaLabel {\n  opacity: 0;\n}\n","@import '../../Theme/constants';\n\n.bodyWrapper {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.instructions {\n  font-size: var(--font-size-small);\n  margin: 10% 16 * $unit-small 16 * $unit-small;\n}\n\n.image {\n  height: auto;\n  width: 100%;\n  font-size: var(--font-size-small);\n  display: flex;\n  flex-direction: column;\n  flex: 2 1 32 * $unit-x-small;\n  min-height: 32 * $unit-x-small;\n  max-width: 105.01 * $unit-x-small;\n  width: 100%;\n  padding: 10 * $unit-small;\n  margin: auto;\n\n  // To fix Safari flexbox rendering issue by forcing the div to be rendered in a new composite layer,\n  // see https://stackoverflow.com/questions/65524383/flexbox-bug-on-safari -> https://stackoverflow.com/questions/19169089/weird-css-stretching-issue-in-ios7-safari-and-chrome\n  transform: translateZ(0);\n\n  @media (--small-viewport) {\n    max-width: 79 * $unit-x-small;\n  }\n}\n\n.reasons {\n  font-size: var(--font-size-small);\n\n  text-align: center;\n  min-height: 42 * $unit-small;\n}\n\n.reason {\n  margin-top: 8 * $unit-small;\n}\n\n.graphic {\n  background-color: transparent;\n  background-image: url('./assets/allow.svg');\n  background-repeat: no-repeat;\n  background-size: 100%;\n  background-position: center;\n  height: 136 * $unit;\n  width: 100%;\n\n  @media (--small-viewport) {\n    background-size: contain;\n    flex-grow: 1; // prevents container height collapsing on iOS devices\n    height: 100%;\n  }\n}\n\n.allow {\n  top: 70%;\n  position: absolute;\n  right: 0;\n  text-align: center;\n  width: 50%;\n  font-weight: 600;\n\n  @media (--small-viewport) {\n    top: 65%;\n  }\n}\n\n.actions {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n","@import '../../Theme/constants';\n\n.instructions {\n  font-size: var(--font-size-small);\n  text-align: left;\n  margin: 30 * $unit-small 0 24 * $unit-small;\n  position: relative;\n  padding: 24 * $unit-small 24 * $unit-small 12 * $unit-small;\n  @media (--small-viewport) and (--short-viewport) {\n    font-size: var(--font-size-x-small);\n  }\n  @media (--small-viewport) {\n    margin: 24 * $unit-small 0 12 * $unit-small;\n  }\n}\n\n.instructionsTitle {\n  font-weight: 600;\n  margin: 0 0 8 * $unit-small;\n}\n\n.recovery {\n  @extend %header-highlight-pill;\n  position: absolute;\n  top: 0;\n  left: 20 * $unit-small;\n  transform: translateY(-50%);\n}\n\n.steps {\n  padding: 0;\n  margin: 0;\n}\n\n.step {\n  margin: 0 15 * $unit-small 10 * $unit-small;\n}\n\n.button {\n  margin-left: auto;\n  margin-right: auto;\n}\n","@import '../Theme/constants';\n\n.container {\n  border-radius: 6 * $unit;\n  text-align: left;\n  color: $color-white;\n  margin-bottom: 16 * $unit;\n  padding: 8 * $unit 16 * $unit 12 * $unit 16 * $unit;\n  position: relative;\n  @media (--small-viewport) {\n    margin-bottom: 8 * $unit;\n  }\n}\n\n.container-error {\n  background-color: var(--osdk-color-background-alert-error);\n  color: var(--osdk-color-content-alert-error);\n}\n\n.container-warning {\n  background-color: var(--osdk-color-background-alert-info);\n  color: var(--osdk-color-content-alert-info);\n}\n\n.instruction {\n  margin-top: 0;\n  margin-bottom: 0;\n  margin-left: 24 * $unit;\n}\n\n.instruction-text {\n  font-size: var(--font-size-small);\n  line-height: 1.43;\n}\n\n.title {\n  position: relative;\n}\n\n.title-text {\n  display: inline-block;\n  font-weight: 600;\n  line-height: 1.5;\n  padding-left: 24 * $unit;\n}\n\n.title-icon {\n  position: absolute;\n  height: 100%;\n  width: 16 * $unit;\n  margin-right: 8 * $unit;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: contain;\n}\n\n.title-icon-error {\n  background-image: url('./assets/error.svg');\n}\n\n.title-icon-warning {\n  background-image: url('./assets/warning.svg');\n}\n\n.roundedTriangle {\n  position: absolute;\n  bottom: -6 * $unit;\n  left: calc(50% - #{8 * $unit});\n  width: 8 * $unit;\n  height: 8 * $unit;\n  border-top: 8 * $unit solid transparent;\n  border-right: 8 * $unit solid transparent;\n  border-bottom: 8 * $unit solid transparent;\n  border-left: 8 * $unit solid transparent;\n  border-bottom-left-radius: 3 * $unit;\n  transform: rotate(-45deg);\n}\n\n.warningTriangle {\n  border-bottom: 8 * $unit solid var(--osdk-color-background-alert-info);\n  border-left: 8 * $unit solid var(--osdk-color-background-alert-info);\n}\n\n.errorTriangle {\n  border-bottom: 8 * $unit solid var(--osdk-color-background-alert-error);\n  border-left: 8 * $unit solid var(--osdk-color-background-alert-error);\n}\n\n.dismiss {\n  background-image: url('./assets/cross.svg');\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: contain;\n  background-color: transparent;\n  border-radius: 50%;\n  width: 24 * $unit;\n  height: 24 * $unit;\n  position: absolute;\n  top: 10 * $unit;\n  right: 10 * $unit;\n  cursor: pointer;\n  border: 0;\n  font: inherit;\n\n  &:hover {\n    background-color: rgba(255, 255, 255, 0.5);\n  }\n\n  &:active {\n    background-color: rgba(255, 255, 255, 0.7);\n  }\n}\n","@import '../Theme/constants';\n\n.errorContainer {\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 4;\n}\n\n@mixin _error-overlay {\n  &::before {\n    content: '';\n    display: block;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: 100%;\n    z-index: 1;\n  }\n}\n\n.errorContainerType {\n  @include _error-overlay;\n}\n\n.errorHasBackdrop {\n  @include _error-overlay;\n  bottom: 0;\n\n  &::before {\n    background-color: $color-camera-error-overlay;\n    opacity: 0.57;\n  }\n}\n\n.errorMessage {\n  @extend %global-margin;\n  top: 48 * $unit;\n  left: 0;\n  right: 0;\n  position: absolute;\n  z-index: 2;\n}\n","@import '../Theme/constants';\n\n.camera {\n  width: 100%;\n  height: auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  &.docAutoCaptureFrame {\n    display: block;\n    justify-content: flex-start;\n  }\n}\n\n.container {\n  overflow: hidden;\n}\n\n.docAutoCaptureFrame .container {\n  position: relative;\n}\n\n.container::before {\n  content: '';\n  display: block;\n  padding-top: 70%;\n}\n\n.overlay {\n  width: 100%;\n  height: 100%;\n  top: 0;\n  position: absolute;\n  z-index: 0;\n}\n\n.video {\n  display: block;\n  height: 100%;\n  z-index: 0;\n  /* Use `object-fit: cover` on every browser but Edge */\n  @supports not (-ms-ime-align: auto) {\n    width: 100%;\n    top: 0;\n    left: 0;\n    margin: auto;\n    object-fit: cover;\n  }\n\n  .docLiveCaptureFrame & {\n    //  NOTE: object-fit: cover causes camera view to appear very zoomed in on some Android devices,\n    //        e.g. Huawei P40, P30.\n    //        For iOS devices, the camera view is very slightly zoomed in when object-fit: cover is applied.\n    //        With object-fit: initial, i.e. use the browser default, zoom is gone but camera view is still fullscreen.\n    //        Note also that if viewed on a browser's device emulator camera view displays differently to on actual device.\n    //        The user also does not get the full camera view for both Android & iOS devices.\n    //        See MDN documentation https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit\n    object-fit: initial; // set to browser default, setting to \"none\" still results in a zoomed in view\n  }\n}\n\n.actions {\n  position: absolute;\n  z-index: 1000;\n  bottom: 48 * $unit;\n  left: 16 * $unit;\n  right: 16 * $unit;\n\n  &.disabled {\n    z-index: 0;\n  }\n}\n\n.btn {\n  cursor: pointer;\n  outline-offset: 6 * $unit;\n  background-color: var(--color-background-button-camera);\n  font-size: inherit;\n  border-radius: 50%;\n  border: 3 * $unit solid $color-black;\n  box-shadow: 0 0 0 4 * $unit $color-white;\n  height: 56 * $unit;\n  margin-left: auto;\n  margin-right: auto;\n  padding: 0;\n  width: 56 * $unit;\n\n  &:hover {\n    background-color: var(--osdk-color-background-button-camera-hover);\n  }\n\n  &:active {\n    background-color: var(--osdk-color-background-button-camera-active);\n  }\n\n  &:disabled {\n    display: none;\n  }\n}\n\n.webcamContainer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n\n  .docLiveCaptureFrame & {\n    left: 0;\n    top: 50%;\n    margin: auto;\n    transform: translate(0%, -50%);\n    height: auto;\n    width: 100%;\n  }\n\n  /* Only apply styles on Edge where there is no `object-fit:cover` support for video */\n  @supports (-ms-ime-align: auto) {\n    left: 50%;\n    margin: auto;\n    transform: translate(-50%, 0%);\n  }\n}\n","@import '../Theme/constants';\n\n.fallbackButton {\n  cursor: pointer;\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n  color: inherit;\n  font: inherit;\n  text-decoration: underline;\n  background: none;\n  border: 0;\n}\n","@import '../../Theme/constants';\n\n.paperIdFlowSelector {\n  align-items: stretch;\n  align-self: flex-end;\n  background-color: $color-white;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  padding: 16 * $unit;\n  text-align: left;\n  z-index: 3;\n}\n\n.paperIdFlowSelector .title {\n  margin-bottom: 16 * $unit;\n}\n\n.paperIdFlowSelector button {\n  align-items: center;\n  background-color: $color-white;\n  border-radius: 4 * $unit;\n  border: 1px solid rgba(var(--ods-color-neutral-700));\n  display: flex;\n  font-family: var(--osdk-font-family-body);\n  font-size: var(--font-size-base);\n  height: 80 * $unit;\n  margin-top: 8 * $unit;\n  padding: 0 24 * $unit;\n\n  &:active {\n    background-color: var(--color-background-button-custom);\n  }\n\n  .text {\n    flex: 1;\n    padding: 0 24 * $unit;\n    text-align: left;\n  }\n\n  .icon,\n  .chevron {\n    align-self: stretch;\n    width: 24 * $unit;\n  }\n}\n\n.cardId .icon {\n  background: url('./assets/card-id.svg') no-repeat center;\n}\n\n.paperId .icon {\n  background: url('./assets/paper-id.svg') no-repeat center;\n}\n\n.chevron {\n  background: url('./assets/chevron-right.svg') no-repeat center;\n}\n","@import '../../Theme/constants';\n\n.controls {\n  flex: 1;\n  margin: 0 16 * $unit 48 * $unit;\n  display: flex;\n  flex-direction: column;\n}\n\n.buttonPlaceholder {\n  height: 48 * $unit;\n}\n\n.progress {\n  align-self: center;\n  background-color: rgba(255, 255, 255, 0.4);\n  border-radius: 4 * $unit;\n  color: $color-white;\n  font-size: var(--font-size-small);\n  margin-top: 16 * $unit;\n  padding: 4 * $unit 10 * $unit;\n  text-transform: uppercase;\n}\n","@import '../../Theme/constants';\n\n.instructions {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.instructions > span {\n  color: $color-white;\n  font-family: var(--osdk-font-family-body);\n  font-size: var(--font-size-base);\n  margin-bottom: 8 * $unit;\n\n  @media (--short-viewport) {\n    font-size: var(--font-size-x-small);\n    margin-bottom: 0;\n  }\n}\n\n.instructions > .title {\n  font-size: 20 * $unit;\n  font-weight: 600;\n\n  @media (--short-viewport) {\n    font-size: var(--font-size-large);\n  }\n}\n\n.instructions > .subtitle {\n  font-weight: normal;\n}\n\n.instructions .success {\n  background-image: url('./assets/success.svg');\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: contain;\n  height: 48 * $unit;\n}\n\n.instructions .ariaLabel {\n  opacity: 0;\n}\n\n.instructions .loading {\n  align-self: center;\n  border-radius: 4 * $unit;\n  display: flex;\n  height: 4 * $unit;\n  margin-top: 16 * $unit;\n  overflow: hidden;\n  width: 50%;\n\n  > span {\n    border-radius: 4 * $unit;\n    animation-duration: 1000ms;\n  }\n\n  > .active {\n    width: 0%;\n    background-color: $color-white;\n    animation: captureProgress forwards linear;\n  }\n\n  > .background {\n    width: 100%;\n    background-color: var(--color-background-button-custom);\n    opacity: 0.15;\n    animation: captureProgress forwards linear reverse;\n  }\n}\n\n@keyframes captureProgress {\n  0% {\n    width: 0%;\n  }\n\n  100% {\n    width: 100%;\n  }\n}\n","@import '../Theme/constants';\n\n.documentContainer {\n  position: relative;\n  overflow: hidden;\n}\n\n.faceContainer {\n  position: static;\n}\n","@import '../Theme/constants';\n\n.challengeDescription {\n  line-height: 2.25;\n}\n\n%_challenge-text {\n  font-weight: 600;\n  font-size: 20 * $unit;\n}\n\n.challengeTitle {\n  @extend %_challenge-text;\n  line-height: 1.2;\n}\n\n.challengeSubTitle {\n  @extend %_challenge-text;\n  line-height: 2;\n}\n\n.introCopy {\n  margin-bottom: auto;\n}\n\n.introBullets {\n  text-align: left;\n  padding-left: 40 * $unit;\n\n  @media (--small-viewport) {\n    padding-left: 0;\n  }\n}\n\n.introBullet {\n  padding-left: 46 * $unit;\n  margin-bottom: 24 * $unit;\n  list-style: none;\n  position: relative;\n}\n\n.bolder {\n  font-weight: 600;\n}\n\n.introIcon {\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  background-repeat: no-repeat;\n  background-size: contain;\n  width: 26 * $unit;\n  height: 26 * $unit;\n}\n\n.speakOutLoudIcon {\n  background-image: url('./assets/mic.svg');\n  background-size: contain;\n}\n\n.twoActionsIcon {\n  background-image: url('./assets/camera.svg');\n  background-size: contain;\n}\n\n.movement {\n  background-image: url('./assets/move-arrow.svg');\n  background-size: contain;\n  display: inline-block;\n  width: 65 * $unit;\n  height: 21 * $unit;\n  margin-top: 16 * $unit;\n}\n\n.movement-turnLeft {\n  transform: rotate(180deg);\n}\n\n.recite {\n  display: block;\n  font-size: 54 * $unit;\n  font-weight: 600;\n  line-height: 1.19;\n  margin-top: 2.37 * $unit;\n}\n\n.actions {\n  position: absolute;\n  z-index: 1000;\n  bottom: 48 * $unit;\n  left: 16 * $unit;\n  right: 16 * $unit;\n\n  &.disabled {\n    z-index: 0;\n  }\n}\n\n.btn:extend(.btn, .btn-centered, .btn-primary) {\n  padding: 0;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.captureActionsHint {\n  color: $color-white;\n  font-size: var(--font-size-small);\n  margin-bottom: 10 * $unit-small;\n\n  &.recordAction {\n    @media (--smaller-viewport) {\n      display: none;\n    }\n  }\n}\n\n.caption {\n  color: $color-white;\n  text-align: center;\n  position: absolute;\n  z-index: 1;\n  top: 64 * $unit;\n  left: 0;\n  right: 0;\n}\n\n@mixin _full-screen-rounded-icon() {\n  cursor: pointer;\n  width: 60 * $unit;\n  height: 60 * $unit;\n  font-size: inherit;\n  border: 0;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-color: transparent;\n  box-shadow: none;\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n\n  &:hover:not(:disabled) {\n    filter: brightness(200%);\n  }\n\n  &:active {\n    filter: brightness(80%);\n  }\n}\n\n@mixin _full-screen-start-recording-icon() {\n  @include _full-screen-rounded-icon();\n  background-image: url('./assets/start.svg');\n}\n\n@mixin _full-screen-stop-recording-icon() {\n  @include _full-screen-rounded-icon();\n  background-image: url('./assets/stop.svg');\n}\n\n.startRecording {\n  @include _full-screen-start-recording-icon();\n}\n\n.stopRecording {\n  @include _full-screen-stop-recording-icon();\n}\n","@import '../Theme/constants';\n\n.pdfIcon {\n  display: inline-block;\n  width: 180 * $unit;\n  height: 180 * $unit;\n  max-width: 100%;\n  margin: 16 * $unit auto 16 * $unit;\n\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-image: url('./assets/pdf-success.svg');\n}\n\n.pdfWrapper,\n.imageWrapper,\n.croppedImageWrapper,\n.videoWrapper {\n  display: flex;\n  position: relative;\n  min-height: 90 * $unit;\n  justify-content: center;\n}\n\n.croppedImageWrapper {\n  @media (--small-viewport) {\n    min-height: 13em;\n  }\n}\n\n.imageWrapper.fullscreenImageWrapper,\n.croppedImageWrapper.fullscreenImageWrapper {\n  position: static;\n}\n\n.videoWrapper {\n  margin-bottom: 64 * $unit;\n  flex: 1;\n}\n\n.pdfWrapper {\n  display: block; /* makes the containing PDF viewer width shrink correctly on window resize */\n  overflow: overlay; /* append scrollbars if necessary and overlay over/above content (only for Chrome, to avoid double scrollbars) */\n}\n\n.image {\n  max-width: 100%;\n  max-height: 100%;\n  display: block;\n  border-radius: 3 * $unit;\n  flex: 0 0 auto;\n  align-self: stretch;\n  object-fit: contain;\n}\n\n/* Used for Doc Live Capture preview (mobile devices only) */\n/* For browser compatibility for object-fit, object-position see\n    https://caniuse.com/#feat=object-fit\n    https://caniuse.com/#feat=object-position */\n.croppedDocumentImage {\n  width: 100%;\n  height: 15em;\n  object-fit: cover;\n  object-position: center;\n\n  @media (--small-viewport) {\n    height: 13em;\n  }\n}\n\n.video {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n",".container {\n  overflow: auto;\n}\n","@import '../Theme/constants';\n\n.expanded {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 4;\n  background-color: $color-white;\n}\n\n.imageContainer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.image {\n  min-height: 100%;\n  min-width: 100%;\n  object-fit: contain;\n  object-position: center;\n  display: block;\n  touch-action: none;\n}\n\n.container {\n  /*\n  HACK this container is only necessary in order to increase\n  the specifycity when compared to the Button variant class used\n  */\n  .button {\n    position: absolute;\n    left: 50%;\n    bottom: 0%;\n    transform: translate(-50%, -50%);\n    padding: 5 * $unit 15.4 * $unit;\n    border: 0;\n\n    &::before {\n      content: '';\n      display: inline-block;\n      width: 12 * $unit;\n      height: 12 * $unit;\n      background-image: url('./assets/enlarge.svg');\n      background-repeat: no-repeat;\n      background-size: contain;\n      vertical-align: middle;\n      margin-top: -2 * $unit;\n      margin-right: 10 * $unit;\n    }\n\n    .button-text {\n      font-size: var(--font-size-x-small);\n      position: relative;\n      top: -1.65 * $unit-x-small;\n    }\n  }\n}\n\n.expanded {\n  .button {\n    top: auto;\n    bottom: 16 * $unit;\n    font-size: inherit;\n\n    &::before {\n      width: 18 * $unit;\n      height: 18 * $unit;\n      margin-top: -3 * $unit;\n      margin-right: 8 * $unit;\n      background-image: url('./assets/collapse.svg');\n    }\n  }\n}\n\n.button-overlay {\n  background-color: $color-small-button !important;\n  border-radius: 4 * $unit;\n  color: $color-white;\n  font: inherit;\n  font-weight: 600;\n  height: auto !important;\n  line-height: 1.4;\n  padding: 11.2 * $unit 19.6 * $unit;\n\n  &:hover {\n    background-color: $color-small-button-hover;\n  }\n\n  &:active {\n    background-color: $color-small-button-active;\n  }\n}\n","@import '../Theme/constants';\n\n.previewsContainer {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  justify-content: space-between;\n\n  &.previewsContainerIsFullScreen {\n    top: 0;\n  }\n}\n\n.title {\n  flex: 0 0 auto;\n}\n\n.message {\n  margin: 32 * $unit 0 16 * $unit;\n  @media (--small-viewport) {\n    margin: 16 * $unit 0;\n  }\n}\n\n.actions {\n  padding: 0;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  margin-right: -16 * $unit;\n  @media (--small-viewport) {\n    margin-right: -8 * $unit;\n  }\n\n  &.vertical {\n    flex-direction: column-reverse;\n    align-items: center;\n  }\n}\n\n.singleAction {\n  display: block;\n  margin-bottom: 8 * $unit;\n}\n\n.retakeAction {\n  margin-right: 16 * $unit;\n  @media (--small-viewport) {\n    margin-right: 8 * $unit;\n  }\n\n  &.vertical {\n    margin-right: 0;\n    margin-top: 8 * $unit;\n    width: $lg-btn-width-lg-screen;\n  }\n}\n","@import '../../Theme/constants';\n\n.container {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.container.center {\n  justify-content: center;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.title {\n  font-size: 24 * $unit;\n  font-weight: bold;\n}\n\n.content > .icon {\n  background-image: url('../../Complete/assets/complete.svg');\n  background-repeat: no-repeat;\n  background-size: contain;\n  height: 32 * $unit;\n  width: 32 * $unit;\n  margin-bottom: 8 * $unit;\n}\n\n.content > .body {\n  font-weight: normal;\n}\n\n.preview .videoWrapper {\n  width: 66%;\n  margin: 16 * $unit auto 0;\n}\n\n.buttonsContainer > button {\n  margin-top: 16 * $unit;\n}\n","@import '../Theme/constants';\n\n.wrapper {\n  margin-top: 116 * $unit;\n}\n\n.icon {\n  height: 64 * $unit;\n  background-size: contain;\n  background-image: url('./assets/complete.svg');\n  margin-bottom: 24 * $unit;\n}\n","@import '../../Theme/constants';\n\n.icon {\n  @extend %icon-circle-background;\n  height: 144 * $unit;\n  width: 144 * $unit;\n  background-size: contain;\n  background-image: url('./assets/connection-large.svg');\n  margin-top: 40 * $unit;\n  margin-bottom: 32 * $unit;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.help {\n  /* placeholder to namespace this with CSS modules */\n}\n\n.cancel {\n  cursor: pointer;\n}\n","@import '../../Theme/constants';\n\n.icon {\n  height: 36 * $unit;\n  width: 36 * $unit;\n  margin-right: 14 * $unit;\n  float: left;\n  background-image: url('./assets/complete-tick-small.svg');\n  background-size: contain;\n}\n\n.uploadList {\n  display: inline-block;\n  padding-left: 0;\n  margin-top: 48 * $unit;\n  margin-bottom: 56 * $unit;\n}\n\n.uploadListItem {\n  margin-bottom: 24 * $unit;\n  list-style: none;\n  text-align: left;\n}\n\n.documentUploadedLabel,\n.selfieUploadedLabel,\n.videoUploadedLabel {\n  /* placeholder to namespace this with CSS modules */\n}\n\n.listText {\n  line-height: 2.25;\n}\n","@import '../../Theme/constants';\n\n.icon {\n  @extend %icon-circle-background;\n  height: 144 * $unit;\n  width: 144 * $unit;\n  background-size: contain;\n  background-image: url('./assets/mobile-sent-large.svg');\n  margin-bottom: 32 * $unit;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.submessage {\n  margin-bottom: 0;\n}\n\n.boldMessage {\n  margin-top: 0;\n  margin-bottom: 32 * $unit;\n  font-weight: 600;\n}\n\n.help {\n  /* placeholder to namespace this with CSS modules */\n}\n\n.cancel {\n  cursor: pointer;\n}\n","@import '../../Theme/constants';\n\n$parent-width: 432;\n\n.container {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.secureLinkView {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n\n  // To fix Safari flexbox rendering issue by forcing the div to be rendered in a new composite layer,\n  // see https://stackoverflow.com/questions/65524383/flexbox-bug-on-safari -> https://stackoverflow.com/questions/19169089/weird-css-stretching-issue-in-ios7-safari-and-chrome\n  transform: translateZ(0);\n}\n\n.selectedLinkView {\n  flex: 1;\n}\n\n.qrCodeSection {\n  margin-top: 16 * $unit;\n}\n\n.qrCodeContainer {\n  height: 144 * $unit;\n  margin-bottom: 16 * $unit;\n}\n\n.smsSection {\n  height: 76 * $unit;\n  margin-top: 56 * $unit;\n}\n\n.label {\n  font-weight: 600;\n  text-align: left;\n  color: var(--osdk-color-content-body);\n  float: left;\n}\n\n.numberInputSection {\n  height: 48 * $unit;\n  width: 100%;\n  float: left;\n  margin-top: 4 * $unit;\n}\n\n.inputContainer,\n.linkText {\n  @include width-parent-relative(320, $parent-width);\n}\n\n.inputContainer {\n  height: 100%;\n  border: 1px solid rgba(var(--ods-color-border-input));\n  border-top-left-radius: 4 * $unit;\n  border-bottom-left-radius: 4 * $unit;\n  border-right: 0;\n  background-color: rgba(var(--ods-color-neutral-white));\n  float: left;\n  box-shadow: 0 -0.1 * $unit 0 * $unit 0 * $unit rgba(var(--ods-color-border-input));\n}\n\n.fieldError {\n  border: 1px solid rgba(var(--ods-color-content-negative));\n  border-right: 0;\n  box-shadow: 0 -0.1 * $unit 0 * $unit 0 * $unit rgba(var(--ods-color-content-negative));\n}\n\n.numberError {\n  color: rgba(var(--ods-color-content-negative));\n  font-size: var(--font-size-small);\n  line-height: 1.43;\n  text-align: left;\n  margin-top: 4 * $unit-small;\n}\n\n.sending::before {\n  float: left;\n  margin-left: 12 * $unit;\n  width: 16 * $unit;\n  height: 16 * $unit;\n  content: '';\n  opacity: 0.5;\n\n  background-image: url('./assets/spinner.svg');\n  background-position: left center;\n  background-repeat: no-repeat;\n\n  animation-name: spin;\n  animation-duration: 4000ms;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n}\n\n@keyframes spin {\n  /* stylelint-disable rule-empty-line-before */\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n  /* stylelint-enable rule-empty-line-before */\n}\n\n.copyLinkSection {\n  margin-top: 86 * $unit;\n  text-align: left;\n}\n\n.linkContainer {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  padding-top: 16 * $unit;\n}\n\n.copySuccess .actionContainer::before {\n  width: 13 * $unit;\n  height: 11 * $unit;\n  display: inline-block;\n  justify-content: center;\n  content: '';\n  background-repeat: no-repeat;\n  background-image: url('./assets/checkmark.svg');\n  z-index: 1;\n}\n\n.linkText {\n  resize: none;\n  border: 0;\n  height: 24 * $unit;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: inherit;\n  line-height: 1.5;\n  color: var(--osdk-color-content-body);\n  white-space: nowrap;\n  font-family: var(--osdk-font-family-body);\n}\n\n.copySuccess .copyToClipboard {\n  border-bottom-color: transparent;\n}\n\n.divider {\n  border: 1px solid $color-divider;\n  margin-top: 11 * $unit;\n}\n\n.btn {\n  @include width-parent-relative(112, $parent-width);\n\n  height: 48 * $unit;\n  float: right;\n  border-radius: 0 4 * $unit 4 * $unit 0;\n  padding: 0;\n}\n\n.styledLabel {\n  display: flex;\n  width: 90%;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  margin: 0 auto;\n}\n\n.styledLabel::before,\n.styledLabel::after {\n  content: '';\n  border: 1px solid $color-divider;\n  margin: 0 18 * $unit 0 0;\n  flex: 1 0 18 * $unit;\n}\n\n.styledLabel::after {\n  margin: 0 0 0 20 * $unit;\n}\n\n.viewOptionsGroup {\n  margin: 16 * $unit;\n  display: flex;\n  justify-content: center;\n}\n\n.viewOption {\n  margin: 0 16 * $unit;\n}\n\n%_option-icon {\n  width: 22 * $unit;\n  height: 16 * $unit;\n  display: inline-block;\n  content: '';\n  vertical-align: text-bottom;\n  background-repeat: no-repeat;\n}\n\n.smsLinkOption::before {\n  @extend %_option-icon;\n  background-image: url('./assets/icon-sms.svg');\n}\n\n.qrCodeLinkOption::before {\n  @extend %_option-icon;\n  background-image: url('./assets/icon-qr-code.svg');\n}\n\n.copyLinkOption::before {\n  @extend %_option-icon;\n  background-image: url('./assets/icon-copy-link.svg');\n}\n","@import '../Theme/constants';\n\n/* \"Loading\" phone number input placeholder text */\n.loading {\n  color: rgba(var(--ods-color-content-placeholder));\n  font-size: var(--font-size-large);\n  line-height: 1.6;\n  margin: 8 * $unit-large;\n  float: left;\n}\n\n.phoneNumberContainer {\n  float: left;\n  width: 100%;\n  padding: 8 * $unit 12 * $unit;\n}\n\n.phoneNumberContainer :global {\n  /* stylelint-disable selector-class-pattern */\n  .PhoneInputCountryIcon--border,\n  .react-phone-number-input__icon {\n    height: 28.8 * $unit;\n    width: 28.8 * $unit;\n  }\n\n  .react-phone-number-input__icon {\n    height: 28.8 * $unit;\n    width: 28.8 * $unit;\n    border: 0;\n    display: block;\n  }\n\n  .PhoneInputCountryIcon--border {\n    background-color: transparent;\n    box-shadow: none;\n  }\n  /* stylelint-enable selector-class-pattern */\n}\n\n.phoneNumberContainer {\n  input {\n    overflow: hidden;\n    width: 100%;\n    height: 30 * $unit;\n    border: 0;\n    font-size: var(--font-size-base);\n  }\n\n  button:focus,\n  input:focus {\n    outline: auto 5px -webkit-focus-ring-color;\n  }\n}\n\n.flagIcon {\n  background-size: 100%;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n","@import '../Theme/constants';\n\n.qrCodeHelp {\n  min-height: unset;\n}\n\n.qrCodeHelpButton {\n  cursor: pointer;\n}\n\n.qrCodeHelpIcon {\n  width: 20 * $unit;\n  height: 16 * $unit;\n  display: inline-block;\n  vertical-align: text-bottom;\n  content: '';\n  background-repeat: no-repeat;\n  background-image: url('./assets/icon-info.svg');\n}\n\n.qrCodeHelpList {\n  font-size: var(--font-size-small);\n  text-align: left;\n  margin-bottom: 16 * $unit;\n}\n","@import '../../Theme/constants';\n\n.pageTitle {\n  margin-top: 0;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  justify-content: space-around;\n  align-items: flex-start;\n}\n\n.icon {\n  @extend %icon-circle-background;\n  height: 144 * $unit;\n  width: 144 * $unit;\n  background-size: contain;\n  background-image: url('./assets/connection-large.svg');\n  margin-top: 0;\n  margin-bottom: 0;\n  margin-left: auto;\n  margin-right: auto;\n\n  @media (--shorter-viewport) {\n    height: 120 * $unit;\n    width: 120 * $unit;\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  @media (--longer-viewport) {\n    margin-top: 32 * $unit;\n    margin-bottom: 32 * $unit;\n  }\n}\n\n.customIcon {\n  height: 144 * $unit;\n  width: auto;\n  max-width: 144 * $unit;\n  margin: 0 auto;\n\n  @media (--shorter-viewport) {\n    height: 120 * $unit;\n    max-width: 120 * $unit;\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  @media (--longer-viewport) {\n    margin-top: 32 * $unit;\n  }\n}\n\n.header {\n  position: relative;\n  z-index: 1;\n  margin-top: 0;\n  top: 16 * $unit;\n}\n\n.help {\n  z-index: 0;\n  margin-bottom: 0;\n  font-size: var(--osdk-font-size-body);\n\n  @media (--shorter-viewport) {\n    font-size: var(--font-size-small);\n    padding: 24 * $unit 12 * $unit 12 * $unit;\n  }\n}\n","@import '../../Theme/constants';\n\n/*\n * NOTE: iOS Safari has a strange bug where SVG background images are not displayed on some iOS devices\n *       if margin, background image properties are not declared in a specific order together & before background-image\n *       Best solution is to explicitly list out all background properties.\n *       ref: http://geoffmuskett.com/strange-bug-on-ios-svg-background-images-no-showing/\n */\n.icon {\n  margin: 50 * $unit auto;\n  height: 144 * $unit;\n  width: 144 * $unit;\n  background-size: 144 * $unit;\n  background-image: url('./assets/return-to-computer-large.svg');\n  background-repeat: no-repeat;\n  background-position: top center;\n  background-color: var(--osdk-color-background-icon);\n  border-radius: 50%;\n}\n\n.text {\n  font-size: var(--font-size-small);\n  line-height: 1.43;\n}\n","@import '../../Theme/constants';\n\n.container {\n  display: flex;\n  flex-direction: column;\n}\n\n.buttonContainer {\n  /* to raise button slightly so bottom of focus border is not cut off */\n  margin-bottom: 8 * $unit;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  justify-content: center;\n}\n\n.list {\n  list-style: none;\n  padding: 0;\n}\n\n.stage {\n  display: flex;\n  align-items: center;\n\n  /* to position line connecting all three icons */\n  padding-bottom: 32 * $unit;\n  position: relative;\n\n  /* line connecting all three icons */\n  &::before {\n    content: '';\n    display: block;\n    background-color: $color-icons-connector-line;\n    width: 2 * $unit;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 23 * $unit;\n  }\n\n  &:last-child::before {\n    display: none;\n  }\n}\n\n.stageIcon {\n  @extend %icon-circle-background;\n  background-size: contain;\n  flex-shrink: 0;\n  float: left;\n  height: 48 * $unit;\n  width: 48 * $unit;\n  position: relative;\n  z-index: 1;\n\n  &-sms {\n    background-image: url('./assets/mobile.svg');\n  }\n\n  &-take-photos {\n    background-image: url('./assets/take-photos.svg');\n  }\n\n  &-take-selfie {\n    background-image: url('./assets/take-selfie.svg');\n  }\n\n  &-return-to-computer {\n    background-image: url('./assets/return-to-computer.svg');\n  }\n}\n\n.stageMessage {\n  text-align: left;\n  margin-left: 15 * $unit;\n  flex-grow: 1;\n  flex-basis: 100%;\n\n  &-sms,\n  &-take-photos,\n  &-return-to-computer {\n    color: var(--osdk-color-content-body);\n  }\n}\n","@import '../../Theme/constants';\n\n.content {\n  position: relative;\n  margin-bottom: 16 * $unit;\n  flex: 1;\n  flex-direction: column;\n  display: flex;\n}\n\n.subTitle {\n  font-size: var(--font-size-small);\n\n  &::before {\n    content: '';\n    display: inline-block;\n    width: 16 * $unit-small;\n    height: 16 * $unit-small;\n    background-image: url('./assets/warningSmall.svg');\n    background-size: contain;\n    vertical-align: middle;\n    line-height: 1;\n    margin-right: 5 * $unit-small;\n    margin-top: -2 * $unit-small;\n  }\n}\n\n.bolder {\n  font-weight: 600;\n}\n\n.makeSure {\n  color: var(--osdk-color-content-body);\n  font-weight: 600;\n  margin-bottom: 8 * $unit;\n\n  @media (--small-viewport) {\n    text-align: left;\n  }\n}\n\n.docImageContainer {\n  position: relative;\n  flex: 1;\n  width: 340 * $unit;\n  margin: 0 auto;\n  @media (--small-viewport) {\n    width: 100%;\n  }\n}\n\n.docImage {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n\n.label {\n  fill: var(--osdk-color-content-body);\n  font-size: var(--font-size-small);\n}\n","@import '../../Theme/constants';\n\n.content {\n  text-align: left;\n  margin: 0 48 * $unit auto;\n\n  @media (--small-viewport) {\n    margin: 0 0 auto;\n  }\n}\n\n.requirements {\n  font-weight: 600;\n  color: var(--osdk-color-content-body);\n  margin-bottom: 16 * $unit;\n}\n\n.requirement {\n  display: flex;\n  padding-bottom: 16 * $unit;\n  padding-left: 16 * $unit;\n  position: relative;\n\n  &::before {\n    content: '';\n    background-color: var(--osdk-color-background-alert-info);\n    border-radius: 50%;\n    display: inline-block;\n    height: 6 * $unit;\n    width: 6 * $unit;\n    position: absolute;\n    left: 0;\n    top: 6 * $unit;\n  }\n}\n\n.bolder {\n  font-weight: 600;\n}\n"],"sourceRoot":""}