@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Chakra-Petch-Regular'),
        url('https://some-url-to-fonts/Chakra-Petch-Regular.woff2 ') format('woff2');
}

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Chakra-Petch-Bold'),
        url('https://some-url-to-fonts/Chakra-Petch-Bold.woff2 ') format('woff2');
}

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Chakra-Petch-Thin'),
        url('https://some-url-to-fonts/Chakra-Petch-Thin.woff2 ') format('woff2');
}

body, .app-block {
    font-family: 'Chakra petch', sans-serif;
}

#mainBody {
  padding: 13px 36px 25px;
  height: 464px;
  border: 1px solid #989898;
  box-shadow: 0 2px 27px rgba(0, 0, 0, 0.5);
}

form {
  position: relative;
}

.universal-input {
  margin-top: 30px;
}

button[data-testid="login-form__button-submit"] {
  background: black;
  padding: 10px 22px 11px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
}

{
  "form.auth.title": "",
  "form.auth.subtitle": "",
  "login.link": "Log in",
  "sign-up.link": "Sign up",
  "back-button.text": "Back to login",
  "form.field.email": "Email",
  "form.field.password": "Password",
  "form.field.new-password": "New password",
  "form.field.confirm-password.validation": "Passwords do not match",
  "form.field.confirm-password": "Confirm password",
  "form.field.required.validation": "Required",
  "form.login.login-button": "Log in",
  "form.reset-password.reset-button": "Recover password",
  "form.reset-password.link": "Forgot your password?",
  "form.reset-password.header": "Recover password",
  "form.reset-password.message": "You will receive an email with a link to reset your password.",
  "form.reset-password.success": "It’s okay, we all forget sometimes. Just change your password using the instructions we sent to {email}.",
  "form.reset-password.resend": "Resend message",
  "form.set-password.set-button": "Set new password",
  "form.set-password.success": "Password is successfully recovered.",
  "form.field.sign-up.consent" : "Please choose whether or not to give us your {link} to carry out profiling and use your data for marketing purposes.",
  "form.field.sign-up.username": "Username",
  "form.field.sign-up.email": "Email",
  "form.field.sign-up.password": "Password",
  "form.field.sign-up.bday": "Date of birth",
  "form.field.sign-up.birthday": "Date of birth",
  "form.field.sign-up.nickname": "Nickname",
  "form.field.sign-up.last_name": "Last name",
  "form.field.sign-up.first_name": "First name",
  "form.field.sign-up.family-name": "Last name",
  "form.field.sign-up.given-name": "First name",
  "form.field.sign-up.gender": "Gender",
  "form.field.sign-up.country": "Country",
  "form.field.sign-up.country-name": "Country",
  "form.field.sign-up.platform": "Platform",
  "form.field.sign-up.promo_email_agreement": "Subscribe to our newsletter",
  "form.field.sign-up.password_confirm": "Confirm password",
  "form.field.sign-up.complete-registration.description": "Please confirm your account following the instructions we sent to {email}.",
  "form.field.sign-up.confirm-registration.description": "We sent a confirmation code to {email}.{newLine}{timerMessage}",
  "form.field.sign-up.complete-registration.spam": "If you cannot find the confirmation email, please check the spam folder.",
  "form.field.sign-up.complete-registration.button": "Thanks, dismiss",
  "form.sign-up.sign-up-button": "Create account",
  "form.sign-up.sign-up-button.accept": "Accept and create",
  "form.sign-up.sign-up-button.decline": "Skip and create",
  "form.get-code.confirm-code.we-sent": "We sent a confirmation code to {whereTo}.",
  "form.get-code.confirm-code.can-resend-timer": "You can get a new code in {timer} {timer, plural, one {second} other {seconds}}.",
  "form.get-link.confirm-link.we-sent": "We’ve sent a confirmation email with a link to {whereTo}.",
  "form.get-link.confirm-link.can-resend-timer": "You can get a new confirmation email with a link in {timer} {timer, plural, one {second} other {seconds}}.",
  "form.ask.header": "Provide additional info",
  "form.ask.back-button.text": "Back to {link}",
  "form.ask.button.confirm": "continue",
  "form.ask.back-button.text.link": "login options",
  "form.ask.title.collect.email": "We will send an email with the confirmation code.",
  "form.ask.title.collect.phone": "We will send you a confirmation code.",
  "form.ask.title.collect.both-data.phone": "Confirm your phone and email address.",
  "form.ask.title.collect.both-data.email": "Confirm your email address and phone.",
  "form.ask.title.collect.confirm.phone": "Confirm your phone",
  "form.ask.title.collect.confirm.email": "Confirm your email address",
  "form.ask.title.collect.confirm.both-data": "Confirm your data",
  "form.ask.confirm-code.email": "Enter the code we sent to {whereTo} to confirm your email address.",
  "form.ask.confirm-code.phone": "Enter a confirmation code we sent to {whereTo}.",
  "form.ask.confirm-code.email.link": "Click the link in the email we sent to {whereTo} to confirm your email address.",
  "form.ask.confirm-code.email.link.resend": "Resend confirmation email",
  "back-button.previous-step": "Back to {link}",
  "back-button.previous-step.link": "previous step",
  "form.ask.skip-button": "Skip",
  "form.ask.dismiss-button": "dismiss",
  "form.ask.ask-button": "Submit",
  "form.ask.email.field-title": "Enter your email to secure your account.",
  "form.ask.phone.field-title": "Enter your phone to secure your account.",
  "form.ask.success-message": "Your data was saved.",
  "form.ask.confirm-registration.description": "We sent a confirmation code to {whereTo}.{newLine}{timerMessage}",
  "form.ask.confirm-registration.exist-phone": "This phone is linked to another {merchant} account. Log in with this phone?",
  "form.ask.confirm-registration.exist-email": "This email is linked to another {merchant} account. Log in with this email?",
  "form.ask.confirm-registration.exist-user.btn": "Yes, log in",
  "form.confirm-status.success.title": "Success",
  "form.confirm.main-title": "Are you trying to log in?",
  "form.confirm.decline-btn": "No",
  "form.confirm.accept-btn": "Yes",
  "form.confirm-status.success.subtitle.phone": "Your phone number has been confirmed. You can close this tab.",
  "form.confirm-status.success.subtitle.email": "Your email address has been confirmed. You can close this tab.",
  "form.confirm-status.fail.title.phone": "Phone number not confirmed",
  "form.confirm-status.fail.title.email": "Email address not confirmed",
  "form.confirm-status.fail.subtitle": "Confirmation code has expired. Go back to login and try again.",
  "form.confirm-status.decline.header": "Thank you. This answer helps us improve our services.",
  "form.confirm-code.invalid": "Confirmation code has expired.",
  "form.otp.description": "Enter the 6-digit verification code we sent to {destination}.",
  "form.otp.resend": "Resend code",
  "form.otp.resend-timer": "Resend code in {count} {count, plural, one {second} other {seconds}}",
  "form.otp.send-button": "Confirm",
  "form.field.otp.placeholder": "Verification code",
  "form.field.search.placeholder": "Search...",
  "form.change-auth-method.phone.message": "Enter phone number",
  "form.change-auth-method.email-username.message": "Enter email or username",
  "form.change-auth-method.email.message": "Enter email",
  "form.change-auth-method.username.message": "Enter username",
  "form.enter-your.email-username-phone": "Enter your email, username, or phone",
  "form.enter-your.email-username": "Enter your email or username",
  "form.enter-your.email-phone": "Enter your email or phone",
  "form.enter-your.username-phone": "Enter your username or phone",
  "form.enter-your.phone": "Enter your phone to receive SMS",
  "form.enter-your.email": "Enter your email address to get code",
  "form.enter-your.username": "Enter your username",
  "form.field.phone.code.title": "Enter the confirmation code",
  "form.button.login-now": "Log in",
  "form.button.submit": "Submit",
  "form.email-login.send-code.text": "We will send you a code to the email address you entered. Use this code to log in.",
  "form.phone-login.send-sms.text": "We will send you a code to the phone number you entered. Use this code to log in.",
  "form.button.get-code": "Get code",
  "form.button.get-link": "Get link",
  "form.button.get-link.resend": "Get link",
  "form.enter-phone-code.error.incorrect-code": "Incorrect confirmation code. Check the code that you received and try again.",
  "form.phone-login.get-code.timer-message": "We sent a confirmation code to {whereTo}.{newLine}{timerMessage}",
  "form.phone-login.get-code.resend-message": "We sent you a text with a confirmation code. {link}.",
  "form.phone-login.get-code.resend-code": "Resend the code",
  "success-message.footer": "This window will automatically close in 5 seconds",
}

{
  "en": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "ar": {
    "form.auth.title": "الاشتراك",
    "form.auth.subtitle": "يُرجى إدخال بريدك الإلكتروني للمصادقة"
  },
  "bg": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email<span>{timer}</span>"
  },
  "cn": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "cs": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "de": {
    "form.auth.title": "Registrieren",
    "form.auth.subtitle": "Bitte gib deine E-Mail-Adresse zur Authentifizierung ein"
  },
  "es": {
    "form.auth.title": "Registrarse",
    "form.auth.subtitle": "Introduce tu correo para la autentificación."
  },
  "fr": {
    "form.auth.title": "S'abonner",
    "form.auth.subtitle": "Veuillez saisir votre adresse e-mail pour vous authentifier"
  },
  "he": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "it": {
    "form.auth.title": "Iscriviti",
    "form.auth.subtitle": "Inserisci il tuo indirizzo e-mail per l'autenticazione"
  },
  "ja": {
    "form.auth.title": "サインアップ",
    "form.auth.subtitle": "認証のためにメールアドレスを入力してください"
  },
  "ko": {
    "form.auth.title": "가입",
    "form.auth.subtitle": "인증을 위해 이메일을 입력하세요"
  },
  "pl": {
    "form.auth.title": "Zarejestruj się",
    "form.auth.subtitle": "Podaj swój adres e-mail w celu uwierzytelnienia"
  },
  "pt": {
    "form.auth.title": "Registrar-se",
    "form.auth.subtitle": "Insira seu e-mail para autenticação"
  },
  "ro": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "ru": {
    "form.auth.title": "Подписаться",
    "form.auth.subtitle": "Введите адрес электронной почты для аутентификации"
  },
  "th": {
    "form.auth.title": "สมัคร",
    "form.auth.subtitle": "โปรดกรอกอีเมลของคุณเพื่อการตรวจสอบสิทธิ์"
  },
  "tr": {
    "form.auth.title": "Kaydol",
    "form.auth.subtitle": "Kimlik doğrulama için lütfen e-postanı gir"
  },
  "tw": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "vi": {
    "form.auth.title": "Đăng Ký",
    "form.auth.subtitle": "Vui lòng nhập email của bạn để xác thực",
  },
  "km": {
    "form.auth.title": "ចុះឈ្មោះ",
    "form.auth.subtitle": "បញ្ចូលអ៊ីមែល"
  },
  "id": {
    "form.auth.title": "Daftar",
    "form.auth.subtitle": "Masukkan email"
  },
  "lo": {
    "form.auth.title": "ລົງຊື່ເຂົ້າໃຊ້",
    "form.auth.subtitle": "ປ້ອນອີເມວ"
  },
  "my": {
    "form.auth.title": "အကောင့်ဖွင့်ရန်",
    "form.auth.subtitle": "အီးမေးလ်ကို ထည့်သွင်းပါ"
  },
  "ph": {
    "form.auth.title": "Mag-sign up",
    "form.auth.subtitle": "Ilagay ang email"
  },
  "ne": {
    "form.auth.title": "साइन अप गर्नुहोस्",
    "form.auth.subtitle": "इमेल हाल्नुहोस्"
  }
}

const xl = new Widget({
  // any other params
  customLabels: ‘https://your-domain.com/assets/loginWidgetLocales.json’
});

#mainBody {
  padding: 13px 36px 25px;
  height: 464px;
  border: 1px solid #989898;
  box-shadow: 0 2px 27px rgba(0, 0, 0, 0.5);
}

form {
  position: relative;
}

.universal-input {
  margin-top: 30px;
}

button[data-testid="login-form__button-submit"] {
  background: black;
  padding: 10px 22px 11px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
}

<script>
    window.SB.subscribe((api) => {
        api.login.setConfigMiddleware((config) => ({
            ...config,
            customStyle: "https://your-domain.com/assets/loginWidgetStyles.css"
        }));
    });
</script>