:root {
    --bb-font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    --bb-font-family-2: 'Inter', 'Roboto', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    /* general grouping */
    --bb-font-color: #333;
    --bb-dark-grey2: #414042;
    --bb-dark-grey: #919090;
    --bb-grey: #707070;
    --bb-light-grey: #e6e6e6;
    --bb-green: #4de515;
    --bb-blue: #50aff5;
    --bb-red: #ec1c24;
    --bb-white: #ffffff;
    --bb-black: #000000;

    --bb-view-padding: 13px;

    --bb-continue-with-width: 380px;

    --bb-primary-color: #50aff5;
    --bb-primary-text-color: #1a1a2e;
    --bb-provider-border-radius: 8px;
    --bb-provider-button-margin: 4px 0;
    --bb-provider-button-holder-padding: 6px 24px 20px 24px;

    --bb-form-next-icon-color: var(--bb-primary-color);
    --bb-form-next-icon-fill: var(--bb-white);

    --bb-title-font-size: 22px;
    --bb-title-font-weight: 700;
    --bb-title-font-color: rgba(26, 26, 46, 1);

    --bb-subtitle-font-size: 14px;
    --bb-subtitle-font-weight: 400;
    --bb-subtitle-font-color: rgba(26, 26, 46, 0.6);

    --bb-note-font-size: 11px;
    --bb-note-font-weight: 400;
    --bb-note-font-color: rgba(26, 26, 46, 0.3);

    /* general sso button style */
    --bb-sso-border-color: var(--bb-light-grey);
    --bb-sso-background-color: var(--bb-white);
    --bb-sso-color: #3d4144;
    --bb-sso-button-font-size: 13px;
    --bb-sso-button-font-weight: 500;

    /*
      microsoft, linkedin,
      google, github, basecamp, fitbit, facebook, dropbox, evernote,
      shopify, planningcenter, quickbooks, salesforce, slack,
      twitter, apple, twitch, local
    */

    /*
      border color and background-color are for icon
      hover for all
      dashboard for icon display on the profile name dashboard
    */
    --bb-microsoft-border-color: var(--bb-light-grey);
    --bb-microsoft-background-color: var(--bb-white);
    --bb-microsoft-hover-border-color: #f4f4f4;
    --bb-microsoft-hover-background-color: #f4f4f4;
    --bb-microsoft-dashboard-border-color: var(--bb-light-grey);
    --bb-microsoft-dashboard-background-color: var(--bb-white);

    --bb-linkedin-border-color: var(--bb-light-grey);
    --bb-linkedin-background-color: var(--bb-white);
    --bb-linkedin-hover-border-color: #2f7ab1;
    --bb-linkedin-hover-background-color: #2f7ab1;
    --bb-linkedin-dashboard-border-color: var(--bb-light-grey);
    --bb-linkedin-dashboard-background-color: var(--bb-white);

    --bb-google-border-color: var(--bb-light-grey);
    --bb-google-background-color: var(--bb-white);
    --bb-google-hover-border-color: #3e82f1;
    --bb-google-hover-background-color: #3e82f1;
    --bb-google-dashboard-border-color: var(--bb-light-grey);
    --bb-google-dashboard-background-color: var(--bb-white);

    --bb-github-border-color: #444;
    --bb-github-background-color: #444;
    --bb-github-hover-border-color: #5f6060;
    --bb-github-hover-background-color: #5f6060;
    --bb-github-dashboard-border-color: #444;
    --bb-github-dashboard-background-color: #444;

    --bb-basecamp-border-color: #1d2d35;
    --bb-basecamp-background-color: #1d2d35;
    --bb-basecamp-hover-border-color: #31474f;
    --bb-basecamp-hover-background-color: #31474f;
    --bb-basecamp-dashboard-border-color: #1d2d35;
    --bb-basecamp-dashboard-background-color: #1d2d35;

    --bb-fitbit-border-color: #002a3a;
    --bb-fitbit-background-color: #002a3a;
    --bb-fitbit-hover-border-color: #06475b;
    --bb-fitbit-hover-background-color: #06475b;
    --bb-fitbit-dashboard-border-color: #002a3a;
    --bb-fitbit-dashboard-background-color: #002a3a;

    --bb-facebook-border-color: #227aed;
    --bb-facebook-background-color: #227aed;
    --bb-facebook-hover-border-color: #5e9ef2;
    --bb-facebook-hover-background-color: #5e9ef2;
    --bb-facebook-dashboard-border-color: #227aed;
    --bb-facebook-dashboard-background-color: #227aed;

    --bb-dropbox-border-color: #0061ff;
    --bb-dropbox-background-color: #0061ff;
    --bb-dropbox-hover-border-color: #044bb2;
    --bb-dropbox-hover-background-color: #044bb2;
    --bb-dropbox-dashboard-border-color: #0061ff;
    --bb-dropbox-dashboard-background-color: #0061ff;

    --bb-evernote-border-color: #00a82d;
    --bb-evernote-background-color: #00a82d;
    --bb-evernote-hover-border-color: #077020;
    --bb-evernote-hover-background-color: #077020;
    --bb-evernote-dashboard-border-color: #00a82d;
    --bb-evernote-dashboard-background-color: #00a82d;

    --bb-shopify-border-color: #95bf47;
    --bb-shopify-background-color: #95bf47;
    --bb-shopify-hover-border-color: #6a8432;
    --bb-shopify-hover-background-color: #6a8432;
    --bb-shopify-dashboard-border-color: #95bf47;
    --bb-shopify-dashboard-background-color: #95bf47;

    --bb-planningcenter-border-color: #2266f7;
    --bb-planningcenter-background-color: #2266f7;
    --bb-planningcenter-hover-border-color: #1e51ad;
    --bb-planningcenter-hover-background-color: #1e51ad;
    --bb-planningcenter-dashboard-border-color: #2266f7;
    --bb-planningcenter-dashboard-background-color: #2266f7;

    --bb-quickbooks-border-color: #2ca01c;
    --bb-quickbooks-background-color: #2ca01c;
    --bb-quickbooks-hover-border-color: #145907;
    --bb-quickbooks-hover-background-color: #145907;
    --bb-quickbooks-dashboard-border-color: #2ca01c;
    --bb-quickbooks-dashboard-background-color: #2ca01c;

    --bb-salesforce-border-color: var(--bb-light-grey);
    --bb-salesforce-background-color: var(--bb-white);
    --bb-salesforce-hover-border-color: #f4f4f4;
    --bb-salesforce-hover-background-color: #f4f4f4;
    --bb-salesforce-dashboard-border-color: var(--bb-light-grey);
    --bb-salesforce-dashboard-background-color: var(--bb-white);

    --bb-slack-border-color: var(--bb-light-grey);
    --bb-slack-background-color: var(--bb-white);
    --bb-slack-hover-border-color: #f4f4f4;
    --bb-slack-hover-background-color: #f4f4f4;
    --bb-slack-dashboard-border-color: var(--bb-light-grey);
    --bb-slack-dashboard-background-color: var(--bb-white);

    --bb-twitter-border-color: var(--bb-black);
    --bb-twitter-background-color: var(--bb-black);
    --bb-twitter-hover-border-color: #f4f4f4;
    --bb-twitter-hover-background-color: #f4f4f4;
    --bb-twitter-hover-svg-color: var(--bb-black);
    --bb-twitter-dashboard-border-color: var(--bb-black);
    --bb-twitter-dashboard-background-color: var(--bb-black);

    --bb-apple-border-color: var(--bb-black);
    --bb-apple-background-color: var(--bb-black);
    --bb-apple-hover-border-color: #464646;
    --bb-apple-hover-background-color: #464646;
    --bb-apple-dashboard-border-color: var(--bb-black);
    --bb-apple-dashboard-background-color: var(--bb-black);

    --bb-twitch-border-color: #9146ff;
    --bb-twitch-background-color: #9146ff;
    --bb-twitch-hover-border-color: #5511bf;
    --bb-twitch-hover-background-color: #5511bf;
    --bb-twitch-dashboard-border-color: #9146ff;
    --bb-twitch-dashboard-background-color: #9146ff;

    --bb-local-border-color: var(--bb-light-grey);
    --bb-local-background-color: var(--bb-white);
    --bb-local-hover-border-color: #f1f1f1;
    --bb-local-hover-background-color: #f1f1f1;
    --bb-local-dashboard-border-color: var(--bb-light-grey);
    --bb-local-dashboard-background-color: var(--bb-white);

    --bb-okta-border-color: var(--bb-light-grey);
    --bb-okta-background-color: var(--bb-white);
    --bb-okta-hover-border-color: var(--bb-white);
    --bb-okta-hover-background-color: #c2c3c3;
    --bb-okta-dashboard-border-color: var(--bb-light-grey);
    --bb-okta-dashboard-background-color: var(--bb-white);

    --bb-onelogin-border-color: var(--bb-white);
    --bb-onelogin-background-color: var(--bb-light-grey);
    --bb-onelogin-hover-border-color: var(--bb-white);
    --bb-onelogin-hover-background-color: #1C1F2A;
    --bb-onelogin-dashboard-border-color: var(--bb-light-grey);
    --bb-onelogin-dashboard-background-color: var(--bb-white);

    /* enterprise style */
    --bb-microsoft-enterprise-border-color: var(--bb-white);
    --bb-microsoft-enterprise-background-color: var(--bb-light-grey);
    --bb-microsoft-enterprise-color: #8c8c8c;
    --bb-google-enterprise-border-color: #4285f4;
    --bb-google-enterprise-background-color: #4285f4;
    --bb-google-enterprise-color: var(--bb-white);
    --bb-okta-enterprise-border-color: #f7f7f7;
    --bb-okta-enterprise-background-color: #f7f7f7;
    --bb-okta-enterprise-color: #c2c3c3;
    --bb-onelogin-enterprise-border-color: #1c1f2a;
    --bb-onelogin-enterprise-background-color: #1c1f2a;
    --bb-onelogin-enterprise-color: var(--bb-white);

    /* login with email style */
    --bb-email-hover-border-color: #f1f1f1;
    --bb-email-hover-background-color: #f1f1f1;
    --bb-local-green-hover-border-color: #53913c;
    --bb-local-green-hover-background-color: #53913c;


    /* breadbutter sign in password style */
    --bb-signin-border-color: var(--bb-green);
    --bb-signin-background-color: var(--bb-green);
    --bb-signin-color: var(--bb-white);


    --bb-newsletter-title-color: var(--bb-title-font-color);
    --bb-newsletter-title-font-size: var(--bb-title-font-size);
    --bb-newsletter-title-font-weight: var(--bb-title-font-weight);

    --bb-cookie-consent-title-color: var(--bb-title-font-color);
    --bb-cookie-consent-title-font-size: var(--bb-title-font-size);
    --bb-cookie-consent-title-font-weight: var(--bb-title-font-weight);

    --bb-cookie-consent-subtitle-color: var(--bb-subtitle-font-color);
    --bb-cookie-consent-subtitle-font-size: var(--bb-subtitle-font-size);
    --bb-cookie-consent-subtitle-font-weight: var(--bb-subtitle-font-weight);


    --bb-cookie-consent-note-color: var(--bb-note-font-color);
    --bb-cookie-consent-note-font-size: var(--bb-note-font-size);
    --bb-cookie-consent-note-font-weight: var(--bb-note-font-weight);

    --bb-cookie-consent-button-background-color: var(--bb-primary-color);
    --bb-cookie-consent-button-color: var(--bb-white);

    /* title style */
    --bb-form-title-color: var(--bb-dark-grey2);
    --bb-form-title-font-size: var(--bb-title-font-size);;
    --bb-form-title-font-weight: var(--bb-title-font-weight);
    --bb-form-title-line-height: 35px;
    --bb-form-title-line-height3: 26px;
    --bb-form-title-deidentify-color: #2c2c2c;
    --bb-form-title-deidentify-line-height: 28px;

    --bb-form-title-content-gating-font-size: var(--bb-title-font-size);
    --bb-form-title-content-gating-line-height: var(--bb-title-font-size);
    --bb-form-title-content-gating-font-weight: var(--bb-title-font-weight);
    --bb-form-title-content-gating-font-color: var(--bb-title-font-color);

    --bb-form-title-content-preview-font-size: var(--bb-title-font-size);
    --bb-form-title-content-preview-line-height: var(--bb-title-font-size);
    --bb-form-title-content-preview-font-weight: var(--bb-title-font-weight);
    --bb-form-title-content-preview-font-color: var(--bb-title-font-color);

    /* subtitle style */
    --bb-form-subtitle-color: var(--bb-dark-grey2);
    --bb-form-subtitle-font-size: var(--bb-subtitle-font-size);
    --bb-form-subtitle-font-weight: var(--bb-subtitle-font-weight);
    --bb-form-subtitle-line-height: calc(26 / 16);
    --bb-form-subtitle-deidentify-color: #4e5051;
    --bb-form-subtitle-deidentify-font-size: 13px;

    --bb-form-subtitle-content-gating-font-size: var(--bb-subtitle-font-size);
    --bb-form-subtitle-content-gating-font-weight: var(--bb-subtitle-font-weight);
    --bb-form-subtitle-content-gating-line-height: calc(16 / 12);
    --bb-form-subtitle-content-gating-font-color: var(--bb-subtitle-font-color);

    --bb-form-subtitle-content-preview-font-size: var(--bb-subtitle-font-size);
    --bb-form-subtitle-content-preview-line-height: calc(16 / 12);
    --bb-form-subtitle-content-preview-font-weight: var(--bb-subtitle-font-weight);
    --bb-form-subtitle-content-preview-font-color: var(--bb-subtitle-font-color);

    /* note style */
    --bb-form-note-color: var(--bb-dark-grey2);
    --bb-form-note-font-size: var(--bb-note-font-size);
    --bb-form-note-font-weight: var(--bb-note-font-weight);
    --bb-form-note-line-height: calc(26 / 16);
    --bb-form-note-deidentify-color: #4e5051;
    --bb-form-note-deidentify-font-size: 13px;

    --bb-form-note-content-gating-font-size: var(--bb-note-font-size);
    --bb-form-note-content-gating-font-weight: var(--bb-note-font-weight);
    --bb-form-note-content-gating-line-height: calc(16 / 12);
    --bb-form-note-content-gating-font-color: var(--bb-note-font-color);

    --bb-form-note-content-preview-font-size: var(--bb-note-font-size);
    --bb-form-note-content-preview-line-height: calc(16 / 12);
    --bb-form-note-content-preview-font-weight: var(--bb-note-font-weight);
    --bb-form-note-content-preview-font-color: var(--bb-note-font-color);

    /* message style */
    --bb-form-message-color: var(--bb-grey);
    --bb-form-message-font-size: 13px;
    --bb-form-message-line-height: calc(18 / 13);

    /* password validation style */
    --bb-form-message-password-valiation-font-size: 11px;

    /* small hint text style */
    --bb-form-hint-color: #afafaf;
    --bb-form-hint-font-size: 11px;
    --bb-form-hint-line-height: calc(15 / 11);

    /* register password hint title */
    --bb-form-options-color: var(--bb-dark-grey2);
    --bb-form-options-font-size: 13px;
    --bb-form-options-line-height: calc(19/13);

    /* error message style */
    --bb-form-error-color: var(--bb-red);
    --bb-form-error-font-size: 12px;
    --bb-form-error-line-height: 17px;

    /* cancel text style */
    --bb-form-cancel-color: #c3c3c3;
    --bb-form-cancel-background-color: rgba(0, 0, 0, 0);

    /* email display style */
    --bb-form-email-display-color: var(--bb-dark-grey2);
    --bb-form-email-display-background-color: transparent;
    --bb-form-email-display-font-size: 16px;
    --bb-form-email-display-line-height: 0.88;

    /* input style */
    --bb-input-color: #1c1958;
    --bb-input-font-size: 13px;
    --bb-input-line-height: 22px;
    --bb-input-focus-color: var(--bb-blue);
    --bb-input-placeholder-color: #989898;
    --bb-input-background-color: rgba(0, 0, 0, 0);
    --bb-tile-background-color: var(--bb-white);

    /* main background color */
    --bb-main-background-color: var(--bb-white);
    --bb-sub-background-color: var(--bb-white);

    /* term and policy style */
    --bb-term-policy-color: rgba(112, 112, 112, 0.5);
    --bb-term-policy-font-size: 12px;

    /* blue functional button style */
    --bb-function-button-background-color: var(--bb-blue);
    --bb-function-button-color: var(--bb-white);
    --bb-function-button-border-color: var(--bb-blue);

    /* disabled button style */
    --bb-disabled-button-background-color: #989898;
    --bb-disabled-button-color: var(--bb-white);
    --bb-disabled-button-border-color: #989898;

    /* unique text action style */
    --bb-function-text-color: var(--bb-blue);
    --bb-function-text-font-size: 11px;
    --bb-function-text-line-height: 16px;

    /* continueWith popup title style */
    --bb-popup-title-color: var(--bb-primary-text-color);
    --bb-popup-title-font-size: 14px;
    --bb-popup-title-line-height: 50px;
    --bb-popup-title-opacity: 0.7;

    /* continueWith box shadow */
    --bb-popup-box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 32px, rgba(0, 0, 0, 0.06) 0px 2px 8px;

    /* continueWith border radius */
    --bb-popup-border-radius: 16px;

    /* loader background color */
    --bb-loader-background: var(--bb-main-background-color);

    /* contact us */
    --bb-contact-us-background: var(--bb-main-background-color);

    --bb-contact-us-icon-message-background: var(--bb-white);
    --bb-contact-us-icon-message-font-size: 12px;
    --bb-contact-us-icon-message-color: var(--bb-dark-grey2);
    --bb-contact-us-icon-message-box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, .25);

    --bb-contact-us-floating-text-title-color: var(--bb-white);
    --bb-contact-us-floating-text-title-font-size: 20px;

    --bb-contact-us-floating-text-color: #f5f5f5;
    --bb-contact-us-floating-text-font-size: 13px;

    --bb-contact-us-textarea-border-color: #f0f0f0;
    --bb-contact-us-textarea-color: var(--bb-form-message-color);
    --bb-contact-us-textarea-placeholder-color: #989898;
    --bb-contact-us-textarea-font-size: 13px;

    --bb-contact-us-form-submit-button-color: var(--bb-white);
    --bb-contact-us-form-submit-button-background-color: #1cb93f;
    --bb-contact-us-form-submit-button-border-color: #1cb93f;
    --bb-contact-us-form-submit-button-font-size: 15px;

    /* content gating */
    --bb-content-gating-background-color: var(--bb-main-background-color);
    --bb-content-gating-box-shadow: 0 32px 64px 0 rgba(0,0,0,0.2);

    /* newsletter style */
    --bb-newsletter-background-color: var(--bb-main-background-color);
    --bb-newsletter-box-shadow: var(--bb-popup-box-shadow);
    --bb-newsletter-border-radius: var(--bb-popup-border-radius);
    --bb-newsletter-title-color: var(--bb-title-font-color);
    --bb-newsletter-title-font-size: var(--bb-title-font-size);
    --bb-newsletter-title-font-weight: var(--bb-title-font-weight);
    --bb-newsletter-title-line-height: calc(21/22);
    --bb-newsletter-subtitle-color: var(--bb-subtitle-font-color);
    --bb-newsletter-subtitle-font-size: var(--bb-subtitle-font-weight);
    --bb-newsletter-subtitle-line-height: calc(16/12);
    --bb-newsletter-subtitle-font-weight: var(--bb-subtitle-font-weight);

    /* content preview */
    --bb-content-preview-mask-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0.7) 95%);

    /* continue with success style */
    --bb-continue-success-background-color: var(--bb-main-background-color);
    --bb-continue-success-background--holder-color: #eefaff;
    --bb-continue-success-box-shadow: 0 32px 64px 0 rgba(0,0,0,0.2);
    --bb-continue-success-title-color: var(--bb-dark-grey2);
    --bb-continue-success-title-font-size: 22px;
    --bb-continue-success-title-line-height: calc(30/22);
    --bb-continue-success-subtitle-color: var(--bb-dark-grey2);
    --bb-continue-success-subtitle-font-size: 12px;
    --bb-continue-success-subtitle-line-height: calc(16/12);

    /* profile name */
    --bb-profile-name-holder-color: var(--bb-black);
    --bb-profile-name-holder-line-height: 40px;
    --bb-profile-name-holder-background: #f1f5fb;

    --bb-profile-dashboard-logout-button-color: var(--bb-white);
    --bb-profile-dashboard-logout-button-background-color: #2c2c2c;
    --bb-profile-dashboard-logout-button-font-size: 14px;
    --bb-profile-dashboard-logout-button-line-height: calc(18/14);

    --bb-profile-dashboard-name-color: #4e5051;
    --bb-profile-dashboard-name-font-size: 16px;
    --bb-profile-dashboard-name-line-height: calc(20/14);

    --bb-profile-dashboard-email-color: #4e5051;
    --bb-profile-dashboard-email-font-size: 12px;
    --bb-profile-dashboard-email-line-height: calc(20/12);

    --bb-profile-dashboard-background-color: var(--bb-white);
    --bb-profile-dashboard-box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.25);

    --bb-profile-dashboard-shade-background-color: #eeeeee;

    /* popup focusing text */
    --bb-popup-close-color: var(--bb-primary-text-color);
    --bb-popup-focusing-text-color: var(--bb-white);

    --bb-popup-focusing-mobile-text-title-font-size: 22px;
    --bb-popup-focusing-mobile-text-title-line-height: calc(29/23);
    --bb-popup-focusing-mobile-text-font-size: 15px;
    --bb-popup-focusing-mobile-text-line-height: calc(30/15);
    --bb-popup-focusing-mobile-text-message-font-size: 11px;
    --bb-popup-focusing-mobile-text-message-line-height: calc(17/11);

    --bb-popup-focusing-text-title-font-size: 38px;
    --bb-popup-focusing-text-title-line-height: calc(50/38);
    --bb-popup-focusing-text-font-size: 22px;
    --bb-popup-focusing-text-line-height: calc(44/22);
    --bb-popup-focusing-text-message-font-size: 13px;
    --bb-popup-focusing-text-message-line-height: calc(20/13);


    /* popup mask */
    --bb-mask-background-color: rgba(28, 28, 28, 0.86);
    --bb-mask-filter: blur(16.6px);
    --bb-mask-filter-background-color: rgba(80, 92, 109, .5);

    /* poweredby text */
    --bb-poweredby-text-color: #58595b;

    /* action button */
    --bb-action-button-border-radius: 10px;
    --bb-action-button-width: 100%;
    --bb-action-button-font-weight: 600;
    --bb-action-button-color: var(--bb-white);
    --bb-action-button-background-color: var(--bb-blue);
    --bb-action-button-font-size: 14px;
    --bb-action-button-padding: 12px 24px;

}