:root {
  --mobile-semibold-font-family: "PlusJakarta Sans-SemiBold", Helvetica;
  --mobile-semibold-font-weight: 600;
  --mobile-semibold-font-size: 16px;
  --mobile-semibold-letter-spacing: 0px;
  --mobile-semibold-line-height: 22px;
  --mobile-semibold-font-style: normal;
  --mobile-bold-font-family: "PlusJakarta Sans-Bold", Helvetica;
  --mobile-bold-font-weight: 700;
  --mobile-bold-font-size: 16px;
  --mobile-bold-letter-spacing: 0px;
  --mobile-bold-line-height: 24px;
  --mobile-bold-font-style: normal;
  --zoopid-color-variables-grey-400: rgba(195, 197, 190, 1);
  --zoopid-mobile-panel-spacing-XXL: 64px;
  --zoopid-icons-error-illustration: var(--zoopid-color-variables-zoopid-color-periwinkle);
  --zoopid-spacing-mobile-panel-spacing-l: 24px;
  --zoopid-spacing-mobile-panel-spacing-XL: 32px;
  --zoopid-gray-100: rgba(228, 228, 228, 1);
  --zoopid-typography-zoopid-text-titleh5: var(--zoopid-color-variables-zoopid-color-floral-white);
  --zoopid-button-zoopid-button-background-primarystroke: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-typography-zoopid-text-titleh3: var(--zoopid-color-variables-zoopid-color-grey-200);
  --zoopid-icons-zoopid-icons-color-graphiteblack: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-button-zoopid-button-background-secondary-background: var(
    --zoopid-color-variables-zoopid-color-floral-white
  );
  --zoopid-button-zoopid-button-text: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-typography-zoopid-text-titleh1: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-user-input-zoopid-inputfields-stroke-error: var(--zoopid-color-variables-zoopid-color-scarlet-red);
  --zoopid-color-variables-zoopid-periwinkle-50-opacity: rgba(98, 83, 163, 0.5);
  --zoopid-icons-zoopid-icons-color-inactive: var(--zoopid-color-variables-zoopid-periwinkle-50-opacity);
  --zoopid-spacing-desktop-vertical-autolayout: 24px;
  --zoopid-color-variables-zoopid-color-periwinkle: rgba(98, 83, 163, 1);
  --zoopid-user-input-zoopid-inputfields-stroke-active: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-user-input-zoopid-stepper-progressbar: var(--zoopid-color-variables-zoopid-color-periwinkle);
  --zoopid-background-variables-zoopid-backgroundgrid-color: rgba(255, 255, 255, 0.12);
  --zoopid-typography-zoopid-text-titleh2: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-color-variables-zoopid-color-floral-white: rgba(224, 226, 219, 1);
  --zoopid-typography-zoopid-text-titleh4: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-button-zoopid-button-background-primary: var(--zoopid-color-variables-zoopid-color-periwinkle);
  --zoopid-background-variables-zoopid-backgroundelipse: rgba(255, 255, 255, 0.6);
  --zoopid-icons-zoopid-icons-color-pearlwhite: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-color-variables-zoopid-color-gold-50: rgba(247, 226, 134, 0.5);
  --zoopid-user-input-zoopid-inputfields-bgcolor: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-background-variables-zoopid-background-color: var(--zoopid-color-variables-zoopid-color-periwinkle);
  --zoopid-color-variables-zoopid-color-graphiteblack: rgba(8, 9, 10, 1);
  --zoopid-icons-zoopid-icons-color-active: var(--zoopid-color-variables-zoopid-color-periwinkle);
  --zoopid-button-zoopid-button-background-secondarystroke: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-color-variables-zoopid-color-gold: rgba(255, 212, 148, 1);
  --zoopid-color-variables-zoopid-graphite-50-opacity: rgba(8, 9, 10, 0.5);
  --zoopid-color-variables-zoopid-color-yellow-pearl: rgba(247, 226, 134, 1);
  --zoopid-background-variables-zoopid-backgroundstroke: rgba(8, 9, 10, 1);
  --zoopid-grey-900: rgba(40, 44, 63, 1);
  --zoopid-color-variables-zoopid-color-scarlet-red: rgba(233, 0, 0, 1);
  --zoopid-spacing-desktop-default: 348px;
  --zoopid-color-variables-zoopid-color-darkgrey: rgba(77, 77, 77, 1);
  --zoopid-user-input-zoopid-inputfields-stroke-inactive: var(--zoopid-color-variables-zoopid-graphite-50-opacity);
  --zoopid-color-variables-zoopid-color-skin-100: rgba(230, 189, 166, 1);
  --zoopid-color-variables-zoopid-color-pearlwhite: rgba(248, 248, 248, 1);
  --zoopid-color-variables-zoopid-color-grey-200: rgba(148, 148, 148, 1);
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-zoopid-mode="student">
    <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-zoopid-mode="student"] {
  --zoopid-icons-error-illustration: var(--zoopid-color-variables-zoopid-color-periwinkle);
  --zoopid-typography-zoopid-text-titleh5: var(--zoopid-color-variables-zoopid-color-floral-white);
  --zoopid-button-zoopid-button-background-primarystroke: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-typography-zoopid-text-titleh3: var(--zoopid-color-variables-zoopid-color-grey-200);
  --zoopid-button-zoopid-button-background-secondary-background: var(
    --zoopid-color-variables-zoopid-color-floral-white
  );
  --zoopid-button-zoopid-button-text: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-icons-zoopid-icons-color-inactive: var(--zoopid-color-variables-zoopid-periwinkle-50-opacity);
  --zoopid-user-input-zoopid-inputfields-stroke-active: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-user-input-zoopid-stepper-progressbar: var(--zoopid-color-variables-zoopid-color-periwinkle);
  --zoopid-background-variables-zoopid-backgroundgrid-color: rgba(255, 255, 255, 0.12);
  --zoopid-typography-zoopid-text-titleh2: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-typography-zoopid-text-titleh4: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-button-zoopid-button-background-primary: var(--zoopid-color-variables-zoopid-color-periwinkle);
  --zoopid-background-variables-zoopid-backgroundelipse: rgba(255, 255, 255, 0.6);
  --zoopid-icons-zoopid-icons-color-pearlwhite: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-user-input-zoopid-inputfields-bgcolor: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-background-variables-zoopid-background-color: var(--zoopid-color-variables-zoopid-color-periwinkle);
  --zoopid-icons-zoopid-icons-color-active: var(--zoopid-color-variables-zoopid-color-periwinkle);
  --zoopid-button-zoopid-button-background-secondarystroke: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-background-variables-zoopid-backgroundstroke: rgba(8, 9, 10, 1);
  --zoopid-spacing-desktop-default: 348px;
  --zoopid-user-input-zoopid-inputfields-stroke-inactive: var(--zoopid-color-variables-zoopid-graphite-50-opacity);
}

[data-zoopid-mode="corporate"] {
  --zoopid-icons-error-illustration: var(--zoopid-color-variables-zoopid-color-gold);
  --zoopid-typography-zoopid-text-titleh5: var(--zoopid-color-variables-zoopid-color-darkgrey);
  --zoopid-button-zoopid-button-background-primarystroke: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-typography-zoopid-text-titleh3: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-button-zoopid-button-background-secondary-background: rgba(255, 255, 255, 1);
  --zoopid-button-zoopid-button-text: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-icons-zoopid-icons-color-inactive: var(--zoopid-color-variables-zoopid-color-gold-50);
  --zoopid-user-input-zoopid-inputfields-stroke-active: var(--zoopid-color-variables-zoopid-color-gold);
  --zoopid-user-input-zoopid-stepper-progressbar: var(--zoopid-color-variables-zoopid-color-gold);
  --zoopid-background-variables-zoopid-backgroundgrid-color: rgba(77, 77, 77, 0.5);
  --zoopid-typography-zoopid-text-titleh2: var(--zoopid-color-variables-zoopid-color-gold);
  --zoopid-typography-zoopid-text-titleh4: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-button-zoopid-button-background-primary: var(--zoopid-color-variables-zoopid-color-gold);
  --zoopid-background-variables-zoopid-backgroundelipse: rgba(225, 190, 138, 0.75);
  --zoopid-icons-zoopid-icons-color-pearlwhite: var(--zoopid-color-variables-zoopid-color-gold);
  --zoopid-user-input-zoopid-inputfields-bgcolor: var(--zoopid-color-variables-zoopid-graphite-50-opacity);
  --zoopid-background-variables-zoopid-background-color: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-icons-zoopid-icons-color-active: var(--zoopid-color-variables-zoopid-color-gold);
  --zoopid-button-zoopid-button-background-secondarystroke: var(--zoopid-color-variables-zoopid-color-gold);
  --zoopid-background-variables-zoopid-backgroundstroke: rgba(255, 212, 148, 1);
  --zoopid-spacing-desktop-default: 348px;
  --zoopid-user-input-zoopid-inputfields-stroke-inactive: var(--zoopid-color-variables-zoopid-color-gold-50);
}

[data-zoopid-mode="zoop-id-master-theme"] {
  --zoopid-icons-error-illustration: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-typography-zoopid-text-titleh5: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-button-zoopid-button-background-primarystroke: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-typography-zoopid-text-titleh3: var(--zoopid-color-variables-zoopid-color-grey-200);
  --zoopid-button-zoopid-button-background-secondary-background: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-button-zoopid-button-text: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-icons-zoopid-icons-color-inactive: var(--zoopid-color-variables-zoopid-graphite-50-opacity);
  --zoopid-user-input-zoopid-inputfields-stroke-active: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-user-input-zoopid-stepper-progressbar: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-background-variables-zoopid-backgroundgrid-color: rgba(255, 255, 255, 0.12);
  --zoopid-typography-zoopid-text-titleh2: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-typography-zoopid-text-titleh4: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-button-zoopid-button-background-primary: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-background-variables-zoopid-backgroundelipse: rgba(255, 255, 255, 0.6);
  --zoopid-icons-zoopid-icons-color-pearlwhite: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-user-input-zoopid-inputfields-bgcolor: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-background-variables-zoopid-background-color: var(--zoopid-color-variables-zoopid-color-periwinkle);
  --zoopid-icons-zoopid-icons-color-active: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-button-zoopid-button-background-secondarystroke: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-background-variables-zoopid-backgroundstroke: rgba(8, 9, 10, 1);
  --zoopid-spacing-desktop-default: 396px;
  --zoopid-user-input-zoopid-inputfields-stroke-inactive: var(--zoopid-color-variables-zoopid-graphite-50-opacity);
}

[data-zoopid-mode="minimal-theme-corporate"] {
  --zoopid-icons-error-illustration: rgba(255, 255, 255, 1);
  --zoopid-typography-zoopid-text-titleh5: var(--zoopid-color-variables-zoopid-color-floral-white);
  --zoopid-button-zoopid-button-background-primarystroke: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-typography-zoopid-text-titleh3: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-button-zoopid-button-background-secondary-background: var(
    --zoopid-color-variables-zoopid-color-floral-white
  );
  --zoopid-button-zoopid-button-text: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-icons-zoopid-icons-color-inactive: var(--zoopid-color-variables-zoopid-periwinkle-50-opacity);
  --zoopid-user-input-zoopid-inputfields-stroke-active: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-user-input-zoopid-stepper-progressbar: var(--zoopid-color-variables-zoopid-color-periwinkle);
  --zoopid-background-variables-zoopid-backgroundgrid-color: rgba(255, 255, 255, 0.12);
  --zoopid-typography-zoopid-text-titleh2: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-typography-zoopid-text-titleh4: var(--zoopid-color-variables-zoopid-color-graphiteblack);
  --zoopid-button-zoopid-button-background-primary: var(--zoopid-color-variables-zoopid-color-periwinkle);
  --zoopid-background-variables-zoopid-backgroundelipse: rgba(255, 255, 255, 0.6);
  --zoopid-icons-zoopid-icons-color-pearlwhite: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-user-input-zoopid-inputfields-bgcolor: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-background-variables-zoopid-background-color: var(--zoopid-color-variables-zoopid-color-periwinkle);
  --zoopid-icons-zoopid-icons-color-active: var(--zoopid-color-variables-zoopid-color-periwinkle);
  --zoopid-button-zoopid-button-background-secondarystroke: var(--zoopid-color-variables-zoopid-color-pearlwhite);
  --zoopid-background-variables-zoopid-backgroundstroke: rgba(8, 9, 10, 1);
  --zoopid-spacing-desktop-default: 348px;
  --zoopid-user-input-zoopid-inputfields-stroke-inactive: var(--zoopid-color-variables-zoopid-graphite-50-opacity);
}