:root {
  --vms-blk: rgba(0, 0, 0, 1);
  --vms-blk-stroke: rgba(244, 244, 244, 1);
  --vms-white: rgba(255, 255, 255, 1);
  --vms-white-stroke: rgba(244, 244, 244, 1);
  --vms-gray-4: rgba(100, 100, 100, 1);
  --vms-gray-4-stroke: rgba(244, 244, 244, 1);
  --vms-gray-2: rgba(216, 216, 216, 1);
  --vms-gray-2-stroke: rgba(244, 244, 244, 1);
  --vms-gray-1: rgba(244, 244, 244, 1);
  --vms-gray-1-stroke: rgba(244, 244, 244, 1);
  --vms-gray-3: rgba(150, 150, 150, 1);
  --vms-gray-3-stroke: rgba(244, 244, 244, 1);
  --vms-gray-5: rgba(50, 50, 50, 1);
  --vms-gray-5-stroke: rgba(244, 244, 244, 1);
  --vms-red: rgba(227, 62, 56, 1);
  --vms-red-stroke: rgba(244, 244, 244, 1);
  --vms-green: rgba(5, 160, 49, 1);
  --vms-green-stroke: rgba(244, 244, 244, 1);
  --vms-secodary-2: rgba(255, 139, 0, 1);
  --vms-secodary-2-stroke: rgba(244, 244, 244, 1);
  --vms-secondary1: rgba(241, 142, 26, 1);
  --vms-secondary-1-stroke: rgba(244, 244, 244, 1);
  --vms-primary-1: rgba(0, 111, 181, 1);
  --vms-primary-1-stroke: rgba(244, 244, 244, 1);
  --vms-primary-2: rgba(24, 145, 208, 1);
  --vms-primary-2-stroke: rgba(244, 244, 244, 1);
  --erp-purple-stroke: rgba(244, 244, 244, 1);
  --erp-white-1: rgba(255, 255, 255, 1);
  --erp-white-2: rgba(249, 250, 251, 1);
  --erp-white-3: rgba(243, 244, 246, 1);
  --erp-white-4: rgba(229, 231, 235, 1);
  --erp-white-5: rgba(209, 213, 219, 1);
  --erp-blk: rgba(19, 17, 17, 1);
  --erp-white: rgba(255, 255, 255, 1);
  --erp-gray-1: rgba(244, 244, 244, 1);
  --erp-gray-2: rgba(216, 216, 216, 1);
  --erp-gray-3: rgba(150, 150, 150, 1);
  --erp-gray-4: rgba(100, 100, 100, 1);
  --erp-gray-5: rgba(50, 50, 50, 1);
  --erp-primary: rgba(0, 111, 181, 1);
  --erp-red: rgba(219, 25, 25, 1);
  --erp-green: rgba(8, 184, 73, 1);
  --erp-orange: rgba(253, 126, 20, 1);
  --erp-blue-hover: rgba(15, 153, 255, 1);
  --erp-secondary: rgba(244, 190, 25, 1);
  --erp-secondary-hover: rgba(244, 190, 25, 1);
  --erp-purple: rgba(166, 4, 189, 1);
  --cdn-primary-11: rgba(204, 229, 242, 1);
  --cdn-primary-10: rgba(0, 25, 38, 1);
  --cdn-primary-9: rgba(170, 211, 234, 1);
  --cdn-primary-8: rgba(0, 41, 64, 1);
  --cdn-primary-7: rgba(128, 189, 223, 1);
  --cdn-primary-6: rgba(1, 62, 96, 1);
  --cdn-primary-5: rgba(86, 167, 213, 1);
  --cdn-primary-4: rgba(1, 82, 128, 1);
  --cdn-primary-3: rgba(43, 145, 202, 1);
  --cdn-primary-2: rgba(1, 103, 160, 1);
  --cdn-primary-1: rgba(1, 123, 192, 1);
  --cdn-secondary-1: rgba(204, 242, 237, 1);
  --cdn-secondary-2: rgba(0, 38, 33, 1);
  --cdn-secondary-3: rgba(170, 234, 225, 1);
  --cdn-secondary-4: rgba(0, 64, 55, 1);
  --cdn-secondary-5: rgba(128, 223, 210, 1);
  --cdn-secondary-6: rgba(1, 96, 83, 1);
  --cdn-secondary-7: rgba(86, 213, 195, 1);
  --cdn-secondary-8: rgba(1, 128, 110, 1);
  --cdn-secondary-9: rgba(43, 202, 180, 1);
  --cdn-secondary-10: rgba(1, 160, 137, 1);
  --cdn-secondary-11: rgba(1, 192, 165, 1);
  --whitewhiteshade-4: rgba(250, 250, 250, 1);
  --VMS-BOLD-10-font-family: "Outfit", Helvetica;
  --VMS-BOLD-10-font-weight: 700;
  --VMS-BOLD-10-font-size: 72px;
  --VMS-BOLD-10-letter-spacing: 0px;
  --VMS-BOLD-10-line-height: 80px;
  --VMS-BOLD-10-font-style: normal;
  --VMS-BOLD-9-font-family: "Outfit", Helvetica;
  --VMS-BOLD-9-font-weight: 700;
  --VMS-BOLD-9-font-size: 48px;
  --VMS-BOLD-9-letter-spacing: 0px;
  --VMS-BOLD-9-line-height: 56px;
  --VMS-BOLD-9-font-style: normal;
  --VMS-BOLD-8-font-family: "Outfit", Helvetica;
  --VMS-BOLD-8-font-weight: 700;
  --VMS-BOLD-8-font-size: 48px;
  --VMS-BOLD-8-letter-spacing: 0px;
  --VMS-BOLD-8-line-height: 56px;
  --VMS-BOLD-8-font-style: normal;
  --VMS-BOLD-7-font-family: "Outfit", Helvetica;
  --VMS-BOLD-7-font-weight: 700;
  --VMS-BOLD-7-font-size: 40px;
  --VMS-BOLD-7-letter-spacing: 0px;
  --VMS-BOLD-7-line-height: 48px;
  --VMS-BOLD-7-font-style: normal;
  --VMS-BOLD-6-font-family: "Outfit", Helvetica;
  --VMS-BOLD-6-font-weight: 700;
  --VMS-BOLD-6-font-size: 32px;
  --VMS-BOLD-6-letter-spacing: 0px;
  --VMS-BOLD-6-line-height: 40px;
  --VMS-BOLD-6-font-style: normal;
  --VMS-BOLD-5-font-family: "Outfit", Helvetica;
  --VMS-BOLD-5-font-weight: 700;
  --VMS-BOLD-5-font-size: 24px;
  --VMS-BOLD-5-letter-spacing: 0px;
  --VMS-BOLD-5-line-height: 32px;
  --VMS-BOLD-5-font-style: normal;
  --VMS-BOLD-4-font-family: "Outfit", Helvetica;
  --VMS-BOLD-4-font-weight: 700;
  --VMS-BOLD-4-font-size: 24px;
  --VMS-BOLD-4-letter-spacing: 0px;
  --VMS-BOLD-4-line-height: 28px;
  --VMS-BOLD-4-font-style: normal;
  --VMS-BOLD-3-font-family: "Outfit", Helvetica;
  --VMS-BOLD-3-font-weight: 700;
  --VMS-BOLD-3-font-size: 16px;
  --VMS-BOLD-3-letter-spacing: 0px;
  --VMS-BOLD-3-line-height: 24px;
  --VMS-BOLD-3-font-style: normal;
  --VMS-BOLD-2-font-family: "Outfit", Helvetica;
  --VMS-BOLD-2-font-weight: 700;
  --VMS-BOLD-2-font-size: 14px;
  --VMS-BOLD-2-letter-spacing: 0px;
  --VMS-BOLD-2-line-height: 22px;
  --VMS-BOLD-2-font-style: normal;
  --VMS-BOLD-1-font-family: "Outfit", Helvetica;
  --VMS-BOLD-1-font-weight: 700;
  --VMS-BOLD-1-font-size: 12px;
  --VMS-BOLD-1-letter-spacing: 0px;
  --VMS-BOLD-1-line-height: 20px;
  --VMS-BOLD-1-font-style: normal;
  --ERP-BOLD-10-font-family: "Outfit", Helvetica;
  --ERP-BOLD-10-font-weight: 700;
  --ERP-BOLD-10-font-size: 72px;
  --ERP-BOLD-10-letter-spacing: 0px;
  --ERP-BOLD-10-line-height: 80px;
  --ERP-BOLD-10-font-style: normal;
  --ERP-BOLD-9-font-family: "Outfit", Helvetica;
  --ERP-BOLD-9-font-weight: 700;
  --ERP-BOLD-9-font-size: 48px;
  --ERP-BOLD-9-letter-spacing: 0px;
  --ERP-BOLD-9-line-height: 56px;
  --ERP-BOLD-9-font-style: normal;
  --ERP-BOLD-7-font-family: "Outfit", Helvetica;
  --ERP-BOLD-7-font-weight: 700;
  --ERP-BOLD-7-font-size: 40px;
  --ERP-BOLD-7-letter-spacing: 0px;
  --ERP-BOLD-7-line-height: 48px;
  --ERP-BOLD-7-font-style: normal;
  --ERP-BOLD-6-font-family: "Outfit", Helvetica;
  --ERP-BOLD-6-font-weight: 700;
  --ERP-BOLD-6-font-size: 32px;
  --ERP-BOLD-6-letter-spacing: 0px;
  --ERP-BOLD-6-line-height: 40px;
  --ERP-BOLD-6-font-style: normal;
  --ERP-BOLD-5-font-family: "Outfit", Helvetica;
  --ERP-BOLD-5-font-weight: 700;
  --ERP-BOLD-5-font-size: 24px;
  --ERP-BOLD-5-letter-spacing: 0px;
  --ERP-BOLD-5-line-height: 32px;
  --ERP-BOLD-5-font-style: normal;
  --ERP-BOLD-4-font-family: "Outfit", Helvetica;
  --ERP-BOLD-4-font-weight: 700;
  --ERP-BOLD-4-font-size: 20px;
  --ERP-BOLD-4-letter-spacing: 0px;
  --ERP-BOLD-4-line-height: 28px;
  --ERP-BOLD-4-font-style: normal;
  --ERP-BOLD-3-font-family: "Outfit", Helvetica;
  --ERP-BOLD-3-font-weight: 700;
  --ERP-BOLD-3-font-size: 16px;
  --ERP-BOLD-3-letter-spacing: 0px;
  --ERP-BOLD-3-line-height: 24px;
  --ERP-BOLD-3-font-style: normal;
  --ERP-BOLD-2-font-family: "Outfit", Helvetica;
  --ERP-BOLD-2-font-weight: 700;
  --ERP-BOLD-2-font-size: 14px;
  --ERP-BOLD-2-letter-spacing: 0px;
  --ERP-BOLD-2-line-height: 22px;
  --ERP-BOLD-2-font-style: normal;
  --ERP-BOLD-1-font-family: "Outfit", Helvetica;
  --ERP-BOLD-1-font-weight: 700;
  --ERP-BOLD-1-font-size: 12px;
  --ERP-BOLD-1-letter-spacing: 0px;
  --ERP-BOLD-1-line-height: 20px;
  --ERP-BOLD-1-font-style: normal;
  --ERP-REG-10-font-family: "Outfit", Helvetica;
  --ERP-REG-10-font-weight: 400;
  --ERP-REG-10-font-size: 72px;
  --ERP-REG-10-letter-spacing: 0px;
  --ERP-REG-10-line-height: 80px;
  --ERP-REG-10-font-style: normal;
  --ERP-REG-9-font-family: "Outfit", Helvetica;
  --ERP-REG-9-font-weight: 400;
  --ERP-REG-9-font-size: 56px;
  --ERP-REG-9-letter-spacing: 0px;
  --ERP-REG-9-line-height: 64px;
  --ERP-REG-9-font-style: normal;
  --ERP-REG-8-font-family: "Outfit", Helvetica;
  --ERP-REG-8-font-weight: 400;
  --ERP-REG-8-font-size: 48px;
  --ERP-REG-8-letter-spacing: 0px;
  --ERP-REG-8-line-height: 56px;
  --ERP-REG-8-font-style: normal;
  --ERP-REG-7-font-family: "Outfit", Helvetica;
  --ERP-REG-7-font-weight: 400;
  --ERP-REG-7-font-size: 40px;
  --ERP-REG-7-letter-spacing: 0px;
  --ERP-REG-7-line-height: 48px;
  --ERP-REG-7-font-style: normal;
  --ERP-REG-6-font-family: "Outfit", Helvetica;
  --ERP-REG-6-font-weight: 400;
  --ERP-REG-6-font-size: 32px;
  --ERP-REG-6-letter-spacing: 0px;
  --ERP-REG-6-line-height: 40px;
  --ERP-REG-6-font-style: normal;
  --ERP-REG-5-font-family: "Outfit", Helvetica;
  --ERP-REG-5-font-weight: 400;
  --ERP-REG-5-font-size: 24px;
  --ERP-REG-5-letter-spacing: 0px;
  --ERP-REG-5-line-height: 28px;
  --ERP-REG-5-font-style: normal;
  --ERP-REG-4-font-family: "Outfit", Helvetica;
  --ERP-REG-4-font-weight: 400;
  --ERP-REG-4-font-size: 16px;
  --ERP-REG-4-letter-spacing: 0px;
  --ERP-REG-4-line-height: 24px;
  --ERP-REG-4-font-style: normal;
  --ERP-REG-3-font-family: "Outfit", Helvetica;
  --ERP-REG-3-font-weight: 400;
  --ERP-REG-3-font-size: 16px;
  --ERP-REG-3-letter-spacing: 0px;
  --ERP-REG-3-line-height: 24px;
  --ERP-REG-3-font-style: normal;
  --ERP-REG-2-font-family: "Outfit", Helvetica;
  --ERP-REG-2-font-weight: 400;
  --ERP-REG-2-font-size: 14px;
  --ERP-REG-2-letter-spacing: 0px;
  --ERP-REG-2-line-height: 22px;
  --ERP-REG-2-font-style: normal;
  --ERP-REG-1-font-family: "Outfit", Helvetica;
  --ERP-REG-1-font-weight: 400;
  --ERP-REG-1-font-size: 12px;
  --ERP-REG-1-letter-spacing: 0px;
  --ERP-REG-1-line-height: 20px;
  --ERP-REG-1-font-style: normal;
  --ERP-ITALIC-10-font-family: "Outfit", Helvetica;
  --ERP-ITALIC-10-font-weight: 400;
  --ERP-ITALIC-10-font-size: 72px;
  --ERP-ITALIC-10-letter-spacing: 0px;
  --ERP-ITALIC-10-line-height: 80px;
  --ERP-ITALIC-10-font-style: normal;
  --ERP-ITALIC-9-font-family: "Outfit", Helvetica;
  --ERP-ITALIC-9-font-weight: 400;
  --ERP-ITALIC-9-font-size: 56px;
  --ERP-ITALIC-9-letter-spacing: 0px;
  --ERP-ITALIC-9-line-height: 64px;
  --ERP-ITALIC-9-font-style: normal;
  --ERP-ITALIC-8-font-family: "Outfit", Helvetica;
  --ERP-ITALIC-8-font-weight: 400;
  --ERP-ITALIC-8-font-size: 48px;
  --ERP-ITALIC-8-letter-spacing: 0px;
  --ERP-ITALIC-8-line-height: 56px;
  --ERP-ITALIC-8-font-style: normal;
  --ERP-ITALIC-7-font-family: "Outfit", Helvetica;
  --ERP-ITALIC-7-font-weight: 400;
  --ERP-ITALIC-7-font-size: 40px;
  --ERP-ITALIC-7-letter-spacing: 0px;
  --ERP-ITALIC-7-line-height: 48px;
  --ERP-ITALIC-7-font-style: normal;
  --ERP-ITALIC-6-font-family: "Outfit", Helvetica;
  --ERP-ITALIC-6-font-weight: 400;
  --ERP-ITALIC-6-font-size: 30px;
  --ERP-ITALIC-6-letter-spacing: 0px;
  --ERP-ITALIC-6-line-height: 40px;
  --ERP-ITALIC-6-font-style: normal;
  --ERP-ITALIC-5-font-family: "Outfit", Helvetica;
  --ERP-ITALIC-5-font-weight: 400;
  --ERP-ITALIC-5-font-size: 20px;
  --ERP-ITALIC-5-letter-spacing: 0px;
  --ERP-ITALIC-5-line-height: 28px;
  --ERP-ITALIC-5-font-style: normal;
  --ERP-ITALIC-4-font-family: "Outfit", Helvetica;
  --ERP-ITALIC-4-font-weight: 400;
  --ERP-ITALIC-4-font-size: 16px;
  --ERP-ITALIC-4-letter-spacing: 0px;
  --ERP-ITALIC-4-line-height: 24px;
  --ERP-ITALIC-4-font-style: normal;
  --ERP-ITALIC-3-font-family: "Outfit", Helvetica;
  --ERP-ITALIC-3-font-weight: 400;
  --ERP-ITALIC-3-font-size: 16px;
  --ERP-ITALIC-3-letter-spacing: 0px;
  --ERP-ITALIC-3-line-height: 24px;
  --ERP-ITALIC-3-font-style: normal;
  --ERP-ITALIC-2-font-family: "Outfit", Helvetica;
  --ERP-ITALIC-2-font-weight: 400;
  --ERP-ITALIC-2-font-size: 14px;
  --ERP-ITALIC-2-letter-spacing: 0px;
  --ERP-ITALIC-2-line-height: 22px;
  --ERP-ITALIC-2-font-style: normal;
  --ERP-ITALIC-1-font-family: "Outfit", Helvetica;
  --ERP-ITALIC-1-font-weight: 400;
  --ERP-ITALIC-1-font-size: 12px;
  --ERP-ITALIC-1-letter-spacing: 0px;
  --ERP-ITALIC-1-line-height: 20px;
  --ERP-ITALIC-1-font-style: normal;
  --example-universalpalette-fill-bg: rgba(255, 255, 255, 1);
  --example-universalpalette-border-regular: rgba(0, 0, 0, 0.25);
  --example-universalpalette-border-dark: rgba(0, 0, 0, 0.5);
  --example-universalpalette-border-white: rgba(255, 255, 255, 1);
  --example-universalpalette-text-primary: rgba(0, 0, 0, 0.9);
  --example-universalpalette-text-regular: rgba(0, 0, 0, 0.7);
  --example-universalpalette-text-secondary: rgba(0, 0, 0, 0.5);
  --example-universalpalette-text-white-primary: rgba(255, 255, 255, 0.95);
  --example-universalpalette-text-white-secondary: rgba(255, 255, 255, 0.55);
}

/*

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

<body data-example-mode="light">
    <!-- the rest of your content -->
</body>

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

*/

[data-example-mode="light"] {
  --example-universalpalette-fill-bg: rgba(255, 255, 255, 1);
  --example-universalpalette-border-regular: rgba(0, 0, 0, 0.25);
  --example-universalpalette-border-dark: rgba(0, 0, 0, 0.5);
  --example-universalpalette-border-white: rgba(255, 255, 255, 1);
  --example-universalpalette-text-primary: rgba(0, 0, 0, 0.9);
  --example-universalpalette-text-regular: rgba(0, 0, 0, 0.7);
  --example-universalpalette-text-secondary: rgba(0, 0, 0, 0.5);
}

[data-example-mode="dark"] {
  --example-universalpalette-fill-bg: rgba(57, 61, 82, 1);
  --example-universalpalette-border-regular: rgba(255, 255, 255, 0.35);
  --example-universalpalette-border-dark: rgba(255, 255, 255, 0.6);
  --example-universalpalette-border-white: rgba(25, 28, 39, 1);
  --example-universalpalette-text-primary: rgba(255, 255, 255, 0.95);
  --example-universalpalette-text-regular: rgba(255, 255, 255, 0.75);
  --example-universalpalette-text-secondary: rgba(255, 255, 255, 0.55);
}