:root { --black-100: rgba(0, 0, 0, 1); --black-40: rgba(0, 0, 0, 0.4); --14-semibold-font-family: "Inter", Helvetica; --14-semibold-font-weight: 600; --14-semibold-font-size: 14px; --14-semibold-letter-spacing: 0px; --14-semibold-line-height: 20px; --14-semibold-font-style: normal; --14-regular-font-family: "Inter", Helvetica; --14-regular-font-weight: 400; --14-regular-font-size: 14px; --14-regular-letter-spacing: 0px; --14-regular-line-height: 20px; --14-regular-font-style: normal; --12-regular-font-family: "Inter", Helvetica; --12-regular-font-weight: 400; --12-regular-font-size: 12px; --12-regular-letter-spacing: 0px; --12-regular-line-height: 16px; --12-regular-font-style: normal; --m3-label-large-font-family: "Roboto", Helvetica; --m3-label-large-font-weight: 500; --m3-label-large-font-size: 14px; --m3-label-large-letter-spacing: 0.10000000149011612px; --m3-label-large-line-height: 20px; --m3-label-large-font-style: normal; --m3-elevation-light-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3); --spacing-4: 4px; --spacing-28: 28px; --spacing-40: 40px; --spacing-8-duplicate: 8px; --spacing-24-duplicate: 24px; --spacing-size-28: 28px; --spacing-radius-4: 4px; --spacing-16-duplicate: 16px; --corner-radius-8: 8px; --corner-radius-16: 16px; --corner-radius-80: 80px; --corner-radius-4-duplicate: 4px; --icon-size-24: 24px; --themes-black-100: rgba(0, 0, 0, 1); --themes-black-40: rgba(0, 0, 0, 0.4); --themes-white-100: rgba(255, 255, 255, 1); --themes-background-bg4: rgba(227, 245, 255, 1); /*--themes-black-5: rgba(0, 0, 0, 0.05);*/ --themes-secondary-blue: rgba(177, 227, 255, 1); --themes-primary-brand: var(--themes-black-100); --themes-secondary-purple: rgba(198, 199, 248, 1); --themes-background-bg3: rgba(229, 236, 246, 1); --themes-background-bg5: rgba(229, 236, 246, 0.5); --themes-background-bg2: rgba(247, 249, 251, 1); --themes-black-10: rgba(0, 0, 0, 0.1); --themes-white-40: rgba(255, 255, 255, 0.4); --themes-black-20: rgba(0, 0, 0, 0.2); --show-text-show-text: initial; --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(101, 85, 143, 1); --show-icon-show-icon: initial; } /* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: You can apply the theme on any DOM node, not just the `body` */ [data-spacing-mode="standard"] { --spacing-4: 4px; --spacing-28: 28px; --spacing-40: 40px; --spacing-8-duplicate: 8px; --spacing-24-duplicate: 24px; --spacing-size-28: 28px; --spacing-16-duplicate: 16px; } [data-spacing-mode="expanded-4"] { --spacing-4: 8px; --spacing-28: 32px; --spacing-40: 44px; --spacing-8-duplicate: 12px; --spacing-24-duplicate: 28px; --spacing-size-28: 32px; --spacing-16-duplicate: 20px; } [data-spacing-mode="expanded-8"] { --spacing-4: 12px; --spacing-28: 36px; --spacing-40: 48px; --spacing-8-duplicate: 16px; --spacing-24-duplicate: 32px; --spacing-size-28: 24px; --spacing-16-duplicate: 24px; } [data-spacing-mode="condensed-4"] { --spacing-4: 0px; --spacing-28: 24px; --spacing-40: 36px; --spacing-8-duplicate: 4px; --spacing-24-duplicate: 20px; --spacing-size-28: 28px; --spacing-16-duplicate: 12px; } [data-corner-radius-mode="standard"] { --corner-radius-8: 8px; --corner-radius-16: 16px; --corner-radius-80: 80px; --corner-radius-4-duplicate: 4px; } [data-corner-radius-mode="expanded-4"] { --corner-radius-8: 12px; --corner-radius-16: 20px; --corner-radius-80: 84px; --corner-radius-4-duplicate: 8px; } [data-corner-radius-mode="expanded-8"] { --corner-radius-8: 16px; --corner-radius-16: 24px; --corner-radius-80: 88px; --corner-radius-4-duplicate: 12px; } [data-corner-radius-mode="condensed-4"] { --corner-radius-8: 4px; --corner-radius-16: 12px; --corner-radius-80: 76px; --corner-radius-4-duplicate: 0px; } [data-icon-size-mode="standard"] { --icon-size-24: 24px; } [data-icon-size-mode="expanded-4"] { --icon-size-24: 28px; } [data-icon-size-mode="expanded-8"] { --icon-size-24: 32px; } [data-icon-size-mode="condensed-4"] { --icon-size-24: 20px; } [data-themes-mode="snowui-light"] { --themes-black-100: rgba(0, 0, 0, 1); --themes-black-40: rgba(0, 0, 0, 0.4); --themes-white-100: rgba(255, 255, 255, 1); --themes-background-bg4: rgba(227, 245, 255, 1); --themes-black-5: rgba(0, 0, 0, 0.05); --themes-secondary-blue: rgba(177, 227, 255, 1); --themes-primary-brand: var(--themes-black-100); --themes-secondary-purple: rgba(198, 199, 248, 1); --themes-background-bg3: rgba(229, 236, 246, 1); --themes-background-bg5: rgba(229, 236, 246, 0.5); --themes-background-bg2: rgba(247, 249, 251, 1); --themes-black-10: rgba(0, 0, 0, 0.1); --themes-white-40: rgba(255, 255, 255, 0.4); --themes-black-20: rgba(0, 0, 0, 0.2); } [data-themes-mode="snowui-dark"] { --themes-black-100: rgba(255, 255, 255, 1); --themes-black-40: rgba(255, 255, 255, 0.4); --themes-white-100: rgba(0, 0, 0, 1); --themes-background-bg4: rgba(227, 245, 255, 1); --themes-black-5: rgba(255, 255, 255, 0.1); --themes-secondary-blue: rgba(177, 227, 255, 1); --themes-primary-brand: var(--themes-secondary-purple); --themes-secondary-purple: rgba(198, 199, 248, 1); --themes-background-bg3: rgba(229, 236, 246, 1); --themes-background-bg5: rgba(255, 255, 255, 0.05); --themes-background-bg2: rgba(255, 255, 255, 0.05); --themes-black-10: rgba(255, 255, 255, 0.1); --themes-white-40: rgba(0, 0, 0, 0.4); --themes-black-20: rgba(255, 255, 255, 0.2); } [data-themes-mode="ios-macos-light"] { --themes-black-100: rgba(0, 0, 0, 1); --themes-black-40: rgba(0, 0, 0, 0.4); --themes-white-100: rgba(255, 255, 255, 1); --themes-background-bg4: rgba(0, 0, 0, 0.03); --themes-black-5: rgba(0, 0, 0, 0.05); --themes-secondary-blue: rgba(0, 122, 255, 1); --themes-primary-brand: var(--themes-secondary-blue); --themes-secondary-purple: rgba(175, 82, 222, 1); --themes-background-bg3: rgba(0, 0, 0, 0.01); --themes-background-bg5: rgba(255, 255, 255, 0.85); --themes-background-bg2: var(--themes-white-100); --themes-black-10: rgba(0, 0, 0, 0.1); --themes-white-40: rgba(255, 255, 255, 0.4); --themes-black-20: rgba(0, 0, 0, 0.2); } [data-themes-mode="ios-macos-dark"] { --themes-black-100: rgba(255, 255, 255, 1); --themes-black-40: rgba(255, 255, 255, 0.4); --themes-white-100: rgba(0, 0, 0, 1); --themes-background-bg4: rgba(0, 0, 0, 0.2); --themes-black-5: rgba(255, 255, 255, 0.1); --themes-secondary-blue: rgba(10, 132, 255, 1); --themes-primary-brand: var(--themes-secondary-blue); --themes-secondary-purple: rgba(191, 90, 242, 1); --themes-background-bg3: rgba(0, 0, 0, 0.1); --themes-background-bg5: rgba(0, 0, 0, 0.6); --themes-background-bg2: rgba(255, 255, 255, 0.05); --themes-black-10: rgba(255, 255, 255, 0.1); --themes-white-40: rgba(0, 0, 0, 0.4); --themes-black-20: rgba(255, 255, 255, 0.2); } [data-show-text-mode="true"] { --show-text-show-text: initial; } [data-show-text-mode="false"] { --show-text-show-text: none; } [data-m3-mode="light"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(101, 85, 143, 1); } [data-m3-mode="light-high-contrast"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(39, 23, 78, 1); } [data-m3-mode="light-medium-contrast"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(73, 57, 113, 1); } [data-m3-mode="dark"] { --m3-schemes-on-primary: rgba(56, 30, 114, 1); --m3-state-layers-on-primary-opacity-12: rgba(56, 30, 114, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(56, 30, 114, 0.08); --m3-schemes-primary: rgba(208, 188, 254, 1); } [data-m3-mode="dark-high-contrast"] { --m3-schemes-on-primary: rgba(0, 0, 0, 1); --m3-state-layers-on-primary-opacity-12: rgba(0, 0, 0, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(0, 0, 0, 0.08); --m3-schemes-primary: rgba(255, 249, 255, 1); } [data-m3-mode="dark-medium-contrast"] { --m3-schemes-on-primary: rgba(27, 9, 66, 1); --m3-state-layers-on-primary-opacity-12: rgba(27, 9, 66, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(27, 9, 66, 0.08); --m3-schemes-primary: rgba(211, 193, 255, 1); } [data-m3-mode="monochrome-LT"] { --m3-schemes-on-primary: rgba(226, 226, 226, 1); --m3-state-layers-on-primary-opacity-12: rgba(226, 226, 226, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(226, 226, 226, 0.08); --m3-schemes-primary: rgba(0, 0, 0, 1); } [data-m3-mode="monochrome-DT"] { --m3-schemes-on-primary: rgba(26, 28, 28, 1); --m3-state-layers-on-primary-opacity-12: rgba(26, 28, 28, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(26, 28, 28, 0.08); --m3-schemes-primary: rgba(255, 255, 255, 1); } [data-m3-mode="pink-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(138, 75, 104, 1); } [data-m3-mode="pink-DT"] { --m3-schemes-on-primary: rgba(83, 29, 57, 1); --m3-state-layers-on-primary-opacity-12: rgba(83, 29, 57, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(83, 29, 57, 0.08); --m3-schemes-primary: rgba(254, 176, 209, 1); } [data-m3-mode="rose-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(143, 74, 86, 1); } [data-m3-mode="rose-DT"] { --m3-schemes-on-primary: rgba(86, 29, 41, 1); --m3-state-layers-on-primary-opacity-12: rgba(86, 29, 41, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(86, 29, 41, 0.08); --m3-schemes-primary: rgba(255, 178, 189, 1); } [data-m3-mode="red-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(145, 75, 67, 1); } [data-m3-mode="red-DT"] { --m3-schemes-on-primary: rgba(86, 30, 24, 1); --m3-state-layers-on-primary-opacity-12: rgba(86, 30, 24, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(86, 30, 24, 0.08); --m3-schemes-primary: rgba(255, 167, 155, 1); } [data-m3-mode="orange-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(141, 79, 40, 1); } [data-m3-mode="orange-DT"] { --m3-schemes-on-primary: rgba(83, 34, 0, 1); --m3-state-layers-on-primary-opacity-12: rgba(83, 34, 0, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(83, 34, 0, 0.08); --m3-schemes-primary: rgba(255, 182, 140, 1); } [data-m3-mode="yellow-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(121, 90, 12, 1); } [data-m3-mode="yellow-DT"] { --m3-schemes-on-primary: rgba(63, 46, 0, 1); --m3-state-layers-on-primary-opacity-12: rgba(63, 46, 0, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(63, 46, 0, 0.08); --m3-schemes-primary: rgba(233, 193, 108, 1); } [data-m3-mode="chartreuse-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(92, 100, 30, 1); } [data-m3-mode="chartreuse-DT"] { --m3-schemes-on-primary: rgba(45, 52, 0, 1); --m3-state-layers-on-primary-opacity-12: rgba(45, 52, 0, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(45, 52, 0, 0.08); --m3-schemes-primary: rgba(195, 205, 124, 1); } [data-m3-mode="green-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(55, 106, 62, 1); } [data-m3-mode="green-DT"] { --m3-schemes-on-primary: rgba(0, 57, 19, 1); --m3-state-layers-on-primary-opacity-12: rgba(0, 57, 19, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(0, 57, 19, 0.08); --m3-schemes-primary: rgba(156, 212, 159, 1); } [data-m3-mode="teal-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(0, 107, 96, 1); } [data-m3-mode="teal-DT"] { --m3-schemes-on-primary: rgba(0, 55, 49, 1); --m3-state-layers-on-primary-opacity-12: rgba(0, 55, 49, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(0, 55, 49, 0.08); --m3-schemes-primary: rgba(130, 213, 199, 1); } [data-m3-mode="cyan-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(1, 104, 125, 1); } [data-m3-mode="cyan-DT"] { --m3-schemes-on-primary: rgba(0, 54, 66, 1); --m3-state-layers-on-primary-opacity-12: rgba(0, 54, 66, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(0, 54, 66, 0.08); --m3-schemes-primary: rgba(134, 209, 234, 1); } [data-m3-mode="blue-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(72, 94, 146, 1); } [data-m3-mode="blue-DT"] { --m3-schemes-on-primary: rgba(21, 46, 96, 1); --m3-state-layers-on-primary-opacity-12: rgba(21, 46, 96, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(21, 46, 96, 0.08); --m3-schemes-primary: rgba(176, 198, 255, 1); } [data-m3-mode="indigo-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(91, 89, 146, 1); } [data-m3-mode="indigo-DT"] { --m3-schemes-on-primary: rgba(45, 41, 96, 1); --m3-state-layers-on-primary-opacity-12: rgba(45, 41, 96, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(45, 41, 96, 0.08); --m3-schemes-primary: rgba(197, 192, 255, 1); } [data-m3-mode="purple-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(107, 84, 141, 1); } [data-m3-mode="purple-DT"] { --m3-schemes-on-primary: rgba(59, 37, 90, 1); --m3-state-layers-on-primary-opacity-12: rgba(59, 37, 90, 0.12); --m3-state-layers-on-primary-opacity-08: rgba(59, 37, 90, 0.08); --m3-schemes-primary: rgba(214, 187, 251, 1); } [data-show-icon-mode="true"] { --show-icon-show-icon: initial; } [data-show-icon-mode="false"] { --show-icon-show-icon: none; } #right { width: 50%; }