@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display&display=swap');@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap';body {
    font-family: var(--ads-fonts-body, 'Roboto', Arial, sans-serif);
}

.__histoire-render-story:not(.__histoire-render-custom-controls) {
  overflow: visible;
}


.resize-observer[data-v-b329ee4c]{
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100%;
  border:none;
  background-color:transparent;
  pointer-events:none;
  display:block;
  overflow:hidden;
  opacity:0
}

.resize-observer[data-v-b329ee4c] object{
  display:block;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  overflow:hidden;
  pointer-events:none;
  z-index:-1
}

.v-popper__popper{
  z-index:10000;
  top:0;
  left:0;
  outline:none
}

.v-popper__popper.v-popper__popper--hidden{
  visibility:hidden;
  opacity:0;
  transition:opacity .15s,visibility .15s;
  pointer-events:none
}

.v-popper__popper.v-popper__popper--shown{
  visibility:visible;
  opacity:1;
  transition:opacity .15s
}

.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{
  transition:none!important
}

.v-popper__backdrop{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:none
}

.v-popper__inner{
  position:relative;
  box-sizing:border-box;
  overflow-y:auto
}

.v-popper__inner>div{
  position:relative;
  z-index:1;
  max-width:inherit;
  max-height:inherit
}

.v-popper__arrow-container{
  position:absolute;
  width:10px;
  height:10px
}

.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{
  display:none
}

.v-popper__arrow-inner,.v-popper__arrow-outer{
  border-style:solid;
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:0
}

.v-popper__arrow-inner{
  visibility:hidden;
  border-width:7px
}

.v-popper__arrow-outer{
  border-width:6px
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{
  left:-2px
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
  left:-1px
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{
  border-bottom-width:0;
  border-left-color:transparent!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{
  top:-2px
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{
  top:0
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
  border-top-width:0;
  border-left-color:transparent!important;
  border-right-color:transparent!important;
  border-top-color:transparent!important
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{
  top:-4px
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
  top:-6px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{
  top:-2px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
  top:-1px
}

.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
  border-left-width:0;
  border-left-color:transparent!important;
  border-top-color:transparent!important;
  border-bottom-color:transparent!important
}

.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{
  left:-4px
}

.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
  left:-6px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{
  right:-10px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{
  border-right-width:0;
  border-top-color:transparent!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{
  left:-2px
}

.v-popper--theme-dropdown .v-popper__inner{
  background:#fff;
  color:#000;
  border-radius:6px;
  border:1px solid #ddd;
  box-shadow:0 6px 30px #0000001a
}

.v-popper--theme-dropdown .v-popper__arrow-inner{
  visibility:visible;
  border-color:#fff
}

.v-popper--theme-dropdown .v-popper__arrow-outer{
  border-color:#ddd
}

.v-popper--theme-tooltip .v-popper__inner{
  background:rgba(0,0,0,.8);
  color:#fff;
  border-radius:6px;
  padding:7px 12px 6px
}

.v-popper--theme-tooltip .v-popper__arrow-outer{
  border-color:#000c
}

.htw-range-input::-webkit-slider-thumb{
  height:.75rem;
  width:.75rem;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border-radius:9999px;
  border-width:1px;
  border-style:solid;
  border-color:#00000040;
  --tw-bg-opacity: 1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity))
}

:is(.htw-dark .htw-range-input)::-webkit-slider-thumb{
  border-color:#ffffff40;
  --tw-bg-opacity: 1;
  background-color:rgb(63 63 70 / var(--tw-bg-opacity))
}

.htw-range-input:hover::-webkit-slider-thumb{
  --tw-border-opacity: 1 !important;
  border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;
  --tw-bg-opacity: 1 !important;
  background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important
}

.htw-range-input::-moz-range-thumb{
  height:.75rem;
  width:.75rem;
  -moz-appearance:none;
  -webkit-appearance:none;
  appearance:none;
  border-radius:9999px;
  border-width:1px;
  border-style:solid;
  border-color:#00000040;
  --tw-bg-opacity: 1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity))
}

:is(.htw-dark .htw-range-input)::-moz-range-thumb{
  border-color:#ffffff40;
  --tw-bg-opacity: 1;
  background-color:rgb(63 63 70 / var(--tw-bg-opacity))
}

.htw-range-input:hover::-moz-range-thumb{
  --tw-border-opacity: 1 !important;
  border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;
  --tw-bg-opacity: 1 !important;
  background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important
}

.v-popper{
  line-height:0
}

.htw-dark .v-popper--theme-dropdown .v-popper__inner{
  --tw-border-opacity: 1;
  border-color:rgb(31 31 33 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color:rgb(63 63 70 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color:rgb(244 244 245 / var(--tw-text-opacity))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{
  --tw-border-opacity: 1;
  border-color:rgb(63 63 70 / var(--tw-border-opacity))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{
  --tw-border-opacity: 1;
  border-color:rgb(31 31 33 / var(--tw-border-opacity))
}

.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{
  transform:scale(.75)
}

.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{
  transform:none;
  transition:transform .15s cubic-bezier(0,1,.5,1)
}

.v-popper__popper:focus-visible{
  outline:none
}

.htw-bind-col-size{
  grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))
}

.__histoire-json-code[data-v-935458a7] .cm-editor{
  height:100%;
  min-width:280px
}

/* @TODO custom themes */

.v-popper {
  line-height: 0;
}

.htw-dark .v-popper--theme-dropdown .v-popper__inner{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity));
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-700) / var(--tw-bg-opacity));
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-100) / var(--tw-text-opacity))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-700) / var(--tw-border-opacity))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity))
}

.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper {
  transform: scale(.75);
}

.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper {
  transform: none;
  transition: transform .15s cubic-bezier(0, 1, .5, 1);
}

.v-popper__popper:focus-visible {
  outline: none;
}

.__histoire-scale-x-enter-active,
  .__histoire-scale-x-leave-active {
  transition: transform .15s, opacity .15s;
}

.__histoire-scale-x-enter-from,
  .__histoire-scale-x-leave-to {
  transform: scaleX(0);
  opacity: 0;
}

.__histoire-scale-y-enter-active,
  .__histoire-scale-y-leave-active {
  transition: transform .15s, opacity .15s;
}

.__histoire-scale-y-enter-from,
  .__histoire-scale-y-leave-to {
  transform: scaleY(0);
  opacity: 0;
}

.__histoire-fade-enter-active,
  .__histoire-fade-leave-active {
  transition: opacity .15s;
}

.__histoire-fade-enter-from,
  .__histoire-fade-leave-to {
  opacity: 0;
}

.__histoire-fade-bottom-enter-active,
  .__histoire-fade-bottom-leave-active {
  transition: transform .15s, opacity .15s;
  transform: translateY(0px);
}

.__histoire-fade-bottom-enter-from,
  .__histoire-fade-bottom-leave-to {
  transform: translateY(32px);
  opacity: 0;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

a,
input,
button {
  color: inherit;
}

a {
  text-decoration: inherit;
}

input, button {
  font-family: inherit;
}

a,
button {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

body,
  pre {
  margin: 0;
}

html,
  body,
  #app {
  height: 100%;
}

html {
  font-family: 'Noto Sans Display', system-ui, sans-serif;
  font-size: 1rem;
}

body {
  font-size: 1.125rem;
}

@media (min-width: 640px) {
  body {
    font-size: .875rem;
  }
}

.__histoire-render-story:not(.__histoire-render-custom-controls) {
  overflow: auto;
  min-height: 100%;
}

.__histoire-code .shiki {
  background: transparent !important;
}

.htw-prose h1:not(:hover) .header-anchor[aria-hidden="true"], .htw-prose h2:not(:hover) .header-anchor[aria-hidden="true"], .htw-prose h3:not(:hover) .header-anchor[aria-hidden="true"], .htw-prose h4:not(:hover) .header-anchor[aria-hidden="true"] {
  visibility: hidden;
}

.htw-prose hr {
  margin: 1rem 0;
}

.__histoire-pane-shadow-from-right {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: right;
}

.htw-dark .__histoire-pane-shadow-from-right {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}

*, ::before, ::after{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: 
}

::backdrop{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: 
}

.htw-prose{
  color:var(--tw-prose-body);
  max-width:65ch;
}

.htw-prose :where(p):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em;
  margin-bottom:1.25em
}

.htw-prose :where([class~="lead"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-lead);
  font-size:1.25em;
  line-height:1.6;
  margin-top:1.2em;
  margin-bottom:1.2em
}

.htw-prose :where(a):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:rgb(var(--_histoire-color-primary-500));
  text-decoration:none;
  font-weight:500;
}

.htw-prose :where(a):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)):hover{
  text-decoration:underline
}

.htw-prose :where(strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-bold);
  font-weight:600
}

.htw-prose :where(a strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(blockquote strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(thead th strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(ol):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:decimal;
  margin-top:1.25em;
  margin-bottom:1.25em;
  padding-left:1.625em
}

.htw-prose :where(ol[type="A"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-alpha
}

.htw-prose :where(ol[type="a"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-alpha
}

.htw-prose :where(ol[type="A" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-alpha
}

.htw-prose :where(ol[type="a" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-alpha
}

.htw-prose :where(ol[type="I"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-roman
}

.htw-prose :where(ol[type="i"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-roman
}

.htw-prose :where(ol[type="I" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-roman
}

.htw-prose :where(ol[type="i" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-roman
}

.htw-prose :where(ol[type="1"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:decimal
}

.htw-prose :where(ul):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:disc;
  margin-top:1.25em;
  margin-bottom:1.25em;
  padding-left:1.625em
}

.htw-prose :where(ol > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::marker{
  font-weight:400;
  color:var(--tw-prose-counters)
}

.htw-prose :where(ul > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::marker{
  color:var(--tw-prose-bullets)
}

.htw-prose :where(dt):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  margin-top:1.25em
}

.htw-prose :where(hr):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-color:var(--tw-prose-hr);
  border-top-width:1px;
  margin-top:3em;
  margin-bottom:3em
}

.htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:500;
  font-style:italic;
  color:var(--tw-prose-quotes);
  border-left-width:0.25rem;
  border-left-color:var(--tw-prose-quote-borders);
  quotes:"\201C""\201D""\2018""\2019";
  margin-top:1.6em;
  margin-bottom:1.6em;
  padding-left:1em;
  margin-left:0;
  margin-right:0;
  background-color:rgb(var(--_histoire-color-gray-100));
  padding:.25rem .375rem;
}

.htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)) p:first-child{
  margin-top:0
}

.htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)) p:last-child{
  margin-bottom:0
}

.htw-dark .htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  background-color:rgb(var(--_histoire-color-gray-750))
}

.htw-prose :where(blockquote p:first-of-type):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before{
  content:open-quote
}

.htw-prose :where(blockquote p:last-of-type):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  content:close-quote
}

.htw-prose :where(h1):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:800;
  font-size:2.25em;
  margin-top:0;
  margin-bottom:0.8888889em;
  line-height:1.1111111
}

.htw-prose :where(h1 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:900;
  color:inherit
}

.htw-prose :where(h2):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:700;
  font-size:1.5em;
  margin-top:2em;
  margin-bottom:1em;
  line-height:1.3333333
}

.htw-prose :where(h2 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:800;
  color:inherit
}

.htw-prose :where(h3):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  font-size:1.25em;
  margin-top:1.6em;
  margin-bottom:0.6em;
  line-height:1.6
}

.htw-prose :where(h3 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:700;
  color:inherit
}

.htw-prose :where(h4):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  margin-top:1.5em;
  margin-bottom:0.5em;
  line-height:1.5
}

.htw-prose :where(h4 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:700;
  color:inherit
}

.htw-prose :where(img):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(picture):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  display:block;
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(kbd):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:500;
  font-family:inherit;
  color:var(--tw-prose-kbd);
  box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size:0.875em;
  border-radius:0.3125rem;
  padding-top:0.1875em;
  padding-right:0.375em;
  padding-bottom:0.1875em;
  padding-left:0.375em
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-code);
  font-weight:normal;
  font-size:0.8rem;
  background-color:rgb(var(--_histoire-color-gray-500) / 20%);
  padding:0.05rem 0.5rem;
  border-radius:0.25rem;
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before, .htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  display:none
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before{
  content:"`"
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  content:"`"
}

.htw-prose :where(a code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(h1 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(h2 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit;
  font-size:0.875em
}

.htw-prose :where(h3 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit;
  font-size:0.9em
}

.htw-prose :where(h4 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(blockquote code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(thead th code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(pre):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-pre-code);
  background-color:var(--tw-prose-pre-bg);
  overflow-x:auto;
  font-weight:400;
  font-size:0.875em;
  line-height:1.7142857;
  margin-top:1.7142857em;
  margin-bottom:1.7142857em;
  border-radius:0.375rem;
  padding-top:0.8571429em;
  padding-right:1.1428571em;
  padding-bottom:0.8571429em;
  padding-left:1.1428571em
}

.htw-prose :where(pre code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  background-color:transparent;
  border-width:0;
  border-radius:0;
  padding:0;
  font-weight:inherit;
  color:inherit;
  font-size:inherit;
  font-family:inherit;
  line-height:inherit
}

.htw-prose :where(pre code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before{
  content:none
}

.htw-prose :where(pre code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  content:none
}

.htw-prose :where(table):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  width:100%;
  table-layout:auto;
  text-align:left;
  margin-top:2em;
  margin-bottom:2em;
  font-size:0.875em;
  line-height:1.7142857
}

.htw-prose :where(thead):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-bottom-width:1px;
  border-bottom-color:var(--tw-prose-th-borders)
}

.htw-prose :where(thead th):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  vertical-align:bottom;
  padding-right:0.5714286em;
  padding-bottom:0.5714286em;
  padding-left:0.5714286em
}

.htw-prose :where(tbody tr):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-bottom-width:1px;
  border-bottom-color:var(--tw-prose-td-borders)
}

.htw-prose :where(tbody tr:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-bottom-width:0
}

.htw-prose :where(tbody td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  vertical-align:baseline
}

.htw-prose :where(tfoot):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-top-width:1px;
  border-top-color:var(--tw-prose-th-borders)
}

.htw-prose :where(tfoot td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  vertical-align:top
}

.htw-prose :where(figure > *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0;
  margin-bottom:0
}

.htw-prose :where(figcaption):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-captions);
  font-size:0.875em;
  line-height:1.4285714;
  margin-top:0.8571429em
}

.htw-prose{
  --tw-prose-body:#374151;
  --tw-prose-headings:#111827;
  --tw-prose-lead:#4b5563;
  --tw-prose-links:#111827;
  --tw-prose-bold:#111827;
  --tw-prose-counters:#6b7280;
  --tw-prose-bullets:#d1d5db;
  --tw-prose-hr:#e5e7eb;
  --tw-prose-quotes:#111827;
  --tw-prose-quote-borders:#e5e7eb;
  --tw-prose-captions:#6b7280;
  --tw-prose-kbd:#111827;
  --tw-prose-kbd-shadows:17 24 39;
  --tw-prose-code:#111827;
  --tw-prose-pre-code:#e5e7eb;
  --tw-prose-pre-bg:#1f2937;
  --tw-prose-th-borders:#d1d5db;
  --tw-prose-td-borders:#e5e7eb;
  --tw-prose-invert-body:#d1d5db;
  --tw-prose-invert-headings:#fff;
  --tw-prose-invert-lead:#9ca3af;
  --tw-prose-invert-links:#fff;
  --tw-prose-invert-bold:#fff;
  --tw-prose-invert-counters:#9ca3af;
  --tw-prose-invert-bullets:rgb(var(--_histoire-color-gray-500));
  --tw-prose-invert-hr:rgb(var(--_histoire-color-gray-800));
  --tw-prose-invert-quotes:#f3f4f6;
  --tw-prose-invert-quote-borders:rgb(var(--_histoire-color-gray-800));
  --tw-prose-invert-captions:#9ca3af;
  --tw-prose-invert-kbd:#fff;
  --tw-prose-invert-kbd-shadows:255 255 255;
  --tw-prose-invert-code:#fff;
  --tw-prose-invert-pre-code:#d1d5db;
  --tw-prose-invert-pre-bg:rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders:#4b5563;
  --tw-prose-invert-td-borders:#374151;
  font-size:1rem;
  line-height:1.75
}

.htw-prose :where(picture > img):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0;
  margin-bottom:0
}

.htw-prose :where(video):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.1rem;
  margin-bottom:0.1rem
}

.htw-prose :where(ol > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-left:0.375em
}

.htw-prose :where(ul > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-left:0.375em
}

.htw-prose :where(.htw-prose > ul > li p):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.75em;
  margin-bottom:0.75em
}

.htw-prose :where(.htw-prose > ul > li > *:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em
}

.htw-prose :where(.htw-prose > ul > li > *:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:1.25em
}

.htw-prose :where(.htw-prose > ol > li > *:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em
}

.htw-prose :where(.htw-prose > ol > li > *:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:1.25em
}

.htw-prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.75em;
  margin-bottom:0.75em
}

.htw-prose :where(dl):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em;
  margin-bottom:1.25em
}

.htw-prose :where(dd):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.5em;
  padding-left:1.625em
}

.htw-prose :where(hr + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(h2 + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(h3 + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(h4 + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(thead th:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-left:0
}

.htw-prose :where(thead th:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-right:0
}

.htw-prose :where(tbody td, tfoot td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-top:0.5714286em;
  padding-right:0.5714286em;
  padding-bottom:0.5714286em;
  padding-left:0.5714286em
}

.htw-prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-left:0
}

.htw-prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-right:0
}

.htw-prose :where(figure):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(.htw-prose > :first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(.htw-prose > :last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:0
}

.htw-prose :where(h1, h2, h3, h4, th):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:0.75rem;
}

.htw-prose :where(h1, h2, h3, h4, th):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)):not(:first-child){
  margin-top:1.25rem
}

.htw-pointer-events-none{
  pointer-events:none
}

.htw-invisible{
  visibility:hidden
}

.htw-fixed{
  position:fixed
}

.htw-absolute{
  position:absolute
}

.htw-relative{
  position:relative
}

.htw-inset-0{
  inset:0px
}

.htw-bottom-0{
  bottom:0px
}

.htw-bottom-4{
  bottom:1rem
}

.htw-bottom-5{
  bottom:1.25rem
}

.htw-bottom-8{
  bottom:2rem
}

.htw-left-0{
  left:0px
}

.htw-left-5{
  left:1.25rem
}

.htw-left-8{
  left:2rem
}

.htw-right-0{
  right:0px
}

.htw-right-4{
  right:1rem
}

.htw-right-5{
  right:1.25rem
}

.htw-right-8{
  right:2rem
}

.htw-top-0{
  top:0px
}

.htw-top-5{
  top:1.25rem
}

.htw-top-8{
  top:2rem
}

.htw-isolate{
  isolation:isolate
}

.htw-z-10{
  z-index:10
}

.htw-z-20{
  z-index:20
}

.htw-m-0{
  margin:0px
}

.htw-m-1{
  margin:0.25rem
}

.htw-m-4{
  margin:1rem
}

.htw-m-auto{
  margin:auto
}

.-htw-my-1{
  margin-top:-0.25rem;
  margin-bottom:-0.25rem
}

.htw-mx-1{
  margin-left:0.25rem;
  margin-right:0.25rem
}

.htw-mx-2{
  margin-left:0.5rem;
  margin-right:0.5rem
}

.htw-mx-4{
  margin-left:1rem;
  margin-right:1rem
}

.htw-mx-6{
  margin-left:1.5rem;
  margin-right:1.5rem
}

.htw-my-0{
  margin-top:0px;
  margin-bottom:0px
}

.htw-my-2{
  margin-top:0.5rem;
  margin-bottom:0.5rem
}

.htw-my-4{
  margin-top:1rem;
  margin-bottom:1rem
}

.htw-my-8{
  margin-top:2rem;
  margin-bottom:2rem
}

.-htw-mt-1{
  margin-top:-0.25rem
}

.htw-mb-2{
  margin-bottom:0.5rem
}

.htw-mb-6{
  margin-bottom:1.5rem
}

.htw-mb-8{
  margin-bottom:2rem
}

.htw-ml-4{
  margin-left:1rem
}

.htw-ml-auto{
  margin-left:auto
}

.htw-mr-2{
  margin-right:0.5rem
}

.htw-mr-auto{
  margin-right:auto
}

.htw-mt-0{
  margin-top:0px
}

.htw-mt-0\.5{
  margin-top:0.125rem
}

.htw-mt-1{
  margin-top:0.25rem
}

.htw-mt-2{
  margin-top:0.5rem
}

.htw-box-border{
  box-sizing:border-box
}

.htw-block{
  display:block
}

.htw-flex{
  display:flex
}

.htw-inline-flex{
  display:inline-flex
}

.htw-grid{
  display:grid
}

.\!htw-hidden{
  display:none !important
}

.htw-hidden{
  display:none
}

.htw-h-1{
  height:0.25rem
}

.htw-h-10{
  height:2.5rem
}

.htw-h-12{
  height:3rem
}

.htw-h-16{
  height:4rem
}

.htw-h-2{
  height:0.5rem
}

.htw-h-20{
  height:5rem
}

.htw-h-3{
  height:0.75rem
}

.htw-h-32{
  height:8rem
}

.htw-h-4{
  height:1rem
}

.htw-h-48{
  height:12rem
}

.htw-h-5{
  height:1.25rem
}

.htw-h-6{
  height:1.5rem
}

.htw-h-64{
  height:16rem
}

.htw-h-8{
  height:2rem
}

.htw-h-9{
  height:2.25rem
}

.htw-h-\[100px\]{
  height:100px
}

.htw-h-\[16px\]{
  height:16px
}

.htw-h-\[1px\]{
  height:1px
}

.htw-h-\[22px\]{
  height:22px
}

.htw-h-\[27px\]{
  height:27px
}

.htw-h-\[2px\]{
  height:2px
}

.htw-h-\[51px\]{
  height:51px
}

.htw-h-fit{
  height:-moz-fit-content;
  height:fit-content
}

.htw-h-full{
  height:100%
}

.htw-h-px{
  height:1px
}

.htw-h-screen{
  height:100vh
}

.htw-max-h-\[400px\]{
  max-height:400px
}

.htw-max-h-\[80vh\]{
  max-height:80vh
}

.htw-max-h-full{
  max-height:100%
}

.htw-min-h-32{
  min-height:8rem
}

.htw-min-h-\[26px\]{
  min-height:26px
}

.htw-w-0{
  width:0px
}

.htw-w-16{
  width:4rem
}

.htw-w-2{
  width:0.5rem
}

.htw-w-20{
  width:5rem
}

.htw-w-28{
  width:7rem
}

.htw-w-3{
  width:0.75rem
}

.htw-w-32{
  width:8rem
}

.htw-w-4{
  width:1rem
}

.htw-w-5{
  width:1.25rem
}

.htw-w-6{
  width:1.5rem
}

.htw-w-64{
  width:16rem
}

.htw-w-8{
  width:2rem
}

.htw-w-\[16px\]{
  width:16px
}

.htw-w-\[2px\]{
  width:2px
}

.htw-w-fit{
  width:-moz-fit-content;
  width:fit-content
}

.htw-w-full{
  width:100%
}

.htw-w-max{
  width:-moz-max-content;
  width:max-content
}

.htw-w-px{
  width:1px
}

.htw-w-screen{
  width:100vw
}

.htw-min-w-0{
  min-width:0px
}

.htw-min-w-16{
  min-width:4rem
}

.htw-min-w-4{
  min-width:1rem
}

.htw-min-w-\[150px\]{
  min-width:150px
}

.htw-min-w-\[80px\]{
  min-width:80px
}

.htw-max-w-6{
  max-width:1.5rem
}

.htw-max-w-\[400px\]{
  max-width:400px
}

.htw-max-w-\[512px\]{
  max-width:512px
}

.htw-max-w-\[63px\]{
  max-width:63px
}

.htw-max-w-\[82px\]{
  max-width:82px
}

.htw-max-w-full{
  max-width:100%
}

.htw-max-w-none{
  max-width:none
}

.htw-flex-1{
  flex:1 1 0%
}

.htw-flex-none{
  flex:none
}

.htw-flex-shrink{
  flex-shrink:1
}

.htw-shrink{
  flex-shrink:1
}

.htw-shrink-0{
  flex-shrink:0
}

.htw-grow{
  flex-grow:1
}

.htw-rotate-90{
  --tw-rotate:90deg;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.htw-scale-0{
  --tw-scale-x:0;
  --tw-scale-y:0;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.htw-cursor-default{
  cursor:default
}

.htw-cursor-ew-resize{
  cursor:ew-resize
}

.htw-cursor-ns-resize{
  cursor:ns-resize
}

.htw-cursor-nwse-resize{
  cursor:nwse-resize
}

.htw-cursor-pointer{
  cursor:pointer
}

.htw-cursor-text{
  cursor:text
}

.htw-select-none{
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

.htw-resize-none{
  resize:none
}

.htw-resize-y{
  resize:vertical
}

.htw-appearance-none{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none
}

.htw-grid-cols-\[repeat\(auto-fill\,minmax\(200px\,1fr\)\)\]{
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))
}

.htw-flex-row{
  flex-direction:row
}

.htw-flex-col{
  flex-direction:column
}

.htw-flex-wrap{
  flex-wrap:wrap
}

.htw-flex-nowrap{
  flex-wrap:nowrap
}

.htw-place-content-between{
  place-content:space-between
}

.htw-items-start{
  align-items:flex-start
}

.htw-items-end{
  align-items:flex-end
}

.htw-items-center{
  align-items:center
}

.htw-items-baseline{
  align-items:baseline
}

.htw-items-stretch{
  align-items:stretch
}

.htw-justify-end{
  justify-content:flex-end
}

.htw-justify-center{
  justify-content:center
}

.htw-justify-evenly{
  justify-content:space-evenly
}

.htw-gap-0{
  gap:0px
}

.htw-gap-0\.5{
  gap:0.125rem
}

.htw-gap-1{
  gap:0.25rem
}

.htw-gap-12{
  gap:3rem
}

.htw-gap-2{
  gap:0.5rem
}

.htw-gap-4{
  gap:1rem
}

.htw-gap-6{
  gap:1.5rem
}

.htw-gap-px{
  gap:1px
}

.htw-gap-x-2{
  -moz-column-gap:0.5rem;
       column-gap:0.5rem
}

.htw-gap-y-1{
  row-gap:0.25rem
}

.htw-space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(1rem * var(--tw-space-y-reverse))
}

.htw-divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse:0;
  border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:calc(1px * var(--tw-divide-y-reverse))
}

.htw-divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-100) / var(--tw-divide-opacity))
}

.htw-divide-gray-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-200) / var(--tw-divide-opacity))
}

.htw-overflow-auto{
  overflow:auto
}

.htw-overflow-hidden{
  overflow:hidden
}

.htw-overflow-y-auto{
  overflow-y:auto
}

.htw-overflow-y-scroll{
  overflow-y:scroll
}

.htw-scroll-smooth{
  scroll-behavior:smooth
}

.htw-truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.htw-text-ellipsis{
  text-overflow:ellipsis
}

.htw-whitespace-nowrap{
  white-space:nowrap
}

.\!htw-rounded-\[3px\]{
  border-radius:3px !important
}

.htw-rounded{
  border-radius:0.375rem
}

.htw-rounded-full{
  border-radius:9999px
}

.htw-rounded-lg{
  border-radius:0.75rem
}

.htw-rounded-sm{
  border-radius:0.25rem
}

.htw-rounded-b-lg{
  border-bottom-right-radius:0.75rem;
  border-bottom-left-radius:0.75rem
}

.htw-rounded-l{
  border-top-left-radius:0.375rem;
  border-bottom-left-radius:0.375rem
}

.htw-rounded-r{
  border-top-right-radius:0.375rem;
  border-bottom-right-radius:0.375rem
}

.htw-rounded-r-lg{
  border-top-right-radius:0.75rem;
  border-bottom-right-radius:0.75rem
}

.htw-border{
  border-width:1px
}

.htw-border-0{
  border-width:0px
}

.htw-border-2{
  border-width:2px
}

.htw-border-8{
  border-width:8px
}

.htw-border-b{
  border-bottom-width:1px
}

.htw-border-l-2{
  border-left-width:2px
}

.htw-border-r{
  border-right-width:1px
}

.htw-border-t{
  border-top-width:1px
}

.htw-border-solid{
  border-style:solid
}

.htw-border-black\/20{
  border-color:rgb(0 0 0 / 0.2)
}

.htw-border-black\/25{
  border-color:rgb(0 0 0 / 0.25)
}

.htw-border-black\/50{
  border-color:rgb(0 0 0 / 0.5)
}

.htw-border-current{
  border-color:currentColor
}

.htw-border-gray-100{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-100) / var(--tw-border-opacity))
}

.htw-border-gray-200{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-200) / var(--tw-border-opacity))
}

.htw-border-gray-300\/30{
  border-color:rgb(var(--_histoire-color-gray-300) / 0.3)
}

.htw-border-gray-500\/10{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.1)
}

.htw-border-gray-500\/30{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.3)
}

.htw-border-gray-500\/40{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.4)
}

.htw-border-gray-500\/5{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.05)
}

.htw-border-gray-500\/50{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.5)
}

.htw-border-gray-600{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-600) / var(--tw-border-opacity))
}

.htw-border-gray-800{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-800) / var(--tw-border-opacity))
}

.htw-border-gray-850{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity))
}

.htw-border-primary-200{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-200) / var(--tw-border-opacity))
}

.htw-border-primary-500{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity))
}

.htw-border-primary-900{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-900) / var(--tw-border-opacity))
}

.htw-border-transparent{
  border-color:transparent
}

.\!htw-bg-primary-500{
  --tw-bg-opacity:1 !important;
  background-color:rgb(var(--_histoire-color-primary-500) / var(--tw-bg-opacity)) !important
}

.htw-bg-gray-100{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-100) / var(--tw-bg-opacity))
}

.htw-bg-gray-200{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-200) / var(--tw-bg-opacity))
}

.htw-bg-gray-400\/25{
  background-color:rgb(var(--_histoire-color-gray-400) / 0.25)
}

.htw-bg-gray-50{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-50) / var(--tw-bg-opacity))
}

.htw-bg-gray-500\/10{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.1)
}

.htw-bg-gray-500\/50{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.5)
}

.htw-bg-gray-700{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-700) / var(--tw-bg-opacity))
}

.htw-bg-gray-800{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-800) / var(--tw-bg-opacity))
}

.htw-bg-primary-200{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-200) / var(--tw-bg-opacity))
}

.htw-bg-primary-50{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-50) / var(--tw-bg-opacity))
}

.htw-bg-primary-500{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-500) / var(--tw-bg-opacity))
}

.htw-bg-primary-500\/10{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.1)
}

.htw-bg-primary-500\/20{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.2)
}

.htw-bg-primary-500\/25{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.25)
}

.htw-bg-primary-700{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity))
}

.htw-bg-primary-800{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-800) / var(--tw-bg-opacity))
}

.htw-bg-transparent{
  background-color:transparent
}

.htw-bg-white{
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity))
}

.htw-bg-white\/80{
  background-color:rgb(255 255 255 / 0.8)
}

.htw-fill-primary-500{
  fill:rgb(var(--_histoire-color-primary-500))
}

.htw-fill-transparent{
  fill:transparent
}

.htw-stroke-white{
  stroke:#fff
}

.htw-stroke-2{
  stroke-width:2
}

.htw-p-1{
  padding:0.25rem
}

.htw-p-2{
  padding:0.5rem
}

.htw-p-4{
  padding:1rem
}

.htw-p-8{
  padding:2rem
}

.htw-p-px{
  padding:1px
}

.htw-px-0{
  padding-left:0px;
  padding-right:0px
}

.htw-px-0\.5{
  padding-left:0.125rem;
  padding-right:0.125rem
}

.htw-px-1{
  padding-left:0.25rem;
  padding-right:0.25rem
}

.htw-px-2{
  padding-left:0.5rem;
  padding-right:0.5rem
}

.htw-px-4{
  padding-left:1rem;
  padding-right:1rem
}

.htw-px-6{
  padding-left:1.5rem;
  padding-right:1.5rem
}

.htw-py-0{
  padding-top:0px;
  padding-bottom:0px
}

.htw-py-0\.5{
  padding-top:0.125rem;
  padding-bottom:0.125rem
}

.htw-py-1{
  padding-top:0.25rem;
  padding-bottom:0.25rem
}

.htw-py-12{
  padding-top:3rem;
  padding-bottom:3rem
}

.htw-py-2{
  padding-top:0.5rem;
  padding-bottom:0.5rem
}

.htw-py-3{
  padding-top:0.75rem;
  padding-bottom:0.75rem
}

.htw-py-4{
  padding-top:1rem;
  padding-bottom:1rem
}

.htw-pl-0{
  padding-left:0px
}

.htw-pl-0\.5{
  padding-left:0.125rem
}

.htw-pl-2{
  padding-left:0.5rem
}

.htw-pl-4{
  padding-left:1rem
}

.htw-pl-6{
  padding-left:1.5rem
}

.htw-pr-2{
  padding-right:0.5rem
}

.htw-pr-6{
  padding-right:1.5rem
}

.htw-pt-4{
  padding-top:1rem
}

.htw-text-left{
  text-align:left
}

.htw-text-center{
  text-align:center
}

.htw-font-mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

.htw-text-2xl{
  font-size:1.5rem;
  line-height:2rem
}

.htw-text-5xl{
  font-size:3rem;
  line-height:1
}

.htw-text-lg{
  font-size:1.125rem;
  line-height:1.75rem
}

.htw-text-sm{
  font-size:0.875rem;
  line-height:1.25rem
}

.htw-text-xs{
  font-size:0.75rem;
  line-height:1rem
}

.htw-font-bold{
  font-weight:700
}

.htw-uppercase{
  text-transform:uppercase
}

.htw-leading-none{
  line-height:1
}

.htw-leading-normal{
  line-height:1.5
}

.htw-text-black\/\[1\%\]{
  color:rgb(0 0 0 / 1%)
}

.htw-text-gray-400{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-400) / var(--tw-text-opacity))
}

.htw-text-gray-500{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-500) / var(--tw-text-opacity))
}

.htw-text-gray-500\/20{
  color:rgb(var(--_histoire-color-gray-500) / 0.2)
}

.htw-text-gray-700{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-700) / var(--tw-text-opacity))
}

.htw-text-gray-900{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-900) / var(--tw-text-opacity))
}

.htw-text-inherit{
  color:inherit
}

.htw-text-orange-500{
  --tw-text-opacity:1;
  color:rgb(249 115 22 / var(--tw-text-opacity))
}

.htw-text-primary-200{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-200) / var(--tw-text-opacity))
}

.htw-text-primary-400{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-400) / var(--tw-text-opacity))
}

.htw-text-primary-500{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-500) / var(--tw-text-opacity))
}

.htw-text-primary-600{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-600) / var(--tw-text-opacity))
}

.htw-text-primary-800{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-800) / var(--tw-text-opacity))
}

.htw-text-red-500{
  --tw-text-opacity:1;
  color:rgb(239 68 68 / var(--tw-text-opacity))
}

.htw-text-white{
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity))
}

.htw-opacity-0{
  opacity:0
}

.htw-opacity-20{
  opacity:0.2
}

.htw-opacity-25{
  opacity:0.25
}

.htw-opacity-30{
  opacity:0.3
}

.htw-opacity-40{
  opacity:0.4
}

.htw-opacity-50{
  opacity:0.5
}

.htw-opacity-60{
  opacity:0.6
}

.htw-opacity-70{
  opacity:0.7
}

.htw-shadow-xl{
  --tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.htw-outline-none{
  outline:2px solid transparent;
  outline-offset:2px
}

.htw-transition-all{
  transition-property:all;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-transition-border{
  transition-property:border;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-transition-colors{
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-transition-none{
  transition-property:none
}

.htw-transition-transform{
  transition-property:transform;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-delay-150{
  transition-delay:150ms
}

.htw-duration-150{
  transition-duration:150ms
}

.htw-duration-200{
  transition-duration:200ms
}

.htw-duration-300{
  transition-duration:300ms
}

.htw-ease-\[cubic-bezier\(0\,1\,\.6\,1\)\]{
  transition-timing-function:cubic-bezier(0,1,.6,1)
}

.htw-ease-in-out{
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)
}

.htw-ease-out{
  transition-timing-function:cubic-bezier(0, 0, 0.2, 1)
}

.htw-will-change-transform{
  will-change:transform
}

:is(.htw-dark .dark\:htw-prose-invert){
  --tw-prose-body:var(--tw-prose-invert-body);
  --tw-prose-headings:var(--tw-prose-invert-headings);
  --tw-prose-lead:var(--tw-prose-invert-lead);
  --tw-prose-links:var(--tw-prose-invert-links);
  --tw-prose-bold:var(--tw-prose-invert-bold);
  --tw-prose-counters:var(--tw-prose-invert-counters);
  --tw-prose-bullets:var(--tw-prose-invert-bullets);
  --tw-prose-hr:var(--tw-prose-invert-hr);
  --tw-prose-quotes:var(--tw-prose-invert-quotes);
  --tw-prose-quote-borders:var(--tw-prose-invert-quote-borders);
  --tw-prose-captions:var(--tw-prose-invert-captions);
  --tw-prose-kbd:var(--tw-prose-invert-kbd);
  --tw-prose-kbd-shadows:var(--tw-prose-invert-kbd-shadows);
  --tw-prose-code:var(--tw-prose-invert-code);
  --tw-prose-pre-code:var(--tw-prose-invert-pre-code);
  --tw-prose-pre-bg:var(--tw-prose-invert-pre-bg);
  --tw-prose-th-borders:var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders:var(--tw-prose-invert-td-borders)
}

.first\:htw-mt-0:first-child{
  margin-top:0px
}

.last\:htw-mb-0:last-child{
  margin-bottom:0px
}

.focus-within\:htw-border-primary-500:focus-within{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity))
}

.focus-within\:htw-bg-gray-500\/5:focus-within{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.05)
}

.hover\:htw-border-primary-500:hover{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity))
}

.hover\:htw-bg-gray-200:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-200) / var(--tw-bg-opacity))
}

.hover\:htw-bg-gray-500\/10:hover{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.1)
}

.hover\:htw-bg-gray-500\/20:hover{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.2)
}

.hover\:htw-bg-gray-500\/30:hover{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.3)
}

.hover\:htw-bg-primary-100:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-100) / var(--tw-bg-opacity))
}

.hover\:htw-bg-primary-200:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-200) / var(--tw-bg-opacity))
}

.hover\:htw-bg-primary-300:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-300) / var(--tw-bg-opacity))
}

.hover\:htw-bg-primary-50:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-50) / var(--tw-bg-opacity))
}

.hover\:htw-bg-primary-500\/10:hover{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.1)
}

.hover\:htw-bg-primary-500\/30:hover{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.3)
}

.hover\:htw-bg-primary-500\/50:hover{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.5)
}

.hover\:htw-bg-primary-600:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-600) / var(--tw-bg-opacity))
}

.hover\:htw-text-primary-500:hover{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-500) / var(--tw-text-opacity))
}

.hover\:htw-opacity-100:hover{
  opacity:1
}

.focus\:htw-border-primary-500:focus{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity))
}

.focus\:htw-border-primary-500\/50:focus{
  border-color:rgb(var(--_histoire-color-primary-500) / 0.5)
}

.focus\:htw-opacity-100:focus{
  opacity:1
}

.focus-visible\:htw-border-primary-500:focus-visible{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity))
}

.active\:htw-bg-gray-600\/50:active{
  background-color:rgb(var(--_histoire-color-gray-600) / 0.5)
}

.htw-group:first-child .group-first\:htw-hidden{
  display:none
}

.htw-group:nth-child(odd) .group-odd\:htw-bg-gray-100\/50{
  background-color:rgb(var(--_histoire-color-gray-100) / 0.5)
}

.htw-group:focus-within .group-focus-within\:htw-visible{
  visibility:visible
}

.htw-group:hover .group-hover\:htw-flex{
  display:flex
}

.htw-group:hover .group-hover\:htw-border-primary-500{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity))
}

.htw-group:hover .group-hover\:htw-bg-primary-100{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-100) / var(--tw-bg-opacity))
}

.htw-group:hover .group-hover\:htw-opacity-100{
  opacity:1
}

.htw-group:hover .group-hover\:htw-opacity-90{
  opacity:0.9
}

.htw-group:active .group-active\:htw-bg-gray-500\/20{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.2)
}

:is(.htw-dark .dark\:htw-divide-gray-750) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-750) / var(--tw-divide-opacity))
}

:is(.htw-dark .dark\:htw-divide-gray-800) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-800) / var(--tw-divide-opacity))
}

:is(.htw-dark .dark\:htw-divide-gray-850) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-divide-opacity))
}

:is(.htw-dark .dark\:htw-border-gray-700\/30){
  border-color:rgb(var(--_histoire-color-gray-700) / 0.3)
}

:is(.htw-dark .dark\:htw-border-gray-750){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-750) / var(--tw-border-opacity))
}

:is(.htw-dark .dark\:htw-border-gray-800){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-800) / var(--tw-border-opacity))
}

:is(.htw-dark .dark\:htw-border-gray-850){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity))
}

:is(.htw-dark .dark\:htw-border-primary-900){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-900) / var(--tw-border-opacity))
}

:is(.htw-dark .dark\:htw-border-white\/20){
  border-color:rgb(255 255 255 / 0.2)
}

:is(.htw-dark .dark\:htw-border-white\/25){
  border-color:rgb(255 255 255 / 0.25)
}

:is(.htw-dark .dark\:htw-border-white\/50){
  border-color:rgb(255 255 255 / 0.5)
}

:is(.htw-dark .dark\:htw-bg-black){
  --tw-bg-opacity:1;
  background-color:rgb(0 0 0 / var(--tw-bg-opacity))
}

:is(.htw-dark .dark\:htw-bg-gray-600){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-600) / var(--tw-bg-opacity))
}

:is(.htw-dark .dark\:htw-bg-gray-700){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-700) / var(--tw-bg-opacity))
}

:is(.htw-dark .dark\:htw-bg-gray-750){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-750) / var(--tw-bg-opacity))
}

:is(.htw-dark .dark\:htw-bg-gray-900){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-900) / var(--tw-bg-opacity))
}

:is(.htw-dark .dark\:htw-bg-gray-900\/80){
  background-color:rgb(var(--_histoire-color-gray-900) / 0.8)
}

:is(.htw-dark .dark\:htw-bg-primary-400){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-400) / var(--tw-bg-opacity))
}

:is(.htw-dark .dark\:htw-bg-primary-600){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-600) / var(--tw-bg-opacity))
}

:is(.htw-dark .dark\:htw-bg-primary-700){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity))
}

:is(.htw-dark .dark\:htw-bg-primary-800){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-800) / var(--tw-bg-opacity))
}

:is(.htw-dark .dark\:htw-text-black){
  --tw-text-opacity:1;
  color:rgb(0 0 0 / var(--tw-text-opacity))
}

:is(.htw-dark .dark\:htw-text-gray-100){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-100) / var(--tw-text-opacity))
}

:is(.htw-dark .dark\:htw-text-gray-300){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-300) / var(--tw-text-opacity))
}

:is(.htw-dark .dark\:htw-text-primary-200){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-200) / var(--tw-text-opacity))
}

:is(.htw-dark .dark\:htw-text-primary-400){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-400) / var(--tw-text-opacity))
}

:is(.htw-dark .dark\:htw-text-white\/\[1\%\]){
  color:rgb(255 255 255 / 1%)
}

:is(.htw-dark .dark\:focus-within\:htw-border-primary-500:focus-within){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity))
}

:is(.htw-dark .dark\:hover\:htw-border-primary-500:hover){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity))
}

:is(.htw-dark .dark\:hover\:htw-bg-gray-800:hover){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-800) / var(--tw-bg-opacity))
}

:is(.htw-dark .dark\:hover\:htw-bg-primary-700:hover){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity))
}

:is(.htw-dark .dark\:hover\:htw-bg-primary-800:hover){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-800) / var(--tw-bg-opacity))
}

:is(.htw-dark .dark\:hover\:htw-bg-primary-900:hover){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-900) / var(--tw-bg-opacity))
}

:is(.htw-dark .dark\:hover\:htw-text-primary-400:hover){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-400) / var(--tw-text-opacity))
}

:is(.htw-dark .dark\:focus\:htw-border-primary-500:focus){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity))
}

:is(.htw-dark .htw-group:nth-child(odd) .dark\:group-odd\:htw-bg-gray-750\/40){
  background-color:rgb(var(--_histoire-color-gray-750) / 0.4)
}

.htw-group:hover :is(.htw-dark .group-hover\:dark\:htw-border-primary-500){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity))
}

:is(.htw-dark .htw-group:hover .dark\:group-hover\:htw-bg-primary-700){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity))
}

@media (min-width: 640px){
  .sm\:htw-h-4{
    height:1rem
  }

  .sm\:htw-w-4{
    width:1rem
  }

  .sm\:htw-p-1{
    padding:0.25rem
  }

  .sm\:htw-py-4{
    padding-top:1rem;
    padding-bottom:1rem
  }
}

@media (min-width: 768px){
  .md\:htw-mx-auto{
    margin-left:auto;
    margin-right:auto
  }

  .md\:htw-mt-16{
    margin-top:4rem
  }

  .md\:htw-block{
    display:block
  }

  .md\:htw-max-w-\[600px\]{
    max-width:600px
  }

  .md\:htw-flex-col{
    flex-direction:column
  }

  .md\:htw-p-12{
    padding:3rem
  }

  .md\:htw-py-1{
    padding-top:0.25rem;
    padding-bottom:0.25rem
  }

  .md\:htw-py-1\.5{
    padding-top:0.375rem;
    padding-bottom:0.375rem
  }
}

@media (min-width: 1024px){
  .lg\:htw-max-w-\[800px\]{
    max-width:800px
  }
}

@media (min-width: 1280px){
  .xl\:htw-max-w-\[900px\]{
    max-width:900px
  }
}

@media (max-width: 767px){
  .\!md\:htw-flex-col{
    flex-direction:column
  }
}

.histoire-story-list-folder-button:hover .\[\.histoire-story-list-folder-button\:hover_\&\]\:htw-opacity-100{
  opacity:1
}

.landscape > div > .dragger[data-v-4f40a1bb] {
  width: .625rem;
}
.portrait > div > .dragger[data-v-4f40a1bb] {
  height: .625rem;
}
.landscape > div > .dragger.dragger-offset-before[data-v-4f40a1bb] {
  right: 0;
}
.portrait > div > .dragger.dragger-offset-before[data-v-4f40a1bb] {
  bottom: 0;
}
.landscape > div > .dragger.dragger-offset-center[data-v-4f40a1bb] {
  right: -.3125rem;
}
.portrait > div > .dragger.dragger-offset-center[data-v-4f40a1bb] {
  bottom: -.3125rem;
}
.landscape > div > .dragger.dragger-offset-after[data-v-4f40a1bb] {
  right: -.625rem;
}
.portrait > div > .dragger.dragger-offset-after[data-v-4f40a1bb] {
  bottom: -.625rem;
}

.bind-icon-color[data-v-b8625753] {
  color: var(--6509026e);
}

.htw-base-empty[data-v-c5ecfead]:not(.no-animation) {
  animation: htw-base-empty-c5ecfead .15s .2s both;
}
@keyframes htw-base-empty-c5ecfead {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

.bind-icon-color[data-v-a5a2e343] {
  color: var(--597bf4c4);
}

.bind-tree-padding[data-v-cace6303] {
  padding-left: var(--1ee776cd);
}

.bind-tree-margin[data-v-c9b616b5] {
  margin-left: var(--c4f9d186);
}
.bind-icon-color[data-v-c9b616b5] {
  color: var(--7270060e);
}

.bind-icon-color[data-v-abf83c04] {
  color: var(--02b8e3da);
}

.bind-icon-color[data-v-f8e09a03] {
  color: var(--2762f67a);
}

.__histoire-code-placeholder[data-v-f7d2e46a] {
  color: inherit;
  font-size: inherit;
}

.bind-icon-color[data-v-d75a2748] {
  color: var(--ddaae392);
}

.bind-preview-bg[data-v-c48fb2b2] {
  background-color: var(--627bec82);
  color: var(--35068428);
}

.bind-icon-color[data-v-d3ab4dd6] {
  color: var(--bd0f30ce);
}
.bind-preview-bg[data-v-d3ab4dd6] {
  background-color: var(--8da98e9c);
}

img.colorize-black[data-v-2114f510] {
  filter: grayscale(100) brightness(0);
}

.bind-preview-bg[data-v-9bc3d486] {
  background-color: var(--321f9a07);
}

.__histoire-hatched-pattern[data-v-91561117] {
  background: repeating-linear-gradient(135deg,
  transparent 0px,
  transparent 32px,
  currentColor 32px,
  currentColor 64px);
}
*, ::before, ::after {--_histoire-color-primary-50: 236 253 245;--_histoire-color-primary-100: 209 250 229;--_histoire-color-primary-200: 167 243 208;--_histoire-color-primary-300: 110 231 183;--_histoire-color-primary-400: 52 211 153;--_histoire-color-primary-500: 16 185 129;--_histoire-color-primary-600: 5 150 105;--_histoire-color-primary-700: 4 120 87;--_histoire-color-primary-800: 6 95 70;--_histoire-color-primary-900: 6 78 59;--_histoire-color-gray-50: 250 250 250;--_histoire-color-gray-100: 244 244 245;--_histoire-color-gray-200: 228 228 231;--_histoire-color-gray-300: 212 212 216;--_histoire-color-gray-400: 161 161 170;--_histoire-color-gray-500: 113 113 122;--_histoire-color-gray-600: 82 82 91;--_histoire-color-gray-700: 63 63 70;--_histoire-color-gray-750: 50 50 56;--_histoire-color-gray-800: 39 39 42;--_histoire-color-gray-850: 31 31 33;--_histoire-color-gray-900: 24 24 27;--_histoire-color-gray-950: 16 16 18;}.htw-range-input::-webkit-slider-thumb{height:.75rem;width:.75rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}:is(.htw-dark .htw-range-input)::-webkit-slider-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-webkit-slider-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.htw-range-input::-moz-range-thumb{height:.75rem;width:.75rem;-moz-appearance:none;-webkit-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}:is(.htw-dark .htw-range-input)::-moz-range-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-moz-range-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.v-popper{line-height:0}.htw-dark .v-popper--theme-dropdown .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{--tw-border-opacity: 1;border-color:rgb(63 63 70 / var(--tw-border-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity))}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transform:none;transition:transform .15s cubic-bezier(0,1,.5,1)}.v-popper__popper:focus-visible{outline:none}.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}.__histoire-json-code[data-v-935458a7] .cm-editor{height:100%;min-width:280px}html,
body {
  background: transparent !important;
}body {
  margin: 0;
}html {
  font-size: 1rem;
  font-family: 'Noto Sans Display', system-ui, sans-serif;
}.htw-sandbox-hidden {
  display: none;
}.__histoire-render-story:not(.__histoire-render-custom-controls) {
  overflow: auto;
  min-height: 100%;
}
/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-b4436326] {
  color: #252339;
}
.color-text-body[data-v-b4436326] {
  color: #3e3d48;
}
.color-text-muted[data-v-b4436326] {
  color: #8b8a93;
}
.color-text-primary[data-v-b4436326] {
  color: #068484;
}
.color-text-inverse[data-v-b4436326] {
  color: #fff;
}
.color-background[data-v-b4436326] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-b4436326] {
  background-color: #fff;
}
.color-background-dark[data-v-b4436326] {
  background-color: #050033;
}
.color-background-primary[data-v-b4436326] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-b4436326] {
  background-color: #252339;
}
.color-background-badge-light[data-v-b4436326] {
  background-color: #544e85;
}
.color-background-modal[data-v-b4436326] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-b4436326] {
  display: block;
}

/* Utility */
.no-outline[data-v-b4436326] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-b4436326] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-b4436326]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-b4436326] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-b4436326]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-b4436326]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-b4436326]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-b4436326]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-b4436326]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-b4436326]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-b4436326] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-b4436326],
.ads-error-message strong[data-v-b4436326] {
  font-weight: 600;
}
.ads-error-message i[data-v-b4436326],
.ads-error-message em[data-v-b4436326] {
  font-style: italic;
}
.ads-error-message p[data-v-b4436326] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-b4436326] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-b4436326],
.ads-indicator strong[data-v-b4436326] {
  font-weight: 600;
}
.ads-indicator i[data-v-b4436326],
.ads-indicator em[data-v-b4436326] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-b4436326] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-b4436326] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-b4436326] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-b4436326] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-b4436326] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-b4436326] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-b4436326] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-b4436326] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-b4436326] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-b4436326] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-b4436326] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-b4436326] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-b4436326] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-b4436326] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-b4436326] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-b4436326] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-b4436326] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-b4436326] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-b4436326] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-b4436326] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-b4436326] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-b4436326] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-b4436326] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-b4436326] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-b4436326] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-b4436326] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-b4436326],
.expressive-heading-01 strong[data-v-b4436326] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-b4436326],
.expressive-heading-01 em[data-v-b4436326] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-b4436326] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-b4436326] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-b4436326] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-b4436326],
.expressive-heading-02 strong[data-v-b4436326] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-b4436326],
.expressive-heading-02 em[data-v-b4436326] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-b4436326] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-b4436326] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-b4436326] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-b4436326],
.expressive-heading-03 strong[data-v-b4436326] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-b4436326],
.expressive-heading-03 em[data-v-b4436326] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-b4436326] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-b4436326] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-b4436326] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-b4436326],
.expressive-heading-04 strong[data-v-b4436326] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-b4436326],
.expressive-heading-04 em[data-v-b4436326] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-b4436326] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-b4436326] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-b4436326],
.expressive-heading-05 strong[data-v-b4436326] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-b4436326],
.expressive-heading-05 em[data-v-b4436326] {
  font-style: italic;
}
.expressive-subheading-01[data-v-b4436326] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-b4436326],
.expressive-subheading-01 strong[data-v-b4436326] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-b4436326],
.expressive-subheading-01 em[data-v-b4436326] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-b4436326] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-b4436326] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-b4436326],
.ui-heading-01 strong[data-v-b4436326] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-b4436326],
.ui-heading-01 em[data-v-b4436326] {
  font-style: italic;
}
.ui-heading-02[data-v-b4436326] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-b4436326],
.ui-heading-02 strong[data-v-b4436326] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-b4436326],
.ui-heading-02 em[data-v-b4436326] {
  font-style: italic;
}
.ui-heading-03[data-v-b4436326] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-b4436326],
.ui-heading-03 strong[data-v-b4436326] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-b4436326],
.ui-heading-03 em[data-v-b4436326] {
  font-style: italic;
}
.ui-body-01[data-v-b4436326] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-b4436326],
.ui-body-01 strong[data-v-b4436326] {
  font-weight: 600;
}
.ui-body-01 i[data-v-b4436326],
.ui-body-01 em[data-v-b4436326] {
  font-style: italic;
}
.ui-body-01-strong[data-v-b4436326] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-b4436326],
.ui-body-01-strong strong[data-v-b4436326] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-b4436326],
.ui-body-01-strong em[data-v-b4436326] {
  font-style: italic;
}
.ui-body-01-italic[data-v-b4436326] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-b4436326],
.ui-body-01-italic strong[data-v-b4436326] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-b4436326],
.ui-body-01-italic em[data-v-b4436326] {
  font-style: italic;
}
.ui-body-02[data-v-b4436326] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-b4436326],
.ui-body-02 strong[data-v-b4436326] {
  font-weight: 600;
}
.ui-body-02 i[data-v-b4436326],
.ui-body-02 em[data-v-b4436326] {
  font-style: italic;
}
.ui-body-02-strong[data-v-b4436326] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-b4436326],
.ui-body-02-strong strong[data-v-b4436326] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-b4436326],
.ui-body-02-strong em[data-v-b4436326] {
  font-style: italic;
}
.ui-caption-01[data-v-b4436326] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-b4436326],
.ui-caption-01 strong[data-v-b4436326] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-b4436326],
.ui-caption-01 em[data-v-b4436326] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-b4436326] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-b4436326],
.ui-caption-01-strong strong[data-v-b4436326] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-b4436326],
.ui-caption-01-strong em[data-v-b4436326] {
  font-style: italic;
}
.ui-label-01[data-v-b4436326] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-b4436326],
.ui-label-01 strong[data-v-b4436326] {
  font-weight: 600;
}
.ui-label-01 i[data-v-b4436326],
.ui-label-01 em[data-v-b4436326] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-b4436326] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-b4436326] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-b4436326] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-b4436326 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-b4436326 {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-b4436326 {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-b4436326 {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-b4436326],
.fade-leave-active[data-v-b4436326] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-b4436326],
.fade-leave-to[data-v-b4436326] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-b4436326],
.fade-slide-vertical-leave-to[data-v-b4436326] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-b4436326],
.fade-slide-vertical-leave-from[data-v-b4436326] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-b4436326],
.fade-slide-vertical-leave-active[data-v-b4436326] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-b4436326],[data-v-b4436326]::before,[data-v-b4436326]::after {
  box-sizing: border-box;
}
html[data-v-b4436326],
body[data-v-b4436326],
div[data-v-b4436326],
span[data-v-b4436326],
object[data-v-b4436326],
iframe[data-v-b4436326],
h1[data-v-b4436326],
h2[data-v-b4436326],
h3[data-v-b4436326],
h4[data-v-b4436326],
h5[data-v-b4436326],
h6[data-v-b4436326],
p[data-v-b4436326],
blockquote[data-v-b4436326],
pre[data-v-b4436326],
abbr[data-v-b4436326],
address[data-v-b4436326],
cite[data-v-b4436326],
code[data-v-b4436326],
del[data-v-b4436326],
dfn[data-v-b4436326],
em[data-v-b4436326],
img[data-v-b4436326],
ins[data-v-b4436326],
kbd[data-v-b4436326],
q[data-v-b4436326],
samp[data-v-b4436326],
small[data-v-b4436326],
strong[data-v-b4436326],
sub[data-v-b4436326],
sup[data-v-b4436326],
var[data-v-b4436326],
b[data-v-b4436326],
i[data-v-b4436326],
dl[data-v-b4436326],
dt[data-v-b4436326],
dd[data-v-b4436326],
ol[data-v-b4436326],
ul[data-v-b4436326],
li[data-v-b4436326],
fieldset[data-v-b4436326],
form[data-v-b4436326],
label[data-v-b4436326],
legend[data-v-b4436326],
table[data-v-b4436326],
caption[data-v-b4436326],
tbody[data-v-b4436326],
tfoot[data-v-b4436326],
thead[data-v-b4436326],
tr[data-v-b4436326],
th[data-v-b4436326],
td[data-v-b4436326],
article[data-v-b4436326],
aside[data-v-b4436326],
dialog[data-v-b4436326],
figure[data-v-b4436326],
footer[data-v-b4436326],
header[data-v-b4436326],
hgroup[data-v-b4436326],
menu[data-v-b4436326],
nav[data-v-b4436326],
section[data-v-b4436326],
time[data-v-b4436326],
mark[data-v-b4436326],
audio[data-v-b4436326],
video[data-v-b4436326] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-b4436326],
aside[data-v-b4436326],
dialog[data-v-b4436326],
figure[data-v-b4436326],
footer[data-v-b4436326],
header[data-v-b4436326],
hgroup[data-v-b4436326],
nav[data-v-b4436326],
section[data-v-b4436326],
main[data-v-b4436326] {
  display: block;
}
blockquote[data-v-b4436326],
q[data-v-b4436326] {
  quotes: none;
}
blockquote[data-v-b4436326]::before, blockquote[data-v-b4436326]::after,
q[data-v-b4436326]::before,
q[data-v-b4436326]::after {
  content: none;
}
ul[data-v-b4436326],
ol[data-v-b4436326] {
  list-style: none;
}
table[data-v-b4436326] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-b4436326] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-b4436326] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.blur[data-v-b4436326] {
  display: flex;
  max-width: 100%;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: space-between;
  padding-left: var(--ads-space-3, 0.75rem);
  gap: var(--ads-space-4, 1rem);
}
.blur__rectangle[data-v-b4436326] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ads-colors-surface-base-light, #FFF);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-9bea1ebc] {
  color: #252339;
}
.color-text-body[data-v-9bea1ebc] {
  color: #3e3d48;
}
.color-text-muted[data-v-9bea1ebc] {
  color: #8b8a93;
}
.color-text-primary[data-v-9bea1ebc] {
  color: #068484;
}
.color-text-inverse[data-v-9bea1ebc] {
  color: #fff;
}
.color-background[data-v-9bea1ebc] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-9bea1ebc] {
  background-color: #fff;
}
.color-background-dark[data-v-9bea1ebc] {
  background-color: #050033;
}
.color-background-primary[data-v-9bea1ebc] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-9bea1ebc] {
  background-color: #252339;
}
.color-background-badge-light[data-v-9bea1ebc] {
  background-color: #544e85;
}
.color-background-modal[data-v-9bea1ebc] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-9bea1ebc] {
  display: block;
}

/* Utility */
.no-outline[data-v-9bea1ebc] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-9bea1ebc] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-9bea1ebc]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-9bea1ebc] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-9bea1ebc]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-9bea1ebc]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-9bea1ebc]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-9bea1ebc]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-9bea1ebc]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-9bea1ebc]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-9bea1ebc],
.ads-error-message strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.ads-error-message i[data-v-9bea1ebc],
.ads-error-message em[data-v-9bea1ebc] {
  font-style: italic;
}
.ads-error-message p[data-v-9bea1ebc] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-9bea1ebc],
.ads-indicator strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.ads-indicator i[data-v-9bea1ebc],
.ads-indicator em[data-v-9bea1ebc] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-9bea1ebc] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-9bea1ebc] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-9bea1ebc] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-9bea1ebc] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-9bea1ebc] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-9bea1ebc] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-9bea1ebc] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-9bea1ebc] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-9bea1ebc] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-9bea1ebc] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-9bea1ebc] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-9bea1ebc] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-9bea1ebc] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-9bea1ebc] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-9bea1ebc] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-9bea1ebc] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-9bea1ebc] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-9bea1ebc] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-9bea1ebc] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-9bea1ebc] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-9bea1ebc] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-9bea1ebc] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-9bea1ebc] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-9bea1ebc] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-9bea1ebc] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-9bea1ebc],
.expressive-heading-01 strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-9bea1ebc],
.expressive-heading-01 em[data-v-9bea1ebc] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-9bea1ebc] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-9bea1ebc] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-9bea1ebc],
.expressive-heading-02 strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-9bea1ebc],
.expressive-heading-02 em[data-v-9bea1ebc] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-9bea1ebc] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-9bea1ebc] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-9bea1ebc],
.expressive-heading-03 strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-9bea1ebc],
.expressive-heading-03 em[data-v-9bea1ebc] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-9bea1ebc] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-9bea1ebc] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-9bea1ebc],
.expressive-heading-04 strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-9bea1ebc],
.expressive-heading-04 em[data-v-9bea1ebc] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-9bea1ebc] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-9bea1ebc],
.expressive-heading-05 strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-9bea1ebc],
.expressive-heading-05 em[data-v-9bea1ebc] {
  font-style: italic;
}
.expressive-subheading-01[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-9bea1ebc],
.expressive-subheading-01 strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-9bea1ebc],
.expressive-subheading-01 em[data-v-9bea1ebc] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-9bea1ebc] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-9bea1ebc],
.ui-heading-01 strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-9bea1ebc],
.ui-heading-01 em[data-v-9bea1ebc] {
  font-style: italic;
}
.ui-heading-02[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-9bea1ebc],
.ui-heading-02 strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-9bea1ebc],
.ui-heading-02 em[data-v-9bea1ebc] {
  font-style: italic;
}
.ui-heading-03[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-9bea1ebc],
.ui-heading-03 strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-9bea1ebc],
.ui-heading-03 em[data-v-9bea1ebc] {
  font-style: italic;
}
.ui-body-01[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-9bea1ebc],
.ui-body-01 strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.ui-body-01 i[data-v-9bea1ebc],
.ui-body-01 em[data-v-9bea1ebc] {
  font-style: italic;
}
.ui-body-01-strong[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-9bea1ebc],
.ui-body-01-strong strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-9bea1ebc],
.ui-body-01-strong em[data-v-9bea1ebc] {
  font-style: italic;
}
.ui-body-01-italic[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-9bea1ebc],
.ui-body-01-italic strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-9bea1ebc],
.ui-body-01-italic em[data-v-9bea1ebc] {
  font-style: italic;
}
.ui-body-02[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-9bea1ebc],
.ui-body-02 strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.ui-body-02 i[data-v-9bea1ebc],
.ui-body-02 em[data-v-9bea1ebc] {
  font-style: italic;
}
.ui-body-02-strong[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-9bea1ebc],
.ui-body-02-strong strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-9bea1ebc],
.ui-body-02-strong em[data-v-9bea1ebc] {
  font-style: italic;
}
.ui-caption-01[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-9bea1ebc],
.ui-caption-01 strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-9bea1ebc],
.ui-caption-01 em[data-v-9bea1ebc] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-9bea1ebc],
.ui-caption-01-strong strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-9bea1ebc],
.ui-caption-01-strong em[data-v-9bea1ebc] {
  font-style: italic;
}
.ui-label-01[data-v-9bea1ebc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-9bea1ebc],
.ui-label-01 strong[data-v-9bea1ebc] {
  font-weight: 600;
}
.ui-label-01 i[data-v-9bea1ebc],
.ui-label-01 em[data-v-9bea1ebc] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-9bea1ebc] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-9bea1ebc] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-9bea1ebc] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-9bea1ebc {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-9bea1ebc {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-9bea1ebc {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-9bea1ebc {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-9bea1ebc],
.fade-leave-active[data-v-9bea1ebc] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-9bea1ebc],
.fade-leave-to[data-v-9bea1ebc] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-9bea1ebc],
.fade-slide-vertical-leave-to[data-v-9bea1ebc] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-9bea1ebc],
.fade-slide-vertical-leave-from[data-v-9bea1ebc] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-9bea1ebc],
.fade-slide-vertical-leave-active[data-v-9bea1ebc] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-9bea1ebc],[data-v-9bea1ebc]::before,[data-v-9bea1ebc]::after {
  box-sizing: border-box;
}
html[data-v-9bea1ebc],
body[data-v-9bea1ebc],
div[data-v-9bea1ebc],
span[data-v-9bea1ebc],
object[data-v-9bea1ebc],
iframe[data-v-9bea1ebc],
h1[data-v-9bea1ebc],
h2[data-v-9bea1ebc],
h3[data-v-9bea1ebc],
h4[data-v-9bea1ebc],
h5[data-v-9bea1ebc],
h6[data-v-9bea1ebc],
p[data-v-9bea1ebc],
blockquote[data-v-9bea1ebc],
pre[data-v-9bea1ebc],
abbr[data-v-9bea1ebc],
address[data-v-9bea1ebc],
cite[data-v-9bea1ebc],
code[data-v-9bea1ebc],
del[data-v-9bea1ebc],
dfn[data-v-9bea1ebc],
em[data-v-9bea1ebc],
img[data-v-9bea1ebc],
ins[data-v-9bea1ebc],
kbd[data-v-9bea1ebc],
q[data-v-9bea1ebc],
samp[data-v-9bea1ebc],
small[data-v-9bea1ebc],
strong[data-v-9bea1ebc],
sub[data-v-9bea1ebc],
sup[data-v-9bea1ebc],
var[data-v-9bea1ebc],
b[data-v-9bea1ebc],
i[data-v-9bea1ebc],
dl[data-v-9bea1ebc],
dt[data-v-9bea1ebc],
dd[data-v-9bea1ebc],
ol[data-v-9bea1ebc],
ul[data-v-9bea1ebc],
li[data-v-9bea1ebc],
fieldset[data-v-9bea1ebc],
form[data-v-9bea1ebc],
label[data-v-9bea1ebc],
legend[data-v-9bea1ebc],
table[data-v-9bea1ebc],
caption[data-v-9bea1ebc],
tbody[data-v-9bea1ebc],
tfoot[data-v-9bea1ebc],
thead[data-v-9bea1ebc],
tr[data-v-9bea1ebc],
th[data-v-9bea1ebc],
td[data-v-9bea1ebc],
article[data-v-9bea1ebc],
aside[data-v-9bea1ebc],
dialog[data-v-9bea1ebc],
figure[data-v-9bea1ebc],
footer[data-v-9bea1ebc],
header[data-v-9bea1ebc],
hgroup[data-v-9bea1ebc],
menu[data-v-9bea1ebc],
nav[data-v-9bea1ebc],
section[data-v-9bea1ebc],
time[data-v-9bea1ebc],
mark[data-v-9bea1ebc],
audio[data-v-9bea1ebc],
video[data-v-9bea1ebc] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-9bea1ebc],
aside[data-v-9bea1ebc],
dialog[data-v-9bea1ebc],
figure[data-v-9bea1ebc],
footer[data-v-9bea1ebc],
header[data-v-9bea1ebc],
hgroup[data-v-9bea1ebc],
nav[data-v-9bea1ebc],
section[data-v-9bea1ebc],
main[data-v-9bea1ebc] {
  display: block;
}
blockquote[data-v-9bea1ebc],
q[data-v-9bea1ebc] {
  quotes: none;
}
blockquote[data-v-9bea1ebc]::before, blockquote[data-v-9bea1ebc]::after,
q[data-v-9bea1ebc]::before,
q[data-v-9bea1ebc]::after {
  content: none;
}
ul[data-v-9bea1ebc],
ol[data-v-9bea1ebc] {
  list-style: none;
}
table[data-v-9bea1ebc] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-9bea1ebc] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-9bea1ebc] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.borders[data-v-9bea1ebc] {
  display: flex;
  max-width: 100%;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: space-between;
  padding-left: var(--ads-space-3, 0.75rem);
  gap: var(--ads-space-4, 1rem);
}
.borders__rectangle[data-v-9bea1ebc] {
  position: relative;
  display: flex;
  height: var(--ads-sizes-20, 5rem);
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  background-color: var(--ads-colors-surface-base-light, #fff);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-b23c0cae] {
  color: #252339;
}
.color-text-body[data-v-b23c0cae] {
  color: #3e3d48;
}
.color-text-muted[data-v-b23c0cae] {
  color: #8b8a93;
}
.color-text-primary[data-v-b23c0cae] {
  color: #068484;
}
.color-text-inverse[data-v-b23c0cae] {
  color: #fff;
}
.color-background[data-v-b23c0cae] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-b23c0cae] {
  background-color: #fff;
}
.color-background-dark[data-v-b23c0cae] {
  background-color: #050033;
}
.color-background-primary[data-v-b23c0cae] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-b23c0cae] {
  background-color: #252339;
}
.color-background-badge-light[data-v-b23c0cae] {
  background-color: #544e85;
}
.color-background-modal[data-v-b23c0cae] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-b23c0cae] {
  display: block;
}

/* Utility */
.no-outline[data-v-b23c0cae] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-b23c0cae] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-b23c0cae]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-b23c0cae] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-b23c0cae]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-b23c0cae]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-b23c0cae]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-b23c0cae]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-b23c0cae]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-b23c0cae]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-b23c0cae] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-b23c0cae],
.ads-error-message strong[data-v-b23c0cae] {
  font-weight: 600;
}
.ads-error-message i[data-v-b23c0cae],
.ads-error-message em[data-v-b23c0cae] {
  font-style: italic;
}
.ads-error-message p[data-v-b23c0cae] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-b23c0cae] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-b23c0cae],
.ads-indicator strong[data-v-b23c0cae] {
  font-weight: 600;
}
.ads-indicator i[data-v-b23c0cae],
.ads-indicator em[data-v-b23c0cae] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-b23c0cae] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-b23c0cae] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-b23c0cae] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-b23c0cae] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-b23c0cae] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-b23c0cae] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-b23c0cae] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-b23c0cae] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-b23c0cae] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-b23c0cae] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-b23c0cae] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-b23c0cae] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-b23c0cae] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-b23c0cae] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-b23c0cae] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-b23c0cae] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-b23c0cae] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-b23c0cae] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-b23c0cae] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-b23c0cae] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-b23c0cae] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-b23c0cae] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-b23c0cae] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-b23c0cae] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-b23c0cae] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-b23c0cae] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-b23c0cae],
.expressive-heading-01 strong[data-v-b23c0cae] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-b23c0cae],
.expressive-heading-01 em[data-v-b23c0cae] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-b23c0cae] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-b23c0cae] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-b23c0cae] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-b23c0cae],
.expressive-heading-02 strong[data-v-b23c0cae] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-b23c0cae],
.expressive-heading-02 em[data-v-b23c0cae] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-b23c0cae] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-b23c0cae] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-b23c0cae] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-b23c0cae],
.expressive-heading-03 strong[data-v-b23c0cae] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-b23c0cae],
.expressive-heading-03 em[data-v-b23c0cae] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-b23c0cae] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-b23c0cae] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-b23c0cae] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-b23c0cae],
.expressive-heading-04 strong[data-v-b23c0cae] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-b23c0cae],
.expressive-heading-04 em[data-v-b23c0cae] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-b23c0cae] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-b23c0cae] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-b23c0cae],
.expressive-heading-05 strong[data-v-b23c0cae] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-b23c0cae],
.expressive-heading-05 em[data-v-b23c0cae] {
  font-style: italic;
}
.expressive-subheading-01[data-v-b23c0cae] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-b23c0cae],
.expressive-subheading-01 strong[data-v-b23c0cae] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-b23c0cae],
.expressive-subheading-01 em[data-v-b23c0cae] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-b23c0cae] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-b23c0cae] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-b23c0cae],
.ui-heading-01 strong[data-v-b23c0cae] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-b23c0cae],
.ui-heading-01 em[data-v-b23c0cae] {
  font-style: italic;
}
.ui-heading-02[data-v-b23c0cae] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-b23c0cae],
.ui-heading-02 strong[data-v-b23c0cae] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-b23c0cae],
.ui-heading-02 em[data-v-b23c0cae] {
  font-style: italic;
}
.ui-heading-03[data-v-b23c0cae] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-b23c0cae],
.ui-heading-03 strong[data-v-b23c0cae] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-b23c0cae],
.ui-heading-03 em[data-v-b23c0cae] {
  font-style: italic;
}
.ui-body-01[data-v-b23c0cae] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-b23c0cae],
.ui-body-01 strong[data-v-b23c0cae] {
  font-weight: 600;
}
.ui-body-01 i[data-v-b23c0cae],
.ui-body-01 em[data-v-b23c0cae] {
  font-style: italic;
}
.ui-body-01-strong[data-v-b23c0cae] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-b23c0cae],
.ui-body-01-strong strong[data-v-b23c0cae] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-b23c0cae],
.ui-body-01-strong em[data-v-b23c0cae] {
  font-style: italic;
}
.ui-body-01-italic[data-v-b23c0cae] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-b23c0cae],
.ui-body-01-italic strong[data-v-b23c0cae] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-b23c0cae],
.ui-body-01-italic em[data-v-b23c0cae] {
  font-style: italic;
}
.ui-body-02[data-v-b23c0cae] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-b23c0cae],
.ui-body-02 strong[data-v-b23c0cae] {
  font-weight: 600;
}
.ui-body-02 i[data-v-b23c0cae],
.ui-body-02 em[data-v-b23c0cae] {
  font-style: italic;
}
.ui-body-02-strong[data-v-b23c0cae] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-b23c0cae],
.ui-body-02-strong strong[data-v-b23c0cae] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-b23c0cae],
.ui-body-02-strong em[data-v-b23c0cae] {
  font-style: italic;
}
.ui-caption-01[data-v-b23c0cae] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-b23c0cae],
.ui-caption-01 strong[data-v-b23c0cae] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-b23c0cae],
.ui-caption-01 em[data-v-b23c0cae] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-b23c0cae] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-b23c0cae],
.ui-caption-01-strong strong[data-v-b23c0cae] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-b23c0cae],
.ui-caption-01-strong em[data-v-b23c0cae] {
  font-style: italic;
}
.ui-label-01[data-v-b23c0cae] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-b23c0cae],
.ui-label-01 strong[data-v-b23c0cae] {
  font-weight: 600;
}
.ui-label-01 i[data-v-b23c0cae],
.ui-label-01 em[data-v-b23c0cae] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-b23c0cae] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-b23c0cae] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-b23c0cae] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-b23c0cae {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-b23c0cae {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-b23c0cae {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-b23c0cae {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-b23c0cae],
.fade-leave-active[data-v-b23c0cae] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-b23c0cae],
.fade-leave-to[data-v-b23c0cae] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-b23c0cae],
.fade-slide-vertical-leave-to[data-v-b23c0cae] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-b23c0cae],
.fade-slide-vertical-leave-from[data-v-b23c0cae] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-b23c0cae],
.fade-slide-vertical-leave-active[data-v-b23c0cae] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-b23c0cae],[data-v-b23c0cae]::before,[data-v-b23c0cae]::after {
  box-sizing: border-box;
}
html[data-v-b23c0cae],
body[data-v-b23c0cae],
div[data-v-b23c0cae],
span[data-v-b23c0cae],
object[data-v-b23c0cae],
iframe[data-v-b23c0cae],
h1[data-v-b23c0cae],
h2[data-v-b23c0cae],
h3[data-v-b23c0cae],
h4[data-v-b23c0cae],
h5[data-v-b23c0cae],
h6[data-v-b23c0cae],
p[data-v-b23c0cae],
blockquote[data-v-b23c0cae],
pre[data-v-b23c0cae],
abbr[data-v-b23c0cae],
address[data-v-b23c0cae],
cite[data-v-b23c0cae],
code[data-v-b23c0cae],
del[data-v-b23c0cae],
dfn[data-v-b23c0cae],
em[data-v-b23c0cae],
img[data-v-b23c0cae],
ins[data-v-b23c0cae],
kbd[data-v-b23c0cae],
q[data-v-b23c0cae],
samp[data-v-b23c0cae],
small[data-v-b23c0cae],
strong[data-v-b23c0cae],
sub[data-v-b23c0cae],
sup[data-v-b23c0cae],
var[data-v-b23c0cae],
b[data-v-b23c0cae],
i[data-v-b23c0cae],
dl[data-v-b23c0cae],
dt[data-v-b23c0cae],
dd[data-v-b23c0cae],
ol[data-v-b23c0cae],
ul[data-v-b23c0cae],
li[data-v-b23c0cae],
fieldset[data-v-b23c0cae],
form[data-v-b23c0cae],
label[data-v-b23c0cae],
legend[data-v-b23c0cae],
table[data-v-b23c0cae],
caption[data-v-b23c0cae],
tbody[data-v-b23c0cae],
tfoot[data-v-b23c0cae],
thead[data-v-b23c0cae],
tr[data-v-b23c0cae],
th[data-v-b23c0cae],
td[data-v-b23c0cae],
article[data-v-b23c0cae],
aside[data-v-b23c0cae],
dialog[data-v-b23c0cae],
figure[data-v-b23c0cae],
footer[data-v-b23c0cae],
header[data-v-b23c0cae],
hgroup[data-v-b23c0cae],
menu[data-v-b23c0cae],
nav[data-v-b23c0cae],
section[data-v-b23c0cae],
time[data-v-b23c0cae],
mark[data-v-b23c0cae],
audio[data-v-b23c0cae],
video[data-v-b23c0cae] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-b23c0cae],
aside[data-v-b23c0cae],
dialog[data-v-b23c0cae],
figure[data-v-b23c0cae],
footer[data-v-b23c0cae],
header[data-v-b23c0cae],
hgroup[data-v-b23c0cae],
nav[data-v-b23c0cae],
section[data-v-b23c0cae],
main[data-v-b23c0cae] {
  display: block;
}
blockquote[data-v-b23c0cae],
q[data-v-b23c0cae] {
  quotes: none;
}
blockquote[data-v-b23c0cae]::before, blockquote[data-v-b23c0cae]::after,
q[data-v-b23c0cae]::before,
q[data-v-b23c0cae]::after {
  content: none;
}
ul[data-v-b23c0cae],
ol[data-v-b23c0cae] {
  list-style: none;
}
table[data-v-b23c0cae] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-b23c0cae] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-b23c0cae] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.breakpoints[data-v-b23c0cae] {
  display: flex;
  max-width: 100%;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--ads-space-4, 1rem);
}
.breakpoints__rectangle[data-v-b23c0cae] {
  position: relative;
  display: flex;
  height: var(--ads-sizes-20, 5rem);
  align-items: center;
  justify-content: center;
  background-color: var(--ads-colors-accent-hover-light, #007576);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-c920fd0a] {
  color: #252339;
}
.color-text-body[data-v-c920fd0a] {
  color: #3e3d48;
}
.color-text-muted[data-v-c920fd0a] {
  color: #8b8a93;
}
.color-text-primary[data-v-c920fd0a] {
  color: #068484;
}
.color-text-inverse[data-v-c920fd0a] {
  color: #fff;
}
.color-background[data-v-c920fd0a] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-c920fd0a] {
  background-color: #fff;
}
.color-background-dark[data-v-c920fd0a] {
  background-color: #050033;
}
.color-background-primary[data-v-c920fd0a] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-c920fd0a] {
  background-color: #252339;
}
.color-background-badge-light[data-v-c920fd0a] {
  background-color: #544e85;
}
.color-background-modal[data-v-c920fd0a] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-c920fd0a] {
  display: block;
}

/* Utility */
.no-outline[data-v-c920fd0a] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-c920fd0a] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-c920fd0a]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-c920fd0a] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-c920fd0a]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-c920fd0a]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-c920fd0a]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-c920fd0a]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-c920fd0a]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-c920fd0a]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-c920fd0a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-c920fd0a],
.ads-error-message strong[data-v-c920fd0a] {
  font-weight: 600;
}
.ads-error-message i[data-v-c920fd0a],
.ads-error-message em[data-v-c920fd0a] {
  font-style: italic;
}
.ads-error-message p[data-v-c920fd0a] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-c920fd0a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-c920fd0a],
.ads-indicator strong[data-v-c920fd0a] {
  font-weight: 600;
}
.ads-indicator i[data-v-c920fd0a],
.ads-indicator em[data-v-c920fd0a] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-c920fd0a] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-c920fd0a] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-c920fd0a] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-c920fd0a] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-c920fd0a] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-c920fd0a] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-c920fd0a] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-c920fd0a] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-c920fd0a] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-c920fd0a] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-c920fd0a] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-c920fd0a] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-c920fd0a] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-c920fd0a] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-c920fd0a] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-c920fd0a] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-c920fd0a] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-c920fd0a] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-c920fd0a] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-c920fd0a] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-c920fd0a] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-c920fd0a] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-c920fd0a] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-c920fd0a] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-c920fd0a] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-c920fd0a] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-c920fd0a],
.expressive-heading-01 strong[data-v-c920fd0a] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-c920fd0a],
.expressive-heading-01 em[data-v-c920fd0a] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-c920fd0a] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-c920fd0a] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-c920fd0a] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-c920fd0a],
.expressive-heading-02 strong[data-v-c920fd0a] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-c920fd0a],
.expressive-heading-02 em[data-v-c920fd0a] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-c920fd0a] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-c920fd0a] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-c920fd0a] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-c920fd0a],
.expressive-heading-03 strong[data-v-c920fd0a] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-c920fd0a],
.expressive-heading-03 em[data-v-c920fd0a] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-c920fd0a] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-c920fd0a] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-c920fd0a] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-c920fd0a],
.expressive-heading-04 strong[data-v-c920fd0a] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-c920fd0a],
.expressive-heading-04 em[data-v-c920fd0a] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-c920fd0a] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-c920fd0a] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-c920fd0a],
.expressive-heading-05 strong[data-v-c920fd0a] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-c920fd0a],
.expressive-heading-05 em[data-v-c920fd0a] {
  font-style: italic;
}
.expressive-subheading-01[data-v-c920fd0a] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-c920fd0a],
.expressive-subheading-01 strong[data-v-c920fd0a] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-c920fd0a],
.expressive-subheading-01 em[data-v-c920fd0a] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-c920fd0a] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-c920fd0a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-c920fd0a],
.ui-heading-01 strong[data-v-c920fd0a] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-c920fd0a],
.ui-heading-01 em[data-v-c920fd0a] {
  font-style: italic;
}
.ui-heading-02[data-v-c920fd0a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-c920fd0a],
.ui-heading-02 strong[data-v-c920fd0a] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-c920fd0a],
.ui-heading-02 em[data-v-c920fd0a] {
  font-style: italic;
}
.ui-heading-03[data-v-c920fd0a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-c920fd0a],
.ui-heading-03 strong[data-v-c920fd0a] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-c920fd0a],
.ui-heading-03 em[data-v-c920fd0a] {
  font-style: italic;
}
.ui-body-01[data-v-c920fd0a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-c920fd0a],
.ui-body-01 strong[data-v-c920fd0a] {
  font-weight: 600;
}
.ui-body-01 i[data-v-c920fd0a],
.ui-body-01 em[data-v-c920fd0a] {
  font-style: italic;
}
.ui-body-01-strong[data-v-c920fd0a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-c920fd0a],
.ui-body-01-strong strong[data-v-c920fd0a] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-c920fd0a],
.ui-body-01-strong em[data-v-c920fd0a] {
  font-style: italic;
}
.ui-body-01-italic[data-v-c920fd0a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-c920fd0a],
.ui-body-01-italic strong[data-v-c920fd0a] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-c920fd0a],
.ui-body-01-italic em[data-v-c920fd0a] {
  font-style: italic;
}
.ui-body-02[data-v-c920fd0a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-c920fd0a],
.ui-body-02 strong[data-v-c920fd0a] {
  font-weight: 600;
}
.ui-body-02 i[data-v-c920fd0a],
.ui-body-02 em[data-v-c920fd0a] {
  font-style: italic;
}
.ui-body-02-strong[data-v-c920fd0a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-c920fd0a],
.ui-body-02-strong strong[data-v-c920fd0a] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-c920fd0a],
.ui-body-02-strong em[data-v-c920fd0a] {
  font-style: italic;
}
.ui-caption-01[data-v-c920fd0a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-c920fd0a],
.ui-caption-01 strong[data-v-c920fd0a] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-c920fd0a],
.ui-caption-01 em[data-v-c920fd0a] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-c920fd0a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-c920fd0a],
.ui-caption-01-strong strong[data-v-c920fd0a] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-c920fd0a],
.ui-caption-01-strong em[data-v-c920fd0a] {
  font-style: italic;
}
.ui-label-01[data-v-c920fd0a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-c920fd0a],
.ui-label-01 strong[data-v-c920fd0a] {
  font-weight: 600;
}
.ui-label-01 i[data-v-c920fd0a],
.ui-label-01 em[data-v-c920fd0a] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-c920fd0a] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-c920fd0a] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-c920fd0a] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-c920fd0a {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-c920fd0a {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-c920fd0a {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-c920fd0a {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-c920fd0a],
.fade-leave-active[data-v-c920fd0a] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-c920fd0a],
.fade-leave-to[data-v-c920fd0a] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-c920fd0a],
.fade-slide-vertical-leave-to[data-v-c920fd0a] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-c920fd0a],
.fade-slide-vertical-leave-from[data-v-c920fd0a] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-c920fd0a],
.fade-slide-vertical-leave-active[data-v-c920fd0a] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-c920fd0a],[data-v-c920fd0a]::before,[data-v-c920fd0a]::after {
  box-sizing: border-box;
}
html[data-v-c920fd0a],
body[data-v-c920fd0a],
div[data-v-c920fd0a],
span[data-v-c920fd0a],
object[data-v-c920fd0a],
iframe[data-v-c920fd0a],
h1[data-v-c920fd0a],
h2[data-v-c920fd0a],
h3[data-v-c920fd0a],
h4[data-v-c920fd0a],
h5[data-v-c920fd0a],
h6[data-v-c920fd0a],
p[data-v-c920fd0a],
blockquote[data-v-c920fd0a],
pre[data-v-c920fd0a],
abbr[data-v-c920fd0a],
address[data-v-c920fd0a],
cite[data-v-c920fd0a],
code[data-v-c920fd0a],
del[data-v-c920fd0a],
dfn[data-v-c920fd0a],
em[data-v-c920fd0a],
img[data-v-c920fd0a],
ins[data-v-c920fd0a],
kbd[data-v-c920fd0a],
q[data-v-c920fd0a],
samp[data-v-c920fd0a],
small[data-v-c920fd0a],
strong[data-v-c920fd0a],
sub[data-v-c920fd0a],
sup[data-v-c920fd0a],
var[data-v-c920fd0a],
b[data-v-c920fd0a],
i[data-v-c920fd0a],
dl[data-v-c920fd0a],
dt[data-v-c920fd0a],
dd[data-v-c920fd0a],
ol[data-v-c920fd0a],
ul[data-v-c920fd0a],
li[data-v-c920fd0a],
fieldset[data-v-c920fd0a],
form[data-v-c920fd0a],
label[data-v-c920fd0a],
legend[data-v-c920fd0a],
table[data-v-c920fd0a],
caption[data-v-c920fd0a],
tbody[data-v-c920fd0a],
tfoot[data-v-c920fd0a],
thead[data-v-c920fd0a],
tr[data-v-c920fd0a],
th[data-v-c920fd0a],
td[data-v-c920fd0a],
article[data-v-c920fd0a],
aside[data-v-c920fd0a],
dialog[data-v-c920fd0a],
figure[data-v-c920fd0a],
footer[data-v-c920fd0a],
header[data-v-c920fd0a],
hgroup[data-v-c920fd0a],
menu[data-v-c920fd0a],
nav[data-v-c920fd0a],
section[data-v-c920fd0a],
time[data-v-c920fd0a],
mark[data-v-c920fd0a],
audio[data-v-c920fd0a],
video[data-v-c920fd0a] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-c920fd0a],
aside[data-v-c920fd0a],
dialog[data-v-c920fd0a],
figure[data-v-c920fd0a],
footer[data-v-c920fd0a],
header[data-v-c920fd0a],
hgroup[data-v-c920fd0a],
nav[data-v-c920fd0a],
section[data-v-c920fd0a],
main[data-v-c920fd0a] {
  display: block;
}
blockquote[data-v-c920fd0a],
q[data-v-c920fd0a] {
  quotes: none;
}
blockquote[data-v-c920fd0a]::before, blockquote[data-v-c920fd0a]::after,
q[data-v-c920fd0a]::before,
q[data-v-c920fd0a]::after {
  content: none;
}
ul[data-v-c920fd0a],
ol[data-v-c920fd0a] {
  list-style: none;
}
table[data-v-c920fd0a] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-c920fd0a] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-c920fd0a] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.color[data-v-c920fd0a] {
  display: grid;
  gap: var(--ads-space-4, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}
.color__item[data-v-c920fd0a] {
  overflow: scroll hidden;
  align-items: stretch;
  border-top-left-radius: var(--ads-radii-base, 0.25rem);
  border-top-right-radius: var(--ads-radii-base, 0.25rem);
  box-shadow: var(--ads-shadows-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
  gap: 0;
}
.color__rectangle[data-v-c920fd0a] {
  position: relative;
  width: var(--ads-sizes-full, 100%);
  height: var(--ads-space-20, 5rem);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-ed3b5c68] {
  color: #252339;
}
.color-text-body[data-v-ed3b5c68] {
  color: #3e3d48;
}
.color-text-muted[data-v-ed3b5c68] {
  color: #8b8a93;
}
.color-text-primary[data-v-ed3b5c68] {
  color: #068484;
}
.color-text-inverse[data-v-ed3b5c68] {
  color: #fff;
}
.color-background[data-v-ed3b5c68] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-ed3b5c68] {
  background-color: #fff;
}
.color-background-dark[data-v-ed3b5c68] {
  background-color: #050033;
}
.color-background-primary[data-v-ed3b5c68] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-ed3b5c68] {
  background-color: #252339;
}
.color-background-badge-light[data-v-ed3b5c68] {
  background-color: #544e85;
}
.color-background-modal[data-v-ed3b5c68] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-ed3b5c68] {
  display: block;
}

/* Utility */
.no-outline[data-v-ed3b5c68] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-ed3b5c68] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-ed3b5c68]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-ed3b5c68] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-ed3b5c68]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-ed3b5c68]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-ed3b5c68]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-ed3b5c68]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-ed3b5c68]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-ed3b5c68]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-ed3b5c68],
.ads-error-message strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.ads-error-message i[data-v-ed3b5c68],
.ads-error-message em[data-v-ed3b5c68] {
  font-style: italic;
}
.ads-error-message p[data-v-ed3b5c68] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-ed3b5c68],
.ads-indicator strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.ads-indicator i[data-v-ed3b5c68],
.ads-indicator em[data-v-ed3b5c68] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-ed3b5c68] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-ed3b5c68] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-ed3b5c68] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-ed3b5c68] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-ed3b5c68] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-ed3b5c68] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-ed3b5c68] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-ed3b5c68] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-ed3b5c68] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-ed3b5c68] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-ed3b5c68] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-ed3b5c68] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-ed3b5c68] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-ed3b5c68] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-ed3b5c68] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-ed3b5c68] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-ed3b5c68] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-ed3b5c68] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-ed3b5c68] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-ed3b5c68] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-ed3b5c68] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-ed3b5c68] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-ed3b5c68] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-ed3b5c68] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-ed3b5c68] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-ed3b5c68],
.expressive-heading-01 strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-ed3b5c68],
.expressive-heading-01 em[data-v-ed3b5c68] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-ed3b5c68] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-ed3b5c68] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-ed3b5c68],
.expressive-heading-02 strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-ed3b5c68],
.expressive-heading-02 em[data-v-ed3b5c68] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-ed3b5c68] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-ed3b5c68] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-ed3b5c68],
.expressive-heading-03 strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-ed3b5c68],
.expressive-heading-03 em[data-v-ed3b5c68] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-ed3b5c68] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-ed3b5c68] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-ed3b5c68],
.expressive-heading-04 strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-ed3b5c68],
.expressive-heading-04 em[data-v-ed3b5c68] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-ed3b5c68] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-ed3b5c68],
.expressive-heading-05 strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-ed3b5c68],
.expressive-heading-05 em[data-v-ed3b5c68] {
  font-style: italic;
}
.expressive-subheading-01[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-ed3b5c68],
.expressive-subheading-01 strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-ed3b5c68],
.expressive-subheading-01 em[data-v-ed3b5c68] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-ed3b5c68] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-ed3b5c68],
.ui-heading-01 strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-ed3b5c68],
.ui-heading-01 em[data-v-ed3b5c68] {
  font-style: italic;
}
.ui-heading-02[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-ed3b5c68],
.ui-heading-02 strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-ed3b5c68],
.ui-heading-02 em[data-v-ed3b5c68] {
  font-style: italic;
}
.ui-heading-03[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-ed3b5c68],
.ui-heading-03 strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-ed3b5c68],
.ui-heading-03 em[data-v-ed3b5c68] {
  font-style: italic;
}
.ui-body-01[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-ed3b5c68],
.ui-body-01 strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.ui-body-01 i[data-v-ed3b5c68],
.ui-body-01 em[data-v-ed3b5c68] {
  font-style: italic;
}
.ui-body-01-strong[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-ed3b5c68],
.ui-body-01-strong strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-ed3b5c68],
.ui-body-01-strong em[data-v-ed3b5c68] {
  font-style: italic;
}
.ui-body-01-italic[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-ed3b5c68],
.ui-body-01-italic strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-ed3b5c68],
.ui-body-01-italic em[data-v-ed3b5c68] {
  font-style: italic;
}
.ui-body-02[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-ed3b5c68],
.ui-body-02 strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.ui-body-02 i[data-v-ed3b5c68],
.ui-body-02 em[data-v-ed3b5c68] {
  font-style: italic;
}
.ui-body-02-strong[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-ed3b5c68],
.ui-body-02-strong strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-ed3b5c68],
.ui-body-02-strong em[data-v-ed3b5c68] {
  font-style: italic;
}
.ui-caption-01[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-ed3b5c68],
.ui-caption-01 strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-ed3b5c68],
.ui-caption-01 em[data-v-ed3b5c68] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-ed3b5c68],
.ui-caption-01-strong strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-ed3b5c68],
.ui-caption-01-strong em[data-v-ed3b5c68] {
  font-style: italic;
}
.ui-label-01[data-v-ed3b5c68] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-ed3b5c68],
.ui-label-01 strong[data-v-ed3b5c68] {
  font-weight: 600;
}
.ui-label-01 i[data-v-ed3b5c68],
.ui-label-01 em[data-v-ed3b5c68] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-ed3b5c68] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-ed3b5c68] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-ed3b5c68] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-ed3b5c68 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-ed3b5c68 {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-ed3b5c68 {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-ed3b5c68 {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-ed3b5c68],
.fade-leave-active[data-v-ed3b5c68] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-ed3b5c68],
.fade-leave-to[data-v-ed3b5c68] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-ed3b5c68],
.fade-slide-vertical-leave-to[data-v-ed3b5c68] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-ed3b5c68],
.fade-slide-vertical-leave-from[data-v-ed3b5c68] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-ed3b5c68],
.fade-slide-vertical-leave-active[data-v-ed3b5c68] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-ed3b5c68],[data-v-ed3b5c68]::before,[data-v-ed3b5c68]::after {
  box-sizing: border-box;
}
html[data-v-ed3b5c68],
body[data-v-ed3b5c68],
div[data-v-ed3b5c68],
span[data-v-ed3b5c68],
object[data-v-ed3b5c68],
iframe[data-v-ed3b5c68],
h1[data-v-ed3b5c68],
h2[data-v-ed3b5c68],
h3[data-v-ed3b5c68],
h4[data-v-ed3b5c68],
h5[data-v-ed3b5c68],
h6[data-v-ed3b5c68],
p[data-v-ed3b5c68],
blockquote[data-v-ed3b5c68],
pre[data-v-ed3b5c68],
abbr[data-v-ed3b5c68],
address[data-v-ed3b5c68],
cite[data-v-ed3b5c68],
code[data-v-ed3b5c68],
del[data-v-ed3b5c68],
dfn[data-v-ed3b5c68],
em[data-v-ed3b5c68],
img[data-v-ed3b5c68],
ins[data-v-ed3b5c68],
kbd[data-v-ed3b5c68],
q[data-v-ed3b5c68],
samp[data-v-ed3b5c68],
small[data-v-ed3b5c68],
strong[data-v-ed3b5c68],
sub[data-v-ed3b5c68],
sup[data-v-ed3b5c68],
var[data-v-ed3b5c68],
b[data-v-ed3b5c68],
i[data-v-ed3b5c68],
dl[data-v-ed3b5c68],
dt[data-v-ed3b5c68],
dd[data-v-ed3b5c68],
ol[data-v-ed3b5c68],
ul[data-v-ed3b5c68],
li[data-v-ed3b5c68],
fieldset[data-v-ed3b5c68],
form[data-v-ed3b5c68],
label[data-v-ed3b5c68],
legend[data-v-ed3b5c68],
table[data-v-ed3b5c68],
caption[data-v-ed3b5c68],
tbody[data-v-ed3b5c68],
tfoot[data-v-ed3b5c68],
thead[data-v-ed3b5c68],
tr[data-v-ed3b5c68],
th[data-v-ed3b5c68],
td[data-v-ed3b5c68],
article[data-v-ed3b5c68],
aside[data-v-ed3b5c68],
dialog[data-v-ed3b5c68],
figure[data-v-ed3b5c68],
footer[data-v-ed3b5c68],
header[data-v-ed3b5c68],
hgroup[data-v-ed3b5c68],
menu[data-v-ed3b5c68],
nav[data-v-ed3b5c68],
section[data-v-ed3b5c68],
time[data-v-ed3b5c68],
mark[data-v-ed3b5c68],
audio[data-v-ed3b5c68],
video[data-v-ed3b5c68] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-ed3b5c68],
aside[data-v-ed3b5c68],
dialog[data-v-ed3b5c68],
figure[data-v-ed3b5c68],
footer[data-v-ed3b5c68],
header[data-v-ed3b5c68],
hgroup[data-v-ed3b5c68],
nav[data-v-ed3b5c68],
section[data-v-ed3b5c68],
main[data-v-ed3b5c68] {
  display: block;
}
blockquote[data-v-ed3b5c68],
q[data-v-ed3b5c68] {
  quotes: none;
}
blockquote[data-v-ed3b5c68]::before, blockquote[data-v-ed3b5c68]::after,
q[data-v-ed3b5c68]::before,
q[data-v-ed3b5c68]::after {
  content: none;
}
ul[data-v-ed3b5c68],
ol[data-v-ed3b5c68] {
  list-style: none;
}
table[data-v-ed3b5c68] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-ed3b5c68] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-ed3b5c68] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.fonts[data-v-ed3b5c68] {
  display: flex;
  max-width: 100%;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--ads-space-4, 1rem);
}
.fonts__rectangle[data-v-ed3b5c68] {
  position: relative;
  display: flex;
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-bedb82fe] {
  color: #252339;
}
.color-text-body[data-v-bedb82fe] {
  color: #3e3d48;
}
.color-text-muted[data-v-bedb82fe] {
  color: #8b8a93;
}
.color-text-primary[data-v-bedb82fe] {
  color: #068484;
}
.color-text-inverse[data-v-bedb82fe] {
  color: #fff;
}
.color-background[data-v-bedb82fe] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-bedb82fe] {
  background-color: #fff;
}
.color-background-dark[data-v-bedb82fe] {
  background-color: #050033;
}
.color-background-primary[data-v-bedb82fe] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-bedb82fe] {
  background-color: #252339;
}
.color-background-badge-light[data-v-bedb82fe] {
  background-color: #544e85;
}
.color-background-modal[data-v-bedb82fe] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-bedb82fe] {
  display: block;
}

/* Utility */
.no-outline[data-v-bedb82fe] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-bedb82fe] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-bedb82fe]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-bedb82fe] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-bedb82fe]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-bedb82fe]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-bedb82fe]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-bedb82fe]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-bedb82fe]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-bedb82fe]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-bedb82fe] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-bedb82fe],
.ads-error-message strong[data-v-bedb82fe] {
  font-weight: 600;
}
.ads-error-message i[data-v-bedb82fe],
.ads-error-message em[data-v-bedb82fe] {
  font-style: italic;
}
.ads-error-message p[data-v-bedb82fe] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-bedb82fe] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-bedb82fe],
.ads-indicator strong[data-v-bedb82fe] {
  font-weight: 600;
}
.ads-indicator i[data-v-bedb82fe],
.ads-indicator em[data-v-bedb82fe] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-bedb82fe] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-bedb82fe] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-bedb82fe] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-bedb82fe] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-bedb82fe] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-bedb82fe] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-bedb82fe] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-bedb82fe] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-bedb82fe] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-bedb82fe] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-bedb82fe] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-bedb82fe] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-bedb82fe] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-bedb82fe] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-bedb82fe] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-bedb82fe] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-bedb82fe] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-bedb82fe] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-bedb82fe] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-bedb82fe] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-bedb82fe] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-bedb82fe] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-bedb82fe] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-bedb82fe] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-bedb82fe] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-bedb82fe] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-bedb82fe],
.expressive-heading-01 strong[data-v-bedb82fe] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-bedb82fe],
.expressive-heading-01 em[data-v-bedb82fe] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-bedb82fe] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-bedb82fe] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-bedb82fe] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-bedb82fe],
.expressive-heading-02 strong[data-v-bedb82fe] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-bedb82fe],
.expressive-heading-02 em[data-v-bedb82fe] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-bedb82fe] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-bedb82fe] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-bedb82fe] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-bedb82fe],
.expressive-heading-03 strong[data-v-bedb82fe] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-bedb82fe],
.expressive-heading-03 em[data-v-bedb82fe] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-bedb82fe] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-bedb82fe] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-bedb82fe] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-bedb82fe],
.expressive-heading-04 strong[data-v-bedb82fe] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-bedb82fe],
.expressive-heading-04 em[data-v-bedb82fe] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-bedb82fe] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-bedb82fe] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-bedb82fe],
.expressive-heading-05 strong[data-v-bedb82fe] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-bedb82fe],
.expressive-heading-05 em[data-v-bedb82fe] {
  font-style: italic;
}
.expressive-subheading-01[data-v-bedb82fe] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-bedb82fe],
.expressive-subheading-01 strong[data-v-bedb82fe] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-bedb82fe],
.expressive-subheading-01 em[data-v-bedb82fe] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-bedb82fe] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-bedb82fe] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-bedb82fe],
.ui-heading-01 strong[data-v-bedb82fe] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-bedb82fe],
.ui-heading-01 em[data-v-bedb82fe] {
  font-style: italic;
}
.ui-heading-02[data-v-bedb82fe] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-bedb82fe],
.ui-heading-02 strong[data-v-bedb82fe] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-bedb82fe],
.ui-heading-02 em[data-v-bedb82fe] {
  font-style: italic;
}
.ui-heading-03[data-v-bedb82fe] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-bedb82fe],
.ui-heading-03 strong[data-v-bedb82fe] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-bedb82fe],
.ui-heading-03 em[data-v-bedb82fe] {
  font-style: italic;
}
.ui-body-01[data-v-bedb82fe] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-bedb82fe],
.ui-body-01 strong[data-v-bedb82fe] {
  font-weight: 600;
}
.ui-body-01 i[data-v-bedb82fe],
.ui-body-01 em[data-v-bedb82fe] {
  font-style: italic;
}
.ui-body-01-strong[data-v-bedb82fe] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-bedb82fe],
.ui-body-01-strong strong[data-v-bedb82fe] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-bedb82fe],
.ui-body-01-strong em[data-v-bedb82fe] {
  font-style: italic;
}
.ui-body-01-italic[data-v-bedb82fe] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-bedb82fe],
.ui-body-01-italic strong[data-v-bedb82fe] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-bedb82fe],
.ui-body-01-italic em[data-v-bedb82fe] {
  font-style: italic;
}
.ui-body-02[data-v-bedb82fe] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-bedb82fe],
.ui-body-02 strong[data-v-bedb82fe] {
  font-weight: 600;
}
.ui-body-02 i[data-v-bedb82fe],
.ui-body-02 em[data-v-bedb82fe] {
  font-style: italic;
}
.ui-body-02-strong[data-v-bedb82fe] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-bedb82fe],
.ui-body-02-strong strong[data-v-bedb82fe] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-bedb82fe],
.ui-body-02-strong em[data-v-bedb82fe] {
  font-style: italic;
}
.ui-caption-01[data-v-bedb82fe] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-bedb82fe],
.ui-caption-01 strong[data-v-bedb82fe] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-bedb82fe],
.ui-caption-01 em[data-v-bedb82fe] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-bedb82fe] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-bedb82fe],
.ui-caption-01-strong strong[data-v-bedb82fe] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-bedb82fe],
.ui-caption-01-strong em[data-v-bedb82fe] {
  font-style: italic;
}
.ui-label-01[data-v-bedb82fe] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-bedb82fe],
.ui-label-01 strong[data-v-bedb82fe] {
  font-weight: 600;
}
.ui-label-01 i[data-v-bedb82fe],
.ui-label-01 em[data-v-bedb82fe] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-bedb82fe] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-bedb82fe] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-bedb82fe] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-bedb82fe {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-bedb82fe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-bedb82fe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-bedb82fe {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-bedb82fe],
.fade-leave-active[data-v-bedb82fe] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-bedb82fe],
.fade-leave-to[data-v-bedb82fe] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-bedb82fe],
.fade-slide-vertical-leave-to[data-v-bedb82fe] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-bedb82fe],
.fade-slide-vertical-leave-from[data-v-bedb82fe] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-bedb82fe],
.fade-slide-vertical-leave-active[data-v-bedb82fe] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-bedb82fe],[data-v-bedb82fe]::before,[data-v-bedb82fe]::after {
  box-sizing: border-box;
}
html[data-v-bedb82fe],
body[data-v-bedb82fe],
div[data-v-bedb82fe],
span[data-v-bedb82fe],
object[data-v-bedb82fe],
iframe[data-v-bedb82fe],
h1[data-v-bedb82fe],
h2[data-v-bedb82fe],
h3[data-v-bedb82fe],
h4[data-v-bedb82fe],
h5[data-v-bedb82fe],
h6[data-v-bedb82fe],
p[data-v-bedb82fe],
blockquote[data-v-bedb82fe],
pre[data-v-bedb82fe],
abbr[data-v-bedb82fe],
address[data-v-bedb82fe],
cite[data-v-bedb82fe],
code[data-v-bedb82fe],
del[data-v-bedb82fe],
dfn[data-v-bedb82fe],
em[data-v-bedb82fe],
img[data-v-bedb82fe],
ins[data-v-bedb82fe],
kbd[data-v-bedb82fe],
q[data-v-bedb82fe],
samp[data-v-bedb82fe],
small[data-v-bedb82fe],
strong[data-v-bedb82fe],
sub[data-v-bedb82fe],
sup[data-v-bedb82fe],
var[data-v-bedb82fe],
b[data-v-bedb82fe],
i[data-v-bedb82fe],
dl[data-v-bedb82fe],
dt[data-v-bedb82fe],
dd[data-v-bedb82fe],
ol[data-v-bedb82fe],
ul[data-v-bedb82fe],
li[data-v-bedb82fe],
fieldset[data-v-bedb82fe],
form[data-v-bedb82fe],
label[data-v-bedb82fe],
legend[data-v-bedb82fe],
table[data-v-bedb82fe],
caption[data-v-bedb82fe],
tbody[data-v-bedb82fe],
tfoot[data-v-bedb82fe],
thead[data-v-bedb82fe],
tr[data-v-bedb82fe],
th[data-v-bedb82fe],
td[data-v-bedb82fe],
article[data-v-bedb82fe],
aside[data-v-bedb82fe],
dialog[data-v-bedb82fe],
figure[data-v-bedb82fe],
footer[data-v-bedb82fe],
header[data-v-bedb82fe],
hgroup[data-v-bedb82fe],
menu[data-v-bedb82fe],
nav[data-v-bedb82fe],
section[data-v-bedb82fe],
time[data-v-bedb82fe],
mark[data-v-bedb82fe],
audio[data-v-bedb82fe],
video[data-v-bedb82fe] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-bedb82fe],
aside[data-v-bedb82fe],
dialog[data-v-bedb82fe],
figure[data-v-bedb82fe],
footer[data-v-bedb82fe],
header[data-v-bedb82fe],
hgroup[data-v-bedb82fe],
nav[data-v-bedb82fe],
section[data-v-bedb82fe],
main[data-v-bedb82fe] {
  display: block;
}
blockquote[data-v-bedb82fe],
q[data-v-bedb82fe] {
  quotes: none;
}
blockquote[data-v-bedb82fe]::before, blockquote[data-v-bedb82fe]::after,
q[data-v-bedb82fe]::before,
q[data-v-bedb82fe]::after {
  content: none;
}
ul[data-v-bedb82fe],
ol[data-v-bedb82fe] {
  list-style: none;
}
table[data-v-bedb82fe] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-bedb82fe] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-bedb82fe] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.font-sizes[data-v-bedb82fe] {
  display: flex;
  max-width: 100%;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--ads-sizes-3, 0.75rem);
}
.font-sizes__rectangle[data-v-bedb82fe] {
  position: relative;
  display: flex;
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-3477bd1f] {
  color: #252339;
}
.color-text-body[data-v-3477bd1f] {
  color: #3e3d48;
}
.color-text-muted[data-v-3477bd1f] {
  color: #8b8a93;
}
.color-text-primary[data-v-3477bd1f] {
  color: #068484;
}
.color-text-inverse[data-v-3477bd1f] {
  color: #fff;
}
.color-background[data-v-3477bd1f] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-3477bd1f] {
  background-color: #fff;
}
.color-background-dark[data-v-3477bd1f] {
  background-color: #050033;
}
.color-background-primary[data-v-3477bd1f] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-3477bd1f] {
  background-color: #252339;
}
.color-background-badge-light[data-v-3477bd1f] {
  background-color: #544e85;
}
.color-background-modal[data-v-3477bd1f] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-3477bd1f] {
  display: block;
}

/* Utility */
.no-outline[data-v-3477bd1f] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-3477bd1f] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-3477bd1f]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-3477bd1f] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-3477bd1f]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-3477bd1f]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-3477bd1f]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-3477bd1f]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-3477bd1f]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-3477bd1f]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-3477bd1f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-3477bd1f],
.ads-error-message strong[data-v-3477bd1f] {
  font-weight: 600;
}
.ads-error-message i[data-v-3477bd1f],
.ads-error-message em[data-v-3477bd1f] {
  font-style: italic;
}
.ads-error-message p[data-v-3477bd1f] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-3477bd1f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-3477bd1f],
.ads-indicator strong[data-v-3477bd1f] {
  font-weight: 600;
}
.ads-indicator i[data-v-3477bd1f],
.ads-indicator em[data-v-3477bd1f] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-3477bd1f] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-3477bd1f] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-3477bd1f] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-3477bd1f] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-3477bd1f] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-3477bd1f] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-3477bd1f] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-3477bd1f] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-3477bd1f] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-3477bd1f] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-3477bd1f] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-3477bd1f] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-3477bd1f] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-3477bd1f] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-3477bd1f] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-3477bd1f] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-3477bd1f] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-3477bd1f] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-3477bd1f] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-3477bd1f] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-3477bd1f] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-3477bd1f] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-3477bd1f] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-3477bd1f] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-3477bd1f] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-3477bd1f] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-3477bd1f],
.expressive-heading-01 strong[data-v-3477bd1f] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-3477bd1f],
.expressive-heading-01 em[data-v-3477bd1f] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-3477bd1f] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-3477bd1f] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-3477bd1f] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-3477bd1f],
.expressive-heading-02 strong[data-v-3477bd1f] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-3477bd1f],
.expressive-heading-02 em[data-v-3477bd1f] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-3477bd1f] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-3477bd1f] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-3477bd1f] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-3477bd1f],
.expressive-heading-03 strong[data-v-3477bd1f] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-3477bd1f],
.expressive-heading-03 em[data-v-3477bd1f] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-3477bd1f] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-3477bd1f] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-3477bd1f] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-3477bd1f],
.expressive-heading-04 strong[data-v-3477bd1f] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-3477bd1f],
.expressive-heading-04 em[data-v-3477bd1f] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-3477bd1f] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-3477bd1f] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-3477bd1f],
.expressive-heading-05 strong[data-v-3477bd1f] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-3477bd1f],
.expressive-heading-05 em[data-v-3477bd1f] {
  font-style: italic;
}
.expressive-subheading-01[data-v-3477bd1f] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-3477bd1f],
.expressive-subheading-01 strong[data-v-3477bd1f] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-3477bd1f],
.expressive-subheading-01 em[data-v-3477bd1f] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-3477bd1f] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-3477bd1f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-3477bd1f],
.ui-heading-01 strong[data-v-3477bd1f] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-3477bd1f],
.ui-heading-01 em[data-v-3477bd1f] {
  font-style: italic;
}
.ui-heading-02[data-v-3477bd1f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-3477bd1f],
.ui-heading-02 strong[data-v-3477bd1f] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-3477bd1f],
.ui-heading-02 em[data-v-3477bd1f] {
  font-style: italic;
}
.ui-heading-03[data-v-3477bd1f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-3477bd1f],
.ui-heading-03 strong[data-v-3477bd1f] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-3477bd1f],
.ui-heading-03 em[data-v-3477bd1f] {
  font-style: italic;
}
.ui-body-01[data-v-3477bd1f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-3477bd1f],
.ui-body-01 strong[data-v-3477bd1f] {
  font-weight: 600;
}
.ui-body-01 i[data-v-3477bd1f],
.ui-body-01 em[data-v-3477bd1f] {
  font-style: italic;
}
.ui-body-01-strong[data-v-3477bd1f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-3477bd1f],
.ui-body-01-strong strong[data-v-3477bd1f] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-3477bd1f],
.ui-body-01-strong em[data-v-3477bd1f] {
  font-style: italic;
}
.ui-body-01-italic[data-v-3477bd1f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-3477bd1f],
.ui-body-01-italic strong[data-v-3477bd1f] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-3477bd1f],
.ui-body-01-italic em[data-v-3477bd1f] {
  font-style: italic;
}
.ui-body-02[data-v-3477bd1f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-3477bd1f],
.ui-body-02 strong[data-v-3477bd1f] {
  font-weight: 600;
}
.ui-body-02 i[data-v-3477bd1f],
.ui-body-02 em[data-v-3477bd1f] {
  font-style: italic;
}
.ui-body-02-strong[data-v-3477bd1f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-3477bd1f],
.ui-body-02-strong strong[data-v-3477bd1f] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-3477bd1f],
.ui-body-02-strong em[data-v-3477bd1f] {
  font-style: italic;
}
.ui-caption-01[data-v-3477bd1f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-3477bd1f],
.ui-caption-01 strong[data-v-3477bd1f] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-3477bd1f],
.ui-caption-01 em[data-v-3477bd1f] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-3477bd1f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-3477bd1f],
.ui-caption-01-strong strong[data-v-3477bd1f] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-3477bd1f],
.ui-caption-01-strong em[data-v-3477bd1f] {
  font-style: italic;
}
.ui-label-01[data-v-3477bd1f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-3477bd1f],
.ui-label-01 strong[data-v-3477bd1f] {
  font-weight: 600;
}
.ui-label-01 i[data-v-3477bd1f],
.ui-label-01 em[data-v-3477bd1f] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-3477bd1f] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-3477bd1f] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-3477bd1f] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-3477bd1f {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-3477bd1f {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-3477bd1f {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-3477bd1f {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-3477bd1f],
.fade-leave-active[data-v-3477bd1f] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-3477bd1f],
.fade-leave-to[data-v-3477bd1f] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-3477bd1f],
.fade-slide-vertical-leave-to[data-v-3477bd1f] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-3477bd1f],
.fade-slide-vertical-leave-from[data-v-3477bd1f] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-3477bd1f],
.fade-slide-vertical-leave-active[data-v-3477bd1f] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-3477bd1f],[data-v-3477bd1f]::before,[data-v-3477bd1f]::after {
  box-sizing: border-box;
}
html[data-v-3477bd1f],
body[data-v-3477bd1f],
div[data-v-3477bd1f],
span[data-v-3477bd1f],
object[data-v-3477bd1f],
iframe[data-v-3477bd1f],
h1[data-v-3477bd1f],
h2[data-v-3477bd1f],
h3[data-v-3477bd1f],
h4[data-v-3477bd1f],
h5[data-v-3477bd1f],
h6[data-v-3477bd1f],
p[data-v-3477bd1f],
blockquote[data-v-3477bd1f],
pre[data-v-3477bd1f],
abbr[data-v-3477bd1f],
address[data-v-3477bd1f],
cite[data-v-3477bd1f],
code[data-v-3477bd1f],
del[data-v-3477bd1f],
dfn[data-v-3477bd1f],
em[data-v-3477bd1f],
img[data-v-3477bd1f],
ins[data-v-3477bd1f],
kbd[data-v-3477bd1f],
q[data-v-3477bd1f],
samp[data-v-3477bd1f],
small[data-v-3477bd1f],
strong[data-v-3477bd1f],
sub[data-v-3477bd1f],
sup[data-v-3477bd1f],
var[data-v-3477bd1f],
b[data-v-3477bd1f],
i[data-v-3477bd1f],
dl[data-v-3477bd1f],
dt[data-v-3477bd1f],
dd[data-v-3477bd1f],
ol[data-v-3477bd1f],
ul[data-v-3477bd1f],
li[data-v-3477bd1f],
fieldset[data-v-3477bd1f],
form[data-v-3477bd1f],
label[data-v-3477bd1f],
legend[data-v-3477bd1f],
table[data-v-3477bd1f],
caption[data-v-3477bd1f],
tbody[data-v-3477bd1f],
tfoot[data-v-3477bd1f],
thead[data-v-3477bd1f],
tr[data-v-3477bd1f],
th[data-v-3477bd1f],
td[data-v-3477bd1f],
article[data-v-3477bd1f],
aside[data-v-3477bd1f],
dialog[data-v-3477bd1f],
figure[data-v-3477bd1f],
footer[data-v-3477bd1f],
header[data-v-3477bd1f],
hgroup[data-v-3477bd1f],
menu[data-v-3477bd1f],
nav[data-v-3477bd1f],
section[data-v-3477bd1f],
time[data-v-3477bd1f],
mark[data-v-3477bd1f],
audio[data-v-3477bd1f],
video[data-v-3477bd1f] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-3477bd1f],
aside[data-v-3477bd1f],
dialog[data-v-3477bd1f],
figure[data-v-3477bd1f],
footer[data-v-3477bd1f],
header[data-v-3477bd1f],
hgroup[data-v-3477bd1f],
nav[data-v-3477bd1f],
section[data-v-3477bd1f],
main[data-v-3477bd1f] {
  display: block;
}
blockquote[data-v-3477bd1f],
q[data-v-3477bd1f] {
  quotes: none;
}
blockquote[data-v-3477bd1f]::before, blockquote[data-v-3477bd1f]::after,
q[data-v-3477bd1f]::before,
q[data-v-3477bd1f]::after {
  content: none;
}
ul[data-v-3477bd1f],
ol[data-v-3477bd1f] {
  list-style: none;
}
table[data-v-3477bd1f] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-3477bd1f] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-3477bd1f] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.font-weights[data-v-3477bd1f] {
  display: flex;
  max-width: 100%;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--ads-space-4, 1rem);
}
.font-weights__rectangle[data-v-3477bd1f] {
  position: relative;
  display: flex;
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-6b63de9f] {
  color: #252339;
}
.color-text-body[data-v-6b63de9f] {
  color: #3e3d48;
}
.color-text-muted[data-v-6b63de9f] {
  color: #8b8a93;
}
.color-text-primary[data-v-6b63de9f] {
  color: #068484;
}
.color-text-inverse[data-v-6b63de9f] {
  color: #fff;
}
.color-background[data-v-6b63de9f] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-6b63de9f] {
  background-color: #fff;
}
.color-background-dark[data-v-6b63de9f] {
  background-color: #050033;
}
.color-background-primary[data-v-6b63de9f] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-6b63de9f] {
  background-color: #252339;
}
.color-background-badge-light[data-v-6b63de9f] {
  background-color: #544e85;
}
.color-background-modal[data-v-6b63de9f] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-6b63de9f] {
  display: block;
}

/* Utility */
.no-outline[data-v-6b63de9f] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-6b63de9f] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-6b63de9f]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-6b63de9f] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-6b63de9f]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-6b63de9f]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-6b63de9f]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-6b63de9f]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-6b63de9f]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-6b63de9f]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-6b63de9f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-6b63de9f],
.ads-error-message strong[data-v-6b63de9f] {
  font-weight: 600;
}
.ads-error-message i[data-v-6b63de9f],
.ads-error-message em[data-v-6b63de9f] {
  font-style: italic;
}
.ads-error-message p[data-v-6b63de9f] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-6b63de9f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-6b63de9f],
.ads-indicator strong[data-v-6b63de9f] {
  font-weight: 600;
}
.ads-indicator i[data-v-6b63de9f],
.ads-indicator em[data-v-6b63de9f] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-6b63de9f] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-6b63de9f] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-6b63de9f] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-6b63de9f] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-6b63de9f] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-6b63de9f] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-6b63de9f] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-6b63de9f] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-6b63de9f] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-6b63de9f] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-6b63de9f] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-6b63de9f] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-6b63de9f] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-6b63de9f] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-6b63de9f] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-6b63de9f] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-6b63de9f] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-6b63de9f] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-6b63de9f] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-6b63de9f] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-6b63de9f] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-6b63de9f] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-6b63de9f] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-6b63de9f] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-6b63de9f] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-6b63de9f] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-6b63de9f],
.expressive-heading-01 strong[data-v-6b63de9f] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-6b63de9f],
.expressive-heading-01 em[data-v-6b63de9f] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-6b63de9f] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-6b63de9f] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-6b63de9f] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-6b63de9f],
.expressive-heading-02 strong[data-v-6b63de9f] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-6b63de9f],
.expressive-heading-02 em[data-v-6b63de9f] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-6b63de9f] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-6b63de9f] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-6b63de9f] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-6b63de9f],
.expressive-heading-03 strong[data-v-6b63de9f] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-6b63de9f],
.expressive-heading-03 em[data-v-6b63de9f] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-6b63de9f] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-6b63de9f] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-6b63de9f] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-6b63de9f],
.expressive-heading-04 strong[data-v-6b63de9f] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-6b63de9f],
.expressive-heading-04 em[data-v-6b63de9f] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-6b63de9f] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-6b63de9f] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-6b63de9f],
.expressive-heading-05 strong[data-v-6b63de9f] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-6b63de9f],
.expressive-heading-05 em[data-v-6b63de9f] {
  font-style: italic;
}
.expressive-subheading-01[data-v-6b63de9f] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-6b63de9f],
.expressive-subheading-01 strong[data-v-6b63de9f] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-6b63de9f],
.expressive-subheading-01 em[data-v-6b63de9f] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-6b63de9f] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-6b63de9f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-6b63de9f],
.ui-heading-01 strong[data-v-6b63de9f] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-6b63de9f],
.ui-heading-01 em[data-v-6b63de9f] {
  font-style: italic;
}
.ui-heading-02[data-v-6b63de9f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-6b63de9f],
.ui-heading-02 strong[data-v-6b63de9f] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-6b63de9f],
.ui-heading-02 em[data-v-6b63de9f] {
  font-style: italic;
}
.ui-heading-03[data-v-6b63de9f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-6b63de9f],
.ui-heading-03 strong[data-v-6b63de9f] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-6b63de9f],
.ui-heading-03 em[data-v-6b63de9f] {
  font-style: italic;
}
.ui-body-01[data-v-6b63de9f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-6b63de9f],
.ui-body-01 strong[data-v-6b63de9f] {
  font-weight: 600;
}
.ui-body-01 i[data-v-6b63de9f],
.ui-body-01 em[data-v-6b63de9f] {
  font-style: italic;
}
.ui-body-01-strong[data-v-6b63de9f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-6b63de9f],
.ui-body-01-strong strong[data-v-6b63de9f] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-6b63de9f],
.ui-body-01-strong em[data-v-6b63de9f] {
  font-style: italic;
}
.ui-body-01-italic[data-v-6b63de9f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-6b63de9f],
.ui-body-01-italic strong[data-v-6b63de9f] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-6b63de9f],
.ui-body-01-italic em[data-v-6b63de9f] {
  font-style: italic;
}
.ui-body-02[data-v-6b63de9f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-6b63de9f],
.ui-body-02 strong[data-v-6b63de9f] {
  font-weight: 600;
}
.ui-body-02 i[data-v-6b63de9f],
.ui-body-02 em[data-v-6b63de9f] {
  font-style: italic;
}
.ui-body-02-strong[data-v-6b63de9f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-6b63de9f],
.ui-body-02-strong strong[data-v-6b63de9f] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-6b63de9f],
.ui-body-02-strong em[data-v-6b63de9f] {
  font-style: italic;
}
.ui-caption-01[data-v-6b63de9f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-6b63de9f],
.ui-caption-01 strong[data-v-6b63de9f] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-6b63de9f],
.ui-caption-01 em[data-v-6b63de9f] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-6b63de9f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-6b63de9f],
.ui-caption-01-strong strong[data-v-6b63de9f] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-6b63de9f],
.ui-caption-01-strong em[data-v-6b63de9f] {
  font-style: italic;
}
.ui-label-01[data-v-6b63de9f] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-6b63de9f],
.ui-label-01 strong[data-v-6b63de9f] {
  font-weight: 600;
}
.ui-label-01 i[data-v-6b63de9f],
.ui-label-01 em[data-v-6b63de9f] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-6b63de9f] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-6b63de9f] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-6b63de9f] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-6b63de9f {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-6b63de9f {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-6b63de9f {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-6b63de9f {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-6b63de9f],
.fade-leave-active[data-v-6b63de9f] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-6b63de9f],
.fade-leave-to[data-v-6b63de9f] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-6b63de9f],
.fade-slide-vertical-leave-to[data-v-6b63de9f] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-6b63de9f],
.fade-slide-vertical-leave-from[data-v-6b63de9f] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-6b63de9f],
.fade-slide-vertical-leave-active[data-v-6b63de9f] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-6b63de9f],[data-v-6b63de9f]::before,[data-v-6b63de9f]::after {
  box-sizing: border-box;
}
html[data-v-6b63de9f],
body[data-v-6b63de9f],
div[data-v-6b63de9f],
span[data-v-6b63de9f],
object[data-v-6b63de9f],
iframe[data-v-6b63de9f],
h1[data-v-6b63de9f],
h2[data-v-6b63de9f],
h3[data-v-6b63de9f],
h4[data-v-6b63de9f],
h5[data-v-6b63de9f],
h6[data-v-6b63de9f],
p[data-v-6b63de9f],
blockquote[data-v-6b63de9f],
pre[data-v-6b63de9f],
abbr[data-v-6b63de9f],
address[data-v-6b63de9f],
cite[data-v-6b63de9f],
code[data-v-6b63de9f],
del[data-v-6b63de9f],
dfn[data-v-6b63de9f],
em[data-v-6b63de9f],
img[data-v-6b63de9f],
ins[data-v-6b63de9f],
kbd[data-v-6b63de9f],
q[data-v-6b63de9f],
samp[data-v-6b63de9f],
small[data-v-6b63de9f],
strong[data-v-6b63de9f],
sub[data-v-6b63de9f],
sup[data-v-6b63de9f],
var[data-v-6b63de9f],
b[data-v-6b63de9f],
i[data-v-6b63de9f],
dl[data-v-6b63de9f],
dt[data-v-6b63de9f],
dd[data-v-6b63de9f],
ol[data-v-6b63de9f],
ul[data-v-6b63de9f],
li[data-v-6b63de9f],
fieldset[data-v-6b63de9f],
form[data-v-6b63de9f],
label[data-v-6b63de9f],
legend[data-v-6b63de9f],
table[data-v-6b63de9f],
caption[data-v-6b63de9f],
tbody[data-v-6b63de9f],
tfoot[data-v-6b63de9f],
thead[data-v-6b63de9f],
tr[data-v-6b63de9f],
th[data-v-6b63de9f],
td[data-v-6b63de9f],
article[data-v-6b63de9f],
aside[data-v-6b63de9f],
dialog[data-v-6b63de9f],
figure[data-v-6b63de9f],
footer[data-v-6b63de9f],
header[data-v-6b63de9f],
hgroup[data-v-6b63de9f],
menu[data-v-6b63de9f],
nav[data-v-6b63de9f],
section[data-v-6b63de9f],
time[data-v-6b63de9f],
mark[data-v-6b63de9f],
audio[data-v-6b63de9f],
video[data-v-6b63de9f] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-6b63de9f],
aside[data-v-6b63de9f],
dialog[data-v-6b63de9f],
figure[data-v-6b63de9f],
footer[data-v-6b63de9f],
header[data-v-6b63de9f],
hgroup[data-v-6b63de9f],
nav[data-v-6b63de9f],
section[data-v-6b63de9f],
main[data-v-6b63de9f] {
  display: block;
}
blockquote[data-v-6b63de9f],
q[data-v-6b63de9f] {
  quotes: none;
}
blockquote[data-v-6b63de9f]::before, blockquote[data-v-6b63de9f]::after,
q[data-v-6b63de9f]::before,
q[data-v-6b63de9f]::after {
  content: none;
}
ul[data-v-6b63de9f],
ol[data-v-6b63de9f] {
  list-style: none;
}
table[data-v-6b63de9f] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-6b63de9f] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-6b63de9f] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.letter-spacing[data-v-6b63de9f] {
  display: flex;
  max-width: 100%;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--ads-space-4, 1rem);
}
.letter-spacing__rectangle[data-v-6b63de9f] {
  position: relative;
  display: flex;
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-fa10ad16] {
  color: #252339;
}
.color-text-body[data-v-fa10ad16] {
  color: #3e3d48;
}
.color-text-muted[data-v-fa10ad16] {
  color: #8b8a93;
}
.color-text-primary[data-v-fa10ad16] {
  color: #068484;
}
.color-text-inverse[data-v-fa10ad16] {
  color: #fff;
}
.color-background[data-v-fa10ad16] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-fa10ad16] {
  background-color: #fff;
}
.color-background-dark[data-v-fa10ad16] {
  background-color: #050033;
}
.color-background-primary[data-v-fa10ad16] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-fa10ad16] {
  background-color: #252339;
}
.color-background-badge-light[data-v-fa10ad16] {
  background-color: #544e85;
}
.color-background-modal[data-v-fa10ad16] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-fa10ad16] {
  display: block;
}

/* Utility */
.no-outline[data-v-fa10ad16] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-fa10ad16] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-fa10ad16]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-fa10ad16] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-fa10ad16]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-fa10ad16]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-fa10ad16]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-fa10ad16]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-fa10ad16]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-fa10ad16]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-fa10ad16] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-fa10ad16],
.ads-error-message strong[data-v-fa10ad16] {
  font-weight: 600;
}
.ads-error-message i[data-v-fa10ad16],
.ads-error-message em[data-v-fa10ad16] {
  font-style: italic;
}
.ads-error-message p[data-v-fa10ad16] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-fa10ad16] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-fa10ad16],
.ads-indicator strong[data-v-fa10ad16] {
  font-weight: 600;
}
.ads-indicator i[data-v-fa10ad16],
.ads-indicator em[data-v-fa10ad16] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-fa10ad16] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-fa10ad16] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-fa10ad16] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-fa10ad16] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-fa10ad16] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-fa10ad16] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-fa10ad16] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-fa10ad16] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-fa10ad16] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-fa10ad16] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-fa10ad16] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-fa10ad16] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-fa10ad16] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-fa10ad16] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-fa10ad16] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-fa10ad16] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-fa10ad16] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-fa10ad16] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-fa10ad16] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-fa10ad16] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-fa10ad16] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-fa10ad16] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-fa10ad16] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-fa10ad16] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-fa10ad16] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-fa10ad16] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-fa10ad16],
.expressive-heading-01 strong[data-v-fa10ad16] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-fa10ad16],
.expressive-heading-01 em[data-v-fa10ad16] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-fa10ad16] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-fa10ad16] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-fa10ad16] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-fa10ad16],
.expressive-heading-02 strong[data-v-fa10ad16] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-fa10ad16],
.expressive-heading-02 em[data-v-fa10ad16] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-fa10ad16] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-fa10ad16] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-fa10ad16] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-fa10ad16],
.expressive-heading-03 strong[data-v-fa10ad16] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-fa10ad16],
.expressive-heading-03 em[data-v-fa10ad16] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-fa10ad16] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-fa10ad16] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-fa10ad16] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-fa10ad16],
.expressive-heading-04 strong[data-v-fa10ad16] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-fa10ad16],
.expressive-heading-04 em[data-v-fa10ad16] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-fa10ad16] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-fa10ad16] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-fa10ad16],
.expressive-heading-05 strong[data-v-fa10ad16] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-fa10ad16],
.expressive-heading-05 em[data-v-fa10ad16] {
  font-style: italic;
}
.expressive-subheading-01[data-v-fa10ad16] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-fa10ad16],
.expressive-subheading-01 strong[data-v-fa10ad16] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-fa10ad16],
.expressive-subheading-01 em[data-v-fa10ad16] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-fa10ad16] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-fa10ad16] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-fa10ad16],
.ui-heading-01 strong[data-v-fa10ad16] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-fa10ad16],
.ui-heading-01 em[data-v-fa10ad16] {
  font-style: italic;
}
.ui-heading-02[data-v-fa10ad16] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-fa10ad16],
.ui-heading-02 strong[data-v-fa10ad16] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-fa10ad16],
.ui-heading-02 em[data-v-fa10ad16] {
  font-style: italic;
}
.ui-heading-03[data-v-fa10ad16] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-fa10ad16],
.ui-heading-03 strong[data-v-fa10ad16] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-fa10ad16],
.ui-heading-03 em[data-v-fa10ad16] {
  font-style: italic;
}
.ui-body-01[data-v-fa10ad16] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-fa10ad16],
.ui-body-01 strong[data-v-fa10ad16] {
  font-weight: 600;
}
.ui-body-01 i[data-v-fa10ad16],
.ui-body-01 em[data-v-fa10ad16] {
  font-style: italic;
}
.ui-body-01-strong[data-v-fa10ad16] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-fa10ad16],
.ui-body-01-strong strong[data-v-fa10ad16] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-fa10ad16],
.ui-body-01-strong em[data-v-fa10ad16] {
  font-style: italic;
}
.ui-body-01-italic[data-v-fa10ad16] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-fa10ad16],
.ui-body-01-italic strong[data-v-fa10ad16] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-fa10ad16],
.ui-body-01-italic em[data-v-fa10ad16] {
  font-style: italic;
}
.ui-body-02[data-v-fa10ad16] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-fa10ad16],
.ui-body-02 strong[data-v-fa10ad16] {
  font-weight: 600;
}
.ui-body-02 i[data-v-fa10ad16],
.ui-body-02 em[data-v-fa10ad16] {
  font-style: italic;
}
.ui-body-02-strong[data-v-fa10ad16] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-fa10ad16],
.ui-body-02-strong strong[data-v-fa10ad16] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-fa10ad16],
.ui-body-02-strong em[data-v-fa10ad16] {
  font-style: italic;
}
.ui-caption-01[data-v-fa10ad16] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-fa10ad16],
.ui-caption-01 strong[data-v-fa10ad16] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-fa10ad16],
.ui-caption-01 em[data-v-fa10ad16] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-fa10ad16] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-fa10ad16],
.ui-caption-01-strong strong[data-v-fa10ad16] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-fa10ad16],
.ui-caption-01-strong em[data-v-fa10ad16] {
  font-style: italic;
}
.ui-label-01[data-v-fa10ad16] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-fa10ad16],
.ui-label-01 strong[data-v-fa10ad16] {
  font-weight: 600;
}
.ui-label-01 i[data-v-fa10ad16],
.ui-label-01 em[data-v-fa10ad16] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-fa10ad16] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-fa10ad16] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-fa10ad16] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-fa10ad16 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-fa10ad16 {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-fa10ad16 {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-fa10ad16 {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-fa10ad16],
.fade-leave-active[data-v-fa10ad16] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-fa10ad16],
.fade-leave-to[data-v-fa10ad16] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-fa10ad16],
.fade-slide-vertical-leave-to[data-v-fa10ad16] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-fa10ad16],
.fade-slide-vertical-leave-from[data-v-fa10ad16] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-fa10ad16],
.fade-slide-vertical-leave-active[data-v-fa10ad16] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-fa10ad16],[data-v-fa10ad16]::before,[data-v-fa10ad16]::after {
  box-sizing: border-box;
}
html[data-v-fa10ad16],
body[data-v-fa10ad16],
div[data-v-fa10ad16],
span[data-v-fa10ad16],
object[data-v-fa10ad16],
iframe[data-v-fa10ad16],
h1[data-v-fa10ad16],
h2[data-v-fa10ad16],
h3[data-v-fa10ad16],
h4[data-v-fa10ad16],
h5[data-v-fa10ad16],
h6[data-v-fa10ad16],
p[data-v-fa10ad16],
blockquote[data-v-fa10ad16],
pre[data-v-fa10ad16],
abbr[data-v-fa10ad16],
address[data-v-fa10ad16],
cite[data-v-fa10ad16],
code[data-v-fa10ad16],
del[data-v-fa10ad16],
dfn[data-v-fa10ad16],
em[data-v-fa10ad16],
img[data-v-fa10ad16],
ins[data-v-fa10ad16],
kbd[data-v-fa10ad16],
q[data-v-fa10ad16],
samp[data-v-fa10ad16],
small[data-v-fa10ad16],
strong[data-v-fa10ad16],
sub[data-v-fa10ad16],
sup[data-v-fa10ad16],
var[data-v-fa10ad16],
b[data-v-fa10ad16],
i[data-v-fa10ad16],
dl[data-v-fa10ad16],
dt[data-v-fa10ad16],
dd[data-v-fa10ad16],
ol[data-v-fa10ad16],
ul[data-v-fa10ad16],
li[data-v-fa10ad16],
fieldset[data-v-fa10ad16],
form[data-v-fa10ad16],
label[data-v-fa10ad16],
legend[data-v-fa10ad16],
table[data-v-fa10ad16],
caption[data-v-fa10ad16],
tbody[data-v-fa10ad16],
tfoot[data-v-fa10ad16],
thead[data-v-fa10ad16],
tr[data-v-fa10ad16],
th[data-v-fa10ad16],
td[data-v-fa10ad16],
article[data-v-fa10ad16],
aside[data-v-fa10ad16],
dialog[data-v-fa10ad16],
figure[data-v-fa10ad16],
footer[data-v-fa10ad16],
header[data-v-fa10ad16],
hgroup[data-v-fa10ad16],
menu[data-v-fa10ad16],
nav[data-v-fa10ad16],
section[data-v-fa10ad16],
time[data-v-fa10ad16],
mark[data-v-fa10ad16],
audio[data-v-fa10ad16],
video[data-v-fa10ad16] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-fa10ad16],
aside[data-v-fa10ad16],
dialog[data-v-fa10ad16],
figure[data-v-fa10ad16],
footer[data-v-fa10ad16],
header[data-v-fa10ad16],
hgroup[data-v-fa10ad16],
nav[data-v-fa10ad16],
section[data-v-fa10ad16],
main[data-v-fa10ad16] {
  display: block;
}
blockquote[data-v-fa10ad16],
q[data-v-fa10ad16] {
  quotes: none;
}
blockquote[data-v-fa10ad16]::before, blockquote[data-v-fa10ad16]::after,
q[data-v-fa10ad16]::before,
q[data-v-fa10ad16]::after {
  content: none;
}
ul[data-v-fa10ad16],
ol[data-v-fa10ad16] {
  list-style: none;
}
table[data-v-fa10ad16] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-fa10ad16] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-fa10ad16] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.line-heights[data-v-fa10ad16] {
  display: flex;
  max-width: 100%;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--ads-space-4, 1rem);
}
.line-heights__rectangle[data-v-fa10ad16] {
  position: relative;
}
.line-heights__rectangle > p[data-v-fa10ad16] {
  background-color: var(--ads-colors-accent-hover-light, #007576);
  color: var(--ads-colors-surface-base-light, #fff);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-2c6a794b] {
  color: #252339;
}
.color-text-body[data-v-2c6a794b] {
  color: #3e3d48;
}
.color-text-muted[data-v-2c6a794b] {
  color: #8b8a93;
}
.color-text-primary[data-v-2c6a794b] {
  color: #068484;
}
.color-text-inverse[data-v-2c6a794b] {
  color: #fff;
}
.color-background[data-v-2c6a794b] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-2c6a794b] {
  background-color: #fff;
}
.color-background-dark[data-v-2c6a794b] {
  background-color: #050033;
}
.color-background-primary[data-v-2c6a794b] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-2c6a794b] {
  background-color: #252339;
}
.color-background-badge-light[data-v-2c6a794b] {
  background-color: #544e85;
}
.color-background-modal[data-v-2c6a794b] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-2c6a794b] {
  display: block;
}

/* Utility */
.no-outline[data-v-2c6a794b] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-2c6a794b] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-2c6a794b]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-2c6a794b] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-2c6a794b]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-2c6a794b]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-2c6a794b]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-2c6a794b]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-2c6a794b]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-2c6a794b]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-2c6a794b] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-2c6a794b],
.ads-error-message strong[data-v-2c6a794b] {
  font-weight: 600;
}
.ads-error-message i[data-v-2c6a794b],
.ads-error-message em[data-v-2c6a794b] {
  font-style: italic;
}
.ads-error-message p[data-v-2c6a794b] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-2c6a794b] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-2c6a794b],
.ads-indicator strong[data-v-2c6a794b] {
  font-weight: 600;
}
.ads-indicator i[data-v-2c6a794b],
.ads-indicator em[data-v-2c6a794b] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-2c6a794b] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-2c6a794b] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-2c6a794b] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-2c6a794b] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-2c6a794b] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-2c6a794b] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-2c6a794b] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-2c6a794b] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-2c6a794b] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-2c6a794b] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-2c6a794b] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-2c6a794b] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-2c6a794b] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-2c6a794b] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-2c6a794b] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-2c6a794b] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-2c6a794b] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-2c6a794b] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-2c6a794b] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-2c6a794b] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-2c6a794b] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-2c6a794b] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-2c6a794b] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-2c6a794b] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-2c6a794b] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-2c6a794b] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-2c6a794b],
.expressive-heading-01 strong[data-v-2c6a794b] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-2c6a794b],
.expressive-heading-01 em[data-v-2c6a794b] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-2c6a794b] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-2c6a794b] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-2c6a794b] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-2c6a794b],
.expressive-heading-02 strong[data-v-2c6a794b] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-2c6a794b],
.expressive-heading-02 em[data-v-2c6a794b] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-2c6a794b] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-2c6a794b] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-2c6a794b] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-2c6a794b],
.expressive-heading-03 strong[data-v-2c6a794b] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-2c6a794b],
.expressive-heading-03 em[data-v-2c6a794b] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-2c6a794b] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-2c6a794b] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-2c6a794b] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-2c6a794b],
.expressive-heading-04 strong[data-v-2c6a794b] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-2c6a794b],
.expressive-heading-04 em[data-v-2c6a794b] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-2c6a794b] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-2c6a794b] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-2c6a794b],
.expressive-heading-05 strong[data-v-2c6a794b] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-2c6a794b],
.expressive-heading-05 em[data-v-2c6a794b] {
  font-style: italic;
}
.expressive-subheading-01[data-v-2c6a794b] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-2c6a794b],
.expressive-subheading-01 strong[data-v-2c6a794b] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-2c6a794b],
.expressive-subheading-01 em[data-v-2c6a794b] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-2c6a794b] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-2c6a794b] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-2c6a794b],
.ui-heading-01 strong[data-v-2c6a794b] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-2c6a794b],
.ui-heading-01 em[data-v-2c6a794b] {
  font-style: italic;
}
.ui-heading-02[data-v-2c6a794b] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-2c6a794b],
.ui-heading-02 strong[data-v-2c6a794b] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-2c6a794b],
.ui-heading-02 em[data-v-2c6a794b] {
  font-style: italic;
}
.ui-heading-03[data-v-2c6a794b] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-2c6a794b],
.ui-heading-03 strong[data-v-2c6a794b] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-2c6a794b],
.ui-heading-03 em[data-v-2c6a794b] {
  font-style: italic;
}
.ui-body-01[data-v-2c6a794b] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-2c6a794b],
.ui-body-01 strong[data-v-2c6a794b] {
  font-weight: 600;
}
.ui-body-01 i[data-v-2c6a794b],
.ui-body-01 em[data-v-2c6a794b] {
  font-style: italic;
}
.ui-body-01-strong[data-v-2c6a794b] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-2c6a794b],
.ui-body-01-strong strong[data-v-2c6a794b] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-2c6a794b],
.ui-body-01-strong em[data-v-2c6a794b] {
  font-style: italic;
}
.ui-body-01-italic[data-v-2c6a794b] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-2c6a794b],
.ui-body-01-italic strong[data-v-2c6a794b] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-2c6a794b],
.ui-body-01-italic em[data-v-2c6a794b] {
  font-style: italic;
}
.ui-body-02[data-v-2c6a794b] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-2c6a794b],
.ui-body-02 strong[data-v-2c6a794b] {
  font-weight: 600;
}
.ui-body-02 i[data-v-2c6a794b],
.ui-body-02 em[data-v-2c6a794b] {
  font-style: italic;
}
.ui-body-02-strong[data-v-2c6a794b] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-2c6a794b],
.ui-body-02-strong strong[data-v-2c6a794b] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-2c6a794b],
.ui-body-02-strong em[data-v-2c6a794b] {
  font-style: italic;
}
.ui-caption-01[data-v-2c6a794b] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-2c6a794b],
.ui-caption-01 strong[data-v-2c6a794b] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-2c6a794b],
.ui-caption-01 em[data-v-2c6a794b] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-2c6a794b] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-2c6a794b],
.ui-caption-01-strong strong[data-v-2c6a794b] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-2c6a794b],
.ui-caption-01-strong em[data-v-2c6a794b] {
  font-style: italic;
}
.ui-label-01[data-v-2c6a794b] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-2c6a794b],
.ui-label-01 strong[data-v-2c6a794b] {
  font-weight: 600;
}
.ui-label-01 i[data-v-2c6a794b],
.ui-label-01 em[data-v-2c6a794b] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-2c6a794b] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-2c6a794b] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-2c6a794b] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-2c6a794b {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-2c6a794b {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-2c6a794b {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-2c6a794b {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-2c6a794b],
.fade-leave-active[data-v-2c6a794b] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-2c6a794b],
.fade-leave-to[data-v-2c6a794b] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-2c6a794b],
.fade-slide-vertical-leave-to[data-v-2c6a794b] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-2c6a794b],
.fade-slide-vertical-leave-from[data-v-2c6a794b] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-2c6a794b],
.fade-slide-vertical-leave-active[data-v-2c6a794b] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-2c6a794b],[data-v-2c6a794b]::before,[data-v-2c6a794b]::after {
  box-sizing: border-box;
}
html[data-v-2c6a794b],
body[data-v-2c6a794b],
div[data-v-2c6a794b],
span[data-v-2c6a794b],
object[data-v-2c6a794b],
iframe[data-v-2c6a794b],
h1[data-v-2c6a794b],
h2[data-v-2c6a794b],
h3[data-v-2c6a794b],
h4[data-v-2c6a794b],
h5[data-v-2c6a794b],
h6[data-v-2c6a794b],
p[data-v-2c6a794b],
blockquote[data-v-2c6a794b],
pre[data-v-2c6a794b],
abbr[data-v-2c6a794b],
address[data-v-2c6a794b],
cite[data-v-2c6a794b],
code[data-v-2c6a794b],
del[data-v-2c6a794b],
dfn[data-v-2c6a794b],
em[data-v-2c6a794b],
img[data-v-2c6a794b],
ins[data-v-2c6a794b],
kbd[data-v-2c6a794b],
q[data-v-2c6a794b],
samp[data-v-2c6a794b],
small[data-v-2c6a794b],
strong[data-v-2c6a794b],
sub[data-v-2c6a794b],
sup[data-v-2c6a794b],
var[data-v-2c6a794b],
b[data-v-2c6a794b],
i[data-v-2c6a794b],
dl[data-v-2c6a794b],
dt[data-v-2c6a794b],
dd[data-v-2c6a794b],
ol[data-v-2c6a794b],
ul[data-v-2c6a794b],
li[data-v-2c6a794b],
fieldset[data-v-2c6a794b],
form[data-v-2c6a794b],
label[data-v-2c6a794b],
legend[data-v-2c6a794b],
table[data-v-2c6a794b],
caption[data-v-2c6a794b],
tbody[data-v-2c6a794b],
tfoot[data-v-2c6a794b],
thead[data-v-2c6a794b],
tr[data-v-2c6a794b],
th[data-v-2c6a794b],
td[data-v-2c6a794b],
article[data-v-2c6a794b],
aside[data-v-2c6a794b],
dialog[data-v-2c6a794b],
figure[data-v-2c6a794b],
footer[data-v-2c6a794b],
header[data-v-2c6a794b],
hgroup[data-v-2c6a794b],
menu[data-v-2c6a794b],
nav[data-v-2c6a794b],
section[data-v-2c6a794b],
time[data-v-2c6a794b],
mark[data-v-2c6a794b],
audio[data-v-2c6a794b],
video[data-v-2c6a794b] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-2c6a794b],
aside[data-v-2c6a794b],
dialog[data-v-2c6a794b],
figure[data-v-2c6a794b],
footer[data-v-2c6a794b],
header[data-v-2c6a794b],
hgroup[data-v-2c6a794b],
nav[data-v-2c6a794b],
section[data-v-2c6a794b],
main[data-v-2c6a794b] {
  display: block;
}
blockquote[data-v-2c6a794b],
q[data-v-2c6a794b] {
  quotes: none;
}
blockquote[data-v-2c6a794b]::before, blockquote[data-v-2c6a794b]::after,
q[data-v-2c6a794b]::before,
q[data-v-2c6a794b]::after {
  content: none;
}
ul[data-v-2c6a794b],
ol[data-v-2c6a794b] {
  list-style: none;
}
table[data-v-2c6a794b] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-2c6a794b] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-2c6a794b] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.radii[data-v-2c6a794b] {
  display: flex;
  max-width: 100%;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ads-space-4, 1rem);
}
.radii__rectangle[data-v-2c6a794b] {
  position: relative;
  display: flex;
  height: var(--ads-sizes-20, 5rem);
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  background-color: var(--ads-colors-accent-hover-light, #007576);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-6bba0be4] {
  color: #252339;
}
.color-text-body[data-v-6bba0be4] {
  color: #3e3d48;
}
.color-text-muted[data-v-6bba0be4] {
  color: #8b8a93;
}
.color-text-primary[data-v-6bba0be4] {
  color: #068484;
}
.color-text-inverse[data-v-6bba0be4] {
  color: #fff;
}
.color-background[data-v-6bba0be4] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-6bba0be4] {
  background-color: #fff;
}
.color-background-dark[data-v-6bba0be4] {
  background-color: #050033;
}
.color-background-primary[data-v-6bba0be4] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-6bba0be4] {
  background-color: #252339;
}
.color-background-badge-light[data-v-6bba0be4] {
  background-color: #544e85;
}
.color-background-modal[data-v-6bba0be4] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-6bba0be4] {
  display: block;
}

/* Utility */
.no-outline[data-v-6bba0be4] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-6bba0be4] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-6bba0be4]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-6bba0be4] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-6bba0be4]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-6bba0be4]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-6bba0be4]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-6bba0be4]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-6bba0be4]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-6bba0be4]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-6bba0be4] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-6bba0be4],
.ads-error-message strong[data-v-6bba0be4] {
  font-weight: 600;
}
.ads-error-message i[data-v-6bba0be4],
.ads-error-message em[data-v-6bba0be4] {
  font-style: italic;
}
.ads-error-message p[data-v-6bba0be4] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-6bba0be4] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-6bba0be4],
.ads-indicator strong[data-v-6bba0be4] {
  font-weight: 600;
}
.ads-indicator i[data-v-6bba0be4],
.ads-indicator em[data-v-6bba0be4] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-6bba0be4] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-6bba0be4] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-6bba0be4] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-6bba0be4] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-6bba0be4] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-6bba0be4] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-6bba0be4] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-6bba0be4] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-6bba0be4] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-6bba0be4] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-6bba0be4] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-6bba0be4] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-6bba0be4] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-6bba0be4] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-6bba0be4] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-6bba0be4] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-6bba0be4] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-6bba0be4] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-6bba0be4] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-6bba0be4] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-6bba0be4] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-6bba0be4] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-6bba0be4] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-6bba0be4] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-6bba0be4] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-6bba0be4] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-6bba0be4],
.expressive-heading-01 strong[data-v-6bba0be4] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-6bba0be4],
.expressive-heading-01 em[data-v-6bba0be4] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-6bba0be4] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-6bba0be4] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-6bba0be4] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-6bba0be4],
.expressive-heading-02 strong[data-v-6bba0be4] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-6bba0be4],
.expressive-heading-02 em[data-v-6bba0be4] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-6bba0be4] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-6bba0be4] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-6bba0be4] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-6bba0be4],
.expressive-heading-03 strong[data-v-6bba0be4] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-6bba0be4],
.expressive-heading-03 em[data-v-6bba0be4] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-6bba0be4] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-6bba0be4] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-6bba0be4] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-6bba0be4],
.expressive-heading-04 strong[data-v-6bba0be4] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-6bba0be4],
.expressive-heading-04 em[data-v-6bba0be4] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-6bba0be4] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-6bba0be4] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-6bba0be4],
.expressive-heading-05 strong[data-v-6bba0be4] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-6bba0be4],
.expressive-heading-05 em[data-v-6bba0be4] {
  font-style: italic;
}
.expressive-subheading-01[data-v-6bba0be4] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-6bba0be4],
.expressive-subheading-01 strong[data-v-6bba0be4] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-6bba0be4],
.expressive-subheading-01 em[data-v-6bba0be4] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-6bba0be4] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-6bba0be4] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-6bba0be4],
.ui-heading-01 strong[data-v-6bba0be4] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-6bba0be4],
.ui-heading-01 em[data-v-6bba0be4] {
  font-style: italic;
}
.ui-heading-02[data-v-6bba0be4] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-6bba0be4],
.ui-heading-02 strong[data-v-6bba0be4] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-6bba0be4],
.ui-heading-02 em[data-v-6bba0be4] {
  font-style: italic;
}
.ui-heading-03[data-v-6bba0be4] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-6bba0be4],
.ui-heading-03 strong[data-v-6bba0be4] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-6bba0be4],
.ui-heading-03 em[data-v-6bba0be4] {
  font-style: italic;
}
.ui-body-01[data-v-6bba0be4] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-6bba0be4],
.ui-body-01 strong[data-v-6bba0be4] {
  font-weight: 600;
}
.ui-body-01 i[data-v-6bba0be4],
.ui-body-01 em[data-v-6bba0be4] {
  font-style: italic;
}
.ui-body-01-strong[data-v-6bba0be4] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-6bba0be4],
.ui-body-01-strong strong[data-v-6bba0be4] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-6bba0be4],
.ui-body-01-strong em[data-v-6bba0be4] {
  font-style: italic;
}
.ui-body-01-italic[data-v-6bba0be4] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-6bba0be4],
.ui-body-01-italic strong[data-v-6bba0be4] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-6bba0be4],
.ui-body-01-italic em[data-v-6bba0be4] {
  font-style: italic;
}
.ui-body-02[data-v-6bba0be4] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-6bba0be4],
.ui-body-02 strong[data-v-6bba0be4] {
  font-weight: 600;
}
.ui-body-02 i[data-v-6bba0be4],
.ui-body-02 em[data-v-6bba0be4] {
  font-style: italic;
}
.ui-body-02-strong[data-v-6bba0be4] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-6bba0be4],
.ui-body-02-strong strong[data-v-6bba0be4] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-6bba0be4],
.ui-body-02-strong em[data-v-6bba0be4] {
  font-style: italic;
}
.ui-caption-01[data-v-6bba0be4] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-6bba0be4],
.ui-caption-01 strong[data-v-6bba0be4] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-6bba0be4],
.ui-caption-01 em[data-v-6bba0be4] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-6bba0be4] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-6bba0be4],
.ui-caption-01-strong strong[data-v-6bba0be4] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-6bba0be4],
.ui-caption-01-strong em[data-v-6bba0be4] {
  font-style: italic;
}
.ui-label-01[data-v-6bba0be4] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-6bba0be4],
.ui-label-01 strong[data-v-6bba0be4] {
  font-weight: 600;
}
.ui-label-01 i[data-v-6bba0be4],
.ui-label-01 em[data-v-6bba0be4] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-6bba0be4] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-6bba0be4] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-6bba0be4] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-6bba0be4 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-6bba0be4 {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-6bba0be4 {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-6bba0be4 {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-6bba0be4],
.fade-leave-active[data-v-6bba0be4] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-6bba0be4],
.fade-leave-to[data-v-6bba0be4] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-6bba0be4],
.fade-slide-vertical-leave-to[data-v-6bba0be4] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-6bba0be4],
.fade-slide-vertical-leave-from[data-v-6bba0be4] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-6bba0be4],
.fade-slide-vertical-leave-active[data-v-6bba0be4] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-6bba0be4],[data-v-6bba0be4]::before,[data-v-6bba0be4]::after {
  box-sizing: border-box;
}
html[data-v-6bba0be4],
body[data-v-6bba0be4],
div[data-v-6bba0be4],
span[data-v-6bba0be4],
object[data-v-6bba0be4],
iframe[data-v-6bba0be4],
h1[data-v-6bba0be4],
h2[data-v-6bba0be4],
h3[data-v-6bba0be4],
h4[data-v-6bba0be4],
h5[data-v-6bba0be4],
h6[data-v-6bba0be4],
p[data-v-6bba0be4],
blockquote[data-v-6bba0be4],
pre[data-v-6bba0be4],
abbr[data-v-6bba0be4],
address[data-v-6bba0be4],
cite[data-v-6bba0be4],
code[data-v-6bba0be4],
del[data-v-6bba0be4],
dfn[data-v-6bba0be4],
em[data-v-6bba0be4],
img[data-v-6bba0be4],
ins[data-v-6bba0be4],
kbd[data-v-6bba0be4],
q[data-v-6bba0be4],
samp[data-v-6bba0be4],
small[data-v-6bba0be4],
strong[data-v-6bba0be4],
sub[data-v-6bba0be4],
sup[data-v-6bba0be4],
var[data-v-6bba0be4],
b[data-v-6bba0be4],
i[data-v-6bba0be4],
dl[data-v-6bba0be4],
dt[data-v-6bba0be4],
dd[data-v-6bba0be4],
ol[data-v-6bba0be4],
ul[data-v-6bba0be4],
li[data-v-6bba0be4],
fieldset[data-v-6bba0be4],
form[data-v-6bba0be4],
label[data-v-6bba0be4],
legend[data-v-6bba0be4],
table[data-v-6bba0be4],
caption[data-v-6bba0be4],
tbody[data-v-6bba0be4],
tfoot[data-v-6bba0be4],
thead[data-v-6bba0be4],
tr[data-v-6bba0be4],
th[data-v-6bba0be4],
td[data-v-6bba0be4],
article[data-v-6bba0be4],
aside[data-v-6bba0be4],
dialog[data-v-6bba0be4],
figure[data-v-6bba0be4],
footer[data-v-6bba0be4],
header[data-v-6bba0be4],
hgroup[data-v-6bba0be4],
menu[data-v-6bba0be4],
nav[data-v-6bba0be4],
section[data-v-6bba0be4],
time[data-v-6bba0be4],
mark[data-v-6bba0be4],
audio[data-v-6bba0be4],
video[data-v-6bba0be4] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-6bba0be4],
aside[data-v-6bba0be4],
dialog[data-v-6bba0be4],
figure[data-v-6bba0be4],
footer[data-v-6bba0be4],
header[data-v-6bba0be4],
hgroup[data-v-6bba0be4],
nav[data-v-6bba0be4],
section[data-v-6bba0be4],
main[data-v-6bba0be4] {
  display: block;
}
blockquote[data-v-6bba0be4],
q[data-v-6bba0be4] {
  quotes: none;
}
blockquote[data-v-6bba0be4]::before, blockquote[data-v-6bba0be4]::after,
q[data-v-6bba0be4]::before,
q[data-v-6bba0be4]::after {
  content: none;
}
ul[data-v-6bba0be4],
ol[data-v-6bba0be4] {
  list-style: none;
}
table[data-v-6bba0be4] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-6bba0be4] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-6bba0be4] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.shadow[data-v-6bba0be4] {
  display: flex;
  max-width: 100%;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: space-between;
  padding-left: var(--ads-space-3, 0.75rem);
  gap: var(--ads-space-4, 1rem);
}
.shadow__rectangle[data-v-6bba0be4] {
  position: relative;
  display: flex;
  height: var(--ads-sizes-20, 5rem);
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  background-color: var(--ads-colors-surface-base-light, #fff);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-499eba07] {
  color: #252339;
}
.color-text-body[data-v-499eba07] {
  color: #3e3d48;
}
.color-text-muted[data-v-499eba07] {
  color: #8b8a93;
}
.color-text-primary[data-v-499eba07] {
  color: #068484;
}
.color-text-inverse[data-v-499eba07] {
  color: #fff;
}
.color-background[data-v-499eba07] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-499eba07] {
  background-color: #fff;
}
.color-background-dark[data-v-499eba07] {
  background-color: #050033;
}
.color-background-primary[data-v-499eba07] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-499eba07] {
  background-color: #252339;
}
.color-background-badge-light[data-v-499eba07] {
  background-color: #544e85;
}
.color-background-modal[data-v-499eba07] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-499eba07] {
  display: block;
}

/* Utility */
.no-outline[data-v-499eba07] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-499eba07] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-499eba07]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-499eba07] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-499eba07]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-499eba07]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-499eba07]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-499eba07]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-499eba07]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-499eba07]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-499eba07] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-499eba07],
.ads-error-message strong[data-v-499eba07] {
  font-weight: 600;
}
.ads-error-message i[data-v-499eba07],
.ads-error-message em[data-v-499eba07] {
  font-style: italic;
}
.ads-error-message p[data-v-499eba07] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-499eba07] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-499eba07],
.ads-indicator strong[data-v-499eba07] {
  font-weight: 600;
}
.ads-indicator i[data-v-499eba07],
.ads-indicator em[data-v-499eba07] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-499eba07] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-499eba07] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-499eba07] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-499eba07] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-499eba07] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-499eba07] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-499eba07] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-499eba07] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-499eba07] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-499eba07] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-499eba07] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-499eba07] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-499eba07] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-499eba07] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-499eba07] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-499eba07] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-499eba07] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-499eba07] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-499eba07] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-499eba07] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-499eba07] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-499eba07] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-499eba07] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-499eba07] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-499eba07] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-499eba07] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-499eba07],
.expressive-heading-01 strong[data-v-499eba07] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-499eba07],
.expressive-heading-01 em[data-v-499eba07] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-499eba07] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-499eba07] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-499eba07] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-499eba07],
.expressive-heading-02 strong[data-v-499eba07] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-499eba07],
.expressive-heading-02 em[data-v-499eba07] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-499eba07] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-499eba07] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-499eba07] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-499eba07],
.expressive-heading-03 strong[data-v-499eba07] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-499eba07],
.expressive-heading-03 em[data-v-499eba07] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-499eba07] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-499eba07] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-499eba07] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-499eba07],
.expressive-heading-04 strong[data-v-499eba07] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-499eba07],
.expressive-heading-04 em[data-v-499eba07] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-499eba07] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-499eba07] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-499eba07],
.expressive-heading-05 strong[data-v-499eba07] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-499eba07],
.expressive-heading-05 em[data-v-499eba07] {
  font-style: italic;
}
.expressive-subheading-01[data-v-499eba07] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-499eba07],
.expressive-subheading-01 strong[data-v-499eba07] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-499eba07],
.expressive-subheading-01 em[data-v-499eba07] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-499eba07] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-499eba07] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-499eba07],
.ui-heading-01 strong[data-v-499eba07] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-499eba07],
.ui-heading-01 em[data-v-499eba07] {
  font-style: italic;
}
.ui-heading-02[data-v-499eba07] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-499eba07],
.ui-heading-02 strong[data-v-499eba07] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-499eba07],
.ui-heading-02 em[data-v-499eba07] {
  font-style: italic;
}
.ui-heading-03[data-v-499eba07] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-499eba07],
.ui-heading-03 strong[data-v-499eba07] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-499eba07],
.ui-heading-03 em[data-v-499eba07] {
  font-style: italic;
}
.ui-body-01[data-v-499eba07] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-499eba07],
.ui-body-01 strong[data-v-499eba07] {
  font-weight: 600;
}
.ui-body-01 i[data-v-499eba07],
.ui-body-01 em[data-v-499eba07] {
  font-style: italic;
}
.ui-body-01-strong[data-v-499eba07] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-499eba07],
.ui-body-01-strong strong[data-v-499eba07] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-499eba07],
.ui-body-01-strong em[data-v-499eba07] {
  font-style: italic;
}
.ui-body-01-italic[data-v-499eba07] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-499eba07],
.ui-body-01-italic strong[data-v-499eba07] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-499eba07],
.ui-body-01-italic em[data-v-499eba07] {
  font-style: italic;
}
.ui-body-02[data-v-499eba07] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-499eba07],
.ui-body-02 strong[data-v-499eba07] {
  font-weight: 600;
}
.ui-body-02 i[data-v-499eba07],
.ui-body-02 em[data-v-499eba07] {
  font-style: italic;
}
.ui-body-02-strong[data-v-499eba07] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-499eba07],
.ui-body-02-strong strong[data-v-499eba07] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-499eba07],
.ui-body-02-strong em[data-v-499eba07] {
  font-style: italic;
}
.ui-caption-01[data-v-499eba07] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-499eba07],
.ui-caption-01 strong[data-v-499eba07] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-499eba07],
.ui-caption-01 em[data-v-499eba07] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-499eba07] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-499eba07],
.ui-caption-01-strong strong[data-v-499eba07] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-499eba07],
.ui-caption-01-strong em[data-v-499eba07] {
  font-style: italic;
}
.ui-label-01[data-v-499eba07] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-499eba07],
.ui-label-01 strong[data-v-499eba07] {
  font-weight: 600;
}
.ui-label-01 i[data-v-499eba07],
.ui-label-01 em[data-v-499eba07] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-499eba07] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-499eba07] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-499eba07] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-499eba07 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-499eba07 {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-499eba07 {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-499eba07 {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-499eba07],
.fade-leave-active[data-v-499eba07] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-499eba07],
.fade-leave-to[data-v-499eba07] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-499eba07],
.fade-slide-vertical-leave-to[data-v-499eba07] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-499eba07],
.fade-slide-vertical-leave-from[data-v-499eba07] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-499eba07],
.fade-slide-vertical-leave-active[data-v-499eba07] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-499eba07],[data-v-499eba07]::before,[data-v-499eba07]::after {
  box-sizing: border-box;
}
html[data-v-499eba07],
body[data-v-499eba07],
div[data-v-499eba07],
span[data-v-499eba07],
object[data-v-499eba07],
iframe[data-v-499eba07],
h1[data-v-499eba07],
h2[data-v-499eba07],
h3[data-v-499eba07],
h4[data-v-499eba07],
h5[data-v-499eba07],
h6[data-v-499eba07],
p[data-v-499eba07],
blockquote[data-v-499eba07],
pre[data-v-499eba07],
abbr[data-v-499eba07],
address[data-v-499eba07],
cite[data-v-499eba07],
code[data-v-499eba07],
del[data-v-499eba07],
dfn[data-v-499eba07],
em[data-v-499eba07],
img[data-v-499eba07],
ins[data-v-499eba07],
kbd[data-v-499eba07],
q[data-v-499eba07],
samp[data-v-499eba07],
small[data-v-499eba07],
strong[data-v-499eba07],
sub[data-v-499eba07],
sup[data-v-499eba07],
var[data-v-499eba07],
b[data-v-499eba07],
i[data-v-499eba07],
dl[data-v-499eba07],
dt[data-v-499eba07],
dd[data-v-499eba07],
ol[data-v-499eba07],
ul[data-v-499eba07],
li[data-v-499eba07],
fieldset[data-v-499eba07],
form[data-v-499eba07],
label[data-v-499eba07],
legend[data-v-499eba07],
table[data-v-499eba07],
caption[data-v-499eba07],
tbody[data-v-499eba07],
tfoot[data-v-499eba07],
thead[data-v-499eba07],
tr[data-v-499eba07],
th[data-v-499eba07],
td[data-v-499eba07],
article[data-v-499eba07],
aside[data-v-499eba07],
dialog[data-v-499eba07],
figure[data-v-499eba07],
footer[data-v-499eba07],
header[data-v-499eba07],
hgroup[data-v-499eba07],
menu[data-v-499eba07],
nav[data-v-499eba07],
section[data-v-499eba07],
time[data-v-499eba07],
mark[data-v-499eba07],
audio[data-v-499eba07],
video[data-v-499eba07] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-499eba07],
aside[data-v-499eba07],
dialog[data-v-499eba07],
figure[data-v-499eba07],
footer[data-v-499eba07],
header[data-v-499eba07],
hgroup[data-v-499eba07],
nav[data-v-499eba07],
section[data-v-499eba07],
main[data-v-499eba07] {
  display: block;
}
blockquote[data-v-499eba07],
q[data-v-499eba07] {
  quotes: none;
}
blockquote[data-v-499eba07]::before, blockquote[data-v-499eba07]::after,
q[data-v-499eba07]::before,
q[data-v-499eba07]::after {
  content: none;
}
ul[data-v-499eba07],
ol[data-v-499eba07] {
  list-style: none;
}
table[data-v-499eba07] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-499eba07] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-499eba07] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.sizes[data-v-499eba07] {
  display: flex;
  max-width: 100%;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ads-space-4, 1rem);
}
.sizes__rectangle[data-v-499eba07] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  background-color: var(--ads-colors-accent-hover-light, #007576);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-23a66693] {
  color: #252339;
}
.color-text-body[data-v-23a66693] {
  color: #3e3d48;
}
.color-text-muted[data-v-23a66693] {
  color: #8b8a93;
}
.color-text-primary[data-v-23a66693] {
  color: #068484;
}
.color-text-inverse[data-v-23a66693] {
  color: #fff;
}
.color-background[data-v-23a66693] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-23a66693] {
  background-color: #fff;
}
.color-background-dark[data-v-23a66693] {
  background-color: #050033;
}
.color-background-primary[data-v-23a66693] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-23a66693] {
  background-color: #252339;
}
.color-background-badge-light[data-v-23a66693] {
  background-color: #544e85;
}
.color-background-modal[data-v-23a66693] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-23a66693] {
  display: block;
}

/* Utility */
.no-outline[data-v-23a66693] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-23a66693] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-23a66693]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-23a66693] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-23a66693]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-23a66693]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-23a66693]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-23a66693]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-23a66693]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-23a66693]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-23a66693] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-23a66693],
.ads-error-message strong[data-v-23a66693] {
  font-weight: 600;
}
.ads-error-message i[data-v-23a66693],
.ads-error-message em[data-v-23a66693] {
  font-style: italic;
}
.ads-error-message p[data-v-23a66693] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-23a66693] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-23a66693],
.ads-indicator strong[data-v-23a66693] {
  font-weight: 600;
}
.ads-indicator i[data-v-23a66693],
.ads-indicator em[data-v-23a66693] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-23a66693] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-23a66693] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-23a66693] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-23a66693] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-23a66693] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-23a66693] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-23a66693] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-23a66693] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-23a66693] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-23a66693] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-23a66693] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-23a66693] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-23a66693] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-23a66693] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-23a66693] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-23a66693] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-23a66693] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-23a66693] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-23a66693] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-23a66693] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-23a66693] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-23a66693] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-23a66693] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-23a66693] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-23a66693] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-23a66693] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-23a66693],
.expressive-heading-01 strong[data-v-23a66693] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-23a66693],
.expressive-heading-01 em[data-v-23a66693] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-23a66693] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-23a66693] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-23a66693] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-23a66693],
.expressive-heading-02 strong[data-v-23a66693] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-23a66693],
.expressive-heading-02 em[data-v-23a66693] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-23a66693] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-23a66693] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-23a66693] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-23a66693],
.expressive-heading-03 strong[data-v-23a66693] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-23a66693],
.expressive-heading-03 em[data-v-23a66693] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-23a66693] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-23a66693] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-23a66693] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-23a66693],
.expressive-heading-04 strong[data-v-23a66693] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-23a66693],
.expressive-heading-04 em[data-v-23a66693] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-23a66693] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-23a66693] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-23a66693],
.expressive-heading-05 strong[data-v-23a66693] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-23a66693],
.expressive-heading-05 em[data-v-23a66693] {
  font-style: italic;
}
.expressive-subheading-01[data-v-23a66693] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-23a66693],
.expressive-subheading-01 strong[data-v-23a66693] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-23a66693],
.expressive-subheading-01 em[data-v-23a66693] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-23a66693] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-23a66693] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-23a66693],
.ui-heading-01 strong[data-v-23a66693] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-23a66693],
.ui-heading-01 em[data-v-23a66693] {
  font-style: italic;
}
.ui-heading-02[data-v-23a66693] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-23a66693],
.ui-heading-02 strong[data-v-23a66693] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-23a66693],
.ui-heading-02 em[data-v-23a66693] {
  font-style: italic;
}
.ui-heading-03[data-v-23a66693] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-23a66693],
.ui-heading-03 strong[data-v-23a66693] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-23a66693],
.ui-heading-03 em[data-v-23a66693] {
  font-style: italic;
}
.ui-body-01[data-v-23a66693] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-23a66693],
.ui-body-01 strong[data-v-23a66693] {
  font-weight: 600;
}
.ui-body-01 i[data-v-23a66693],
.ui-body-01 em[data-v-23a66693] {
  font-style: italic;
}
.ui-body-01-strong[data-v-23a66693] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-23a66693],
.ui-body-01-strong strong[data-v-23a66693] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-23a66693],
.ui-body-01-strong em[data-v-23a66693] {
  font-style: italic;
}
.ui-body-01-italic[data-v-23a66693] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-23a66693],
.ui-body-01-italic strong[data-v-23a66693] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-23a66693],
.ui-body-01-italic em[data-v-23a66693] {
  font-style: italic;
}
.ui-body-02[data-v-23a66693] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-23a66693],
.ui-body-02 strong[data-v-23a66693] {
  font-weight: 600;
}
.ui-body-02 i[data-v-23a66693],
.ui-body-02 em[data-v-23a66693] {
  font-style: italic;
}
.ui-body-02-strong[data-v-23a66693] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-23a66693],
.ui-body-02-strong strong[data-v-23a66693] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-23a66693],
.ui-body-02-strong em[data-v-23a66693] {
  font-style: italic;
}
.ui-caption-01[data-v-23a66693] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-23a66693],
.ui-caption-01 strong[data-v-23a66693] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-23a66693],
.ui-caption-01 em[data-v-23a66693] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-23a66693] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-23a66693],
.ui-caption-01-strong strong[data-v-23a66693] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-23a66693],
.ui-caption-01-strong em[data-v-23a66693] {
  font-style: italic;
}
.ui-label-01[data-v-23a66693] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-23a66693],
.ui-label-01 strong[data-v-23a66693] {
  font-weight: 600;
}
.ui-label-01 i[data-v-23a66693],
.ui-label-01 em[data-v-23a66693] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-23a66693] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-23a66693] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-23a66693] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-23a66693 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-23a66693 {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-23a66693 {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-23a66693 {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-23a66693],
.fade-leave-active[data-v-23a66693] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-23a66693],
.fade-leave-to[data-v-23a66693] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-23a66693],
.fade-slide-vertical-leave-to[data-v-23a66693] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-23a66693],
.fade-slide-vertical-leave-from[data-v-23a66693] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-23a66693],
.fade-slide-vertical-leave-active[data-v-23a66693] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-23a66693],[data-v-23a66693]::before,[data-v-23a66693]::after {
  box-sizing: border-box;
}
html[data-v-23a66693],
body[data-v-23a66693],
div[data-v-23a66693],
span[data-v-23a66693],
object[data-v-23a66693],
iframe[data-v-23a66693],
h1[data-v-23a66693],
h2[data-v-23a66693],
h3[data-v-23a66693],
h4[data-v-23a66693],
h5[data-v-23a66693],
h6[data-v-23a66693],
p[data-v-23a66693],
blockquote[data-v-23a66693],
pre[data-v-23a66693],
abbr[data-v-23a66693],
address[data-v-23a66693],
cite[data-v-23a66693],
code[data-v-23a66693],
del[data-v-23a66693],
dfn[data-v-23a66693],
em[data-v-23a66693],
img[data-v-23a66693],
ins[data-v-23a66693],
kbd[data-v-23a66693],
q[data-v-23a66693],
samp[data-v-23a66693],
small[data-v-23a66693],
strong[data-v-23a66693],
sub[data-v-23a66693],
sup[data-v-23a66693],
var[data-v-23a66693],
b[data-v-23a66693],
i[data-v-23a66693],
dl[data-v-23a66693],
dt[data-v-23a66693],
dd[data-v-23a66693],
ol[data-v-23a66693],
ul[data-v-23a66693],
li[data-v-23a66693],
fieldset[data-v-23a66693],
form[data-v-23a66693],
label[data-v-23a66693],
legend[data-v-23a66693],
table[data-v-23a66693],
caption[data-v-23a66693],
tbody[data-v-23a66693],
tfoot[data-v-23a66693],
thead[data-v-23a66693],
tr[data-v-23a66693],
th[data-v-23a66693],
td[data-v-23a66693],
article[data-v-23a66693],
aside[data-v-23a66693],
dialog[data-v-23a66693],
figure[data-v-23a66693],
footer[data-v-23a66693],
header[data-v-23a66693],
hgroup[data-v-23a66693],
menu[data-v-23a66693],
nav[data-v-23a66693],
section[data-v-23a66693],
time[data-v-23a66693],
mark[data-v-23a66693],
audio[data-v-23a66693],
video[data-v-23a66693] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-23a66693],
aside[data-v-23a66693],
dialog[data-v-23a66693],
figure[data-v-23a66693],
footer[data-v-23a66693],
header[data-v-23a66693],
hgroup[data-v-23a66693],
nav[data-v-23a66693],
section[data-v-23a66693],
main[data-v-23a66693] {
  display: block;
}
blockquote[data-v-23a66693],
q[data-v-23a66693] {
  quotes: none;
}
blockquote[data-v-23a66693]::before, blockquote[data-v-23a66693]::after,
q[data-v-23a66693]::before,
q[data-v-23a66693]::after {
  content: none;
}
ul[data-v-23a66693],
ol[data-v-23a66693] {
  list-style: none;
}
table[data-v-23a66693] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-23a66693] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-23a66693] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.space[data-v-23a66693] {
  display: flex;
  max-width: 100%;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ads-space-4, 1rem);
}
.space__rectangle[data-v-23a66693] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  background-color: var(--ads-colors-accent-hover-light, #007576);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-eb8b9be5] {
  color: #252339;
}
.color-text-body[data-v-eb8b9be5] {
  color: #3e3d48;
}
.color-text-muted[data-v-eb8b9be5] {
  color: #8b8a93;
}
.color-text-primary[data-v-eb8b9be5] {
  color: #068484;
}
.color-text-inverse[data-v-eb8b9be5] {
  color: #fff;
}
.color-background[data-v-eb8b9be5] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-eb8b9be5] {
  background-color: #fff;
}
.color-background-dark[data-v-eb8b9be5] {
  background-color: #050033;
}
.color-background-primary[data-v-eb8b9be5] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-eb8b9be5] {
  background-color: #252339;
}
.color-background-badge-light[data-v-eb8b9be5] {
  background-color: #544e85;
}
.color-background-modal[data-v-eb8b9be5] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-eb8b9be5] {
  display: block;
}

/* Utility */
.no-outline[data-v-eb8b9be5] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-eb8b9be5] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-eb8b9be5]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-eb8b9be5] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-eb8b9be5]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-eb8b9be5]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-eb8b9be5]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-eb8b9be5]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-eb8b9be5]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-eb8b9be5]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-eb8b9be5],
.ads-error-message strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.ads-error-message i[data-v-eb8b9be5],
.ads-error-message em[data-v-eb8b9be5] {
  font-style: italic;
}
.ads-error-message p[data-v-eb8b9be5] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-eb8b9be5],
.ads-indicator strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.ads-indicator i[data-v-eb8b9be5],
.ads-indicator em[data-v-eb8b9be5] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-eb8b9be5] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-eb8b9be5] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-eb8b9be5] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-eb8b9be5] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-eb8b9be5] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-eb8b9be5] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-eb8b9be5] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-eb8b9be5] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-eb8b9be5] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-eb8b9be5] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-eb8b9be5] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-eb8b9be5] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-eb8b9be5] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-eb8b9be5] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-eb8b9be5] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-eb8b9be5] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-eb8b9be5] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-eb8b9be5] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-eb8b9be5] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-eb8b9be5] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-eb8b9be5] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-eb8b9be5] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-eb8b9be5] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-eb8b9be5] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-eb8b9be5] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-eb8b9be5],
.expressive-heading-01 strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-eb8b9be5],
.expressive-heading-01 em[data-v-eb8b9be5] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-eb8b9be5] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-eb8b9be5] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-eb8b9be5],
.expressive-heading-02 strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-eb8b9be5],
.expressive-heading-02 em[data-v-eb8b9be5] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-eb8b9be5] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-eb8b9be5] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-eb8b9be5],
.expressive-heading-03 strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-eb8b9be5],
.expressive-heading-03 em[data-v-eb8b9be5] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-eb8b9be5] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-eb8b9be5] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-eb8b9be5],
.expressive-heading-04 strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-eb8b9be5],
.expressive-heading-04 em[data-v-eb8b9be5] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-eb8b9be5] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-eb8b9be5],
.expressive-heading-05 strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-eb8b9be5],
.expressive-heading-05 em[data-v-eb8b9be5] {
  font-style: italic;
}
.expressive-subheading-01[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-eb8b9be5],
.expressive-subheading-01 strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-eb8b9be5],
.expressive-subheading-01 em[data-v-eb8b9be5] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-eb8b9be5] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-eb8b9be5],
.ui-heading-01 strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-eb8b9be5],
.ui-heading-01 em[data-v-eb8b9be5] {
  font-style: italic;
}
.ui-heading-02[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-eb8b9be5],
.ui-heading-02 strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-eb8b9be5],
.ui-heading-02 em[data-v-eb8b9be5] {
  font-style: italic;
}
.ui-heading-03[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-eb8b9be5],
.ui-heading-03 strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-eb8b9be5],
.ui-heading-03 em[data-v-eb8b9be5] {
  font-style: italic;
}
.ui-body-01[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-eb8b9be5],
.ui-body-01 strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.ui-body-01 i[data-v-eb8b9be5],
.ui-body-01 em[data-v-eb8b9be5] {
  font-style: italic;
}
.ui-body-01-strong[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-eb8b9be5],
.ui-body-01-strong strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-eb8b9be5],
.ui-body-01-strong em[data-v-eb8b9be5] {
  font-style: italic;
}
.ui-body-01-italic[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-eb8b9be5],
.ui-body-01-italic strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-eb8b9be5],
.ui-body-01-italic em[data-v-eb8b9be5] {
  font-style: italic;
}
.ui-body-02[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-eb8b9be5],
.ui-body-02 strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.ui-body-02 i[data-v-eb8b9be5],
.ui-body-02 em[data-v-eb8b9be5] {
  font-style: italic;
}
.ui-body-02-strong[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-eb8b9be5],
.ui-body-02-strong strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-eb8b9be5],
.ui-body-02-strong em[data-v-eb8b9be5] {
  font-style: italic;
}
.ui-caption-01[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-eb8b9be5],
.ui-caption-01 strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-eb8b9be5],
.ui-caption-01 em[data-v-eb8b9be5] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-eb8b9be5],
.ui-caption-01-strong strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-eb8b9be5],
.ui-caption-01-strong em[data-v-eb8b9be5] {
  font-style: italic;
}
.ui-label-01[data-v-eb8b9be5] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-eb8b9be5],
.ui-label-01 strong[data-v-eb8b9be5] {
  font-weight: 600;
}
.ui-label-01 i[data-v-eb8b9be5],
.ui-label-01 em[data-v-eb8b9be5] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-eb8b9be5] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-eb8b9be5] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-eb8b9be5] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-eb8b9be5 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-eb8b9be5 {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-eb8b9be5 {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-eb8b9be5 {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-eb8b9be5],
.fade-leave-active[data-v-eb8b9be5] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-eb8b9be5],
.fade-leave-to[data-v-eb8b9be5] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-eb8b9be5],
.fade-slide-vertical-leave-to[data-v-eb8b9be5] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-eb8b9be5],
.fade-slide-vertical-leave-from[data-v-eb8b9be5] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-eb8b9be5],
.fade-slide-vertical-leave-active[data-v-eb8b9be5] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-eb8b9be5],[data-v-eb8b9be5]::before,[data-v-eb8b9be5]::after {
  box-sizing: border-box;
}
html[data-v-eb8b9be5],
body[data-v-eb8b9be5],
div[data-v-eb8b9be5],
span[data-v-eb8b9be5],
object[data-v-eb8b9be5],
iframe[data-v-eb8b9be5],
h1[data-v-eb8b9be5],
h2[data-v-eb8b9be5],
h3[data-v-eb8b9be5],
h4[data-v-eb8b9be5],
h5[data-v-eb8b9be5],
h6[data-v-eb8b9be5],
p[data-v-eb8b9be5],
blockquote[data-v-eb8b9be5],
pre[data-v-eb8b9be5],
abbr[data-v-eb8b9be5],
address[data-v-eb8b9be5],
cite[data-v-eb8b9be5],
code[data-v-eb8b9be5],
del[data-v-eb8b9be5],
dfn[data-v-eb8b9be5],
em[data-v-eb8b9be5],
img[data-v-eb8b9be5],
ins[data-v-eb8b9be5],
kbd[data-v-eb8b9be5],
q[data-v-eb8b9be5],
samp[data-v-eb8b9be5],
small[data-v-eb8b9be5],
strong[data-v-eb8b9be5],
sub[data-v-eb8b9be5],
sup[data-v-eb8b9be5],
var[data-v-eb8b9be5],
b[data-v-eb8b9be5],
i[data-v-eb8b9be5],
dl[data-v-eb8b9be5],
dt[data-v-eb8b9be5],
dd[data-v-eb8b9be5],
ol[data-v-eb8b9be5],
ul[data-v-eb8b9be5],
li[data-v-eb8b9be5],
fieldset[data-v-eb8b9be5],
form[data-v-eb8b9be5],
label[data-v-eb8b9be5],
legend[data-v-eb8b9be5],
table[data-v-eb8b9be5],
caption[data-v-eb8b9be5],
tbody[data-v-eb8b9be5],
tfoot[data-v-eb8b9be5],
thead[data-v-eb8b9be5],
tr[data-v-eb8b9be5],
th[data-v-eb8b9be5],
td[data-v-eb8b9be5],
article[data-v-eb8b9be5],
aside[data-v-eb8b9be5],
dialog[data-v-eb8b9be5],
figure[data-v-eb8b9be5],
footer[data-v-eb8b9be5],
header[data-v-eb8b9be5],
hgroup[data-v-eb8b9be5],
menu[data-v-eb8b9be5],
nav[data-v-eb8b9be5],
section[data-v-eb8b9be5],
time[data-v-eb8b9be5],
mark[data-v-eb8b9be5],
audio[data-v-eb8b9be5],
video[data-v-eb8b9be5] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-eb8b9be5],
aside[data-v-eb8b9be5],
dialog[data-v-eb8b9be5],
figure[data-v-eb8b9be5],
footer[data-v-eb8b9be5],
header[data-v-eb8b9be5],
hgroup[data-v-eb8b9be5],
nav[data-v-eb8b9be5],
section[data-v-eb8b9be5],
main[data-v-eb8b9be5] {
  display: block;
}
blockquote[data-v-eb8b9be5],
q[data-v-eb8b9be5] {
  quotes: none;
}
blockquote[data-v-eb8b9be5]::before, blockquote[data-v-eb8b9be5]::after,
q[data-v-eb8b9be5]::before,
q[data-v-eb8b9be5]::after {
  content: none;
}
ul[data-v-eb8b9be5],
ol[data-v-eb8b9be5] {
  list-style: none;
}
table[data-v-eb8b9be5] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-eb8b9be5] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-eb8b9be5] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.transition[data-v-eb8b9be5] {
  display: flex;
  max-width: 100%;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--ads-space-4, 1rem);
}
.transition__rectangle[data-v-eb8b9be5] {
  position: relative;
  display: flex;
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-a0e618fc] {
  color: #252339;
}
.color-text-body[data-v-a0e618fc] {
  color: #3e3d48;
}
.color-text-muted[data-v-a0e618fc] {
  color: #8b8a93;
}
.color-text-primary[data-v-a0e618fc] {
  color: #068484;
}
.color-text-inverse[data-v-a0e618fc] {
  color: #fff;
}
.color-background[data-v-a0e618fc] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-a0e618fc] {
  background-color: #fff;
}
.color-background-dark[data-v-a0e618fc] {
  background-color: #050033;
}
.color-background-primary[data-v-a0e618fc] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-a0e618fc] {
  background-color: #252339;
}
.color-background-badge-light[data-v-a0e618fc] {
  background-color: #544e85;
}
.color-background-modal[data-v-a0e618fc] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-a0e618fc] {
  display: block;
}

/* Utility */
.no-outline[data-v-a0e618fc] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-a0e618fc] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-a0e618fc]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-a0e618fc] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-a0e618fc]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-a0e618fc]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-a0e618fc]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-a0e618fc]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-a0e618fc]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-a0e618fc]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-a0e618fc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-a0e618fc],
.ads-error-message strong[data-v-a0e618fc] {
  font-weight: 600;
}
.ads-error-message i[data-v-a0e618fc],
.ads-error-message em[data-v-a0e618fc] {
  font-style: italic;
}
.ads-error-message p[data-v-a0e618fc] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-a0e618fc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-a0e618fc],
.ads-indicator strong[data-v-a0e618fc] {
  font-weight: 600;
}
.ads-indicator i[data-v-a0e618fc],
.ads-indicator em[data-v-a0e618fc] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-a0e618fc] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-a0e618fc] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-a0e618fc] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-a0e618fc] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-a0e618fc] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-a0e618fc] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-a0e618fc] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-a0e618fc] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-a0e618fc] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-a0e618fc] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-a0e618fc] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-a0e618fc] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-a0e618fc] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-a0e618fc] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-a0e618fc] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-a0e618fc] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-a0e618fc] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-a0e618fc] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-a0e618fc] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-a0e618fc] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-a0e618fc] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-a0e618fc] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-a0e618fc] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-a0e618fc] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-a0e618fc] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-a0e618fc] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-a0e618fc],
.expressive-heading-01 strong[data-v-a0e618fc] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-a0e618fc],
.expressive-heading-01 em[data-v-a0e618fc] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-a0e618fc] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-a0e618fc] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-a0e618fc] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-a0e618fc],
.expressive-heading-02 strong[data-v-a0e618fc] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-a0e618fc],
.expressive-heading-02 em[data-v-a0e618fc] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-a0e618fc] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-a0e618fc] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-a0e618fc] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-a0e618fc],
.expressive-heading-03 strong[data-v-a0e618fc] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-a0e618fc],
.expressive-heading-03 em[data-v-a0e618fc] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-a0e618fc] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-a0e618fc] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-a0e618fc] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-a0e618fc],
.expressive-heading-04 strong[data-v-a0e618fc] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-a0e618fc],
.expressive-heading-04 em[data-v-a0e618fc] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-a0e618fc] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-a0e618fc] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-a0e618fc],
.expressive-heading-05 strong[data-v-a0e618fc] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-a0e618fc],
.expressive-heading-05 em[data-v-a0e618fc] {
  font-style: italic;
}
.expressive-subheading-01[data-v-a0e618fc] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-a0e618fc],
.expressive-subheading-01 strong[data-v-a0e618fc] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-a0e618fc],
.expressive-subheading-01 em[data-v-a0e618fc] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-a0e618fc] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-a0e618fc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-a0e618fc],
.ui-heading-01 strong[data-v-a0e618fc] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-a0e618fc],
.ui-heading-01 em[data-v-a0e618fc] {
  font-style: italic;
}
.ui-heading-02[data-v-a0e618fc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-a0e618fc],
.ui-heading-02 strong[data-v-a0e618fc] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-a0e618fc],
.ui-heading-02 em[data-v-a0e618fc] {
  font-style: italic;
}
.ui-heading-03[data-v-a0e618fc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-a0e618fc],
.ui-heading-03 strong[data-v-a0e618fc] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-a0e618fc],
.ui-heading-03 em[data-v-a0e618fc] {
  font-style: italic;
}
.ui-body-01[data-v-a0e618fc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-a0e618fc],
.ui-body-01 strong[data-v-a0e618fc] {
  font-weight: 600;
}
.ui-body-01 i[data-v-a0e618fc],
.ui-body-01 em[data-v-a0e618fc] {
  font-style: italic;
}
.ui-body-01-strong[data-v-a0e618fc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-a0e618fc],
.ui-body-01-strong strong[data-v-a0e618fc] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-a0e618fc],
.ui-body-01-strong em[data-v-a0e618fc] {
  font-style: italic;
}
.ui-body-01-italic[data-v-a0e618fc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-a0e618fc],
.ui-body-01-italic strong[data-v-a0e618fc] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-a0e618fc],
.ui-body-01-italic em[data-v-a0e618fc] {
  font-style: italic;
}
.ui-body-02[data-v-a0e618fc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-a0e618fc],
.ui-body-02 strong[data-v-a0e618fc] {
  font-weight: 600;
}
.ui-body-02 i[data-v-a0e618fc],
.ui-body-02 em[data-v-a0e618fc] {
  font-style: italic;
}
.ui-body-02-strong[data-v-a0e618fc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-a0e618fc],
.ui-body-02-strong strong[data-v-a0e618fc] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-a0e618fc],
.ui-body-02-strong em[data-v-a0e618fc] {
  font-style: italic;
}
.ui-caption-01[data-v-a0e618fc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-a0e618fc],
.ui-caption-01 strong[data-v-a0e618fc] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-a0e618fc],
.ui-caption-01 em[data-v-a0e618fc] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-a0e618fc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-a0e618fc],
.ui-caption-01-strong strong[data-v-a0e618fc] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-a0e618fc],
.ui-caption-01-strong em[data-v-a0e618fc] {
  font-style: italic;
}
.ui-label-01[data-v-a0e618fc] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-a0e618fc],
.ui-label-01 strong[data-v-a0e618fc] {
  font-weight: 600;
}
.ui-label-01 i[data-v-a0e618fc],
.ui-label-01 em[data-v-a0e618fc] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-a0e618fc] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-a0e618fc] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-a0e618fc] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-a0e618fc {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-a0e618fc {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-a0e618fc {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-a0e618fc {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-a0e618fc],
.fade-leave-active[data-v-a0e618fc] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-a0e618fc],
.fade-leave-to[data-v-a0e618fc] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-a0e618fc],
.fade-slide-vertical-leave-to[data-v-a0e618fc] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-a0e618fc],
.fade-slide-vertical-leave-from[data-v-a0e618fc] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-a0e618fc],
.fade-slide-vertical-leave-active[data-v-a0e618fc] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-a0e618fc],[data-v-a0e618fc]::before,[data-v-a0e618fc]::after {
  box-sizing: border-box;
}
html[data-v-a0e618fc],
body[data-v-a0e618fc],
div[data-v-a0e618fc],
span[data-v-a0e618fc],
object[data-v-a0e618fc],
iframe[data-v-a0e618fc],
h1[data-v-a0e618fc],
h2[data-v-a0e618fc],
h3[data-v-a0e618fc],
h4[data-v-a0e618fc],
h5[data-v-a0e618fc],
h6[data-v-a0e618fc],
p[data-v-a0e618fc],
blockquote[data-v-a0e618fc],
pre[data-v-a0e618fc],
abbr[data-v-a0e618fc],
address[data-v-a0e618fc],
cite[data-v-a0e618fc],
code[data-v-a0e618fc],
del[data-v-a0e618fc],
dfn[data-v-a0e618fc],
em[data-v-a0e618fc],
img[data-v-a0e618fc],
ins[data-v-a0e618fc],
kbd[data-v-a0e618fc],
q[data-v-a0e618fc],
samp[data-v-a0e618fc],
small[data-v-a0e618fc],
strong[data-v-a0e618fc],
sub[data-v-a0e618fc],
sup[data-v-a0e618fc],
var[data-v-a0e618fc],
b[data-v-a0e618fc],
i[data-v-a0e618fc],
dl[data-v-a0e618fc],
dt[data-v-a0e618fc],
dd[data-v-a0e618fc],
ol[data-v-a0e618fc],
ul[data-v-a0e618fc],
li[data-v-a0e618fc],
fieldset[data-v-a0e618fc],
form[data-v-a0e618fc],
label[data-v-a0e618fc],
legend[data-v-a0e618fc],
table[data-v-a0e618fc],
caption[data-v-a0e618fc],
tbody[data-v-a0e618fc],
tfoot[data-v-a0e618fc],
thead[data-v-a0e618fc],
tr[data-v-a0e618fc],
th[data-v-a0e618fc],
td[data-v-a0e618fc],
article[data-v-a0e618fc],
aside[data-v-a0e618fc],
dialog[data-v-a0e618fc],
figure[data-v-a0e618fc],
footer[data-v-a0e618fc],
header[data-v-a0e618fc],
hgroup[data-v-a0e618fc],
menu[data-v-a0e618fc],
nav[data-v-a0e618fc],
section[data-v-a0e618fc],
time[data-v-a0e618fc],
mark[data-v-a0e618fc],
audio[data-v-a0e618fc],
video[data-v-a0e618fc] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-a0e618fc],
aside[data-v-a0e618fc],
dialog[data-v-a0e618fc],
figure[data-v-a0e618fc],
footer[data-v-a0e618fc],
header[data-v-a0e618fc],
hgroup[data-v-a0e618fc],
nav[data-v-a0e618fc],
section[data-v-a0e618fc],
main[data-v-a0e618fc] {
  display: block;
}
blockquote[data-v-a0e618fc],
q[data-v-a0e618fc] {
  quotes: none;
}
blockquote[data-v-a0e618fc]::before, blockquote[data-v-a0e618fc]::after,
q[data-v-a0e618fc]::before,
q[data-v-a0e618fc]::after {
  content: none;
}
ul[data-v-a0e618fc],
ol[data-v-a0e618fc] {
  list-style: none;
}
table[data-v-a0e618fc] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-a0e618fc] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-a0e618fc] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.z-indices[data-v-a0e618fc] {
  display: flex;
  max-width: 100%;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--ads-space-4, 1rem);
}
.z-indices__rectangle[data-v-a0e618fc] {
  position: relative;
  display: flex;
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-8e8d198c] {
  color: #252339;
}
.color-text-body[data-v-8e8d198c] {
  color: #3e3d48;
}
.color-text-muted[data-v-8e8d198c] {
  color: #8b8a93;
}
.color-text-primary[data-v-8e8d198c] {
  color: #068484;
}
.color-text-inverse[data-v-8e8d198c] {
  color: #fff;
}
.color-background[data-v-8e8d198c] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-8e8d198c] {
  background-color: #fff;
}
.color-background-dark[data-v-8e8d198c] {
  background-color: #050033;
}
.color-background-primary[data-v-8e8d198c] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-8e8d198c] {
  background-color: #252339;
}
.color-background-badge-light[data-v-8e8d198c] {
  background-color: #544e85;
}
.color-background-modal[data-v-8e8d198c] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-8e8d198c] {
  display: block;
}

/* Utility */
.no-outline[data-v-8e8d198c] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-8e8d198c] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-8e8d198c]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-8e8d198c] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-8e8d198c]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-8e8d198c]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-8e8d198c]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-8e8d198c]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-8e8d198c]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-8e8d198c]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-8e8d198c] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-8e8d198c],
.ads-error-message strong[data-v-8e8d198c] {
  font-weight: 600;
}
.ads-error-message i[data-v-8e8d198c],
.ads-error-message em[data-v-8e8d198c] {
  font-style: italic;
}
.ads-error-message p[data-v-8e8d198c] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-8e8d198c] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-8e8d198c],
.ads-indicator strong[data-v-8e8d198c] {
  font-weight: 600;
}
.ads-indicator i[data-v-8e8d198c],
.ads-indicator em[data-v-8e8d198c] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-8e8d198c] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-8e8d198c] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-8e8d198c] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-8e8d198c] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-8e8d198c] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-8e8d198c] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-8e8d198c] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-8e8d198c] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-8e8d198c] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-8e8d198c] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-8e8d198c] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-8e8d198c] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-8e8d198c] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-8e8d198c] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-8e8d198c] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-8e8d198c] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-8e8d198c] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-8e8d198c] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-8e8d198c] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-8e8d198c] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-8e8d198c] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-8e8d198c] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-8e8d198c] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-8e8d198c] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-8e8d198c] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-8e8d198c] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-8e8d198c],
.expressive-heading-01 strong[data-v-8e8d198c] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-8e8d198c],
.expressive-heading-01 em[data-v-8e8d198c] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-8e8d198c] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-8e8d198c] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-8e8d198c] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-8e8d198c],
.expressive-heading-02 strong[data-v-8e8d198c] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-8e8d198c],
.expressive-heading-02 em[data-v-8e8d198c] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-8e8d198c] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-8e8d198c] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-8e8d198c] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-8e8d198c],
.expressive-heading-03 strong[data-v-8e8d198c] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-8e8d198c],
.expressive-heading-03 em[data-v-8e8d198c] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-8e8d198c] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-8e8d198c] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-8e8d198c] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-8e8d198c],
.expressive-heading-04 strong[data-v-8e8d198c] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-8e8d198c],
.expressive-heading-04 em[data-v-8e8d198c] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-8e8d198c] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-8e8d198c] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-8e8d198c],
.expressive-heading-05 strong[data-v-8e8d198c] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-8e8d198c],
.expressive-heading-05 em[data-v-8e8d198c] {
  font-style: italic;
}
.expressive-subheading-01[data-v-8e8d198c] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-8e8d198c],
.expressive-subheading-01 strong[data-v-8e8d198c] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-8e8d198c],
.expressive-subheading-01 em[data-v-8e8d198c] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-8e8d198c] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-8e8d198c] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-8e8d198c],
.ui-heading-01 strong[data-v-8e8d198c] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-8e8d198c],
.ui-heading-01 em[data-v-8e8d198c] {
  font-style: italic;
}
.ui-heading-02[data-v-8e8d198c] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-8e8d198c],
.ui-heading-02 strong[data-v-8e8d198c] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-8e8d198c],
.ui-heading-02 em[data-v-8e8d198c] {
  font-style: italic;
}
.ui-heading-03[data-v-8e8d198c] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-8e8d198c],
.ui-heading-03 strong[data-v-8e8d198c] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-8e8d198c],
.ui-heading-03 em[data-v-8e8d198c] {
  font-style: italic;
}
.ui-body-01[data-v-8e8d198c] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-8e8d198c],
.ui-body-01 strong[data-v-8e8d198c] {
  font-weight: 600;
}
.ui-body-01 i[data-v-8e8d198c],
.ui-body-01 em[data-v-8e8d198c] {
  font-style: italic;
}
.ui-body-01-strong[data-v-8e8d198c] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-8e8d198c],
.ui-body-01-strong strong[data-v-8e8d198c] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-8e8d198c],
.ui-body-01-strong em[data-v-8e8d198c] {
  font-style: italic;
}
.ui-body-01-italic[data-v-8e8d198c] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-8e8d198c],
.ui-body-01-italic strong[data-v-8e8d198c] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-8e8d198c],
.ui-body-01-italic em[data-v-8e8d198c] {
  font-style: italic;
}
.ui-body-02[data-v-8e8d198c] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-8e8d198c],
.ui-body-02 strong[data-v-8e8d198c] {
  font-weight: 600;
}
.ui-body-02 i[data-v-8e8d198c],
.ui-body-02 em[data-v-8e8d198c] {
  font-style: italic;
}
.ui-body-02-strong[data-v-8e8d198c] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-8e8d198c],
.ui-body-02-strong strong[data-v-8e8d198c] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-8e8d198c],
.ui-body-02-strong em[data-v-8e8d198c] {
  font-style: italic;
}
.ui-caption-01[data-v-8e8d198c] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-8e8d198c],
.ui-caption-01 strong[data-v-8e8d198c] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-8e8d198c],
.ui-caption-01 em[data-v-8e8d198c] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-8e8d198c] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-8e8d198c],
.ui-caption-01-strong strong[data-v-8e8d198c] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-8e8d198c],
.ui-caption-01-strong em[data-v-8e8d198c] {
  font-style: italic;
}
.ui-label-01[data-v-8e8d198c] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-8e8d198c],
.ui-label-01 strong[data-v-8e8d198c] {
  font-weight: 600;
}
.ui-label-01 i[data-v-8e8d198c],
.ui-label-01 em[data-v-8e8d198c] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-8e8d198c] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-8e8d198c] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-8e8d198c] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-8e8d198c {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-8e8d198c {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-8e8d198c {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-8e8d198c {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-8e8d198c],
.fade-leave-active[data-v-8e8d198c] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-8e8d198c],
.fade-leave-to[data-v-8e8d198c] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-8e8d198c],
.fade-slide-vertical-leave-to[data-v-8e8d198c] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-8e8d198c],
.fade-slide-vertical-leave-from[data-v-8e8d198c] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-8e8d198c],
.fade-slide-vertical-leave-active[data-v-8e8d198c] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-8e8d198c],[data-v-8e8d198c]::before,[data-v-8e8d198c]::after {
  box-sizing: border-box;
}
html[data-v-8e8d198c],
body[data-v-8e8d198c],
div[data-v-8e8d198c],
span[data-v-8e8d198c],
object[data-v-8e8d198c],
iframe[data-v-8e8d198c],
h1[data-v-8e8d198c],
h2[data-v-8e8d198c],
h3[data-v-8e8d198c],
h4[data-v-8e8d198c],
h5[data-v-8e8d198c],
h6[data-v-8e8d198c],
p[data-v-8e8d198c],
blockquote[data-v-8e8d198c],
pre[data-v-8e8d198c],
abbr[data-v-8e8d198c],
address[data-v-8e8d198c],
cite[data-v-8e8d198c],
code[data-v-8e8d198c],
del[data-v-8e8d198c],
dfn[data-v-8e8d198c],
em[data-v-8e8d198c],
img[data-v-8e8d198c],
ins[data-v-8e8d198c],
kbd[data-v-8e8d198c],
q[data-v-8e8d198c],
samp[data-v-8e8d198c],
small[data-v-8e8d198c],
strong[data-v-8e8d198c],
sub[data-v-8e8d198c],
sup[data-v-8e8d198c],
var[data-v-8e8d198c],
b[data-v-8e8d198c],
i[data-v-8e8d198c],
dl[data-v-8e8d198c],
dt[data-v-8e8d198c],
dd[data-v-8e8d198c],
ol[data-v-8e8d198c],
ul[data-v-8e8d198c],
li[data-v-8e8d198c],
fieldset[data-v-8e8d198c],
form[data-v-8e8d198c],
label[data-v-8e8d198c],
legend[data-v-8e8d198c],
table[data-v-8e8d198c],
caption[data-v-8e8d198c],
tbody[data-v-8e8d198c],
tfoot[data-v-8e8d198c],
thead[data-v-8e8d198c],
tr[data-v-8e8d198c],
th[data-v-8e8d198c],
td[data-v-8e8d198c],
article[data-v-8e8d198c],
aside[data-v-8e8d198c],
dialog[data-v-8e8d198c],
figure[data-v-8e8d198c],
footer[data-v-8e8d198c],
header[data-v-8e8d198c],
hgroup[data-v-8e8d198c],
menu[data-v-8e8d198c],
nav[data-v-8e8d198c],
section[data-v-8e8d198c],
time[data-v-8e8d198c],
mark[data-v-8e8d198c],
audio[data-v-8e8d198c],
video[data-v-8e8d198c] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-8e8d198c],
aside[data-v-8e8d198c],
dialog[data-v-8e8d198c],
figure[data-v-8e8d198c],
footer[data-v-8e8d198c],
header[data-v-8e8d198c],
hgroup[data-v-8e8d198c],
nav[data-v-8e8d198c],
section[data-v-8e8d198c],
main[data-v-8e8d198c] {
  display: block;
}
blockquote[data-v-8e8d198c],
q[data-v-8e8d198c] {
  quotes: none;
}
blockquote[data-v-8e8d198c]::before, blockquote[data-v-8e8d198c]::after,
q[data-v-8e8d198c]::before,
q[data-v-8e8d198c]::after {
  content: none;
}
ul[data-v-8e8d198c],
ol[data-v-8e8d198c] {
  list-style: none;
}
table[data-v-8e8d198c] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-8e8d198c] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-8e8d198c] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.variable-item[data-v-8e8d198c] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ads-space-2, 0.5rem);
}
.variable-item__table[data-v-8e8d198c] {
  border: var(--ads-borders-1px, 1px solid) var(--ads-colors-primary-base-light, #1e1852);
  background: white;
  border-collapse: collapse;
  font-size: 12pt;
}
.variable-item__table thead th[data-v-8e8d198c] {
  background: var(--ads-colors-primary-base-light, #1e1852);
  color: var(--ads-colors-on-primary-base-light, #fff);
}
.variable-item__table th[data-v-8e8d198c],
.variable-item__table td[data-v-8e8d198c] {
  padding: var(--ads-space-2, 0.5rem);
  border: var(--ads-borders-1px, 1px solid) var(--ads-colors-primary-base-light, #1e1852);
  text-align: start;
}
.variable-item__row[data-v-8e8d198c] {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.variable-item__copy-button[data-v-8e8d198c] {
  color: var(--ads-colors-primary-base-light, #1e1852);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.using-import {
  font-family: "Courier New";
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.using-import {
  font-family: "Courier New";
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-avatar {
  display: flex;
  width: var(--ads-sizes-12, 3rem);
  height: var(--ads-sizes-12, 3rem);
  align-items: center;
  justify-content: center;
  border-radius: var(--ads-radii-full, 9999px);
  background-color: var(--ads-colors-surface-base-light, #fff);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-loading {
  display: block;
  color: currentcolor;
}
.ads-loading svg {
  display: block;
  width: 24px;
  height: 24px;
  animation: 2s linear infinite loading-rotate-keyframe;
}
.ads-loading circle {
  animation: 1.6s ease-in-out infinite both loading-circle-keyframe;
  fill: transparent;
  stroke: #068484;
  stroke-dasharray: 178px;
  stroke-linecap: round;
  stroke-width: 6;
  transform-origin: 50% 50%;
}
.ads-loading .ads-icon {
  display: none;
  color: #068484;
}
@media screen and (-ms-high-contrast: none), screen and (-ms-high-contrast: active) {
.ads-loading svg {
    display: none;
}
.ads-loading .ads-icon {
    display: block;
    animation: 1s ease-in-out infinite loading-rotate-keyframe;
}
}
.ads-loading--inherit circle {
  stroke: currentcolor;
}
.ads-loading--inherit .ads-icon {
  color: currentcolor;
}
.ads-loading--inverse circle {
  stroke: #fff;
}
.ads-loading--inverse .ads-icon {
  color: #fff;
}
.ads-loading--small svg {
  width: 18px;
  height: 18px;
}
.ads-loading--small .ads-icon {
  width: 18px;
  height: 18px;
}
.ads-loading--large svg {
  width: 64px;
  height: 64px;
}
.ads-loading--large .ads-icon {
  width: 64px;
  height: 64px;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-button {
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  white-space: nowrap;
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  position: relative;
  display: inline-flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  padding: var(--ads-space-3, 0.75rem) var(--ads-space-6, 1.5rem);
  color: var(--AdsButtonLabelColor, inherit);
  gap: var(--ads-space-2, 0.5rem);
  transition-duration: var(--ads-transition-duration-fast, 150ms);
}
.ads-button b,
.ads-button strong {
  font-weight: 600;
}
.ads-button i,
.ads-button em {
  font-style: italic;
}
.ads-button:not(.ads-button--none) {
  border-radius: var(--ads-radii-button, 3.75rem);
}
@media screen and (max-width: 767px) {
.ads-button:not(.ads-button--none):not(.ads-button--icon-only) .ads-button:not(.ads-button--none) {
    width: var(--ads-sizes-full, 100%);
    justify-content: center;
}
}
.ads-button--none {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border: var(--ads-borders-1px, 1px solid) transparent;
  border: none;
}
.ads-button--none .ads-icon {
  color: currentcolor;
}
.ads-button--none:disabled {
  border-color: transparent;
  background-color: var(--ads-colors-disabled-hi-base-light, #dadadd);
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
  cursor: not-allowed;
}
.ads-button--none:disabled {
  background-color: transparent;
}
.ads-button--primary {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border: var(--ads-borders-1px, 1px solid) transparent;
  background-color: var(--ads-colors-accent-base-light, #068484);
  color: var(--ads-colors-on-accent-base-light, #ffffff);
}
.ads-button--primary .ads-icon {
  color: currentcolor;
}
.ads-button--primary:disabled {
  border-color: transparent;
  background-color: var(--ads-colors-disabled-hi-base-light, #dadadd);
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
  cursor: not-allowed;
}
.ads-button--primary:not(:disabled):hover {
  background-color: var(--ads-colors-accent-hover-light, #007576);
  color: var(--ads-colors-on-accent-hover-light, rgba(255, 255, 255, 0.8));
}
.ads-button--primary:not(:disabled):hover .ads-icon {
  color: var(--ads-colors-on-accent-hover-light, rgba(255, 255, 255, 0.8));
}
.ads-button--primary:not(:disabled):active {
  background-color: var(--ads-colors-accent-pressed-light, #006163);
  color: var(--ads-colors-on-accent-pressed-light, rgba(255, 255, 255, 0.8));
}
.ads-button--primary:not(:disabled):active .ads-icon {
  color: var(--ads-colors-on-accent-pressed-light, rgba(255, 255, 255, 0.8));
}
.ads-button--primary-inverse {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border: var(--ads-borders-1px, 1px solid) transparent;
  background-color: var(--ads-colors-accent-base-light, #068484);
  color: var(--ads-colors-on-accent-base-light, #ffffff);
}
.ads-button--primary-inverse .ads-icon {
  color: currentcolor;
}
.ads-button--primary-inverse:disabled {
  border-color: transparent;
  background-color: var(--ads-colors-disabled-hi-base-light, #dadadd);
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
  cursor: not-allowed;
}
.ads-button--primary-inverse:not(:disabled):hover {
  background-color: var(--ads-colors-accent-hover-light, #007576);
  color: var(--ads-colors-on-accent-hover-light, rgba(255, 255, 255, 0.8));
}
.ads-button--primary-inverse:not(:disabled):hover .ads-icon {
  color: var(--ads-colors-on-accent-hover-light, rgba(255, 255, 255, 0.8));
}
.ads-button--primary-inverse:not(:disabled):active {
  background-color: var(--ads-colors-accent-pressed-light, #006163);
  color: var(--ads-colors-on-accent-pressed-light, rgba(255, 255, 255, 0.8));
}
.ads-button--primary-inverse:not(:disabled):active .ads-icon {
  color: var(--ads-colors-on-accent-pressed-light, rgba(255, 255, 255, 0.8));
}
.ads-button--primary-inverse[data-focus-tabbed]::after {
  border-color: var(--ads-colors-on-focus-base-light, #fff);
}
.ads-button--secondary {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border: var(--ads-borders-1px, 1px solid) transparent;
  background-color: var(--ads-colors-primary-base-light, #1e1852);
  color: var(--ads-colors-on-primary-base-light, #ffffff);
}
.ads-button--secondary .ads-icon {
  color: currentcolor;
}
.ads-button--secondary:disabled {
  border-color: transparent;
  background-color: var(--ads-colors-disabled-hi-base-light, #dadadd);
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
  cursor: not-allowed;
}
.ads-button--secondary:not(:disabled):hover {
  background-color: var(--ads-colors-primary-hover-light, #38326c);
  color: var(--ads-colors-on-primary-hover-light, rgba(255, 255, 255, 0.8));
}
.ads-button--secondary:not(:disabled):hover .ads-icon {
  color: var(--ads-colors-on-primary-hover-light, rgba(255, 255, 255, 0.8));
}
.ads-button--secondary:not(:disabled):active {
  background-color: var(--ads-colors-primary-pressed-light, #544e85);
  color: var(--ads-colors-on-primary-pressed-light, rgba(255, 255, 255, 0.8));
}
.ads-button--secondary:not(:disabled):active .ads-icon {
  color: var(--ads-colors-on-primary-pressed-light, rgba(255, 255, 255, 0.8));
}
.ads-button--secondary-inverse {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border: var(--ads-borders-1px, 1px solid) transparent;
  background-color: var(--ads-colors-on-primary-base-light, #ffffff);
  color: var(--ads-colors-primary-base-light, #1e1852);
}
.ads-button--secondary-inverse .ads-icon {
  color: currentcolor;
}
.ads-button--secondary-inverse:disabled {
  border-color: transparent;
  background-color: var(--ads-colors-disabled-hi-base-light, #dadadd);
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
  cursor: not-allowed;
}
.ads-button--secondary-inverse:not(:disabled):hover {
  background-color: var(--ads-colors-on-primary-hover-light, rgba(255, 255, 255, 0.8));
  color: var(--ads-colors-primary-hover-light, #38326c);
}
.ads-button--secondary-inverse:not(:disabled):hover .ads-icon {
  color: var(--ads-colors-primary-hover-light, #38326c);
}
.ads-button--secondary-inverse:not(:disabled):active {
  background-color: var(--ads-colors-on-primary-pressed-light, rgba(255, 255, 255, 0.8));
  color: var(--ads-colors-primary-pressed-light, #544e85);
}
.ads-button--secondary-inverse:not(:disabled):active .ads-icon {
  color: var(--ads-colors-primary-pressed-light, #544e85);
}
.ads-button--secondary-inverse[data-focus-tabbed]::after {
  border-color: var(--ads-colors-on-focus-base-light, #fff);
}
.ads-button--tertiary {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border: var(--ads-borders-1px, 1px solid) transparent;
  background-color: transparent;
  color: var(--ads-colors-primary-base-light, #1e1852);
  border-color: var(--ads-colors-primary-base-light, #1e1852);
}
.ads-button--tertiary .ads-icon {
  color: currentcolor;
}
.ads-button--tertiary:disabled {
  border-color: transparent;
  background-color: var(--ads-colors-disabled-hi-base-light, #dadadd);
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
  cursor: not-allowed;
}
.ads-button--tertiary:not(:disabled):hover {
  background-color: var(--ads-colors-primary-base-light, #1e1852);
  color: var(--ads-colors-on-primary-hover-light, rgba(255, 255, 255, 0.8));
}
.ads-button--tertiary:not(:disabled):hover .ads-icon {
  color: var(--ads-colors-on-primary-hover-light, rgba(255, 255, 255, 0.8));
}
.ads-button--tertiary:not(:disabled):active {
  background-color: var(--ads-colors-primary-pressed-light, #544e85);
  color: var(--ads-colors-on-primary-pressed-light, rgba(255, 255, 255, 0.8));
}
.ads-button--tertiary:not(:disabled):active .ads-icon {
  color: var(--ads-colors-on-primary-pressed-light, rgba(255, 255, 255, 0.8));
}
.ads-button--tertiary-inverse {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border: var(--ads-borders-1px, 1px solid) transparent;
  background-color: transparent;
  color: var(--ads-colors-on-primary-base-light, #ffffff);
  border-color: var(--ads-colors-on-primary-base-light, #ffffff);
}
.ads-button--tertiary-inverse .ads-icon {
  color: currentcolor;
}
.ads-button--tertiary-inverse:disabled {
  border-color: transparent;
  background-color: var(--ads-colors-disabled-hi-base-light, #dadadd);
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
  cursor: not-allowed;
}
.ads-button--tertiary-inverse:not(:disabled):hover {
  background-color: var(--ads-colors-on-primary-base-light, #ffffff);
  color: var(--ads-colors-primary-hover-light, #38326c);
}
.ads-button--tertiary-inverse:not(:disabled):hover .ads-icon {
  color: var(--ads-colors-primary-hover-light, #38326c);
}
.ads-button--tertiary-inverse:not(:disabled):active {
  background-color: var(--ads-colors-on-primary-pressed-light, rgba(255, 255, 255, 0.8));
  color: var(--ads-colors-primary-pressed-light, #544e85);
}
.ads-button--tertiary-inverse:not(:disabled):active .ads-icon {
  color: var(--ads-colors-primary-pressed-light, #544e85);
}
.ads-button--tertiary-inverse[data-focus-tabbed]::after {
  border-color: var(--ads-colors-on-focus-base-light, #fff);
}
.ads-button--destructive {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border: var(--ads-borders-1px, 1px solid) transparent;
  background-color: var(--ads-colors-danger-base-light, #ba1f1a);
  color: var(--ads-colors-on-danger-base-light, #ffffff);
}
.ads-button--destructive .ads-icon {
  color: currentcolor;
}
.ads-button--destructive:disabled {
  border-color: transparent;
  background-color: var(--ads-colors-disabled-hi-base-light, #dadadd);
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
  cursor: not-allowed;
}
.ads-button--destructive:not(:disabled):hover {
  background-color: var(--ads-colors-danger-hover-light, #a50d07);
  color: var(--ads-colors-on-danger-hover-light, rgba(255, 255, 255, 0.8));
}
.ads-button--destructive:not(:disabled):hover .ads-icon {
  color: var(--ads-colors-on-danger-hover-light, rgba(255, 255, 255, 0.8));
}
.ads-button--destructive:not(:disabled):active {
  background-color: var(--ads-colors-danger-pressed-light, #890100);
  color: var(--ads-colors-on-danger-pressed-light, rgba(255, 255, 255, 0.8));
}
.ads-button--destructive:not(:disabled):active .ads-icon {
  color: var(--ads-colors-on-danger-pressed-light, rgba(255, 255, 255, 0.8));
}
.ads-button--destructive-inverse {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border: var(--ads-borders-1px, 1px solid) transparent;
  background-color: var(--ads-colors-on-danger-base-light, #ffffff);
  color: var(--ads-colors-danger-base-light, #ba1f1a);
}
.ads-button--destructive-inverse .ads-icon {
  color: currentcolor;
}
.ads-button--destructive-inverse:disabled {
  border-color: transparent;
  background-color: var(--ads-colors-disabled-hi-base-light, #dadadd);
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
  cursor: not-allowed;
}
.ads-button--destructive-inverse:not(:disabled):hover {
  background-color: var(--ads-colors-on-danger-hover-light, rgba(255, 255, 255, 0.8));
  color: var(--ads-colors-danger-hover-light, #a50d07, #a50d07);
}
.ads-button--destructive-inverse:not(:disabled):hover .ads-icon {
  color: var(--ads-colors-danger-hover-light, #a50d07, #a50d07);
}
.ads-button--destructive-inverse:not(:disabled):active {
  background-color: var(--ads-colors-on-danger-pressed-light, rgba(255, 255, 255, 0.8));
  color: var(--ads-colors-danger-pressed-light, #890100, #890100);
}
.ads-button--destructive-inverse:not(:disabled):active .ads-icon {
  color: var(--ads-colors-danger-pressed-light, #890100, #890100);
}
.ads-button--destructive-inverse[data-focus-tabbed]::after {
  border-color: var(--ads-colors-on-focus-base-light, #fff);
}
.ads-button--destructive-secondary {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border: var(--ads-borders-1px, 1px solid) transparent;
  background-color: transparent;
  color: var(--ads-colors-danger-base-light, #ba1f1a);
  border-color: var(--ads-colors-danger-base-light, #ba1f1a);
}
.ads-button--destructive-secondary .ads-icon {
  color: currentcolor;
}
.ads-button--destructive-secondary:disabled {
  border-color: transparent;
  background-color: var(--ads-colors-disabled-hi-base-light, #dadadd);
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
  cursor: not-allowed;
}
.ads-button--destructive-secondary:not(:disabled):hover {
  background-color: var(--ads-colors-danger-base-light, #ba1f1a);
  color: var(--ads-colors-on-danger-hover-light, rgba(255, 255, 255, 0.8));
}
.ads-button--destructive-secondary:not(:disabled):hover .ads-icon {
  color: var(--ads-colors-on-danger-hover-light, rgba(255, 255, 255, 0.8));
}
.ads-button--destructive-secondary:not(:disabled):active {
  background-color: var(--ads-colors-danger-pressed-light, #890100, #890100);
  color: var(--ads-colors-on-danger-pressed-light, rgba(255, 255, 255, 0.8));
}
.ads-button--destructive-secondary:not(:disabled):active .ads-icon {
  color: var(--ads-colors-on-danger-pressed-light, rgba(255, 255, 255, 0.8));
}
.ads-button--icon-only {
  padding: var(--ads-space-2, 0.5rem);
}
.ads-button--size-small {
  padding-top: var(--ads-space-2, 0.5rem);
  padding-bottom: var(--ads-space-2, 0.5rem);
}
.ads-button--size-large:not(.ads-button--icon-only) {
  padding-top: var(--ads-space-4, 1rem);
  padding-bottom: var(--ads-space-4, 1rem);
}
.ads-button--loading {
  pointer-events: none;
}
.ads-button--loading .ads-button__label {
  opacity: 0;
}
.ads-button__label {
  display: block;
}
.ads-button__icon {
  pointer-events: none;
  transition: all var(--ads-transition-duration-normal, 200ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1));
}
.ads-button:not(.ads-button--icon-only) .ads-button__loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-checkbox {
  display: flex;
  column-gap: var(--AdsCheckboxGap, var(--ads-space-2, 0.5rem));
}
.ads-checkbox--disabled .ads-icon {
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
}
.ads-checkbox__label-wrapper {
  display: flex;
  flex-direction: column;
}
.ads-checkbox--label-heading .ads-checkbox__label-wrapper {
  flex: 1;
}
.ads-checkbox__label, .ads-checkbox__description {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  margin: 0;
  color: var(--ads-colors-on-surface-mid-base-light, #3e3d48);
  text-align: start;
}
.ads-checkbox__label b,
.ads-checkbox__label strong, .ads-checkbox__description b,
.ads-checkbox__description strong {
  font-weight: 600;
}
.ads-checkbox__label i,
.ads-checkbox__label em, .ads-checkbox__description i,
.ads-checkbox__description em {
  font-style: italic;
}
.ads-checkbox:has(input:disabled) .ads-checkbox__label, .ads-checkbox:has(input:disabled) .ads-checkbox__description {
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
}
.ads-checkbox__label {
  display: flex;
  align-items: center;
  gap: var(--ads-space-2, 0.5rem);
  user-select: none;
}
.ads-checkbox--label-heading .ads-checkbox__label {
  justify-content: space-between;
  color: var(--ads-colors-primary-base-light, #1e1852);
}
.ads-checkbox__label:has(.ads-checkbox__description) {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-checkbox__label:has(.ads-checkbox__description) b,
.ads-checkbox__label:has(.ads-checkbox__description) strong {
  font-weight: 600;
}
.ads-checkbox__label:has(.ads-checkbox__description) i,
.ads-checkbox__label:has(.ads-checkbox__description) em {
  font-style: italic;
}
.ads-checkbox__label-optional {
  color: var(--ads-colors-on-surface-low-base-light, #6f6e77);
}
.ads-checkbox__indicator.ads-indicator {
  align-self: baseline;
  line-height: var(--ads-line-heights-6, 1.5rem);
}
.ads-checkbox:has(input:disabled) .ads-checkbox__indicator.ads-indicator {
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
}
.ads-checkbox input[type=checkbox] {
  width: var(--AdsCheckboxSize, 18px);
  height: var(--AdsCheckboxSize, 18px);
  border: var(--ads-borders-1px, 1px solid) var(--ads-colors-outline-hi-base-light, #8b8a93);
  border-radius: var(--ads-radii-sm, 0.125rem);
  margin-right: 0;
  margin-left: 0;
  accent-color: var(--ads-colors-accent-base-light, #068484);
  appearance: none;
}
.ads-checkbox input[type=checkbox]::before {
  display: flex;
  width: var(--AdsCheckboxSize, 18px);
  height: var(--AdsCheckboxSize, 18px);
  border-radius: var(--ads-radii-sm, 0.125rem);
  background-color: var(--ads-colors-surface-container-min-base-light, #fff);
  color: var(--AdsCheckboxCheckColor, var(--ads-colors-on-accent-base-light, #fff));
  content: "";
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  place-content: center;
  place-items: center;
  text-align: center;
  transform: scale(0);
  transition: transform var(--ads-transition-duration-fast, 150ms), background-color var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
.ads-checkbox input[type=checkbox]:checked {
  border: none;
}
.ads-checkbox input[type=checkbox]:checked::before {
  background-color: var(--AdsCheckboxCheckedBackground, var(--ads-colors-accent-base-light, #068484));
  content: "✓";
  transform: scale(1);
}
.ads-checkbox input[type=checkbox]:focus-visible {
  outline: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  outline-offset: var(--ads-space-0-5, 0.125rem);
}
.ads-checkbox input[type=checkbox]:disabled {
  border-color: var(--ads-colors-disabled-hi-base-light, #dadadd);
  background-color: var(--ads-colors-disabled-low-base-light, #f4f4f5);
}
.ads-checkbox input[type=checkbox]:disabled + .ads-icon {
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
}
.ads-checkbox input[type=checkbox]:disabled:checked::before {
  background-color: var(--ads-colors-disabled-hi-base-light, #dadadd);
}
.ads-checkbox--error input[type=checkbox] {
  outline: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-danger-base-light, #ba1f1a);
  outline-offset: var(--ads-space-0-5, 0.125rem);
}
.ads-checkbox--inverse .ads-checkbox__label,
.ads-checkbox--inverse .ads-checkbox__description {
  color: var(--ads-colors-on-inverse-base-light, #fff);
}
.ads-checkbox--inverse .ads-checkbox__indicator {
  color: var(--ads-colors-on-inverse-pressed-light, rgba(255, 255, 255, 0.8));
}
.ads-checkbox--inverse input[type=checkbox]:focus-visible {
  outline: var(--ads-borders-2px, 2px solid) var(--ads-colors-on-inverse-base-light, #fff);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-popover__content {
  z-index: var(--ads-z-indices-popover, 1500);
  min-width: 160px;
  max-width: 360px;
  max-height: 300px;
  padding: 16px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.list-option-item {
  display: flex;
  align-items: center;
  padding: var(--ads-space-4, 1rem) var(--ads-space-4, 1rem);
  cursor: pointer;
  gap: var(--ads-space-4, 1rem);
}
.list-option-item:hover, .list-option-item:focus-visible {
  background-color: color-mix(in srgb, var(--ads-colors-accent-pressed-light, #006163) 8%, white);
  outline: none;
}
.list-option-item--selected {
  color: var(--ads-colors-accent-hover-light, #007576);
}
.list-option-item--selected .ads-icon {
  color: var(--ads-colors-accent-hover-light, #007576);
}
.list-option-item__label-wrapper {
  flex: 1;
}
.list-option-item__label {
  display: flex;
  align-items: center;
}
.list-option-item__label span {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.list-option-item__label span b,
.list-option-item__label span strong {
  font-weight: 600;
}
.list-option-item__label span i,
.list-option-item__label span em {
  font-style: italic;
}
.list-option-item__description {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: var(--ads-colors-on-surface-low-base-light, #6f6e77);
}
.list-option-item__description b,
.list-option-item__description strong {
  font-weight: 600;
}
.list-option-item__description i,
.list-option-item__description em {
  font-style: italic;
}
.list-option-item--selected .list-option-item__description {
  color: var(--ads-colors-accent-hover-light, #007576);
}
.list-option-item__check-icon {
  color: var(--ads-colors-accent-hover-light, #007576);
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--ads-transition-duration-normal, 200ms) var(--ads-transition-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
}
.list-option-item--selected .list-option-item__check-icon {
  opacity: 1;
  transform: scale(1);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.list-option {
  padding: 0;
  margin: 0;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-chip {
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  white-space: nowrap;
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  display: flex;
  height: var(--AdsChipHeight, 100%);
  align-items: center;
  padding: var(--ads-space-2, 0.5rem) var(--ads-space-3, 0.75rem);
  border-radius: var(--ads-radii-3xl, 1.5rem);
  box-shadow: 0 0 0 var(--ads-sizes-px, 1px) #8b8a93 inset;
  color: var(--ads-colors-primary-base-light, #1e1852);
  gap: var(--ads-space-0-5, 0.125rem);
  transition: all var(--ads-transition-duration-slow, 300ms) var(--ads-transition-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
}
.ads-chip b,
.ads-chip strong {
  font-weight: 600;
}
.ads-chip i,
.ads-chip em {
  font-style: italic;
}
.ads-chip:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}
.ads-chip--small {
  height: var(--AdsChipHeight, 32px);
}
.ads-chip--selected {
  background: #eef7f7;
  box-shadow: 0 0 0 2px var(--ads-colors-accent-base-light, #068484) inset;
  color: #007576;
}
.ads-chip--dropdown .ads-icon--chevron-down {
  transition: transform var(--ads-transition-duration-slow, 300ms) var(--ads-transition-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
}
.ads-chip--dropdown.ads-chip--dropdown-open .ads-icon--chevron-down {
  transform: rotate(180deg);
}
.ads-chip:hover:not(.ads-chip--selected):not(:disabled) {
  background: #f4f4f5;
  box-shadow: 0 0 0 var(--ads-sizes-px, 1px) #6f6e77 inset;
  color: var(--ads-colors-primary-hover-light, #38326c);
}
.ads-chip:active:not(.ads-chip--selected):not(:disabled) {
  box-shadow: 0 0 0 var(--ads-sizes-px, 1px) #575661 inset;
  color: var(--ads-colors-primary-pressed-light, #544e85);
}
.ads-chip__label-wrapper {
  display: flex;
  max-width: var(--ads-sizes-64, 16rem);
  align-items: center;
  padding: 0 var(--ads-sizes-1, 0.25rem);
  gap: var(--ads-space-2, 0.5rem);
}
.ads-chip__label-wrapper > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ads-chip__additional-text {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
}
.ads-chip__additional-text b,
.ads-chip__additional-text strong {
  font-weight: 600;
}
.ads-chip__additional-text i,
.ads-chip__additional-text em {
  font-style: italic;
}
.ads-chip__append-icon, .ads-chip__prepend-icon {
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  white-space: nowrap;
}
.ads-chip__dropdown {
  padding: 0;
}
.ads-chip .ads-icon {
  color: currentcolor;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-expand-transition {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--a1bffa20-duration) var(--a1bffa20-timingFunction);
}
.ads-expand-transition__inner--overflow-hidden {
  overflow: hidden;
}
.ads-expand-transition--expanded {
  grid-template-rows: 1fr;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-input {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  margin: 0;
}
.ads-input__label-wrapper {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  margin-bottom: var(--ads-space-2, 0.5rem);
}
.ads-input__label {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  display: flex;
  flex-wrap: wrap;
  color: var(--AdsInputLabelColor, var(--ads-colors-on-surface-mid-base-light, #3e3d48));
  gap: 0 var(--ads-sizes-1, 0.25rem);
}
.ads-input__label b,
.ads-input__label strong {
  font-weight: 600;
}
.ads-input__label i,
.ads-input__label em {
  font-style: italic;
}
.ads-input__label-optional {
  color: var(--ads-colors-on-surface-low-base-light, #6f6e77);
}
.ads-input__assistive {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  flex-basis: 100%;
  color: var(--AdsInputAssistiveColor, var(--ads-colors-on-surface-low-base-light, #6f6e77));
}
.ads-input__assistive b,
.ads-input__assistive strong {
  font-weight: 600;
}
.ads-input__assistive i,
.ads-input__assistive em {
  font-style: italic;
}
.ads-input__input {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  position: relative;
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  align-items: center;
  border: var(--AdsInputBorderThickness, var(--ads-borders-1px, 1px solid)) var(--AdsInputBorderColor, var(--ads-colors-outline-hi-base-light, #8b8a93));
  border-radius: var(--ads-radii-md, 0.375rem);
  background: var(--AdsInputBackground, var(--ads-colors-surface-container-min-base-light, #fff));
  gap: var(--ads-space-2, 0.5rem);
  transition: border-color var(--ads-transition-duration-fast, 150ms);
}
.ads-input__input b,
.ads-input__input strong {
  font-weight: 600;
}
.ads-input__input i,
.ads-input__input em {
  font-style: italic;
}
.ads-input--default .ads-input__input {
  min-height: var(--ads-sizes-12, 3rem);
}
.ads-input--small .ads-input__input {
  min-height: var(--ads-sizes-10, 2.5rem);
}
.ads-input--large .ads-input__input {
  min-height: var(--ads-sizes-14, 3.5rem);
}
.ads-input--disabled .ads-input__input {
  border-color: var(--AdsInputDisabledBorderColor, var(--ads-colors-disabled-hi-base-light, #dadadd));
  background-color: var(--AdsInputDisabledBackgroundColor, var(--ads-colors-surface-container-low-base-light, #f4f4f5));
  color: var(--AdsInputDisabledColor, var(--ads-colors-text-disabled-base-light, #8b8a93));
  cursor: not-allowed;
}
.ads-input--disabled .ads-input__input .ads-icon:not(.ads-input__status-icon) {
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
}
.ads-input__input input,
.ads-input__input select,
.ads-input__input textarea {
  width: 100%;
  padding: 0;
  border: 0 none;
  border-radius: 0;
  margin: 0;
  appearance: none;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  outline: none;
  height: 100%;
  flex: 1;
  color: var(--AdsInputTextColor, var(--ads-colors-on-surface-hi-base-light, #252339));
}
.ads-input__input input::-ms-clear,
.ads-input__input select::-ms-clear,
.ads-input__input textarea::-ms-clear {
  display: none;
}
.ads-input__input input::placeholder,
.ads-input__input select::placeholder,
.ads-input__input textarea::placeholder {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: var(--ads-colors-on-surface-low-base-light, #6f6e77);
}
.ads-input__input input::placeholder b,
.ads-input__input input::placeholder strong,
.ads-input__input select::placeholder b,
.ads-input__input select::placeholder strong,
.ads-input__input textarea::placeholder b,
.ads-input__input textarea::placeholder strong {
  font-weight: 600;
}
.ads-input__input input::placeholder i,
.ads-input__input input::placeholder em,
.ads-input__input select::placeholder i,
.ads-input__input select::placeholder em,
.ads-input__input textarea::placeholder i,
.ads-input__input textarea::placeholder em {
  font-style: italic;
}
.ads-input--default .ads-input__input input,
.ads-input--default .ads-input__input select,
.ads-input--default .ads-input__input textarea {
  padding: var(--ads-space-3, 0.75rem) var(--ads-space-4, 1rem);
}
.ads-input--small .ads-input__input input,
.ads-input--small .ads-input__input select,
.ads-input--small .ads-input__input textarea {
  padding: var(--ads-space-2, 0.5rem) var(--ads-space-4, 1rem);
}
.ads-input--large .ads-input__input input,
.ads-input--large .ads-input__input select,
.ads-input--large .ads-input__input textarea {
  padding: var(--ads-space-4, 1rem) var(--ads-space-4, 1rem);
}
.ads-input--disabled .ads-input__input input,
.ads-input--disabled .ads-input__input select,
.ads-input--disabled .ads-input__input textarea {
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
  cursor: not-allowed;
}
.ads-input__input input:disabled::placeholder,
.ads-input__input select:disabled::placeholder,
.ads-input__input textarea:disabled::placeholder {
  color: var(--ads-colors-on-surface-low-base-light, #6f6e77);
}
.ads-input__input:has(input:nth-of-type(2)) input {
  padding: 0;
}
.ads-input__input:has(input:nth-of-type(2)) input:nth-of-type(2) {
  padding-right: var(--ads-space-3, 0.75rem);
}
.ads-input__input:has(.ads-input__prepend-inner-icon) input,
.ads-input__input:has(.ads-input__prepend-inner-icon) select {
  padding-left: 0;
}
.ads-input__input:has(.ads-input__append-inner-icon) input,
.ads-input__input:has(.ads-input__append-inner-icon) select {
  padding-right: 0;
}
.ads-input__input::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: var(--ads-borders-2px, 2px solid);
  border-color: transparent;
  border-radius: var(--ads-radii-md, 0.375rem);
  content: "";
  pointer-events: none;
  transition: border-color var(--ads-transition-duration-fast, 150ms);
}
.ads-input__input:focus-within:not(:has(.ads-input__password-toggle:focus-visible)) {
  border-color: transparent;
}
.ads-input__input:focus-within:not(:has(.ads-input__password-toggle:focus-visible))::after {
  border-color: var(--AdsInputOutlineColor, var(--ads-colors-focus-base-light, #3470df));
}
.ads-input__prepend-inner-icon, .ads-input__append-inner-icon {
  display: flex;
  align-items: center;
  gap: var(--ads-sizes-1, 0.25rem);
}
.ads-input--default .ads-input__prepend-inner-icon {
  padding-inline: var(--ads-space-3, 0.75rem) 0;
}
.ads-input--small .ads-input__prepend-inner-icon {
  padding-inline: var(--ads-space-2, 0.5rem) 0;
}
.ads-input--large .ads-input__prepend-inner-icon {
  padding-inline: var(--ads-space-4, 1rem) 0;
}
.ads-input--default .ads-input__append-inner-icon {
  padding-inline: 0 var(--ads-space-3, 0.75rem);
}
.ads-input--small .ads-input__append-inner-icon {
  padding-inline: 0 var(--ads-space-2, 0.5rem);
}
.ads-input--large .ads-input__append-inner-icon {
  padding-inline: 0 var(--ads-space-4, 1rem);
}
.ads-input__password-toggle {
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  white-space: nowrap;
  display: flex;
  align-items: center;
  padding: var(--ads-sizes-1, 0.25rem);
}
.ads-input__messages {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  display: flex;
  flex-direction: column;
  gap: var(--ads-space-2, 0.5rem);
}
.ads-input__messages b,
.ads-input__messages strong {
  font-weight: 600;
}
.ads-input__messages i,
.ads-input__messages em {
  font-style: italic;
}
.ads-input__character-limit {
  margin-left: auto;
}
.ads-input__character-limit p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}
.ads-input__additional-message {
  color: var(--ads-colors-on-surface-low-base-light, #6f6e77);
}
.ads-input__additional-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-link {
  position: relative;
  display: inline;
  color: var(--AdsLinkColor, var(--ads-colors-link-base-light, #1264a3));
  text-decoration: underline;
}
.ads-link__icon {
  vertical-align: middle;
  color: currentColor;
}
.ads-link__icon--prepend {
  margin-inline-end: var(--AdsLinkGap, var(--ads-sizes-1, 0.25rem));
}
.ads-link__icon--append {
  margin-inline-start: var(--AdsLinkGap, var(--ads-sizes-1, 0.25rem));
}
.ads-link:hover {
  color: var(--AdsLinkHoverColor, var(--ads-colors-link-hover-light, #002b5b));
}
.ads-link:focus-visible:not(.ads-link.ads-link--related):not(.ads-link.ads-link--related-small) {
  padding: var(--ads-sizes-0-5, 0.125rem);
  background-color: var(--ads-colors-focus-base-light, #3470df);
  color: var(--ads-colors-on-focus-base-light, #fff);
  outline: none;
}
.ads-link:focus-visible:not(.ads-link.ads-link--related):not(.ads-link.ads-link--related-small).ads-link--list {
  padding: var(--ads-sizes-0-5, 0.125rem) var(--ads-space-px, 1px);
}
.ads-link:focus-visible:not(.ads-link.ads-link--related):not(.ads-link.ads-link--related-small)::after {
  display: none;
  content: "";
}
.ads-link:visited {
  color: var(--ads-colors-link-pressed-light, #706b9d);
}
.ads-link--inverse {
  color: var(--AdsLinkInverseColor, var(--ads-colors-on-inverse-base-light, #fff));
}
.ads-link--inverse:hover, .ads-link--inverse:visited {
  color: var(--ads-colors-on-inverse-hover-light, rgba(255, 255, 255, 0.8));
}
.ads-link--inverse:focus-visible:not(.ads-link--inverse.ads-link--related):not(.ads-link--inverse.ads-link--related-small) {
  background-color: var(--ads-colors-on-inverse-base-light, #fff);
  color: var(--ads-colors-link-base-light, #1264a3);
}
.ads-link--inverse.ads-link--disabled {
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
}
.ads-link--list, .ads-link--related, .ads-link--related-small {
  width: var(--ads-sizes-full, 100%);
  justify-content: space-between;
  gap: var(--ads-space-4, 1rem);
}
.ads-link--related, .ads-link--related-small {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  padding: var(--ads-sizes-8, 2rem) var(--ads-sizes-6, 1.5rem);
  border: var(--ads-borders-1px, 1px solid) var(--ads-colors-outline-low-base-light, #dadadd);
  border-radius: var(--ads-radii-md, 0.375rem);
}
.ads-link--related b,
.ads-link--related strong, .ads-link--related-small b,
.ads-link--related-small strong {
  font-weight: 600;
}
.ads-link--related i,
.ads-link--related em, .ads-link--related-small i,
.ads-link--related-small em {
  font-style: italic;
}
.ads-link--related-small {
  padding: var(--ads-sizes-6, 1.5rem) var(--ads-space-4, 1rem);
}
.ads-link--list, .ads-link--icon, .ads-link--related, .ads-link--related-small {
  text-decoration: none;
}
.ads-link--disabled {
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
  cursor: not-allowed;
}
.ads-link .ads-icon {
  color: currentColor;
}
.ads-link [dir=rtl] .ads-icon--arrow-right {
  transform: rotate(180deg);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-logo-slot {
  display: flex;
  overflow: hidden;
}
.ads-logo-slot--size-small .ads-logo-slot__logo,
.ads-logo-slot--size-small .ads-logo-slot__accor-label {
  height: 40px;
}
.ads-logo-slot--size-default .ads-logo-slot__logo,
.ads-logo-slot--size-default .ads-logo-slot__accor-label {
  height: 56px;
}
.ads-logo-slot--display-nested {
  border-radius: 4px;
}
.ads-logo-slot--display-page {
  border: 1px solid #dadadd;
  border-radius: 6px;
}
.ads-logo-slot--shape-rectangle .ads-logo-slot__logo {
  padding: 0;
  aspect-ratio: 1.7777777778;
}
.ads-logo-slot--shape-square .ads-logo-slot__logo {
  aspect-ratio: 1;
}
.ads-logo-slot__logo, .ads-logo-slot__accor-label {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
.ads-logo-slot__accor-label {
  padding: 2px;
  border-left: 1px solid #dadadd;
  aspect-ratio: 1;
}
.ads-logo-slot__accor-label > :where(img, svg) {
  width: 100%;
  height: 100%;
  object-fit: contain;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-progress-bar {
  display: flex;
  flex-direction: column;
}
.ads-progress-bar__step {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  margin: 0;
  color: #068484;
  gap: 4px;
}
.ads-progress-bar__step b,
.ads-progress-bar__step strong {
  font-weight: 600;
}
.ads-progress-bar__step i,
.ads-progress-bar__step em {
  font-style: italic;
}
.ads-progress-bar__step-current {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-progress-bar__step-current b,
.ads-progress-bar__step-current strong {
  font-weight: 600;
}
.ads-progress-bar__step-current i,
.ads-progress-bar__step-current em {
  font-style: italic;
}
.ads-progress-bar__subtitle {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  margin: 0;
  color: #3e3d48;
}
.ads-progress-bar__subtitle b,
.ads-progress-bar__subtitle strong {
  font-weight: 600;
}
.ads-progress-bar__subtitle i,
.ads-progress-bar__subtitle em {
  font-style: italic;
}
.ads-progress-bar__progress {
  position: relative;
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 60px;
  margin-top: 12px;
  background-color: #c9c7de;
}
.ads-progress-bar__current-progress, .ads-progress-bar__bonus-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 60px;
}
.ads-progress-bar__current-progress::before, .ads-progress-bar__current-progress::after, .ads-progress-bar__bonus-progress::before, .ads-progress-bar__bonus-progress::after {
  position: absolute;
  z-index: -1;
  top: 0;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  content: "";
}
.ads-progress-bar__current-progress::before, .ads-progress-bar__bonus-progress::before {
  z-index: 1;
  right: -2px;
  background-color: #fff;
}
.ads-progress-bar__current-progress::after, .ads-progress-bar__bonus-progress::after {
  z-index: 2;
  right: 0;
  background-color: #068484;
}
.ads-progress-bar__current-progress [dir=rtl], .ads-progress-bar__bonus-progress [dir=rtl] {
  right: 0;
  left: auto;
}
.ads-progress-bar__current-progress [dir=rtl]::before, .ads-progress-bar__bonus-progress [dir=rtl]::before {
  right: auto;
  left: -2px;
}
.ads-progress-bar__current-progress [dir=rtl]::after, .ads-progress-bar__bonus-progress [dir=rtl]::after {
  right: auto;
  left: 0;
}
.ads-progress-bar__current-progress {
  z-index: 2;
  background-color: #068484;
}
.ads-progress-bar__current-progress::before {
  background-color: #fff;
}
.ads-progress-bar__current-progress::after {
  background-color: #068484;
}
.ads-progress-bar__bonus-progress {
  z-index: 1;
  background-color: #af913a;
}
.ads-progress-bar__bonus-progress::before {
  background-color: #fff;
}
.ads-progress-bar__bonus-progress::after {
  background-color: #af913a;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-radio {
  display: inline-flex;
  align-items: baseline;
  color: #3e3d48;
  gap: 8px;
}
.ads-radio:has(input:disabled) {
  color: #8b8a93;
}
.ads-radio--inverse {
  color: #fff;
}
.ads-radio--small .ads-radio__label,
.ads-radio--small .ads-radio__description {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-radio--small .ads-radio__label b,
.ads-radio--small .ads-radio__label strong,
.ads-radio--small .ads-radio__description b,
.ads-radio--small .ads-radio__description strong {
  font-weight: 600;
}
.ads-radio--small .ads-radio__label i,
.ads-radio--small .ads-radio__label em,
.ads-radio--small .ads-radio__description i,
.ads-radio--small .ads-radio__description em {
  font-style: italic;
}
.ads-radio--small .ads-radio__label:has(.ads-radio__description) {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-radio--small .ads-radio__label:has(.ads-radio__description) b,
.ads-radio--small .ads-radio__label:has(.ads-radio__description) strong {
  font-weight: 600;
}
.ads-radio--small .ads-radio__label:has(.ads-radio__description) i,
.ads-radio--small .ads-radio__label:has(.ads-radio__description) em {
  font-style: italic;
}
.ads-radio__input[type=radio] {
  display: grid;
  width: 18px;
  height: 18px;
  border: 1px solid #6f6e77;
  border-radius: 50%;
  margin: 0;
  appearance: none;
  background-color: #fff;
  place-content: center;
}
.ads-radio__input[type=radio]::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: CanvasText;
  box-shadow: inset 1em 1em #068484;
  content: "";
  transform: scale(0);
  transition: 0.15s transform ease-in-out;
}
.ads-radio__input[type=radio]:checked {
  border: 1px solid #068484;
}
.ads-radio__input[type=radio]:checked::before {
  transform: scale(1);
}
.ads-radio__input[type=radio]:focus-visible {
  outline: 2px solid #3470df;
  outline-offset: 2px;
}
.ads-radio--inverse .ads-radio__input[type=radio]:focus-visible {
  outline-color: #fff;
}
.ads-radio__input[type=radio]:disabled {
  border: 1px solid #dadadd;
  background-color: #f4f4f5;
}
.ads-radio__input[type=radio]:disabled::before {
  box-shadow: inset 1em 1em #dadadd;
}
.ads-radio__label, .ads-radio__description {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-radio__label b,
.ads-radio__label strong, .ads-radio__description b,
.ads-radio__description strong {
  font-weight: 600;
}
.ads-radio__label i,
.ads-radio__label em, .ads-radio__description i,
.ads-radio__description em {
  font-style: italic;
}
.ads-radio__label:has(.ads-radio__description) {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-radio__label:has(.ads-radio__description) b,
.ads-radio__label:has(.ads-radio__description) strong {
  font-weight: 600;
}
.ads-radio__label:has(.ads-radio__description) i,
.ads-radio__label:has(.ads-radio__description) em {
  font-style: italic;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-range-slider__wrapper {
  display: flex;
  height: 1px;
  flex-direction: column;
  margin: 16px 4px;
  background-color: #8b8a93;
  gap: 16px;
}
.ads-range-slider__sliders-control {
  position: relative;
  display: flex;
}
.ads-range-slider__range-slider {
  position: absolute;
  width: 100%;
  height: 2px;
  margin: 0;
  appearance: none;
  pointer-events: none;
}
.ads-range-slider__range-slider::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  border: 2px solid #1e1852;
  border-radius: 50%;
  appearance: none;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.13);
  cursor: pointer;
  pointer-events: all;
}
.ads-range-slider__range-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 2px solid #1e1852;
  border-radius: 50%;
  appearance: none;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.13);
  cursor: pointer;
  pointer-events: all;
}
.ads-range-slider__range-slider--from {
  z-index: 1;
  top: 1px;
  height: 0;
}
.ads-range-slider__label {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  margin: 0;
  text-align: center;
}
.ads-range-slider__label b,
.ads-range-slider__label strong {
  font-weight: 600;
}
.ads-range-slider__label i,
.ads-range-slider__label em {
  font-style: italic;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-rating {
  --trust-color-bubble: #1e1852;
  --trust-color-text: var(--primary-color, currentColor);
  --trust-color-logo: #1e1852;
  --logo-review: url("./logo-519670aa.svg");
  --trust-border: url("./border-693fed28.svg");
  --trust-filled: url("./filled-aba3a33f.svg");
  --trust-size: var(--3b04af95-ratingSize);
  all: unset;
  position: relative;
  display: inline-flex;
  height: var(--trust-size);
  align-items: center;
  padding-left: calc(var(--trust-size) * 1.5);
  font-size: var(--trust-size);
  gap: 4px;
}
.ads-rating[data-brand=tripadvisor] {
  --logo-review: url("./logo-481392f8.svg");
  --trust-border: url("./border-db6efa7e.svg");
  --trust-filled: url("./filled-d82974d1.svg");
  --trust-color-bubble: #00a680;
  --trust-color-text: var(--basic-color, currentColor);
  --trust-color-logo: var(--trust-color-text);
}
.ads-rating::before {
  position: absolute;
  left: 0;
  width: calc(var(--trust-size) * 1.5);
  height: var(--trust-size);
  background-color: var(--trust-color-logo);
  content: " ";
  mask-image: var(--logo-review);
  mask-position: left center;
  mask-repeat: no-repeat;
  mask-size: calc(var(--trust-size) * 1.3);
}
.ads-rating__figure {
  position: relative;
  width: calc(var(--trust-size) * 5);
  height: var(--trust-size);
  line-height: var(--trust-size);
}
.ads-rating__figure::after {
  position: absolute;
  background-color: var(--trust-color-bubble);
  content: " ";
  inset: 0;
  mask-image: var(--trust-border);
  mask-repeat: repeat-x;
}
.ads-rating__figure [role=img] {
  position: absolute;
  inset: 0;
}
[dir=rtl] .ads-rating__figure [role=img] {
  transform: scale(-1, 1);
}
.ads-rating__figure [role=img]::after {
  position: absolute;
  background-color: var(--trust-color-bubble);
  content: " ";
  inset: 0;
  mask-image: var(--trust-filled);
  mask-repeat: repeat-x;
  mask-size: contain;
}
.ads-rating__figure[data-cover] [role=img]::after {
  mask-size: cover;
}
.ads-rating__score {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-rating__score b,
.ads-rating__score strong {
  font-weight: 600;
}
.ads-rating__score i,
.ads-rating__score em {
  font-style: italic;
}
.ads-rating__review-count {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-rating__review-count b,
.ads-rating__review-count strong {
  font-weight: 600;
}
.ads-rating__review-count i,
.ads-rating__review-count em {
  font-style: italic;
}
.ads-rating__score, .ads-rating__review-count {
  color: #3e3d48;
  font-size: var(--trust-size);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-segmented-control {
  display: flex;
}
.ads-segmented-control:not(.ads-segmented-control--allow-pointer-events) .ads-button > * {
  pointer-events: none;
}
.ads-segmented-control .ads-button {
  padding: 8px 12px;
  border: 1px solid #1e1852;
  border-radius: 4px;
}
.ads-segmented-control .ads-button:disabled {
  border: 1px solid #dadadd;
  background-color: #f4f4f5;
  color: #8b8a93;
}
.ads-segmented-control .ads-button:not(:first-child, :last-child) {
  border-radius: 0;
  border-right: 0;
}
.ads-segmented-control .ads-button:first-child {
  border-right: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.ads-segmented-control .ads-button:last-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.ads-segmented-control--inverse .ads-button {
  border: 1px solid #fff;
}
.ads-segmented-control--disabled .ads-button {
  border: 1px solid #dadadd;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-skeleton {
  display: inline-flex;
  width: var(--795480bd-width);
  height: var(--795480bd-height);
  border-radius: var(--795480bd-borderRadius);
  animation: sliding-background 1s ease infinite;
  background: linear-gradient(-70deg, #f2f2f2 0%, #f2f2f2 40%, #f7f7f7 50%, #f2f2f2 60%, #f2f2f2 100%) repeat;
  background-size: 400% 100%;
  cursor: progress;
  transition: 1s;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-stars {
  display: flex;
  align-items: center;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-user-inline-info {
  display: inline-block;
  height: var(--ads-sizes-12, 3rem);
  background-color: var(--ads-colors-surface-base-light, #fff);
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  gap: var(--ads-space-4, 1rem);
}
.ads-user-inline-info[lang=ar] {
  direction: rtl;
  unicode-bidi: bidi-override;
}
.ads-user-inline-info--avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ads-user-inline-info--default {
  display: flex;
  flex-direction: row;
}
.ads-user-inline-info__label {
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  font-weight: var(--ads-font-weights-medium, 500);
  line-height: var(--ads-line-heights-6, 1.5rem);
  text-align: center;
}
.ads-user-inline-info__photo + div > p {
  text-align: start;
}
.ads-user-inline-info__description {
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  font-weight: var(--ads-font-weights-normal, 400);
  line-height: var(--ads-line-heights-5, 1.25rem);
  text-align: center;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-skip-link {
  background-color: transparent;
  color: transparent;
  width: 0px;
  height: 0px;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: start;
}
.ads-skip-link:focus {
  padding: var(--ads-space-4, 1rem);
  width: var(--AdsSkipLinkWidth, 100%);
  height: var(--AdsSkipLinkHeight, var(--ads-sizes-12, 3rem));
  background-color: var(--AdsSkipLinkBackground, var(--ads-colors-surface-container-min-base-light, #ffffff));
  color: var(--AdsSkipLinkColor, var(--ads-colors-link-base-light, #1264a3));
}
@media screen and (min-width: 768px) {
.ads-skip-link:focus {
    padding: var(--ads-space-3, 0.75rem) var(--ads-space-8, 2rem);
}
}
@media screen and (min-width: 1024px) {
.ads-skip-link:focus {
    padding: var(--ads-space-3, 0.75rem) var(--ads-space-16, 4rem);
}
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-accordion {
  overflow: hidden;
  width: var(--ads-sizes-full, 100%);
  box-sizing: border-box;
  padding: var(--AdsAccordionPadding, var(--ads-sizes-4, 1rem));
  border-top: var(--ads-borders-1px, 1px solid) var(--ads-colors-outline-low-base-light, #dadadd);
  border-bottom: var(--ads-borders-1px, 1px solid) var(--ads-colors-outline-low-base-light, #dadadd);
  background-color: var(--AdsAccordionBackground, var(--ads-colors-surface-base-light, #fff));
  transition: max-height var(--ads-transition-duration-normal, 200ms);
}
.ads-accordion::after {
  inset: 0;
}
.ads-accordion:hover {
  border-color: var(--ads-colors-outline-hi-hover-light, #6f6e77);
}
.ads-accordion:has(.ads-accordion__trigger:disabled) {
  border-color: var(--ads-colors-disabled-hi-base-light, #dadadd);
}
.ads-accordion:has(.ads-accordion__trigger:active) {
  border-color: var(--ads-colors-outline-hi-base-light, #8b8a93);
}
.ads-accordion:has(.ads-accordion__trigger:focus-visible) {
  position: relative;
  outline: 0;
  /* Focus visible */
  border-color: transparent;
}
.ads-accordion:has(.ads-accordion__trigger:focus-visible)::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed .ads-accordion:has(.ads-accordion__trigger:focus-visible):focus-visible::after {
  display: block;
  content: "";
}
.ads-accordion:has(.ads-accordion__trigger:focus-visible):focus-visible::after {
  display: block;
  content: "";
}
.ads-accordion:has(.ads-accordion__trigger:focus-visible)[class^=ads]::after {
  inset: -5px;
}
.ads-accordion:has(.ads-accordion__trigger:focus-visible)[class^=ads-accordion]::after {
  inset: 0;
}
.ads-accordion:has(.ads-accordion__trigger:focus-visible)::after {
  display: block;
}
.ads-accordion--emphasis-highlight {
  padding: var(--ads-sizes-6, 1.5rem) var(--ads-sizes-4, 1rem);
}
.ads-accordion--open .ads-accordion__trigger .ads-accordion__trigger-chevron {
  transform: rotate(-180deg);
}
.ads-accordion__trigger-label {
  display: flex;
  min-width: 0;
  max-width: 90%;
  align-items: baseline;
  margin: 0 auto 0 0;
  gap: var(--ads-sizes-1, 0.25rem);
}
.ads-accordion__trigger-label > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ads-accordion--stack .ads-accordion__trigger-label {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.ads-accordion--disabled .ads-accordion__trigger-label {
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
}
.ads-accordion__description {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: var(--ads-colors-on-surface-low-base-light, #6f6e77);
}
.ads-accordion__description b,
.ads-accordion__description strong {
  font-weight: 600;
}
.ads-accordion__description i,
.ads-accordion__description em {
  font-style: italic;
}
.ads-accordion--disabled .ads-accordion__description {
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
}
.ads-accordion__trigger {
  display: flex;
  width: var(--ads-sizes-full, 100%);
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border-radius: 0;
  outline: 0;
}
.ads-accordion__trigger-chevron {
  transition: transform var(--ads-transition-duration-normal, 200ms);
}
.ads-accordion__content {
  margin-top: var(--ads-space-4, 1rem);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-autocomplete {
  position: relative;
}
.ads-autocomplete__loading {
  align-self: center;
  padding: 16px;
}
.ads-autocomplete__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  padding-left: 0;
  margin: 0;
}
.ads-autocomplete__dropdown-item {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  color: #3e3d48;
  list-style-type: none;
  outline: none;
}
.ads-autocomplete__dropdown-item b,
.ads-autocomplete__dropdown-item strong {
  font-weight: 600;
}
.ads-autocomplete__dropdown-item i,
.ads-autocomplete__dropdown-item em {
  font-style: italic;
}
.ads-autocomplete__dropdown-item:focus-visible, .ads-autocomplete__dropdown-item:hover {
  background: #f4f4f5;
  cursor: pointer;
}
.ads-autocomplete__dropdown-item-matching-text {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #252339;
}
.ads-autocomplete__dropdown-item-matching-text b,
.ads-autocomplete__dropdown-item-matching-text strong {
  font-weight: 600;
}
.ads-autocomplete__dropdown-item-matching-text i,
.ads-autocomplete__dropdown-item-matching-text em {
  font-style: italic;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-badge-counter.ads-badge {
  border-width: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--ads-colors-on-primary-base-light, #fff);
}
.ads-badge-counter.ads-badge--default {
  padding: var(--ads-space-2, 0.5rem) var(--ads-space-3, 0.75rem);
}
.ads-badge-counter.ads-badge .ads-icon {
  color: currentcolor;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-breadcrumb__items {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.ads-breadcrumb__item {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
}
.ads-breadcrumb__item-link {
  display: inline-flex;
}
.ads-breadcrumb__item-link[aria-current=page] {
  color: #3e3d48;
  text-decoration: none;
}
.ads-breadcrumb--inverse .ads-breadcrumb__item-link[aria-current=page] {
  color: #fff;
}
.ads-breadcrumb__item-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ads-breadcrumb__item-text--emphasis {
  font-weight: 700;
  letter-spacing: -0.14px;
}
.ads-breadcrumb__item-divider {
  display: inline-flex;
  align-self: center;
  padding: 0 4px;
  color: #1e1852;
  line-height: 1;
}
.ads-breadcrumb--inverse .ads-breadcrumb__item-divider {
  color: #fff;
}
.ads-breadcrumb__item-divider .ads-icon {
  color: currentColor;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ads-space-4, 1rem);
}

/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
.dp__input_wrap{position:relative;width:100%;box-sizing:unset}
.dp__input_wrap:focus{border-color:var(--dp-border-color-hover);outline:none}
.dp__input_valid{box-shadow:0 0 var(--dp-border-radius) var(--dp-success-color);border-color:var(--dp-success-color)}
.dp__input_valid:hover{border-color:var(--dp-success-color)}
.dp__input_invalid{box-shadow:0 0 var(--dp-border-radius) var(--dp-danger-color);border-color:var(--dp-danger-color)}
.dp__input_invalid:hover{border-color:var(--dp-danger-color)}
.dp__input{background-color:var(--dp-background-color);border-radius:var(--dp-border-radius);font-family:var(--dp-font-family);border:1px solid var(--dp-border-color);outline:none;transition:border-color .2s cubic-bezier(0.645, 0.045, 0.355, 1);width:100%;font-size:var(--dp-font-size);line-height:calc(var(--dp-font-size)*1.5);padding:var(--dp-input-padding);color:var(--dp-text-color);box-sizing:border-box}
.dp__input::placeholder{opacity:.7}
.dp__input:hover:not(.dp__input_focus){border-color:var(--dp-border-color-hover)}
.dp__input_reg{caret-color:rgba(0,0,0,0)}
.dp__input_focus{border-color:var(--dp-border-color-focus)}
.dp__disabled{background:var(--dp-disabled-color)}
.dp__disabled::placeholder{color:var(--dp-disabled-color-text)}
.dp__input_icons{display:inline-block;width:var(--dp-font-size);height:var(--dp-font-size);stroke-width:0;font-size:var(--dp-font-size);line-height:calc(var(--dp-font-size)*1.5);padding:6px 12px;color:var(--dp-icon-color);box-sizing:content-box}
.dp__input_icon{cursor:pointer;position:absolute;top:50%;inset-inline-start:0;transform:translateY(-50%);color:var(--dp-icon-color)}
.dp--clear-btn{position:absolute;top:50%;inset-inline-end:0;transform:translateY(-50%);cursor:pointer;color:var(--dp-icon-color);background:rgba(0,0,0,0);border:none;display:inline-flex;align-items:center;padding:0;margin:0}
.dp__input_icon_pad{padding-inline-start:var(--dp-input-icon-padding)}
.dp__menu{background:var(--dp-background-color);border-radius:var(--dp-border-radius);min-width:var(--dp-menu-min-width);font-family:var(--dp-font-family);font-size:var(--dp-font-size);user-select:none;border:1px solid var(--dp-menu-border-color);box-sizing:border-box}
.dp__menu::after{box-sizing:border-box}
.dp__menu::before{box-sizing:border-box}
.dp__menu:focus{border:1px solid var(--dp-menu-border-color);outline:none}
.dp--menu-wrapper{position:absolute;z-index:99999}
.dp__menu_inner{padding:var(--dp-menu-padding)}
.dp--menu--inner-stretched{padding:6px 0}
.dp__menu_index{z-index:99999}
.dp-menu-loading,.dp__menu_readonly,.dp__menu_disabled{position:absolute;inset:0;z-index:999999}
.dp__menu_disabled{background:rgba(255,255,255,.5);cursor:not-allowed}
.dp__menu_readonly{background:rgba(0,0,0,0);cursor:default}
.dp-menu-loading{background:rgba(255,255,255,.5);cursor:default}
.dp--menu-load-container{display:flex;height:100%;width:100%;justify-content:center;align-items:center}
.dp--menu-loader{width:48px;height:48px;border:var(--dp-loader);border-bottom-color:rgba(0,0,0,0);border-radius:50%;display:inline-block;box-sizing:border-box;animation:dp-load-rotation 1s linear infinite;position:absolute}
@keyframes dp-load-rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.dp__arrow_top{left:var(--dp-arrow-left);top:0;height:12px;width:12px;background-color:var(--dp-background-color);position:absolute;border-inline-end:1px solid var(--dp-menu-border-color);border-top:1px solid var(--dp-menu-border-color);transform:translate(-50%, -50%) rotate(-45deg)}
.dp__arrow_bottom{left:var(--dp-arrow-left);bottom:0;height:12px;width:12px;background-color:var(--dp-background-color);position:absolute;border-inline-end:1px solid var(--dp-menu-border-color);border-bottom:1px solid var(--dp-menu-border-color);transform:translate(-50%, 50%) rotate(45deg)}
.dp__action_extra{text-align:center;padding:2px 0}
.dp--preset-dates{padding:5px;border-inline-end:1px solid var(--dp-border-color)}
@media only screen and (width <= 600px){.dp--preset-dates{display:flex;align-self:center;border:none;overflow-x:auto;max-width:calc(var(--dp-menu-width) - var(--dp-action-row-padding)*2)}}
.dp--preset-dates-collapsed{display:flex;align-self:center;border:none;overflow-x:auto;max-width:calc(var(--dp-menu-width) - var(--dp-action-row-padding)*2)}
.dp__sidebar_left{padding:5px;border-inline-end:1px solid var(--dp-border-color)}
.dp__sidebar_right{padding:5px;margin-inline-end:1px solid var(--dp-border-color)}
.dp--preset-range{display:block;width:100%;padding:5px;text-align:left;white-space:nowrap;color:var(--dp-text-color);border-radius:var(--dp-border-radius);transition:var(--dp-common-transition)}
.dp--preset-range:hover{background-color:var(--dp-hover-color);color:var(--dp-hover-text-color);cursor:pointer}
@media only screen and (width <= 600px){.dp--preset-range{border:1px solid var(--dp-border-color);margin:0 3px}.dp--preset-range:first-child{margin-left:0}.dp--preset-range:last-child{margin-right:0}}
.dp--preset-range-collapsed{border:1px solid var(--dp-border-color);margin:0 3px}
.dp--preset-range-collapsed:first-child{margin-left:0}
.dp--preset-range-collapsed:last-child{margin-right:0}
.dp__menu_content_wrapper{display:flex}
@media only screen and (width <= 600px){.dp__menu_content_wrapper{flex-direction:column-reverse}}
.dp--menu-content-wrapper-collapsed{flex-direction:column-reverse}
.dp__calendar_header{position:relative;display:flex;justify-content:center;align-items:center;color:var(--dp-text-color);white-space:nowrap;font-weight:bold}
.dp__calendar_header_item{text-align:center;flex-grow:1;height:var(--dp-cell-size);padding:var(--dp-cell-padding);width:var(--dp-cell-size);box-sizing:border-box}
.dp__calendar_row{display:flex;justify-content:center;align-items:center;margin:var(--dp-row-margin)}
.dp__calendar_item{text-align:center;flex-grow:1;box-sizing:border-box;color:var(--dp-text-color)}
.dp__calendar{position:relative}
.dp__calendar_header_cell{border-bottom:thin solid var(--dp-border-color);padding:var(--dp-calendar-header-cell-padding)}
.dp__cell_inner{display:flex;align-items:center;text-align:center;justify-content:center;border-radius:var(--dp-cell-border-radius);height:var(--dp-cell-size);padding:var(--dp-cell-padding);width:var(--dp-cell-size);border:1px solid rgba(0,0,0,0);box-sizing:border-box;position:relative}
.dp__cell_inner:hover{transition:all .2s}
.dp__cell_auto_range_start,.dp__date_hover_start:hover,.dp__range_start{border-end-end-radius:0;border-start-end-radius:0}
.dp__cell_auto_range_end,.dp__date_hover_end:hover,.dp__range_end{border-end-start-radius:0;border-start-start-radius:0}
.dp__range_end,.dp__range_start,.dp__active_date{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}
.dp__date_hover_end:hover,.dp__date_hover_start:hover,.dp__date_hover:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}
.dp__cell_offset{color:var(--dp-secondary-color)}
.dp__cell_disabled{color:var(--dp-secondary-color);cursor:not-allowed}
.dp__range_between{background:var(--dp-range-between-dates-background-color);color:var(--dp-range-between-dates-text-color);border-radius:0;border:1px solid var(--dp-range-between-border-color)}
.dp__range_between_week{background:var(--dp-primary-color);color:var(--dp-primary-text-color);border-radius:0;border-top:1px solid var(--dp-primary-color);border-bottom:1px solid var(--dp-primary-color)}
.dp__today{border:1px solid var(--dp-primary-color)}
.dp__week_num{color:var(--dp-secondary-color);text-align:center}
.dp__cell_auto_range{border-radius:0;border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color)}
.dp__cell_auto_range_start{border-start-start-radius:var(--dp-cell-border-radius);border-end-start-radius:var(--dp-cell-border-radius);border-inline-start:1px dashed var(--dp-primary-color);border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color)}
.dp__cell_auto_range_end{border-start-end-radius:var(--dp-cell-border-radius);border-end-end-radius:var(--dp-cell-border-radius);border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color);border-inline-end:1px dashed var(--dp-primary-color)}
.dp__calendar_header_separator{width:100%;height:1px;background:var(--dp-border-color)}
.dp__calendar_next{margin-inline-start:var(--dp-multi-calendars-spacing)}
.dp__marker_line,.dp__marker_dot{height:5px;background-color:var(--dp-marker-color);position:absolute;bottom:0}
.dp__marker_dot{width:5px;border-radius:50%;left:50%;transform:translateX(-50%)}
.dp__marker_line{width:100%;left:0}
.dp__marker_tooltip{position:absolute;border-radius:var(--dp-border-radius);background-color:var(--dp-tooltip-color);padding:5px;border:1px solid var(--dp-border-color);z-index:99999;box-sizing:border-box;cursor:default}
.dp__tooltip_content{white-space:nowrap}
.dp__tooltip_text{display:flex;align-items:center;flex-flow:row nowrap;color:var(--dp-text-color)}
.dp__tooltip_mark{height:5px;width:5px;border-radius:50%;background-color:var(--dp-text-color);color:var(--dp-text-color);margin-inline-end:5px}
.dp__arrow_bottom_tp{bottom:0;height:8px;width:8px;background-color:var(--dp-tooltip-color);position:absolute;border-inline-end:1px solid var(--dp-border-color);border-bottom:1px solid var(--dp-border-color);transform:translate(-50%, 50%) rotate(45deg)}
.dp__instance_calendar{position:relative;width:100%}
@media only screen and (width <= 600px){.dp__flex_display{flex-direction:column}}
.dp--flex-display-collapsed{flex-direction:column}
.dp__cell_highlight{background-color:var(--dp-highlight-color)}
.dp__month_year_row{display:flex;align-items:center;height:var(--dp-month-year-row-height);color:var(--dp-text-color);box-sizing:border-box}
.dp__inner_nav{display:flex;align-items:center;justify-content:center;cursor:pointer;height:var(--dp-month-year-row-button-size);width:var(--dp-month-year-row-button-size);color:var(--dp-icon-color);text-align:center;border-radius:50%}
.dp__inner_nav svg{height:var(--dp-button-icon-height);width:var(--dp-button-icon-height)}
.dp__inner_nav:hover{background:var(--dp-hover-color);color:var(--dp-hover-icon-color)}
[dir=rtl] .dp__inner_nav{transform:rotate(180deg)}
.dp__inner_nav_disabled:hover,.dp__inner_nav_disabled{background:var(--dp-disabled-color);color:var(--dp-disabled-color-text);cursor:not-allowed}
.dp--year-select,.dp__month_year_select{text-align:center;cursor:pointer;height:var(--dp-month-year-row-height);display:flex;align-items:center;justify-content:center;border-radius:var(--dp-border-radius);box-sizing:border-box;color:var(--dp-text-color)}
.dp--year-select:hover,.dp__month_year_select:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}
.dp__month_year_select{width:50%}
.dp--year-select{width:100%}
.dp__month_year_wrap{display:flex;flex-direction:row;width:100%}
.dp__year_disable_select{justify-content:space-around}
.dp--header-wrap{display:flex;width:100%;flex-direction:column}
.dp__overlay{width:100%;background:var(--dp-background-color);transition:opacity 1s ease-out;z-index:99999;font-family:var(--dp-font-family);color:var(--dp-text-color);box-sizing:border-box}
.dp--overlay-absolute{position:absolute;height:100%;top:0;left:0}
.dp--overlay-relative{position:relative}
.dp__overlay_container::-webkit-scrollbar-track{box-shadow:var(--dp-scroll-bar-background);background-color:var(--dp-scroll-bar-background)}
.dp__overlay_container::-webkit-scrollbar{width:5px;background-color:var(--dp-scroll-bar-background)}
.dp__overlay_container::-webkit-scrollbar-thumb{background-color:var(--dp-scroll-bar-color);border-radius:10px}
.dp__overlay:focus{border:none;outline:none}
.dp__container_flex{display:flex}
.dp__container_block{display:block}
.dp__overlay_container{flex-direction:column;overflow-y:auto;height:var(--dp-overlay-height)}
.dp__time_picker_overlay_container{height:100%}
.dp__overlay_row{padding:0;box-sizing:border-box;display:flex;margin-inline:auto auto;flex-wrap:wrap;max-width:100%;width:100%;align-items:center}
.dp__flex_row{flex:1}
.dp__overlay_col{box-sizing:border-box;width:33%;padding:var(--dp-overlay-col-padding);white-space:nowrap}
.dp__overlay_cell_pad{padding:var(--dp-common-padding) 0}
.dp__overlay_cell_active{cursor:pointer;border-radius:var(--dp-border-radius);text-align:center;background:var(--dp-primary-color);color:var(--dp-primary-text-color)}
.dp__overlay_cell{cursor:pointer;border-radius:var(--dp-border-radius);text-align:center}
.dp__overlay_cell:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}
.dp__cell_in_between{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}
.dp__over_action_scroll{right:5px;box-sizing:border-box}
.dp__overlay_cell_disabled{cursor:not-allowed;background:var(--dp-disabled-color)}
.dp__overlay_cell_disabled:hover{background:var(--dp-disabled-color)}
.dp__overlay_cell_active_disabled{cursor:not-allowed;background:var(--dp-primary-disabled-color)}
.dp__overlay_cell_active_disabled:hover{background:var(--dp-primary-disabled-color)}
.dp__btn,.dp--qr-btn,.dp--time-invalid,.dp--time-overlay-btn{border:none;font:inherit;transition:var(--dp-common-transition);line-height:normal}
.dp--year-mode-picker{display:flex;width:100%;align-items:center;justify-content:space-between;height:var(--dp-cell-size)}
.dp--tp-wrap{max-width:var(--dp-menu-min-width)}
.dp__time_input{width:100%;display:flex;align-items:center;justify-content:center;user-select:none;font-family:var(--dp-font-family);color:var(--dp-text-color)}
.dp__time_col_reg_block{padding:0 20px}
.dp__time_col_reg_inline{padding:0 10px}
.dp__time_col_reg_with_button{padding:0 15px}
.dp__time_col_sec{padding:0 10px}
.dp__time_col_sec_with_button{padding:0 5px}
.dp__time_col{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column}
.dp__time_col_block{font-size:var(--dp-time-font-size)}
.dp__time_display_block{padding:0 3px}
.dp__time_display_inline{padding:5px}
.dp__time_picker_inline_container{display:flex;width:100%;justify-content:center}
.dp__inc_dec_button{padding:5px;margin:0;height:var(--dp-time-inc-dec-button-size);width:var(--dp-time-inc-dec-button-size);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;color:var(--dp-icon-color);box-sizing:border-box}
.dp__inc_dec_button svg{height:var(--dp-time-inc-dec-button-size);width:var(--dp-time-inc-dec-button-size)}
.dp__inc_dec_button:hover{background:var(--dp-hover-color);color:var(--dp-primary-color)}
.dp__time_display{cursor:pointer;color:var(--dp-text-color);border-radius:var(--dp-border-radius);display:flex;align-items:center;justify-content:center}
.dp__time_display:hover:enabled{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}
.dp__inc_dec_button_inline{width:100%;padding:0;height:8px;cursor:pointer;display:flex;align-items:center}
.dp__inc_dec_button_disabled,.dp__inc_dec_button_disabled:hover{background:var(--dp-disabled-color);color:var(--dp-disabled-color-text);cursor:not-allowed}
.dp__pm_am_button{background:var(--dp-primary-color);color:var(--dp-primary-text-color);border:none;padding:var(--dp-common-padding);border-radius:var(--dp-border-radius);cursor:pointer}
.dp__tp_inline_btn_bar{width:100%;height:4px;background-color:var(--dp-secondary-color);transition:var(--dp-common-transition);border-collapse:collapse}
.dp__tp_inline_btn_top:hover .dp__tp_btn_in_r{background-color:var(--dp-primary-color);transform:rotate(12deg) scale(1.15) translateY(-2px)}
.dp__tp_inline_btn_top:hover .dp__tp_btn_in_l{background-color:var(--dp-primary-color);transform:rotate(-12deg) scale(1.15) translateY(-2px)}
.dp__tp_inline_btn_bottom:hover .dp__tp_btn_in_r{background-color:var(--dp-primary-color);transform:rotate(-12deg) scale(1.15) translateY(-2px)}
.dp__tp_inline_btn_bottom:hover .dp__tp_btn_in_l{background-color:var(--dp-primary-color);transform:rotate(12deg) scale(1.15) translateY(-2px)}
.dp--time-overlay-btn{background:none}
.dp--time-invalid{background-color:var(--dp-disabled-color)}
.dp__action_row{display:flex;align-items:center;width:100%;padding:var(--dp-action-row-padding);box-sizing:border-box;color:var(--dp-text-color);flex-flow:row nowrap}
.dp__action_row svg{height:var(--dp-button-icon-height);width:auto}
.dp__selection_preview{display:block;color:var(--dp-text-color);font-size:var(--dp-preview-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dp__action_buttons{display:flex;flex:0;white-space:nowrap;align-items:center;justify-content:flex-end;margin-inline-start:auto}
.dp__action_button{display:inline-flex;align-items:center;background:rgba(0,0,0,0);border:1px solid rgba(0,0,0,0);padding:var(--dp-action-buttons-padding);line-height:var(--dp-action-button-height);margin-inline-start:3px;height:var(--dp-action-button-height);cursor:pointer;border-radius:var(--dp-border-radius);font-size:var(--dp-preview-font-size);font-family:var(--dp-font-family)}
.dp__action_cancel{color:var(--dp-text-color);border:1px solid var(--dp-border-color)}
.dp__action_cancel:hover{border-color:var(--dp-primary-color);transition:var(--dp-action-row-transtion)}
.dp__action_buttons .dp__action_select{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}
.dp__action_buttons .dp__action_select:hover{background:var(--dp-primary-color);transition:var(--dp-action-row-transtion)}
.dp__action_buttons .dp__action_select:disabled{background:var(--dp-primary-disabled-color);cursor:not-allowed}
.dp-quarter-picker-wrap{display:flex;flex-direction:column;height:100%;min-width:var(--dp-menu-min-width)}
.dp--qr-btn-disabled{cursor:not-allowed;background:var(--dp-disabled-color)}
.dp--qr-btn-disabled:hover{background:var(--dp-disabled-color)}
.dp--qr-btn{width:100%;padding:var(--dp-common-padding)}
.dp--qr-btn:not(.dp--highlighted,.dp--qr-btn-active,.dp--qr-btn-disabled,.dp--qr-btn-between){background:none}
.dp--qr-btn:hover:not(.dp--qr-btn-active,.dp--qr-btn-disabled){background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}
.dp--quarter-items{display:flex;flex-direction:column;flex:1;width:100%;height:100%;justify-content:space-evenly}
.dp--qr-btn-active{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}
.dp--qr-btn-between{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}
.dp__btn,.dp--time-overlay-btn,.dp--time-invalid,.dp--qr-btn{border:none;font:inherit;transition:var(--dp-common-transition);line-height:normal}
.dp--year-mode-picker{display:flex;width:100%;align-items:center;justify-content:space-between;height:var(--dp-cell-size)}
:root{--dp-common-transition: all 0.1s ease-in;--dp-menu-padding: 6px 8px;--dp-animation-duration: 0.1s;--dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1);--dp-transition-timing: ease-out;--dp-action-row-transtion: all 0.2s ease-in;--dp-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;--dp-border-radius: 4px;--dp-cell-border-radius: 4px;--dp-transition-length: 22px;--dp-transition-timing-general: 0.1s;--dp-button-height: 35px;--dp-month-year-row-height: 35px;--dp-month-year-row-button-size: 25px;--dp-button-icon-height: 20px;--dp-calendar-wrap-padding: 0 5px;--dp-cell-size: 35px;--dp-cell-padding: 5px;--dp-common-padding: 10px;--dp-input-icon-padding: 35px;--dp-input-padding: 6px 30px 6px 12px;--dp-menu-min-width: 260px;--dp-action-buttons-padding: 1px 6px;--dp-row-margin: 5px 0;--dp-calendar-header-cell-padding: 0.5rem;--dp-multi-calendars-spacing: 10px;--dp-overlay-col-padding: 3px;--dp-time-inc-dec-button-size: 32px;--dp-font-size: 1rem;--dp-preview-font-size: 0.8rem;--dp-time-font-size: 2rem;--dp-action-button-height: 22px;--dp-action-row-padding: 8px;--dp-direction: ltr}
.dp__theme_dark{--dp-background-color: #212121;--dp-text-color: #fff;--dp-hover-color: #484848;--dp-hover-text-color: #fff;--dp-hover-icon-color: #959595;--dp-primary-color: #005cb2;--dp-primary-disabled-color: #61a8ea;--dp-primary-text-color: #fff;--dp-secondary-color: #a9a9a9;--dp-border-color: #2d2d2d;--dp-menu-border-color: #2d2d2d;--dp-border-color-hover: #aaaeb7;--dp-border-color-focus: #aaaeb7;--dp-disabled-color: #737373;--dp-disabled-color-text: #d0d0d0;--dp-scroll-bar-background: #212121;--dp-scroll-bar-color: #484848;--dp-success-color: #00701a;--dp-success-color-disabled: #428f59;--dp-icon-color: #959595;--dp-danger-color: #e53935;--dp-marker-color: #e53935;--dp-tooltip-color: #3e3e3e;--dp-highlight-color: rgb(0 92 178 / 20%);--dp-range-between-dates-background-color: var(--dp-hover-color, #484848);--dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);--dp-range-between-border-color: var(--dp-hover-color, #fff);--dp-loader: 5px solid #005cb2}
.dp__theme_light{--dp-background-color: #fff;--dp-text-color: #212121;--dp-hover-color: #f3f3f3;--dp-hover-text-color: #212121;--dp-hover-icon-color: #959595;--dp-primary-color: #1976d2;--dp-primary-disabled-color: #6bacea;--dp-primary-text-color: #fff;--dp-secondary-color: #c0c4cc;--dp-border-color: #ddd;--dp-menu-border-color: #ddd;--dp-border-color-hover: #aaaeb7;--dp-border-color-focus: #aaaeb7;--dp-disabled-color: #f6f6f6;--dp-scroll-bar-background: #f3f3f3;--dp-scroll-bar-color: #959595;--dp-success-color: #76d275;--dp-success-color-disabled: #a3d9b1;--dp-icon-color: #959595;--dp-danger-color: #ff6f60;--dp-marker-color: #ff6f60;--dp-tooltip-color: #fafafa;--dp-disabled-color-text: #8e8e8e;--dp-highlight-color: rgb(25 118 210 / 10%);--dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3);--dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121);--dp-range-between-border-color: var(--dp-hover-color, #f3f3f3);--dp-loader: 5px solid #1976d2}
.dp__flex{display:flex;align-items:center}
.dp__btn{background:none}
.dp__main{font-family:var(--dp-font-family);user-select:none;box-sizing:border-box;position:relative;width:100%}
.dp__main *{direction:var(--dp-direction, ltr)}
.dp__pointer{cursor:pointer}
.dp__icon{stroke:currentcolor;fill:currentcolor}
.dp__button{width:100%;text-align:center;color:var(--dp-icon-color);cursor:pointer;display:flex;align-items:center;place-content:center center;padding:var(--dp-common-padding);box-sizing:border-box;height:var(--dp-button-height)}
.dp__button.dp__overlay_action{position:absolute;bottom:0}
.dp__button:hover{background:var(--dp-hover-color);color:var(--dp-hover-icon-color)}
.dp__button svg{height:var(--dp-button-icon-height);width:auto}
.dp__button_bottom{border-bottom-left-radius:var(--dp-border-radius);border-bottom-right-radius:var(--dp-border-radius)}
.dp__flex_display{display:flex}
.dp__flex_display_with_input{flex-direction:column;align-items:flex-start}
.dp__relative{position:relative}
.calendar-next-enter-active,.calendar-next-leave-active,.calendar-prev-enter-active,.calendar-prev-leave-active{transition:all var(--dp-transition-timing-general) ease-out}
.calendar-next-enter-from{opacity:0;transform:translateX(var(--dp-transition-length))}
.calendar-next-leave-to{opacity:0;transform:translateX(calc(var(--dp-transition-length) * -1))}
.calendar-prev-enter-from{opacity:0;transform:translateX(calc(var(--dp-transition-length) * -1))}
.calendar-prev-leave-to{opacity:0;transform:translateX(var(--dp-transition-length))}
.dp-menu-appear-bottom-enter-active,.dp-menu-appear-bottom-leave-active,.dp-menu-appear-top-enter-active,.dp-menu-appear-top-leave-active,.dp-slide-up-enter-active,.dp-slide-up-leave-active,.dp-slide-down-enter-active,.dp-slide-down-leave-active{transition:all var(--dp-animation-duration) var(--dp-transition-timing)}
.dp-menu-appear-top-enter-from,.dp-menu-appear-top-leave-to,.dp-slide-down-leave-to,.dp-slide-up-enter-from{opacity:0;transform:translateY(var(--dp-transition-length))}
.dp-menu-appear-bottom-enter-from,.dp-menu-appear-bottom-leave-to,.dp-slide-down-enter-from,.dp-slide-up-leave-to{opacity:0;transform:translateY(calc(var(--dp-transition-length) * -1))}
.dp--arrow-btn-nav{transition:var(--dp-common-transition)}
.dp--highlighted{background-color:var(--dp-highlight-color)}
.dp--hidden-el{visibility:hidden}
/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}
/* Icons */
.icon svg {
  display: block;
}
/* Utility */
.no-outline {
  outline: none;
}
/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}
/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}
/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}
/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}
/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}
/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
:root {
  --dp-font-family: inherit;
  --dp-cell-border-radius: var(--ads-radii-4xl, 2rem);
  --dp-common-transition: all var(--ads-transition-duration-fast, 150ms)
    var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1));
  --dp-month-year-row-height: 24px;
  --dp-month-year-row-button-size: 24px;
  --dp-cell-size: 44px;
  --dp-cell-padding: 0;
  --dp-row-margin: 0;
  --dp-menu-padding: var(--ads-space-4, 1rem);
  --dp-border-radius: var(--ads-radii-md, 0.375rem);
  --dp-multi-calendars-spacing: var(--ads-space-2, 0.5rem);
}
.ads-date-picker {
  opacity: 0;
  transition: opacity var(--ads-transition-duration-ultra-fast, 50ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1));
}
.ads-date-picker--visible {
  opacity: 1;
}
.ads-date-picker--inline-scroll {
  --dp-multi-calendars-spacing: 0;
  --dp-menu-inner-flex-dir: column;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}
.ads-date-picker--inline-scroll .dp__instance_calendar:not([role]):has(.dp__overlay) {
  position: absolute;
  top: calc(var(--fc6495af-datepickerScrollY) * 1px);
  right: 0;
  left: 0;
  width: var(--fc6495af-datepickerElementSize\.width);
  height: var(--fc6495af-datepickerElementSize\.height);
}
.ads-date-picker--inline-scroll [data-datepicker-instance] {
  overflow-y: scroll;
}
.ads-date-picker__menu {
  --dp-text-color: var(--ads-colors-on-surface-mid-base-light, #3e3d48);
  --dp-hover-color: transparent;
  --dp-hover-text-color: var(--ads-colors-on-surface-mid-base-light, #3e3d48);
  --dp-hover-icon-color: var(--ads-colors-on-surface-mid-base-light, #3e3d48);
  --dp-primary-color: var(--ads-colors-accent-base-light, #068484);
  --dp-primary-disabled-color: #73c1bd;
  --dp-primary-text-color: var(--ads-colors-on-accent-base-light, #fff);
  --dp-secondary-color: var(--ads-colors-text-disabled-base-light, #8b8a93);
  --dp-border-color: var(--ads-colors-outline-low-base-light, #dadadd);
  --dp-menu-border-color: var(--ads-colors-focus-base-light, #3470df);
  --dp-border-color-hover: var(--ads-colors-accent-base-light, #068484);
  --dp-disabled-color: var(--ads-colors-text-disabled-base-light, #8b8a93);
  --dp-icon-color: var(--ads-colors-primary-base-light, #1e1852);
  --dp-disabled-color-text: var(--ads-colors-text-disabled-base-light, #8b8a93);
  --dp-highlight-color: #eef7f7;
  --dp-range-between-dates-background-color: #eef7f7;
  --dp-range-between-border-color: #eef7f7;
  --dp-range-between-dates-text-color: var(--ads-colors-on-surface-mid-base-light, #3e3d48);
  overflow: hidden;
  border: var(--ads-borders-2px, 2px solid) var(--dp-border-color) !important;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1) !important;
}
.ads-date-picker--inline-scroll .ads-date-picker__menu {
  border: none !important;
  box-shadow: none !important;
}
.ads-date-picker__menu .dp__arrow_top,
.ads-date-picker__menu .dp__arrow_bottom {
  display: none;
}
.ads-date-picker__menu .dp__month_year_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ads-space-2, 0.5rem);
}
.ads-date-picker__menu .dp__month_year_wrap .dp--arrow-btn-nav {
  padding: 0 var(--ads-space-2, 0.5rem);
}
.ads-date-picker--inline-scroll .ads-date-picker__menu .dp__month_year_wrap .dp--arrow-btn-nav {
  display: none;
}
.ads-date-picker__menu .dp__month_year_wrap .dp__btn {
  border: var(--ads-borders-2px, 2px solid) transparent;
  border-radius: 0;
}
.ads-date-picker__menu .dp__month_year_wrap .dp__btn:focus {
  border-color: var(--ads-colors-focus-base-light, #3470df);
  outline: none !important;
}
.ads-date-picker__menu .dp__month_year_select {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  width: auto;
  padding: 0;
  color: var(--ads-colors-on-surface-hi-base-light, #252339);
}
.ads-date-picker__menu .dp__month_year_select b,
.ads-date-picker__menu .dp__month_year_select strong {
  font-weight: 600;
}
.ads-date-picker__menu .dp__month_year_select i,
.ads-date-picker__menu .dp__month_year_select em {
  font-style: italic;
}
.ads-date-picker__calendar .dp__calendar_header {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  margin-top: var(--ads-space-6, 1.5rem);
  color: var(--ads-colors-on-surface-low-base-light, #6f6e77);
  text-transform: lowercase;
}
.ads-date-picker__calendar .dp__calendar_header b,
.ads-date-picker__calendar .dp__calendar_header strong {
  font-weight: 600;
}
.ads-date-picker__calendar .dp__calendar_header i,
.ads-date-picker__calendar .dp__calendar_header em {
  font-style: italic;
}
.ads-date-picker__calendar .dp__calendar_header_separator {
  margin-top: var(--ads-space-3, 0.75rem);
}
.ads-date-picker__calendar .dp__calendar_header_item {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  height: auto;
  color: var(--ads-colors-on-surface-low-base-light, #6f6e77);
}
.ads-date-picker__calendar .dp__calendar_header_item b,
.ads-date-picker__calendar .dp__calendar_header_item strong {
  font-weight: 600;
}
.ads-date-picker__calendar .dp__calendar_header_item i,
.ads-date-picker__calendar .dp__calendar_header_item em {
  font-style: italic;
}
.ads-date-picker__calendar .dp__calendar_item {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  display: flex;
  justify-content: center;
  padding: var(--ads-space-0-5, 0.125rem) 0;
}
.ads-date-picker__calendar .dp__calendar_item b,
.ads-date-picker__calendar .dp__calendar_item strong {
  font-weight: 600;
}
.ads-date-picker__calendar .dp__calendar_item i,
.ads-date-picker__calendar .dp__calendar_item em {
  font-style: italic;
}
.ads-date-picker__calendar .dp__calendar_item:focus {
  outline: none;
}
@media (hover: hover) {
.ads-date-picker__calendar .dp__calendar_item:focus:has(.ads-date-picker__cell) .dp__cell_inner {
    border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
}
}
.ads-date-picker__calendar .dp__calendar_item:has(.dp__range_between, .dp__range_start) {
  background: linear-gradient(var(--dp-range-between-dates-background-color), var(--dp-range-between-dates-background-color));
  background-clip: content-box;
  background-position: right;
  background-repeat: no-repeat;
  background-size: calc(100% - var(--dp-cell-size)) auto;
}
.ads-date-picker__cell {
  border: var(--ads-borders-2px, 2px solid) transparent;
}
.ads-date-picker--range .ads-date-picker__cell {
  flex-grow: 1;
}
.ads-date-picker__cell[class*=dp__cell_disabled][class*=dp__date_hover]:hover {
  color: var(--dp-secondary-color) !important;
}
.ads-date-picker__cell:not([class*=dp__cell_disabled])[class*=dp__date_hover_end]:hover, .ads-date-picker__cell:not([class*=dp__cell_disabled])[class*=dp__date_hover_start]:hover, .ads-date-picker__cell:not([class*=dp__cell_disabled])[class*=dp__date_hover]:hover {
  border: var(--ads-borders-2px, 2px solid) var(--dp-primary-color);
}
.ads-date-picker__cell:not([class*=dp__cell_disabled])[class*=dp__range_between] {
  border-color: var(--dp-range-between-border-color);
  background-color: var(--dp-range-between-dates-background-color);
  color: var(--dp-range-between-dates-text-color);
}
.ads-date-picker__cell:not([class*=dp__cell_disabled])[class*=dp__today] {
  border: var(--ads-borders-2px, 2px solid) var(--dp-range-between-border-color);
}
.ads-date-picker__cell:not([class*=dp__cell_disabled])[class*=dp__cell_offset] {
  background-color: var(--dp-background-color);
}
.ads-date-picker__action-row {
  z-index: var(--ads-z-indices-docked, 10);
  padding: var(--ads-space-4, 1rem);
  box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, 0.1);
}
.ads-date-picker__action-row .ads-button {
  width: 100%;
}
.dp__flex_display {
  flex-flow: column;
}
.dp__action_row {
  display: none;
}
.dp__input_wrap .ads-button {
  padding: 0;
}
.dp__menu_inner {
  flex-direction: var(--dp-menu-inner-flex-dir, row);
  gap: var(--ads-space-4, 1rem);
}
.dp__overlay.dp--overlay-absolute {
  display: flex;
  flex-direction: column;
}
.dp__overlay_row {
  justify-content: space-evenly;
}
.dp__overlay_col {
  height: 100%;
}
.dp__overlay_col:focus {
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  outline: none;
}
.dp__overlay_col .dp__overlay_cell_pad {
  padding: var(--ads-space-4, 1rem) var(--ads-space-8, 2rem);
}
.dp__overlay_col .dp__overlay_cell,
.dp__overlay_col .dp__overlay_cell_active {
  display: flex;
  height: 100%;
  place-content: center;
  place-items: center;
}
.dp__overlay_col .dp__overlay_cell:not(.dp__overlay_cell_disabled) {
  border: var(--ads-borders-2px, 2px solid) transparent;
}
.dp__overlay_col .dp__overlay_cell:not(.dp__overlay_cell_disabled):hover {
  border-color: var(--dp-primary-color);
}
.dp__overlay_col .dp__overlay_cell_disabled {
  background-color: transparent;
  color: var(--dp-disabled-color-text);
}
.dp__button.dp__overlay_action {
  position: relative;
  height: auto;
  flex-direction: column;
  padding-top: 0;
  border: var(--ads-borders-2px, 2px solid) transparent;
  gap: var(--ads-space-2, 0.5rem);
}
.dp__button.dp__overlay_action svg {
  height: auto;
}
.dp__button.dp__overlay_action:focus {
  border-color: var(--ads-colors-focus-base-light, #3470df);
  outline: none !important;
}
.dp__button.dp__overlay_action:focus::before {
  opacity: 0;
}
.dp__button.dp__overlay_action::before {
  width: 100%;
  height: 1px;
  background-color: var(--dp-border-color);
  content: "";
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-modal ::-webkit-scrollbar {
  width: var(--ads-space-2, 0.5rem);
  height: var(--ads-space-2, 0.5rem);
}
.ads-modal ::-webkit-scrollbar-thumb {
  border-radius: var(--ads-radii-2xl, 1rem);
  background: #888;
}
.ads-modal ::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.ads-modal__backdrop {
  position: fixed;
  z-index: var(--ads-z-indices-overlay, 1300);
  display: flex;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.7);
  inset: 0;
  place-content: center;
  transition-duration: var(--ads-transition-duration-fast, 150ms);
  transition-property: var(--ads-transition-property-common, background-color, border-color, color, fill, stroke, opacity, box-shadow, transform);
  transition-timing-function: var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1));
}
.ads-modal--overlay .ads-modal__backdrop {
  place-items: flex-start;
}
@media screen and (min-width: 768px) {
.ads-modal--top-center .ads-modal__backdrop {
    place-items: flex-start;
    place-content: center;
}
.ads-modal--top-right .ads-modal__backdrop {
    place-items: flex-start;
    place-content: flex-end;
}
.ads-modal--top-left .ads-modal__backdrop {
    place-items: flex-start;
    place-content: flex-start;
}
.ads-modal--bottom-center .ads-modal__backdrop {
    place-items: flex-end;
    place-content: center;
}
.ads-modal--bottom-right .ads-modal__backdrop {
    place-items: flex-end;
    place-content: flex-end;
}
.ads-modal--bottom-left .ads-modal__backdrop {
    place-items: flex-end;
    place-content: flex-start;
}
.ads-modal--center .ads-modal__backdrop {
    place-items: center;
    place-content: center;
}
.ads-modal--center-left .ads-modal__backdrop {
    place-items: center;
    place-content: flex-start;
}
.ads-modal--center-right .ads-modal__backdrop {
    place-items: center;
    place-content: flex-end;
}
.ads-modal--wide .ads-modal__backdrop {
    place-items: normal;
}
}
.ads-modal__dialog {
  position: relative;
  z-index: var(--ads-z-indices-modal, 1400);
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border-radius: var(--ads-radii-md, 0.375rem);
  background-color: var(--ads-colors-surface-container-min-base-light, #fff);
  transition-duration: var(--ads-transition-duration-fast, 150ms);
  transition-property: var(--ads-transition-property-common, background-color, border-color, color, fill, stroke, opacity, box-shadow, transform);
  transition-timing-function: var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1));
}
.ads-modal--wide .ads-modal__dialog {
  width: 100%;
}
@media screen and (max-width: 767px) {
.ads-modal--default .ads-modal__dialog, .ads-modal--wide .ads-modal__dialog {
    max-height: 100%;
    border-radius: 0;
    margin: 0;
}
}
@media screen and (max-width: 767px) {
.ads-modal__dialog {
    width: 100%;
    max-height: calc(100% - 32px);
    margin: 16px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.ads-modal__dialog {
    width: 640px;
    max-height: calc(100% - 48px);
    margin: 24px;
}
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
.ads-modal__dialog {
    width: 640px;
    max-height: calc(100% - 48px);
    margin: 24px;
}
}
@media screen and (min-width: 1280px) and (max-width: 1440px) {
.ads-modal__dialog {
    width: 640px;
    max-height: calc(100% - 48px);
    margin: 24px;
}
}
@media screen and (min-width: 1441px) {
.ads-modal__dialog {
    width: 640px;
    max-height: calc(100% - 48px);
    margin: 24px;
}
}
@media screen and (max-width: 767px) {
.ads-modal__header, .ads-modal__content, .ads-modal__footer {
    padding: 16px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.ads-modal__header, .ads-modal__content, .ads-modal__footer {
    padding: 24px;
}
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
.ads-modal__header, .ads-modal__content, .ads-modal__footer {
    padding: 24px;
}
}
@media screen and (min-width: 1280px) and (max-width: 1440px) {
.ads-modal__header, .ads-modal__content, .ads-modal__footer {
    padding: 24px;
}
}
@media screen and (min-width: 1441px) {
.ads-modal__header, .ads-modal__content, .ads-modal__footer {
    padding: 24px;
}
}
.ads-modal__header {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  padding-bottom: var(--ads-space-4, 1rem);
  gap: var(--ads-space-2, 0.5rem);
  transition-duration: var(--ads-transition-duration-fast, 150ms);
  transition-property: var(--ads-transition-property-common, background-color, border-color, color, fill, stroke, opacity, box-shadow, transform);
  transition-timing-function: var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1));
}
.ads-modal__header[data-header-overlay] {
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
}
.ads-modal--condensed-header .ads-modal__header {
  padding: var(--ads-space-4, 1rem);
  border-bottom: var(--ads-borders-1px, 1px solid) var(--ads-colors-outline-low-base-light, #dadadd);
}
.ads-modal__close-button {
  position: sticky;
  top: 0;
  display: flex;
  width: auto;
  padding: 0;
  border-radius: 0;
  margin-left: auto;
  background-color: transparent;
  color: var(--ads-colors-on-surface-hi-base-light, #252339);
}
.ads-modal__content {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 0;
  gap: var(--ads-space-4, 1rem);
  overflow-y: auto;
}
.ads-modal__content:not(.ads-modal--condensed-header) {
  padding-top: 0;
}
.ads-modal__intercept-sentinel {
  position: absolute;
  top: 0;
}
.ads-modal__title {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-modal__title b,
.ads-modal__title strong {
  font-weight: 600;
}
.ads-modal__title i,
.ads-modal__title em {
  font-style: italic;
}
.ads-modal--condensed-header .ads-modal__title {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  margin-left: auto;
}
.ads-modal--condensed-header .ads-modal__title b,
.ads-modal--condensed-header .ads-modal__title strong {
  font-weight: 600;
}
.ads-modal--condensed-header .ads-modal__title i,
.ads-modal--condensed-header .ads-modal__title em {
  font-style: italic;
}
.ads-modal__body {
  width: 100%;
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-modal__body b,
.ads-modal__body strong {
  font-weight: 600;
}
.ads-modal__body i,
.ads-modal__body em {
  font-style: italic;
}
.ads-modal__footer {
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
}
@media screen and (min-width: 768px) {
.ads-modal__footer {
    flex-direction: row;
    justify-content: flex-end;
}
}
.ads-modal__footer[data-footer-overlay=true] {
  box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, 0.2);
}
.ads-modal__action-buttons {
  margin-left: auto;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
body.ads-modal-overflow-hidden {
  overflow: hidden;
}
.modal-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1)), transform var(--ads-transition-duration-ultra-slow, 500ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1));
}
.modal-enter-from .ads-modal__backdrop {
  opacity: 0;
}
.modal-leave-to .ads-modal__backdrop {
  opacity: 0;
}
.modal-enter-from.ads-modal--top-center .ads-modal__dialog,
.modal-leave-to.ads-modal--top-center .ads-modal__dialog {
  transform: translateY(-2em);
}
@media screen and (max-width: 767px) {
.modal-enter-from.ads-modal--default .ads-modal__dialog, .modal-enter-from.ads-modal--wide .ads-modal__dialog,
  .modal-leave-to.ads-modal--default .ads-modal__dialog,
  .modal-leave-to.ads-modal--wide .ads-modal__dialog {
    transform: translateY(-2em);
}
.modal-enter-from[class*=ads-modal--bottom-] .ads-modal__dialog,
  .modal-leave-to[class*=ads-modal--bottom-] .ads-modal__dialog {
    transform: translateY(2em);
}
}
.modal-enter-from.ads-modal--top-right .ads-modal__dialog,
.modal-leave-to.ads-modal--top-right .ads-modal__dialog {
  transform: translateX(2em);
}
@media screen and (max-width: 767px) {
.modal-enter-from.ads-modal--default .ads-modal__dialog, .modal-enter-from.ads-modal--wide .ads-modal__dialog,
  .modal-leave-to.ads-modal--default .ads-modal__dialog,
  .modal-leave-to.ads-modal--wide .ads-modal__dialog {
    transform: translateY(-2em);
}
.modal-enter-from[class*=ads-modal--bottom-] .ads-modal__dialog,
  .modal-leave-to[class*=ads-modal--bottom-] .ads-modal__dialog {
    transform: translateY(2em);
}
}
.modal-enter-from.ads-modal--top-left .ads-modal__dialog,
.modal-leave-to.ads-modal--top-left .ads-modal__dialog {
  transform: translateX(-2em);
}
@media screen and (max-width: 767px) {
.modal-enter-from.ads-modal--default .ads-modal__dialog, .modal-enter-from.ads-modal--wide .ads-modal__dialog,
  .modal-leave-to.ads-modal--default .ads-modal__dialog,
  .modal-leave-to.ads-modal--wide .ads-modal__dialog {
    transform: translateY(-2em);
}
.modal-enter-from[class*=ads-modal--bottom-] .ads-modal__dialog,
  .modal-leave-to[class*=ads-modal--bottom-] .ads-modal__dialog {
    transform: translateY(2em);
}
}
.modal-enter-from.ads-modal--bottom-center .ads-modal__dialog,
.modal-leave-to.ads-modal--bottom-center .ads-modal__dialog {
  transform: translateY(2em);
}
@media screen and (max-width: 767px) {
.modal-enter-from.ads-modal--default .ads-modal__dialog, .modal-enter-from.ads-modal--wide .ads-modal__dialog,
  .modal-leave-to.ads-modal--default .ads-modal__dialog,
  .modal-leave-to.ads-modal--wide .ads-modal__dialog {
    transform: translateY(-2em);
}
.modal-enter-from[class*=ads-modal--bottom-] .ads-modal__dialog,
  .modal-leave-to[class*=ads-modal--bottom-] .ads-modal__dialog {
    transform: translateY(2em);
}
}
.modal-enter-from.ads-modal--bottom-right .ads-modal__dialog,
.modal-leave-to.ads-modal--bottom-right .ads-modal__dialog {
  transform: translateX(2em);
}
@media screen and (max-width: 767px) {
.modal-enter-from.ads-modal--default .ads-modal__dialog, .modal-enter-from.ads-modal--wide .ads-modal__dialog,
  .modal-leave-to.ads-modal--default .ads-modal__dialog,
  .modal-leave-to.ads-modal--wide .ads-modal__dialog {
    transform: translateY(-2em);
}
.modal-enter-from[class*=ads-modal--bottom-] .ads-modal__dialog,
  .modal-leave-to[class*=ads-modal--bottom-] .ads-modal__dialog {
    transform: translateY(2em);
}
}
.modal-enter-from.ads-modal--bottom-left .ads-modal__dialog,
.modal-leave-to.ads-modal--bottom-left .ads-modal__dialog {
  transform: translateX(-2em);
}
@media screen and (max-width: 767px) {
.modal-enter-from.ads-modal--default .ads-modal__dialog, .modal-enter-from.ads-modal--wide .ads-modal__dialog,
  .modal-leave-to.ads-modal--default .ads-modal__dialog,
  .modal-leave-to.ads-modal--wide .ads-modal__dialog {
    transform: translateY(-2em);
}
.modal-enter-from[class*=ads-modal--bottom-] .ads-modal__dialog,
  .modal-leave-to[class*=ads-modal--bottom-] .ads-modal__dialog {
    transform: translateY(2em);
}
}
.modal-enter-from.ads-modal--center .ads-modal__dialog,
.modal-leave-to.ads-modal--center .ads-modal__dialog {
  transform: scale(1.1);
}
@media screen and (max-width: 767px) {
.modal-enter-from.ads-modal--default .ads-modal__dialog, .modal-enter-from.ads-modal--wide .ads-modal__dialog,
  .modal-leave-to.ads-modal--default .ads-modal__dialog,
  .modal-leave-to.ads-modal--wide .ads-modal__dialog {
    transform: translateY(-2em);
}
.modal-enter-from[class*=ads-modal--bottom-] .ads-modal__dialog,
  .modal-leave-to[class*=ads-modal--bottom-] .ads-modal__dialog {
    transform: translateY(2em);
}
}
.modal-enter-from.ads-modal--center-left .ads-modal__dialog,
.modal-leave-to.ads-modal--center-left .ads-modal__dialog {
  transform: translateX(-2em);
}
@media screen and (max-width: 767px) {
.modal-enter-from.ads-modal--default .ads-modal__dialog, .modal-enter-from.ads-modal--wide .ads-modal__dialog,
  .modal-leave-to.ads-modal--default .ads-modal__dialog,
  .modal-leave-to.ads-modal--wide .ads-modal__dialog {
    transform: translateY(-2em);
}
.modal-enter-from[class*=ads-modal--bottom-] .ads-modal__dialog,
  .modal-leave-to[class*=ads-modal--bottom-] .ads-modal__dialog {
    transform: translateY(2em);
}
}
.modal-enter-from.ads-modal--center-right .ads-modal__dialog,
.modal-leave-to.ads-modal--center-right .ads-modal__dialog {
  transform: translateX(2em);
}
@media screen and (max-width: 767px) {
.modal-enter-from.ads-modal--default .ads-modal__dialog, .modal-enter-from.ads-modal--wide .ads-modal__dialog,
  .modal-leave-to.ads-modal--default .ads-modal__dialog,
  .modal-leave-to.ads-modal--wide .ads-modal__dialog {
    transform: translateY(-2em);
}
.modal-enter-from[class*=ads-modal--bottom-] .ads-modal__dialog,
  .modal-leave-to[class*=ads-modal--bottom-] .ads-modal__dialog {
    transform: translateY(2em);
}
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
@media screen and (min-width: 768px) {
.ads-drawer--default .ads-modal__dialog {
    width: 460px;
}
}
@media screen and (min-width: 768px) {
.ads-drawer--small .ads-modal__dialog {
    width: 360px;
}
}
.ads-drawer .ads-modal__dialog {
  margin: 0;
  max-height: unset;
  height: 100%;
  border-radius: 0;
}
@media screen and (max-width: 767px) {
.ads-drawer .ads-modal__dialog {
    height: unset;
    max-height: 85vh;
    position: absolute;
    bottom: 0;
    border-radius: var(--ads-radii-md, 0.375rem) var(--ads-radii-md, 0.375rem) 0 0;
}
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.gallery-item {
  --video-wrapper-bg: var(--ads-colors-overlay-hi-base-light, #000000b2);
  --video-wrapper-img-opactity: 1;
  overflow: hidden;
  border-radius: var(--ads-radii-md, 0.375rem);
}
.gallery-item--playing {
  --video-wrapper-bg: transparent;
  --video-wrapper-img-opactity: 0;
}
.gallery-item img,
.gallery-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-item video {
  position: absolute;
  z-index: 1;
  inset: 0;
}
.gallery-item__video-wrapper {
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  white-space: nowrap;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background-color: var(--video-wrapper-bg);
}
.gallery-item__video-wrapper img {
  opacity: var(--video-wrapper-img-opactity);
}
.gallery-item__play-icon {
  position: absolute;
  color: var(--ads-colors-on-inverse-base-light, #fff);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.gallery-list {
  display: flex;
  flex-direction: column;
  gap: var(--ads-space-6, 1.5rem);
}
.gallery-list--mosaic .gallery-list__item:nth-child(3n+1) {
  aspect-ratio: 16/9;
  grid-column: span 2;
}
.gallery-list__category-name {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  display: flex;
  align-items: center;
  color: var(--ads-colors-on-surface-hi-base-light, #252339);
  gap: var(--ads-sizes-1, 0.25rem);
}
.gallery-list__category-name b,
.gallery-list__category-name strong {
  font-weight: 600;
}
.gallery-list__category-name i,
.gallery-list__category-name em {
  font-style: italic;
}
.gallery-list__wrapper {
  display: grid;
  grid-gap: var(--ads-space-6, 1.5rem);
  grid-template-columns: 1fr;
  list-style: none;
}
@media screen and (min-width: 768px) {
.gallery-list__wrapper {
    grid-template-columns: repeat(2, 1fr);
}
}
.gallery-list__item {
  aspect-ratio: 3/2;
}
.gallery-list p,
.gallery-list ul,
.gallery-list li {
  padding: 0;
  margin: 0;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-tabs {
  -ms-overflow-style: none;
  scrollbar-width: none;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--AdsTabsGapBetweenTabPanel, var(--ads-space-8, 2rem));
}
.ads-tabs ::-webkit-scrollbar {
  width: 0;
  background: transparent;
}
@media screen and (min-width: 768px) {
.ads-tabs {
    gap: var(--AdsTabsGapBetweenTabPanel, var(--ads-space-12, 3rem));
}
}
.ads-tabs--stack {
  flex-direction: row;
  justify-content: space-between;
  padding-top: var(--ads-space-4, 1rem);
}
.ads-tabs__list-wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  overflow: scroll;
  max-width: 100%;
  height: 100%;
  align-items: flex-start;
  padding: var(--ads-space-1-5, 0.375rem);
  background-color: var(--AdsTabsListBackgroundColor, transparent);
  gap: var(--ads-space-10, 2.5rem);
}
.ads-tabs__list-wrapper ::-webkit-scrollbar {
  width: 0;
  background: transparent;
}
.ads-tabs--stack .ads-tabs__list-wrapper {
  --list-width: 16.67%;
  top: var(--ads-space-4, 1rem);
  width: var(--list-width);
  flex-direction: column;
}
@media screen and (max-width: 1279px) {
.ads-tabs--stack .ads-tabs__list-wrapper {
    --list-width: 33%;
}
}
.ads-tabs__list {
  display: flex;
  border-bottom: var(--ads-borders-1px, 1px solid) var(--ads-colors-outline-low-base-light, #dadadd);
  gap: var(--ads-space-6, 1.5rem);
}
.ads-tabs--stack .ads-tabs__list {
  width: 100%;
  flex-direction: column;
  border-right: var(--ads-borders-1px, 1px solid) var(--ads-colors-outline-low-base-light, #dadadd);
  border-bottom: none;
  gap: var(--ads-space-4, 1rem);
}
.ads-tabs__item {
  position: relative;
  display: inline-flex;
  max-width: 10.75rem;
  white-space: nowrap;
}
.ads-tabs__item--prev {
  --transform-origin: left;
}
.ads-tabs__item--next {
  --transform-origin: right;
}
.ads-tabs__item::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--ads-colors-accent-base-light, #068484);
  content: "";
  opacity: 0;
  transform: scaleX(0);
  transform-origin: var(--transform-origin);
  transition: all var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
.ads-tabs__item:not(.ads-tabs__item--disabled)[data-tab-active=true]::after, .ads-tabs__item:not(.ads-tabs__item--disabled):hover::after {
  opacity: 1;
  transform: scaleX(1);
}
.ads-tabs__item:not(.ads-tabs__item--disabled)[data-tab-active=true][data-tab-active=true] .ads-tabs__link, .ads-tabs__item:not(.ads-tabs__item--disabled):hover[data-tab-active=true] .ads-tabs__link {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-tabs__item:not(.ads-tabs__item--disabled)[data-tab-active=true][data-tab-active=true] .ads-tabs__link b,
.ads-tabs__item:not(.ads-tabs__item--disabled)[data-tab-active=true][data-tab-active=true] .ads-tabs__link strong, .ads-tabs__item:not(.ads-tabs__item--disabled):hover[data-tab-active=true] .ads-tabs__link b,
.ads-tabs__item:not(.ads-tabs__item--disabled):hover[data-tab-active=true] .ads-tabs__link strong {
  font-weight: 600;
}
.ads-tabs__item:not(.ads-tabs__item--disabled)[data-tab-active=true][data-tab-active=true] .ads-tabs__link i,
.ads-tabs__item:not(.ads-tabs__item--disabled)[data-tab-active=true][data-tab-active=true] .ads-tabs__link em, .ads-tabs__item:not(.ads-tabs__item--disabled):hover[data-tab-active=true] .ads-tabs__link i,
.ads-tabs__item:not(.ads-tabs__item--disabled):hover[data-tab-active=true] .ads-tabs__link em {
  font-style: italic;
}
.ads-tabs__item:not(.ads-tabs__item--disabled):hover::after {
  background-color: var(--ads-colors-accent-hover-light, #007576);
}
.ads-tabs__item:not(.ads-tabs__item--disabled):active::after {
  background-color: var(--ads-colors-accent-pressed-light, #006163);
}
.ads-tabs--stack .ads-tabs__item {
  max-width: 100%;
}
.ads-tabs--stack .ads-tabs__item--prev {
  --transform-origin: top;
}
.ads-tabs--stack .ads-tabs__item--next {
  --transform-origin: bottom;
}
.ads-tabs--stack .ads-tabs__item::after {
  right: 0;
  left: unset;
  width: 4px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: var(--transform-origin);
}
.ads-tabs--stack .ads-tabs__item:not(.ads-tabs--stack .ads-tabs__item--disabled)[data-tab-active=true]::after, .ads-tabs--stack .ads-tabs__item:not(.ads-tabs--stack .ads-tabs__item--disabled):hover::after {
  transform: scaleY(1);
}
.ads-tabs__link {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  white-space: nowrap;
  display: inline-flex;
  width: 100%;
  padding: var(--ads-space-3, 0.75rem) 0;
  color: var(--ads-colors-on-surface-hi-base-light, #252339);
  cursor: pointer;
  gap: var(--ads-sizes-1, 0.25rem);
  text-decoration: none;
  user-select: none;
}
.ads-tabs__link b,
.ads-tabs__link strong {
  font-weight: 600;
}
.ads-tabs__link i,
.ads-tabs__link em {
  font-style: italic;
}
.ads-tabs__link--disabled {
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
  cursor: not-allowed;
}
.ads-tabs__link--disabled a,
.ads-tabs__link--disabled :deep(a) {
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
}
.ads-tabs__link--disabled .ads-tabs__link-indicator {
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
}
.ads-tabs--stack .ads-tabs__link {
  padding: 0 var(--ads-space-5, 1.25rem) 0 0;
}
.ads-tabs--inline-stack-content .ads-tabs__link {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ads-tabs__link a,
.ads-tabs__link :deep(a) {
  text-decoration: none;
}
.ads-tabs__link-title-wrapper {
  min-width: 0;
  flex: 1;
}
.ads-tabs--stack .ads-tabs__link-title-wrapper {
  text-align: start;
}
.ads-tabs__link-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ads-tabs__link-indicator {
  color: var(--ads-colors-on-surface-low-base-light, #6f6e77);
  font-weight: var(--ads-font-weights-normal, 400);
}
.ads-tabs__panels-wrapper {
  display: flex;
  height: var(--AdsTabsPanelWrapperHeight, 100%);
  max-height: var(--AdsTabsPanelWrapperHeight, 100%);
  flex: 1;
  gap: var(--AdsTabsGapBetweenPanel, var(--ads-space-4, 1rem));
}
.ads-tabs__panels-wrapper--scroll-y {
  overflow: hidden scroll;
  flex-direction: column;
}
.ads-tabs__panels-wrapper--scroll-x {
  overflow: scroll hidden;
}
.ads-tabs__panel {
  position: relative;
  min-width: 100%;
  height: min-content;
}
.ads-tabs__panel--disabled, .ads-tabs__panel--hidden {
  display: none;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-gallery-rich {
  --AdsTabsGapBetweenPanel: var(--ads-space-12, 3rem);
  --AdsTabsGapBetweenTabPanel: var(--ads-space-8, 2rem);
  --AdsTabsListBackgroundColor: var(--ads-colors-surface-base-light, #fff);
}
@media screen and (min-width: 768px) {
.ads-gallery-rich {
    --AdsTabsGapBetweenTabPanel: var(--ads-space-14, 3.5rem);
}
}
@media screen and (min-width: 1280px) {
.ads-gallery-rich {
    --AdsTabsGapBetweenTabPanel: var(--ads-space-28, 7rem);
}
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.gallery-slideshow-modal__header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: var(--ads-sizes-1, 0.25rem);
  padding-inline: var(--ads-space-4, 1rem);
}
@media screen and (min-width: 768px) {
.gallery-slideshow-modal__header {
    padding-inline: var(--ads-space-8, 2rem);
}
}
@media screen and (min-width: 1280px) {
.gallery-slideshow-modal__header {
    padding-inline: var(--ads-space-16, 4rem);
}
}
.gallery-slideshow-modal__header .ads-button {
  color: var(--ads-colors-on-inverse-base-light, #fff);
  padding-inline: 0;
}
.gallery-slideshow-modal__close-button {
  margin-left: auto;
}
.gallery-slideshow-modal__body-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: var(--ads-sizes-1, 0.25rem);
  gap: var(--ads-space-6, 1.5rem);
}
.gallery-slideshow-modal__content {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  gap: var(--ads-space-6, 1.5rem);
}
.gallery-slideshow-modal .ads-modal__backdrop {
  flex-direction: column;
  gap: var(--ads-space-4, 1rem);
  padding-block: var(--ads-space-4, 1rem);
  place-content: flex-start;
}
@media screen and (min-width: 768px) {
.gallery-slideshow-modal .ads-modal__backdrop {
    padding-block: var(--ads-space-6, 1.5rem);
}
}
.gallery-slideshow-modal .ads-modal__content {
  padding: 0;
}
.gallery-slideshow-modal .ads-modal__dialog {
  flex: 1;
  margin: 0 auto;
  background-color: transparent;
  padding-inline: var(--ads-space-4, 1rem);
}
@media screen and (min-width: 768px) {
.gallery-slideshow-modal .ads-modal__dialog {
    width: 75%;
    padding: 0;
}
}
.gallery-slideshow-modal .ads-modal__body {
  height: 100%;
}
.gallery-slideshow-modal .ads-modal__header {
  display: none;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.gallery-slideshow-thumbnails {
  -ms-overflow-style: none;
  scrollbar-width: none;
  display: none;
  max-width: var(--ads-sizes-full, 100%);
  flex-direction: row;
  border-radius: var(--ads-radii-md, 0.375rem);
  margin: var(--ads-sizes-1, 0.25rem);
  margin-bottom: auto;
  gap: var(--ads-space-6, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.gallery-slideshow-thumbnails ::-webkit-scrollbar {
  width: 0;
  background: transparent;
}
@media screen and (min-width: 768px) {
.gallery-slideshow-thumbnails {
    display: flex;
}
}
.gallery-slideshow-thumbnails:focus-visible {
  outline: 2px solid #3470df;
  outline-offset: 2px;
  outline-color: var(--ads-colors-on-inverse-base-light, #fff);
}
.gallery-slideshow-thumbnails__category {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ads-space-4, 1rem);
}
.gallery-slideshow-thumbnails__category-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  left: 0;
  color: var(--AdsGallerySlideshowThumbnailLabelColor, inherit);
}
.gallery-slideshow-thumbnails__category-label b,
.gallery-slideshow-thumbnails__category-label strong {
  font-weight: 600;
}
.gallery-slideshow-thumbnails__category-label i,
.gallery-slideshow-thumbnails__category-label em {
  font-style: italic;
}
.gallery-slideshow-thumbnails__category-medias {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  gap: var(--ads-space-2, 0.5rem);
}
.gallery-slideshow-thumbnails__media-button {
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  width: 78px;
  height: 58px;
  border-radius: var(--ads-radii-md, 0.375rem);
  cursor: pointer;
}
.gallery-slideshow-thumbnails__media {
  overflow: hidden;
  width: 100%;
  height: 100%;
  filter: brightness(0.7);
  object-fit: cover;
  transition: filter var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
}
.gallery-slideshow-thumbnails__media:hover:not(:active), .gallery-slideshow-thumbnails__media--selected:not(:active) {
  filter: none;
}
.gallery-slideshow-thumbnails__play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--ads-colors-on-inverse-base-light, #fff);
  transform: translate(-50%, -50%);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-slideshow {
  --gutter: var(--ads-space-4, 1rem);
  position: relative;
  width: 100%;
}
@media screen and (min-width: 768px) {
.ads-slideshow {
    --gutter: var(--ads-space-6, 1.5rem);
}
}
.ads-slideshow--modal {
  display: grid;
  align-items: center;
  gap: var(--ads-space-6, 1.5rem);
  grid-template-areas: "gallery gallery gallery" "previous pagination next";
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr auto;
}
@media screen and (min-width: 768px) {
.ads-slideshow--modal {
    grid-template-areas: "previous gallery next" "previous gallery next";
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
}
}
@media screen and (min-width: 1280px) {
.ads-slideshow--modal {
    gap: var(--ads-space-16, 4rem);
}
}
.ads-slideshow:not(.ads-slideshow--modal) .ads-slideshow__previous {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: var(--gutter);
  transform: translateY(-50%);
}
.ads-slideshow:not(.ads-slideshow--modal) .ads-slideshow__next {
  position: absolute;
  top: 50%;
  right: var(--gutter);
  transform: translateY(-50%);
}
.ads-slideshow:not(.ads-slideshow--modal) .ads-slideshow__pagination {
  display: none;
}
.ads-slideshow__container {
  display: flex;
  overflow: hidden;
  height: 100%;
  flex-direction: column;
  gap: var(--ads-space-6, 1.5rem);
  grid-area: gallery;
}
.ads-slideshow__gallery-wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: relative;
  display: flex;
  aspect-ratio: 16/9;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.ads-slideshow__gallery-wrapper ::-webkit-scrollbar {
  width: 0;
  background: transparent;
}
.ads-slideshow__gallery-item {
  width: 100%;
  min-width: 100%;
  height: 100%;
  border-radius: var(--ads-radii-md, 0.375rem);
  margin: 0 var(--ads-sizes-1, 0.25rem);
  scroll-snap-align: start;
}
.ads-slideshow__previous {
  grid-area: previous;
}
.ads-slideshow__next {
  grid-area: next;
}
.ads-slideshow__previous, .ads-slideshow__next {
  border: var(--ads-borders-1px, 1px solid) var(--ads-colors-primary-base-light, #1e1852);
  box-shadow: var(--ads-shadows-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
}
.ads-slideshow__previous--disabled, .ads-slideshow__next--disabled {
  opacity: 0.38;
}
.ads-slideshow__pagination {
  display: flex;
  align-items: center;
  gap: var(--ads-space-4, 1rem);
  grid-area: pagination;
}
@media screen and (min-width: 768px) {
.ads-slideshow__pagination {
    display: none;
}
}
.ads-slideshow__pagination-label {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  display: flex;
  flex: 1;
  color: var(--AdsSlideshowPaginationLabelColor, var(--ads-colors-on-inverse-base-light, #fff));
  gap: var(--ads-space-4, 1rem);
  text-align: center;
}
.ads-slideshow__pagination-label b,
.ads-slideshow__pagination-label strong {
  font-weight: 600;
}
.ads-slideshow__pagination-label i,
.ads-slideshow__pagination-label em {
  font-style: italic;
}
.ads-slideshow__pagination-label::before, .ads-slideshow__pagination-label::after {
  flex: 1;
  border-bottom: var(--ads-borders-1px, 1px solid) var(--ads-colors-outline-low-base-light, #dadadd);
  margin: auto 0;
  content: "";
}
.ads-slideshow__see-all {
  position: absolute;
  bottom: var(--gutter);
  left: 50%;
  padding: 0;
  cursor: pointer;
  transform: translateX(-50%);
}
.ads-slideshow--modal .ads-slideshow__see-all {
  display: none;
}
.ads-slideshow__see-all:focus-visible {
  outline: 2px solid #3470df;
  outline-offset: 2px;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-gallery-slideshow {
  --AdsGallerySlideshowThumbnailLabelColor: var(--ads-colors-on-inverse-base-light, #fff);
}
.ads-gallery-slideshow__slideshow {
  margin-top: auto;
}
@media screen and (min-width: 768px) {
.ads-gallery-slideshow__slideshow {
    height: 100%;
    margin-top: 0;
}
}
.ads-gallery-slideshow__body-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: auto;
  gap: var(--ads-space-4, 1rem);
}
.ads-gallery-slideshow__body-header .ads-gallery-slideshow__title-button {
  display: none;
  padding: var(--ads-sizes-1, 0.25rem) var(--ads-space-2, 0.5rem);
}
@media screen and (min-width: 768px) {
.ads-gallery-slideshow__body-header .ads-gallery-slideshow__title-button {
    display: block;
}
}
.ads-gallery-slideshow__title-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--ads-space-2, 0.5rem);
}
@media screen and (min-width: 768px) {
.ads-gallery-slideshow__title-wrapper {
    flex-direction: row;
    align-items: baseline;
    gap: var(--ads-space-6, 1.5rem);
}
}
.ads-gallery-slideshow__title {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: var(--ads-colors-on-inverse-base-light, #fff);
}
.ads-gallery-slideshow__title b,
.ads-gallery-slideshow__title strong {
  font-weight: 600;
}
.ads-gallery-slideshow__title i,
.ads-gallery-slideshow__title em {
  font-style: italic;
}
.ads-gallery-slideshow__label {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: var(--ads-colors-on-inverse-base-light, #fff);
}
.ads-gallery-slideshow__label b,
.ads-gallery-slideshow__label strong {
  font-weight: 600;
}
.ads-gallery-slideshow__label i,
.ads-gallery-slideshow__label em {
  font-style: italic;
}
.ads-gallery-slideshow__thumbnails {
  flex: 0 0 auto;
}
.ads-gallery-slideshow__title-button {
  display: block;
  margin-top: auto;
}
.ads-gallery-slideshow__title-button > .ads-button {
  width: 100%;
}
@media screen and (min-width: 768px) {
.ads-gallery-slideshow__title-button {
    display: none;
}
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-image-product {
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  white-space: nowrap;
  display: grid;
  width: 100%;
  height: auto;
  padding: var(--ads-space-4, 1rem);
  background-color: var(--ads-colors-bg-inverse-base-light, #6f6e77);
  grid-gap: var(--ads-sizes-1, 0.25rem);
  grid-template-areas: "logo-slot logo-slot logo-slot" ". . ." "badge-counter . badge";
}
.ads-image-product:not(:has(.ads-image-product__image-wrapper > img)) {
  background-image: var(--f4a61d80-backgroundImageUrl);
  background-position: center;
  background-size: cover;
}
.ads-image-product__image-wrapper {
  position: absolute;
  inset: 0;
}
.ads-image-product__image-wrapper:not(:has(img)) {
  display: none;
}
.ads-image-product__image-wrapper > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.ads-image-product__logo-slot {
  z-index: 1;
  grid-area: logo-slot;
  place-self: start start;
}
.ads-image-product__badge-counter {
  grid-area: badge-counter;
  place-self: end start;
}
.ads-image-product__badge {
  grid-area: badge;
  place-self: end end;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-select__select {
  width: min(var(--bcefd352-selectWidth), var(--bcefd352-rootWidth) - var(--ads-space-4, 1rem));
  min-width: 0;
  max-width: calc(100% - var(--ads-sizes-6, 1.5rem) * 2);
}
.ads-select__select + .ads-input__append-inner-icon {
  position: absolute;
  right: var(--ads-space-px, 1px);
  padding-left: var(--ads-space-2, 0.5rem);
  background: inherit;
  pointer-events: none;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-input-phone-number {
  max-width: 100%;
}
.ads-input-phone-number__wrapper {
  display: flex;
  flex-direction: column;
}
.ads-input-phone-number__wrapper .ads-input > .ads-input__input::after {
  content: unset;
}
.ads-input-phone-number__wrapper .ads-input > .ads-input__input:focus-within {
  border-color: var(--ads-colors-focus-base-light, #3470df);
  box-shadow: inset 0 0 0 1px var(--ads-colors-focus-base-light, #3470df);
}
.ads-input-phone-number__wrapper .ads-select .ads-input__input {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.ads-input-phone-number__wrapper .ads-select .ads-input__input::after {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.ads-input-phone-number__wrapper .ads-select:focus-within + .ads-input:not(:first-of-type) .ads-input__input {
  border-top: var(--ads-borders-1px, 1px solid) var(--ads-colors-focus-base-light, #3470df);
}
.ads-input-phone-number__wrapper .ads-input:not(:first-of-type) .ads-input__input {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.ads-input-phone-number__wrapper .ads-input:not(:first-of-type) .ads-input__input::after {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-input-stepper {
  display: flex;
  align-items: center;
}
.ads-input-stepper__count {
  width: 100%;
  padding: 0;
  border: 0 none;
  border-radius: 0;
  margin: 0;
  appearance: none;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  outline: none;
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  width: 42px;
  text-align: center;
}
.ads-input-stepper__count::-ms-clear {
  display: none;
}
.ads-input-stepper__count b,
.ads-input-stepper__count strong {
  font-weight: 600;
}
.ads-input-stepper__count i,
.ads-input-stepper__count em {
  font-style: italic;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-message--full {
  position: absolute;
  z-index: var(--ads-z-indices-banner, 1200);
  top: 0;
  right: 0;
  left: 0;
}
.ads-message--full .ads-message__wrapper {
  border-radius: 0;
}
.ads-message:not(.ads-message--default) .ads-message__close-button {
  color: var(--ads-colors-on-surface-low-base-light, #6f6e77);
}
.ads-message--default .ads-message__wrapper {
  --border-color: var(--ads-colors-primary-base-light, #1e1852);
  color: var(--ads-colors-on-primary-base-light, #fff);
}
.ads-message--neutral .ads-message__wrapper {
  --border-color: var(--ads-colors-outline-hi-base-light, #8b8a93);
  background-color: var(--ads-colors-surface-container-low-base-light, #f4f4f5);
}
.ads-message--accent .ads-message__wrapper {
  --border-color: var(--ads-colors-accent-base-light, #068484);
  background-color: var(--ads-colors-surface-accent-base-light, #eef7f7);
}
.ads-message--success .ads-message__wrapper {
  --border-color: var(--ads-colors-success-base-light, #117846);
  background-color: var(--ads-colors-surface-success-base-light, #e6f3eb);
}
.ads-message--warning .ads-message__wrapper {
  --border-color: var(--ads-colors-warning-base-light, #965600);
  background-color: var(--ads-colors-surface-warning-base-light, #fef7df);
}
.ads-message--danger .ads-message__wrapper {
  --border-color: var(--ads-colors-danger-base-light, #ba1f1a);
  background-color: var(--ads-colors-surface-danger-base-light, #fbe6e7);
}
.ads-message--loyalty .ads-message__wrapper {
  --border-color: var(--ads-colors-loyalty-base-light, #3d4892);
  flex-direction: column;
  padding: var(--ads-space-4, 1rem) var(--ads-space-4, 1rem) var(--ads-space-3, 0.75rem);
  background-color: var(--ads-colors-surface-loyalty-base-light, #eaedf5);
}
.ads-message--full.ads-message--success .ads-message__wrapper {
  background-color: var(--ads-colors-success-base-light, #117846);
  color: var(--ads-colors-on-success-base-light, #fff);
}
.ads-message--full.ads-message--warning .ads-message__wrapper {
  background-color: var(--ads-colors-warning-container-base-light, #f2d166);
  color: var(--ads-colors-on-warning-container-base-light, #332d0f);
}
.ads-message__wrapper {
  display: flex;
  align-items: flex-start;
  padding: var(--ads-space-4, 1rem) var(--ads-space-6, 1.5rem);
  border-radius: var(--ads-radii-md, 0.375rem);
  background-color: var(--ads-colors-primary-base-light, #1e1852);
  box-shadow: none;
  color: var(--ads-colors-on-surface-mid-base-light, #3e3d48);
  gap: var(--ads-space-2, 0.5rem);
}
.ads-message--full .ads-message__wrapper {
  padding: var(--ads-space-4, 1rem);
  gap: var(--ads-space-4, 1rem);
}
@media screen and (min-width: 768px) {
.ads-message--full .ads-message__wrapper {
    padding: var(--ads-space-4, 1rem) var(--ads-space-8, 2rem);
}
}
@media screen and (min-width: 1280px) {
.ads-message--full .ads-message__wrapper {
    padding: var(--ads-space-4, 1rem) var(--ads-space-16, 4rem);
}
}
.ads-message--loyalty .ads-message__wrapper {
  color: var(--ads-colors-on-surface-loyalty-base-light, #3d4892);
}
.ads-message--border:not(.ads-message--full) .ads-message__wrapper {
  box-shadow: 0 0 0 var(--ads-space-px, 1px) var(--border-color);
}
.ads-message__icon-container .ads-icon {
  color: currentcolor;
}
.ads-message--neutral .ads-message__icon-container .ads-icon {
  color: var(--ads-colors-primary-base-light, #1e1852);
}
.ads-message--accent .ads-message__icon-container .ads-icon {
  color: var(--ads-colors-accent-base-light, #068484);
}
.ads-message--success:not(.ads-message--full) .ads-message__icon-container .ads-icon {
  color: var(--ads-colors-success-base-light, #117846);
}
.ads-message--warning:not(.ads-message--full) .ads-message__icon-container .ads-icon {
  color: var(--ads-colors-warning-base-light, #965600);
}
.ads-message--danger .ads-message__icon-container .ads-icon {
  color: var(--ads-colors-danger-base-light, #ba1f1a);
}
.ads-message--loyalty .ads-message__icon-container .ads-icon {
  color: var(--ads-colors-loyalty-base-light, #3d4892);
}
.ads-message__content {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.ads-message__content:has(.ads-message__message) .ads-message__title {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-message__content:has(.ads-message__message) .ads-message__title b,
.ads-message__content:has(.ads-message__message) .ads-message__title strong {
  font-weight: 600;
}
.ads-message__content:has(.ads-message__message) .ads-message__title i,
.ads-message__content:has(.ads-message__message) .ads-message__title em {
  font-style: italic;
}
.ads-message__title:not(:last-child) {
  margin-bottom: var(--ads-space-0-5, 0.125rem);
}
.ads-message__title, .ads-message__message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-message__title b,
.ads-message__title strong, .ads-message__message b,
.ads-message__message strong {
  font-weight: 600;
}
.ads-message__title i,
.ads-message__title em, .ads-message__message i,
.ads-message__message em {
  font-style: italic;
}
.ads-message__message:not(:last-child) {
  margin-bottom: var(--ads-space-2, 0.5rem);
}
.ads-message__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ads-space-0-5, 0.125rem);
}
.ads-message__links .ads-link {
  color: currentcolor;
  white-space: normal;
}
.ads-message__close-button {
  padding: 0;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-radio-group:is(fieldset) {
  min-width: 0;
  padding: 0;
  border: 0;
  margin: 0;
  text-align: start;
}
.ads-radio-group__title {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  margin-bottom: 12px;
}
.ads-radio-group__title b,
.ads-radio-group__title strong {
  font-weight: 600;
}
.ads-radio-group__title i,
.ads-radio-group__title em {
  font-style: italic;
}
.ads-radio-group__radio {
  margin: 0;
}
.ads-radio-group--column .ads-radio-group__radio:not(:last-child) {
  margin-right: 24px;
}
.ads-radio-group--column .ads-radio-group__radio:not(:last-child) [dir=rtl] {
  margin-left: 24px;
}
.ads-radio-group--row .ads-radio-group__radio:not(:last-child) {
  display: flex;
  margin-bottom: 12px;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-related-link-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}
.ads-related-link-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ads-related-link-section__header .ads-link {
  justify-content: flex-end;
}
.ads-related-link-section__title {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  margin: 0;
}
.ads-related-link-section__title b,
.ads-related-link-section__title strong {
  font-weight: 600;
}
.ads-related-link-section__title i,
.ads-related-link-section__title em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.ads-related-link-section__title {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.ads-related-link-section__content {
  display: grid;
  gap: 24px;
}
@media screen and (min-width: 768px) {
.ads-related-link-section__content {
    grid-template-columns: repeat(3, auto);
}
}
.ads-related-link-section__content .ads-link {
  width: auto;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-selector {
  position: relative;
  display: flex;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  padding: var(--ads-space-4, 1rem);
  border-radius: var(--ads-radii-md, 0.375rem);
  background-color: var(--ads-colors-surface-base-light, #fff);
  box-shadow: inset 0 0 0 var(--ads-space-px, 1px) var(--ads-colors-outline-low-base-light, #dadadd);
  outline-offset: var(--ads-space-0-5, 0.125rem);
  row-gap: var(--ads-space-3, 0.75rem);
  transition: border-color var(--ads-transition-duration-fast, 150ms);
}
.ads-selector--selected {
  box-shadow: inset 0 0 0 var(--ads-space-0-5, 0.125rem) var(--ads-colors-accent-base-light, #068484);
}
.ads-selector--size-small {
  padding: var(--ads-space-2, 0.5rem);
}
.ads-selector--slot:has(input:focus-visible) {
  outline: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
}
.ads-selector--radio, .ads-selector--checkbox {
  justify-content: start;
}
.ads-selector:not(:has(input:disabled)) {
  cursor: pointer;
}
.ads-selector:not(:has(input:disabled)) * {
  cursor: pointer;
}
.ads-selector:has(input:disabled) {
  background-color: var(--ads-colors-disabled-low-base-light, #f4f4f5);
  box-shadow: 0 0 0 var(--ads-space-px, 1px) var(--ads-colors-outline-low-base-light, #dadadd);
  cursor: not-allowed;
}
.ads-selector:has(input:disabled) * {
  cursor: not-allowed;
}
.ads-selector:has(input:disabled) .ads-selector__label,
.ads-selector:has(input:disabled) .ads-selector__indicator {
  color: var(--ads-colors-text-disabled-base-light, #8b8a93);
}
.ads-selector:hover:not(:has(input:disabled)):not(.ads-selector--selected) {
  box-shadow: inset 0 0 0 var(--ads-space-px, 1px) #575661;
}
.ads-selector__checkbox {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--ads-sizes-full, 100%);
  height: var(--ads-sizes-full, 100%);
  margin: 0;
}
.ads-selector__label {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  color: var(--ads-colors-on-surface-mid-base-light, #3e3d48);
  column-gap: var(--ads-space-2, 0.5rem);
  transition: color var(--ads-transition-duration-fast, 150ms);
}
.ads-selector__label b,
.ads-selector__label strong {
  font-weight: 600;
}
.ads-selector__label i,
.ads-selector__label em {
  font-style: italic;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-selector-group {
  display: flex;
  flex-flow: column wrap;
  column-gap: 24px;
}
.ads-selector-group:is(fieldset) {
  min-width: 0;
  padding: 0;
  border: 0;
  margin: 0;
  text-align: start;
}
.ads-selector-group__title {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  margin-bottom: 12px;
}
.ads-selector-group__title b,
.ads-selector-group__title strong {
  font-weight: 600;
}
.ads-selector-group__title i,
.ads-selector-group__title em {
  font-style: italic;
}
.ads-selector-group__label-optional {
  color: var(--ads-colors-on-surface-low-base-light, #6f6e77);
}
.ads-selector-group__selector-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ads-space-2, 0.5rem);
}
.ads-selector-group__selector {
  margin: 0;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-textarea {
  resize: none;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-toggle__input {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
}
.ads-toggle__input:focus-visible + .ads-toggle__label::before {
  outline: 2px solid #3470df;
  outline-offset: 1px;
}
.ads-toggle__label {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  --toggle-top: var(--ads-sizes-1, 0.25rem);
  --toggle-left: var(--ads-sizes-1, 0.25rem);
  --toggle-right: unset;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: pointer;
  gap: var(--ads-space-2, 0.5rem);
  white-space: normal;
}
.ads-toggle__label b,
.ads-toggle__label strong {
  font-weight: 600;
}
.ads-toggle__label i,
.ads-toggle__label em {
  font-style: italic;
}
.ads-toggle--position-end .ads-toggle__label {
  --toggle-left: unset;
  --toggle-right: calc(var(--ads-sizes-1, 0.25rem) + var(--bc6681cc-toggleDimensions));
  flex-direction: row-reverse;
}
.ads-toggle--size-small .ads-toggle__label {
  --toggle-top: 3px;
}
.ads-toggle__label:has(+ .ads-toggle__description) {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-toggle__label:has(+ .ads-toggle__description) b,
.ads-toggle__label:has(+ .ads-toggle__description) strong {
  font-weight: 600;
}
.ads-toggle__label:has(+ .ads-toggle__description) i,
.ads-toggle__label:has(+ .ads-toggle__description) em {
  font-style: italic;
}
.ads-toggle__label::before, .ads-toggle__label::after {
  border-radius: 25px;
  content: "";
  transition: all 0.15s ease-in-out;
}
.ads-toggle__label::before {
  display: inline-block;
  width: var(--bc6681cc-inputSize\.w);
  min-width: var(--bc6681cc-inputSize\.w);
  height: var(--bc6681cc-inputSize\.h);
  box-sizing: border-box;
  border: 1px solid #1e1852;
  background-color: #fff;
}
.ads-toggle__label::after {
  position: absolute;
  top: var(--toggle-top);
  right: var(--toggle-right);
  left: var(--toggle-left);
  width: var(--bc6681cc-toggleDimensions);
  height: var(--bc6681cc-toggleDimensions);
  background: #1e1852;
  background-image: url("./off-adb1973a.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1rem;
}
[dir=rtl] .ads-toggle__label::after {
  right: var(--toggle-left);
  left: var(--toggle-right);
}
[dir=rtl] [type=checkbox]:checked + .ads-toggle__label::after {
  transform: translateX(-100%);
}
[type=checkbox]:checked + .ads-toggle__label::before {
  border: 1px solid transparent;
  background-color: #068484;
}
[type=checkbox]:checked + .ads-toggle__label:hover::before {
  background-color: #007576;
}
[type=checkbox]:checked + .ads-toggle__label::after {
  background-color: #fff;
  background-image: url("./on-e09bf737.svg");
  transform: translateX(100%);
}
.ads-toggle__label-text {
  display: flex;
  flex-direction: column;
  align-self: center;
  text-align: start;
}
.ads-toggle__label-text:has(.ads-toggle__description) {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-toggle__label-text:has(.ads-toggle__description) b,
.ads-toggle__label-text:has(.ads-toggle__description) strong {
  font-weight: 600;
}
.ads-toggle__label-text:has(.ads-toggle__description) i,
.ads-toggle__label-text:has(.ads-toggle__description) em {
  font-style: italic;
}
.ads-toggle__description {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-toggle__description b,
.ads-toggle__description strong {
  font-weight: 600;
}
.ads-toggle__description i,
.ads-toggle__description em {
  font-style: italic;
}
.ads-toggle--inverse {
  color: #fff;
}
.ads-toggle--inverse .ads-toggle__input:focus-visible + .ads-toggle__label::before {
  outline: 2px solid #fff;
}
.ads-toggle--size-small .ads-toggle__description {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-toggle--size-small .ads-toggle__description b,
.ads-toggle--size-small .ads-toggle__description strong {
  font-weight: 600;
}
.ads-toggle--size-small .ads-toggle__description i,
.ads-toggle--size-small .ads-toggle__description em {
  font-style: italic;
}
.ads-toggle--size-small .ads-toggle__label::after {
  background-size: calc(1rem - var(--toggle-top));
}
.ads-toggle--disabled .ads-toggle__label::before {
  border: 1px solid #dadadd;
  background-color: #dadadd;
}
.ads-toggle--disabled [type=checkbox] + .ads-toggle__label::after {
  background-blend-mode: exclusion;
  background-color: #fff;
}
.ads-toggle--disabled [type=checkbox]:checked + .ads-toggle__label::after {
  background-blend-mode: luminosity;
}
.ads-toggle--disabled [type=checkbox]:checked + .ads-toggle__label::before {
  background-color: #dadadd;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-icon {
  display: inline-flex;
  align-items: center;
}
.ads-icon > svg {
  width: 1em;
  height: 1em;
}
.ads-icon--9 {
  font-size: 9px;
}
.ads-icon--18 {
  font-size: 18px;
}
.ads-icon--24 {
  font-size: 24px;
}
.ads-icon--36 {
  font-size: 36px;
}
.ads-icon--48 {
  font-size: 48px;
}
.ads-icon--56 {
  font-size: 56px;
}
.ads-icon--64 {
  font-size: 64px;
}
.ads-icon--72 {
  font-size: 72px;
}
.ads-icon--color-text-heading {
  color: #252339;
}
.ads-icon--color-text-body {
  color: #3e3d48;
}
.ads-icon--color-text-muted {
  color: #8b8a93;
}
.ads-icon--color-text-primary {
  color: #068484;
}
.ads-icon--color-text-inverse {
  color: #fff;
}
.ads-icon--color-functional {
  color: #8b8a93;
}
.ads-icon--color-success {
  color: #117846;
}
.ads-icon--color-danger {
  color: #ba1f1a;
}
.ads-icon--color-brand {
  color: #1e1852;
}
.ads-icon--fill-currentColor svg > * {
  fill: currentcolor;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.ads-badge {
  position: relative;
  display: inline-flex;
  width: var(--AdsBadgeWidth, var(--ads-sizes-max, 100%));
  flex-flow: row wrap;
  align-items: center;
  margin: 0;
  gap: var(--AdsBadgeGap, var(--ads-sizes-1, 0.25rem));
}
.ads-badge__label {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-badge__label b,
.ads-badge__label strong {
  font-weight: 600;
}
.ads-badge__label i,
.ads-badge__label em {
  font-style: italic;
}
.ads-badge--size-small {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-0-5, 0.125rem) var(--ads-space-2, 0.5rem);
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  gap: var(--AdsBadgeGap, var(--ads-sizes-0-5, 0.125rem));
}
.ads-badge--size-small b,
.ads-badge--size-small strong {
  font-weight: 600;
}
.ads-badge--size-small i,
.ads-badge--size-small em {
  font-style: italic;
}
.ads-badge--size-small .ads-badge__label {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-badge--size-small .ads-badge__label b,
.ads-badge--size-small .ads-badge__label strong {
  font-weight: 600;
}
.ads-badge--size-small .ads-badge__label i,
.ads-badge--size-small .ads-badge__label em {
  font-style: italic;
}
.ads-badge--default {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-badge--default b,
.ads-badge--default strong {
  font-weight: 600;
}
.ads-badge--default i,
.ads-badge--default em {
  font-style: italic;
}
.ads-badge--default.ads-badge--type-default {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-surface-container-min-base-light, #ffffff);
  color: var(--ads-colors-primary-base-light, #1e1852);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
  border: var(--ads-borders-1px, 1px solid) var(--ads-colors-primary-base-light, #1e1852);
}
.ads-badge--default.ads-badge--type-default .ads-icon {
  color: var(--ads-colors-primary-base-light, #1e1852);
}
.ads-badge--default.ads-badge--type-default .ads-icon {
  color: var(--ads-colors-primary-base-light, #1e1852);
}
.ads-badge--default.ads-badge--type-highlight {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-primary-base-light, #1e1852);
  color: var(--ads-colors-on-primary-base-light, #ffffff);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--default.ads-badge--type-highlight .ads-icon {
  color: var(--ads-colors-on-primary-base-light, #ffffff);
}
.ads-badge--default.ads-badge--type-highlight::before {
  border: none;
}
.ads-badge--default.ads-badge--type-light {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-surface-container-min-base-light, #ffffff);
  color: var(--ads-colors-primary-base-light, #1e1852);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--default.ads-badge--type-light .ads-icon {
  color: var(--ads-colors-primary-base-light, #1e1852);
}
.ads-badge--default.ads-badge--type-light .ads-icon {
  color: var(--ads-colors-primary-base-light, #1e1852);
}
.ads-badge--default.ads-badge--type-light::before {
  border: none;
}
.ads-badge--default.ads-badge--size-small {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-0-5, 0.125rem) var(--ads-space-2, 0.5rem);
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-badge--default.ads-badge--size-small b,
.ads-badge--default.ads-badge--size-small strong {
  font-weight: 600;
}
.ads-badge--default.ads-badge--size-small i,
.ads-badge--default.ads-badge--size-small em {
  font-style: italic;
}
.ads-badge--neutral {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-badge--neutral b,
.ads-badge--neutral strong {
  font-weight: 600;
}
.ads-badge--neutral i,
.ads-badge--neutral em {
  font-style: italic;
}
.ads-badge--neutral.ads-badge--type-default {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-surface-container-low-base-light, #f4f4f5);
  color: var(--ads-colors-on-surface-mid-base-light, #3e3d48);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
  border: var(--ads-borders-1px, 1px solid) var(--ads-colors-outline-low-base-light, #dadadd);
}
.ads-badge--neutral.ads-badge--type-default .ads-icon {
  color: var(--ads-colors-on-surface-mid-base-light, #3e3d48);
}
.ads-badge--neutral.ads-badge--type-default .ads-icon {
  color: var(--ads-colors-primary-base-light, #1e1852);
}
.ads-badge--neutral.ads-badge--type-highlight {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-bg-inverse-base-light, #6f6e77);
  color: var(--ads-colors-on-inverse-base-light, #ffffff);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--neutral.ads-badge--type-highlight .ads-icon {
  color: var(--ads-colors-on-inverse-base-light, #ffffff);
}
.ads-badge--neutral.ads-badge--type-highlight::before {
  border: none;
}
.ads-badge--neutral.ads-badge--type-light {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-surface-container-min-base-light, #ffffff);
  color: var(--ads-colors-on-surface-mid-base-light, #3e3d48);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--neutral.ads-badge--type-light .ads-icon {
  color: var(--ads-colors-on-surface-mid-base-light, #3e3d48);
}
.ads-badge--neutral.ads-badge--type-light .ads-icon {
  color: var(--ads-colors-primary-base-light, #1e1852);
}
.ads-badge--neutral.ads-badge--type-light::before {
  border: none;
}
.ads-badge--neutral.ads-badge--size-small {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-0-5, 0.125rem) var(--ads-space-2, 0.5rem);
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-badge--neutral.ads-badge--size-small b,
.ads-badge--neutral.ads-badge--size-small strong {
  font-weight: 600;
}
.ads-badge--neutral.ads-badge--size-small i,
.ads-badge--neutral.ads-badge--size-small em {
  font-style: italic;
}
.ads-badge--loyalty {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-badge--loyalty b,
.ads-badge--loyalty strong {
  font-weight: 600;
}
.ads-badge--loyalty i,
.ads-badge--loyalty em {
  font-style: italic;
}
.ads-badge--loyalty.ads-badge--type-default {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-surface-loyalty-base-light, #eaedf5);
  color: var(--ads-colors-on-surface-loyalty-base-light, #3d4892);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--loyalty.ads-badge--type-default .ads-icon {
  color: var(--ads-colors-on-surface-loyalty-base-light, #3d4892);
}
.ads-badge--loyalty.ads-badge--type-highlight {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-loyalty-base-light, #3d4892);
  color: var(--ads-colors-on-loyalty-base-light, #ffffff);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--loyalty.ads-badge--type-highlight .ads-icon {
  color: var(--ads-colors-on-loyalty-base-light, #ffffff);
}
.ads-badge--loyalty.ads-badge--type-light {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-surface-container-min-base-light, #ffffff);
  color: var(--ads-colors-loyalty-base-light, #3d4892);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--loyalty.ads-badge--type-light .ads-icon {
  color: var(--ads-colors-loyalty-base-light, #3d4892);
}
.ads-badge--loyalty.ads-badge--size-small {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-0-5, 0.125rem) var(--ads-space-2, 0.5rem);
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-badge--loyalty.ads-badge--size-small b,
.ads-badge--loyalty.ads-badge--size-small strong {
  font-weight: 600;
}
.ads-badge--loyalty.ads-badge--size-small i,
.ads-badge--loyalty.ads-badge--size-small em {
  font-style: italic;
}
.ads-badge--offer {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-badge--offer b,
.ads-badge--offer strong {
  font-weight: 600;
}
.ads-badge--offer i,
.ads-badge--offer em {
  font-style: italic;
}
.ads-badge--offer.ads-badge--type-default {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-offer-container-base-light, #ffe6ef);
  color: var(--ads-colors-on-offer-container-base-light, #d4024d);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--offer.ads-badge--type-default .ads-icon {
  color: var(--ads-colors-on-offer-container-base-light, #d4024d);
}
.ads-badge--offer.ads-badge--type-highlight {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-offer-base-light, #d4024d);
  color: var(--ads-colors-on-offer-base-light, #ffffff);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--offer.ads-badge--type-highlight .ads-icon {
  color: var(--ads-colors-on-offer-base-light, #ffffff);
}
.ads-badge--offer.ads-badge--type-light {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-surface-container-min-base-light, #ffffff);
  color: var(--ads-colors-offer-base-light, #d4024d);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--offer.ads-badge--type-light .ads-icon {
  color: var(--ads-colors-offer-base-light, #d4024d);
}
.ads-badge--offer.ads-badge--size-small {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-0-5, 0.125rem) var(--ads-space-2, 0.5rem);
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-badge--offer.ads-badge--size-small b,
.ads-badge--offer.ads-badge--size-small strong {
  font-weight: 600;
}
.ads-badge--offer.ads-badge--size-small i,
.ads-badge--offer.ads-badge--size-small em {
  font-style: italic;
}
.ads-badge--danger {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-badge--danger b,
.ads-badge--danger strong {
  font-weight: 600;
}
.ads-badge--danger i,
.ads-badge--danger em {
  font-style: italic;
}
.ads-badge--danger.ads-badge--type-default {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-surface-danger-base-light, #fbe6e7);
  color: var(--ads-colors-on-surface-danger-base-light, #ba1f1a);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--danger.ads-badge--type-default .ads-icon {
  color: var(--ads-colors-on-surface-danger-base-light, #ba1f1a);
}
.ads-badge--danger.ads-badge--type-default .ads-icon {
  color: var(--ads-colors-on-surface-danger-base-light, #ba1f1a);
}
.ads-badge--danger.ads-badge--type-highlight {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-danger-base-light, #ba1f1a);
  color: var(--ads-colors-on-danger-base-light, #ffffff);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--danger.ads-badge--type-highlight .ads-icon {
  color: var(--ads-colors-on-danger-base-light, #ffffff);
}
.ads-badge--danger.ads-badge--type-highlight .ads-icon {
  color: var(--ads-colors-on-danger-base-light, #ffffff);
}
.ads-badge--danger.ads-badge--type-light {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-surface-container-min-base-light, #ffffff);
  color: var(--ads-colors-danger-base-light, #ba1f1a);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--danger.ads-badge--type-light .ads-icon {
  color: var(--ads-colors-danger-base-light, #ba1f1a);
}
.ads-badge--danger.ads-badge--size-small {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-0-5, 0.125rem) var(--ads-space-2, 0.5rem);
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-badge--danger.ads-badge--size-small b,
.ads-badge--danger.ads-badge--size-small strong {
  font-weight: 600;
}
.ads-badge--danger.ads-badge--size-small i,
.ads-badge--danger.ads-badge--size-small em {
  font-style: italic;
}
.ads-badge--success {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-badge--success b,
.ads-badge--success strong {
  font-weight: 600;
}
.ads-badge--success i,
.ads-badge--success em {
  font-style: italic;
}
.ads-badge--success.ads-badge--type-default {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-surface-success-base-light, #e6f3eb);
  color: var(--ads-colors-on-surface-success-base-light, #117846);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--success.ads-badge--type-default .ads-icon {
  color: var(--ads-colors-on-surface-success-base-light, #117846);
}
.ads-badge--success.ads-badge--type-default .ads-icon {
  color: var(--ads-colors-on-surface-success-base-light, #117846);
}
.ads-badge--success.ads-badge--type-highlight {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-success-base-light, #117846);
  color: var(--ads-colors-on-success-base-light, #ffffff);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--success.ads-badge--type-highlight .ads-icon {
  color: var(--ads-colors-on-success-base-light, #ffffff);
}
.ads-badge--success.ads-badge--type-highlight .ads-icon {
  color: var(--ads-colors-on-success-base-light, #ffffff);
}
.ads-badge--success.ads-badge--type-light {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-surface-container-min-base-light, #ffffff);
  color: var(--ads-colors-success-base-light, #117846);
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--success.ads-badge--type-light .ads-icon {
  color: var(--ads-colors-success-base-light, #117846);
}
.ads-badge--success.ads-badge--size-small {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-0-5, 0.125rem) var(--ads-space-2, 0.5rem);
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-badge--success.ads-badge--size-small b,
.ads-badge--success.ads-badge--size-small strong {
  font-weight: 600;
}
.ads-badge--success.ads-badge--size-small i,
.ads-badge--success.ads-badge--size-small em {
  font-style: italic;
}
.ads-badge--warning {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-badge--warning b,
.ads-badge--warning strong {
  font-weight: 600;
}
.ads-badge--warning i,
.ads-badge--warning em {
  font-style: italic;
}
.ads-badge--warning.ads-badge--type-default {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: #fceec0;
  color: #3e3d48;
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--warning.ads-badge--type-default .ads-icon {
  color: #3e3d48;
}
.ads-badge--warning.ads-badge--type-default .ads-icon {
  color: #252339;
}
.ads-badge--warning.ads-badge--type-highlight {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: #f2d166;
  color: #3e3d48;
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--warning.ads-badge--type-highlight .ads-icon {
  color: #3e3d48;
}
.ads-badge--warning.ads-badge--type-highlight .ads-icon {
  color: #252339;
}
.ads-badge--warning.ads-badge--type-light {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ads-colors-surface-container-min-base-light, #ffffff);
  color: #3e3d48;
  padding: var(--ads-space-2, 0.5rem);
}
.ads-badge--warning.ads-badge--type-light .ads-icon {
  color: #3e3d48;
}
.ads-badge--warning.ads-badge--size-small {
  min-width: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border-radius: var(--ads-radii-base, 0.25rem);
  padding: var(--ads-space-0-5, 0.125rem) var(--ads-space-2, 0.5rem);
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ads-badge--warning.ads-badge--size-small b,
.ads-badge--warning.ads-badge--size-small strong {
  font-weight: 600;
}
.ads-badge--warning.ads-badge--size-small i,
.ads-badge--warning.ads-badge--size-small em {
  font-style: italic;
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-a9337e08] {
  color: #252339;
}
.color-text-body[data-v-a9337e08] {
  color: #3e3d48;
}
.color-text-muted[data-v-a9337e08] {
  color: #8b8a93;
}
.color-text-primary[data-v-a9337e08] {
  color: #068484;
}
.color-text-inverse[data-v-a9337e08] {
  color: #fff;
}
.color-background[data-v-a9337e08] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-a9337e08] {
  background-color: #fff;
}
.color-background-dark[data-v-a9337e08] {
  background-color: #050033;
}
.color-background-primary[data-v-a9337e08] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-a9337e08] {
  background-color: #252339;
}
.color-background-badge-light[data-v-a9337e08] {
  background-color: #544e85;
}
.color-background-modal[data-v-a9337e08] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-a9337e08] {
  display: block;
}

/* Utility */
.no-outline[data-v-a9337e08] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-a9337e08] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-a9337e08]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-a9337e08] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-a9337e08]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-a9337e08]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-a9337e08]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-a9337e08]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-a9337e08]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-a9337e08]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-a9337e08] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-a9337e08],
.ads-error-message strong[data-v-a9337e08] {
  font-weight: 600;
}
.ads-error-message i[data-v-a9337e08],
.ads-error-message em[data-v-a9337e08] {
  font-style: italic;
}
.ads-error-message p[data-v-a9337e08] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-a9337e08] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-a9337e08],
.ads-indicator strong[data-v-a9337e08] {
  font-weight: 600;
}
.ads-indicator i[data-v-a9337e08],
.ads-indicator em[data-v-a9337e08] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-a9337e08] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-a9337e08] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-a9337e08] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-a9337e08] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-a9337e08] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-a9337e08] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-a9337e08] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-a9337e08] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-a9337e08] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-a9337e08] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-a9337e08] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-a9337e08] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-a9337e08] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-a9337e08] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-a9337e08] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-a9337e08] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-a9337e08] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-a9337e08] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-a9337e08] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-a9337e08] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-a9337e08] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-a9337e08] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-a9337e08] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-a9337e08] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-a9337e08] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-a9337e08] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-a9337e08],
.expressive-heading-01 strong[data-v-a9337e08] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-a9337e08],
.expressive-heading-01 em[data-v-a9337e08] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-a9337e08] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-a9337e08] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-a9337e08] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-a9337e08],
.expressive-heading-02 strong[data-v-a9337e08] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-a9337e08],
.expressive-heading-02 em[data-v-a9337e08] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-a9337e08] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-a9337e08] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-a9337e08] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-a9337e08],
.expressive-heading-03 strong[data-v-a9337e08] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-a9337e08],
.expressive-heading-03 em[data-v-a9337e08] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-a9337e08] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-a9337e08] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-a9337e08] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-a9337e08],
.expressive-heading-04 strong[data-v-a9337e08] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-a9337e08],
.expressive-heading-04 em[data-v-a9337e08] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-a9337e08] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-a9337e08] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-a9337e08],
.expressive-heading-05 strong[data-v-a9337e08] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-a9337e08],
.expressive-heading-05 em[data-v-a9337e08] {
  font-style: italic;
}
.expressive-subheading-01[data-v-a9337e08] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-a9337e08],
.expressive-subheading-01 strong[data-v-a9337e08] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-a9337e08],
.expressive-subheading-01 em[data-v-a9337e08] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-a9337e08] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-a9337e08] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-a9337e08],
.ui-heading-01 strong[data-v-a9337e08] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-a9337e08],
.ui-heading-01 em[data-v-a9337e08] {
  font-style: italic;
}
.ui-heading-02[data-v-a9337e08] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-a9337e08],
.ui-heading-02 strong[data-v-a9337e08] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-a9337e08],
.ui-heading-02 em[data-v-a9337e08] {
  font-style: italic;
}
.ui-heading-03[data-v-a9337e08] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-a9337e08],
.ui-heading-03 strong[data-v-a9337e08] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-a9337e08],
.ui-heading-03 em[data-v-a9337e08] {
  font-style: italic;
}
.ui-body-01[data-v-a9337e08] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-a9337e08],
.ui-body-01 strong[data-v-a9337e08] {
  font-weight: 600;
}
.ui-body-01 i[data-v-a9337e08],
.ui-body-01 em[data-v-a9337e08] {
  font-style: italic;
}
.ui-body-01-strong[data-v-a9337e08] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-a9337e08],
.ui-body-01-strong strong[data-v-a9337e08] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-a9337e08],
.ui-body-01-strong em[data-v-a9337e08] {
  font-style: italic;
}
.ui-body-01-italic[data-v-a9337e08] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-a9337e08],
.ui-body-01-italic strong[data-v-a9337e08] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-a9337e08],
.ui-body-01-italic em[data-v-a9337e08] {
  font-style: italic;
}
.ui-body-02[data-v-a9337e08] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-a9337e08],
.ui-body-02 strong[data-v-a9337e08] {
  font-weight: 600;
}
.ui-body-02 i[data-v-a9337e08],
.ui-body-02 em[data-v-a9337e08] {
  font-style: italic;
}
.ui-body-02-strong[data-v-a9337e08] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-a9337e08],
.ui-body-02-strong strong[data-v-a9337e08] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-a9337e08],
.ui-body-02-strong em[data-v-a9337e08] {
  font-style: italic;
}
.ui-caption-01[data-v-a9337e08] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-a9337e08],
.ui-caption-01 strong[data-v-a9337e08] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-a9337e08],
.ui-caption-01 em[data-v-a9337e08] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-a9337e08] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-a9337e08],
.ui-caption-01-strong strong[data-v-a9337e08] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-a9337e08],
.ui-caption-01-strong em[data-v-a9337e08] {
  font-style: italic;
}
.ui-label-01[data-v-a9337e08] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-a9337e08],
.ui-label-01 strong[data-v-a9337e08] {
  font-weight: 600;
}
.ui-label-01 i[data-v-a9337e08],
.ui-label-01 em[data-v-a9337e08] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-a9337e08] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-a9337e08] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-a9337e08] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-a9337e08 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-a9337e08 {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-a9337e08 {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-a9337e08 {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-a9337e08],
.fade-leave-active[data-v-a9337e08] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-a9337e08],
.fade-leave-to[data-v-a9337e08] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-a9337e08],
.fade-slide-vertical-leave-to[data-v-a9337e08] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-a9337e08],
.fade-slide-vertical-leave-from[data-v-a9337e08] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-a9337e08],
.fade-slide-vertical-leave-active[data-v-a9337e08] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-a9337e08],[data-v-a9337e08]::before,[data-v-a9337e08]::after {
  box-sizing: border-box;
}
html[data-v-a9337e08],
body[data-v-a9337e08],
div[data-v-a9337e08],
span[data-v-a9337e08],
object[data-v-a9337e08],
iframe[data-v-a9337e08],
h1[data-v-a9337e08],
h2[data-v-a9337e08],
h3[data-v-a9337e08],
h4[data-v-a9337e08],
h5[data-v-a9337e08],
h6[data-v-a9337e08],
p[data-v-a9337e08],
blockquote[data-v-a9337e08],
pre[data-v-a9337e08],
abbr[data-v-a9337e08],
address[data-v-a9337e08],
cite[data-v-a9337e08],
code[data-v-a9337e08],
del[data-v-a9337e08],
dfn[data-v-a9337e08],
em[data-v-a9337e08],
img[data-v-a9337e08],
ins[data-v-a9337e08],
kbd[data-v-a9337e08],
q[data-v-a9337e08],
samp[data-v-a9337e08],
small[data-v-a9337e08],
strong[data-v-a9337e08],
sub[data-v-a9337e08],
sup[data-v-a9337e08],
var[data-v-a9337e08],
b[data-v-a9337e08],
i[data-v-a9337e08],
dl[data-v-a9337e08],
dt[data-v-a9337e08],
dd[data-v-a9337e08],
ol[data-v-a9337e08],
ul[data-v-a9337e08],
li[data-v-a9337e08],
fieldset[data-v-a9337e08],
form[data-v-a9337e08],
label[data-v-a9337e08],
legend[data-v-a9337e08],
table[data-v-a9337e08],
caption[data-v-a9337e08],
tbody[data-v-a9337e08],
tfoot[data-v-a9337e08],
thead[data-v-a9337e08],
tr[data-v-a9337e08],
th[data-v-a9337e08],
td[data-v-a9337e08],
article[data-v-a9337e08],
aside[data-v-a9337e08],
dialog[data-v-a9337e08],
figure[data-v-a9337e08],
footer[data-v-a9337e08],
header[data-v-a9337e08],
hgroup[data-v-a9337e08],
menu[data-v-a9337e08],
nav[data-v-a9337e08],
section[data-v-a9337e08],
time[data-v-a9337e08],
mark[data-v-a9337e08],
audio[data-v-a9337e08],
video[data-v-a9337e08] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-a9337e08],
aside[data-v-a9337e08],
dialog[data-v-a9337e08],
figure[data-v-a9337e08],
footer[data-v-a9337e08],
header[data-v-a9337e08],
hgroup[data-v-a9337e08],
nav[data-v-a9337e08],
section[data-v-a9337e08],
main[data-v-a9337e08] {
  display: block;
}
blockquote[data-v-a9337e08],
q[data-v-a9337e08] {
  quotes: none;
}
blockquote[data-v-a9337e08]::before, blockquote[data-v-a9337e08]::after,
q[data-v-a9337e08]::before,
q[data-v-a9337e08]::after {
  content: none;
}
ul[data-v-a9337e08],
ol[data-v-a9337e08] {
  list-style: none;
}
table[data-v-a9337e08] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-a9337e08] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-a9337e08] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.story-background[data-v-a9337e08] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1em;
  border-radius: 0.375rem;
  background-color: #fff;
  color: #050033;
  gap: 1em;
}
.story-background--row[data-v-a9337e08] {
  flex-direction: row;
}
.story-background--inverse[data-v-a9337e08] {
  background-color: #050033;
  color: #fff;
}
.ads-chip__container[data-v-35c01c62] {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.content-dropdown {
  display: flex;
  flex-direction: column;
  padding: var(--ads-space-4, 1rem);
  background-color: var(--ads-colors-surface-base-light, #fff);
  gap: var(--ads-space-4, 1rem);
}
/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.using-import {
  font-family: "Courier New";
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.using-import {
  font-family: "Courier New";
}
.additionnal-style {
  color: red;
}
/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-6ff6c0ad] {
  color: #252339;
}
.color-text-body[data-v-6ff6c0ad] {
  color: #3e3d48;
}
.color-text-muted[data-v-6ff6c0ad] {
  color: #8b8a93;
}
.color-text-primary[data-v-6ff6c0ad] {
  color: #068484;
}
.color-text-inverse[data-v-6ff6c0ad] {
  color: #fff;
}
.color-background[data-v-6ff6c0ad] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-6ff6c0ad] {
  background-color: #fff;
}
.color-background-dark[data-v-6ff6c0ad] {
  background-color: #050033;
}
.color-background-primary[data-v-6ff6c0ad] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-6ff6c0ad] {
  background-color: #252339;
}
.color-background-badge-light[data-v-6ff6c0ad] {
  background-color: #544e85;
}
.color-background-modal[data-v-6ff6c0ad] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-6ff6c0ad] {
  display: block;
}

/* Utility */
.no-outline[data-v-6ff6c0ad] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-6ff6c0ad] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-6ff6c0ad]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-6ff6c0ad] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-6ff6c0ad]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-6ff6c0ad]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-6ff6c0ad]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-6ff6c0ad]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-6ff6c0ad]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-6ff6c0ad]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-6ff6c0ad],
.ads-error-message strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.ads-error-message i[data-v-6ff6c0ad],
.ads-error-message em[data-v-6ff6c0ad] {
  font-style: italic;
}
.ads-error-message p[data-v-6ff6c0ad] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-6ff6c0ad],
.ads-indicator strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.ads-indicator i[data-v-6ff6c0ad],
.ads-indicator em[data-v-6ff6c0ad] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-6ff6c0ad] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-6ff6c0ad] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-6ff6c0ad] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-6ff6c0ad] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-6ff6c0ad] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-6ff6c0ad] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-6ff6c0ad] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-6ff6c0ad] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-6ff6c0ad] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-6ff6c0ad] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-6ff6c0ad] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-6ff6c0ad] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-6ff6c0ad] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-6ff6c0ad] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-6ff6c0ad] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-6ff6c0ad] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-6ff6c0ad] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-6ff6c0ad] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-6ff6c0ad] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-6ff6c0ad] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-6ff6c0ad] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-6ff6c0ad] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-6ff6c0ad] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-6ff6c0ad] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-6ff6c0ad] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-6ff6c0ad],
.expressive-heading-01 strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-6ff6c0ad],
.expressive-heading-01 em[data-v-6ff6c0ad] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-6ff6c0ad] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-6ff6c0ad] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-6ff6c0ad],
.expressive-heading-02 strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-6ff6c0ad],
.expressive-heading-02 em[data-v-6ff6c0ad] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-6ff6c0ad] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-6ff6c0ad] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-6ff6c0ad],
.expressive-heading-03 strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-6ff6c0ad],
.expressive-heading-03 em[data-v-6ff6c0ad] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-6ff6c0ad] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-6ff6c0ad] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-6ff6c0ad],
.expressive-heading-04 strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-6ff6c0ad],
.expressive-heading-04 em[data-v-6ff6c0ad] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-6ff6c0ad] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-6ff6c0ad],
.expressive-heading-05 strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-6ff6c0ad],
.expressive-heading-05 em[data-v-6ff6c0ad] {
  font-style: italic;
}
.expressive-subheading-01[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-6ff6c0ad],
.expressive-subheading-01 strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-6ff6c0ad],
.expressive-subheading-01 em[data-v-6ff6c0ad] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-6ff6c0ad] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-6ff6c0ad],
.ui-heading-01 strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-6ff6c0ad],
.ui-heading-01 em[data-v-6ff6c0ad] {
  font-style: italic;
}
.ui-heading-02[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-6ff6c0ad],
.ui-heading-02 strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-6ff6c0ad],
.ui-heading-02 em[data-v-6ff6c0ad] {
  font-style: italic;
}
.ui-heading-03[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-6ff6c0ad],
.ui-heading-03 strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-6ff6c0ad],
.ui-heading-03 em[data-v-6ff6c0ad] {
  font-style: italic;
}
.ui-body-01[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-6ff6c0ad],
.ui-body-01 strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.ui-body-01 i[data-v-6ff6c0ad],
.ui-body-01 em[data-v-6ff6c0ad] {
  font-style: italic;
}
.ui-body-01-strong[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-6ff6c0ad],
.ui-body-01-strong strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-6ff6c0ad],
.ui-body-01-strong em[data-v-6ff6c0ad] {
  font-style: italic;
}
.ui-body-01-italic[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-6ff6c0ad],
.ui-body-01-italic strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-6ff6c0ad],
.ui-body-01-italic em[data-v-6ff6c0ad] {
  font-style: italic;
}
.ui-body-02[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-6ff6c0ad],
.ui-body-02 strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.ui-body-02 i[data-v-6ff6c0ad],
.ui-body-02 em[data-v-6ff6c0ad] {
  font-style: italic;
}
.ui-body-02-strong[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-6ff6c0ad],
.ui-body-02-strong strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-6ff6c0ad],
.ui-body-02-strong em[data-v-6ff6c0ad] {
  font-style: italic;
}
.ui-caption-01[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-6ff6c0ad],
.ui-caption-01 strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-6ff6c0ad],
.ui-caption-01 em[data-v-6ff6c0ad] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-6ff6c0ad],
.ui-caption-01-strong strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-6ff6c0ad],
.ui-caption-01-strong em[data-v-6ff6c0ad] {
  font-style: italic;
}
.ui-label-01[data-v-6ff6c0ad] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-6ff6c0ad],
.ui-label-01 strong[data-v-6ff6c0ad] {
  font-weight: 600;
}
.ui-label-01 i[data-v-6ff6c0ad],
.ui-label-01 em[data-v-6ff6c0ad] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-6ff6c0ad] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-6ff6c0ad] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-6ff6c0ad] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-6ff6c0ad {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-6ff6c0ad {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-6ff6c0ad {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-6ff6c0ad {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-6ff6c0ad],
.fade-leave-active[data-v-6ff6c0ad] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-6ff6c0ad],
.fade-leave-to[data-v-6ff6c0ad] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-6ff6c0ad],
.fade-slide-vertical-leave-to[data-v-6ff6c0ad] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-6ff6c0ad],
.fade-slide-vertical-leave-from[data-v-6ff6c0ad] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-6ff6c0ad],
.fade-slide-vertical-leave-active[data-v-6ff6c0ad] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-6ff6c0ad],[data-v-6ff6c0ad]::before,[data-v-6ff6c0ad]::after {
  box-sizing: border-box;
}
html[data-v-6ff6c0ad],
body[data-v-6ff6c0ad],
div[data-v-6ff6c0ad],
span[data-v-6ff6c0ad],
object[data-v-6ff6c0ad],
iframe[data-v-6ff6c0ad],
h1[data-v-6ff6c0ad],
h2[data-v-6ff6c0ad],
h3[data-v-6ff6c0ad],
h4[data-v-6ff6c0ad],
h5[data-v-6ff6c0ad],
h6[data-v-6ff6c0ad],
p[data-v-6ff6c0ad],
blockquote[data-v-6ff6c0ad],
pre[data-v-6ff6c0ad],
abbr[data-v-6ff6c0ad],
address[data-v-6ff6c0ad],
cite[data-v-6ff6c0ad],
code[data-v-6ff6c0ad],
del[data-v-6ff6c0ad],
dfn[data-v-6ff6c0ad],
em[data-v-6ff6c0ad],
img[data-v-6ff6c0ad],
ins[data-v-6ff6c0ad],
kbd[data-v-6ff6c0ad],
q[data-v-6ff6c0ad],
samp[data-v-6ff6c0ad],
small[data-v-6ff6c0ad],
strong[data-v-6ff6c0ad],
sub[data-v-6ff6c0ad],
sup[data-v-6ff6c0ad],
var[data-v-6ff6c0ad],
b[data-v-6ff6c0ad],
i[data-v-6ff6c0ad],
dl[data-v-6ff6c0ad],
dt[data-v-6ff6c0ad],
dd[data-v-6ff6c0ad],
ol[data-v-6ff6c0ad],
ul[data-v-6ff6c0ad],
li[data-v-6ff6c0ad],
fieldset[data-v-6ff6c0ad],
form[data-v-6ff6c0ad],
label[data-v-6ff6c0ad],
legend[data-v-6ff6c0ad],
table[data-v-6ff6c0ad],
caption[data-v-6ff6c0ad],
tbody[data-v-6ff6c0ad],
tfoot[data-v-6ff6c0ad],
thead[data-v-6ff6c0ad],
tr[data-v-6ff6c0ad],
th[data-v-6ff6c0ad],
td[data-v-6ff6c0ad],
article[data-v-6ff6c0ad],
aside[data-v-6ff6c0ad],
dialog[data-v-6ff6c0ad],
figure[data-v-6ff6c0ad],
footer[data-v-6ff6c0ad],
header[data-v-6ff6c0ad],
hgroup[data-v-6ff6c0ad],
menu[data-v-6ff6c0ad],
nav[data-v-6ff6c0ad],
section[data-v-6ff6c0ad],
time[data-v-6ff6c0ad],
mark[data-v-6ff6c0ad],
audio[data-v-6ff6c0ad],
video[data-v-6ff6c0ad] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-6ff6c0ad],
aside[data-v-6ff6c0ad],
dialog[data-v-6ff6c0ad],
figure[data-v-6ff6c0ad],
footer[data-v-6ff6c0ad],
header[data-v-6ff6c0ad],
hgroup[data-v-6ff6c0ad],
nav[data-v-6ff6c0ad],
section[data-v-6ff6c0ad],
main[data-v-6ff6c0ad] {
  display: block;
}
blockquote[data-v-6ff6c0ad],
q[data-v-6ff6c0ad] {
  quotes: none;
}
blockquote[data-v-6ff6c0ad]::before, blockquote[data-v-6ff6c0ad]::after,
q[data-v-6ff6c0ad]::before,
q[data-v-6ff6c0ad]::after {
  content: none;
}
ul[data-v-6ff6c0ad],
ol[data-v-6ff6c0ad] {
  list-style: none;
}
table[data-v-6ff6c0ad] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-6ff6c0ad] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-6ff6c0ad] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.form-control[data-v-6ff6c0ad] {
  display: flex;
  margin-bottom: 32px;
  gap: 16px;
}
.form-control .ads-input[data-v-6ff6c0ad] {
  flex: 1;
}
.container[data-v-0bfc1945] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 1rem;
  background-color: #f8f0e5;
  color: #333;
}
.skip-content[data-v-0bfc1945] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 1rem;
  background-color: #e8f3ff;
  color: #333;
}

.container[data-v-68b381dd] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 1rem;
  background-color: #f8f0e5;
  color: #333;
}
.skip-content[data-v-68b381dd] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 1rem;
  background-color: #e8f3ff;
  color: #333;
}

.container[data-v-e4c9991a] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 1rem;
  background-color: #f8f0e5;
  color: #333;
}
.skip-content[data-v-e4c9991a] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 1rem;
  background-color: #e8f3ff;
  color: #333;
}

.accordion-text-trigger {
  display: flex;
  align-items: center;
  gap: var(--ads-space-2, 0.5rem);
}
@keyframes shake {
0% {
    transform: rotate(-5deg);
}
100% {
    transform: rotate(5deg);
}
}
/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-62f7bb75] {
  color: #252339;
}
.color-text-body[data-v-62f7bb75] {
  color: #3e3d48;
}
.color-text-muted[data-v-62f7bb75] {
  color: #8b8a93;
}
.color-text-primary[data-v-62f7bb75] {
  color: #068484;
}
.color-text-inverse[data-v-62f7bb75] {
  color: #fff;
}
.color-background[data-v-62f7bb75] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-62f7bb75] {
  background-color: #fff;
}
.color-background-dark[data-v-62f7bb75] {
  background-color: #050033;
}
.color-background-primary[data-v-62f7bb75] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-62f7bb75] {
  background-color: #252339;
}
.color-background-badge-light[data-v-62f7bb75] {
  background-color: #544e85;
}
.color-background-modal[data-v-62f7bb75] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-62f7bb75] {
  display: block;
}

/* Utility */
.no-outline[data-v-62f7bb75] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-62f7bb75] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-62f7bb75]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-62f7bb75] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-62f7bb75]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-62f7bb75]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-62f7bb75]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-62f7bb75]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-62f7bb75]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-62f7bb75]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-62f7bb75] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-62f7bb75],
.ads-error-message strong[data-v-62f7bb75] {
  font-weight: 600;
}
.ads-error-message i[data-v-62f7bb75],
.ads-error-message em[data-v-62f7bb75] {
  font-style: italic;
}
.ads-error-message p[data-v-62f7bb75] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-62f7bb75] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-62f7bb75],
.ads-indicator strong[data-v-62f7bb75] {
  font-weight: 600;
}
.ads-indicator i[data-v-62f7bb75],
.ads-indicator em[data-v-62f7bb75] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-62f7bb75] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-62f7bb75] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-62f7bb75] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-62f7bb75] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-62f7bb75] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-62f7bb75] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-62f7bb75] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-62f7bb75] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-62f7bb75] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-62f7bb75] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-62f7bb75] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-62f7bb75] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-62f7bb75] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-62f7bb75] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-62f7bb75] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-62f7bb75] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-62f7bb75] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-62f7bb75] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-62f7bb75] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-62f7bb75] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-62f7bb75] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-62f7bb75] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-62f7bb75] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-62f7bb75] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-62f7bb75] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-62f7bb75] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-62f7bb75],
.expressive-heading-01 strong[data-v-62f7bb75] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-62f7bb75],
.expressive-heading-01 em[data-v-62f7bb75] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-62f7bb75] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-62f7bb75] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-62f7bb75] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-62f7bb75],
.expressive-heading-02 strong[data-v-62f7bb75] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-62f7bb75],
.expressive-heading-02 em[data-v-62f7bb75] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-62f7bb75] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-62f7bb75] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-62f7bb75] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-62f7bb75],
.expressive-heading-03 strong[data-v-62f7bb75] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-62f7bb75],
.expressive-heading-03 em[data-v-62f7bb75] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-62f7bb75] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-62f7bb75] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-62f7bb75] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-62f7bb75],
.expressive-heading-04 strong[data-v-62f7bb75] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-62f7bb75],
.expressive-heading-04 em[data-v-62f7bb75] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-62f7bb75] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-62f7bb75] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-62f7bb75],
.expressive-heading-05 strong[data-v-62f7bb75] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-62f7bb75],
.expressive-heading-05 em[data-v-62f7bb75] {
  font-style: italic;
}
.expressive-subheading-01[data-v-62f7bb75] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-62f7bb75],
.expressive-subheading-01 strong[data-v-62f7bb75] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-62f7bb75],
.expressive-subheading-01 em[data-v-62f7bb75] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-62f7bb75] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-62f7bb75] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-62f7bb75],
.ui-heading-01 strong[data-v-62f7bb75] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-62f7bb75],
.ui-heading-01 em[data-v-62f7bb75] {
  font-style: italic;
}
.ui-heading-02[data-v-62f7bb75] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-62f7bb75],
.ui-heading-02 strong[data-v-62f7bb75] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-62f7bb75],
.ui-heading-02 em[data-v-62f7bb75] {
  font-style: italic;
}
.ui-heading-03[data-v-62f7bb75] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-62f7bb75],
.ui-heading-03 strong[data-v-62f7bb75] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-62f7bb75],
.ui-heading-03 em[data-v-62f7bb75] {
  font-style: italic;
}
.ui-body-01[data-v-62f7bb75] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-62f7bb75],
.ui-body-01 strong[data-v-62f7bb75] {
  font-weight: 600;
}
.ui-body-01 i[data-v-62f7bb75],
.ui-body-01 em[data-v-62f7bb75] {
  font-style: italic;
}
.ui-body-01-strong[data-v-62f7bb75] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-62f7bb75],
.ui-body-01-strong strong[data-v-62f7bb75] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-62f7bb75],
.ui-body-01-strong em[data-v-62f7bb75] {
  font-style: italic;
}
.ui-body-01-italic[data-v-62f7bb75] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-62f7bb75],
.ui-body-01-italic strong[data-v-62f7bb75] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-62f7bb75],
.ui-body-01-italic em[data-v-62f7bb75] {
  font-style: italic;
}
.ui-body-02[data-v-62f7bb75] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-62f7bb75],
.ui-body-02 strong[data-v-62f7bb75] {
  font-weight: 600;
}
.ui-body-02 i[data-v-62f7bb75],
.ui-body-02 em[data-v-62f7bb75] {
  font-style: italic;
}
.ui-body-02-strong[data-v-62f7bb75] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-62f7bb75],
.ui-body-02-strong strong[data-v-62f7bb75] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-62f7bb75],
.ui-body-02-strong em[data-v-62f7bb75] {
  font-style: italic;
}
.ui-caption-01[data-v-62f7bb75] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-62f7bb75],
.ui-caption-01 strong[data-v-62f7bb75] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-62f7bb75],
.ui-caption-01 em[data-v-62f7bb75] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-62f7bb75] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-62f7bb75],
.ui-caption-01-strong strong[data-v-62f7bb75] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-62f7bb75],
.ui-caption-01-strong em[data-v-62f7bb75] {
  font-style: italic;
}
.ui-label-01[data-v-62f7bb75] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-62f7bb75],
.ui-label-01 strong[data-v-62f7bb75] {
  font-weight: 600;
}
.ui-label-01 i[data-v-62f7bb75],
.ui-label-01 em[data-v-62f7bb75] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-62f7bb75] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-62f7bb75] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-62f7bb75] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-62f7bb75 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-62f7bb75 {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-62f7bb75 {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-62f7bb75 {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-62f7bb75],
.fade-leave-active[data-v-62f7bb75] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-62f7bb75],
.fade-leave-to[data-v-62f7bb75] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-62f7bb75],
.fade-slide-vertical-leave-to[data-v-62f7bb75] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-62f7bb75],
.fade-slide-vertical-leave-from[data-v-62f7bb75] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-62f7bb75],
.fade-slide-vertical-leave-active[data-v-62f7bb75] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-62f7bb75],[data-v-62f7bb75]::before,[data-v-62f7bb75]::after {
  box-sizing: border-box;
}
html[data-v-62f7bb75],
body[data-v-62f7bb75],
div[data-v-62f7bb75],
span[data-v-62f7bb75],
object[data-v-62f7bb75],
iframe[data-v-62f7bb75],
h1[data-v-62f7bb75],
h2[data-v-62f7bb75],
h3[data-v-62f7bb75],
h4[data-v-62f7bb75],
h5[data-v-62f7bb75],
h6[data-v-62f7bb75],
p[data-v-62f7bb75],
blockquote[data-v-62f7bb75],
pre[data-v-62f7bb75],
abbr[data-v-62f7bb75],
address[data-v-62f7bb75],
cite[data-v-62f7bb75],
code[data-v-62f7bb75],
del[data-v-62f7bb75],
dfn[data-v-62f7bb75],
em[data-v-62f7bb75],
img[data-v-62f7bb75],
ins[data-v-62f7bb75],
kbd[data-v-62f7bb75],
q[data-v-62f7bb75],
samp[data-v-62f7bb75],
small[data-v-62f7bb75],
strong[data-v-62f7bb75],
sub[data-v-62f7bb75],
sup[data-v-62f7bb75],
var[data-v-62f7bb75],
b[data-v-62f7bb75],
i[data-v-62f7bb75],
dl[data-v-62f7bb75],
dt[data-v-62f7bb75],
dd[data-v-62f7bb75],
ol[data-v-62f7bb75],
ul[data-v-62f7bb75],
li[data-v-62f7bb75],
fieldset[data-v-62f7bb75],
form[data-v-62f7bb75],
label[data-v-62f7bb75],
legend[data-v-62f7bb75],
table[data-v-62f7bb75],
caption[data-v-62f7bb75],
tbody[data-v-62f7bb75],
tfoot[data-v-62f7bb75],
thead[data-v-62f7bb75],
tr[data-v-62f7bb75],
th[data-v-62f7bb75],
td[data-v-62f7bb75],
article[data-v-62f7bb75],
aside[data-v-62f7bb75],
dialog[data-v-62f7bb75],
figure[data-v-62f7bb75],
footer[data-v-62f7bb75],
header[data-v-62f7bb75],
hgroup[data-v-62f7bb75],
menu[data-v-62f7bb75],
nav[data-v-62f7bb75],
section[data-v-62f7bb75],
time[data-v-62f7bb75],
mark[data-v-62f7bb75],
audio[data-v-62f7bb75],
video[data-v-62f7bb75] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-62f7bb75],
aside[data-v-62f7bb75],
dialog[data-v-62f7bb75],
figure[data-v-62f7bb75],
footer[data-v-62f7bb75],
header[data-v-62f7bb75],
hgroup[data-v-62f7bb75],
nav[data-v-62f7bb75],
section[data-v-62f7bb75],
main[data-v-62f7bb75] {
  display: block;
}
blockquote[data-v-62f7bb75],
q[data-v-62f7bb75] {
  quotes: none;
}
blockquote[data-v-62f7bb75]::before, blockquote[data-v-62f7bb75]::after,
q[data-v-62f7bb75]::before,
q[data-v-62f7bb75]::after {
  content: none;
}
ul[data-v-62f7bb75],
ol[data-v-62f7bb75] {
  list-style: none;
}
table[data-v-62f7bb75] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-62f7bb75] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-62f7bb75] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.autocomplete-with-slot-trigger__input-wrapper[data-v-62f7bb75] {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.autocomplete-with-slot-trigger__input-wrapper input[data-v-62f7bb75] {
  width: 100%;
  padding: 0;
  border: 0 none;
  border-radius: 0;
  margin: 0;
  appearance: none;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  outline: none;
}
.autocomplete-with-slot-trigger__input-wrapper input[data-v-62f7bb75]::-ms-clear {
  display: none;
}
.autocomplete-with-slot-item__header[data-v-62f7bb75], .autocomplete-with-slot-item__footer[data-v-62f7bb75] {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #fff;
}
.autocomplete-with-slot-item__empty-wrapper[data-v-62f7bb75] {
  display: flex;
  align-items: center;
  gap: 1em;
}
.autocomplete-with-slot-item__header-content[data-v-62f7bb75], .autocomplete-with-slot-item__item[data-v-62f7bb75], .autocomplete-with-slot-item__footer-content[data-v-62f7bb75] {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
  gap: 1em;
}
.autocomplete-with-slot-item__border[data-v-62f7bb75] {
  width: calc(100% - 2em);
  height: 1px;
  margin: 0 auto;
  background-color: #dadadd;
}
.autocomplete-with-slot-item__item[data-v-62f7bb75] {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: flex-start;
  padding: 0;
  gap: 16px;
}
.autocomplete-with-slot-item__item div[data-v-62f7bb75] {
  display: flex;
  flex-direction: column;
}
.autocomplete-with-slot-item__item div span[data-v-62f7bb75]:first-child {
  color: #252339;
}
.autocomplete-with-slot-item__item div span[data-v-62f7bb75]:not(:first-child) {
  color: #6f6e77;
  font-size: 0.875em;
}
.autocomplete-with-slot-item__item button[data-v-62f7bb75] {
  width: auto;
  margin-left: auto;
  background-color: transparent;
}
.autocomplete-with-slot-item__footer[data-v-62f7bb75] {
  top: unset;
  bottom: 0;
}
.autocomplete-with-slot-item__footer-content[data-v-62f7bb75] {
  justify-content: center;
}
.content-dropdown {
  display: flex;
  flex-direction: column;
  padding: var(--ads-space-4, 1rem);
  background-color: var(--ads-colors-surface-base-light, #fff);
}

.content-dropdown {
  display: flex;
  flex-direction: column;
  padding: var(--ads-space-4, 1rem);
  background-color: var(--ads-colors-surface-base-light, #fff);
}

.content-dropdown {
  display: flex;
  padding: var(--ads-space-4, 1rem);
  background-color: var(--ads-colors-surface-base-light, #fff);
}
/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-abcb31d8] {
  color: #252339;
}
.color-text-body[data-v-abcb31d8] {
  color: #3e3d48;
}
.color-text-muted[data-v-abcb31d8] {
  color: #8b8a93;
}
.color-text-primary[data-v-abcb31d8] {
  color: #068484;
}
.color-text-inverse[data-v-abcb31d8] {
  color: #fff;
}
.color-background[data-v-abcb31d8] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-abcb31d8] {
  background-color: #fff;
}
.color-background-dark[data-v-abcb31d8] {
  background-color: #050033;
}
.color-background-primary[data-v-abcb31d8] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-abcb31d8] {
  background-color: #252339;
}
.color-background-badge-light[data-v-abcb31d8] {
  background-color: #544e85;
}
.color-background-modal[data-v-abcb31d8] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-abcb31d8] {
  display: block;
}

/* Utility */
.no-outline[data-v-abcb31d8] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-abcb31d8] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-abcb31d8]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-abcb31d8] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-abcb31d8]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-abcb31d8]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-abcb31d8]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-abcb31d8]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-abcb31d8]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-abcb31d8]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-abcb31d8] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-abcb31d8],
.ads-error-message strong[data-v-abcb31d8] {
  font-weight: 600;
}
.ads-error-message i[data-v-abcb31d8],
.ads-error-message em[data-v-abcb31d8] {
  font-style: italic;
}
.ads-error-message p[data-v-abcb31d8] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-abcb31d8] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-abcb31d8],
.ads-indicator strong[data-v-abcb31d8] {
  font-weight: 600;
}
.ads-indicator i[data-v-abcb31d8],
.ads-indicator em[data-v-abcb31d8] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-abcb31d8] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-abcb31d8] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-abcb31d8] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-abcb31d8] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-abcb31d8] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-abcb31d8] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-abcb31d8] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-abcb31d8] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-abcb31d8] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-abcb31d8] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-abcb31d8] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-abcb31d8] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-abcb31d8] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-abcb31d8] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-abcb31d8] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-abcb31d8] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-abcb31d8] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-abcb31d8] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-abcb31d8] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-abcb31d8] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-abcb31d8] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-abcb31d8] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-abcb31d8] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-abcb31d8] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-abcb31d8] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-abcb31d8] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-abcb31d8],
.expressive-heading-01 strong[data-v-abcb31d8] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-abcb31d8],
.expressive-heading-01 em[data-v-abcb31d8] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-abcb31d8] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-abcb31d8] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-abcb31d8] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-abcb31d8],
.expressive-heading-02 strong[data-v-abcb31d8] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-abcb31d8],
.expressive-heading-02 em[data-v-abcb31d8] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-abcb31d8] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-abcb31d8] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-abcb31d8] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-abcb31d8],
.expressive-heading-03 strong[data-v-abcb31d8] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-abcb31d8],
.expressive-heading-03 em[data-v-abcb31d8] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-abcb31d8] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-abcb31d8] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-abcb31d8] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-abcb31d8],
.expressive-heading-04 strong[data-v-abcb31d8] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-abcb31d8],
.expressive-heading-04 em[data-v-abcb31d8] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-abcb31d8] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-abcb31d8] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-abcb31d8],
.expressive-heading-05 strong[data-v-abcb31d8] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-abcb31d8],
.expressive-heading-05 em[data-v-abcb31d8] {
  font-style: italic;
}
.expressive-subheading-01[data-v-abcb31d8] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-abcb31d8],
.expressive-subheading-01 strong[data-v-abcb31d8] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-abcb31d8],
.expressive-subheading-01 em[data-v-abcb31d8] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-abcb31d8] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-abcb31d8] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-abcb31d8],
.ui-heading-01 strong[data-v-abcb31d8] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-abcb31d8],
.ui-heading-01 em[data-v-abcb31d8] {
  font-style: italic;
}
.ui-heading-02[data-v-abcb31d8] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-abcb31d8],
.ui-heading-02 strong[data-v-abcb31d8] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-abcb31d8],
.ui-heading-02 em[data-v-abcb31d8] {
  font-style: italic;
}
.ui-heading-03[data-v-abcb31d8] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-abcb31d8],
.ui-heading-03 strong[data-v-abcb31d8] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-abcb31d8],
.ui-heading-03 em[data-v-abcb31d8] {
  font-style: italic;
}
.ui-body-01[data-v-abcb31d8] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-abcb31d8],
.ui-body-01 strong[data-v-abcb31d8] {
  font-weight: 600;
}
.ui-body-01 i[data-v-abcb31d8],
.ui-body-01 em[data-v-abcb31d8] {
  font-style: italic;
}
.ui-body-01-strong[data-v-abcb31d8] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-abcb31d8],
.ui-body-01-strong strong[data-v-abcb31d8] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-abcb31d8],
.ui-body-01-strong em[data-v-abcb31d8] {
  font-style: italic;
}
.ui-body-01-italic[data-v-abcb31d8] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-abcb31d8],
.ui-body-01-italic strong[data-v-abcb31d8] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-abcb31d8],
.ui-body-01-italic em[data-v-abcb31d8] {
  font-style: italic;
}
.ui-body-02[data-v-abcb31d8] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-abcb31d8],
.ui-body-02 strong[data-v-abcb31d8] {
  font-weight: 600;
}
.ui-body-02 i[data-v-abcb31d8],
.ui-body-02 em[data-v-abcb31d8] {
  font-style: italic;
}
.ui-body-02-strong[data-v-abcb31d8] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-abcb31d8],
.ui-body-02-strong strong[data-v-abcb31d8] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-abcb31d8],
.ui-body-02-strong em[data-v-abcb31d8] {
  font-style: italic;
}
.ui-caption-01[data-v-abcb31d8] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-abcb31d8],
.ui-caption-01 strong[data-v-abcb31d8] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-abcb31d8],
.ui-caption-01 em[data-v-abcb31d8] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-abcb31d8] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-abcb31d8],
.ui-caption-01-strong strong[data-v-abcb31d8] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-abcb31d8],
.ui-caption-01-strong em[data-v-abcb31d8] {
  font-style: italic;
}
.ui-label-01[data-v-abcb31d8] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-abcb31d8],
.ui-label-01 strong[data-v-abcb31d8] {
  font-weight: 600;
}
.ui-label-01 i[data-v-abcb31d8],
.ui-label-01 em[data-v-abcb31d8] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-abcb31d8] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-abcb31d8] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-abcb31d8] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-abcb31d8 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-abcb31d8 {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-abcb31d8 {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-abcb31d8 {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-abcb31d8],
.fade-leave-active[data-v-abcb31d8] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-abcb31d8],
.fade-leave-to[data-v-abcb31d8] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-abcb31d8],
.fade-slide-vertical-leave-to[data-v-abcb31d8] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-abcb31d8],
.fade-slide-vertical-leave-from[data-v-abcb31d8] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-abcb31d8],
.fade-slide-vertical-leave-active[data-v-abcb31d8] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-abcb31d8],[data-v-abcb31d8]::before,[data-v-abcb31d8]::after {
  box-sizing: border-box;
}
html[data-v-abcb31d8],
body[data-v-abcb31d8],
div[data-v-abcb31d8],
span[data-v-abcb31d8],
object[data-v-abcb31d8],
iframe[data-v-abcb31d8],
h1[data-v-abcb31d8],
h2[data-v-abcb31d8],
h3[data-v-abcb31d8],
h4[data-v-abcb31d8],
h5[data-v-abcb31d8],
h6[data-v-abcb31d8],
p[data-v-abcb31d8],
blockquote[data-v-abcb31d8],
pre[data-v-abcb31d8],
abbr[data-v-abcb31d8],
address[data-v-abcb31d8],
cite[data-v-abcb31d8],
code[data-v-abcb31d8],
del[data-v-abcb31d8],
dfn[data-v-abcb31d8],
em[data-v-abcb31d8],
img[data-v-abcb31d8],
ins[data-v-abcb31d8],
kbd[data-v-abcb31d8],
q[data-v-abcb31d8],
samp[data-v-abcb31d8],
small[data-v-abcb31d8],
strong[data-v-abcb31d8],
sub[data-v-abcb31d8],
sup[data-v-abcb31d8],
var[data-v-abcb31d8],
b[data-v-abcb31d8],
i[data-v-abcb31d8],
dl[data-v-abcb31d8],
dt[data-v-abcb31d8],
dd[data-v-abcb31d8],
ol[data-v-abcb31d8],
ul[data-v-abcb31d8],
li[data-v-abcb31d8],
fieldset[data-v-abcb31d8],
form[data-v-abcb31d8],
label[data-v-abcb31d8],
legend[data-v-abcb31d8],
table[data-v-abcb31d8],
caption[data-v-abcb31d8],
tbody[data-v-abcb31d8],
tfoot[data-v-abcb31d8],
thead[data-v-abcb31d8],
tr[data-v-abcb31d8],
th[data-v-abcb31d8],
td[data-v-abcb31d8],
article[data-v-abcb31d8],
aside[data-v-abcb31d8],
dialog[data-v-abcb31d8],
figure[data-v-abcb31d8],
footer[data-v-abcb31d8],
header[data-v-abcb31d8],
hgroup[data-v-abcb31d8],
menu[data-v-abcb31d8],
nav[data-v-abcb31d8],
section[data-v-abcb31d8],
time[data-v-abcb31d8],
mark[data-v-abcb31d8],
audio[data-v-abcb31d8],
video[data-v-abcb31d8] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-abcb31d8],
aside[data-v-abcb31d8],
dialog[data-v-abcb31d8],
figure[data-v-abcb31d8],
footer[data-v-abcb31d8],
header[data-v-abcb31d8],
hgroup[data-v-abcb31d8],
nav[data-v-abcb31d8],
section[data-v-abcb31d8],
main[data-v-abcb31d8] {
  display: block;
}
blockquote[data-v-abcb31d8],
q[data-v-abcb31d8] {
  quotes: none;
}
blockquote[data-v-abcb31d8]::before, blockquote[data-v-abcb31d8]::after,
q[data-v-abcb31d8]::before,
q[data-v-abcb31d8]::after {
  content: none;
}
ul[data-v-abcb31d8],
ol[data-v-abcb31d8] {
  list-style: none;
}
table[data-v-abcb31d8] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-abcb31d8] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-abcb31d8] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.date-picker-wrapper[data-v-abcb31d8] {
  height: 500px;
}
@media screen and (max-width: 767px) {
.date-picker-wrapper--modal[data-v-abcb31d8] {
    margin: 16px -16px -16px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.date-picker-wrapper--modal[data-v-abcb31d8] {
    margin: 24px -24px -24px;
}
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
.date-picker-wrapper--modal[data-v-abcb31d8] {
    margin: 24px -24px -24px;
}
}
@media screen and (min-width: 1280px) and (max-width: 1440px) {
.date-picker-wrapper--modal[data-v-abcb31d8] {
    margin: 24px -24px -24px;
}
}
@media screen and (min-width: 1441px) {
.date-picker-wrapper--modal[data-v-abcb31d8] {
    margin: 24px -24px -24px;
}
}
h2 {
  margin-top: 20px;
  margin-bottom: 5px;
  text-align: center;
}
/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading {
  color: #252339;
}
.color-text-body {
  color: #3e3d48;
}
.color-text-muted {
  color: #8b8a93;
}
.color-text-primary {
  color: #068484;
}
.color-text-inverse {
  color: #fff;
}
.color-background {
  background-color: #f4f4f5;
}
.color-background-light {
  background-color: #fff;
}
.color-background-dark {
  background-color: #050033;
}
.color-background-primary {
  background-color: #eef7f7;
}
.color-background-badge {
  background-color: #252339;
}
.color-background-badge-light {
  background-color: #544e85;
}
.color-background-modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg {
  display: block;
}

/* Utility */
.no-outline {
  outline: none;
}

/* Screen readers */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion]::after {
  inset: 0;
}

/* Form */
.ads-asterisk::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b,
.ads-error-message strong {
  font-weight: 600;
}
.ads-error-message i,
.ads-error-message em {
  font-style: italic;
}
.ads-error-message p {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b,
.ads-indicator strong {
  font-weight: 600;
}
.ads-indicator i,
.ads-indicator em {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01 {
  margin-top: 4px;
}
body .margin-top-inner-02 {
  margin-top: 8px;
}
body .margin-top-inner-03 {
  margin-top: 12px;
}
body .margin-top-inner-04 {
  margin-top: 16px;
}
body .margin-top-inner-05 {
  margin-top: 24px;
}
body .margin-top-inner-06 {
  margin-top: 32px;
}
body .margin-top-inner-07 {
  margin-top: 40px;
}
body .margin-top-inner-08 {
  margin-top: 48px;
}
body .margin-top-inner-09 {
  margin-top: 64px;
}
body .margin-top-outer-01 {
  margin-top: 16px;
}
body .margin-top-outer-02 {
  margin-top: 24px;
}
body .margin-top-outer-03 {
  margin-top: 32px;
}
body .margin-top-outer-04 {
  margin-top: 48px;
}
body .margin-top-outer-05 {
  margin-top: 32px;
}
body .margin-top-outer-06 {
  margin-top: 48px;
}
body .margin-top-outer-07 {
  margin-top: 64px;
}
body .margin-top-outer-08 {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05 {
    margin-top: 48px;
}
body .margin-top-outer-06 {
    margin-top: 64px;
}
body .margin-top-outer-07 {
    margin-top: 80px;
}
body .margin-top-outer-08 {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05 {
    margin-top: 64px;
}
body .margin-top-outer-06 {
    margin-top: 80px;
}
body .margin-top-outer-07 {
    margin-top: 96px;
}
body .margin-top-outer-08 {
    margin-top: 128px;
}
}
.expressive-heading-01 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b,
.expressive-heading-01 strong {
  font-weight: 600;
}
.expressive-heading-01 i,
.expressive-heading-01 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01 {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b,
.expressive-heading-02 strong {
  font-weight: 600;
}
.expressive-heading-02 i,
.expressive-heading-02 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02 {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b,
.expressive-heading-03 strong {
  font-weight: 600;
}
.expressive-heading-03 i,
.expressive-heading-03 em {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03 {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b,
.expressive-heading-04 strong {
  font-weight: 600;
}
.expressive-heading-04 i,
.expressive-heading-04 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04 {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05 {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b,
.expressive-heading-05 strong {
  font-weight: 600;
}
.expressive-heading-05 i,
.expressive-heading-05 em {
  font-style: italic;
}
.expressive-subheading-01 {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b,
.expressive-subheading-01 strong {
  font-weight: 600;
}
.expressive-subheading-01 i,
.expressive-subheading-01 em {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01 {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b,
.ui-heading-01 strong {
  font-weight: 600;
}
.ui-heading-01 i,
.ui-heading-01 em {
  font-style: italic;
}
.ui-heading-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b,
.ui-heading-02 strong {
  font-weight: 600;
}
.ui-heading-02 i,
.ui-heading-02 em {
  font-style: italic;
}
.ui-heading-03 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b,
.ui-heading-03 strong {
  font-weight: 600;
}
.ui-heading-03 i,
.ui-heading-03 em {
  font-style: italic;
}
.ui-body-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b,
.ui-body-01 strong {
  font-weight: 600;
}
.ui-body-01 i,
.ui-body-01 em {
  font-style: italic;
}
.ui-body-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b,
.ui-body-01-strong strong {
  font-weight: 600;
}
.ui-body-01-strong i,
.ui-body-01-strong em {
  font-style: italic;
}
.ui-body-01-italic {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b,
.ui-body-01-italic strong {
  font-weight: 600;
}
.ui-body-01-italic i,
.ui-body-01-italic em {
  font-style: italic;
}
.ui-body-02 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b,
.ui-body-02 strong {
  font-weight: 600;
}
.ui-body-02 i,
.ui-body-02 em {
  font-style: italic;
}
.ui-body-02-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b,
.ui-body-02-strong strong {
  font-weight: 600;
}
.ui-body-02-strong i,
.ui-body-02-strong em {
  font-style: italic;
}
.ui-caption-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b,
.ui-caption-01 strong {
  font-weight: 600;
}
.ui-caption-01 i,
.ui-caption-01 em {
  font-style: italic;
}
.ui-caption-01-strong {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b,
.ui-caption-01-strong strong {
  font-weight: 600;
}
.ui-caption-01-strong i,
.ui-caption-01-strong em {
  font-style: italic;
}
.ui-label-01 {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b,
.ui-label-01 strong {
  font-weight: 600;
}
.ui-label-01 i,
.ui-label-01 em {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator {
    margin-top: 96px;
}
}
@keyframes button-is-loading {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-slide-vertical-enter-from,
.fade-slide-vertical-leave-to {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to,
.fade-slide-vertical-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active,
.fade-slide-vertical-leave-active {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.svg-sprite {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.hotel-card {
  display: flex;
  width: 100%;
  flex-direction: column;
  border: var(--ads-borders-1px, 1px solid) var(--ads-colors-outline-hi-base-light, #8b8a93);
  background-color: var(--ads-colors-surface-container-min-base-light, #fff);
  box-shadow: var(--ads-shadows-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
}
@media screen and (width >= 600px) {
.hotel-card {
    flex-direction: row;
}
}
.hotel-card__image-product {
  flex: 1;
}
.hotel-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--ads-space-2, 0.5rem);
  gap: var(--ads-sizes-1, 0.25rem);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-d8f08715] {
  color: #252339;
}
.color-text-body[data-v-d8f08715] {
  color: #3e3d48;
}
.color-text-muted[data-v-d8f08715] {
  color: #8b8a93;
}
.color-text-primary[data-v-d8f08715] {
  color: #068484;
}
.color-text-inverse[data-v-d8f08715] {
  color: #fff;
}
.color-background[data-v-d8f08715] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-d8f08715] {
  background-color: #fff;
}
.color-background-dark[data-v-d8f08715] {
  background-color: #050033;
}
.color-background-primary[data-v-d8f08715] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-d8f08715] {
  background-color: #252339;
}
.color-background-badge-light[data-v-d8f08715] {
  background-color: #544e85;
}
.color-background-modal[data-v-d8f08715] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-d8f08715] {
  display: block;
}

/* Utility */
.no-outline[data-v-d8f08715] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-d8f08715] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-d8f08715]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-d8f08715] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-d8f08715]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-d8f08715]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-d8f08715]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-d8f08715]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-d8f08715]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-d8f08715]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-d8f08715] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-d8f08715],
.ads-error-message strong[data-v-d8f08715] {
  font-weight: 600;
}
.ads-error-message i[data-v-d8f08715],
.ads-error-message em[data-v-d8f08715] {
  font-style: italic;
}
.ads-error-message p[data-v-d8f08715] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-d8f08715] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-d8f08715],
.ads-indicator strong[data-v-d8f08715] {
  font-weight: 600;
}
.ads-indicator i[data-v-d8f08715],
.ads-indicator em[data-v-d8f08715] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-d8f08715] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-d8f08715] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-d8f08715] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-d8f08715] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-d8f08715] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-d8f08715] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-d8f08715] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-d8f08715] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-d8f08715] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-d8f08715] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-d8f08715] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-d8f08715] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-d8f08715] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-d8f08715] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-d8f08715] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-d8f08715] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-d8f08715] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-d8f08715] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-d8f08715] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-d8f08715] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-d8f08715] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-d8f08715] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-d8f08715] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-d8f08715] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-d8f08715] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-d8f08715] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-d8f08715],
.expressive-heading-01 strong[data-v-d8f08715] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-d8f08715],
.expressive-heading-01 em[data-v-d8f08715] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-d8f08715] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-d8f08715] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-d8f08715] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-d8f08715],
.expressive-heading-02 strong[data-v-d8f08715] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-d8f08715],
.expressive-heading-02 em[data-v-d8f08715] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-d8f08715] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-d8f08715] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-d8f08715] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-d8f08715],
.expressive-heading-03 strong[data-v-d8f08715] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-d8f08715],
.expressive-heading-03 em[data-v-d8f08715] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-d8f08715] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-d8f08715] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-d8f08715] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-d8f08715],
.expressive-heading-04 strong[data-v-d8f08715] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-d8f08715],
.expressive-heading-04 em[data-v-d8f08715] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-d8f08715] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-d8f08715] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-d8f08715],
.expressive-heading-05 strong[data-v-d8f08715] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-d8f08715],
.expressive-heading-05 em[data-v-d8f08715] {
  font-style: italic;
}
.expressive-subheading-01[data-v-d8f08715] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-d8f08715],
.expressive-subheading-01 strong[data-v-d8f08715] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-d8f08715],
.expressive-subheading-01 em[data-v-d8f08715] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-d8f08715] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-d8f08715] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-d8f08715],
.ui-heading-01 strong[data-v-d8f08715] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-d8f08715],
.ui-heading-01 em[data-v-d8f08715] {
  font-style: italic;
}
.ui-heading-02[data-v-d8f08715] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-d8f08715],
.ui-heading-02 strong[data-v-d8f08715] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-d8f08715],
.ui-heading-02 em[data-v-d8f08715] {
  font-style: italic;
}
.ui-heading-03[data-v-d8f08715] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-d8f08715],
.ui-heading-03 strong[data-v-d8f08715] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-d8f08715],
.ui-heading-03 em[data-v-d8f08715] {
  font-style: italic;
}
.ui-body-01[data-v-d8f08715] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-d8f08715],
.ui-body-01 strong[data-v-d8f08715] {
  font-weight: 600;
}
.ui-body-01 i[data-v-d8f08715],
.ui-body-01 em[data-v-d8f08715] {
  font-style: italic;
}
.ui-body-01-strong[data-v-d8f08715] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-d8f08715],
.ui-body-01-strong strong[data-v-d8f08715] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-d8f08715],
.ui-body-01-strong em[data-v-d8f08715] {
  font-style: italic;
}
.ui-body-01-italic[data-v-d8f08715] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-d8f08715],
.ui-body-01-italic strong[data-v-d8f08715] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-d8f08715],
.ui-body-01-italic em[data-v-d8f08715] {
  font-style: italic;
}
.ui-body-02[data-v-d8f08715] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-d8f08715],
.ui-body-02 strong[data-v-d8f08715] {
  font-weight: 600;
}
.ui-body-02 i[data-v-d8f08715],
.ui-body-02 em[data-v-d8f08715] {
  font-style: italic;
}
.ui-body-02-strong[data-v-d8f08715] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-d8f08715],
.ui-body-02-strong strong[data-v-d8f08715] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-d8f08715],
.ui-body-02-strong em[data-v-d8f08715] {
  font-style: italic;
}
.ui-caption-01[data-v-d8f08715] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-d8f08715],
.ui-caption-01 strong[data-v-d8f08715] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-d8f08715],
.ui-caption-01 em[data-v-d8f08715] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-d8f08715] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-d8f08715],
.ui-caption-01-strong strong[data-v-d8f08715] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-d8f08715],
.ui-caption-01-strong em[data-v-d8f08715] {
  font-style: italic;
}
.ui-label-01[data-v-d8f08715] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-d8f08715],
.ui-label-01 strong[data-v-d8f08715] {
  font-weight: 600;
}
.ui-label-01 i[data-v-d8f08715],
.ui-label-01 em[data-v-d8f08715] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-d8f08715] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-d8f08715] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-d8f08715] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-d8f08715 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-d8f08715 {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-d8f08715 {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-d8f08715 {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-d8f08715],
.fade-leave-active[data-v-d8f08715] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-d8f08715],
.fade-leave-to[data-v-d8f08715] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-d8f08715],
.fade-slide-vertical-leave-to[data-v-d8f08715] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-d8f08715],
.fade-slide-vertical-leave-from[data-v-d8f08715] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-d8f08715],
.fade-slide-vertical-leave-active[data-v-d8f08715] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-d8f08715],[data-v-d8f08715]::before,[data-v-d8f08715]::after {
  box-sizing: border-box;
}
html[data-v-d8f08715],
body[data-v-d8f08715],
div[data-v-d8f08715],
span[data-v-d8f08715],
object[data-v-d8f08715],
iframe[data-v-d8f08715],
h1[data-v-d8f08715],
h2[data-v-d8f08715],
h3[data-v-d8f08715],
h4[data-v-d8f08715],
h5[data-v-d8f08715],
h6[data-v-d8f08715],
p[data-v-d8f08715],
blockquote[data-v-d8f08715],
pre[data-v-d8f08715],
abbr[data-v-d8f08715],
address[data-v-d8f08715],
cite[data-v-d8f08715],
code[data-v-d8f08715],
del[data-v-d8f08715],
dfn[data-v-d8f08715],
em[data-v-d8f08715],
img[data-v-d8f08715],
ins[data-v-d8f08715],
kbd[data-v-d8f08715],
q[data-v-d8f08715],
samp[data-v-d8f08715],
small[data-v-d8f08715],
strong[data-v-d8f08715],
sub[data-v-d8f08715],
sup[data-v-d8f08715],
var[data-v-d8f08715],
b[data-v-d8f08715],
i[data-v-d8f08715],
dl[data-v-d8f08715],
dt[data-v-d8f08715],
dd[data-v-d8f08715],
ol[data-v-d8f08715],
ul[data-v-d8f08715],
li[data-v-d8f08715],
fieldset[data-v-d8f08715],
form[data-v-d8f08715],
label[data-v-d8f08715],
legend[data-v-d8f08715],
table[data-v-d8f08715],
caption[data-v-d8f08715],
tbody[data-v-d8f08715],
tfoot[data-v-d8f08715],
thead[data-v-d8f08715],
tr[data-v-d8f08715],
th[data-v-d8f08715],
td[data-v-d8f08715],
article[data-v-d8f08715],
aside[data-v-d8f08715],
dialog[data-v-d8f08715],
figure[data-v-d8f08715],
footer[data-v-d8f08715],
header[data-v-d8f08715],
hgroup[data-v-d8f08715],
menu[data-v-d8f08715],
nav[data-v-d8f08715],
section[data-v-d8f08715],
time[data-v-d8f08715],
mark[data-v-d8f08715],
audio[data-v-d8f08715],
video[data-v-d8f08715] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-d8f08715],
aside[data-v-d8f08715],
dialog[data-v-d8f08715],
figure[data-v-d8f08715],
footer[data-v-d8f08715],
header[data-v-d8f08715],
hgroup[data-v-d8f08715],
nav[data-v-d8f08715],
section[data-v-d8f08715],
main[data-v-d8f08715] {
  display: block;
}
blockquote[data-v-d8f08715],
q[data-v-d8f08715] {
  quotes: none;
}
blockquote[data-v-d8f08715]::before, blockquote[data-v-d8f08715]::after,
q[data-v-d8f08715]::before,
q[data-v-d8f08715]::after {
  content: none;
}
ul[data-v-d8f08715],
ol[data-v-d8f08715] {
  list-style: none;
}
table[data-v-d8f08715] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-d8f08715] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-d8f08715] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.panel[data-v-d8f08715] {
  padding: var(--ads-space-8, 2rem);
  border: var(--ads-borders-1px, 1px solid) var(--ads-colors-primary-base-light, #1e1852);
}/* Global */
/**************************************************

    Colors by shades.
    Don't use them directly inside your components.
    Instead, use the usage color variables below.

*****************************************/
/**************************************************

    Colors by usage.
    Use them for your component's css.

*****************************************/
/***********************
        Text
***********************/
/***********************
      Background
***********************/
/***********************
        Stroke
***********************/
/***********************
        Status
***********************/
/***********************
        Alert
***********************/
/***********************
        Modal
***********************/
/***********************
        Cards
***********************/
/***********************
        Others
***********************/
/***********************
        ScrollBar
***********************/
/***********************
        Selector
***********************/
/***********************
        BadgeCounter
***********************/
/***********************
        LogoSlot
***********************/
/* 1540 = $max-width + 50 + 50 */
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to
  target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that
    // have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin reset-btn

  Remove default browser style for button tag
*/
/*
  @mixin disabled

  Add the styling on a button
*/
/*
  @mixin reset-input

  Remove default browser style for input tag
*/
/*
  @mixin reset-checkbox

  Remove default browser style for checkbox tag
*/
/*
  @mixin reset-fieldset

  Remove default browser style for fieldset tag
*/
/*
  @mixin sr-only

  Hide an element visually but keep it accessible to screen readers
*/
/*
  @mixin button

  This mixin is designed for styling buttons. It allows customization of various
  button states such as normal, hover, active, and focus, including background
  color, border color, and text color.
*/
/*
  @mixin media-container

  Display an image / video inside a wrapper with a defined ratio.
  his make sure the page is not jumping when images or video are being downloaded.

  Parameters:
  $ratio - Ratio of the media (like 9/16)
  */
/*
  @mixin link-full-space

  To use when you want to extend the clickable zone for a link
*/
/*
  @mixin text-underline

  Parameters:
  $position - vertical position
  $underline - color of the underline
*/
/*
  @mixin keyline-fill

  Display a colored line on top / bottom of an element (without
  pushing its contents)

  Parameters:
  $position - vertical position
  $color - color
*/
/*
  @mixin placeholder

  Add specific cross-brower styling for the placeholder content of input tag

  ```scss
  input {
    @include placeholder {
      color: red;
    }
  }
  ```
*/
/*
  @mixin truncate

  Add styling to truncate text with an ellipsis (...) for overflow

  Usage:

  ```scss
  .element {
    @include truncate;
  }
*/
/*
  @mixin thumb

  Apply styling to customize the appearance of the thumb of an input range.

  Usage:

  ```scss
  .input-range {
    &::-webkit-slider-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }
  }
*/
/*
  @mixin outlined

  Apply styling to create an outlined appearance for an element.

  Usage:

  ```scss
  .custom-element {
    @include outlined;
  }
*/
/*
  @mixin focus-tabbed

  Apply styling to create an outlined appearance for focus-visible element.

  Usage:

  ```scss
  .custom-element {
    @include focus-tabbed;
  }
*/
/*
  @mixin hide-scrollbar

  Hide the scrollbar in the element

  Usage:

  ```scss
  .custom-element {
    @include hide-scrollbar;
  }
*/
/*
  @mixin primary-button-styles

  This mixin is designed for styling primary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin primary-inverse-button-styles

  This mixin is designed for styling primary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-button-styles

  This mixin is designed for styling secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin secondary-inverse-button-styles

  This mixin is designed for styling secondary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-button-styles

  This mixin is designed for styling tertiary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin tertiary-inverse-button-styles

  This mixin is designed for styling tertiary inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-button-styles

  This mixin is designed for styling destructive buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-inverse-button-styles

  This mixin is designed for styling destructive inverse buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin destructive-secondary-button-styles

  This mixin is designed for styling destructive secondary buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/
/*
  @mixin none-button-styles

  This mixin is designed for styling none buttons. It uses the 'button' mixin,
  which allows customization of various button states such as normal, hover, active,
  and focus, including background color, border color, and text color.
*/

/**************************************************

    Colors with class name.
    You can use them to style elements.

*****************************************/
.color-text-heading[data-v-78b6460a] {
  color: #252339;
}
.color-text-body[data-v-78b6460a] {
  color: #3e3d48;
}
.color-text-muted[data-v-78b6460a] {
  color: #8b8a93;
}
.color-text-primary[data-v-78b6460a] {
  color: #068484;
}
.color-text-inverse[data-v-78b6460a] {
  color: #fff;
}
.color-background[data-v-78b6460a] {
  background-color: #f4f4f5;
}
.color-background-light[data-v-78b6460a] {
  background-color: #fff;
}
.color-background-dark[data-v-78b6460a] {
  background-color: #050033;
}
.color-background-primary[data-v-78b6460a] {
  background-color: #eef7f7;
}
.color-background-badge[data-v-78b6460a] {
  background-color: #252339;
}
.color-background-badge-light[data-v-78b6460a] {
  background-color: #544e85;
}
.color-background-modal[data-v-78b6460a] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Icons */
.icon svg[data-v-78b6460a] {
  display: block;
}

/* Utility */
.no-outline[data-v-78b6460a] {
  outline: none;
}

/* Screen readers */
.sr-only[data-v-78b6460a] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sr-only[data-v-78b6460a]:focus {
  position: absolute;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* Show specific focus states when the element is focused using keyboard tabs */
[data-focus-tabbed=""][data-v-78b6460a] {
  position: relative;
  outline: 0;
  /* Focus visible */
}
[data-focus-tabbed=""][data-v-78b6460a]::after {
  position: absolute;
  z-index: var(--ads-z-indices-focus, 11);
  display: none;
  border: var(--ads-borders-2px, 2px solid) var(--ads-colors-focus-base-light, #3470df);
  border-radius: inherit;
  background-color: transparent;
  content: "";
  inset: -1px 0;
  pointer-events: none;
}
.is-tabbed [data-focus-tabbed=""][data-v-78b6460a]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][data-v-78b6460a]:focus-visible::after {
  display: block;
  content: "";
}
[data-focus-tabbed=""][class^=ads][data-v-78b6460a]::after {
  inset: -5px;
}
[data-focus-tabbed=""][class^=ads-accordion][data-v-78b6460a]::after {
  inset: 0;
}

/* Form */
.ads-asterisk[data-v-78b6460a]::after {
  color: #ba1f1a;
  content: "*";
}
.ads-error-message[data-v-78b6460a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #ba1f1a;
}
.ads-error-message b[data-v-78b6460a],
.ads-error-message strong[data-v-78b6460a] {
  font-weight: 600;
}
.ads-error-message i[data-v-78b6460a],
.ads-error-message em[data-v-78b6460a] {
  font-style: italic;
}
.ads-error-message p[data-v-78b6460a] {
  margin: var(--ads-sizes-1, 0.25rem) 0 0 0;
}

/* Other */
.ads-indicator[data-v-78b6460a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  color: #6f6e77;
}
.ads-indicator b[data-v-78b6460a],
.ads-indicator strong[data-v-78b6460a] {
  font-weight: 600;
}
.ads-indicator i[data-v-78b6460a],
.ads-indicator em[data-v-78b6460a] {
  font-style: italic;
}

/*
  Spacing utility classes.
  Every rules are wrap inside a body selector to re-write the default
  rules on each component.
*/
body .margin-top-inner-01[data-v-78b6460a] {
  margin-top: 4px;
}
body .margin-top-inner-02[data-v-78b6460a] {
  margin-top: 8px;
}
body .margin-top-inner-03[data-v-78b6460a] {
  margin-top: 12px;
}
body .margin-top-inner-04[data-v-78b6460a] {
  margin-top: 16px;
}
body .margin-top-inner-05[data-v-78b6460a] {
  margin-top: 24px;
}
body .margin-top-inner-06[data-v-78b6460a] {
  margin-top: 32px;
}
body .margin-top-inner-07[data-v-78b6460a] {
  margin-top: 40px;
}
body .margin-top-inner-08[data-v-78b6460a] {
  margin-top: 48px;
}
body .margin-top-inner-09[data-v-78b6460a] {
  margin-top: 64px;
}
body .margin-top-outer-01[data-v-78b6460a] {
  margin-top: 16px;
}
body .margin-top-outer-02[data-v-78b6460a] {
  margin-top: 24px;
}
body .margin-top-outer-03[data-v-78b6460a] {
  margin-top: 32px;
}
body .margin-top-outer-04[data-v-78b6460a] {
  margin-top: 48px;
}
body .margin-top-outer-05[data-v-78b6460a] {
  margin-top: 32px;
}
body .margin-top-outer-06[data-v-78b6460a] {
  margin-top: 48px;
}
body .margin-top-outer-07[data-v-78b6460a] {
  margin-top: 64px;
}
body .margin-top-outer-08[data-v-78b6460a] {
  margin-top: 80px;
}
@media screen and (min-width: 768px) {
body .margin-top-outer-05[data-v-78b6460a] {
    margin-top: 48px;
}
body .margin-top-outer-06[data-v-78b6460a] {
    margin-top: 64px;
}
body .margin-top-outer-07[data-v-78b6460a] {
    margin-top: 80px;
}
body .margin-top-outer-08[data-v-78b6460a] {
    margin-top: 96px;
}
}
@media screen and (min-width: 1280px) {
body .margin-top-outer-05[data-v-78b6460a] {
    margin-top: 64px;
}
body .margin-top-outer-06[data-v-78b6460a] {
    margin-top: 80px;
}
body .margin-top-outer-07[data-v-78b6460a] {
    margin-top: 96px;
}
body .margin-top-outer-08[data-v-78b6460a] {
    margin-top: 128px;
}
}
.expressive-heading-01[data-v-78b6460a] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.expressive-heading-01 b[data-v-78b6460a],
.expressive-heading-01 strong[data-v-78b6460a] {
  font-weight: 600;
}
.expressive-heading-01 i[data-v-78b6460a],
.expressive-heading-01 em[data-v-78b6460a] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-01[data-v-78b6460a] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-01[data-v-78b6460a] {
    font-size: var(--ads-font-sizes-7xl, 4.5rem);
    line-height: 80px;
    letter-spacing: -1px;
}
}
.expressive-heading-02[data-v-78b6460a] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-3xl, 1.875rem);
  line-height: 44px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-02 b[data-v-78b6460a],
.expressive-heading-02 strong[data-v-78b6460a] {
  font-weight: 600;
}
.expressive-heading-02 i[data-v-78b6460a],
.expressive-heading-02 em[data-v-78b6460a] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-02[data-v-78b6460a] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-02[data-v-78b6460a] {
    font-size: var(--ads-font-sizes-5xl, 3rem);
    line-height: 56px;
    letter-spacing: -0.5px;
}
}
.expressive-heading-03[data-v-78b6460a] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-03 b[data-v-78b6460a],
.expressive-heading-03 strong[data-v-78b6460a] {
  font-weight: 600;
}
.expressive-heading-03 i[data-v-78b6460a],
.expressive-heading-03 em[data-v-78b6460a] {
  font-style: italic;
}
@media screen and (min-width: 768px) {
.expressive-heading-03[data-v-78b6460a] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
@media screen and (min-width: 1024px) {
.expressive-heading-03[data-v-78b6460a] {
    font-size: var(--ads-font-sizes-4xl, 2.25rem);
    line-height: 48px;
}
}
.expressive-heading-04[data-v-78b6460a] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-04 b[data-v-78b6460a],
.expressive-heading-04 strong[data-v-78b6460a] {
  font-weight: 600;
}
.expressive-heading-04 i[data-v-78b6460a],
.expressive-heading-04 em[data-v-78b6460a] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-heading-04[data-v-78b6460a] {
    font-size: var(--ads-font-sizes-3xl, 1.875rem);
    line-height: 44px;
}
}
.expressive-heading-05[data-v-78b6460a] {
  font-family: var(--ads-fonts-heading, "Montserrat", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 36px;
  font-weight: var(--ads-font-weights-bold, 700);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.expressive-heading-05 b[data-v-78b6460a],
.expressive-heading-05 strong[data-v-78b6460a] {
  font-weight: 600;
}
.expressive-heading-05 i[data-v-78b6460a],
.expressive-heading-05 em[data-v-78b6460a] {
  font-style: italic;
}
.expressive-subheading-01[data-v-78b6460a] {
  font-family: var(--ads-fonts-mono);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-style: italic;
  font-variant-ligatures: common-ligatures;
}
.expressive-subheading-01 b[data-v-78b6460a],
.expressive-subheading-01 strong[data-v-78b6460a] {
  font-weight: 600;
}
.expressive-subheading-01 i[data-v-78b6460a],
.expressive-subheading-01 em[data-v-78b6460a] {
  font-style: italic;
}
@media screen and (min-width: 1024px) {
.expressive-subheading-01[data-v-78b6460a] {
    font-size: var(--ads-font-sizes-2xl, 1.5rem);
    line-height: 32px;
}
}
.ui-heading-01[data-v-78b6460a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-2xl, 1.5rem);
  line-height: 32px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-01 b[data-v-78b6460a],
.ui-heading-01 strong[data-v-78b6460a] {
  font-weight: 600;
}
.ui-heading-01 i[data-v-78b6460a],
.ui-heading-01 em[data-v-78b6460a] {
  font-style: italic;
}
.ui-heading-02[data-v-78b6460a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xl, 1.25rem);
  line-height: 28px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-02 b[data-v-78b6460a],
.ui-heading-02 strong[data-v-78b6460a] {
  font-weight: 600;
}
.ui-heading-02 i[data-v-78b6460a],
.ui-heading-02 em[data-v-78b6460a] {
  font-style: italic;
}
.ui-heading-03[data-v-78b6460a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-lg, 1.125rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-heading-03 b[data-v-78b6460a],
.ui-heading-03 strong[data-v-78b6460a] {
  font-weight: 600;
}
.ui-heading-03 i[data-v-78b6460a],
.ui-heading-03 em[data-v-78b6460a] {
  font-style: italic;
}
.ui-body-01[data-v-78b6460a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01 b[data-v-78b6460a],
.ui-body-01 strong[data-v-78b6460a] {
  font-weight: 600;
}
.ui-body-01 i[data-v-78b6460a],
.ui-body-01 em[data-v-78b6460a] {
  font-style: italic;
}
.ui-body-01-strong[data-v-78b6460a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-strong b[data-v-78b6460a],
.ui-body-01-strong strong[data-v-78b6460a] {
  font-weight: 600;
}
.ui-body-01-strong i[data-v-78b6460a],
.ui-body-01-strong em[data-v-78b6460a] {
  font-style: italic;
}
.ui-body-01-italic[data-v-78b6460a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-md, 1rem);
  line-height: 24px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-style: italic;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-01-italic b[data-v-78b6460a],
.ui-body-01-italic strong[data-v-78b6460a] {
  font-weight: 600;
}
.ui-body-01-italic i[data-v-78b6460a],
.ui-body-01-italic em[data-v-78b6460a] {
  font-style: italic;
}
.ui-body-02[data-v-78b6460a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02 b[data-v-78b6460a],
.ui-body-02 strong[data-v-78b6460a] {
  font-weight: 600;
}
.ui-body-02 i[data-v-78b6460a],
.ui-body-02 em[data-v-78b6460a] {
  font-style: italic;
}
.ui-body-02-strong[data-v-78b6460a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-sm, 0.875rem);
  line-height: 20px;
  font-weight: var(--ads-font-weights-bold, 700);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-body-02-strong b[data-v-78b6460a],
.ui-body-02-strong strong[data-v-78b6460a] {
  font-weight: 600;
}
.ui-body-02-strong i[data-v-78b6460a],
.ui-body-02-strong em[data-v-78b6460a] {
  font-style: italic;
}
.ui-caption-01[data-v-78b6460a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: var(--ads-font-sizes-md, 1rem);
  font-weight: var(--ads-font-weights-normal, 400);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01 b[data-v-78b6460a],
.ui-caption-01 strong[data-v-78b6460a] {
  font-weight: 600;
}
.ui-caption-01 i[data-v-78b6460a],
.ui-caption-01 em[data-v-78b6460a] {
  font-style: italic;
}
.ui-caption-01-strong[data-v-78b6460a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.ui-caption-01-strong b[data-v-78b6460a],
.ui-caption-01-strong strong[data-v-78b6460a] {
  font-weight: 600;
}
.ui-caption-01-strong i[data-v-78b6460a],
.ui-caption-01-strong em[data-v-78b6460a] {
  font-style: italic;
}
.ui-label-01[data-v-78b6460a] {
  font-family: var(--ads-fonts-body, "Roboto", Arial, sans-serif);
  font-size: var(--ads-font-sizes-xs, 0.75rem);
  line-height: 16px;
  font-weight: var(--ads-font-weights-medium, 500);
  letter-spacing: 1px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
}
.ui-label-01 b[data-v-78b6460a],
.ui-label-01 strong[data-v-78b6460a] {
  font-weight: 600;
}
.ui-label-01 i[data-v-78b6460a],
.ui-label-01 em[data-v-78b6460a] {
  font-style: italic;
}

/*******************
    Separator
*******************/
.separator[data-v-78b6460a] {
  height: 1px;
  border: 0 none;
  margin-top: 64px;
  margin-bottom: 0;
  background: #dadadd;
}
@media screen and (min-width: 768px) {
.separator[data-v-78b6460a] {
    margin-top: 80px;
}
}
@media screen and (min-width: 1280px) {
.separator[data-v-78b6460a] {
    margin-top: 96px;
}
}
@keyframes button-is-loading-78b6460a {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loading-rotate-keyframe-78b6460a {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}
@keyframes loading-circle-keyframe-78b6460a {
0%, 25% {
    stroke-dashoffset: 178;
    transform: rotate(0);
}
50%, 75% {
    stroke-dashoffset: 30;
    transform: rotate(45deg);
}
100% {
    stroke-dashoffset: 178;
    transform: rotate(360deg);
}
}
@keyframes sliding-background-78b6460a {
0% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
.fade-enter-active[data-v-78b6460a],
.fade-leave-active[data-v-78b6460a] {
  transition: opacity var(--ads-transition-duration-slow, 300ms);
}
.fade-enter-from[data-v-78b6460a],
.fade-leave-to[data-v-78b6460a] {
  opacity: 0;
}
.fade-slide-vertical-enter-from[data-v-78b6460a],
.fade-slide-vertical-leave-to[data-v-78b6460a] {
  opacity: 0;
  transform: translateY(-48px) scaleY(0.7);
}
.fade-slide-vertical-enter-to[data-v-78b6460a],
.fade-slide-vertical-leave-from[data-v-78b6460a] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.fade-slide-vertical-enter-active[data-v-78b6460a],
.fade-slide-vertical-leave-active[data-v-78b6460a] {
  transition: opacity var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out), transform var(--ads-transition-duration-fast, 150ms) var(--ads-transition-easing-ease-in, cubic-bezier(0.4, 0, 1, 1) -out);
}
[data-v-78b6460a],[data-v-78b6460a]::before,[data-v-78b6460a]::after {
  box-sizing: border-box;
}
html[data-v-78b6460a],
body[data-v-78b6460a],
div[data-v-78b6460a],
span[data-v-78b6460a],
object[data-v-78b6460a],
iframe[data-v-78b6460a],
h1[data-v-78b6460a],
h2[data-v-78b6460a],
h3[data-v-78b6460a],
h4[data-v-78b6460a],
h5[data-v-78b6460a],
h6[data-v-78b6460a],
p[data-v-78b6460a],
blockquote[data-v-78b6460a],
pre[data-v-78b6460a],
abbr[data-v-78b6460a],
address[data-v-78b6460a],
cite[data-v-78b6460a],
code[data-v-78b6460a],
del[data-v-78b6460a],
dfn[data-v-78b6460a],
em[data-v-78b6460a],
img[data-v-78b6460a],
ins[data-v-78b6460a],
kbd[data-v-78b6460a],
q[data-v-78b6460a],
samp[data-v-78b6460a],
small[data-v-78b6460a],
strong[data-v-78b6460a],
sub[data-v-78b6460a],
sup[data-v-78b6460a],
var[data-v-78b6460a],
b[data-v-78b6460a],
i[data-v-78b6460a],
dl[data-v-78b6460a],
dt[data-v-78b6460a],
dd[data-v-78b6460a],
ol[data-v-78b6460a],
ul[data-v-78b6460a],
li[data-v-78b6460a],
fieldset[data-v-78b6460a],
form[data-v-78b6460a],
label[data-v-78b6460a],
legend[data-v-78b6460a],
table[data-v-78b6460a],
caption[data-v-78b6460a],
tbody[data-v-78b6460a],
tfoot[data-v-78b6460a],
thead[data-v-78b6460a],
tr[data-v-78b6460a],
th[data-v-78b6460a],
td[data-v-78b6460a],
article[data-v-78b6460a],
aside[data-v-78b6460a],
dialog[data-v-78b6460a],
figure[data-v-78b6460a],
footer[data-v-78b6460a],
header[data-v-78b6460a],
hgroup[data-v-78b6460a],
menu[data-v-78b6460a],
nav[data-v-78b6460a],
section[data-v-78b6460a],
time[data-v-78b6460a],
mark[data-v-78b6460a],
audio[data-v-78b6460a],
video[data-v-78b6460a] {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  font-weight: inherit;
  outline: 0;
  vertical-align: baseline;
}
article[data-v-78b6460a],
aside[data-v-78b6460a],
dialog[data-v-78b6460a],
figure[data-v-78b6460a],
footer[data-v-78b6460a],
header[data-v-78b6460a],
hgroup[data-v-78b6460a],
nav[data-v-78b6460a],
section[data-v-78b6460a],
main[data-v-78b6460a] {
  display: block;
}
blockquote[data-v-78b6460a],
q[data-v-78b6460a] {
  quotes: none;
}
blockquote[data-v-78b6460a]::before, blockquote[data-v-78b6460a]::after,
q[data-v-78b6460a]::before,
q[data-v-78b6460a]::after {
  content: none;
}
ul[data-v-78b6460a],
ol[data-v-78b6460a] {
  list-style: none;
}
table[data-v-78b6460a] {
  border-collapse: collapse;
  border-spacing: 0;
}
a[data-v-78b6460a] {
  color: inherit;
  text-decoration: none;
}
.svg-sprite[data-v-78b6460a] {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
@viewport {
  width: device-width;
}
.anchor[data-v-78b6460a] {
  font-family: "Courier New", Courier, monospace;
  transform: skewX(10deg);
}
.anchor.active[data-v-78b6460a] {
  font-weight: bold;
}
.panel[data-v-78b6460a] {
  padding: var(--ads-space-8, 2rem);
  border: var(--ads-borders-1px, 1px solid) var(--ads-colors-primary-base-light, #1e1852);
}