@import url('https://fonts.googleapis.com/css2?family=Quattrocento+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
  /** group:icon */
  --icon-size: 20px;

  /** group:font-family */
  --font-family-body: 'Quattrocento Sans', sans-serif;
  --font-family-title: 'Quattrocento Sans', sans-serif;
  --font-family-input: 'Quattrocento Sans', sans-serif;

  /** group:colors */
  --colors-background-color: #ffffff;
  --colors-text-color: #000000;

  /** group:button */
  --button-background-color: #000000;
  --button-radius: 0px;
  --button-height: 36px;
  --button-font-family: 'Quattrocento Sans', sans-serif;
  --button-border: none;
  --button-text-color: #ffffff;
  --button-font-size: 14px;
  --button-font-weight: 400;
  --button-line-height: 20px;
  --button-text-transform: none;
  --button-horizontal-padding: 30px;

  /** group:onboarding-input-container */
  --onboarding-input-container-padding-top: 8px;

  /** group:input */
  --input-height: 48px;
  --input-font-size: 16px;
  --input-font-weight: 400;
  --input-border-inactive: 1px solid #dbdbdb;
  --input-border-active: 1px solid #000000;

  /** group:connect-header */
  --connect-header-height: 44px;

  /** group:connect-avatar */
  --connect-avatar-size: 128px;
  --connect-avatar-background-color: #e4e5e6;
  --connect-avatar-text-color: #000000;

  /** group:connect-title */
  --connect-title-font-family: var(--font-family-title);
  --connect-title-font-size: 30px;
  --connect-title-line-height: 34px;
  --connect-title-letter-spacing: 0px;
  --connect-title-font-weight: 400;
  --connect-title-text-transform: none;

  /** group:connect-subtitle */
  --connect-subtitle-font-family: 'Quattrocento Sans', sans-serif;
  --connect-subtitle-font-size: 16px;
  --connect-subtitle-line-height: 22px;
  --connect-subtitle-letter-spacing: 0px;
  --connect-subtitle-font-weight: 400;
  --connect-subtitle-text-transform: none;
  --connect-subtitle-white-space: pre-line;

  /** group:connect-button */
  --connect-button-width: min(calc(100% - 48px), 475px);

  /** group:connect-body */
  --connect-body-font-family: 'Quattrocento Sans', sans-serif;
  --connect-body-font-size: 16px;
  --connect-body-line-height: 22px;
  --connect-body-font-weight: 400;

  /** group:connect-vcard */
  --connect-vcard-background-color: #f2f2f2;
  --connect-vcard-border: none;
  --connect-vcard-border-radius: 0px;
  --connect-vcard-padding: 17px;
  --connect-vcard-avatar-size: 52px;
  --connect-vcard-title-font-size: 11px;
  --connect-vcard-title-color: #000000;
  --connect-vcard-title-font-family: 'Quattrocento Sans', sans-serif;
  --connect-vcard-subtitle-font-size: 10px;
  --connect-vcard-subtitle-color: #757575;
  --connect-vcard-subtitle-font-family: 'Quattrocento Sans', sans-serif;
  --connect-vcard-button-height: 25px;
  --connect-vcard-button-padding: 16px;
  --connect-vcard-button-font-size: 13px;

  /** group:onboarding-form-container */
  --onboarding-form-container-marigin-top: 75px;

  /** group:onboarding-header */
  --onboarding-header-height: 44px;

  /** group:onboarding-title */
  --onboarding-title-font-size: 18px;
  --onboarding-title-font-weight: 400;
  --onboarding-title-line-height: 18px;
  --onboarding-title-letter-spacing: 0.5px;
  --onboarding-title-text-transform: none;
  --onboarding-title-white-space: none;

  /** group:onboarding-disclaimer */
  --onboarding-disclaimer-font-family: 'Quattrocento Sans', sans-serif;
  --onboarding-disclaimer-font-size: 12px;
  --onboarding-disclaimer-line-height: 18px;
  --onboarding-disclaimer-color: #757575;
  --onboarding-disclaimer-link-color: #000000;

  /** group:onboarding-submit */
  --onboarding-submit-width: min(calc(100% - 48px), 475px);
  --onboarding-submit-position-left: calc(50% - (var(--onboarding-submit-width) / 2));
  --onboarding-submit-position-right: none;
  --onboarding-submit-position-top: unset;
  --onboarding-submit-position-bottom: 24px;

  /** group:onboarding-card */
  --onboarding-card-background-color: #e4e5e6;
  --onboarding-card-border: none;
  --onboarding-card-border-radius: 0px;
  --onboarding-card-padding: 17px;
  --onboarding-card-font-family: 'Quattrocento Sans', sans-serif;
  --onboarding-card-font-size: 12px;
  --onboarding-card-line-height: 18px;
  --onboarding-card-font-weight: 400;

  /** group:onboarding-form-label */
  --onboarding-form-label-display: none;

  /** group:inspiration-header */
  --inspiration-header-height: 44px;

  /** group:inspiration-avatar */
  --inspiration-avatar-size: 34px;
  --inspiration-avatar-background-color: #e4e5e6;
  --inspiration-avatar-text-color: #000000;

  /** group:inspiration-title */
  --inspiration-title-font-family: var(--font-family-title);
  --inspiration-title-font-size: 14px;
  --inspiration-title-line-height: 16px;
  --inspiration-title-font-weight: 600;
  --inspiration-title-letter-spacing: auto;
  --inspiration-title-color: #000000;

  /** group:inspiration-subtitle */
  --inspiration-subtitle-font-family: var(--font-family-title);
  --inspiration-subtitle-font-size: 14px;
  --inspiration-subtitle-line-height: 16px;
  --inspiration-subtitle-font-weight: 400;
  --inspiration-subtitle-letter-spacing: auto;
  --inspiration-subtitle-color: #929292;

  /** group:inspiration-paragraph */
  --inspiration-paragraph-font-family: var(--font-family-body);
  --inspiration-paragraph-font-size: 16px;
  --inspiration-paragraph-line-height: 20px;
  --inspiration-paragraph-font-weight: 500;
  --inspiration-paragraph-color: #000000;
  --inspiration-paragraph-letter-spacing: auto;

  /** group:inspiration-product-title */
  --inspiration-product-title-font-family: var(--font-family-title);
  --inspiration-product-title-font-size: 16px;
  --inspiration-product-title-font-weight: 500;
  --inspiration-product-title-line-height: 20px;
  --inspiration-product-title-letter-spacing: auto;
  --inspiration-product-title-color: #000000;

  /** group:inspiration-product-price */
  --inspiration-product-price-font-family: var(--font-family-body);
  --inspiration-product-price-font-size: 14px;
  --inspiration-product-price-font-weight: 400;
  --inspiration-product-price-line-height: 16px;
  --inspiration-product-price-letter-spacing: auto;
  --inspiration-product-price-color: #929292;

  /** group:inspiration-product-description */
  --inspiration-product-description-font-family: var(--font-family-body);
  --inspiration-product-description-font-size: 14px;
  --inspiration-product-description-font-weight: 400;
  --inspiration-product-description-line-height: 16px;
  --inspiration-product-description-letter-spacing: auto;
  --inspiration-product-description-color: #929292;

  /** group:inspiration-product-color */
  --inspiration-product-color-font-family: var(--font-family-body);
  --inspiration-product-color-font-size: 14px;
  --inspiration-product-color-font-weight: 400;
  --inspiration-product-color-line-height: 16px;
  --inspiration-product-color-letter-spacing: auto;
  --inspiration-product-color-color: #929292;

  /** group:inspiration-bottom-tabs */
  --inspiration-bottom-tabs-height: 48px;
  --inspiration-bottom-tabs-background-color: #ffffff;

  /** group:appointment-header */
  --appointment-header-height: 190px;
  --appointment-header-background-color: #ffffff;
  --appointment-header-image-height: 20px;
  --appointment-header-border-bottom: none;

  /** group:appointment-avatar */
  --appointment-avatar-top-margin: -36px;
  --appointment-avatar-size: 128px;
  --appointment-avatar-background-color: #e4e5e6;
  --appointment-avatar-text-color: #000000;

  /** group:appointment-subtitle */
  --appointment-subtitle-font-size: 16px;
  --appointment-subtitle-font-weight: 400;
  --appointment-subtitle-line-height: 16px;
  --appointment-subtitle-letter-spacing: 0px;
  --appointment-subtitle-text-transform: none;

  /** group:appointment-sa-name */
  --appointment-sa-name-margins: 36px;
  --appointment-sa-name-font-size: 24px;
  --appointment-sa-name-font-weight: 800;
  --appointment-sa-name-line-height: 28px;
  --appointment-sa-name-letter-spacing: 0px;
  --appointment-sa-name-text-transform: none;

  /** group:appointment-date */
  --appointment-date-font-size: 32px;
  --appointment-date-font-weight: 500;
  --appointment-date-line-height: 40px;
  --appointment-date-letter-spacing: 0px;
  --appointment-date-text-transform: none;

  /** group:appointment-add-to-calendar-button */
  --appointment-add-to-calendar-button-top: unset;
  --appointment-add-to-calendar-button-bottom: 16px;
  --appointment-add-to-calendar-button-left: unset;
  --appointment-add-to-calendar-button-width: min(calc(100% - 32px), 450px);
  --appointment-add-to-calendar-button-right: calc(50% - min(calc(100% - 32px), 450px) / 2);
}