/* stylelint-disable scss/dollar-variable-pattern */ /* stylelint-disable scss/dollar-variable-pattern */ /* stylelint-disable max-line-length, scss/dollar-variable-pattern */ /* stylelint-disable-next-line scss/at-mixin-pattern */ /* stylelint-disable-next-line scss/at-mixin-pattern */ /* stylelint-disable-next-line scss/at-mixin-pattern */ /* stylelint-disable-next-line scss/at-mixin-pattern */ /* stylelint-disable-next-line scss/at-mixin-pattern */ :root, :host { --body-bg-offset: hsl(0deg 0% 100%); --border-radius-medium: 6px; --border-radius-heavy: 10px; --border-radius-100: 2px; --border-radius-200: 4px; --border-radius-400: 8px; --border-radius-500: 16px; --border-radius-600: 24px; --border-radius: var(--border-radius-200); --box-shadow: var(--box-shadow-100); --box-shadow-medium: var(--box-shadow-200); --box-shadow-heavy: var(--box-shadow-200); --box-shadow-100: 0px 4px 8px 0px hsla(var(--hsl-value-grey-900-neutral) / 8%), 0px 4px 8px 0px hsla(var(--hsl-value-grey-900-neutral) / 8%); --box-shadow-200: 0px 8px 12px 4px hsla(var(--hsl-value-grey-900-neutral) / 8%), 0px 4px 8px 0px hsla(var(--hsl-value-grey-900-neutral) / 8%); --box-shadow-300: 0px 12px 16px 4px hsla(var(--hsl-value-grey-1000-neutral) / 16%), 0px 4px 8px 0px hsla(var(--hsl-value-grey-1000-neutral) / 8%); --z-index-controls: 100; --z-index-content: 200; --z-index-popover: 400; --z-index-popover-arrow: 500; --z-index-dropdown: 600; --z-index-overlay: 800; --z-index-modal: 1000; --container-small: 400px; --container-medium: 600px; --container-large: 900px; --container-xl: 1200px; --s-0: 0rem; --s-25: 0.25rem; --s-50: 0.5rem; --s-75: 0.75rem; --s-100: 1rem; --s-150: 1.5rem; --s-200: 2rem; --s-225: 2.25rem; --s-250: 2.5rem; --s-300: 3rem; --s-350: 3.5rem; --s-400: 4rem; --s-500: 5rem; --s-600: 6rem; --s-800: 8rem; --s-1000: 10rem; --s-6xl: 64px; --s-5xl: 56px; --s-4xl: 48px; --s-3xl: 40px; --s-2xl: 36px; --s-xl: 32px; --s-large: 24px; --s-medium: 16px; --s-small: 8px; --s-xs: 4px; --ghost-text-color: var(--neutral-grey-500); --link-color: var(--neutral-grey-600); --t-base: 16px; --t-small: 14px; --t-error: var(--interface-error); --t-dangerous: var(--interface-error); --t-font-size-75: 0.75rem; --t-font-size-87: 0.875rem; --t-font-size-100: 1rem; --t-font-size-125: 1.25rem; --t-font-size-150: 1.5rem; --t-font-size-200: 2rem; --t-font-size-250: 2.5rem; --t-font-size-300: 3rem; --t-font-size-400: 4rem; --t-font-size-450: 4.5rem; --t-font-size-500: 5rem; --t-font-size-600: 6rem; --t-font-size-750: 7.5rem; --t-font-stack: "proxima-nova", sans-serif; --t-font-stack-monospace: "SFMono-Regular", consolas, "Liberation Mono", menlo, courier, monospace; --t-font-weight-400: 400; --t-font-weight-500: 500; --t-font-weight-600: 600; --t-font-weight-700: 700; --t-normal: 400; --t-heavy: 700; --t-large: 20px; --t-letter-spacing-base: normal; --t-letter-spacing-tight: -0.02em; --t-line-height: 1.5; --t-line-height-100: 1rem; --t-line-height-125: 1.25rem; --t-line-height-150: 1.5rem; --t-line-height-175: 1.75rem; --t-line-height-200: 2rem; --t-line-height-250: 2.5rem; --t-line-height-300: 3rem; --t-line-height-350: 3.5rem; --t-line-height-450: 4.5rem; --t-line-height-500: 5rem; --t-line-height-600: 6rem; --t-line-height-750: 7.5rem; --t-medium: 16px; --t-regular: 400; --t-rule: 1px solid var(--t-rule-color); --t-rule-color: var(--neutral-grey-50); --t-rule-thick: 2px solid var(--interface-secondary-x-light); --t-xl: 30px; --text-color: var(--neutral-grey-800); --focus-outline-blue: #015fcc; --interface-black: #000; --interface-white: #fff; --hsl-value-error: 350deg 70% 50%; --hsl-value-error-light: 350deg 90% 72%; --hsl-value-error-x-light: 350deg 100% 95%; --hsl-value-error-dark: 359deg 100% 25%; --hsl-value-highlight: 42deg 100% 66%; --hsl-value-highlight-light: 42deg 100% 75%; --hsl-value-highlight-x-light: 42deg 100% 94%; --hsl-value-success: 146deg 70% 46%; --hsl-value-success-light: 146deg 61% 60%; --hsl-value-success-x-light: 146deg 63% 89%; --hsl-value-success-dark: 146deg 70% 35%; --hsl-value-data-viz-blue-00-D: 219deg 100% 27%; --hsl-value-data-viz-blue-10-D: 221deg 93% 33%; --hsl-value-data-viz-blue-20-D: 222deg 86% 39%; --hsl-value-data-viz-blue-30-D: 224deg 79% 45%; --hsl-value-data-viz-blue-40-D: 226deg 80% 52%; --hsl-value-data-viz-blue-50-F: 227deg 98% 59%; --hsl-value-data-viz-blue-60-F: 226deg 100% 61%; --hsl-value-data-viz-blue-70-F: 224deg 100% 68%; --hsl-value-data-viz-blue-80-L: 222deg 100% 75%; --hsl-value-data-viz-blue-90-L: 221deg 100% 77%; --hsl-value-data-viz-blue-100-L: 219deg 100% 79%; --hsl-value-data-viz-blue-110-L: 219deg 100% 82%; --hsl-value-data-viz-blue-120-L: 218deg 100% 84%; --hsl-value-data-viz-blue-130-L: 217deg 100% 87%; --hsl-value-data-viz-blue-140-L: 216deg 100% 89%; --hsl-value-data-viz-blue-150-L: 216deg 100% 92%; --hsl-value-data-viz-cyan-00-D: 218deg 100% 26%; --hsl-value-data-viz-cyan-10-D: 215deg 100% 29%; --hsl-value-data-viz-cyan-20-D: 212deg 100% 32%; --hsl-value-data-viz-cyan-30-D: 209deg 100% 34%; --hsl-value-data-viz-cyan-40-D: 206deg 100% 37%; --hsl-value-data-viz-cyan-50-D: 203deg 100% 40%; --hsl-value-data-viz-cyan-60-F: 200deg 100% 43%; --hsl-value-data-viz-cyan-70-F: 197deg 100% 45%; --hsl-value-data-viz-cyan-80-L: 194deg 100% 48%; --hsl-value-data-viz-cyan-90-L: 192deg 100% 50%; --hsl-value-data-viz-cyan-100-L: 192deg 100% 58%; --hsl-value-data-viz-cyan-110-L: 193deg 100% 66%; --hsl-value-data-viz-cyan-120-L: 194deg 100% 74%; --hsl-value-data-viz-cyan-130-L: 194deg 100% 83%; --hsl-value-data-viz-cyan-140-L: 195deg 100% 90%; --hsl-value-data-viz-cyan-150-L: 195deg 100% 92%; --hsl-value-data-viz-green-00-D: 160deg 100% 13%; --hsl-value-data-viz-green-10-D: 157deg 91% 18%; --hsl-value-data-viz-green-20-D: 153deg 83% 23%; --hsl-value-data-viz-green-30-D: 150deg 77% 29%; --hsl-value-data-viz-green-40-D: 146deg 70% 35%; --hsl-value-data-viz-green-50-D: 144deg 72% 38%; --hsl-value-data-viz-green-60-F: 141deg 73% 41%; --hsl-value-data-viz-green-70-F: 139deg 55% 51%; --hsl-value-data-viz-green-80-L: 137deg 58% 61%; --hsl-value-data-viz-green-90-L: 136deg 60% 66%; --hsl-value-data-viz-green-100-L: 134deg 62% 71%; --hsl-value-data-viz-green-110-L: 133deg 65% 76%; --hsl-value-data-viz-green-120-L: 132deg 70% 82%; --hsl-value-data-viz-green-130-L: 131deg 78% 87%; --hsl-value-data-viz-green-140-L: 130deg 100% 93%; --hsl-value-data-viz-green-150-L: 130deg 100% 95%; --hsl-value-data-viz-grey-00-D: 240deg 29% 1%; --hsl-value-data-viz-grey-10-D: 240deg 29% 2%; --hsl-value-data-viz-grey-20-D: 240deg 29% 3%; --hsl-value-data-viz-grey-30-D: 240deg 29% 5%; --hsl-value-data-viz-grey-40-D: 240deg 26% 8%; --hsl-value-data-viz-grey-50-D: 236deg 25% 12%; --hsl-value-data-viz-grey-60-D: 233deg 24% 15%; --hsl-value-data-viz-grey-70-D: 231deg 22% 18%; --hsl-value-data-viz-grey-80-D: 230deg 21% 21%; --hsl-value-data-viz-grey-90-D: 226deg 20% 25%; --hsl-value-data-viz-grey-100-D: 224deg 19% 28%; --hsl-value-data-viz-grey-110-D: 223deg 18% 32%; --hsl-value-data-viz-grey-120-D: 220deg 17% 35%; --hsl-value-data-viz-grey-130-D: 219deg 16% 39%; --hsl-value-data-viz-grey-140-D: 217deg 14% 42%; --hsl-value-data-viz-grey-150-D: 214deg 14% 46%; --hsl-value-data-viz-grey-160-D: 214deg 13% 51%; --hsl-value-data-viz-grey-170-D: 216deg 14% 55%; --hsl-value-data-viz-grey-180-D: 216deg 16% 60%; --hsl-value-data-viz-grey-190-L: 214deg 17% 65%; --hsl-value-data-viz-grey-200-L: 215deg 19% 70%; --hsl-value-data-viz-grey-210-L: 214deg 22% 75%; --hsl-value-data-viz-grey-220-L: 216deg 23% 77%; --hsl-value-data-viz-grey-230-L: 218deg 25% 80%; --hsl-value-data-viz-grey-240-L: 218deg 29% 83%; --hsl-value-data-viz-grey-250-L: 217deg 32% 86%; --hsl-value-data-viz-grey-260-L: 218deg 38% 89%; --hsl-value-data-viz-grey-270-L: 219deg 45% 91%; --hsl-value-data-viz-grey-280-L: 221deg 100% 97%; --hsl-value-data-viz-grey-290-L: 221deg 100% 99%; --hsl-value-data-viz-orange-00-D: 8deg 100% 25%; --hsl-value-data-viz-orange-10-D: 12deg 100% 29%; --hsl-value-data-viz-orange-20-D: 17deg 100% 33%; --hsl-value-data-viz-orange-30-D: 21deg 100% 37%; --hsl-value-data-viz-orange-40-D: 25deg 100% 42%; --hsl-value-data-viz-orange-50-F: 29deg 100% 46%; --hsl-value-data-viz-orange-60-F: 33deg 100% 50%; --hsl-value-data-viz-orange-70-F: 31deg 100% 59%; --hsl-value-data-viz-orange-80-L: 28deg 100% 66%; --hsl-value-data-viz-orange-90-L: 25deg 100% 71%; --hsl-value-data-viz-orange-100-L: 22deg 100% 76%; --hsl-value-data-viz-orange-110-L: 19deg 100% 79%; --hsl-value-data-viz-orange-120-L: 15deg 100% 83%; --hsl-value-data-viz-orange-130-L: 11deg 100% 87%; --hsl-value-data-viz-orange-140-L: 9deg 100% 91%; --hsl-value-data-viz-orange-150-L: 9deg 100% 95%; --hsl-value-data-viz-pink-00-D: 306deg 100% 25%; --hsl-value-data-viz-pink-10-D: 303deg 99% 29%; --hsl-value-data-viz-pink-20-D: 301deg 98% 32%; --hsl-value-data-viz-pink-30-D: 299deg 96% 35%; --hsl-value-data-viz-pink-40-D: 296deg 85% 40%; --hsl-value-data-viz-pink-50-D: 294deg 67% 48%; --hsl-value-data-viz-pink-60-F: 291deg 70% 57%; --hsl-value-data-viz-pink-70-F: 288deg 79% 67%; --hsl-value-data-viz-pink-80-L: 290deg 84% 74%; --hsl-value-data-viz-pink-90-L: 292deg 85% 77%; --hsl-value-data-viz-pink-100-L: 295deg 87% 80%; --hsl-value-data-viz-pink-110-L: 296deg 89% 83%; --hsl-value-data-viz-pink-120-L: 299deg 89% 85%; --hsl-value-data-viz-pink-130-L: 301deg 93% 88%; --hsl-value-data-viz-pink-140-L: 303deg 100% 92%; --hsl-value-data-viz-pink-150-L: 303deg 100% 94%; --hsl-value-data-viz-purple-00-D: 275deg 100% 29%; --hsl-value-data-viz-purple-10-D: 274deg 85% 34%; --hsl-value-data-viz-purple-20-D: 274deg 72% 38%; --hsl-value-data-viz-purple-30-D: 274deg 61% 43%; --hsl-value-data-viz-purple-40-D: 274deg 51% 48%; --hsl-value-data-viz-purple-50-D: 273deg 50% 54%; --hsl-value-data-viz-purple-60-F: 273deg 52% 60%; --hsl-value-data-viz-purple-70-F: 272deg 55% 66%; --hsl-value-data-viz-purple-80-L: 272deg 58% 73%; --hsl-value-data-viz-purple-90-L: 272deg 61% 76%; --hsl-value-data-viz-purple-100-L: 271deg 63% 80%; --hsl-value-data-viz-purple-110-L: 272deg 66% 83%; --hsl-value-data-viz-purple-120-L: 272deg 71% 86%; --hsl-value-data-viz-purple-130-L: 271deg 80% 90%; --hsl-value-data-viz-purple-140-L: 271deg 100% 94%; --hsl-value-data-viz-purple-150-L: 271deg 100% 95%; --hsl-value-data-viz-teal-00-D: 190deg 100% 17%; --hsl-value-data-viz-teal-10-D: 188deg 100% 20%; --hsl-value-data-viz-teal-20-D: 186deg 100% 23%; --hsl-value-data-viz-teal-30-D: 184deg 100% 26%; --hsl-value-data-viz-teal-40-D: 182deg 100% 29%; --hsl-value-data-viz-teal-50-D: 181deg 100% 32%; --hsl-value-data-viz-teal-60-F: 178deg 100% 35%; --hsl-value-data-viz-teal-70-F: 177deg 79% 43%; --hsl-value-data-viz-teal-80-L: 175deg 63% 53%; --hsl-value-data-viz-teal-90-L: 173deg 68% 64%; --hsl-value-data-viz-teal-100-L: 172deg 71% 68%; --hsl-value-data-viz-teal-110-L: 171deg 76% 74%; --hsl-value-data-viz-teal-120-L: 170deg 83% 80%; --hsl-value-data-viz-teal-130-L: 170deg 90% 85%; --hsl-value-data-viz-teal-140-L: 169deg 100% 88%; --hsl-value-data-viz-teal-150-L: 169deg 100% 91%; --hsl-value-data-viz-red-00-D: 359deg 100% 25%; --hsl-value-data-viz-red-10-D: 358deg 100% 28%; --hsl-value-data-viz-red-20-D: 356deg 100% 31%; --hsl-value-data-viz-red-30-D: 355deg 100% 34%; --hsl-value-data-viz-red-40-D: 353deg 88% 39%; --hsl-value-data-viz-red-50-D: 352deg 74% 46%; --hsl-value-data-viz-red-60-F: 350deg 70% 55%; --hsl-value-data-viz-red-70-F: 351deg 73% 63%; --hsl-value-data-viz-red-80-L: 352deg 78% 68%; --hsl-value-data-viz-red-90-L: 354deg 79% 72%; --hsl-value-data-viz-red-100-L: 355deg 80% 76%; --hsl-value-data-viz-red-110-L: 356deg 82% 80%; --hsl-value-data-viz-red-120-L: 357deg 85% 84%; --hsl-value-data-viz-red-130-L: 358deg 90% 88%; --hsl-value-data-viz-red-140-L: 359deg 100% 92%; --hsl-value-data-viz-red-150-L: 358deg 100% 95%; --hsl-value-data-viz-yellow-00-D: 46deg 100% 37%; --hsl-value-data-viz-yellow-10-F: 46deg 99% 39%; --hsl-value-data-viz-yellow-20-F: 47deg 97% 42%; --hsl-value-data-viz-yellow-30-F: 48deg 96% 44%; --hsl-value-data-viz-yellow-40-F: 48deg 95% 47%; --hsl-value-data-viz-yellow-50-F: 49deg 91% 50%; --hsl-value-data-viz-yellow-60-F: 50deg 100% 60%; --hsl-value-data-viz-yellow-70-F: 50deg 100% 67%; --hsl-value-data-viz-yellow-80-L: 51deg 100% 74%; --hsl-value-data-viz-yellow-90-L: 50deg 100% 77%; --hsl-value-data-viz-yellow-100-L: 49deg 100% 80%; --hsl-value-data-viz-yellow-110-L: 49deg 100% 84%; --hsl-value-data-viz-yellow-120-L: 48deg 100% 87%; --hsl-value-data-viz-yellow-130-L: 47deg 100% 90%; --hsl-value-data-viz-yellow-140-L: 47deg 100% 93%; --hsl-value-data-viz-yellow-150-L: 47deg 100% 95%; --interface-error: hsl(var(--hsl-value-error)); --interface-error-light: hsl(var(--hsl-value-error-light)); --interface-error-x-light: hsl(var(--hsl-value-error-x-light)); --interface-error-dark: hsl(var(--hsl-value-error-dark)); --interface-highlight: hsl(var(--hsl-value-highlight)); --interface-highlight-light: hsl(var(--hsl-value-highlight-light)); --interface-highlight-x-light: hsl(var(--hsl-value-highlight-x-light)); --interface-success: hsl(var(--hsl-value-success)); --interface-success-light: hsl(var(--hsl-value-success-light)); --interface-success-x-light: hsl(var(--hsl-value-success-x-light)); --interface-success-dark: hsl(var(--hsl-value-success-dark)); --interface-blue: hsl(var(--hsl-value-blue-500-saturated)); --data-viz-blue-00-D: hsl(var(--hsl-value-data-viz-blue-00-D)); --data-viz-blue-10-D: hsl(var(--hsl-value-data-viz-blue-10-D)); --data-viz-blue-20-D: hsl(var(--hsl-value-data-viz-blue-20-D)); --data-viz-blue-30-D: hsl(var(--hsl-value-data-viz-blue-30-D)); --data-viz-blue-40-D: hsl(var(--hsl-value-data-viz-blue-40-D)); --data-viz-blue-50-F: hsl(var(--hsl-value-data-viz-blue-50-F)); --data-viz-blue-60-F: hsl(var(--hsl-value-data-viz-blue-60-F)); --data-viz-blue-70-F: hsl(var(--hsl-value-data-viz-blue-70-F)); --data-viz-blue-80-L: hsl(var(--hsl-value-data-viz-blue-80-L)); --data-viz-blue-90-L: hsl(var(--hsl-value-data-viz-blue-90-L)); --data-viz-blue-100-L: hsl(var(--hsl-value-data-viz-blue-100-L)); --data-viz-blue-110-L: hsl(var(--hsl-value-data-viz-blue-110-L)); --data-viz-blue-120-L: hsl(var(--hsl-value-data-viz-blue-120-L)); --data-viz-blue-130-L: hsl(var(--hsl-value-data-viz-blue-130-L)); --data-viz-blue-140-L: hsl(var(--hsl-value-data-viz-blue-140-L)); --data-viz-blue-150-L: hsl(var(--hsl-value-data-viz-blue-150-L)); --data-viz-cyan-00-D: hsl(var(--hsl-value-data-viz-cyan-00-D)); --data-viz-cyan-10-D: hsl(var(--hsl-value-data-viz-cyan-10-D)); --data-viz-cyan-20-D: hsl(var(--hsl-value-data-viz-cyan-20-D)); --data-viz-cyan-30-D: hsl(var(--hsl-value-data-viz-cyan-30-D)); --data-viz-cyan-40-D: hsl(var(--hsl-value-data-viz-cyan-40-D)); --data-viz-cyan-50-D: hsl(var(--hsl-value-data-viz-cyan-50-D)); --data-viz-cyan-60-F: hsl(var(--hsl-value-data-viz-cyan-60-F)); --data-viz-cyan-70-F: hsl(var(--hsl-value-data-viz-cyan-70-F)); --data-viz-cyan-80-L: hsl(var(--hsl-value-data-viz-cyan-80-L)); --data-viz-cyan-90-L: hsl(var(--hsl-value-data-viz-cyan-90-L)); --data-viz-cyan-100-L: hsl(var(--hsl-value-data-viz-cyan-100-L)); --data-viz-cyan-110-L: hsl(var(--hsl-value-data-viz-cyan-110-L)); --data-viz-cyan-120-L: hsl(var(--hsl-value-data-viz-cyan-120-L)); --data-viz-cyan-130-L: hsl(var(--hsl-value-data-viz-cyan-130-L)); --data-viz-cyan-140-L: hsl(var(--hsl-value-data-viz-cyan-140-L)); --data-viz-cyan-150-L: hsl(var(--hsl-value-data-viz-cyan-150-L)); --data-viz-green-00-D: hsl(var(--hsl-value-data-viz-green-00-D)); --data-viz-green-10-D: hsl(var(--hsl-value-data-viz-green-10-D)); --data-viz-green-20-D: hsl(var(--hsl-value-data-viz-green-20-D)); --data-viz-green-30-D: hsl(var(--hsl-value-data-viz-green-30-D)); --data-viz-green-40-D: hsl(var(--hsl-value-data-viz-green-40-D)); --data-viz-green-50-D: hsl(var(--hsl-value-data-viz-green-50-D)); --data-viz-green-60-F: hsl(var(--hsl-value-data-viz-green-60-F)); --data-viz-green-70-F: hsl(var(--hsl-value-data-viz-green-70-F)); --data-viz-green-80-L: hsl(var(--hsl-value-data-viz-green-80-L)); --data-viz-green-90-L: hsl(var(--hsl-value-data-viz-green-90-L)); --data-viz-green-100-L: hsl(var(--hsl-value-data-viz-green-100-L)); --data-viz-green-110-L: hsl(var(--hsl-value-data-viz-green-110-L)); --data-viz-green-120-L: hsl(var(--hsl-value-data-viz-green-120-L)); --data-viz-green-130-L: hsl(var(--hsl-value-data-viz-green-130-L)); --data-viz-green-140-L: hsl(var(--hsl-value-data-viz-green-140-L)); --data-viz-green-150-L: hsl(var(--hsl-value-data-viz-green-150-L)); --data-viz-grey-00-D: hsl(var(--hsl-value-data-viz-grey-00-D)); --data-viz-grey-10-D: hsl(var(--hsl-value-data-viz-grey-10-D)); --data-viz-grey-20-D: hsl(var(--hsl-value-data-viz-grey-20-D)); --data-viz-grey-30-D: hsl(var(--hsl-value-data-viz-grey-30-D)); --data-viz-grey-40-D: hsl(var(--hsl-value-data-viz-grey-40-D)); --data-viz-grey-50-D: hsl(var(--hsl-value-data-viz-grey-50-D)); --data-viz-grey-60-D: hsl(var(--hsl-value-data-viz-grey-60-D)); --data-viz-grey-70-D: hsl(var(--hsl-value-data-viz-grey-70-D)); --data-viz-grey-80-D: hsl(var(--hsl-value-data-viz-grey-80-D)); --data-viz-grey-90-D: hsl(var(--hsl-value-data-viz-grey-90-D)); --data-viz-grey-100-D: hsl(var(--hsl-value-data-viz-grey-100-D)); --data-viz-grey-110-D: hsl(var(--hsl-value-data-viz-grey-110-D)); --data-viz-grey-120-D: hsl(var(--hsl-value-data-viz-grey-120-D)); --data-viz-grey-130-D: hsl(var(--hsl-value-data-viz-grey-130-D)); --data-viz-grey-140-D: hsl(var(--hsl-value-data-viz-grey-140-D)); --data-viz-grey-150-D: hsl(var(--hsl-value-data-viz-grey-150-D)); --data-viz-grey-160-D: hsl(var(--hsl-value-data-viz-grey-160-D)); --data-viz-grey-170-D: hsl(var(--hsl-value-data-viz-grey-170-D)); --data-viz-grey-180-D: hsl(var(--hsl-value-data-viz-grey-180-D)); --data-viz-grey-190-L: hsl(var(--hsl-value-data-viz-grey-190-L)); --data-viz-grey-200-L: hsl(var(--hsl-value-data-viz-grey-200-L)); --data-viz-grey-210-L: hsl(var(--hsl-value-data-viz-grey-210-L)); --data-viz-grey-220-L: hsl(var(--hsl-value-data-viz-grey-220-L)); --data-viz-grey-230-L: hsl(var(--hsl-value-data-viz-grey-230-L)); --data-viz-grey-240-L: hsl(var(--hsl-value-data-viz-grey-240-L)); --data-viz-grey-250-L: hsl(var(--hsl-value-data-viz-grey-250-L)); --data-viz-grey-260-L: hsl(var(--hsl-value-data-viz-grey-260-L)); --data-viz-grey-270-L: hsl(var(--hsl-value-data-viz-grey-270-L)); --data-viz-grey-280-L: hsl(var(--hsl-value-data-viz-grey-280-L)); --data-viz-grey-290-L: hsl(var(--hsl-value-data-viz-grey-290-L)); --data-viz-orange-00-D: hsl(var(--hsl-value-data-viz-orange-00-D)); --data-viz-orange-10-D: hsl(var(--hsl-value-data-viz-orange-10-D)); --data-viz-orange-20-D: hsl(var(--hsl-value-data-viz-orange-20-D)); --data-viz-orange-30-D: hsl(var(--hsl-value-data-viz-orange-30-D)); --data-viz-orange-40-D: hsl(var(--hsl-value-data-viz-orange-40-D)); --data-viz-orange-50-F: hsl(var(--hsl-value-data-viz-orange-50-F)); --data-viz-orange-60-F: hsl(var(--hsl-value-data-viz-orange-60-F)); --data-viz-orange-70-F: hsl(var(--hsl-value-data-viz-orange-70-F)); --data-viz-orange-80-L: hsl(var(--hsl-value-data-viz-orange-80-L)); --data-viz-orange-90-L: hsl(var(--hsl-value-data-viz-orange-90-L)); --data-viz-orange-100-L: hsl(var(--hsl-value-data-viz-orange-100-L)); --data-viz-orange-110-L: hsl(var(--hsl-value-data-viz-orange-110-L)); --data-viz-orange-120-L: hsl(var(--hsl-value-data-viz-orange-120-L)); --data-viz-orange-130-L: hsl(var(--hsl-value-data-viz-orange-130-L)); --data-viz-orange-140-L: hsl(var(--hsl-value-data-viz-orange-140-L)); --data-viz-orange-150-L: hsl(var(--hsl-value-data-viz-orange-150-L)); --data-viz-pink-00-D: hsl(var(--hsl-value-data-viz-pink-00-D)); --data-viz-pink-10-D: hsl(var(--hsl-value-data-viz-pink-10-D)); --data-viz-pink-20-D: hsl(var(--hsl-value-data-viz-pink-20-D)); --data-viz-pink-30-D: hsl(var(--hsl-value-data-viz-pink-30-D)); --data-viz-pink-40-D: hsl(var(--hsl-value-data-viz-pink-40-D)); --data-viz-pink-50-D: hsl(var(--hsl-value-data-viz-pink-50-D)); --data-viz-pink-60-F: hsl(var(--hsl-value-data-viz-pink-60-F)); --data-viz-pink-70-F: hsl(var(--hsl-value-data-viz-pink-70-F)); --data-viz-pink-80-L: hsl(var(--hsl-value-data-viz-pink-80-L)); --data-viz-pink-90-L: hsl(var(--hsl-value-data-viz-pink-90-L)); --data-viz-pink-100-L: hsl(var(--hsl-value-data-viz-pink-100-L)); --data-viz-pink-110-L: hsl(var(--hsl-value-data-viz-pink-110-L)); --data-viz-pink-120-L: hsl(var(--hsl-value-data-viz-pink-120-L)); --data-viz-pink-130-L: hsl(var(--hsl-value-data-viz-pink-130-L)); --data-viz-pink-140-L: hsl(var(--hsl-value-data-viz-pink-140-L)); --data-viz-pink-150-L: hsl(var(--hsl-value-data-viz-pink-150-L)); --data-viz-purple-00-D: hsl(var(--hsl-value-data-viz-purple-00-D)); --data-viz-purple-10-D: hsl(var(--hsl-value-data-viz-purple-10-D)); --data-viz-purple-20-D: hsl(var(--hsl-value-data-viz-purple-20-D)); --data-viz-purple-30-D: hsl(var(--hsl-value-data-viz-purple-30-D)); --data-viz-purple-40-D: hsl(var(--hsl-value-data-viz-purple-40-D)); --data-viz-purple-50-D: hsl(var(--hsl-value-data-viz-purple-50-D)); --data-viz-purple-60-F: hsl(var(--hsl-value-data-viz-purple-60-F)); --data-viz-purple-70-F: hsl(var(--hsl-value-data-viz-purple-70-F)); --data-viz-purple-80-L: hsl(var(--hsl-value-data-viz-purple-80-L)); --data-viz-purple-90-L: hsl(var(--hsl-value-data-viz-purple-90-L)); --data-viz-purple-100-L: hsl(var(--hsl-value-data-viz-purple-100-L)); --data-viz-purple-110-L: hsl(var(--hsl-value-data-viz-purple-110-L)); --data-viz-purple-120-L: hsl(var(--hsl-value-data-viz-purple-120-L)); --data-viz-purple-130-L: hsl(var(--hsl-value-data-viz-purple-130-L)); --data-viz-purple-140-L: hsl(var(--hsl-value-data-viz-purple-140-L)); --data-viz-purple-150-L: hsl(var(--hsl-value-data-viz-purple-150-L)); --data-viz-teal-00-D: hsl(var(--hsl-value-data-viz-teal-00-D)); --data-viz-teal-10-D: hsl(var(--hsl-value-data-viz-teal-10-D)); --data-viz-teal-20-D: hsl(var(--hsl-value-data-viz-teal-20-D)); --data-viz-teal-30-D: hsl(var(--hsl-value-data-viz-teal-30-D)); --data-viz-teal-40-D: hsl(var(--hsl-value-data-viz-teal-40-D)); --data-viz-teal-50-D: hsl(var(--hsl-value-data-viz-teal-50-D)); --data-viz-teal-60-F: hsl(var(--hsl-value-data-viz-teal-60-F)); --data-viz-teal-70-F: hsl(var(--hsl-value-data-viz-teal-70-F)); --data-viz-teal-80-L: hsl(var(--hsl-value-data-viz-teal-80-L)); --data-viz-teal-90-L: hsl(var(--hsl-value-data-viz-teal-90-L)); --data-viz-teal-100-L: hsl(var(--hsl-value-data-viz-teal-100-L)); --data-viz-teal-110-L: hsl(var(--hsl-value-data-viz-teal-110-L)); --data-viz-teal-120-L: hsl(var(--hsl-value-data-viz-teal-120-L)); --data-viz-teal-130-L: hsl(var(--hsl-value-data-viz-teal-130-L)); --data-viz-teal-140-L: hsl(var(--hsl-value-data-viz-teal-140-L)); --data-viz-teal-150-L: hsl(var(--hsl-value-data-viz-teal-150-L)); --data-viz-red-00-D: hsl(var(--hsl-value-data-viz-red-00-D)); --data-viz-red-10-D: hsl(var(--hsl-value-data-viz-red-10-D)); --data-viz-red-20-D: hsl(var(--hsl-value-data-viz-red-20-D)); --data-viz-red-30-D: hsl(var(--hsl-value-data-viz-red-30-D)); --data-viz-red-40-D: hsl(var(--hsl-value-data-viz-red-40-D)); --data-viz-red-50-D: hsl(var(--hsl-value-data-viz-red-50-D)); --data-viz-red-60-F: hsl(var(--hsl-value-data-viz-red-60-F)); --data-viz-red-70-F: hsl(var(--hsl-value-data-viz-red-70-F)); --data-viz-red-80-L: hsl(var(--hsl-value-data-viz-red-80-L)); --data-viz-red-90-L: hsl(var(--hsl-value-data-viz-red-90-L)); --data-viz-red-100-L: hsl(var(--hsl-value-data-viz-red-100-L)); --data-viz-red-110-L: hsl(var(--hsl-value-data-viz-red-110-L)); --data-viz-red-120-L: hsl(var(--hsl-value-data-viz-red-120-L)); --data-viz-red-130-L: hsl(var(--hsl-value-data-viz-red-130-L)); --data-viz-red-140-L: hsl(var(--hsl-value-data-viz-red-140-L)); --data-viz-red-150-L: hsl(var(--hsl-value-data-viz-red-150-L)); --data-viz-yellow-00-D: hsl(var(--hsl-value-data-viz-yellow-00-D)); --data-viz-yellow-10-F: hsl(var(--hsl-value-data-viz-yellow-10-F)); --data-viz-yellow-20-F: hsl(var(--hsl-value-data-viz-yellow-20-F)); --data-viz-yellow-30-F: hsl(var(--hsl-value-data-viz-yellow-30-F)); --data-viz-yellow-40-F: hsl(var(--hsl-value-data-viz-yellow-40-F)); --data-viz-yellow-50-F: hsl(var(--hsl-value-data-viz-yellow-50-F)); --data-viz-yellow-60-F: hsl(var(--hsl-value-data-viz-yellow-60-F)); --data-viz-yellow-70-F: hsl(var(--hsl-value-data-viz-yellow-70-F)); --data-viz-yellow-80-L: hsl(var(--hsl-value-data-viz-yellow-80-L)); --data-viz-yellow-90-L: hsl(var(--hsl-value-data-viz-yellow-90-L)); --data-viz-yellow-100-L: hsl(var(--hsl-value-data-viz-yellow-100-L)); --data-viz-yellow-110-L: hsl(var(--hsl-value-data-viz-yellow-110-L)); --data-viz-yellow-120-L: hsl(var(--hsl-value-data-viz-yellow-120-L)); --data-viz-yellow-130-L: hsl(var(--hsl-value-data-viz-yellow-130-L)); --data-viz-yellow-140-L: hsl(var(--hsl-value-data-viz-yellow-140-L)); --data-viz-yellow-150-L: hsl(var(--hsl-value-data-viz-yellow-150-L)); --hsl-value-aqua-25-saturated: 195deg 100% 97%; --hsl-value-aqua-50-saturated: 195deg 95% 93%; --hsl-value-aqua-100-saturated: 196deg 93% 88%; --hsl-value-aqua-150-saturated: 196deg 93% 84%; --hsl-value-aqua-200-saturated: 196deg 94% 79%; --hsl-value-aqua-300-saturated: 196deg 95% 74%; --hsl-value-aqua-400-saturated: 196deg 96% 68%; --hsl-value-aqua-500-saturated: 194deg 98% 59%; --hsl-value-aqua-600-saturated: 194deg 68% 46%; --hsl-value-aqua-700-saturated: 194deg 67% 34%; --hsl-value-aqua-800-saturated: 194deg 67% 23%; --hsl-value-aqua-900-saturated: 195deg 67% 12%; --hsl-value-blue-25-saturated: 227deg 82% 98%; --hsl-value-blue-50-saturated: 227deg 100% 93%; --hsl-value-blue-100-saturated: 226deg 100% 87%; --hsl-value-blue-150-saturated: 228deg 100% 82%; --hsl-value-blue-200-saturated: 229deg 100% 77%; --hsl-value-blue-300-saturated: 229deg 100% 72%; --hsl-value-blue-400-saturated: 229deg 100% 66%; --hsl-value-blue-500-saturated: 227deg 98% 59%; --hsl-value-blue-600-saturated: 231deg 69% 50%; --hsl-value-blue-700-saturated: 234deg 76% 40%; --hsl-value-blue-800-saturated: 235deg 100% 28%; --hsl-value-blue-900-saturated: 231deg 100% 15%; --hsl-value-green-25-saturated: 144deg 45% 96%; --hsl-value-green-50-saturated: 140deg 49% 92%; --hsl-value-green-100-saturated: 142deg 48% 86%; --hsl-value-green-150-saturated: 142deg 49% 80%; --hsl-value-green-200-saturated: 141deg 48% 69%; --hsl-value-green-300-saturated: 134deg 44% 58%; --hsl-value-green-400-saturated: 128deg 40% 52%; --hsl-value-green-500-saturated: 125deg 48% 45%; --hsl-value-green-600-saturated: 128deg 49% 35%; --hsl-value-green-700-saturated: 129deg 50% 26%; --hsl-value-green-800-saturated: 130deg 49% 17%; --hsl-value-green-900-saturated: 125deg 48% 9%; --hsl-value-grey-00-neutral: 0deg 0% 100%; --hsl-value-grey-25-neutral: 0deg 0% 97%; --hsl-value-grey-50-neutral: 0deg 0% 93%; --hsl-value-grey-100-neutral: 0deg 0% 80%; --hsl-value-grey-150-neutral: 0deg 0% 72%; --hsl-value-grey-200-neutral: 0deg 0% 64%; --hsl-value-grey-300-neutral: 0deg 0% 56%; --hsl-value-grey-400-neutral: 0deg 0% 48%; --hsl-value-grey-500-neutral: 0deg 0% 39%; --hsl-value-grey-600-neutral: 0deg 0% 30%; --hsl-value-grey-650-neutral: 0deg 0% 24%; --hsl-value-grey-700-neutral: 0deg 0% 21%; --hsl-value-grey-750-neutral: 0deg 0% 15%; --hsl-value-grey-800-neutral: 0deg 0% 11%; --hsl-value-grey-900-neutral: 0deg 0% 6%; --hsl-value-grey-1000-neutral: 0deg 0% 0%; --hsl-value-orange-25-saturated: 15deg 89% 96%; --hsl-value-orange-50-saturated: 17deg 100% 91%; --hsl-value-orange-100-saturated: 17deg 100% 85%; --hsl-value-orange-150-saturated: 16deg 100% 80%; --hsl-value-orange-200-saturated: 15deg 100% 74%; --hsl-value-orange-300-saturated: 16deg 99% 68%; --hsl-value-orange-400-saturated: 16deg 97% 60%; --hsl-value-orange-500-saturated: 17deg 89% 52%; --hsl-value-orange-600-saturated: 14deg 76% 42%; --hsl-value-orange-700-saturated: 13deg 72% 32%; --hsl-value-orange-800-saturated: 12deg 69% 21%; --hsl-value-orange-900-saturated: 17deg 81% 10%; --hsl-value-pink-25-saturated: 317deg 100% 97%; --hsl-value-pink-50-saturated: 314deg 100% 94%; --hsl-value-pink-100-saturated: 308deg 88% 90%; --hsl-value-pink-150-saturated: 308deg 86% 86%; --hsl-value-pink-200-saturated: 307deg 85% 82%; --hsl-value-pink-300-saturated: 307deg 85% 77%; --hsl-value-pink-400-saturated: 308deg 88% 71%; --hsl-value-pink-500-saturated: 309deg 88% 64%; --hsl-value-pink-600-saturated: 309deg 50% 49%; --hsl-value-pink-700-saturated: 309deg 50% 35%; --hsl-value-pink-800-saturated: 309deg 50% 22%; --hsl-value-pink-900-saturated: 309deg 53% 10%; --hsl-value-purple-25-saturated: 288deg 42% 95%; --hsl-value-purple-50-saturated: 286deg 42% 88%; --hsl-value-purple-100-saturated: 288deg 41% 80%; --hsl-value-purple-150-saturated: 288deg 40% 73%; --hsl-value-purple-200-saturated: 287deg 40% 65%; --hsl-value-purple-300-saturated: 287deg 39% 57%; --hsl-value-purple-400-saturated: 287deg 40% 49%; --hsl-value-purple-500-saturated: 287deg 58% 41%; --hsl-value-purple-600-saturated: 286deg 55% 33%; --hsl-value-purple-700-saturated: 285deg 53% 24%; --hsl-value-purple-800-saturated: 285deg 52% 16%; --hsl-value-purple-900-saturated: 287deg 57% 8%; --hsl-value-red-25-saturated: 0deg 82% 98%; --hsl-value-red-50-saturated: 0deg 100% 93%; --hsl-value-red-100-saturated: 0deg 100% 87%; --hsl-value-red-150-saturated: 0deg 100% 82%; --hsl-value-red-200-saturated: 0deg 100% 77%; --hsl-value-red-300-saturated: 0deg 100% 72%; --hsl-value-red-400-saturated: 0deg 100% 66%; --hsl-value-red-500-saturated: 356deg 74% 52%; --hsl-value-red-600-saturated: 353deg 71% 40%; --hsl-value-red-700-saturated: 351deg 71% 30%; --hsl-value-red-800-saturated: 350deg 70% 20%; --hsl-value-red-900-saturated: 355deg 70% 10%; --hsl-value-teal-25-saturated: 161deg 73% 96%; --hsl-value-teal-50-saturated: 161deg 76% 90%; --hsl-value-teal-100-saturated: 160deg 74% 85%; --hsl-value-teal-150-saturated: 159deg 74% 79%; --hsl-value-teal-200-saturated: 159deg 74% 73%; --hsl-value-teal-300-saturated: 159deg 74% 67%; --hsl-value-teal-400-saturated: 159deg 74% 59%; --hsl-value-teal-500-saturated: 162deg 90% 46%; --hsl-value-teal-600-saturated: 164deg 100% 34%; --hsl-value-teal-700-saturated: 164deg 100% 24%; --hsl-value-teal-800-saturated: 164deg 100% 15%; --hsl-value-teal-900-saturated: 162deg 89% 7%; --hsl-value-yellow-25-saturated: 42deg 100% 97%; --hsl-value-yellow-50-saturated: 42deg 100% 92%; --hsl-value-yellow-100-saturated: 43deg 100% 87%; --hsl-value-yellow-150-saturated: 43deg 100% 83%; --hsl-value-yellow-200-saturated: 43deg 100% 78%; --hsl-value-yellow-300-saturated: 43deg 100% 73%; --hsl-value-yellow-400-saturated: 43deg 99% 68%; --hsl-value-yellow-500-saturated: 44deg 98% 62%; --hsl-value-yellow-600-saturated: 37deg 64% 52%; --hsl-value-yellow-700-saturated: 30deg 57% 41%; --hsl-value-yellow-800-saturated: 23deg 54% 28%; --hsl-value-yellow-900-saturated: 18deg 53% 10%; --neutral-grey-00: hsl(var(--hsl-value-grey-00-neutral)); --neutral-grey-25: hsl(var(--hsl-value-grey-25-neutral)); --neutral-grey-50: hsl(var(--hsl-value-grey-50-neutral)); --neutral-grey-100: hsl(var(--hsl-value-grey-100-neutral)); --neutral-grey-150: hsl(var(--hsl-value-grey-150-neutral)); --neutral-grey-200: hsl(var(--hsl-value-grey-200-neutral)); --neutral-grey-300: hsl(var(--hsl-value-grey-300-neutral)); --neutral-grey-400: hsl(var(--hsl-value-grey-400-neutral)); --neutral-grey-500: hsl(var(--hsl-value-grey-500-neutral)); --neutral-grey-600: hsl(var(--hsl-value-grey-600-neutral)); --neutral-grey-650: hsl(var(--hsl-value-grey-650-neutral)); --neutral-grey-700: hsl(var(--hsl-value-grey-700-neutral)); --neutral-grey-750: hsl(var(--hsl-value-grey-750-neutral)); --neutral-grey-800: hsl(var(--hsl-value-grey-800-neutral)); --neutral-grey-900: hsl(var(--hsl-value-grey-900-neutral)); --neutral-grey-1000: hsl(var(--hsl-value-grey-1000-neutral)); --saturated-aqua-25: hsl(var(--hsl-value-aqua-25-saturated)); --saturated-aqua-50: hsl(var(--hsl-value-aqua-50-saturated)); --saturated-aqua-100: hsl(var(--hsl-value-aqua-100-saturated)); --saturated-aqua-150: hsl(var(--hsl-value-aqua-150-saturated)); --saturated-aqua-200: hsl(var(--hsl-value-aqua-200-saturated)); --saturated-aqua-300: hsl(var(--hsl-value-aqua-300-saturated)); --saturated-aqua-400: hsl(var(--hsl-value-aqua-400-saturated)); --saturated-aqua-500: hsl(var(--hsl-value-aqua-500-saturated)); --saturated-aqua-600: hsl(var(--hsl-value-aqua-600-saturated)); --saturated-aqua-700: hsl(var(--hsl-value-aqua-700-saturated)); --saturated-aqua-800: hsl(var(--hsl-value-aqua-800-saturated)); --saturated-aqua-900: hsl(var(--hsl-value-aqua-900-saturated)); --saturated-blue-25: hsl(var(--hsl-value-blue-25-saturated)); --saturated-blue-50: hsl(var(--hsl-value-blue-50-saturated)); --saturated-blue-100: hsl(var(--hsl-value-blue-100-saturated)); --saturated-blue-150: hsl(var(--hsl-value-blue-150-saturated)); --saturated-blue-200: hsl(var(--hsl-value-blue-200-saturated)); --saturated-blue-300: hsl(var(--hsl-value-blue-300-saturated)); --saturated-blue-400: hsl(var(--hsl-value-blue-400-saturated)); --saturated-blue-500: hsl(var(--hsl-value-blue-500-saturated)); --saturated-blue-600: hsl(var(--hsl-value-blue-600-saturated)); --saturated-blue-700: hsl(var(--hsl-value-blue-700-saturated)); --saturated-blue-800: hsl(var(--hsl-value-blue-800-saturated)); --saturated-blue-900: hsl(var(--hsl-value-blue-900-saturated)); --saturated-green-25: hsl(var(--hsl-value-green-25-saturated)); --saturated-green-50: hsl(var(--hsl-value-green-50-saturated)); --saturated-green-100: hsl(var(--hsl-value-green-100-saturated)); --saturated-green-150: hsl(var(--hsl-value-green-150-saturated)); --saturated-green-200: hsl(var(--hsl-value-green-200-saturated)); --saturated-green-300: hsl(var(--hsl-value-green-300-saturated)); --saturated-green-400: hsl(var(--hsl-value-green-400-saturated)); --saturated-green-500: hsl(var(--hsl-value-green-500-saturated)); --saturated-green-600: hsl(var(--hsl-value-green-600-saturated)); --saturated-green-700: hsl(var(--hsl-value-green-700-saturated)); --saturated-green-800: hsl(var(--hsl-value-green-800-saturated)); --saturated-green-900: hsl(var(--hsl-value-green-900-saturated)); --saturated-orange-25: hsl(var(--hsl-value-orange-25-saturated)); --saturated-orange-50: hsl(var(--hsl-value-orange-50-saturated)); --saturated-orange-100: hsl(var(--hsl-value-orange-100-saturated)); --saturated-orange-150: hsl(var(--hsl-value-orange-150-saturated)); --saturated-orange-200: hsl(var(--hsl-value-orange-200-saturated)); --saturated-orange-300: hsl(var(--hsl-value-orange-300-saturated)); --saturated-orange-400: hsl(var(--hsl-value-orange-400-saturated)); --saturated-orange-500: hsl(var(--hsl-value-orange-500-saturated)); --saturated-orange-600: hsl(var(--hsl-value-orange-600-saturated)); --saturated-orange-700: hsl(var(--hsl-value-orange-700-saturated)); --saturated-orange-800: hsl(var(--hsl-value-orange-800-saturated)); --saturated-orange-900: hsl(var(--hsl-value-orange-900-saturated)); --saturated-pink-25: hsl(var(--hsl-value-pink-25-saturated)); --saturated-pink-50: hsl(var(--hsl-value-pink-50-saturated)); --saturated-pink-100: hsl(var(--hsl-value-pink-100-saturated)); --saturated-pink-150: hsl(var(--hsl-value-pink-150-saturated)); --saturated-pink-200: hsl(var(--hsl-value-pink-200-saturated)); --saturated-pink-300: hsl(var(--hsl-value-pink-300-saturated)); --saturated-pink-400: hsl(var(--hsl-value-pink-400-saturated)); --saturated-pink-500: hsl(var(--hsl-value-pink-500-saturated)); --saturated-pink-600: hsl(var(--hsl-value-pink-600-saturated)); --saturated-pink-700: hsl(var(--hsl-value-pink-700-saturated)); --saturated-pink-800: hsl(var(--hsl-value-pink-800-saturated)); --saturated-pink-900: hsl(var(--hsl-value-pink-900-saturated)); --saturated-purple-25: hsl(var(--hsl-value-purple-25-saturated)); --saturated-purple-50: hsl(var(--hsl-value-purple-50-saturated)); --saturated-purple-100: hsl(var(--hsl-value-purple-100-saturated)); --saturated-purple-150: hsl(var(--hsl-value-purple-150-saturated)); --saturated-purple-200: hsl(var(--hsl-value-purple-200-saturated)); --saturated-purple-300: hsl(var(--hsl-value-purple-300-saturated)); --saturated-purple-400: hsl(var(--hsl-value-purple-400-saturated)); --saturated-purple-500: hsl(var(--hsl-value-purple-500-saturated)); --saturated-purple-600: hsl(var(--hsl-value-purple-600-saturated)); --saturated-purple-700: hsl(var(--hsl-value-purple-700-saturated)); --saturated-purple-800: hsl(var(--hsl-value-purple-800-saturated)); --saturated-purple-900: hsl(var(--hsl-value-purple-900-saturated)); --saturated-red-25: hsl(var(--hsl-value-red-25-saturated)); --saturated-red-50: hsl(var(--hsl-value-red-50-saturated)); --saturated-red-100: hsl(var(--hsl-value-red-100-saturated)); --saturated-red-150: hsl(var(--hsl-value-red-150-saturated)); --saturated-red-200: hsl(var(--hsl-value-red-200-saturated)); --saturated-red-300: hsl(var(--hsl-value-red-300-saturated)); --saturated-red-400: hsl(var(--hsl-value-red-400-saturated)); --saturated-red-500: hsl(var(--hsl-value-red-500-saturated)); --saturated-red-600: hsl(var(--hsl-value-red-600-saturated)); --saturated-red-700: hsl(var(--hsl-value-red-700-saturated)); --saturated-red-800: hsl(var(--hsl-value-red-800-saturated)); --saturated-red-900: hsl(var(--hsl-value-red-900-saturated)); --saturated-teal-25: hsl(var(--hsl-value-teal-25-saturated)); --saturated-teal-50: hsl(var(--hsl-value-teal-50-saturated)); --saturated-teal-100: hsl(var(--hsl-value-teal-100-saturated)); --saturated-teal-150: hsl(var(--hsl-value-teal-150-saturated)); --saturated-teal-200: hsl(var(--hsl-value-teal-200-saturated)); --saturated-teal-300: hsl(var(--hsl-value-teal-300-saturated)); --saturated-teal-400: hsl(var(--hsl-value-teal-400-saturated)); --saturated-teal-500: hsl(var(--hsl-value-teal-500-saturated)); --saturated-teal-600: hsl(var(--hsl-value-teal-600-saturated)); --saturated-teal-700: hsl(var(--hsl-value-teal-700-saturated)); --saturated-teal-800: hsl(var(--hsl-value-teal-800-saturated)); --saturated-teal-900: hsl(var(--hsl-value-teal-900-saturated)); --saturated-yellow-25: hsl(var(--hsl-value-yellow-25-saturated)); --saturated-yellow-50: hsl(var(--hsl-value-yellow-50-saturated)); --saturated-yellow-100: hsl(var(--hsl-value-yellow-100-saturated)); --saturated-yellow-150: hsl(var(--hsl-value-yellow-150-saturated)); --saturated-yellow-200: hsl(var(--hsl-value-yellow-200-saturated)); --saturated-yellow-300: hsl(var(--hsl-value-yellow-300-saturated)); --saturated-yellow-400: hsl(var(--hsl-value-yellow-400-saturated)); --saturated-yellow-500: hsl(var(--hsl-value-yellow-500-saturated)); --saturated-yellow-600: hsl(var(--hsl-value-yellow-600-saturated)); --saturated-yellow-700: hsl(var(--hsl-value-yellow-700-saturated)); --saturated-yellow-800: hsl(var(--hsl-value-yellow-800-saturated)); --saturated-yellow-900: hsl(var(--hsl-value-yellow-900-saturated)); --card-dissolved-focus-bg: var(--card-dissolved-bg-focus); --card-dissolved-hover-bg: var(--card-dissolved-bg-hover); --dropdown-link-text-hover-color: var(--dropdown-link-text-color-hover); --accordion-body-border: var(--accordion-border); --accordion-border-color: var(--neutral-grey-100); --accordion-body-height: 0; --accordion-body-padding: var(--s-medium) var(--s-large); --accordion-body-preview-height: 50px; --accordion-border-width: 1px; --accordion-border: var(--accordion-border-width) solid var(--accordion-border-color); --accordion-preview-border: var(--accordion-border); --accordion-chevron-margin: 0 var(--s-100) 0 0; --accordion-trigger-hover-background-color: var(--neutral-grey-150); --accordion-trigger-box-shadow-color: var(--accordion-trigger-color); --accordion-trigger-box-shadow-spread: 2px; --accordion-trigger-box-shadow: 0 0 0 var(--accordion-trigger-box-shadow-spread) var(--accordion-trigger-box-shadow-color); --accordion-trigger-color: var(--neutral-grey-800); --accordion-trigger-display: block; --accordion-trigger-gap: var(--s-50); --accordion-trigger-text-margin: var(--s-75) 0 var(--s-75) var(--s-100); --accordion-trigger-text-size: var(--t-font-size-100); --accordion-trigger-text-weight: var(--t-font-weight-700); --accordion-trigger-width: 100%; --accordion-grid-areas: "accordion-body" "accordion-trigger"; --avatar-dimension: var(--s-3xl); --avatar-text-size: var(--t-base); --avatar-active-outline: 0; --avatar-bg: var(--neutral-grey-800); --avatar-bg-active: var(--neutral-grey-600); --avatar-bg-focused: var(--neutral-grey-900); --avatar-bg-light: var(--neutral-grey-50); --avatar-bg-light-active: var(--neutral-grey-300); --avatar-bg-light-hover: var(--neutral-grey-150); --avatar-bg-muted: var(--neutral-grey-300); --avatar-bg-muted-active: var(--neutral-grey-600); --avatar-bg-muted-hover: var(--neutral-grey-400); --avatar-border: 1px solid var(--avatar-bg); --avatar-border-light: transparent; --avatar-border-light-default: transparent; --avatar-border-light-hover: transparent; --avatar-border-muted: transparent; --avatar-box-shadow: 0px 0px 0px 0px transparent; --avatar-box-shadow-active: 0px 0px 0px 4px hsla(var(--hsl-value-grey-300-neutral) / 48%); --avatar-box-shadow-dark-active: 0px 0px 0px 4px transparent; --avatar-box-shadow-hover: 0px 0px 0px 4px hsla(var(--hsl-value-grey-400-neutral) / 24%); --avatar-outline-focus: solid 2px var(--neutral-grey-400); --avatar-font-weight: var(--t-font-weight-600); --avatar-font-color-light: var(--neutral-grey-900); --avatar-font-color-muted: var(--neutral-grey-50); --avatar-text: var(--neutral-grey-50); --backdrop-bg: hsl(0deg 0% 0% / 50%); --badge-text-bg: transparent; --badge-text-color: var(--text-color); --badge-bg-color: var(--interface-secondary-x-light); --banner-bg: var(--neutral-grey-50); --banner-border: var(--neutral-grey-300); --banner-border-radius: var(--border-radius-400); --banner-icon: var(--neutral-grey-700); --banner-close-active: var(--neutral-grey-400); --banner-close-focus-outline-color: var(--neutral-grey-500); --banner-close-focus-outline-offset: 3px; --banner-close-focus-outline-width: 2px; --banner-close-focus-outline-style: solid; --banner-close-hover: var(--neutral-grey-200); --banner-link: var(--neutral-grey-700); --banner-padding: var(--s-small) 12px; --banner-error-bg: var(--neutral-grey-50); --banner-error-border: var(--neutral-grey-300); --banner-error-close-active: var(--neutral-grey-400); --banner-error-close-hover: var(--neutral-grey-200); --banner-error-icon: var(--neutral-grey-700); --banner-error-link: var(--neutral-grey-700); --banner-success-bg: var(--neutral-grey-50); --banner-success-border: var(--neutral-grey-300); --banner-success-close-active: var(--neutral-grey-400); --banner-success-close-hover: var(--neutral-grey-200); --banner-success-icon: var(--neutral-grey-700); --banner-success-link: var(--neutral-grey-700); --banner-tip-bg: var(--neutral-grey-50); --banner-tip-border: var(--neutral-grey-300); --banner-tip-close-active: var(--neutral-grey-400); --banner-tip-close-hover: var(--neutral-grey-200); --banner-tip-icon: var(--neutral-grey-700); --banner-tip-link: var(--neutral-grey-700); --banner-warning-bg: var(--neutral-grey-50); --banner-warning-border: var(--neutral-grey-300); --banner-warning-close-active: var(--neutral-grey-400); --banner-warning-close-hover: var(--neutral-grey-200); --banner-warning-icon: var(--neutral-grey-700); --banner-warning-link: var(--neutral-grey-700); --banner-text: var(--neutral-grey-800); --bulk-selector-bg: var(--neutral-grey-800); --bulk-selector-bg-light: var(--neutral-grey-25); --bulk-selector-text: var(--neutral-grey-25); --btn-compact-height: 24px; --btn-compact-padding: 10px; --btn-text-size: var(--t-base); --btn-text-weight: var(--t-font-weight-700); --btn-width: auto; --button-bg-color-contained: var(--neutral-grey-600); --button-bg-color-contained-active: var(--neutral-grey-600); --button-bg-color-contained-focus: var(--neutral-grey-600); --button-bg-color-contained-hover: var(--neutral-grey-600); --button-bg-color-destructive: var(--neutral-grey-600); --button-bg-color-destructive-dark-active: var(--neutral-grey-600); --button-bg-color-destructive-dark-focus: var(--neutral-grey-600); --button-bg-color-destructive-dark-hover: var(--neutral-grey-600); --button-bg-color-ghost: transparent; --button-bg-color-ghost-active: var(--neutral-grey-200); --button-bg-color-ghost-focus: transparent; --button-bg-color-ghost-hover: var(--neutral-grey-25); --button-bg-color-inverse: var(--neutral-grey-25); --button-bg-color-inverse-selected: var(--neutral-grey-25); --button-bg-color-outline: var(--neutral-grey-25); --button-bg-color-outline-dark: var(--neutral-grey-800); --button-bg-color-outline-dark-hover: var(--neutral-grey-600); --button-bg-color-outline-dark-active: var(--neutral-grey-600); --button-bg-color-outline-dark-focus: var(--neutral-grey-800); --button-bg-color-outline-active: var(--neutral-grey-25); --button-bg-color-outline-focus: var(--neutral-grey-25); --button-bg-color-outline-hover: var(--neutral-grey-25); --button-bg-text-color-outline-dark: var(--neutral-grey-00); --button-border-color-inverse: var(--neutral-grey-200); --button-border-color-inverse-selected: var(--neutral-grey-600); --button-border-color-outline: var(--neutral-grey-200); --button-border-color-outline-dark: var(--neutral-grey-400); --button-border-color-outline-dark-hover: var(--neutral-grey-400); --button-border-color-outline-focus: var(--neutral-grey-600); --button-border-radius: var(--border-radius-400); --button-border-width: 1px; --button-border-width-outline: 1px; --button-box-shadow-focus: var(--neutral-grey-600); --button-box-shadow-inset-focus: inset 0 0 0 1px var(--neutral-grey-25); --button-height-compact: 32px; --button-height-large: 48px; --button-loading-spinner-stroke-color: var(--neutral-grey-25); --button-loading-spinner-stroke-color-bg-contained: var(--neutral-grey-600); --button-loading-spinner-stroke-color-bg-destructive: var(--neutral-grey-200); --button-loading-spinner-stroke-color-bg-outline: var(--neutral-grey-25); --button-loading-spinner-stroke-color-contained: var(--neutral-grey-25); --button-loading-spinner-stroke-color-outline: var(--neutral-grey-600); --button-padding-horizontal-compact: 12px; --button-padding-horizontal-large: 24px; --button-padding-vertical-compact: 6px; --button-padding-vertical-large: 12px; --button-text-color-contained: var(--neutral-grey-25); --button-text-color-ghost: var(--neutral-grey-800); --button-width-large: 48px; --card-bg: var(--neutral-grey-00); --card-bg-filled: hsla(var(--hsl-value-grey-600-neutral) / 16%); --card-bg-hover: hsl(var(--hsl-value-grey-600-neutral) / 8%); --card-bg-muted: var(--neutral-grey-50); --card-border: 1px solid var(--card-border-color); --card-border-color: var(--neutral-grey-100); --card-border-left: var(--card-border); --card-border-radius: var(--border-radius-500); --card-box-shadow: 0px 0px 0px 2px transparent; --card-compact-padding-inner: var(--s-50); --card-compact-padding-outer: 0; --card-dissolved-bg-focus: hsla(var(--hsl-value-grey-600-neutral) / 12%); --card-dissolved-bg-hover: hsla(var(--hsl-value-grey-600-neutral) / 8%); --card-elevated-box-shadow: var(--box-shadow-200); --card-shadow-focus: 0px 0px 0px 2px var(--neutral-grey-600); --card-header-border: 0; --card-box-shadow-hover: var(--box-shadow-100); --card-footer-border: 0; --card-outline-default-border: none; --card-outline-box-shadow-moveable: var(--box-shadow-300); --card-outer-border: none; --card-outline-border-hover: var(--card-border); --card-elevated-box-shadow-focus: none; --card-outline-default-box-shadow: var(--box-shadow); --card-padding-inner: var(--s-100); --card-padding-outer: 0; --card-padding-inner-body: 0; --card-spacing-0x: 0; --card-spacing-1x: var(--s-50); --card-spacing-2x: var(--s-100); --card-spacing-3x: var(--s-150); --card-spacing-4x: var(--s-200); --card-spacing-5x: var(--s-250); --checkbox-bg: var(--neutral-grey-00); --checkbox-block-background-color-hover: none; --checkbox-block-border-color-hover: var(--neutral-grey-200); --checkbox-block-border-color-focus: var(--neutral-grey-600); --checkbox-block-border-width: 1px; --checkbox-block-border-width-focus: 1px; --checkbox-block-box-shadow-focus: 0 0 0 2px var(--neutral-grey-200); --checkbox-block-checked-background-color: var(--neutral-grey-00); --checkbox-block-checked-background-color-focus: var(--neutral-grey-25); --checkbox-block-checked-background-color-hover: var(--neutral-grey-25); --checkbox-block-checked-border-color: var(--neutral-grey-200); --checkbox-block-checked-box-shadow: 0 0 0 var(--checkbox-label-box-shadow-spread) var(--checkbox-label-box-shadow-color); --checkbox-border-color: var(--neutral-grey-300); --checkmark-icon-white: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABmJLR0QA/wD/AP+gvaeTAAABBElEQVQ4ja3SPS9EURAG4P3KJlToNFQKvUjUCr9AoVP5A6JQKCXKDYWOyDaSTTQbhUap0JMoSVQoJKJA9tFcMa6Nu/bct5w582RyzqlUSgp28YCNssBV37ktA5zGc0B3UsEazgN4hZFUdD2Ab5hLBWfxGtDNVLCBywBeoJ6KbgfwBTOp4AI+ArqWCo7iJoBnqKai+wF8xGTRwHhBfwm9gC4Xgd3sYLff58UE7gPYLgKbuQ1O0cydOQ79O4z9iWZDe37mBI2stxLqPSwWgtlgNfcI0MEUnkKtNRAY4BoOc3AEr/vd96Dwkd95x/y/wQDX0c6hW0ODOfgg27Dz9WilBLVh5j4BMPbndNUFZJMAAAAASUVORK5CYII=); --checkbox-input-border-color: var(--neutral-grey-300); --checkbox-input-border-color-focus: var(--checkbox-input-border-color); --checkbox-input-border-color-hover: var(--neutral-grey-200); --checkbox-input-checked-bg: var(--checkbox-input-checked-bg-color) var(--checkmark-icon-white) no-repeat center center; --checkbox-input-checked-bg-color: var(--neutral-grey-600); --checkbox-input-checked-border-color: var(--neutral-grey-600); --checkbox-input-checked-border-color-active: var( --checkbox-input-checked-border-color ); --checkbox-input-checked-border-color-focus: var(--neutral-grey-200); --checkbox-input-color-focus: var(--neutral-grey-200); --checkbox-input-column-gap: 1em; --checkbox-input-halo-color: hsla(var(--hsl-value-grey-200-neutral) / 16%); --checkbox-input-halo-width: 2.5em; --checkbox-input-halo-width-large: 2.4em; --checkbox-input-width: 1em; --checkbox-label-border: var(--checkbox-label-border-color) 1px solid; --checkbox-label-border-color: var(--neutral-grey-100); --checkbox-label-border-radius: var(--border-radius-400); --checkbox-label-box-shadow-color: hsla( var(--hsl-value-grey-200-neutral) / 24% ); --checkbox-label-box-shadow-hover: 0 0 0 var(--checkbox-label-box-shadow-spread) var(--checkbox-label-box-shadow-color); --checkbox-label-box-shadow-spread: 4px; --checkbox-label-checked-box-shadow-hover: 0 0 0 var(--checkbox-label-box-shadow-spread) hsla(var(--hsl-value-grey-200-neutral) / 48%); --checkbox-label-gap: 12px; --checkbox-label-outline-color: transparent; --checkbox-label-outline-offset: 0; --checkbox-label-outline-style: solid; --checkbox-label-outline-width: 2px; --checkbox-label-padding: 0.5em 0; --checkbox-label-row-gap: 0.75em; --checkbox-label-text: 1em; --checkbox-label-text-large: 1rem; --checkbox-text: var(--t-small); --checkbox-text-weight: var(--t-normal); --checkbox-label-layout-template: var(--checkbox-input-halo-width) 1fr; --combobox-arrow-color: var(--neutral-grey-800); --combobox-arrow-container-height: var(--s-large); --combobox-arrow-container-right: 12px; --combobox-arrow-container-top: calc(50% - 12px); --combobox-arrow-container-width: var(--s-large); --combobox-background-disabled: var(--neutral-grey-50); --combobox-box-shadow-hover: 0 0 0 var(--s-xs) hsla(var(--hsl-value-grey-200-neutral) / 24%); --combobox-box-shadow-focus: 0 0 0 3px var(--neutral-grey-200); --combobox-divider-color: var(--neutral-grey-25); --combobox-divider-height: 1px; --combobox-divider-margin: var(--s-small) 0; --combobox-divider-width: 100%; --combobox-error-color: var(--neutral-grey-600); --combobox-font-size: var(--t-font-size-100); --combobox-list-background-color: var(--neutral-grey-00); --combobox-list-border-color: hsl(229deg 25% 87%); --combobox-list-border-radius: var(--s-small); --combobox-list-border-width: 1px; --combobox-list-border-style: solid; --combobox-list-box-shadow-color: hsla( var(--hsl-value-grey-1000-neutral) / 16% ); --combobox-list-max-height: 216px; --combobox-list-offset: var(--s-small); --combobox-list-padding: var(--s-small) 0; --combobox-opacity-disabled: 0.48; --combobox-option-background-color-hover: var(--neutral-grey-25); --combobox-option-background-color-selected: var(--neutral-grey-25); --combobox-option-box-shadow-focus: inset 0 0 0 2px var(--neutral-grey-200); --combobox-option-check-color: var(--neutral-grey-800); --combobox-option-check-container-margin-left: 12px; --combobox-option-color: var(--neutral-grey-800); --combobox-option-icon-color: var(--neutral-grey-800); --combobox-option-icon-container-height: var(--s-large); --combobox-option-icon-container-margin-right: 12px; --combobox-option-icon-container-width: var(--s-large); --combobox-option-label-font-size: var(--t-base); --combobox-option-min-height: 40px; --combobox-option-padding: var(--s-small) 12px; --combobox-option-sublabel-font-size: var(--t-small); --combobox-option-sublabel-color: var(--neutral-grey-800); --combobox-placeholder-color: var(--neutral-grey-600); --combobox-placeholder-color-focus: var(--neutral-grey-600); --combobox-tag-bg-color: var(--neutral-grey-50); --combobox-tag-bg-color-active: var(--neutral-grey-200); --combobox-tag-bg-color-hover: var(--neutral-grey-100); --combobox-tag-border-radius: 5px; --combobox-tag-secondary-dark: var(--neutral-grey-300); --combobox-tag-secondary-dark-active: var( --combobox-tag-secondary-dark-hover ); --combobox-tag-secondary-dark-hover: var(--neutral-grey-600); --combobox-tag-text-color: var(--neutral-grey-800); --combobox-tag-text-color-active: var(--combobox-tag-text-color-hover); --combobox-tag-text-color-hover: var(--neutral-grey-900); --combobox-trigger-background-color: var(--neutral-grey-00); --combobox-trigger-background-color-filled: var(--neutral-grey-50); --combobox-trigger-border-active-color: var(--neutral-grey-200); --combobox-trigger-border-color: var(--neutral-grey-25); --combobox-trigger-border-radius: var(--border-radius-400); --combobox-trigger-border-width: 1px; --combobox-trigger-height: calc( (var(--combobox-font-size) * var(--t-line-height)) + (var(--combobox-trigger-padding-vertical) * 2) + (var(--combobox-trigger-border-width) * 2) ); --combobox-trigger-height-large: var(--s-4xl); --combobox-trigger-padding: var(--combobox-trigger-padding-vertical) var(--s-4xl) var(--combobox-trigger-padding-vertical) var(--s-medium); --combobox-trigger-padding-large-vertical: 12px; --combobox-trigger-padding-large: var( --combobox-trigger-padding-large-vertical ) var(--s-4xl) var(--combobox-trigger-padding-large-vertical) 12px; --combobox-trigger-padding-vertical: var(--s-small); --combobox-value-color: var(--neutral-grey-800); --combobox-width: 320px; --dropdown-bg-color: none; --dropdown-bg-color-secondary: var(--neutral-grey-50); --dropdown-bg-color-secondary-hover: var(--neutral-grey-50); --dropdown-border-secondary: 1px solid var(--dropdown-border-color-secondary); --dropdown-border-color-secondary: var(--neutral-grey-50); --dropdown-border-style-focus: solid; --dropdown-border-width-focus: 2px; --dropdown-color-transparent-focus: transparent; --dropdown-footer-border-top: 1px solid var(--dropdown-footer-border-top-color); --dropdown-footer-border-top-color: var(--neutral-grey-50); --dropdown-header-bg: var(--neutral-grey-25); --dropdown-header-border-bottom: 1px solid var(--dropdown-header-border-bottom-color); --dropdown-header-border-bottom-color: var(--neutral-grey-50); --dropdown-link-bg-focus: var(--dropdown-color-transparent-focus); --dropdown-link-bg-hover: var(--neutral-grey-25); --dropdown-link-border: var(--dropdown-border-width-focus) var(--dropdown-border-style-focus) var(--dropdown-color-transparent-focus); --dropdown-link-border-color-focus: var(--neutral-grey-600); --dropdown-link-border-color-transparent: var( --dropdown-color-transparent-focus ); --dropdown-link-border-radius: var(--border-radius); --dropdown-link-border-radius-0: 0; --dropdown-link-border-style: solid; --dropdown-link-border-width: 2px; --dropdown-link-text-color: var(--text-color); --dropdown-link-text-color-hover: var(--text-color); --dropdown-link-text-size: var(--t-small); --dropdown-menu-bg: var(--neutral-grey-00); --dropdown-menu-border-radius: var(--border-radius); --dropdown-menu-box-shadow: var(--box-shadow-200); --dropdown-overlay-bg: hsla(var(--hsl-value-grey-1000-neutral) / 50%); --dropdown-text-color: var(--text-color); --dropdown-text-color-light: var(--neutral-grey-300); --dropdown-text-size: var(--t-small); --dropdown-trigger-border: var(--dropdown-border-width-focus) var(--dropdown-border-style-focus) var(--neutral-grey-500); --dropdown-trigger-text-weight: var(--t-regular); --dropdown-subheader-text-color: var(--text-color); --dropdown-subheader-text-size: var(--t-small); --dropdown-subheader-text-weight: var(--t-heavy); --dropdown-subtext-text-color: var(--ghost-text-color); --dropdown-subtext-text-weight: var(--t-regular); --nested-menu-box-shadow-color: hsla(var(--hsl-value-grey-1000-neutral) / 8%); --menu-item-mobile-width: 160px; --expandable-image-border-radius: var(--border-radius-500); --expandable-image-max-width: 462px; --expandable-image-min-height: var(--expandable-image-min-width); --expandable-image-min-width: 146px; --expandable-image-opacity: 1; --expandable-image-spinner-width: min( var(--expandable-image-max-width), 100% ); --expandable-image-spinner-height: 100%; --expandable-image-spinner-aspect-ratio: 16 / 9; --expandable-image-spinner-bg: var(--neutral-grey-25); --expandable-image-spinner-scale: 0; --expandable-image-width: 100%; --gallery-card-action-radius: var(--border-radius-400); --gallery-card-action-border: 1px solid var(--gallery-card-action-border-color); --gallery-card-action-border-color: var(--neutral-grey-50); --gallery-card-action-icon-fill-color: var(--neutral-grey-200); --gallery-card-dropdown-text-color: var(--neutral-grey-200); --gallery-card-padding: var(--card-spacing-2x); --hint-text-color-error: var(--neutral-grey-600); --icon-color-success: var(--neutral-grey-400); --icon-color-error: var(--neutral-grey-400); --icon-fill-color-muted: var(--neutral-grey-200); --icon-fill-color: currentcolor; --icon-height: auto; --icon-paint-order: normal; --icon-size: var(--icon-size-md); --icon-size-xs-viewport-md-and-up: 0.75rem; --icon-size-sm-viewport-md-and-up: 0.875rem; --icon-size-md-viewport-md-and-up: 1.125rem; --icon-size-lg-viewport-md-and-up: 1.375rem; --icon-size-xl-viewport-md-and-up: 3.44rem; --icon-stroke-color: transparent; --icon-stroke-width: 0; --icon-transform: none; --icon-width: 100%; --icon-btn-contained-color-active: var(--neutral-grey-700); --icon-btn-contained-color-bg: var(--neutral-grey-500); --icon-btn-contained-color-border: var(--icon-btn-background-color); --icon-btn-contained-color-border-focus: var(--neutral-grey-00); --icon-btn-contained-color-hover: var(--neutral-grey-600); --icon-btn-contained-color-text: var(--neutral-grey-00); --icon-btn-contained-destructive-color-active: var(--neutral-grey-700); --icon-btn-contained-destructive-color-bg: var(--neutral-grey-500); --icon-btn-contained-destructive-color-hover: var(--neutral-grey-600); --icon-btn-outline-color-active: var(--neutral-grey-50); --icon-btn-outline-color-bg: var(--neutral-grey-00); --icon-btn-outline-color-border: var(--neutral-grey-200); --icon-btn-outline-color-border-focus: transparent; --icon-btn-outline-color-hover: var(--neutral-grey-25); --icon-btn-outline-color-text: var(--neutral-grey-700); --icon-btn-ghost-color-active: var(--neutral-grey-150); --icon-btn-ghost-color-bg: transparent; --icon-btn-ghost-color-border: transparent; --icon-btn-ghost-color-hover: var(--neutral-grey-50); --icon-btn-ghost-color-text: var(--neutral-grey-700); --icon-btn-ghost-neutral-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-neutral-color-active: var(--neutral-grey-400); --icon-btn-ghost-neutral-color-hover: var(--neutral-grey-600); --icon-btn-ghost-neutral-color-text: var(--neutral-grey-00); --icon-btn-ghost-blue-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-blue-color-active: var(--neutral-grey-400); --icon-btn-ghost-blue-color-hover: var(--neutral-grey-200); --icon-btn-ghost-blue-color-text: var(--neutral-grey-800); --icon-btn-ghost-green-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-green-color-active: var(--neutral-grey-400); --icon-btn-ghost-green-color-hover: var(--neutral-grey-200); --icon-btn-ghost-green-color-text: var(--neutral-grey-800); --icon-btn-ghost-yellow-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-yellow-color-active: var(--neutral-grey-400); --icon-btn-ghost-yellow-color-hover: var(--neutral-grey-200); --icon-btn-ghost-yellow-color-text: var(--neutral-grey-800); --icon-btn-ghost-red-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-red-color-active: var(--neutral-grey-400); --icon-btn-ghost-red-color-hover: var(--neutral-grey-200); --icon-btn-ghost-red-color-text: var(--neutral-grey-800); --icon-btn-ghost-aqua-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-aqua-color-active: var(--neutral-grey-400); --icon-btn-ghost-aqua-color-hover: var(--neutral-grey-200); --icon-btn-ghost-aqua-color-text: var(--neutral-grey-800); --icon-btn-ghost-teal-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-teal-color-active: var(--neutral-grey-400); --icon-btn-ghost-teal-color-hover: var(--neutral-grey-200); --icon-btn-ghost-teal-color-text: var(--neutral-grey-800); --icon-btn-ghost-orange-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-orange-color-active: var(--neutral-grey-400); --icon-btn-ghost-orange-color-hover: var(--neutral-grey-200); --icon-btn-ghost-orange-color-text: var(--neutral-grey-800); --icon-btn-ghost-pink-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-pink-color-active: var(--neutral-grey-400); --icon-btn-ghost-pink-color-hover: var(--neutral-grey-200); --icon-btn-ghost-pink-color-text: var(--neutral-grey-800); --icon-btn-ghost-purple-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-purple-color-active: var(--neutral-grey-400); --icon-btn-ghost-purple-color-hover: var(--neutral-grey-200); --icon-btn-ghost-purple-color-text: var(--neutral-grey-800); --icon-btn-ghost-grey-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-grey-color-active: var(--neutral-grey-300); --icon-btn-ghost-grey-color-hover: var(--neutral-grey-200); --icon-btn-ghost-grey-color-text: var(--neutral-grey-800); --icon-btn-border-radius: var(--border-radius-400); --icon-btn-background-color: var(--icon-btn-contained-color-bg); --icon-btn-border-color: var(--icon-btn-contained-color-border); --icon-btn-outline-color: var(--neutral-grey-700); --icon-btn-width-xs: 16px; --icon-btn-width-small: 24px; --icon-btn-width-compact: 32px; --icon-btn-width: 40px; --icon-btn-width-large: 48px; --indicator-bg-color: transparent; --indicator-bg-color-red: var(--neutral-grey-600); --indicator-bg-color-success: var(--neutral-grey-600); --indicator-border-color-approved: var(--neutral-grey-600); --indicator-border-color-pending: var(--neutral-grey-600); --indicator-text: var(--t-small); --input-field-background-disabled: var(--neutral-grey-25); --input-field-background-filled: var(--neutral-grey-25); --input-field-background-filled-disabled: var(--neutral-grey-25); --input-field-background-filled-focus: var(--neutral-grey-25); --input-field-background-filled-hover: var(--neutral-grey-25); --input-field-border-color: var(--neutral-grey-200); --input-field-border-color-active: var(--neutral-grey-200); --input-field-border-disabled: var(--neutral-grey-25); --input-field-border-radius: var(--border-radius-medium); --input-field-border-width: 1px; --input-field-border-width-active: 1px; --input-field-border-width-filled: 0; --input-field-box-shadow: 0px 0px 0px 4px hsla(var(--hsl-value-grey-200-neutral) / 24%); --input-field-box-shadow-active: 0px 0px 0px 2px var(--neutral-grey-200); --input-field-box-shadow-inactive: 0px 0px 0px 2px hsla(var(--hsl-value-grey-200-neutral) / 0%); --input-field-color-filled-disabled: var(--neutral-grey-200); --input-field-error: var(--neutral-grey-600); --input-field-padding-horizontal: var(--spaceSpacingSm); --input-field-padding-vertical: var(--s-small); --input-field-padding: var(--input-field-padding-vertical) var(--input-field-padding-horizontal); --input-field-padding-large: var(--s-75); --input-container-height: calc( (var(--input-font-size) * var(--t-line-height)) + (var(--input-field-padding-vertical) * 2) + (var(--input-field-border-width) * 2) ); --input-container-height-large: calc( (var(--input-font-size) * var(--t-line-height)) + (var(--input-field-padding-large) * 2) + (var(--input-field-border-width) * 2) ); --input-field-text-disabled: var(--neutral-grey-600); --input-field-text-filled: var(--neutral-grey-600); --input-field-transition: 0.3s; --input-font-size: var(--t-font-size-100); --input-size-xs: 100px; --input-size-small: 30%; --input-size-medium: 40%; --input-size-large: 50%; --input-title-bg-color: transparent; --input-title-border-color: transparent; --column-header-text: var(--neutral-grey-800); --column-header-text-size: var(--t-font-size-100); --column-header-text-weight: var(--t-font-weight-600); --list-header-border: 1px solid var(--list-header-border-color); --list-header-border-color: var(--neutral-grey-25); --list-box-shadow: none; --list-row-bg: var(--neutral-grey-00); --list-row-bg-selected: var(--neutral-grey-25); --list-row-border: 1px solid var(--neutral-grey-25); --list-row-border-first: 0; --list-row-border-status-error: var(--neutral-grey-600); --list-row-border-status-pending: var(--neutral-grey-600); --list-row-border-status-success: var(--neutral-grey-600); --list-row-box-shadow: 0; --list-row-container-bg: var(--neutral-grey-00); --list-row-margin: 0 0 var(--s-medium) 0; --list-row-padding: var(--s-small) var(--s-medium); --list-row-radius: 0; --list-row-status-border: transparent; --list-row-status-border-width: 4px; --list-row-subtitle-text-size: var(--t-base); --list-row-title-text-size: var(--t-base); --row-icon-width: 0; --row-selector-width: 0; --modal-body-bg: var(--neutral-grey-00); --modal-body-canvas-bg: var(--modal-body-bg); --modal-body-spacing: var(--s-200); --modal-body-spacing-md: var(--s-200); --modal-border-radius: var(--border-radius-600); --modal-box-shadow: var(--box-shadow-300); --modal-close-btn-display: block; --modal-display: block; --modal-footer-border: none; --modal-footer-bg: var(--neutral-grey-00); --modal-footer-spacing: 0 var(--s-200) var(--s-200) var(--s-200); --modal-header-bg: var(--neutral-grey-00); --modal-header-canvas-bottom-height: 10px; --modal-header-font-size: var(--t-font-size-200); --modal-header-font-weight: var(--t-font-weight-700); --modal-header-spacing: var(--s-200) var(--s-200) 0 var(--s-200); --modal-max-height: initial; --modal-max-width: initial; --modal-min-height: initial; --modal-size: initial; --modal-size-default: 560px; --modal-size-medium: var(--container-medium); --modal-size-large: var(--container-large); --modal-size-xl: var(--container-xl); --modal-subtitle-font-size: var(--t-font-size-125); --modal-subtitle-font-weight: var(--t-font-weight-600); --loading-bar-background: var(--neutral-grey-25); --loading-bar-display: var(--loading-bar-display-xssm); --loading-bar-display-ml: grid; --loading-bar-display-xssm: grid; --loading-bar-height: var(--s-small); --loading-bar-height-large: var(--s-medium); --loading-bar-height-small: var(--s-xs); --loading-indicator-background: var(--neutral-grey-600); --loading-message-display: block; --loading-message-font-size: var(--t-base); --loading-message-spacing: 0 0 var(--s-xs) 0; --loading-spinner-stroke-color: var(--neutral-grey-600); --loading-spinner-stroke-color-background: var(--neutral-grey-25); --loading-spinner-stroke-dasharray: 100; --loading-spinner-stroke-dashoffset: 100; --loading-spinner-stroke-width: 4px; --loading-spinner-width: 32px; --loading-spinner-width-large: 48px; --loading-spinner-width-small: 24px; --loading-spinner-width-xs: 20px; --multi-select-text: var(--t-font-size-87); --multi-select-toggle-text: var(--link-color); --navbar-bg: var(--neutral-grey-00); --navbar-border-bottom: 1px solid var(--neutral-grey-25); --navbar-box-shadow: 0; --navbar-separator-color: var(--neutral-grey-25); --pagination-item-bg: transparent; --pagination-item-border: 0 none transparent; --pagination-btn-bg: transparent; --pagination-btn-border: 1px solid var(--interface-secondary-x-light); --pagination-btn-text-color: var(--interface-secondary-light); --popover-bg: var(--neutral-grey-00); --popover-body-padding: var(--s-medium); --popover-border-radius: var(--border-radius-500); --popover-box-shadow: 0px 8px 12px 4px var(--popover-box-shadow-color), 0px 4px 8px 0px var(--popover-box-shadow-color); --popover-box-shadow-color: hsla(var(--hsl-value-grey-1000-neutral) / 8%); --popover-header-bg: var(--neutral-grey-00); --popover-height: 200px; --popover-left: 50%; --popover-small-max-width: var(--popover-width-small); --popover-title-border-bottom: var(--neutral-grey-00); --popover-top: calc(100% + var(--s-xs)); --popover-transform: translateX(-50%); --popover-width: 300px; --popover-title-padding: var(--s-medium); --popover-width-default: 320px; --popover-width-large: 640px; --popover-width-small: 192px; --rich-text-editor-background: var(--neutral-grey-00); --rich-text-editor-blockquote-border-color: var(--neutral-grey-100); --rich-text-editor-border-radius: var(--border-radius-400); --rich-text-editor-border: 1px solid var(--neutral-grey-100); --rich-text-editor-box-shadow: 0px 4px 8px 0px hsla(var(--hsl-value-grey-1000-neutral) / 8%); --rich-text-editor-divider-color: var(--neutral-grey-100); --rich-text-editor-divider-thickness: 1px; --rich-text-editor-padding: var(--s-75); --rich-text-editor-placeholder-color: var(--neutral-grey-100); --rich-text-editor-toolbar-border: 1px solid var(--neutral-grey-50); --rich-text-editor-toolbar-border-radius: 12px; --rich-text-editor-toolbar-padding: var(--s-25); --progress-bar-circular-width: 32px; --progress-bar-circular-width-large: 48px; --progress-bar-circular-stroke-width: 4px; --progress-bar-circular-stroke-color: var(--neutral-grey-600); --progress-bar-circular-stroke-dashoffset: 0; --progress-bar-circular-stroke-color-filled: var(--neutral-grey-25); --progress-bar-height: var(--s-small); --progress-bar-height-large: var(--s-100); --progress-bar-height-small: var(--s-25); --progress-bar-horizontal-progress: -101%; --progress-bar-horizontal-radius: 9999px; --progress-bar-horizontal-steps-count: 1; --progress-bar-outline-color: var(--neutral-grey-600); --progress-bar-step-background-color: var(--neutral-grey-25); --progress-bar-step-background-color-active: var(--neutral-grey-600); --search-clear-icon-color: var(--neutral-grey-800); --search-clear-icon-outline-focus: var(--neutral-grey-200); --search-clear-icon-margin: 0 var(--s-75); --search-clear-icon-padding: var(--s-50) var(--s-75); --search-clear-icon-size: 18px; --search-input-border-color: var(--neutral-grey-25); --search-input-text-size: var(--t-font-size-100); --search-search-icon-color: var(--neutral-grey-800); --search-search-icon-size: 18px; --search-wrapper-bg: var(--neutral-grey-00); --search-wrapper-radius: var(--border-radius-400); --search-wrapper-width: auto; --search-overlay-bg: var(--neutral-grey-00); --search-overlay-border: 1px solid var(--search-overlay-border-color); --search-overlay-border-color: var(--neutral-grey-50); --search-overlay-border-radius: var(--border-radius-400); --search-overlay-padding: var( --s-50 ); --search-overlay-shadow: none; --search-overlay-section-header-color: var(--neutral-grey-600); --search-overlay-section-header-font-weight: var(--t-font-weight-600); --search-overlay-section-header-margin: var(--s-25) 0 var(--s-25) var(--s-25); --search-overlay-section-margin: 0 0 var(--s-150) 0; --search-overlay-item-background-color: none; --search-overlay-item-border-radius: var(--border-radius-400); --search-overlay-item-box-shadow: none; --search-overlay-item-box-shadow-active: 0 0 0 1px var(--neutral-grey-200), 0 0 0 calc(4px + 1px) hsla(var(--hsl-value-grey-200-neutral) / 48%); --search-overlay-item-box-shadow-hover: 0 0 0 1px var(--neutral-grey-200), 0 0 0 calc(4px + 1px) hsla(var(--hsl-value-grey-200-neutral) / 24%); --search-overlay-item-column-gap: var(--s-75); --search-overlay-item-margin: 0; --search-overlay-item-outline: 2px solid var(--search-overlay-item-outline-color); --search-overlay-item-outline-color: var(--neutral-grey-600); --search-overlay-item-padding: var(--s-50); --select-field-bg-color: var(--neutral-grey-00); --select-field-bg-color-secondary: var(--neutral-grey-25); --select-field-bg-color-secondary-hover: var(--neutral-grey-25); --select-field-border-color-default: var(--neutral-grey-25); --select-field-border-color-default-focus: var(--neutral-grey-200); --select-field-border-color-default-hover: var(--neutral-grey-200); --select-field-border-color-error: var(--neutral-grey-600); --select-field-border-color-focus: var(--neutral-grey-200); --select-field-border-color-secondary: var(--neutral-grey-200); --select-field-border-color-outline: var(--neutral-grey-25); --select-field-border-color-outline-hover: var(--neutral-grey-200); --select-field-border-radius: 0.5rem; --select-field-box-shadow: 0px 0px 0px 4px hsla(var(--hsl-value-grey-200-neutral) / 24%); --select-field-box-shadow-focus: 0px 0px 0px 3px var(--neutral-grey-200); --select-field-caret-image: url("data:image/svg+xml, "); --select-field-caret-style: var(--select-field-caret-image) no-repeat calc(100% - var(--s-75)) 48%; --select-field-font-color-error: var(--neutral-grey-600); --select-field-font-weight: var(--t-font-weight-400); --select-field-font-weight-secondary: var(--select-field-font-weight); --select-field-height: 2.5rem; --select-field-height-large: 3rem; --select-field-padding: var(--s-25) calc(var(--s-50) * 5.5) var(--s-25) var(--s-75); --select-text-color: var(--neutral-grey-600); --select-text-size: var(--t-font-size-100); --single-select-block-input-accent-width: 0.5em; --single-select-block-input-margin: var(--single-select-block-label-padding-v) 0 0 var(--single-select-block-label-padding-h); --single-select-block-label-background-color: transparent; --single-select-block-label-background-color-active: var(--neutral-grey-25); --single-select-block-label-background-color-disabled: var(--neutral-grey-25); --single-select-block-label-background-color-hover: var( --single-select-block-label-background-color ); --single-select-block-label-border-color: var(--neutral-grey-25); --single-select-block-label-border-color-hover: var(--neutral-grey-200); --single-select-block-label-border-radius: 0.5em; --single-select-block-label-border-width: 0.0625em; --single-select-block-label-box-shadow-active: hsla( var(--hsl-value-grey-200-neutral) / 48% ); --single-select-block-label-box-shadow-blur: 0; --single-select-block-label-box-shadow-color: hsla( var(--hsl-value-grey-200-neutral) / 24% ); --single-select-block-label-box-shadow-hover: hsla( var(--hsl-value-grey-200-neutral) / 48% ); --single-select-block-label-box-shadow-opacity: 0; --single-select-block-label-box-shadow-opacity-hover: 1; --single-select-block-label-box-shadow-spread: 0.25em; --single-select-block-label-box-shadow-x-offset: 0; --single-select-block-label-box-shadow-y-offset: 0; --single-select-block-label-checked-background-color: var(--neutral-grey-25); --single-select-block-label-checked-background-color-active: var( --neutral-grey-25 ); --single-select-block-label-checked-background-color-focus: var( --neutral-grey-25 ); --single-select-block-label-checked-background-color-hover: var( --neutral-grey-25 ); --single-select-block-label-checked-border-color: var(--neutral-grey-200); --single-select-block-label-checked-border-width: var( --single-select-block-label-border-width ); --single-select-block-label-checked-box-shadow-opacity: var( --single-select-block-label-box-shadow-opacity-hover ); --single-select-block-label-color-disabled: var(--neutral-grey-600); --single-select-block-label-layout-display: grid; --single-select-block-label-layout-gap-column: 0.75em; --single-select-block-label-outline: 0.125em var(--single-select-block-label-outline-style) var(--neutral-grey-200); --single-select-block-label-outline-offset: 0; --single-select-block-label-outline-style: solid; --single-select-block-label-padding: var( --single-select-block-label-padding-v ) var(--single-select-block-label-padding-h); --single-select-block-label-padding-h: 0.75em; --single-select-block-label-padding-v: var( --single-select-block-label-padding-h ); --single-select-inline-layout-gap-column: 1.5em; --single-select-inline-layout-margin: 0; --single-select-input-accent-width: max(0.5em, 0.5rem); --single-select-input-border-color: var(--neutral-grey-300); --single-select-input-border-color-active: var(--neutral-grey-600); --single-select-input-border-color-focus: var(--neutral-grey-200); --single-select-input-border-color-hover: var(--neutral-grey-200); --single-select-input-border-width: 1px; --single-select-input-checked-accent-color: var(--neutral-grey-600); --single-select-input-checked-accent-color-active: var(--neutral-grey-600); --single-select-input-checked-accent-color-focus: var(--neutral-grey-600); --single-select-input-checked-accent-color-hover: var(--neutral-grey-600); --single-select-input-checked-border-color: var(--neutral-grey-600); --single-select-input-checked-border-color-active: var(--neutral-grey-600); --single-select-input-checked-border-color-focus: var(--neutral-grey-200); --single-select-input-checked-border-color-hover: var(--neutral-grey-600); --single-select-input-halo-color: hsla( var(--hsl-value-grey-200-neutral) / 16% ); --single-select-input-halo-color-active: hsla( var(--hsl-value-grey-200-neutral) / 24% ); --single-select-input-halo-scale: 0; --single-select-input-halo-translate: -50%; --single-select-input-halo-width: 2.5em; --single-select-input-halo-width-large: 3rem; --single-select-input-margin: 0.5em 0 0 0; --single-select-input-outline: var(--single-select-input-outline-width) var(--single-select-input-outline-style) var(--single-select-input-outline-color); --single-select-input-outline-color: var(--neutral-grey-600); --single-select-input-outline-style: solid; --single-select-input-outline-width: 0.07em; --single-select-input-width: 1em; --single-select-label-block: 0 0 0 calc(var(--single-select-input-halo-width) - 0.5em); --single-select-label-block-other: 0 0 var(--s-100) calc(var(--single-select-input-halo-width) - 0.5em); --single-select-label-layout-display: inline-grid; --single-select-label-padding: var(--s-50) 0 var(--s-50) calc(var(--single-select-input-halo-width) - 0.5em); --single-select-label-padding-large: var(--s-75) 0 var(--s-75) calc(var(--single-select-input-halo-width-large) - 0.25rem); --single-select-label-text-size: 1em; --single-select-label-text-size-large: 1rem; --single-select-layout-block-gap-row: 0.75em; --single-select-layout-gap-column: var(--s-small); --single-select-layout-gap-row: 0; --single-select-layout-margin: 0; --single-select-text-color: var(--neutral-grey-800); --single-select-text-size: var(--t-font-size-87); --single-select-text-size-large: var(--t-font-size-150); --single-select-text-weight: var(--t-regular); --slider-border-radius: 4px; --slider-thumb-dimension: var(--s-medium); --slider-thumb-outline-moz: 1px dotted #212121; --slider-thumb-outline-webkit: -webkit-focus-ring-color auto 5px; --slider-track-height: 8px; --icon-stamp-bg: var(--neutral-grey-25); --icon-stamp-fill-color-primary: var(--interface-white); --icon-stamp-bg-primary: var(--neutral-grey-700); --icon-stamp-fill-color-success: var(--neutral-grey-700); --icon-stamp-bg-success: var(--neutral-grey-200); --icon-stamp-fill-color-error: var(--neutral-grey-700); --icon-stamp-bg-error: var(--neutral-grey-200); --icon-stamp-border-color: transparent; --icon-stamp-border-size: 0; --icon-stamp-border-style: none; --icon-stamp-size: 48px; --icon-stamp-icon-size: 24px; --segmented-controls-bg-color: var(--neutral-grey-25); --segmented-controls-bg-color-dark: var(--neutral-grey-400); --segmented-controls-bg-color-light: var(--neutral-grey-200); --segmented-controls-button-bg-color-dark-active: var(--neutral-grey-200); --segmented-controls-button-bg-color-default-active: var(--neutral-grey-400); --segmented-controls-button-bg-color-light-active: var(--neutral-grey-600); --segmented-controls-button-box-shadow: 0px 0px 0px 2px var(--segmented-controls-button-box-shadow-color); --segmented-controls-button-box-shadow-color: var(--neutral-grey-200); --segmented-controls-button-color: var(--neutral-grey-600); --segmented-controls-button-padding-v: var(--s-xs); --segmented-controls-button-padding-h: var(--s-medium); --segmented-controls-button-selected-color: var(--neutral-grey-1000); --segmented-controls-button-border-radius: 6px; --segmented-controls-layout-display: inline-grid; --segmented-controls-pill-bg-color: var(--neutral-grey-00); --segmented-controls-pill-position: 0; --segmented-controls-pill-radius: var( --segmented-controls-button-border-radius ); --segmented-controls-pill-width: 0; --segmented-controls-wrapper-padding: var(--s-xs); --step-list-bg: var(--interface-white); --step-link-bg: var(--interface-white); --step-link-text-size: var(--t-base); --step-link-indicator-size: var(--s-xl); --stepper-bg: var(--neutral-grey-25); --stepper-border-radius: var(--border-radius-400); --stepper-btn-padding-horizontal: var(--s-medium); --stepper-btn-padding-vertical: 0; --stepper-overlay-bg-active: hsla(var(--hsl-value-grey-600-neutral) / 16%); --stepper-overlay-bg-focus: hsla(var(--hsl-value-grey-600-neutral) / 12%); --stepper-overlay-bg-hover: hsla(var(--hsl-value-grey-600-neutral) / 8%); --tabs-column-gap: 0; --tabs-container-border-bottom: 0; --tabs-indicator-display: block; --tabs-indicator-height: var(--tab-border-width); --tabs-indicator-height-large: var(--tab-border-bottom-width-large); --tabs-indicator-height-vertical: 100%; --tabs-indicator-scale: 0; --tabs-indicator-translate: 0px, 0px; --tabs-indicator-width: 1px; --tabs-indicator-width-vertical: var(--tab-border-width); --tabs-indicator-width-vertical-large: var(--tab-border-bottom-width-large); --tabs-indicator-position: end; --tab-background-color: transparent; --tab-border-color-active: var(--neutral-grey-800); --tab-border-bottom-width: var(--tab-border-width); --tab-border-bottom-width-large: var(--tab-border-bottom-width); --tab-border-color: var(--neutral-grey-00); --tab-border-width: 2px; --tab-border-width-left: 0; --tab-border-right-width: var(--tab-border-width); --tab-border-right-width-large: 2px; --tab-box-shadow: none; --tab-divider-color: var(--neutral-grey-50); --tab-divider-thickness: 1px; --tab-font-size: var(--t-font-size-100); --tab-justify-content: flex-start; --tab-margin: 0; --tab-margin-badge: 0 0 0 var(--s-50); --tab-opacity-disabled: 0.48; --tab-outline: none; --tab-outline-offset: 0; --tab-padding: var(--s-25) var(--s-50) calc(var(--s-25) * 1.5) var(--s-50); --tab-padding-large: var(--s-50); --tab-subheader-color: var(--neutral-grey-500); --tab-text-color-disabled: var(--neutral-grey-500); --tab-padding-vertical: calc(var(--s-25) * 1.5) var(--s-75); --tab-padding-vertical-large: calc(var(--s-50) + (var(--s-25) / 2)) calc(var(--s-150) / 2); --tab-text-color: var(--neutral-grey-800); --tab-text-color-active: var(--tab-text-color); --tab-text-color-hover: var(--tab-text-color); --tab-text-weight: var(--t-font-weight-400); --tab-text-weight-active: var(--t-font-weight-500); --tag-display: inline-block; --tag-spacing: var(--s-small); --tag-text-size: var(--t-base); --tag-border-radius: var(--border-radius-400); --tag-border-radius-small: var(--border-radius-400); --tag-border-removeable: none; --tag-focus-border: 2px solid var(--neutral-grey-500); --tag-padding-v: calc(var(--s-25) / 2); --tag-padding-v-medium: var(--s-25); --tag-spacing-medium: var(--tag-padding-v-medium) var(--s-75); --tag-spacing-medium-icon: var(--tag-padding-v-medium) var(--s-75) var(--tag-padding-v-medium) calc(var(--s-75) / 2); --tag-spacing-medium-removeable: var(--tag-padding-v-medium) var(--s-25) var(--tag-padding-v-medium) var(--s-75); --tag-spacing-medium-removeable-icon: var(--tag-padding-v-medium) var(--s-25) var(--tag-padding-v-medium) calc(var(--s-75) / 2); --tag-spacing-small: var(--tag-padding-v) var(--s-50); --tag-spacing-small-icon: var(--tag-padding-v) var(--s-50) var(--tag-padding-v) var(--s-25); --tag-spacing-small-removeable: var(--tag-padding-v) var(--s-25) var(--tag-padding-v) var(--s-50); --tag-spacing-small-removeable-icon: var(--tag-padding-v) var(--s-25) var(--tag-padding-v) var(--s-25); --tag-text-size-medium: var(--t-font-size-100); --tag-text-size-small: var(--t-font-size-87); --tag-close-btn-border-radius-medium: var(--border-radius-200); --tag-close-btn-border-radius-small: var(--border-radius-100); --tag-close-btn-border-radius: var(--tag-close-btn-border-radius-medium); --tag-close-btn-margin: 0 0 0 var(--s-25); --tag-close-btn-spacing: calc(var(--s-25) * 1.5); --tag-close-btn-text-color: inherit; --tag-close-btn-icon-size-small: var(--s-50); --tag-close-btn-icon-size-medium: var(--s-75); --tag-close-btn-bg-color-dark-grey-hover: var(--neutral-grey-800); --tag-close-btn-bg-color-grey-hover: var(--neutral-grey-200); --tag-close-btn-bg-color-blue-hover: var(--neutral-grey-200); --tag-close-btn-bg-color-aqua-hover: var(--neutral-grey-200); --tag-close-btn-bg-color-teal-hover: var(--neutral-grey-200); --tag-close-btn-bg-color-green-hover: var(--neutral-grey-200); --tag-close-btn-bg-color-yellow-hover: var(--neutral-grey-200); --tag-close-btn-bg-color-orange-hover: var(--neutral-grey-200); --tag-close-btn-bg-color-red-hover: var(--neutral-grey-200); --tag-close-btn-bg-color-pink-hover: var(--neutral-grey-200); --tag-close-btn-bg-color-purple-hover: var(--neutral-grey-200); --tag-close-btn-bg-color-dark-grey-active: var(--neutral-grey-800); --tag-close-btn-bg-color-grey-active: var(--neutral-grey-300); --tag-close-btn-bg-color-blue-active: var(--neutral-grey-300); --tag-close-btn-bg-color-aqua-active: var(--neutral-grey-300); --tag-close-btn-bg-color-teal-active: var(--neutral-grey-300); --tag-close-btn-bg-color-green-active: var(--neutral-grey-300); --tag-close-btn-bg-color-yellow-active: var(--neutral-grey-300); --tag-close-btn-bg-color-orange-active: var(--neutral-grey-300); --tag-close-btn-bg-color-red-active: var(--neutral-grey-300); --tag-close-btn-bg-color-pink-active: var(--neutral-grey-300); --tag-close-btn-bg-color-purple-active: var(--neutral-grey-300); --tag-bg-color: var(--neutral-grey-50); --tag-bg-color-dark-grey: var(--neutral-grey-600); --tag-bg-color-removeable: var(--tag-bg-color); --tag-bg-color-grey: var(--neutral-grey-50); --tag-bg-color-blue: var(--neutral-grey-50); --tag-bg-color-aqua: var(--neutral-grey-50); --tag-bg-color-teal: var(--neutral-grey-50); --tag-bg-color-green: var(--neutral-grey-50); --tag-bg-color-yellow: var(--neutral-grey-50); --tag-bg-color-orange: var(--neutral-grey-50); --tag-bg-color-red: var(--neutral-grey-50); --tag-bg-color-pink: var(--neutral-grey-50); --tag-bg-color-purple: var(--neutral-grey-50); --tag-bg-color-dark-grey-hover: var(--neutral-grey-800); --tag-bg-color-grey-hover: var(--neutral-grey-100); --tag-bg-color-blue-hover: var(--neutral-grey-100); --tag-bg-color-aqua-hover: var(--neutral-grey-100); --tag-bg-color-teal-hover: var(--neutral-grey-100); --tag-bg-color-green-hover: var(--neutral-grey-100); --tag-bg-color-yellow-hover: var(--neutral-grey-100); --tag-bg-color-orange-hover: var(--neutral-grey-100); --tag-bg-color-red-hover: var(--neutral-grey-100); --tag-bg-color-pink-hover: var(--neutral-grey-100); --tag-bg-color-purple-hover: var(--neutral-grey-100); --tag-bg-color-dark-grey-active: var(--neutral-grey-800); --tag-bg-color-grey-active: var(--neutral-grey-150); --tag-bg-color-blue-active: var(--neutral-grey-150); --tag-bg-color-aqua-active: var(--neutral-grey-150); --tag-bg-color-teal-active: var(--neutral-grey-150); --tag-bg-color-green-active: var(--neutral-grey-150); --tag-bg-color-yellow-active: var(--neutral-grey-150); --tag-bg-color-orange-active: var(--neutral-grey-150); --tag-bg-color-red-active: var(--neutral-grey-150); --tag-bg-color-pink-active: var(--neutral-grey-150); --tag-bg-color-purple-active: var(--neutral-grey-150); --tag-bg-color-dark-grey-disabled: var(--neutral-grey-600); --tag-text-color: var(--tag-text-color-blue); --tag-text-color-dark-grey: var(--neutral-grey-00); --tag-text-color-removeable: var(--tag-text-color); --tag-text-color-grey: var(--neutral-grey-800); --tag-text-color-blue: var(--neutral-grey-800); --tag-text-color-aqua: var(--neutral-grey-800); --tag-text-color-teal: var(--neutral-grey-800); --tag-text-color-green: var(--neutral-grey-800); --tag-text-color-yellow: var(--neutral-grey-800); --tag-text-color-orange: var(--neutral-grey-800); --tag-text-color-red: var(--neutral-grey-800); --tag-text-color-pink: var(--neutral-grey-800); --tag-text-color-purple: var(--neutral-grey-800); --toast-bg-dark: var(--neutral-grey-800); --toast-bg-light: var(--neutral-grey-700); --toast-border-radius: var(--border-radius-400); --toast-box-shadow: var(--box-shadow-300); --toast-height: var(--s-4xl); --toast-max-width: 768px; --toast-min-height: 52px; --toast-position-center: 50%; --toast-position-center-transform: translateX(-50%); --toast-position-left: 0; --toast-position-right: 0; --toast-position-top: 0; --toast-spacing: var(--s-50); --toast-status-error: var(--neutral-grey-200); --toast-status-success: var(--neutral-grey-200); --toast-status-warning: var(--neutral-grey-200); --toast-text-color: var(--neutral-grey-25); --toggle-button-active-background-color: var(--neutral-grey-25); --toggle-button-background-color: var(--neutral-grey-00); --toggle-button-border-color: var(--neutral-grey-100); --toggle-button-border-radius: var(--border-radius); --toggle-button-box-shadow-color: hsla( var(--hsl-value-grey-700-neutral) / 24% ); --toggle-button-box-shadow-hover: hsla( var(--hsl-value-grey-700-neutral) / 48% ); --toggle-button-border-width: 1px; --toggle-button-box-shadow-blur: 0; --toggle-button-box-shadow-opacity: 0; --toggle-button-box-shadow-spread: 0.25em; --toggle-button-box-shadow-x-offset: 0; --toggle-button-box-shadow-y-offset: 0; --toggle-button-checked-active-background-color: var(--neutral-grey-100); --toggle-button-checked-background-color: var(--neutral-grey-25); --toggle-button-checked-border-color: var(--neutral-grey-400); --toggle-button-checked-box-shadow-opacity: 1; --toggle-button-checked-focus-background-color: var(--neutral-grey-50); --toggle-button-checked-hover-background-color: var(--neutral-grey-50); --toggle-button-hover-border-color: var(--neutral-grey-400); --toggle-button-hover-box-shadow-opacity: 1; --toggle-button-outline: var(--neutral-grey-400) max(1px, 0.0625em) solid; --toggle-button-padding: 0.5em 1em; --toggle-button-text-size: var(--t-font-size-100); --tooltip-arrow-bg: var(--tooltip-bg); --tooltip-arrow-width: var(--s-small); --tooltip-arrow-border-width: var(--tooltip-arrow-width); --tooltip-text-color: var(--neutral-grey-00); --tooltip-arrow-spacing: 12px; --tooltip-bg: var(--neutral-grey-800); --tooltip-border-radius: var(--border-radius-400); --tooltip-box-shadow: 0px 4px 8px 0px hsla(var(--hsl-value-grey-1000-neutral) / 8%), 0px 4px 8px 0px hsla(var(--hsl-value-grey-1000-neutral) / 8%); --tooltip-default-opacity: 0; --tooltip-display: block; --tooltip-opacity: 1; --tooltip-padding: 8px 12px; --tooltip-transition: opacity 200ms; --tooltip-text-align: left; --tooltip-visibility-default: hidden; --tooltip-visibility: visible; --tooltip-v2-arrow-height: 1rem; --tooltip-v2-arrow-translate-x: 50%; --tooltip-v2-arrow-translate-y: 25%; --tooltip-v2-arrow-width: 0.5rem; --tooltip-v2-background-dark: var(--neutral-grey-700); --tooltip-v2-background: var(--neutral-grey-800); --tooltip-v2-border-radius: var(--border-radius-400); --tooltip-v2-box-shadow: var(--box-shadow-100); --tooltip-v2-color: var(--neutral-grey-00); --tooltip-v2-font-size: var(--t-font-size-87); --tooltip-v2-left: 50%; --tooltip-v2-max-width: 12rem; --tooltip-v2-padding: var(--s-75); --tooltip-v2-position-area: block-start; --tooltip-v2-position: absolute; --tooltip-v2-top: calc(100% + var(--s-xs)); --tooltip-v2-transform-x: 0; --tooltip-v2-transform-y: 0; --tooltip-v2-z-index: var(--z-index-overlay); --typeahead-bg: var(--neutral-grey-00); --typeahead-item-border-bottom: 1px solid var(--neutral-grey-25); --typeahead-option-bg: none; --typeahead-option-bg-color-hover: var(--neutral-grey-50); --typeahead-option-text-color: var(--ghost-text-color); --typeahead-wrap-bg: var(--neutral-grey-00); --title-editor-text: var(--interface-white); --changelog-gradient: linear-gradient( 0deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 0%) 100% ); } @media (min-width: 45em) { :root, :host { --list-row-padding: var(--s-medium) var(--s-large); } } :root, :host { --body-bg: var(--interface-midnight-xx-light); --border-radius-medium: var(--border-radius-400); --border-radius-heavy: var(--border-radius-500); --box-shadow: var(--box-shadow-100); --box-shadow-medium: var(--box-shadow-200); --box-shadow-heavy: var(--box-shadow-200); --brand-blue: var(--saturated-blue-500); --brand-midnight: var(--saturated-blue-800); --brand-ic: var(--saturated-blue-500); --brand-mi: var(--saturated-aqua-500); --brand-pi: var(--saturated-orange-500); --hsl-value-blue: var(--hsl-value-blue-500-saturated); --hsl-value-blue-light: var(--hsl-value-blue-200-saturated); --hsl-value-blue-x-light: var(--hsl-value-blue-25-saturated); --hsl-value-blue-dark: var(--hsl-value-blue-800-saturated); --hsl-value-error: var(--hsl-value-red-500-saturated); --hsl-value-error-light: var(--hsl-value-red-300-saturated); --hsl-value-error-x-light: var(--hsl-value-red-25-saturated); --hsl-value-error-dark: var(--hsl-value-red-600-saturated); --hsl-value-highlight: var(--hsl-value-yellow-400-saturated); --hsl-value-highlight-light: var(--hsl-value-yellow-200-saturated); --hsl-value-highlight-x-light: var(--hsl-value-yellow-25-saturated); --hsl-value-midnight: var(--hsl-value-grey-800-neutral); --hsl-value-midnight-light: var(--hsl-value-grey-500-neutral); --hsl-value-midnight-x-light: var(--hsl-value-grey-50-neutral); --hsl-value-midnight-xx-light: var(--hsl-value-grey-25-neutral); --hsl-value-midnight-dark: var(--hsl-value-grey-900-neutral); --hsl-value-primary: var(--hsl-value-blue); --hsl-value-primary-light: var(--hsl-value-blue-light); --hsl-value-primary-x-light: var(--hsl-value-blue-x-light); --hsl-value-primary-dark: var(--hsl-value-blue-dark); --hsl-value-secondary: var(--hsl-value-midnight); --hsl-value-secondary-light: var(--hsl-value-midnight-light); --hsl-value-secondary-x-light: var(--hsl-value-midnight-x-light); --hsl-value-secondary-xx-light: var(--hsl-value-midnight-xx-light); --hsl-value-secondary-dark: var(--hsl-value-midnight-dark); --hsl-value-success: var(--hsl-value-green-500-saturated); --hsl-value-success-light: var(--hsl-value-green-200-saturated); --hsl-value-success-x-light: var(--hsl-value-green-25-saturated); --hsl-value-success-dark: var(--hsl-value-green-600-saturated); --s-xs: var(--s-25); --s-small: var(--s-50); --s-medium: var(--s-100); --s-large: var(--s-150); --s-xl: var(--s-200); --s-3xl: var(--s-250); --s-4xl: var(--s-300); --interface-blue: hsl(227deg 98% 59%); --interface-blue-light: hsl(227deg 92% 76%); --interface-blue-x-light: hsl(227deg 86% 96%); --interface-blue-dark: hsl(235deg 100% 28%); --interface-midnight: hsl(var(--hsl-value-midnight)); --interface-midnight-light: hsl(var(--hsl-value-midnight-light)); --interface-midnight-x-light: hsl(var(--hsl-value-midnight-x-light)); --interface-midnight-xx-light: hsl(var(--hsl-value-midnight-xx-light)); --interface-midnight-dark: hsl(var(--hsl-value-midnight-dark)); --interface-primary: var(--interface-blue); --interface-primary-light: var(--interface-blue-light); --interface-primary-x-light: var(--interface-blue-x-light); --interface-primary-dark: var(--interface-blue-dark); --interface-secondary: var(--interface-midnight); --interface-secondary-light: var(--interface-midnight-light); --interface-secondary-x-light: var(--interface-midnight-x-light); --interface-secondary-xx-light: var(--interface-midnight-xx-light); --interface-secondary-dark: var(--interface-midnight-dark); --hsl-value-green-600-saturated: hsl(128deg 49% 35%); --saturated-green-600: var(--hsl-value-green-600-saturated); --focus-outline-color: var(--focus-outline-blue); --link-color: var(--saturated-blue-500); --text-color: var(--neutral-grey-800); --ghost-text-color: var(--neutral-grey-500); --t-rule-color: var(--neutral-grey-50); --t-base: var(--t-font-size-100); --t-error: var(--saturated-red-500); --t-heavy: var(--t-font-weight-700); --t-large: var(--t-font-size-125); --t-medium: var(--t-font-size-100); --t-regular: var(--t-font-weight-400); --t-small: var(--t-font-size-87); --t-xl: var(--t-font-size-200); --t-brand-body: var(--t-font-stack); --t-font-color-body: var(--neutral-grey-650); --t-font-color-header: var(--neutral-grey-800); --t-font-color-hero: var(--neutral-grey-900); --t-font-family-body: var(--t-font-stack); --t-font-family-header: var(--t-font-stack); --t-font-family-hero: var(--t-font-stack); --t-link-active-color: var(--saturated-blue-300); --t-link-color: var(--saturated-blue-500); --t-link-disabled-color: var(--neutral-grey-400); --t-link-focus-color: var(--saturated-blue-500); --t-link-hover-color: var(--saturated-blue-700); --t-link-hover-visited-color: var(--saturated-purple-700); --t-link-visited-color: var(--saturated-purple-500); --accordion-body-border: 0; --accordion-body-padding: var(--s-100) var(--s-100) var(--s-50) var(--s-100); --accordion-body-padding-trigger-top: var(--s-50) var(--s-100) var(--s-100) var(--s-100); --accordion-border-bottom: var(--accordion-border); --accordion-border-color: var(--neutral-grey-100); --accordion-border-left: 0; --accordion-border-right: 0; --accordion-border-top: 0; --accordion-border-width: 1px; --accordion-border: var(--accordion-border-width) solid var(--accordion-border-color); --accordion-preview-border: 0; --accordion-chevron-margin: 0 var(--s-100) 0 0; --accordion-trigger-hover-background-color: var(--saturated-blue-25); --accordion-trigger-active-background-color: var(--saturated-blue-100); --accordion-trigger-box-shadow-color: var(--saturated-blue-400); --accordion-trigger-color: var(--neutral-grey-800); --accordion-trigger-display: grid; --accordion-trigger-gap: var(--s-50); --accordion-trigger-text-margin: var(--s-75) 0 var(--s-75) var(--s-100); --accordion-trigger-text-size: var(--t-font-size-100); --avatar-active-outline: 0; --avatar-bg: var(--neutral-grey-700); --avatar-bg-active: var(--neutral-grey-500); --avatar-bg-focused: var(--neutral-grey-800); --avatar-bg-light: var(--saturated-blue-50); --avatar-bg-light-active: var(--saturated-blue-300); --avatar-bg-light-hover: var(--saturated-blue-150); --avatar-bg-muted: var(--avatar-bg-light); --avatar-border: 1px solid var(--avatar-bg); --avatar-border-light: transparent; --avatar-border-light-default: transparent; --avatar-border-light-hover: transparent; --avatar-border-muted: transparent; --avatar-box-shadow-active: 0px 0px 0px 4px hsla(var(--hsl-value-blue-300-saturated) / 48%); --avatar-box-shadow-dark-active: 0px 0px 0px 4px transparent; --avatar-box-shadow-hover: 0px 0px 0px 4px hsla(var(--hsl-value-blue-400-saturated) / 24%); --avatar-outline-focus: solid 2px var(--saturated-blue-400); --avatar-font-weight: var(--t-font-weight-600); --avatar-text: var(--interface-white); --avatar-font-color-light: var(--saturated-blue-900); --avatar-font-color-muted: var(--avatar-font-color-light); --badge-border: none; --badge-border-radius: var(--border-radius-200); --badge-display: inline-block; --badge-padding: calc(var(--s-25) / 2) var(--s-50); --badge-text-line-height: var(--t-line-height); --badge-text-weight: var(--t-font-weight-400); --badge-type-light-bg-color: var(--neutral-grey-25); --badge-type-light-border: 0; --banner-bg: var(--saturated-blue-50); --banner-border: var(--saturated-blue-300); --banner-border-radius: var(--border-radius-400); --banner-icon: var(--saturated-blue-700); --banner-close-active: var(--saturated-blue-400); --banner-close-focus-outline-color: var(--saturated-blue-500); --banner-close-hover: var(--saturated-blue-200); --banner-link: var(--saturated-blue-600); --banner-padding: var(--s-small) 12px; --banner-error-bg: var(--saturated-red-50); --banner-error-border: var(--saturated-red-300); --banner-error-close-active: var(--saturated-red-400); --banner-error-close-hover: var(--saturated-red-200); --banner-error-icon: var(--saturated-red-700); --banner-error-link: var(--saturated-red-700); --banner-success-bg: var(--saturated-green-50); --banner-success-border: var(--saturated-green-300); --banner-success-close-active: var(--saturated-green-400); --banner-success-close-hover: var(--saturated-green-200); --banner-success-icon: var(--saturated-green-700); --banner-success-link: var(--saturated-green-700); --banner-tip-bg: var(--neutral-grey-00); --banner-tip-border: var(--neutral-grey-300); --banner-tip-close-active: var(--neutral-grey-400); --banner-tip-close-hover: var(--neutral-grey-200); --banner-tip-icon: var(--neutral-grey-700); --banner-tip-link: var(--neutral-grey-600); --banner-warning-bg: var(--saturated-yellow-50); --banner-warning-border: var(--saturated-yellow-300); --banner-warning-close-active: var(--saturated-yellow-300); --banner-warning-close-hover: var(--saturated-yellow-200); --banner-warning-icon: var(--saturated-yellow-700); --banner-warning-link: var(--saturated-yellow-700); --banner-text: var(--text-color); --breadcrumbs-icon: var(--interface-white); --breadcrumbs-text: var(--interface-white); --breadcrumbs-text-hover: var(--interface-white); --breadcrumbs-text-size: var(--t-small); --bulk-selector-bg: var(--interface-secondary); --button-bg-color-contained: var(--saturated-blue-500); --button-bg-color-contained-active: var(--saturated-blue-600); --button-bg-color-contained-focus: var(--saturated-blue-500); --button-bg-color-contained-hover: var(--saturated-blue-700); --button-bg-color-destructive: var(--saturated-red-500); --button-bg-color-destructive-dark-active: var(--saturated-red-700); --button-bg-color-destructive-dark-focus: var(--saturated-red-500); --button-bg-color-destructive-dark-hover: var(--saturated-red-600); --button-bg-color-destructive-light-active: hsl( var(--hsl-value-red-300-saturated) / 12% ); --button-bg-color-destructive-light-focus: hsl( var(--hsl-value-red-300-saturated) / 8% ); --button-bg-color-destructive-light-hover: hsl( var(--hsl-value-red-300-saturated) / 8% ); --button-bg-color-ghost-active: var(--saturated-blue-50); --button-bg-color-ghost-focus: transparent; --button-bg-color-ghost-hover: var(--saturated-blue-150); --button-bg-color-inverse: var(--neutral-grey-00); --button-bg-color-inverse-selected: var(--saturated-blue-25); --button-bg-color-outline: var(--neutral-grey-00); --button-bg-color-outline-active: var(--saturated-blue-50); --button-bg-color-outline-dark: var(--neutral-grey-800); --button-bg-color-outline-dark-active: var(--neutral-grey-500); --button-bg-color-outline-dark-focus: var(--neutral-grey-800); --button-bg-color-outline-dark-hover: var(--neutral-grey-600); --button-bg-color-outline-focus: var(--neutral-grey-00); --button-bg-color-outline-hover: var(--saturated-blue-150); --button-bg-text-color-outline-dark: var(--neutral-grey-00); --button-border-color-inverse: var(--neutral-grey-50); --button-border-color-inverse-selected: var(--saturated-blue-500); --button-border-color-outline: var(--neutral-grey-200); --button-border-color-outline-focus: var(--saturated-blue-500); --button-border-color-outline-dark: var(--neutral-grey-400); --button-border-color-outline-dark-hover: var(--neutral-grey-400); --button-border-radius: var(--border-radius-400); --button-box-shadow-focus: var(--saturated-blue-500); --button-box-shadow-inset-focus: inset 0 0 0 1px var(--neutral-grey-00); --button-loading-spinner-stroke-color-bg-contained: var(--saturated-blue-700); --button-loading-spinner-stroke-color-contained: var(--neutral-grey-00); --button-loading-spinner-stroke-color-bg-outline: var(--neutral-grey-50); --button-loading-spinner-stroke-color-outline: var(--neutral-grey-700); --button-loading-spinner-stroke-color-bg-destructive: var( --saturated-red-150 ); --button-loading-spinner-stroke-color: var(--neutral-grey-00); --button-text-color-contained: var(--neutral-grey-00); --button-text-color-destructive: var(--saturated-red-500); --button-text-color-ghost: var(--neutral-grey-800); --card-bg: var(--neutral-grey-00); --card-bg-filled: hsla(var(--hsl-value-blue-500-saturated) / 16%); --card-bg-hover: hsl(var(--hsl-value-blue-500-saturated) / 8%); --card-bg-muted: var(--neutral-grey-25); --card-border-color: var(--neutral-grey-100); --card-border-left: var(--card-border); --card-border-radius: var(--border-radius-500); --card-box-shadow: 0px 0px 0px 2px transparent; --card-compact-padding-inner: var(--s-50); --card-compact-padding-outer: 0; --card-dissolved-bg-hover: hsla(var(--hsl-value-blue-600-saturated) / 8%); --card-dissolved-bg-focus: hsla(var(--hsl-value-blue-600-saturated) / 12%); --card-elevated-box-shadow: var(--box-shadow-200); --card-elevated-box-shadow-focus: none; --card-shadow-focus: 0px 0px 0px 2px var(--saturated-blue-500); --card-box-shadow-hover: var(--box-shadow-100); --card-header-border: 0; --card-footer-border: 0; --card-outline-border-hover: var(--card-border); --card-outline-box-shadow-moveable: var(--box-shadow-300); --card-elevated-box-shadow-focus: 0 5px 12px rgba(0 0 0 / 8%), 0 3px 12px rgba(0 0 0 / 8%); --card-padding-inner: var(--s-100); --card-padding-inner-body: 0; --card-padding-outer: 0; --card-spacing-1x: var(--s-50); --card-spacing-2x: var(--s-100); --card-spacing-3x: var(--s-150); --card-spacing-4x: var(--s-200); --card-spacing-5x: var(--s-250); --container-bg: var(--interface-white); --container-header-border: 1px solid var(--interface-secondary-xx-light); --checkbox-bg: var(--neutral-grey-00); --checkbox-block-background-color-hover: none; --checkbox-block-border-color-focus: var(--saturated-blue-500); --checkbox-block-border-color-hover: var(--saturated-blue-400); --checkbox-block-box-shadow-focus: 0 0 0 2px var(--saturated-blue-400); --checkbox-block-checked-background-color: var(--saturated-blue-25); --checkbox-block-checked-background-color-focus: var(--saturated-blue-50); --checkbox-block-checked-background-color-hover: var(--saturated-blue-50); --checkbox-block-checked-border-color: var(--saturated-blue-400); --checkbox-block-checked-box-shadow: 0 0 0 var(--checkbox-label-box-shadow-spread) var(--checkbox-label-box-shadow-color); --checkbox-border-color: var(--neutral-grey-300); --checkbox-input-border-color: var(--neutral-grey-300); --checkbox-input-border-color-hover: var(--saturated-blue-400); --checkbox-input-checked-bg-color: var(--saturated-blue-500); --checkbox-input-checked-border-color: var(--saturated-blue-500); --checkbox-input-checked-border-color-focus: var(--saturated-blue-200); --checkbox-input-color-focus: var(--saturated-blue-400); --checkbox-input-column-gap: 1em; --checkbox-input-halo-color: hsla(var(--hsl-value-blue-400-saturated) / 16%); --checkbox-input-halo-width: 2.5em; --checkbox-input-halo-width-large: 2.4em; --checkbox-label-border-color: var(--neutral-grey-100); --checkbox-label-border-radius: var(--border-radius-400); --checkbox-label-box-shadow-color: hsla( var(--hsl-value-blue-400-saturated) / 24% ); --checkbox-label-box-shadow-hover: 0 0 0 var(--checkbox-label-box-shadow-spread) var(--checkbox-label-box-shadow-color); --checkbox-label-box-shadow-spread: 4px; --checkbox-label-checked-box-shadow-hover: 0 0 0 var(--checkbox-label-box-shadow-spread) hsla(var(--hsl-value-blue-400-saturated) / 48%); --checkbox-label-outline-color: transparent; --checkbox-label-outline-offset: 0; --checkbox-label-padding: 0.5em 0; --checkbox-label-row-gap: 0.75em; --checkbox-label-text-large: 1rem; --combobox-arrow-color: var(--neutral-grey-800); --combobox-background-disabled: var(--neutral-grey-50); --combobox-box-shadow-focus: 0 0 0 3px var(--saturated-blue-400); --combobox-box-shadow-hover: 0 0 0 var(--s-xs) hsla(var(--hsl-value-blue-400-saturated) / 24%); --combobox-divider-color: var(--neutral-grey-100); --combobox-error-color: var(--saturated-red-500); --combobox-font-size: var(--t-font-size-100); --combobox-list-background-color: var(--neutral-grey-00); --combobox-list-border-radius: var(--s-small); --combobox-list-box-shadow-color: hsla( var(--hsl-value-grey-1000-neutral) / 16% ); --combobox-opacity-disabled: 0.48; --combobox-option-background-color-hover: var(--saturated-blue-50); --combobox-option-background-color-selected: var(--saturated-blue-25); --combobox-option-box-shadow-focus: inset 0 0 0 2px var(--saturated-blue-400); --combobox-option-check-color: var(--saturated-blue-900); --combobox-option-color: var(--neutral-grey-800); --combobox-option-label-font-size: var(--t-base); --combobox-option-icon-color: var(--neutral-grey-750); --combobox-option-sublabel-color: var(--neutral-grey-600); --combobox-placeholder-color: var(--neutral-grey-500); --combobox-placeholder-color-focus: var(--neutral-grey-700); --combobox-tag-bg-color: var(--saturated-blue-50); --combobox-tag-bg-color-active: var(--saturated-blue-200); --combobox-tag-bg-color-hover: var(--saturated-blue-100); --combobox-tag-secondary-dark: var(--saturated-blue-300); --combobox-tag-secondary-dark-hover: var(--saturated-blue-600); --combobox-tag-text-color: var(--neutral-grey-800); --combobox-tag-text-color-hover: var(--saturated-blue-900); --combobox-trigger-background-color: var(--neutral-grey-00); --combobox-trigger-background-color-filled: var(--neutral-grey-50); --combobox-trigger-border-color: var(--neutral-grey-100); --combobox-trigger-border-active-color: var(--saturated-blue-400); --combobox-trigger-border-radius: var(--border-radius-400); --combobox-trigger-height-large: var(--s-300); --combobox-trigger-padding-vertical: var(--s-50); --combobox-trigger-padding: var(--combobox-trigger-padding-vertical) var(--s-300) var(--combobox-trigger-padding-vertical) var(--s-100); --combobox-trigger-padding-large-vertical: var(--s-75); --combobox-trigger-padding-large: var( --combobox-trigger-padding-large-vertical ) var(--s-300) var(--combobox-trigger-padding-large-vertical) var(--s-75); --combobox-value-color: var(--neutral-grey-800); --dropdown-bg-color-secondary: var(--neutral-grey-50); --dropdown-bg-color-secondary-hover: var(--neutral-grey-50); --dropdown-border-color-secondary: var(--neutral-grey-50); --dropdown-border-style-focus: solid; --dropdown-border-width-focus: 2px; --dropdown-footer-border-top-color: var(--neutral-grey-50); --dropdown-header-bg: var(--neutral-grey-25); --dropdown-header-border-bottom-color: var(--neutral-grey-50); --dropdown-link-bg-focus: var(--dropdown-color-transparent-focus); --dropdown-link-bg-hover: var(--saturated-blue-50); --dropdown-link-border: var(--dropdown-border-width-focus) var(--dropdown-border-style-focus) var(--dropdown-color-transparent-focus); --dropdown-link-border-color-focus: var(--saturated-blue-500); --dropdown-link-border-radius: var(--border-radius); --dropdown-link-border-radius-0: none; --dropdown-menu-bg: var(--neutral-grey-00); --dropdown-menu-box-shadow: var(--box-shadow-200); --dropdown-text-color-light: var(--neutral-grey-00); --dropdown-trigger-border: var(--dropdown-border-width-focus) var(--dropdown-border-style-focus) var(--saturated-blue-500); --gallery-card-action-border-color: var(--neutral-grey-50); --gallery-card-action-icon-fill-color: var(--neutral-grey-400); --gallery-card-action-radius: var(--border-radius-400); --gallery-card-dropdown-text-color: var(--neutral-grey-400); --gallery-card-padding: var(--card-spacing-2x); --header-bg: var(--interface-primary); --header-height: 0; --header-text: var(--interface-white); --header-logo-fill: var(--interface-white); --subheader-bg: var(--interface-white); --subheader-box-shadow: var(--box-shadow); --hint-text-color-error: var(--saturated-red-500); --icon-color-success: var(--saturated-green-500); --icon-color-error: var(--saturated-red-500); --icon-fill-color-muted: var(--neutral-grey-200); --icon-height-size: var(--icon-size); --icon-size-xs-viewport-md-and-up: 0.75rem; --icon-size-sm-viewport-md-and-up: 0.875rem; --icon-size-md-viewport-md-and-up: 1.125rem; --icon-size-lg-viewport-md-and-up: 1.375rem; --icon-size-xl-viewport-md-and-up: 3.44rem; --icon-size-xs: var(--icon-size-xs-viewport-md-and-up); --icon-size-sm: var(--icon-size-sm-viewport-md-and-up); --icon-size-md: var(--icon-size-md-viewport-md-and-up); --icon-size-lg: var(--icon-size-lg-viewport-md-and-up); --icon-size-xl: var(--icon-size-xl-viewport-md-and-up); --icon-width-size: var(--icon-size); --icon-btn-contained-color-active: var(--saturated-blue-700); --icon-btn-contained-color-bg: var(--saturated-blue-500); --icon-btn-contained-color-border-focus: var(--neutral-grey-00); --icon-btn-contained-color-hover: var(--saturated-blue-600); --icon-btn-contained-color-text: var(--neutral-grey-00); --icon-btn-contained-destructive-color-active: var(--saturated-red-700); --icon-btn-contained-destructive-color-bg: var(--saturated-red-500); --icon-btn-contained-destructive-color-hover: var(--saturated-red-600); --icon-btn-outline-color-active: var(--neutral-grey-50); --icon-btn-outline-color-bg: var(--neutral-grey-00); --icon-btn-outline-color-border: var(--neutral-grey-200); --icon-btn-outline-color-border-focus: transparent; --icon-btn-outline-color-hover: var(--neutral-grey-25); --icon-btn-outline-color-text: var(--neutral-grey-700); --icon-btn-ghost-color-active: var(--saturated-blue-150); --icon-btn-ghost-color-bg: transparent; --icon-btn-ghost-color-border: transparent; --icon-btn-ghost-color-hover: var(--saturated-blue-50); --icon-btn-ghost-color-text: var(--neutral-grey-700); --icon-btn-ghost-neutral-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-neutral-color-active: var(--neutral-grey-500); --icon-btn-ghost-neutral-color-hover: var(--neutral-grey-600); --icon-btn-ghost-neutral-color-text: var(--neutral-grey-00); --icon-btn-ghost-blue-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-blue-color-active: var(--saturated-blue-400); --icon-btn-ghost-blue-color-hover: var(--saturated-blue-200); --icon-btn-ghost-blue-color-text: var(--neutral-grey-800); --icon-btn-ghost-green-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-green-color-active: var(--saturated-green-400); --icon-btn-ghost-green-color-hover: var(--saturated-green-200); --icon-btn-ghost-green-color-text: var(--saturated-green-800); --icon-btn-ghost-yellow-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-yellow-color-active: var(--saturated-yellow-400); --icon-btn-ghost-yellow-color-hover: var(--saturated-yellow-200); --icon-btn-ghost-yellow-color-text: var(--saturated-yellow-800); --icon-btn-ghost-red-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-red-color-active: var(--saturated-red-400); --icon-btn-ghost-red-color-hover: var(--saturated-red-200); --icon-btn-ghost-red-color-text: var(--saturated-red-800); --icon-btn-ghost-aqua-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-aqua-color-active: var(--saturated-aqua-400); --icon-btn-ghost-aqua-color-hover: var(--saturated-aqua-200); --icon-btn-ghost-aqua-color-text: var(--saturated-aqua-800); --icon-btn-ghost-teal-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-teal-color-active: var(--saturated-teal-400); --icon-btn-ghost-teal-color-hover: var(--saturated-teal-200); --icon-btn-ghost-teal-color-text: var(--saturated-teal-800); --icon-btn-ghost-orange-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-orange-color-active: var(--saturated-orange-400); --icon-btn-ghost-orange-color-hover: var(--saturated-orange-200); --icon-btn-ghost-orange-color-text: var(--saturated-orange-800); --icon-btn-ghost-pink-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-pink-color-active: var(--saturated-pink-400); --icon-btn-ghost-pink-color-hover: var(--saturated-pink-200); --icon-btn-ghost-pink-color-text: var(--saturated-pink-800); --icon-btn-ghost-purple-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-purple-color-active: var(--saturated-purple-400); --icon-btn-ghost-purple-color-hover: var(--saturated-purple-200); --icon-btn-ghost-purple-color-text: var(--saturated-purple-800); --icon-btn-ghost-grey-color-border-focus: var(--neutral-grey-00); --icon-btn-ghost-grey-color-active: var(--neutral-grey-300); --icon-btn-border-color: var(--icon-btn-contained-color-border); --icon-btn-outline-color: var(--saturated-blue-500); --indicator-bg-color-red: var(--saturated-red-500); --indicator-bg-color-success: var(--saturated-green-500); --indicator-border-color-approved: var(--neutral-grey-500); --indicator-border-color-pending: var(--neutral-grey-500); --lightbox-bg-color: var(--neutral-grey-00); --lightbox-container-type: size; --lightbox-image-opacity: 0; --lightbox-spinner-scale: 1; --lightbox-image-width: initial; --lightbox-image-height: initial; --logo-fill-ut-bubble: var(--brand-blue); --logo-fill-ut-u: var(--brand-blue); --logo-fill-ut-user: var(--interface-white); --logo-fill-ut-testing: var(--brand-blue); --multi-select-text: var(--t-font-size-87); --navbar-border-bottom: 1px solid var(--neutral-grey-50); --navbar-box-shadow: 0; --navbar-separator-color: var(--neutral-grey-25); --popover-arrow-shadow: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.08)); --popover-bg: var(--interface-white); --popover-border-radius: var(--border-radius-500); --popover-body-padding: 1rem 1.5rem 1.5rem; --popover-box-shadow: 0px 0px 8px 0px rgba(16, 16, 16, 0.08), 0px 4px 8px 0px rgba(16, 16, 16, 0.08); --popover-small-max-width: var(--popover-width-small); --popover-title-border-bottom: var(--neutral-grey-00); --popover-title-padding: 1.5rem 1.5rem 0; --popover-width-default: 320px; --popover-width-large: 640px; --popover-width-small: 192px; --progress-bar-circular-stroke-color: var(--saturated-blue-500); --progress-bar-circular-stroke-color-filled: var(--neutral-grey-50); --progress-bar-height-large: var(--s-100); --progress-bar-height-small: var(--s-25); --progress-bar-outline-color: var(--saturated-blue-500); --progress-bar-step-background-color: var(--neutral-grey-50); --progress-bar-step-background-color-active: var(--saturated-blue-500); --search-clear-icon-color: var(--neutral-grey-800); --search-clear-icon-outline-focus: var(--saturated-blue-500); --search-clear-icon-padding: var(--s-50) var(--s-75); --search-clear-icon-margin: 0 var(--s-75); --search-input-border-color: var(--neutral-grey-100); --search-input-text-size: var(--t-font-size-100); --search-search-icon-color: var(--neutral-grey-800); --search-search-icon-size: 18px; --search-wrapper-bg: var(--neutral-grey-00); --search-wrapper-radius: var(--border-radius-400); --search-wrapper-width: auto; --search-overlay-bg: var(--neutral-grey-00); --search-overlay-border-color: var(--neutral-grey-100); --search-overlay-border-radius: var(--border-radius-400); --search-overlay-padding: var( --s-50 ); --search-overlay-shadow: none; --search-overlay-section-header-color: var(--neutral-grey-500); --search-overlay-section-header-font-weight: var(--t-font-weight-600); --search-overlay-section-header-margin: var(--s-25) 0 var(--s-25) var(--s-25); --search-overlay-section-margin: 0 0 var(--s-150) 0; --segmented-controls-bg-color: var(--neutral-grey-50); --segmented-controls-bg-color-light: var(--saturated-blue-50); --segmented-controls-bg-color-dark: var(--saturated-blue-100); --segmented-controls-button-box-shadow-color: var(--saturated-blue-400); --segmented-controls-button-bg-color-dark-active: var(--saturated-blue-150); --segmented-controls-button-bg-color-default-active: var(--neutral-grey-150); --segmented-controls-button-bg-color-light-active: var(--saturated-blue-100); --segmented-controls-button-color: var(--neutral-grey-600); --segmented-controls-button-selected-color: var(--neutral-grey-1000); --segmented-controls-pill-bg-color: var(--neutral-grey-00); --search-overlay-item-background-color: none; --search-overlay-item-border-radius: var(--border-radius-400); --search-overlay-item-box-shadow-active: 0 0 0 1px var(--saturated-blue-400), 0 0 0 calc(4px + 1px) hsla(var(--hsl-value-blue-400-saturated) / 48%); --search-overlay-item-box-shadow-hover: 0 0 0 1px var(--saturated-blue-400), 0 0 0 calc(4px + 1px) hsla(var(--hsl-value-blue-400-saturated) / 24%); --search-overlay-item-column-gap: var(--s-75); --search-overlay-item-margin: 0; --search-overlay-item-outline-color: var(--saturated-blue-500); --search-overlay-item-padding: var(--s-50); --icon-stamp-bg: var(--staturated-blue-25); --icon-stamp-fill-color-primary: var(--interface-white); --icon-stamp-bg-primary: var(--saturated-blue-500); --icon-stamp-fill-color-success: var(--interface-secondary-light); --icon-stamp-bg-success: var(--saturated-green-25); --icon-stamp-fill-color-error: var(--saturated-red-500); --icon-stamp-bg-error: var(--saturated-red-25); --input-field-background-disabled: var(--neutral-grey-00); --input-field-background-filled: var(--colorNeutral50); --input-field-background-filled-disabled: var(--colorNeutral50); --input-field-background-filled-focus: var(--colorNeutral50); --input-field-background-filled-hover: var(--colorNeutral50); --input-field-border-color: var(--neutral-grey-100); --input-field-border-color-active: var(--saturated-blue-400); --input-field-border-disabled: var(--neutral-grey-100); --input-field-border-radius: var(--border-radius-medium); --input-field-border-width-filled: 0; --input-field-box-shadow: 0px 0px 0px 4px hsla(var(--hsl-value-blue-400-saturated) / 24%); --input-field-box-shadow-active: 0px 0px 0px 2px var(--saturated-blue-400); --input-field-box-shadow-inactive: 0px 0px 0px 2px hsla(var(--hsl-value-blue-400-saturated) / 0%); --input-field-color-filled-disabled: var(--neutral-grey-200); --input-field-error: var(--saturated-red-500); --input-field-text-disabled: var(--neutral-grey-150); --input-field-text-filled: var(--neutral-grey-500); --input-field-transition: 0.3s; --input-font-size: var(--t-font-size-100); --keyboard-shortcut-bg: var(--interface-white); --keyboard-shortcut-border: 1px solid var(--interface-secondary-x-light); --column-header-text: var(--neutral-grey-800); --column-header-text-size: var(--t-font-size-100); --column-header-text-weight: var(--t-font-weight-600); --list-header-border: 1px solid var(--list-header-border-color); --list-header-border-color: var(--neutral-grey-100); --list-row-bg: var(--neutral-grey-00); --list-row-bg-selected: var(--saturated-blue-50); --list-row-box-shadow: var(--box-shadow-medium); --list-row-border: 1px solid var(--neutral-grey-100); --list-row-border-first: 0; --list-row-border-status-error: var(--saturated-red-500); --list-row-border-status-pending: var(--saturated-yellow-500); --list-row-box-shadow: 0; --list-row-container-bg: var(--neutral-grey-00); --list-row-radius: 0; --loading-bar-background: var(--neutral-grey-50); --loading-bar-display-xssm: grid; --loading-bar-horizontal-radius: 9999px; --loading-indicator-background: var(--saturated-blue-500); --loading-message-display: none; --loading-spinner-stroke-color: var(--interface-primary); --loading-spinner-stroke-color-background: var(--interface-secondary-x-light); --message-bubble-bg: var(--interface-secondary-x-light); --modal-body-bg: var(--neutral-grey-00); --modal-body-canvas-bg: var(--neutral-grey-25); --modal-body-spacing: var(--s-200); --modal-body-spacing-md: var(--s-200); --modal-border-radius: var(--border-radius-600); --modal-display: initial; --modal-footer-border: none; --modal-footer-bg: var(--interface-white); --modal-footer-spacing: 0 var(--s-200) var(--s-200) var(--s-200); --modal-header-bg: var(--neutral-grey-00); --modal-header-border: 1px solid transparent; --modal-header-bottom-offset: unset; --modal-header-bottom-position: none; --modal-header-font-size: var(--t-font-size-200); --modal-header-font-weight: var(--t-font-weight-700); --modal-header-spacing: var(--s-200) var(--s-200) 0 var(--s-200); --modal-size-default: 560px; --modal-size-small: 90%; --modal-subtitle-font-size: var(--t-font-size-125); --modal-subtitle-font-weight: var(--t-font-weight-600); --pagination-item-bg: transparent; --pagination-item-border: 0 none transparent; --pagination-btn-bg: transparent; --pagination-btn-border: 1px solid var(--interface-secondary-x-light); --pagination-btn-text-color: var(--interface-secondary-light); --select-field-bg-color: var(--neutral-grey-00); --select-field-bg-color-secondary: var(--neutral-grey-50); --select-field-bg-color-secondary-hover: var(--saturated-blue-25); --select-field-border-color: none; --select-field-border-color-default: var(--neutral-grey-100); --select-field-border-color-default-focus: var(--saturated-blue-400); --select-field-border-color-default-hover: var(--saturated-blue-400); --select-field-border-color-error: var(--saturated-red-500); --select-field-border-color-focus: var(--saturated-blue-400); --select-field-border-color-secondary: var(--saturated-blue-400); --select-field-border-color-outline: var(--neutral-grey-100); --select-field-border-color-outline-hover: var(--saturated-blue-400); --select-field-border-radius: 0.5rem; --select-field-box-shadow: 0px 0px 0px 4px hsla(var(--hsl-value-blue-400-saturated) / 24%); --select-field-box-shadow-focus: 0px 0px 0px 3px var(--saturated-blue-400); --select-field-caret-image: url("data:image/svg+xml, "); --select-field-caret-style: var(--select-field-caret-image) no-repeat calc(100% - var(--s-75)) 48%; --select-field-font-color-error: var(--saturated-red-500); --select-field-font-weight: var(--t-font-weight-400); --select-field-font-weight-secondary: var(--select-field-font-weight); --select-field-height: 2.5rem; --select-field-height-large: 3rem; --select-field-padding: var(--s-25) calc(var(--s-50) * 5.5) var(--s-25) var(--s-75); --select-text-color: var(--neutral-grey-500); --select-text-size: var(--t-font-size-100); --single-select-block-input-accent-width: 0.5em; --single-select-block-label-background-color-active: var(--saturated-blue-25); --single-select-block-label-background-color-disabled: var(--neutral-grey-50); --single-select-block-label-border-color: var(--neutral-grey-100); --single-select-block-label-border-radius: 0.5em; --single-select-block-label-border-width: 0.0625em; --single-select-block-label-box-shadow-active: hsla( var(--hsl-value-blue-400-saturated) / 48% ); --single-select-block-label-box-shadow-color: hsla( var(--hsl-value-blue-400-saturated) / 24% ); --single-select-block-label-box-shadow-hover: hsla( var(--hsl-value-blue-400-saturated) / 48% ); --single-select-block-label-box-shadow-spread: 0.25em; --single-select-block-label-box-shadow-x-offset: 0; --single-select-block-label-box-shadow-y-offset: 0; --single-select-block-label-checked-background-color: var( --saturated-blue-25 ); --single-select-block-label-checked-background-color-active: var( --saturated-blue-100 ); --single-select-block-label-checked-background-color-focus: var( --saturated-blue-50 ); --single-select-block-label-checked-background-color-hover: var( --saturated-blue-50 ); --single-select-block-label-checked-border-color: var(--saturated-blue-400); --single-select-block-label-checked-border-width: var( --single-select-block-label-border-width ); --single-select-block-label-checked-box-shadow-opacity: var( --single-select-block-label-box-shadow-opacity-hover ); --single-select-block-label-color-disabled: var(--neutral-grey-500); --single-select-block-label-background-color-hover: var( --single-select-block-label-background-color ); --single-select-block-label-border-color-hover: var(--saturated-blue-400); --single-select-block-label-box-shadow-opacity-hover: 1; --single-select-block-label-layout-gap-column: 0.75em; --single-select-block-label-outline: 0.125em var(--single-select-block-label-outline-style) var(--saturated-blue-400); --single-select-block-label-outline-offset: 0; --single-select-inline-layout-gap-column: 1.5em; --single-select-input-accent-color: var(--interface-primary); --single-select-input-accent-width: max(0.5em, 0.5rem); --single-select-input-border-color-active: var(--saturated-blue-500); --single-select-input-border-color-hover: var(--saturated-blue-400); --single-select-input-checked-accent-color: var(--saturated-blue-500); --single-select-input-checked-accent-color-active: var(--saturated-blue-700); --single-select-input-checked-accent-color-focus: var(--saturated-blue-500); --single-select-input-checked-accent-color-hover: var(--saturated-blue-600); --single-select-input-checked-border-color: var(--saturated-blue-500); --single-select-input-checked-border-color-active: var(--saturated-blue-700); --single-select-input-checked-border-color-focus: var(--saturated-blue-200); --single-select-input-checked-border-color-hover: var(--saturated-blue-600); --single-select-input-halo-color: hsla( var(--hsl-value-blue-400-saturated) / 16% ); --single-select-input-halo-color-active: hsla( var(--hsl-value-blue-400-saturated) / 24% ); --single-select-input-halo-scale: 0; --single-select-input-halo-translate: -50%; --single-select-input-halo-width: 2.5em; --single-select-input-halo-width-large: 3rem; --single-select-input-margin: 0.5em 0 0 0; --single-select-input-outline-color: var(--saturated-blue-500); --single-select-input-outline-width: 0.07em; --single-select-label-block: 0 0 0 calc(var(--single-select-input-halo-width) - 0.5em); --single-select-label-block-other: 0 0 var(--s-100) calc(var(--single-select-input-halo-width) - 0.5em); --single-select-label-padding: var(--s-50) 0 var(--s-50) calc(var(--single-select-input-halo-width) - 0.5em); --single-select-label-padding-large: var(--s-75) 0 var(--s-75) calc(var(--single-select-input-halo-width-large) - 0.25rem); --single-select-label-text-size: 1em; --single-select-label-text-size-large: 1rem; --single-select-layout-block-gap-row: 0.75em; --single-select-layout-gap-row: 0; --single-select-layout-margin: 0; --single-select-text-color: var(--neutral-grey-800); --single-select-text-size: var(--t-font-size-87); --single-select-text-size-large: var(--t-font-size-150); --split-layout-left-content-background: var(--interface-white); --split-layout-right-content-background: var(--interface-secondary-xx-light); --split-view-group-border-bottom: 1px solid var(--interface-secondary-x-light); --step-list-separator: var(--interface-secondary-x-light); --step-link-border: var(--interface-secondary-x-light); --step-link-text-color: var(--interface-secondary-light); --step-link-icon-fill: var(--interface-secondary-x-light); --tab-background-color-active: var(--saturated-blue-100); --tab-background-color-hover: var(--saturated-blue-50); --tab-border-color: transparent; --tab-border-color-active: var(--neutral-grey-800); --tab-border-right-width: var(--tab-border-width); --tab-border-right-width-large: 2px; --tab-border-width-left: 0; --tab-border-width-left: var(--tab-border-width); --tab-divider-color: var(--interface-secondary-x-light); --tab-box-shadow: 0px 0px 0px 2px var(--saturated-blue-400); --tab-font-size: var(--t-font-size-100); --tab-margin-badge: 0 0 0 var(--s-50); --tab-opacity-disabled: 0.48; --tab-outline: none; --tab-outline-offset: 0; --tab-padding: calc(var(--s-25) * 1.5) var(--s-50) var(--s-25) var(--s-50); --tab-padding-large: var(--s-50); --tab-padding-vertical: calc(var(--s-25) * 1.5) var(--s-75); --tab-padding-vertical-large: calc(var(--s-50) + (var(--s-25) / 2)) var(--s-75); --tab-text-color: var(--neutral-grey-700); --tab-text-color-active: var(--tab-text-color); --tab-text-color-disabled: var(--ghost-text-color); --tab-text-color-hover: var(--tab-text-color); --tab-text-weight: var(--t-font-weight-400); --tab-text-weight-active: var(--t-font-weight-500); --tab-width: auto; --tabs-column-gap: 0; --tabs-container-border-bottom: 0; --tabs-display: inline-grid; --tabs-indicator-display: block; --tabs-border: 1px solid var(--interface-secondary-x-light); --table-bg-color: var(--body-bg-offset); --table-border-bottom: 1px solid var(--interface-secondary-x-light); --table-header-bg-color: var(--table-bg-color); --table-header-border-bottom: 1px solid var(--interface-secondary-x-light); --tag-border-radius: var(--border-radius-400); --tag-border-radius-small: var(--border-radius-200); --tag-border-removeable: none; --tag-display-xs: var(--tag-display); --tag-display-large: var(--tag-display); --tag-spacing-xs: var(--s-xs); --tag-spacing-medium: var(--tag-padding-v-medium) var(--s-75); --tag-spacing-medium-icon: var(--tag-padding-v-medium) var(--s-75) var(--tag-padding-v-medium) calc(var(--s-75) / 2); --tag-spacing-medium-removeable: var(--tag-padding-v-medium) var(--s-25) var(--tag-padding-v-medium) var(--s-75); --tag-spacing-medium-removeable-icon: var(--tag-padding-v-medium) var(--s-25) var(--tag-padding-v-medium) calc(var(--s-75) / 2); --tag-spacing-small: var(--tag-padding-v) var(--s-50); --tag-spacing-small-icon: var(--tag-padding-v) var(--s-50) var(--tag-padding-v) var(--s-25); --tag-spacing-small-removeable: var(--tag-padding-v) var(--s-25) var(--tag-padding-v) var(--s-50); --tag-text-size-medium: var(--t-font-size-100); --tag-text-size-small: var(--t-font-size-87); --tag-focus-border: 2px solid var(--saturated-blue-500); --tag-focus-offset: 1px; --tag-padding-v: calc(var(--s-75) / 8); --tag-padding-v-medium: var(--s-25); --tag-bg-color: var(--saturated-blue-50); --tag-bg-color-dark-grey: var(--neutral-grey-700); --tag-bg-color-removeable: var(--tag-bg-color); --tag-bg-color-grey: var(--neutral-grey-50); --tag-bg-color-blue: var(--saturated-blue-50); --tag-bg-color-aqua: var(--saturated-aqua-50); --tag-bg-color-teal: var(--saturated-teal-50); --tag-bg-color-green: var(--saturated-green-50); --tag-bg-color-yellow: var(--saturated-yellow-50); --tag-bg-color-orange: var(--saturated-orange-50); --tag-bg-color-red: var(--saturated-red-50); --tag-bg-color-pink: var(--saturated-pink-50); --tag-bg-color-purple: var(--saturated-purple-50); --tag-bg-color-blue-hover: var(--saturated-blue-100); --tag-bg-color-aqua-hover: var(--saturated-aqua-100); --tag-bg-color-teal-hover: var(--saturated-teal-100); --tag-bg-color-green-hover: var(--saturated-green-100); --tag-bg-color-yellow-hover: var(--saturated-yellow-100); --tag-bg-color-orange-hover: var(--saturated-orange-100); --tag-bg-color-red-hover: var(--saturated-red-100); --tag-bg-color-pink-hover: var(--saturated-pink-100); --tag-bg-color-purple-hover: var(--saturated-purple-100); --tag-bg-color-dark-grey-active: var(--neutral-grey-900); --tag-bg-color-grey-active: var(--neutral-grey-150); --tag-bg-color-blue-active: var(--saturated-blue-150); --tag-bg-color-aqua-active: var(--saturated-aqua-150); --tag-bg-color-teal-active: var(--saturated-teal-150); --tag-bg-color-green-active: var(--saturated-green-150); --tag-bg-color-yellow-active: var(--saturated-yellow-150); --tag-bg-color-orange-active: var(--saturated-orange-150); --tag-bg-color-red-active: var(--saturated-red-150); --tag-bg-color-pink-active: var(--saturated-pink-150); --tag-bg-color-purple-active: var(--saturated-purple-150); --tag-bg-color-dark-grey-disabled: var(--neutral-grey-700); --tag-text-color: var(--tag-text-color-blue); --tag-text-color-removeable: var(--tag-text-color); --tag-text-color-grey: var(--neutral-grey-800); --tag-text-color-blue: var(--saturated-blue-800); --tag-text-color-aqua: var(--saturated-aqua-800); --tag-text-color-teal: var(--saturated-teal-800); --tag-text-color-green: var(--saturated-green-800); --tag-text-color-yellow: var(--saturated-yellow-800); --tag-text-color-orange: var(--saturated-orange-800); --tag-text-color-red: var(--saturated-red-800); --tag-text-color-pink: var(--saturated-pink-800); --tag-text-color-purple: var(--saturated-purple-800); --tag-close-btn-bg-color: none; --tag-close-btn-border-radius: 4px; --tag-close-btn-border-radius-small: var(--border-radius-100); --tag-close-btn-margin: 0 0 0 var(--s-25); --tag-close-btn-spacing: calc(var(--s-25) * 1.5); --tag-close-btn-text-color: inherit; --tag-close-btn-icon-size-small: var(--s-50); --tag-close-btn-icon-size-medium: var(--s-75); --tag-close-btn-text-color-grey: var(--tag-close-btn-text-color); --tag-close-btn-text-color-blue: var(--tag-close-btn-text-color); --tag-close-btn-text-color-aqua: var(--tag-close-btn-text-color); --tag-close-btn-text-color-teal: var(--tag-close-btn-text-color); --tag-close-btn-text-color-green: var(--tag-close-btn-text-color); --tag-close-btn-text-color-yellow: var(--tag-close-btn-text-color); --tag-close-btn-text-color-orange: var(--tag-close-btn-text-color); --tag-close-btn-text-color-red: var(--tag-close-btn-text-color); --tag-close-btn-text-color-pink: var(--tag-close-btn-text-color); --tag-close-btn-text-color-purple: var(--tag-close-btn-text-color); --tag-close-btn-bg-color-dark-grey-hover: var(--neutral-grey-800); --tag-close-btn-bg-color-grey-hover: var(--neutral-grey-200); --tag-close-btn-bg-color-blue-hover: var(--saturated-blue-200); --tag-close-btn-bg-color-aqua-hover: var(--saturated-aqua-200); --tag-close-btn-bg-color-teal-hover: var(--saturated-teal-200); --tag-close-btn-bg-color-green-hover: var(--saturated-green-200); --tag-close-btn-bg-color-yellow-hover: var(--saturated-yellow-200); --tag-close-btn-bg-color-orange-hover: var(--saturated-orange-200); --tag-close-btn-bg-color-red-hover: var(--saturated-red-200); --tag-close-btn-bg-color-pink-hover: var(--saturated-pink-200); --tag-close-btn-bg-color-purple-hover: var(--saturated-purple-200); --tag-close-btn-bg-color-dark-grey-active: var(--neutral-grey-900); --tag-close-btn-bg-color-grey-active: var(--neutral-grey-300); --tag-close-btn-bg-color-blue-active: var(--saturated-blue-300); --tag-close-btn-bg-color-aqua-active: var(--saturated-aqua-300); --tag-close-btn-bg-color-teal-active: var(--saturated-teal-300); --tag-close-btn-bg-color-green-active: var(--saturated-green-300); --tag-close-btn-bg-color-yellow-active: var(--saturated-yellow-300); --tag-close-btn-bg-color-orange-active: var(--saturated-orange-300); --tag-close-btn-bg-color-red-active: var(--saturated-red-300); --tag-close-btn-bg-color-pink-active: var(--saturated-pink-300); --tag-close-btn-bg-color-purple-active: var(--saturated-purple-300); --tooltip-arrow-spacing: 12px; --tooltip-bg: var(--neutral-grey-800); --tooltip-border-radius: var(--border-radius-400); --tooltip-box-shadow: var(--box-shadow-heavy); --tooltip-display: block; --tooltip-display-visible: block; --tooltip-opacity: 1; --tooltip-padding: 8px 12px; --tooltip-text-align: left; --toast-bg-dark: var(--neutral-grey-800); --toast-bg-light: var(--neutral-grey-700); --toast-border-radius: var(--border-radius-400); --toast-box-shadow: var(--box-shadow-300); --toast-status-error: var(--saturated-red-200); --toast-status-success: var(--saturated-green-200); --toast-status-warning: var(--saturated-yellow-200); --toast-text-color: var(--neutral-grey-25); --typeahead-bg: var(--neutral-grey-00); --typeahead-item-border-bottom: 1px solid var(--neutral-grey-50); --typeahead-option-bg-color-hover: var(--neutral-grey-50); --typeahead-wrap-bg: var(--neutral-grey-00); --user-notification-item-border-bottom: 1px solid var(--interface-secondary-xx-light); --slider-thumb-border: 1px solid var(--interface-secondary-x-light); --slider-thumb-background-color: var(--interface-white); --stepper-bg: var(--neutral-grey-25); --stepper-border-radius: var(--border-radius-400); --stepper-btn-bg: var(--neutral-grey-25); --stepper-overlay-bg-active: hsla(var(--hsl-value-grey-500-neutral) / 16%); --stepper-overlay-bg-focus: hsla(var(--hsl-value-grey-500-neutral) / 12%); --stepper-overlay-bg-hover: hsla(var(--hsl-value-grey-500-neutral) / 8%); --toggle-button-active-background-color: var(--saturated-blue-25); --toggle-button-background-color: var(--neutral-grey-00); --toggle-button-border-color: var(--neutral-grey-100); --toggle-button-border-width: max(1px, 0.0625em); --toggle-button-box-shadow-blur: 0; --toggle-button-box-shadow-color: hsla( var(--hsl-value-blue-400-saturated) / 24% ); --toggle-button-box-shadow-hover: hsla( var(--hsl-value-blue-400-saturated) / 48% ); --toggle-button-box-shadow-opacity: 0; --toggle-button-box-shadow-spread: 0.25em; --toggle-button-box-shadow-x-offset: 0; --toggle-button-box-shadow-y-offset: 0; --toggle-button-checked-active-background-color: var(--saturated-blue-100); --toggle-button-checked-background-color: var(--saturated-blue-25); --toggle-button-checked-border-color: var(--saturated-blue-400); --toggle-button-checked-focus-background-color: var(--saturated-blue-50); --toggle-button-checked-hover-background-color: var(--saturated-blue-50); --toggle-button-checked-box-shadow-opacity: 1; --toggle-button-hover-background-color: var(--toggle-button-background-color); --toggle-button-hover-border-color: var(--saturated-blue-400); --toggle-button-hover-box-shadow-opacity: 1; --toggle-button-outline: var(--saturated-blue-400) max(1px, 0.0625em) solid; --toggle-button-padding: var(--s-50) var(--s-100); --toggle-button-text-size: var(--t-font-size-100); } :root .t-body, :host .t-body { color: var(--t-font-color-body); font-family: var(--t-font-family-body); font-size: var(--t-font-size-100); font-weight: var(--t-font-weight-400); letter-spacing: var(--t-letter-spacing-base); line-height: var(--t-line-height-150); } :root .t-body-compact, :host .t-body-compact { color: var(--t-font-color-body); font-family: var(--t-font-family-body); font-size: var(--t-font-size-87); font-weight: var(--t-font-weight-400); letter-spacing: var(--t-letter-spacing-base); line-height: var(--t-line-height-125); } :root .t-body-paragraph, :host .t-body-paragraph { color: var(--t-font-color-body); font-family: var(--t-font-family-body); font-size: var(--t-font-size-125); font-weight: var(--t-font-weight-400); letter-spacing: var(--t-letter-spacing-base); line-height: var(--t-line-height-175); } :root .t-hero-1, :host .t-hero-1 { color: var(--t-font-color-hero); font-family: var(--t-font-family-hero); font-size: var(--t-font-size-750); font-weight: var(--t-font-weight-600); letter-spacing: var(--t-letter-spacing-base); line-height: var(--t-line-height-750); } :root .t-hero-2, :host .t-hero-2 { color: var(--t-font-color-hero); font-family: var(--t-font-family-hero); font-size: var(--t-font-size-600); font-weight: var(--t-font-weight-600); letter-spacing: var(--t-letter-spacing-base); line-height: var(--t-line-height-600); } :root .t-hero-3, :host .t-hero-3 { color: var(--t-font-color-hero); font-family: var(--t-font-family-hero); font-size: var(--t-font-size-450); font-weight: var(--t-font-weight-700); letter-spacing: var(--t-letter-spacing-base); line-height: var(--t-line-height-500); } :root .t-hero-4, :host .t-hero-4 { color: var(--t-font-color-hero); font-family: var(--t-font-family-hero); font-size: var(--t-font-size-400); font-weight: var(--t-font-weight-700); letter-spacing: var(--t-letter-spacing-base); line-height: var(--t-line-height-450); } :root .t-hero-5, :host .t-hero-5 { color: var(--t-font-color-hero); font-family: var(--t-font-family-header); font-size: var(--t-font-size-300); font-weight: var(--t-font-weight-700); letter-spacing: var(--t-letter-spacing-base); line-height: var(--t-line-height-350); } :root .t-heading-1, :host .t-heading-1 { color: var(--t-font-color-header); font-family: var(--t-font-family-header); font-size: var(--t-font-size-250); font-weight: var(--t-font-weight-600); letter-spacing: var(--t-letter-spacing-base); line-height: var(--t-line-height-300); } :root .t-heading-2, :host .t-heading-2 { color: var(--t-font-color-header); font-family: var(--t-font-family-header); font-size: var(--t-font-size-200); font-weight: var(--t-font-weight-600); letter-spacing: var(--t-letter-spacing-base); line-height: var(--t-line-height-250); } :root .t-heading-3, :host .t-heading-3 { color: var(--t-font-color-header); font-family: var(--t-font-family-header); font-size: var(--t-font-size-150); font-weight: var(--t-font-weight-600); letter-spacing: var(--t-letter-spacing-base); line-height: var(--t-line-height-200); } :root .t-heading-4, :host .t-heading-4 { color: var(--t-font-color-header); font-family: var(--t-font-family-header); font-size: var(--t-font-size-125); font-weight: var(--t-font-weight-600); letter-spacing: var(--t-letter-spacing-base); line-height: var(--t-line-height-175); } :root .t-heading-5, :host .t-heading-5 { color: var(--t-font-color-header); font-family: var(--t-font-family-header); font-size: var(--t-font-size-100); font-weight: var(--t-font-weight-600); letter-spacing: var(--t-letter-spacing-base); line-height: var(--t-line-height-150); } :root .t-label, :host .t-label { font-family: var(--t-brand-body); font-size: var(--t-font-size-100); font-weight: var(--t-font-weight-700); letter-spacing: var(--t-letter-spacing-base); line-height: var(--t-line-height-150); } :root .t-label-compact, :host .t-label-compact { font-family: var(--t-font-family-body); font-size: var(--t-font-size-87); font-weight: var(--t-font-weight-700); letter-spacing: var(--t-letter-spacing-base); line-height: var(--t-line-height-125); } /* Base tokens */ /** * This file was generated automatically by Supernova.io and should not be changed manually. * To modify the format or content of this file, please contact your design system team. */ :root, :host { --fontFamilyFamilyDisplay: "Cocogoose Pro"; --fontFamilyFamilyTitle: "Proxima Nova"; --fontFamilyFamilyBody: "Proxima Nova"; } /** * This file was generated automatically by Supernova.io and should not be changed manually. * To modify the format or content of this file, please contact your design system team. */ :root, :host { --fontWeightWeightRegular: 400; --fontWeightWeightMedium: 500; --fontWeightWeightSemibold: 600; --fontWeightWeightBold: 700; } /** * This file was generated automatically by Supernova.io and should not be changed manually. * To modify the format or content of this file, please contact your design system team. */ :root, :host { --fontSizeSizeXs: 12px; --fontSizeSizeSm: 14px; --fontSizeSizeMd: 16px; --fontSizeSizeLg: 20px; --fontSizeSizeXl: 24px; --fontSizeSize2Xl: 32px; --fontSizeSize3Xl: 40px; --fontSizeSize4Xl: 48px; --fontSizeSize5Xl: 64px; --fontSizeSize6Xl: 72px; --fontSizeSize7Xl: 96px; --fontSizeSize8Xl: 120px; } /** * This file was generated automatically by Supernova.io and should not be changed manually. * To modify the format or content of this file, please contact your design system team. */ :root, :host { --lineHeightLineHeightXs: 16px; --lineHeightLineHeightSm: 20px; --lineHeightLineHeightMd: 24px; --lineHeightLineHeightLg: 28px; --lineHeightLineHeightXl: 32px; --lineHeightLineHeight2Xl: 40px; --lineHeightLineHeight3Xl: 48px; --lineHeightLineHeight4Xl: 56px; --lineHeightLineHeight5Xl: 72px; --lineHeightLineHeight6Xl: 80px; --lineHeightLineHeight7Xl: 96px; --lineHeightLineHeight8Xl: 120px; } /** * This file was generated automatically by Supernova.io and should not be changed manually. * To modify the format or content of this file, please contact your design system team. */ :root, :host { --letterSpacingLetterSpacingExtraTight: -0.4px; --letterSpacingLetterSpacingTight: -0.2px; --letterSpacingLetterSpacingNormal: 0px; --letterSpacingLetterSpacingWide: 0.2px; --letterSpacingLetterSpacingExtraWide: 0.4px; } /** * This file was generated automatically by Supernova.io and should not be changed manually. * To modify the format or content of this file, please contact your design system team. */ :root, :host { --borderRadiusRadiusNone: 0px; --borderRadiusRadius2Xs: 2px; --borderRadiusRadiusSm: 6px; --borderRadiusRadiusMd: 8px; --borderRadiusRadiusLg: 12px; --borderRadiusRadiusXl: 16px; --borderRadiusRadius2Xl: 24px; --borderRadiusRadius3Xl: 32px; --borderRadiusRadius4Xl: 48px; --borderRadiusRadius5Xl: 64px; --borderRadiusRadiusRound: 100px; --borderRadiusRadiusXs: 4px; } /** * This file was generated automatically by Supernova.io and should not be changed manually. * To modify the format or content of this file, please contact your design system team. */ :root, :host { --spaceSpacingNone: 0px; --spaceSpacing4Xs: 2px; --spaceSpacing2Xs: 6px; --spaceSpacingXs: 8px; --spaceSpacingSm: 12px; --spaceSpacingMd: 16px; --spaceSpacingLg: 20px; --spaceSpacingXl: 24px; --spaceSpacing2Xl: 32px; --spaceSpacing3Xl: 48px; --spaceSpacing4Xl: 64px; --spaceSpacing3Xs: 4px; } /** * This file was generated automatically by Supernova.io and should not be changed manually. * To modify the format or content of this file, please contact your design system team. */ :root, :host { --borderWidthStrokeNone: 0px; --borderWidthStrokeXs: 1px; --borderWidthStrokeSm: 2px; --borderWidthStrokeLg: 4px; } /** * This file was generated automatically by Supernova.io and should not be changed manually. * To modify the format or content of this file, please contact your design system team. */ :root, :host { --opacityOpacityNone: 0; --opacityOpacity2Xs: 0.04; --opacityOpacityXs: 0.08; --opacityOpacitySm: 0.16; --opacityOpacityMd: 0.24; --opacityOpacityLg: 0.32; --opacityOpacityXl: 0.48; --opacityOpacity2Xl: 0.64; --opacityOpacity3Xl: 0.72; --opacityOpacity4Xl: 0.88; --opacityOpacityFull: 1; --opacityOpacityDisabled: var(--opacityOpacityXl); --opacityOpacityModal: var(--opacityOpacity2Xl); } /** * This file was generated automatically by Supernova.io and should not be changed manually. * To modify the format or content of this file, please contact your design system team. */ :root, :host { --dimensionEffectsNone: 0px; --dimensionEffectsXs: 2px; --dimensionEffectsSm: 4px; --dimensionEffectsMd: 8px; --dimensionEffectsLg: 12px; --dimensionEffectsXl: 16px; --dimensionEffects2Xl: 20px; --dimensionEffects3Xl: 24px; --dimensionSize3Xs: 2px; } /** * This file was generated automatically by Supernova.io and should not be changed manually. * To modify the format or content of this file, please contact your design system team. */ :root, :host { --sizeSizeNone: 0px; --sizeSize2Xs: 4px; --sizeSizeXs: 8px; --sizeSizeSm: 12px; --sizeSizeMd: 16px; --sizeSizeLg: 20px; --sizeSizeXl: 24px; --sizeSize2Xl: 32px; --sizeSize3Xl: 40px; --sizeSize4Xl: 48px; --sizeSize5Xl: 56px; --sizeSize6Xl: 64px; } /** * This file was generated automatically by Supernova.io and should not be changed manually. * To modify the format or content of this file, please contact your design system team. */ :root, :host { --colorNeutralWhite: #ffffff; --colorNeutral25: #f7f7f7; --colorNeutral50: #ededed; --colorNeutral100: #cdcdcd; --colorNeutral150: #b8b8b8; --colorNeutral200: #a4a4a4; --colorNeutral300: #8f8f8f; --colorNeutral400: #7b7b7b; --colorNeutral500: #646464; --colorNeutral600: #4d4d4d; --colorNeutral650: #3e3e3e; --colorNeutral700: #353535; --colorNeutral750: #272727; --colorNeutral800: #1c1c1c; --colorNeutral900: #101010; --colorBlue25: #f5f7fe; --colorBlue50: #d9e1ff; --colorBlue100: #bdccff; --colorBlue150: #a4b6ff; --colorBlue200: #8ba0ff; --colorBlue300: #708aff; --colorBlue400: #5473ff; --colorBlue500: #315cfd; --colorBlue600: #2742d7; --colorBlue700: #1828b3; --colorBlue800: #000d90; --colorBlue900: #000c4d; --colorAqua25: #effbff; --colorAqua50: #daf5fe; --colorAqua100: #c5eefd; --colorAqua150: #afe8fc; --colorAqua200: #98e1fc; --colorAqua300: #7edafc; --colorAqua400: #5fd3fc; --colorAqua500: #31ccfd; --colorAqua600: #26a0c5; --colorAqua700: #1d7591; --colorAqua800: #134e60; --colorAqua900: #0a2933; --colorTeal25: #ecfcf7; --colorTeal50: #d4f9ed; --colorTeal100: #bcf5e2; --colorTeal150: #a3f1d6; --colorTeal200: #89edca; --colorTeal300: #6de9bd; --colorTeal400: #4be4af; --colorTeal500: #0cdfa0; --colorTeal600: #00ac7d; --colorTeal700: #007b5a; --colorTeal800: #004d39; --colorTeal900: #02241a; --colorGreen25: #eff9f3; --colorGreen50: #dff4e6; --colorGreen100: #c9ecd6; --colorGreen150: #b3e5c5; --colorGreen200: #8ad6a5; --colorGreen300: #66c37c; --colorGreen400: #53b661; --colorGreen500: #3caa46; --colorGreen600: #2d8538; --colorGreen700: #21622b; --colorGreen800: #16411d; --colorGreen900: #0c220e; --colorYellow25: #fffaee; --colorYellow50: #fff3d6; --colorYellow100: #ffedbe; --colorYellow150: #ffe6a6; --colorYellow200: #ffdf8e; --colorYellow300: #ffd876; --colorYellow400: #fed15c; --colorYellow500: #fdca40; --colorYellow600: #d39637; --colorYellow700: #a2672d; --colorYellow800: #6e3f21; --colorYellow900: #27140c; --colorOrange25: #fef2ee; --colorOrange50: #ffddd0; --colorOrange100: #ffc8b3; --colorOrange150: #ffb297; --colorOrange200: #ff9d7b; --colorOrange300: #fe865c; --colorOrange400: #fc6c36; --colorOrange500: #f25519; --colorOrange600: #be411a; --colorOrange700: #8c3017; --colorOrange800: #5c2011; --colorOrange900: #301105; --colorRed25: #fef5f5; --colorRed50: #ffd9d9; --colorRed100: #ffbdbd; --colorRed150: #ffa4a4; --colorRed200: #ff8b8b; --colorRed300: #ff7070; --colorRed400: #ff5454; --colorRed500: #df2935; --colorRed600: #af1e2e; --colorRed700: #811626; --colorRed800: #550f1b; --colorRed900: #2d080b; --colorPink25: #fff1fb; --colorPink50: #ffe2f8; --colorPink100: #fcd1f6; --colorPink150: #fabff2; --colorPink200: #f8a9ef; --colorPink300: #f691ea; --colorPink400: #f675e4; --colorPink500: #f450dc; --colorPink600: #bb3ea9; --colorPink700: #862d79; --colorPink800: #541c4c; --colorPink900: #270c23; --colorPurple25: #f6eef8; --colorPurple50: #e7d3ed; --colorPurple100: #d9b8e1; --colorPurple150: #ca9dd5; --colorPurple200: #ba82c9; --colorPurple300: #ab67bd; --colorPurple400: #9b4bb1; --colorPurple500: #8b2ca4; --colorPurple600: #6c2581; --colorPurple700: #4f1d5f; --colorPurple800: #34143f; --colorPurple900: #1c0921; --colorTypographyHeaderNormal: var(--colorNeutral800); --colorTypographyBodyHeavy: var(--colorNeutral800); --colorTypographyBodyNormal: var(--colorNeutral600); --colorTypographyBodyLight: var(--colorNeutral500); --colorTypographyLabelWhite: var(--colorNeutralWhite); --colorTypographyLabelHeavy: var(--colorNeutral800); --colorTypographyLabelNormal: var(--colorNeutral600); --colorTypographyLabelLight: var(--colorNeutral500); --colorTypographyLinkDefault: var(--colorBlue500); --colorTypographyLinkHover: var(--colorBlue700); --colorTypographyLinkDisabled: var(--colorBlue300); --colorTypographyLinkVisited: var(--colorPurple500); --colorTypographyLinkVisitedHover: var(--colorPurple700); --colorTypographyLinkVisitedDisabled: var(--colorPurple300); --colorTypographyErrorDefault: var(--colorRed500); --colorTypographySuccessDefault: var(--colorGreen500); --colorTypographyAccentBlue: var(--colorBlue800); --colorTypographyAccentAqua: var(--colorAqua800); --colorTypographyAccentTeal: var(--colorTeal800); --colorTypographyAccentGreen: var(--colorGreen800); --colorTypographyAccentYellow: var(--colorYellow800); --colorTypographyAccentOrange: var(--colorOrange800); --colorTypographyAccentRed: var(--colorRed800); --colorTypographyAccentPink: var(--colorPink800); --colorTypographyAccentPurple: var(--colorPurple800); --colorSurfaceSkeletonLight: var(--colorNeutral25); --colorTypographySkeletonLight: var(--colorSurfaceSkeletonLight); --colorSurfaceSkeletonNormal: var(--colorNeutral50); --colorTypographySkeletonNormal: var(--colorSurfaceSkeletonNormal); --colorSurfaceSkeletonHeavy: var(--colorNeutral100); --colorTypographySkeletonHeavey: var(--colorSurfaceSkeletonHeavy); --colorTypographyFeedbackLight: var(--colorNeutral100); --colorTypographyFeedbackNormal: var(--colorNeutral50); --colorBorderFormInputs: var(--colorNeutral100); --colorBorderFormRadios: var(--colorNeutral300); --colorBorderFormInnerFocus: var(--colorNeutralWhite); --colorBorderFormHover: var(--colorBlue400); --colorBorderFormActive: var(--colorBlue500); --colorBorderFormSelected: var(--colorBlue400); --colorBorderFormError: var(--colorRed500); --colorBorderFormErrorHover: var(--colorRed600); --colorBorderFormErrorActive: var(--colorRed700); --colorBorderFormStarHover: var(--colorBlue50); --colorBorderTableLight: var(--colorNeutral50); --colorBorderTableNormal: var(--colorNeutral100); --colorBorderTableHeavy: var(--colorNeutral300); --colorBorderNeutralXxLight: var(--colorNeutral25); --colorBorderNeutralExtraLight: var(--colorNeutral50); --colorBorderNeutralLight: var(--colorNeutral100); --colorBorderNeutralNormal: var(--colorNeutral200); --colorBorderNeutralHeavy: var(--colorNeutral300); --colorBorderNeutralExtraHeavy: var(--colorNeutral400); --colorBorderNeutralXxHeavy: var(--colorNeutral600); --colorTypographyFeedbackHeavy: var(--colorNeutralWhite); --colorTypographyFeedbackPostive: var(--colorGreen200); --colorTypographyFeedbackCaution: var(--colorYellow200); --colorTypographyFeedbackDestructive: var(--colorRed200); --colorBorderAccentBlueDefault: var(--colorBlue300); --colorBorderAccentAquaDefault: var(--colorAqua300); --colorBorderAccentTealDefault: var(--colorTeal300); --colorBorderAccentGreenDefault: var(--colorGreen300); --colorBorderAccentYellowDefault: var(--colorYellow400); --colorBorderAccentOrangeDefault: var(--colorOrange300); --colorBorderAccentRedDefault: var(--colorRed300); --colorBorderAccentPinkDefault: var(--colorPink300); --colorBorderAccentPurpleDefault: var(--colorPink300); --colorBorderAccentNeutralDefault: var(--colorNeutral300); --colorBorderAccentDarkGreyDefault: var(--colorNeutral750); --colorBorderCard: var(--colorNeutral100); --colorIconWhite: var(--colorNeutralWhite); --colorBorderDivider: var(--colorNeutral100); --colorBorderSecondaryButton: var(--colorNeutral200); --colorIconError: var(--colorRed500); --colorIconSuccess: var(--colorGreen500); --colorIconBrand: var(--colorBlue500); --colorIconNeutralHeavy: var(--colorNeutral700); --colorIconNeutralNormal: var(--colorNeutral500); --colorIconNeutralLight: var(--colorNeutral400); --colorIconNeutralExtraLight: var(--colorNeutral100); --colorIconNeutralXxLight: var(--colorNeutral50); --colorIconFeedbackError: var(--colorRed200); --colorIconFeedbackWarning: var(--colorYellow200); --colorIconFeedbackPositive: var(--colorGreen200); --colorIconAccentBlue: var(--colorBlue800); --colorIconAccentAqua: var(--colorAqua800); --colorIconAccentTeal: var(--colorTeal800); --colorIconAccentGreen: var(--colorGreen800); --colorIconAccentYellow: var(--colorYellow800); --colorIconAccentOrange: var(--colorOrange800); --colorIconAccentRed: var(--colorRed800); --colorIconAccentPink: var(--colorPink800); --colorIconAccentPurple: var(--colorPurple800); --colorIconSkeletonLight: var(--colorSurfaceSkeletonLight); --colorIconSkeletonNormal: var(--colorSurfaceSkeletonNormal); --colorIconSkeletonHeavy: var(--colorSurfaceSkeletonHeavy); --colorSurfaceNeutralCanvas: var(--colorNeutral25); --colorSurfaceNeutralBase: var(--colorNeutralWhite); --colorSurfaceNeutralLevel1: var(--colorNeutral25); --colorSurfaceNeutralLevel2: var(--colorNeutral50); --colorSurfaceNeutralLevel3: var(--colorNeutral100); --colorSurfaceNeutralLevel4: var(--colorNeutral200); --colorSurfaceNeutralLevel5: var(--colorNeutral400); --colorSurfaceNeutralLevel6: var(--colorNeutral600); --colorSurfaceNeutralLevel7: var(--colorNeutral800); --colorSurfaceActionDefaultFilledDefault: var(--colorBlue500); --colorSurfaceInteractionLevel1Default: var(--colorNeutralWhite); --colorSurfaceInteractionLevel1Hover: var(--colorBlue25); --colorSurfaceInteractionLevel1Active: var(--colorBlue50); --colorSurfaceInteractionLevel1Selected: var(--colorBlue25); --colorSurfaceInteractionLevel1SelectedHover: var(--colorBlue50); --colorSurfaceInteractionLevel1SelectedActive: var(--colorBlue100); --colorSurfaceActionDefaultFilledHover: var(--colorBlue600); --colorSurfaceActionDefaultFilledActive: var(--colorBlue700); --colorSurfaceActionDefaultOutlineDefault: var(--colorNeutralWhite); --colorSurfaceActionDefaultOutlineHover: var(--colorBlue50); --colorSurfaceActionDefaultOutlineActive: var(--colorBlue100); --colorSurfaceActionDefaultTextDefault: var(--colorNeutralWhite); --colorSurfaceActionDefaultTextHover: var(--colorBlue50); --colorSurfaceActionDefaultTextActive: var(--colorBlue100); --colorSurfaceActionDestructiveFilledDefault: var(--colorRed500); --colorSurfaceActionDestructiveFilledHover: var(--colorRed600); --colorSurfaceActionDestructiveFilledActive: var(--colorRed700); --colorSurfaceFeedbackBase: var(--colorNeutral800); --colorSurfaceNeutralBlueCanvas: var(--colorBlue25); --colorSurfaceNeutralBlueBase: var(--colorNeutralWhite); --colorSurfaceNeutralBlueLevel1: var(--colorBlue25); --colorSurfaceNeutralBlueLevel2: var(--colorBlue50); --colorSurfaceNeutralBlueLevel3: var(--colorBlue100); --colorSurfaceNeutralBlueLevel4: var(--colorBlue150); --colorSurfaceNeutralBlueLevel5: var(--colorBlue200); --colorSurfaceNeutralBlueLevel6: var(--colorBlue300); --colorSurfaceNeutralBlueLevel7: var(--colorBlue400); --colorSurfaceAccentBlueDefault: var(--colorBlue50); --colorSurfaceAccentBlueHover: var(--colorBlue100); --colorSurfaceAccentBlueActive: var(--colorBlue200); --colorSurfaceAccentAquaDefault: var(--colorAqua50); --colorSurfaceAccentAquaHover: var(--colorAqua100); --colorSurfaceAccentAquaActive: var(--colorAqua200); --colorSurfaceAccentTealDefault: var(--colorTeal50); --colorSurfaceAccentTealHover: var(--colorTeal100); --colorSurfaceAccentTealActive: var(--colorTeal200); --colorSurfaceAccentGreenDefault: var(--colorGreen50); --colorSurfaceAccentGreenHover: var(--colorGreen100); --colorSurfaceAccentGreenActive: var(--colorGreen200); --colorSurfaceAccentYellowDefault: var(--colorYellow50); --colorSurfaceAccentYellowHover: var(--colorYellow100); --colorSurfaceAccentYellowActive: var(--colorYellow200); --colorSurfaceAccentOrangeDefault: var(--colorOrange50); --colorSurfaceAccentOrangeHover: var(--colorOrange100); --colorSurfaceAccentOrangeActive: var(--colorOrange200); --colorSurfaceAccentRedDefault: var(--colorRed50); --colorSurfaceAccentRedHover: var(--colorRed100); --colorSurfaceAccentRedActive: var(--colorRed200); --colorSurfaceAccentPinkDefault: var(--colorPink50); --colorSurfaceAccentPinkHover: var(--colorPink100); --colorSurfaceAccentPinkActive: var(--colorPink200); --colorSurfaceAccentPurpleDefault: var(--colorPurple50); --colorSurfaceAccentPurpleHover: var(--colorPurple100); --colorSurfaceAccentPurpleActive: var(--colorPurple200); --colorSurfaceAccentLightGreyDefault: var(--colorNeutral50); --colorSurfaceAccentLightGreyHover: var(--colorNeutral100); --colorSurfaceAccentLightGreyActive: var(--colorNeutral200); --colorSurfaceAccentDarkGreyDefault: var(--colorNeutral700); --colorSurfaceAccentDarkGreyHover: var(--colorNeutral600); --colorSurfaceAccentDarkGreyActive: var(--colorNeutral500); --colorSurfaceActionDefaultTonalDefault: var(--colorBlue50); --colorSurfaceActionDefaultTonalHover: var(--colorBlue100); --colorSurfaceActionDefaultTonalActive: var(--colorBlue200); --colorSurfaceActionDestructiveTonalDefault: var(--colorRed150); --colorSurfaceActionDestructiveTonalHover: var(--colorRed200); --colorSurfaceActionDestructiveTonalActive: var(--colorRed300); --colorSurfaceActionDestructiveOutlineDefault: var(--colorNeutralWhite); --colorSurfaceActionDestructiveOutlineHover: var(--colorRed100); --colorSurfaceActionDestructiveOutlineActive: var(--colorRed200); --colorSurfaceActionDestructiveTextDefault: var(--colorNeutralWhite); --colorSurfaceActionDestructiveTextHover: var(--colorRed100); --colorSurfaceActionDestructiveTextActive: var(--colorRed200); --colorSurfaceActionSuccessFilledDefault: var(--colorGreen600); --colorSurfaceActionSuccessFilledHover: var(--colorGreen700); --colorSurfaceActionSuccessFilledActive: var(--colorGreen800); --colorSurfaceActionSuccessTonalDefault: var(--colorGreen150); --colorSurfaceActionSuccessTonalHover: var(--colorGreen200); --colorSurfaceActionSuccessTonalActive: var(--colorGreen300); --colorSurfaceActionSuccessOutlineDefault: var(--colorNeutralWhite); --colorSurfaceActionSuccessOutlineHover: var(--colorGreen100); --colorSurfaceActionSuccessOutlineActive: var(--colorGreen200); --colorSurfaceActionSuccessTextDefault: var(--colorNeutralWhite); --colorSurfaceActionSuccessTextHover: var(--colorGreen100); --colorSurfaceActionSuccessTextActive: var(--colorGreen200); --colorSurfaceActionCautionFilledDefault: var(--colorYellow400); --colorSurfaceActionCautionFilledHover: var(--colorYellow500); --colorSurfaceActionCautionFilledActive: var(--colorYellow600); --colorSurfaceActionCautionTonalDefault: var(--colorYellow150); --colorSurfaceActionCautionTonalHover: var(--colorYellow200); --colorSurfaceActionCautionTonalActive: var(--colorYellow300); --colorSurfaceActionCautionOutlineDefault: var(--colorNeutralWhite); --colorSurfaceActionCautionOutlineHover: var(--colorYellow100); --colorSurfaceActionCautionOutlineActive: var(--colorYellow200); --colorSurfaceActionCautionTextDefault: var(--colorNeutralWhite); --colorSurfaceActionCautionTextHover: var(--colorYellow100); --colorSurfaceActionCautionTextActive: var(--colorYellow200); --colorSurfaceActionInformationFilledDefault: var(--colorBlue500); --colorSurfaceActionInformationFilledHover: var(--colorBlue600); --colorSurfaceActionInformationFilledActive: var(--colorBlue700); --colorSurfaceActionInformationTonalDefault: var(--colorBlue150); --colorSurfaceActionInformationTonalHover: var(--colorBlue200); --colorSurfaceActionInformationTonalActive: var(--colorBlue300); --colorSurfaceActionInformationOutlineDefault: var(--colorNeutralWhite); --colorSurfaceActionInformationOutlineHover: var(--colorBlue50); --colorSurfaceActionInformationOutlineActive: var(--colorBlue100); --colorSurfaceActionInformationTextDefault: var(--colorNeutralWhite); --colorSurfaceActionInformationTextHover: var(--colorBlue50); --colorSurfaceActionInformationTextActive: var(--colorBlue100); --colorSurfaceActionFeedbackFilledDefault: var(--colorNeutralWhite); --colorSurfaceActionFeedbackFilledHover: var(--colorNeutral50); --colorSurfaceActionFeedbackFilledActive: var(--colorNeutral150); --colorSurfaceActionFeedbackTonalDefault: var(--colorNeutral700); --colorSurfaceActionFeedbackTonalHover: var(--colorNeutral600); --colorSurfaceActionFeedbackTonalActive: var(--colorNeutral500); --colorSurfaceActionFeedbackOutlineDefault: var(--colorNeutral800); --colorSurfaceActionFeedbackOutlineHover: var(--colorNeutral700); --colorSurfaceActionFeedbackOutlineActive: var(--colorNeutral600); --colorSurfaceActionFeedbackTextDefault: var(--colorNeutral800); --colorSurfaceActionFeedbackTextHover: var(--colorNeutral700); --colorSurfaceActionFeedbackTextActive: var(--colorNeutral600); --colorIconLink: var(--colorBlue500); } /** * This file was generated automatically by Supernova.io and should not be changed manually. * To modify the format or content of this file, please contact your design system team. */ :root, :host { --typographyHeader1: var(--fontWeightWeightBold) var(--fontSizeSize3Xl)/var(--lineHeightLineHeight3Xl) var(--fontFamilyFamilyTitle); --typographyHeader2: var(--fontWeightWeightBold) var(--fontSizeSize2Xl)/var(--lineHeightLineHeight2Xl) var(--fontFamilyFamilyTitle); --typographyHeader3: var(--fontWeightWeightBold) var(--fontSizeSizeXl)/var(--lineHeightLineHeightLg) var(--fontFamilyFamilyTitle); --typographyHeader4: var(--fontWeightWeightBold) var(--fontSizeSizeLg)/var(--lineHeightLineHeightXl) var(--fontFamilyFamilyTitle); --typographyHeader5: var(--fontWeightWeightBold) var(--fontSizeSizeMd)/var(--lineHeightLineHeightMd) var(--fontFamilyFamilyTitle); --typographyLongFormRegular: var(--fontWeightWeightRegular) var(--fontSizeSizeLg)/var(--lineHeightLineHeightXl) var(--fontFamilyFamilyBody); --typographyLongFormMedium: var(--fontWeightWeightMedium) var(--fontSizeSizeLg)/var(--lineHeightLineHeightXl) var(--fontFamilyFamilyTitle); --typographyLongFormSemibold: var(--fontWeightWeightSemibold) var(--fontSizeSizeLg)/var(--lineHeightLineHeightXl) var(--fontFamilyFamilyTitle); --typographyLongFormBold: var(--fontWeightWeightBold) var(--fontSizeSizeLg)/var(--lineHeightLineHeightXl) var(--fontFamilyFamilyBody); --typographyMediumRegular: var(--fontWeightWeightRegular) var(--fontSizeSizeMd)/var(--lineHeightLineHeightMd) var(--fontFamilyFamilyBody); --typographyMediumMedium: 400 var(--fontSizeSizeMd)/var(--lineHeightLineHeightMd) var(--fontFamilyFamilyBody); --typographyMediumSemibold: var(--fontWeightWeightSemibold) var(--fontSizeSizeMd)/var(--lineHeightLineHeightMd) var(--fontFamilyFamilyBody); --typographyMediumBold: var(--fontWeightWeightBold) var(--fontSizeSizeMd)/var(--lineHeightLineHeightMd) var(--fontFamilyFamilyBody); --typographySmallRegular: var(--fontWeightWeightRegular) var(--fontSizeSizeSm)/var(--lineHeightLineHeightSm) var(--fontFamilyFamilyBody); --typographySmallMedium: var(--fontWeightWeightMedium) var(--fontSizeSizeSm)/var(--lineHeightLineHeightSm) var(--fontFamilyFamilyBody); --typographySmallSemibold: var(--fontWeightWeightSemibold) var(--fontSizeSizeSm)/var(--lineHeightLineHeightSm) var(--fontFamilyFamilyBody); --typographySmallBold: var(--fontWeightWeightBold) var(--fontSizeSizeSm)/var(--lineHeightLineHeightSm) var(--fontFamilyFamilyBody); --typographyExtraSmallRegular: var(--fontWeightWeightRegular) var(--fontSizeSizeXs)/var(--lineHeightLineHeightSm) var(--fontFamilyFamilyBody); --typographyExtraSmallMedium: var(--fontWeightWeightMedium) var(--fontSizeSizeXs)/var(--lineHeightLineHeightSm) var(--fontFamilyFamilyBody); --typographyExtraSmallSemibold: var(--fontWeightWeightSemibold) var(--fontSizeSizeXs)/var(--lineHeightLineHeightSm) var(--fontFamilyFamilyBody); --typographyExtraSmallBold: var(--fontWeightWeightBold) var(--fontSizeSizeXs)/var(--lineHeightLineHeightSm) var(--fontFamilyFamilyBody); --typographyHero1: var(--fontWeightWeightBold) var(--fontSizeSize8Xl)/var(--lineHeightLineHeight8Xl) var(--fontFamilyFamilyTitle); --typographyHero2: var(--fontWeightWeightBold) var(--fontSizeSize7Xl)/var(--lineHeightLineHeight7Xl) var(--fontFamilyFamilyTitle); --typographyHero3: var(--fontWeightWeightBold) var(--fontSizeSize6Xl)/var(--lineHeightLineHeight6Xl) var(--fontFamilyFamilyTitle); --typographyHero4: var(--fontWeightWeightBold) var(--fontSizeSize5Xl)/var(--lineHeightLineHeight5Xl) var(--fontFamilyFamilyTitle); --typographyHero5: var(--fontWeightWeightBold) var(--fontSizeSize4Xl)/var(--lineHeightLineHeight4Xl) var(--fontFamilyFamilyTitle); } /** * This file was generated automatically by Supernova.io and should not be changed manually. * To modify the format or content of this file, please contact your design system team. */ :root, :host { --borderHover: var(--borderWidthStrokeXs) solid var(--colorBorderFormHover); --borderInnerFocus: var(--borderWidthStrokeXs) solid var(--colorBorderFormInnerFocus); --borderActive: var(--borderWidthStrokeXs) solid var(--colorBorderFormActive); --borderInputs: var(--borderWidthStrokeXs) solid var(--colorBorderFormInputs); --borderRadioCheckboxes: var(--borderWidthStrokeXs) solid var(--colorBorderFormRadios); --borderSelected: var(--borderWidthStrokeXs) solid var(--colorBorderFormSelected); --borderError: var(--borderWidthStrokeXs) solid var(--colorBorderFormError); --borderErrorHover: 1px solid var(--colorBorderFormErrorHover); --borderErrorActive: var(--borderWidthStrokeXs) solid var(--colorBorderFormErrorActive); --borderStarHover: var(--borderWidthStrokeLg) solid var(--colorBorderFormStarHover); } /** * This file was generated automatically by Supernova.io and should not be changed manually. * To modify the format or content of this file, please contact your design system team. */ :root, :host { --shadowSmall: 0px 0px 8px 0px var(--colorNeutral900), 0px 4px 8px 0px var(--colorNeutral900); --shadowMedium: 0px 4px 8px 0px var(--colorNeutral900), 0px 8px 12px 4px var(--colorNeutral900); --shadowLarge: 0px 4px 8px 0px var(--colorNeutral900), 0px 12px 16px 4px var(--colorNeutral900); --shadowHover: 0px 0px 0px 4px var(--colorBlue400); --shadowActive: 0px 0px 0px 4px var(--colorBlue400); --shadowFocus: 0px 0px 0px 2px var(--colorBlue400); --shadowSelected: 0px 0px 0px 4px var(--colorBlue400); } :root, :host { --fontFamilyFamilyTitle: "proxima-nova"; --fontFamilyFamilyBody: "proxima-nova"; } *, *::before, *::after { box-sizing: border-box; } html { background-color: transparent; border: none; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary, blockquote, q, th, td, caption, table, div, span, object, iframe, p, pre, a, abbr, acronym, address, code, del, dfn, em, img, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, tbody, tfoot, thead, text, tr, h1, h2, h3, h4, h5, h6, body, html, input, button, select, textarea { border: none; font-family: var(--t-font-stack); font-style: inherit; font-weight: inherit; line-height: var(--t-line-height); margin: 0; padding: 0; vertical-align: baseline; } .t-monospace * { font-family: var(--t-font-stack-monospace); } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } caption, th { text-align: inherit; } abbr, acronym { border-bottom: none; text-decoration: underline; } pre { white-space: pre; } ul, ol { list-style: none; } ul { margin: 0; padding: 0; } dt { font-weight: var(--t-heavy); } button { background: none; } a, a:not([class]):focus, a:not([class]):hover, a:not([class]):visited { color: var(--link-color); } a { background-color: transparent; text-decoration: none; } a.t-link { color: var(--t-link-color); text-decoration: underline; padding: var(--s-50) 0; width: fit-content; } a.t-link:visited { color: var(--t-link-visited-color); } a.t-link:visited:hover { color: var(--t-link-hover-visited-color); } a.t-link:hover { color: var(--t-link-hover-color); } a.t-link:focus, a.t-link:focus-visible { color: var(--t-link-focus-color); outline-color: var(--t-link-focus-color); } a.t-link:active { color: var(--t-link-active-color); } a.t-link[aria-disabled=true] { color: var(--t-link-disabled-color); } .link--default, .link--default:visited { color: var(--link-color); } img, svg, iframe, video { max-width: 100%; } img { vertical-align: middle; } mark { background: #ff0; color: #000; } table { border-collapse: separate; border-spacing: 0; vertical-align: middle; width: 100%; } th, td { text-align: left; vertical-align: middle; } [role=button] { cursor: pointer; } .sr-only { border: none; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .sr-only-focusable:active, .sr-only-focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .offscreen-text { border: none; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .small-hide, .large-hide { text-decoration: none; } .small-hide { display: none; } .invisible { visibility: hidden; } @media (min-width: 60em) { .large-hide { display: none; } .small-hide { display: initial; } } @media (max-width: 60em) { .sm-md-no-scroll { overflow: hidden; } } .l-grid { display: grid; } .l-block { display: block; } .l-flex { display: flex; } .l-flex-wrap { flex-wrap: wrap; } .l-contents { display: contents; } .l-inline { display: inline; } .l-inline-block { display: inline-block; } .l-inline-flex { display: inline-flex; } .l-flex-1 { flex: 1; } .l-v-top { align-items: flex-start; } .l-v-top-child { align-self: flex-start; } .l-v-baseline { align-items: baseline; } .l-v-baseline-child { align-self: baseline; } .l-v-center { align-items: center; } .l-v-center-child { align-self: center; } .l-v-bottom { align-items: flex-end; } .l-v-align-bottom { vertical-align: bottom; } .l-v-bottom-child { align-self: flex-end; } .l-h-left { justify-content: flex-start; } .l-h-center { justify-content: center; } .l-h-right { justify-content: flex-end; } .l-justify-sp-between, .l-h-sp-between { justify-content: space-between; } .l-d-column { flex-direction: column; } .l-d-column-reverse { flex-direction: column-reverse; } .l-d-row-reverse { flex-direction: row-reverse; } .l-d-row { flex-direction: row; } .l-grow-1 { flex-grow: 1; } .l-grow-2 { flex-grow: 2; } .l-grow-3 { flex-grow: 3; } .l-grow-4 { flex-grow: 4; } .l-grow-5 { flex-grow: 5; } .l-grow-6 { flex-grow: 6; } .l-grow-7 { flex-grow: 7; } .l-grow-8 { flex-grow: 8; } .l-grow-9 { flex-grow: 9; } .l-grow-10 { flex-grow: 10; } .l-grow-11 { flex-grow: 11; } .l-grow-12 { flex-grow: 12; } .l-shrink-0 { flex-shrink: 0; } .l-flow-col { grid-auto-flow: column; } .l-flow-row { grid-auto-flow: row; } p[slot=header-subtitle] { margin-bottom: 0; } .l-absolute { position: absolute; } .l-sticky, .sticky { position: -moz-sticky; position: -webkit-sticky; position: sticky; } .l-fixed { position: fixed; } .l-relative { position: relative; } .wrapper { margin: 0 auto; max-width: 90%; } .l-full-width { width: 100%; } .wrapper--padded { padding-left: 24px; padding-right: 24px; } @media (max-width: 45em) { .sm-hide { display: none; } .l-sm-block { display: block; } .l-sm-grid { display: grid; } .l-sm-flex { display: flex; } .l-sm-contents { display: contents; } .container__header--row { flex-wrap: wrap; } } @media (min-width: 80em) { .wrapper { max-width: var(--container-xl); } } @media (max-width: 60em) { .md-down-hide { display: none; } } @media (min-width: 45em) { .md-up-hide { display: none; } .l-md-block { display: block; } .l-md-grid { display: grid; } .l-md-flex { display: flex; } .l-md-contents { display: contents; } .wrapper--small { max-width: var(--container-small); } .wrapper--medium { max-width: var(--container-medium); } } @media (max-width: 60em) and (min-width: 45em) { .md-hide { display: none; } } @media (max-width: 80em) { .lg-down-hide { display: none; } } @media (min-width: 60em) { .lg-up-hide { display: none; } .l-lg-block { display: block; } .l-lg-grid { display: grid; } .l-lg-flex { display: flex; } .l-lg-contents { display: contents; } .wrapper--large { max-width: var(--container-large); } } @media (max-width: 80em) and (min-width: 60em) { .lg-hide { display: none; } } @media (min-width: 80em) { .xl-hide { display: none; } } .l-col-1 { grid-template-columns: repeat(1, 1fr); } .l-col-2 { grid-template-columns: repeat(2, 1fr); } .l-col-3 { grid-template-columns: repeat(3, 1fr); } .l-col-4 { grid-template-columns: repeat(4, 1fr); } .l-col-5 { grid-template-columns: repeat(5, 1fr); } .l-col-6 { grid-template-columns: repeat(6, 1fr); } .l-col-7 { grid-template-columns: repeat(7, 1fr); } .l-col-8 { grid-template-columns: repeat(8, 1fr); } .l-col-9 { grid-template-columns: repeat(9, 1fr); } .l-col-10 { grid-template-columns: repeat(10, 1fr); } .l-col-11 { grid-template-columns: repeat(11, 1fr); } .l-col-12 { grid-template-columns: repeat(12, 1fr); } .l-col-span-1 { grid-column: span 1; } .l-col-span-2 { grid-column: span 2; } .l-col-span-3 { grid-column: span 3; } .l-col-span-4 { grid-column: span 4; } .l-col-span-5 { grid-column: span 5; } .l-col-span-6 { grid-column: span 6; } .l-col-span-7 { grid-column: span 7; } .l-col-span-8 { grid-column: span 8; } .l-col-span-9 { grid-column: span 9; } .l-col-span-10 { grid-column: span 10; } .l-col-span-11 { grid-column: span 11; } .l-col-span-12 { grid-column: span 12; } @media (max-width: 45em) { .l-sm-col-1 { grid-template-columns: repeat(1, 1fr); } .l-sm-col-span-1 { grid-column: span 1; } .l-sm-col-2 { grid-template-columns: repeat(2, 1fr); } .l-sm-col-span-2 { grid-column: span 2; } .l-sm-col-3 { grid-template-columns: repeat(3, 1fr); } .l-sm-col-span-3 { grid-column: span 3; } .l-sm-col-4 { grid-template-columns: repeat(4, 1fr); } .l-sm-col-span-4 { grid-column: span 4; } .l-sm-col-5 { grid-template-columns: repeat(5, 1fr); } .l-sm-col-span-5 { grid-column: span 5; } .l-sm-col-6 { grid-template-columns: repeat(6, 1fr); } .l-sm-col-span-6 { grid-column: span 6; } .l-sm-col-7 { grid-template-columns: repeat(7, 1fr); } .l-sm-col-span-7 { grid-column: span 7; } .l-sm-col-8 { grid-template-columns: repeat(8, 1fr); } .l-sm-col-span-8 { grid-column: span 8; } .l-sm-col-9 { grid-template-columns: repeat(9, 1fr); } .l-sm-col-span-9 { grid-column: span 9; } .l-sm-col-10 { grid-template-columns: repeat(10, 1fr); } .l-sm-col-span-10 { grid-column: span 10; } .l-sm-col-11 { grid-template-columns: repeat(11, 1fr); } .l-sm-col-span-11 { grid-column: span 11; } .l-sm-col-12 { grid-template-columns: repeat(12, 1fr); } .l-sm-col-span-12 { grid-column: span 12; } } @media (max-width: 60em) and (min-width: 45em) { .l-md-col-1 { grid-template-columns: repeat(1, 1fr); } .l-md-col-span-1 { grid-column: span 1; } .l-md-col-2 { grid-template-columns: repeat(2, 1fr); } .l-md-col-span-2 { grid-column: span 2; } .l-md-col-3 { grid-template-columns: repeat(3, 1fr); } .l-md-col-span-3 { grid-column: span 3; } .l-md-col-4 { grid-template-columns: repeat(4, 1fr); } .l-md-col-span-4 { grid-column: span 4; } .l-md-col-5 { grid-template-columns: repeat(5, 1fr); } .l-md-col-span-5 { grid-column: span 5; } .l-md-col-6 { grid-template-columns: repeat(6, 1fr); } .l-md-col-span-6 { grid-column: span 6; } .l-md-col-7 { grid-template-columns: repeat(7, 1fr); } .l-md-col-span-7 { grid-column: span 7; } .l-md-col-8 { grid-template-columns: repeat(8, 1fr); } .l-md-col-span-8 { grid-column: span 8; } .l-md-col-9 { grid-template-columns: repeat(9, 1fr); } .l-md-col-span-9 { grid-column: span 9; } .l-md-col-10 { grid-template-columns: repeat(10, 1fr); } .l-md-col-span-10 { grid-column: span 10; } .l-md-col-11 { grid-template-columns: repeat(11, 1fr); } .l-md-col-span-11 { grid-column: span 11; } .l-md-col-12 { grid-template-columns: repeat(12, 1fr); } .l-md-col-span-12 { grid-column: span 12; } } @media (max-width: 80em) and (min-width: 60em) { .l-lg-col-1 { grid-template-columns: repeat(1, 1fr); } .l-lg-col-span-1 { grid-column: span 1; } .l-lg-col-2 { grid-template-columns: repeat(2, 1fr); } .l-lg-col-span-2 { grid-column: span 2; } .l-lg-col-3 { grid-template-columns: repeat(3, 1fr); } .l-lg-col-span-3 { grid-column: span 3; } .l-lg-col-4 { grid-template-columns: repeat(4, 1fr); } .l-lg-col-span-4 { grid-column: span 4; } .l-lg-col-5 { grid-template-columns: repeat(5, 1fr); } .l-lg-col-span-5 { grid-column: span 5; } .l-lg-col-6 { grid-template-columns: repeat(6, 1fr); } .l-lg-col-span-6 { grid-column: span 6; } .l-lg-col-7 { grid-template-columns: repeat(7, 1fr); } .l-lg-col-span-7 { grid-column: span 7; } .l-lg-col-8 { grid-template-columns: repeat(8, 1fr); } .l-lg-col-span-8 { grid-column: span 8; } .l-lg-col-9 { grid-template-columns: repeat(9, 1fr); } .l-lg-col-span-9 { grid-column: span 9; } .l-lg-col-10 { grid-template-columns: repeat(10, 1fr); } .l-lg-col-span-10 { grid-column: span 10; } .l-lg-col-11 { grid-template-columns: repeat(11, 1fr); } .l-lg-col-span-11 { grid-column: span 11; } .l-lg-col-12 { grid-template-columns: repeat(12, 1fr); } .l-lg-col-span-12 { grid-column: span 12; } } @media (min-width: 80em) { .l-xl-col-1 { grid-template-columns: repeat(1, 1fr); } .l-xl-col-span-1 { grid-column: span 1; } .l-xl-col-2 { grid-template-columns: repeat(2, 1fr); } .l-xl-col-span-2 { grid-column: span 2; } .l-xl-col-3 { grid-template-columns: repeat(3, 1fr); } .l-xl-col-span-3 { grid-column: span 3; } .l-xl-col-4 { grid-template-columns: repeat(4, 1fr); } .l-xl-col-span-4 { grid-column: span 4; } .l-xl-col-5 { grid-template-columns: repeat(5, 1fr); } .l-xl-col-span-5 { grid-column: span 5; } .l-xl-col-6 { grid-template-columns: repeat(6, 1fr); } .l-xl-col-span-6 { grid-column: span 6; } .l-xl-col-7 { grid-template-columns: repeat(7, 1fr); } .l-xl-col-span-7 { grid-column: span 7; } .l-xl-col-8 { grid-template-columns: repeat(8, 1fr); } .l-xl-col-span-8 { grid-column: span 8; } .l-xl-col-9 { grid-template-columns: repeat(9, 1fr); } .l-xl-col-span-9 { grid-column: span 9; } .l-xl-col-10 { grid-template-columns: repeat(10, 1fr); } .l-xl-col-span-10 { grid-column: span 10; } .l-xl-col-11 { grid-template-columns: repeat(11, 1fr); } .l-xl-col-span-11 { grid-column: span 11; } .l-xl-col-12 { grid-template-columns: repeat(12, 1fr); } .l-xl-col-span-12 { grid-column: span 12; } } .l-gap-0x { grid-gap: 0; } .l-h-gap-0x { grid-column-gap: 0; } .l-v-gap-0x { grid-row-gap: 0; } .l-gap-1x { grid-gap: var(--s-xs); } .l-h-gap-1x { grid-column-gap: var(--s-xs); } .l-v-gap-1x { grid-row-gap: var(--s-xs); } .l-gap-2x { grid-gap: var(--s-small); } .l-h-gap-2x { grid-column-gap: var(--s-small); } .l-v-gap-2x { grid-row-gap: var(--s-small); } .l-gap-3x { grid-gap: var(--s-medium); } .l-h-gap-3x { grid-column-gap: var(--s-medium); } .l-v-gap-3x { grid-row-gap: var(--s-medium); } .l-gap-4x { grid-gap: var(--s-large); } .l-h-gap-4x { grid-column-gap: var(--s-large); } .l-v-gap-4x { grid-row-gap: var(--s-large); } .l-gap-5x { grid-gap: var(--s-xl); } .l-h-gap-5x { grid-column-gap: var(--s-xl); } .l-v-gap-5x { grid-row-gap: var(--s-xl); } .l-gap-6x { grid-gap: var(--s-2xl); } .l-h-gap-6x { grid-column-gap: var(--s-2xl); } .l-v-gap-6x { grid-row-gap: var(--s-2xl); } .l-gap-7x { grid-gap: var(--s-3xl); } .l-h-gap-7x { grid-column-gap: var(--s-3xl); } .l-v-gap-7x { grid-row-gap: var(--s-3xl); } .l-gap-8x { grid-gap: var(--s-4xl); } .l-h-gap-8x { grid-column-gap: var(--s-4xl); } .l-v-gap-8x { grid-row-gap: var(--s-4xl); } .l-gap-9x { grid-gap: var(--s-5xl); } .l-h-gap-9x { grid-column-gap: var(--s-5xl); } .l-v-gap-9x { grid-row-gap: var(--s-5xl); } .l-gap-10x { grid-gap: var(--s-6xl); } .l-h-gap-10x { grid-column-gap: var(--s-6xl); } .l-v-gap-10x { grid-row-gap: var(--s-6xl); } @media (max-width: 45em) { .l-sm-gap-0x { grid-gap: 0; } .l-sm-h-gap-0x { grid-column-gap: 0; } .l-sm-v-gap-0x { grid-row-gap: 0; } .l-sm-gap-1x { grid-gap: var(--s-xs); } .l-sm-h-gap-1x { grid-column-gap: var(--s-xs); } .l-sm-v-gap-1x { grid-row-gap: var(--s-xs); } .l-sm-gap-2x { grid-gap: var(--s-small); } .l-sm-h-gap-2x { grid-column-gap: var(--s-small); } .l-sm-v-gap-2x { grid-row-gap: var(--s-small); } .l-sm-gap-3x { grid-gap: var(--s-medium); } .l-sm-h-gap-3x { grid-column-gap: var(--s-medium); } .l-sm-v-gap-3x { grid-row-gap: var(--s-medium); } .l-sm-gap-4x { grid-gap: var(--s-large); } .l-sm-h-gap-4x { grid-column-gap: var(--s-large); } .l-sm-v-gap-4x { grid-row-gap: var(--s-large); } .l-sm-gap-5x { grid-gap: var(--s-xl); } .l-sm-h-gap-5x { grid-column-gap: var(--s-xl); } .l-sm-v-gap-5x { grid-row-gap: var(--s-xl); } .l-sm-gap-6x { grid-gap: var(--s-2xl); } .l-sm-h-gap-6x { grid-column-gap: var(--s-2xl); } .l-sm-v-gap-6x { grid-row-gap: var(--s-2xl); } .l-sm-gap-7x { grid-gap: var(--s-3xl); } .l-sm-h-gap-7x { grid-column-gap: var(--s-3xl); } .l-sm-v-gap-7x { grid-row-gap: var(--s-3xl); } .l-sm-gap-8x { grid-gap: var(--s-4xl); } .l-sm-h-gap-8x { grid-column-gap: var(--s-4xl); } .l-sm-v-gap-8x { grid-row-gap: var(--s-4xl); } .l-sm-gap-9x { grid-gap: var(--s-5xl); } .l-sm-h-gap-9x { grid-column-gap: var(--s-5xl); } .l-sm-v-gap-9x { grid-row-gap: var(--s-5xl); } .l-sm-gap-10x { grid-gap: var(--s-6xl); } .l-sm-h-gap-10x { grid-column-gap: var(--s-6xl); } .l-sm-v-gap-10x { grid-row-gap: var(--s-6xl); } } @media (max-width: 60em) and (min-width: 45em) { .l-md-gap-0x { grid-gap: 0; } .l-md-h-gap-0x { grid-column-gap: 0; } .l-md-v-gap-0x { grid-row-gap: 0; } .l-md-gap-1x { grid-gap: var(--s-xs); } .l-md-h-gap-1x { grid-column-gap: var(--s-xs); } .l-md-v-gap-1x { grid-row-gap: var(--s-xs); } .l-md-gap-2x { grid-gap: var(--s-small); } .l-md-h-gap-2x { grid-column-gap: var(--s-small); } .l-md-v-gap-2x { grid-row-gap: var(--s-small); } .l-md-gap-3x { grid-gap: var(--s-medium); } .l-md-h-gap-3x { grid-column-gap: var(--s-medium); } .l-md-v-gap-3x { grid-row-gap: var(--s-medium); } .l-md-gap-4x { grid-gap: var(--s-large); } .l-md-h-gap-4x { grid-column-gap: var(--s-large); } .l-md-v-gap-4x { grid-row-gap: var(--s-large); } .l-md-gap-5x { grid-gap: var(--s-xl); } .l-md-h-gap-5x { grid-column-gap: var(--s-xl); } .l-md-v-gap-5x { grid-row-gap: var(--s-xl); } .l-md-gap-6x { grid-gap: var(--s-2xl); } .l-md-h-gap-6x { grid-column-gap: var(--s-2xl); } .l-md-v-gap-6x { grid-row-gap: var(--s-2xl); } .l-md-gap-7x { grid-gap: var(--s-3xl); } .l-md-h-gap-7x { grid-column-gap: var(--s-3xl); } .l-md-v-gap-7x { grid-row-gap: var(--s-3xl); } .l-md-gap-8x { grid-gap: var(--s-4xl); } .l-md-h-gap-8x { grid-column-gap: var(--s-4xl); } .l-md-v-gap-8x { grid-row-gap: var(--s-4xl); } .l-md-gap-9x { grid-gap: var(--s-5xl); } .l-md-h-gap-9x { grid-column-gap: var(--s-5xl); } .l-md-v-gap-9x { grid-row-gap: var(--s-5xl); } .l-md-gap-10x { grid-gap: var(--s-6xl); } .l-md-h-gap-10x { grid-column-gap: var(--s-6xl); } .l-md-v-gap-10x { grid-row-gap: var(--s-6xl); } } @media (max-width: 80em) and (min-width: 60em) { .l-lg-gap-0x { grid-gap: 0; } .l-lg-h-gap-0x { grid-column-gap: 0; } .l-lg-v-gap-0x { grid-row-gap: 0; } .l-lg-gap-1x { grid-gap: var(--s-xs); } .l-lg-h-gap-1x { grid-column-gap: var(--s-xs); } .l-lg-v-gap-1x { grid-row-gap: var(--s-xs); } .l-lg-gap-2x { grid-gap: var(--s-small); } .l-lg-h-gap-2x { grid-column-gap: var(--s-small); } .l-lg-v-gap-2x { grid-row-gap: var(--s-small); } .l-lg-gap-3x { grid-gap: var(--s-medium); } .l-lg-h-gap-3x { grid-column-gap: var(--s-medium); } .l-lg-v-gap-3x { grid-row-gap: var(--s-medium); } .l-lg-gap-4x { grid-gap: var(--s-large); } .l-lg-h-gap-4x { grid-column-gap: var(--s-large); } .l-lg-v-gap-4x { grid-row-gap: var(--s-large); } .l-lg-gap-5x { grid-gap: var(--s-xl); } .l-lg-h-gap-5x { grid-column-gap: var(--s-xl); } .l-lg-v-gap-5x { grid-row-gap: var(--s-xl); } .l-lg-gap-6x { grid-gap: var(--s-2xl); } .l-lg-h-gap-6x { grid-column-gap: var(--s-2xl); } .l-lg-v-gap-6x { grid-row-gap: var(--s-2xl); } .l-lg-gap-7x { grid-gap: var(--s-3xl); } .l-lg-h-gap-7x { grid-column-gap: var(--s-3xl); } .l-lg-v-gap-7x { grid-row-gap: var(--s-3xl); } .l-lg-gap-8x { grid-gap: var(--s-4xl); } .l-lg-h-gap-8x { grid-column-gap: var(--s-4xl); } .l-lg-v-gap-8x { grid-row-gap: var(--s-4xl); } .l-lg-gap-9x { grid-gap: var(--s-5xl); } .l-lg-h-gap-9x { grid-column-gap: var(--s-5xl); } .l-lg-v-gap-9x { grid-row-gap: var(--s-5xl); } .l-lg-gap-10x { grid-gap: var(--s-6xl); } .l-lg-h-gap-10x { grid-column-gap: var(--s-6xl); } .l-lg-v-gap-10x { grid-row-gap: var(--s-6xl); } } @media (min-width: 80em) { .l-xl-gap-0x { grid-gap: 0; } .l-xl-h-gap-0x { grid-column-gap: 0; } .l-xl-v-gap-0x { grid-row-gap: 0; } .l-xl-gap-1x { grid-gap: var(--s-xs); } .l-xl-h-gap-1x { grid-column-gap: var(--s-xs); } .l-xl-v-gap-1x { grid-row-gap: var(--s-xs); } .l-xl-gap-2x { grid-gap: var(--s-small); } .l-xl-h-gap-2x { grid-column-gap: var(--s-small); } .l-xl-v-gap-2x { grid-row-gap: var(--s-small); } .l-xl-gap-3x { grid-gap: var(--s-medium); } .l-xl-h-gap-3x { grid-column-gap: var(--s-medium); } .l-xl-v-gap-3x { grid-row-gap: var(--s-medium); } .l-xl-gap-4x { grid-gap: var(--s-large); } .l-xl-h-gap-4x { grid-column-gap: var(--s-large); } .l-xl-v-gap-4x { grid-row-gap: var(--s-large); } .l-xl-gap-5x { grid-gap: var(--s-xl); } .l-xl-h-gap-5x { grid-column-gap: var(--s-xl); } .l-xl-v-gap-5x { grid-row-gap: var(--s-xl); } .l-xl-gap-6x { grid-gap: var(--s-2xl); } .l-xl-h-gap-6x { grid-column-gap: var(--s-2xl); } .l-xl-v-gap-6x { grid-row-gap: var(--s-2xl); } .l-xl-gap-7x { grid-gap: var(--s-3xl); } .l-xl-h-gap-7x { grid-column-gap: var(--s-3xl); } .l-xl-v-gap-7x { grid-row-gap: var(--s-3xl); } .l-xl-gap-8x { grid-gap: var(--s-4xl); } .l-xl-h-gap-8x { grid-column-gap: var(--s-4xl); } .l-xl-v-gap-8x { grid-row-gap: var(--s-4xl); } .l-xl-gap-9x { grid-gap: var(--s-5xl); } .l-xl-h-gap-9x { grid-column-gap: var(--s-5xl); } .l-xl-v-gap-9x { grid-row-gap: var(--s-5xl); } .l-xl-gap-10x { grid-gap: var(--s-6xl); } .l-xl-h-gap-10x { grid-column-gap: var(--s-6xl); } .l-xl-v-gap-10x { grid-row-gap: var(--s-6xl); } } .accordion-trigger, .accordion-trigger__btn { align-items: center; display: flex; width: 100%; } .accordion-trigger__title { align-items: center; color: var(--ghost-text-color); display: flex; font-weight: var(--t-heavy); } .accordion-trigger__count { color: var(--ghost-text-color); margin-left: auto; } tk-accordion + tk-accordion { --accordion-border-top: 0; } .account-links { align-items: center; display: flex; } .account-links__item { --avatar-dimension: 32px; --avatar-text-size: var(--t-small); font-size: var(--t-small); } @media (max-width: 45em) { .account-links { margin-left: var(--s-small); } } button { outline: none; } button:hover tk-avatar { --avatar-border: 1px solid var(--avatar-border-light-default); --avatar-box-shadow: var(--avatar-box-shadow-hover); } button:focus tk-avatar { --avatar-bg: var(--avatar-bg-focused); --avatar-outline: var(--avatar-outline-focus); --avatar-outline-offset: 1px; } button:active tk-avatar { --avatar-bg: var(--avatar-bg-active); --avatar-box-shadow: var(--avatar-box-shadow-dark-active); --avatar-outline: var(--avatar-active-outline); } button:hover tk-avatar, button:active tk-avatar { --avatar-border: 1px solid var(--avatar-border-light-default); } button:hover tk-avatar[type=light], button:hover tk-avatar[type=muted] { --avatar-bg-light: var(--avatar-bg-light-hover); --avatar-bg-muted: var(--avatar-bg-light-hover); --avatar-box-shadow: var(--avatar-box-shadow-hover); } button:focus tk-avatar[type=light], button:hover tk-avatar[type=muted] { --avatar-bg: var(--avatar-bg-light); } button:active tk-avatar[type=light], button:hover tk-avatar[type=muted] { --avatar-bg: var(--avatar-bg-light-active); --avatar-box-shadow: var(--avatar-box-shadow-active); --avatar-outline: var(--avatar-active-outline); } button:hover tk-avatar[type=light], button:active tk-avatar[type=light], button:active tk-avatar[type=muted], button:hover tk-avatar[type=muted] { --avatar-border: 1px solid var(--avatar-border-light-default); } .form__callout, .form__error { background-color: var(--banner-bg); border: 1px solid var(--banner-border); border-radius: var(--border-radius); box-sizing: border-box; color: var(--banner-text); margin: 0 auto 16px 0; padding: 8px 16px; } .form__callout > p, .form__error > p { margin: 0; } .form__error { --banner-bg: var(--interface-error-x-light); --banner-border: var(--interface-error); width: 100%; } .form__callout { --banner-bg: var(--interface-highlight-x-light); --banner-border: var(--interface-highlight); } .banner__link, .system-notifications__message a[href] { font-weight: var(--t-heavy); } .banner__link, .banner__link:hover, .banner__link:focus, .banner__link:visited, .system-notifications__message a[href], .system-notifications__message a[href]:hover, .system-notifications__message a[href]:focus, .system-notifications__message a[href]:visited { color: var(--link-color); } .banner__link:hover, .banner__link:focus, .system-notifications__message a[href]:hover, .system-notifications__message a[href]:focus { text-decoration: underline; } .banner__link.btn--link, .system-notifications__message a[href].btn--link { font-weight: var(--t-heavy); padding: 0; } tk-banner .t-link, tk-banner .btn--link { text-decoration: underline; } tk-banner[type=error] .t-link, tk-banner[type=error] .btn--link { color: var(--banner-error-link); } tk-banner[type=warning] .t-link, tk-banner[type=warning] .btn--link { color: var(--banner-warning-link); } tk-banner[type=info] .t-link, tk-banner[type=info] .btn--link { color: var(--banner-link); } tk-banner[type=success] .t-link, tk-banner[type=success] .btn--link { color: var(--banner-success-link); } tk-banner[type=tip] .t-link, tk-banner[type=tip] .btn--link { color: var(--banner-tip-link); } .bulk-selector { background-color: var(--bulk-selector-bg); bottom: 0; color: var(--bulk-selector-text); left: 0; max-height: 0; position: fixed; visibility: hidden; width: 100%; z-index: var(--z-index-controls); } .bulk-selector.visible { max-height: none; padding: 16px 0; visibility: visible; } .bulk-selector, .bulk-selector.visible { transition: 150ms ease-in-out; transition-property: visibility, max-height, padding; } .btn, .btn-base { box-shadow: none; box-sizing: border-box; cursor: pointer; font: inherit; margin: 0; text-align: center; text-shadow: none; white-space: nowrap; } .btn--primary, .btn--secondary { -webkit-appearance: none; appearance: none; box-shadow: none; box-sizing: border-box; cursor: pointer; font: inherit; margin: 0; text-align: center; text-shadow: none; white-space: nowrap; border-radius: var(--border-radius); color: var(--btn-text-color); display: block; font-size: var(--t-base); line-height: normal; padding: var(--s-small) var(--s-medium); background: var(--btn-bg); font-weight: var(--t-heavy); --btn-bg: var(--interface-primary); --btn-bg-hover: hsl(219deg 62% 50% / 100%); --btn-text-color: var(--interface-white); } .btn--primary, .btn--primary:hover, .btn--primary:focus, .btn--primary:visited, .btn--primary:active, .btn--secondary, .btn--secondary:hover, .btn--secondary:focus, .btn--secondary:visited, .btn--secondary:active { color: var(--btn-text-color); } .btn--primary:hover, .btn--primary:focus, .btn--secondary:hover, .btn--secondary:focus { background: var(--btn-bg-hover); } .btn--primary:hover, .btn--primary:focus, .btn--secondary:hover, .btn--secondary:focus { text-decoration: none; } .btn--tertiary { -webkit-appearance: none; appearance: none; box-shadow: none; box-sizing: border-box; cursor: pointer; font: inherit; margin: 0; text-align: center; text-shadow: none; white-space: nowrap; border-radius: var(--border-radius); color: var(--btn-text-color); display: block; font-size: var(--t-base); line-height: normal; padding: var(--s-small) var(--s-medium); background: var(--btn-bg); font-weight: var(--t-heavy); --btn-bg: var(--interface-secondary-x-light); --btn-bg-hover: hsl(214deg 8% 84%); --btn-text-color: var(--text-color); } .btn--tertiary, .btn--tertiary:hover, .btn--tertiary:focus, .btn--tertiary:visited, .btn--tertiary:active { color: var(--btn-text-color); } .btn--tertiary:hover, .btn--tertiary:focus { background: var(--btn-bg-hover); } .btn--tertiary:hover, .btn--tertiary:focus { text-decoration: none; } .btn--dangerous { -webkit-appearance: none; appearance: none; box-shadow: none; box-sizing: border-box; cursor: pointer; font: inherit; margin: 0; text-align: center; text-shadow: none; white-space: nowrap; border-radius: var(--border-radius); color: var(--btn-text-color); display: block; font-size: var(--t-base); line-height: normal; padding: var(--s-small) var(--s-medium); background: var(--btn-bg); font-weight: var(--t-heavy); --btn-bg: var(--interface-error); --btn-bg-hover: hsl(350deg 63% 51%); --btn-text-color: var(--interface-white); } .btn--dangerous, .btn--dangerous:hover, .btn--dangerous:focus, .btn--dangerous:visited, .btn--dangerous:active { color: var(--btn-text-color); } .btn--dangerous:hover, .btn--dangerous:focus { background: var(--btn-bg-hover); } .btn--dangerous:hover, .btn--dangerous:focus { text-decoration: none; } .btn--primary[disabled], .btn--primary[disabled]:hover, .btn--primary[disabled]:focus, .btn--secondary[disabled], .btn--secondary[disabled]:hover, .btn--secondary[disabled]:focus, .btn--tertiary[disabled], .btn--tertiary[disabled]:hover, .btn--tertiary[disabled]:focus, .btn--dangerous[disabled], .btn--dangerous[disabled]:hover, .btn--dangerous[disabled]:focus { cursor: not-allowed; opacity: 0.5; } .btn--link { box-shadow: none; box-sizing: border-box; cursor: pointer; font: inherit; margin: 0; text-align: center; text-shadow: none; white-space: nowrap; background-color: transparent; border: none; color: var(--link-color); } .btn--link:hover, .btn--link:focus { text-decoration: underline; } .btn--link:hover, .btn--link:focus, .btn--link:visited, .btn--link:active { color: var(--link-color); } .btn--outline { box-shadow: none; box-sizing: border-box; cursor: pointer; font: inherit; margin: 0; text-align: center; text-shadow: none; white-space: nowrap; --btn-outline-border-color: var(--interface-primary); --btn-outline-bg-color: transparent; --btn-outline-text-color: var(--interface-primary); background-color: var(--btn-outline-bg-color); border: 1px solid var(--btn-outline-border-color); border-radius: var(--border-radius); color: var(--btn-outline-text-color); font-weight: var(--t-heavy); letter-spacing: 0.5px; padding: var(--s-small); } .btn--outline:hover, .btn--outline:focus { --btn-outline-bg-color: var(--interface-primary); --btn-outline-text-color: var(--interface-white); } .btn--outline:disabled { --btn-outline-bg-color: transparent; --btn-outline-border-color: var(--interface-secondary); --btn-outline-text-color: var(--interface-secondary); cursor: not-allowed; opacity: 0.5; } .btn--compact { font-size: var(--t-small); height: var(--btn-compact-height); line-height: var(--btn-compact-height); padding: 0 var(--btn-compact-padding); } .btn--compact .btn__icon { height: 0.7em; margin-left: 4px; width: 0.7em; } .btn--centered { margin: 0 auto; } .btn--inline { display: inline-block; } .btn-group { align-content: center; align-items: center; display: flex; flex: 1 1 auto; justify-content: flex-end; } .btn--toggle-text { box-shadow: none; box-sizing: border-box; cursor: pointer; font: inherit; margin: 0; text-align: center; text-shadow: none; white-space: nowrap; background-color: transparent; border: none; bottom: 2px; color: var(--link-color); font-size: 80%; font-weight: var(--t-heavy); margin-right: 10px; padding: 0; position: relative; } .btn--toggle-text:hover, .btn--toggle-text:focus { text-decoration: underline; } .btn--toggle-text:focus { color: var(--link-color); outline: 0; } .btn--inverse { -webkit-appearance: none; appearance: none; box-shadow: none; box-sizing: border-box; cursor: pointer; font: inherit; margin: 0; text-align: center; text-shadow: none; white-space: nowrap; border-radius: var(--border-radius); color: var(--btn-text-color); display: block; font-size: var(--t-base); line-height: normal; padding: var(--s-small) var(--s-medium); --btn-inverse-bg: var(--button-bg-color-inverse); --btn-inverse-border-color: var(--button-border-color-inverse); background: var(--btn-inverse-bg); border: 1px solid var(--btn-inverse-border-color); color: var(--text-color); font-size: var(--t-small); white-space: nowrap; } .btn--inverse, .btn--inverse:hover, .btn--inverse:focus, .btn--inverse:visited, .btn--inverse:active { color: var(--btn-text-color); } .btn--inverse:hover, .btn--inverse:focus { text-decoration: none; } .btn--inverse.active { --btn-inverse-bg: var(--button-bg-color-inverse-selected); --btn-inverse-border-color: var(--button-border-color-inverse-selected); } .btn--inverse.btn--multiline { text-align: left; white-space: normal; } .btn--disabled { --button-color: hsl(var(--hsl-value-text-color) / 50%); border-color: var(--button-color); color: var(--button-color); } .btn--locked .btn__icon { color: inherit; cursor: inherit; margin: 0 0 0 8px; } .btn--icon-only { box-shadow: none; box-sizing: border-box; cursor: pointer; font: inherit; margin: 0; text-align: center; text-shadow: none; white-space: nowrap; } .btn--icon-only:hover, .btn--icon-only:focus { background: none; color: inherit; } .btn--icon-only i { display: block; } .btn--icon-square { box-shadow: none; box-sizing: border-box; cursor: pointer; font: inherit; margin: 0; text-align: center; text-shadow: none; white-space: nowrap; border: 1px solid var(--interface-secondary-light); border-radius: var(--border-radius); color: var(--text-color); padding: 8px 16px; } .btn--icon-square:hover, .btn--icon-square:focus { background: none; color: inherit; } .btn--icon-square i { display: block; } .btn--icon-square, .btn--icon-square:focus, .btn--icon-square:hover { background-color: var(--interface-secondary-xx-light); } @media (max-width: 60em) { .btn--primary:not(.btn--compact), .btn--tertiary:not(.btn--compact), .btn--dangerous:not(.btn--compact) { font-size: var(--t-small); padding: var(--btn-compact-padding); } } @media (max-width: 45em) { .btn-sm-block { --btn-width: 100%; width: 100%; } } @media (max-width: 60em) { .btn-md-block { --btn-width: 100%; width: 100%; } } .card { background: #fff; border: 1px solid #dde0e4; border-radius: var(--border-radius); display: flex; flex-wrap: wrap; max-width: 300px; } .card--moveable { box-shadow: var(--box-shadow); position: relative; } .card__image { max-width: 100%; } .card__content { padding: 16px; width: 100%; } .card__header { align-items: center; border-bottom: 1px solid #dde0e4; box-sizing: border-box; display: flex; padding: 16px; width: 100%; } .card__toolbar { align-items: center; display: flex; justify-content: space-between; margin-left: auto; } .card__content--compact { padding: 8px; } .card__button, .card__move { box-shadow: none; box-sizing: border-box; cursor: pointer; font: inherit; margin: 0; text-align: center; text-shadow: none; white-space: nowrap; background: transparent; border: none; color: var(--interface-primary); } .card__button { margin: 0 16px; } .card__button:hover, .card__button:visited, .card__button:active { color: var(--interface-primary); text-decoration: none; } .card__button.btn--disabled { color: var(--ghost-text-color); cursor: not-allowed; } .card__move { cursor: move; /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ font: normal normal normal 14px/1 FontAwesome; width: 20px; } .card__move:last-child { margin-right: 0; } @media (max-width: 45em) { .cards { flex-direction: column; } .card { margin: 8px auto; } } @media (min-width: 45em) { .card { max-width: 300px; } } @media (min-width: 60em) { .card--small { max-width: 400px; } .card--medium { max-width: 100%; width: 100%; } } .context-switcher-footer-item__link { cursor: pointer; display: block; padding: var(--s-small) var(--s-medium); text-align: left; width: 100%; } .draggables { margin-right: 16px; min-width: 200px; } .draggables--sticky { align-self: flex-start; position: -webkit-sticky; position: sticky; top: 16px; z-index: var(--z-index-controls); } .btn--draggable { -webkit-appearance: none; appearance: none; box-shadow: none; box-sizing: border-box; cursor: pointer; font: inherit; margin: 0; text-align: center; text-shadow: none; white-space: nowrap; border-radius: var(--border-radius); color: var(--btn-text-color); display: block; font-size: var(--t-base); line-height: normal; padding: var(--s-small) var(--s-medium); background: var(--btn-bg); font-weight: var(--t-heavy); --btn-bg: var(--interface-secondary-x-light); --btn-bg-hover: hsl(214deg 8% 84%); --btn-text-color: var(--text-color); align-items: center; display: flex; justify-content: space-between; line-height: 1.3; margin: 16px 0; position: relative; text-align: left; text-decoration: none; } .btn--draggable, .btn--draggable:hover, .btn--draggable:focus, .btn--draggable:visited, .btn--draggable:active { color: var(--btn-text-color); } .btn--draggable:hover, .btn--draggable:focus { background: var(--btn-bg-hover); } .btn--draggable:hover, .btn--draggable:focus { text-decoration: none; } .btn--draggable:not(.btn--locked)::before { background: transparent; content: ""; padding: 8px 0; position: absolute; top: 10px; width: 8px; border-left: 2px solid #1b314b; right: 4px; } .btn--draggable:not(.btn--locked)::after { background: transparent; content: ""; padding: 8px 0; position: absolute; top: 10px; width: 8px; border-left: 2px solid #1b314b; border-right: 2px solid #1b314b; right: 16px; } .btn--draggable:hover:not(.btn--locked) { cursor: -webkit-grab; cursor: grab; text-decoration: none; } .btn--draggable, .btn--draggable:focus, .btn--draggable:active { cursor: -webkit-grabbing; cursor: grabbing; } .btn--draggable.disabled, .btn--draggable.locked:hover { cursor: not-allowed; } .btn--draggable.btn--locked { cursor: pointer; } .cdk-drag { cursor: -webkit-grab; cursor: grab; } .cdk-drop-list-dragging .cdk-drag { cursor: -webkit-grabbing; cursor: grabbing; } .cdk-drag-placeholder { background-color: #dee4fd; border: none; box-shadow: none; } .cdk-drag-placeholder * { opacity: 0; } .drop-menu { position: relative; width: inherit; width: -webkit-max-content; width: -moz-max-content; } .dropdown { -webkit-appearance: none; appearance: none; font-size: var(--t-small); align-items: center; box-shadow: none; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; margin: 0; padding: 0 8px; position: relative; text-decoration: none; } .dropdown, .dropdown:hover, .dropdown:focus, .dropdown:visited { color: var(--text-color); text-decoration: none; } .dropdown:disabled, .dropdown__trigger:disabled { cursor: not-allowed; opacity: 0.5; } .dropdown--alt { background: #dde0e4; border: 1px solid transparent; border-radius: var(--border-radius); font-weight: var(--t-heavy); padding: 8px; } .dropdown__trigger { -webkit-appearance: none; appearance: none; border: none; display: block; font-size: var(--t-small); margin: 0; padding: 0 36px 0 var(--s-small); background: var(--select-field-caret-style); background-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dropdown__trigger::-ms-expand { display: none; } .dropdown-options { background: var(--dropdown-menu-bg); border-radius: var(--border-radius); box-shadow: var(--box-shadow-heavy); box-sizing: content-box; display: none; list-style: none; margin-top: 8px; max-height: 400px; min-width: 200px; min-width: -moz-max-content; min-width: -webkit-max-content; min-width: max-content; overflow-y: auto; padding: 0; position: absolute; right: 0; width: 100%; z-index: 500; } .open > .dropdown-options, .open ~ .dropdown-options, .show > .dropdown-options { display: block; } @media (max-width: 45em) { .truncate-select { max-width: 240px; } .drop-menu .open::before, .dropdown-options { position: fixed; } .drop-menu .open::before { background: var(--dropdown-overlay-bg); content: ""; display: block; height: 100%; inset: 0; width: 100%; z-index: calc(var(--z-index-modal) - 1); } .dropdown-options { border-radius: var(--border-radius-medium); bottom: 10vh; left: 5%; max-height: 70vh; right: 5%; width: auto; z-index: var(--z-index-modal); } .dropdown-item:not(:last-child) { border-bottom: 1px solid var(--interface-secondary-x-light); } } .dropdown__rule { border: none; border-bottom: var(--t-rule); margin-bottom: var(--s-small); margin-top: var(--s-small); } .dropdown__link, .dropdown__subheader { width: 100%; width: -moz-available; width: -webkit-fill-available; } .dropdown__subheader { color: var(--dropdown-subheader-text-color); font-size: var(--dropdown-subheader-text-size); font-weight: var(--dropdown-subheader-text-weight); margin-bottom: 0; margin-left: var(--s-medium); margin-right: var(--s-medium); } .dropdown__subheader[small-caps=""], .dropdown__subheader[small-caps=true] { --dropdown-subheader-text-color: var(--ghost-text-color); --dropdown-subheader-text-size: var(--t-small); letter-spacing: 0.05rem; text-transform: uppercase; } .dropdown__link { border: var(--dropdown-link-border); cursor: pointer; display: block; font-size: var(--dropdown-link-text-size); overflow: hidden; padding: var(--s-small) var(--s-large); text-align: left; text-decoration: none; } .dropdown__link, .dropdown__link:visited { color: var(--dropdown-link-text-color); } tk-dropdown-item[active=""] .dropdown__link, tk-dropdown-item[active=true] .dropdown__link { align-items: center; display: flex; } .dropdown__link:hover, .dropdown__link:visited:hover { background-color: var(--dropdown-link-bg-hover); border-width: var(--dropdown-link-border-width); border-style: var(--dropdown-link-border-style); border-color: var(--dropdown-link-border-color-transparent); color: var(--dropdown-link-text-color-hover); } .dropdown__link:hover:focus-visible { background-color: var(--dropdown-link-bg-hover); border: var(--dropdown-link-border-style) var(--dropdown-link-border-width) var(--dropdown-link-border-color-focus); } .dropdown__link:focus-visible { background-color: var(--dropdown-link-bg-focus); color: var(--dropdown-link-text-color-hover); border: var(--dropdown-link-border-style) var(--dropdown-link-border-width) var(--dropdown-link-border-color-focus); } .dropdown__link:disabled { background-color: transparent; cursor: not-allowed; opacity: 0.5; } .dropdown__subtext { color: var(--dropdown-subtext-text-color); display: block; font-weight: var(--dropdown-subtext-text-weight); } @media (max-width: 45em) { tk-dropdown[is-responsive=true] .dropdown__link, tk-dropdown[is-responsive=""] .dropdown__link { padding-bottom: 22px; padding-top: 22px; width: 100%; } } .droppable { background: var(--interface-midnight-xx-light); border: 1px solid #dde0e4; border-radius: var(--border-radius); display: flex; padding: 16px; } .droppable__area { border: 3px dashed transparent; box-sizing: border-box; display: flex; flex-wrap: wrap; width: 100%; } .droppable__area.hovering, .droppable__area .hovering { background: #dee4fd; border-color: #315cfd; } .droppable__area ~ .droppable__area { margin-top: 24px; } .droppable__text { align-items: center; display: flex; flex-direction: column; justify-content: center; margin: 16px auto 0 auto; max-width: 90%; text-align: center; } .droppable__instructions { color: var(--ghost-text-color); font-size: var(--t-small); font-size: var(--t-base); position: absolute; text-align: center; } .droppable--empty { min-height: 200px; } .droppable--empty .droppable__area, .droppable__area--empty { border-color: #dde0e4; } .droppable--empty .droppable__area.cdk-drop-list-dragging, .droppable--empty .droppable__area.hovering, .droppable--empty .droppable__area .hovering, .droppable__area--empty.cdk-drop-list-dragging, .droppable__area--empty.hovering, .droppable__area--empty .hovering { border-color: #315cfd; } .filtered-dropdown__menu { position: relative; width: inherit; width: -webkit-max-content; width: -moz-max-content; } .filtered-dropdown { background-color: #fff; border-radius: var(--border-radius); box-shadow: var(--box-shadow); box-sizing: content-box; height: 0; margin-top: 8px; min-width: 200px; min-width: -moz-max-content; min-width: max-content; overflow: hidden; position: absolute; right: 0; width: 100%; z-index: var(--z-index-modal); } .open ~ .filtered-dropdown { height: max-content; height: -webkit-max-content; height: -moz-max-content; overflow: auto; } .filtered-dropdown__header { padding: 16px; } .filtered-dropdown__search { align-items: center; display: flex; position: relative; } .form-input.filtered-dropdown__input { padding-left: 32px; } .filtered-dropdown__icon { left: var(--s-small); pointer-events: none; position: absolute; } .filtered-dropdown__icon * { --icon-size: var(--s-medium); } .filtered-dropdown__options > ul { list-style: none; } .filtered-dropdown__subheader { background-color: #fff; font-size: var(--t-small); font-weight: var(--t-heavy); padding: 8px 16px; position: sticky; position: -moz-sticky; position: -webkit-sticky; text-align: left; top: 0; } .filtered-dropdown__link, .filtered-dropdown__subheader { width: 100%; width: -moz-fill-available; width: -webkit-fill-available; } .filtered-dropdown__link { display: block; font-size: var(--dropdown-link-text-size); overflow: hidden; padding: 8px 16px; text-align: left; text-decoration: none; } .filtered-dropdown__link, .filtered-dropdown__link:visited { color: var(--dropdown-link-text-color); } .filtered-dropdown__link:hover, .filtered-dropdown__link:visited:hover, .filtered-dropdown__link:focus { background-color: var(--dropdown-link-bg-hover); border-color: transparent; color: var(--dropdown-link-text-color-hover); } .filtered-close { background-color: #fff; border-top: 1px solid var(--interface-secondary-x-light); bottom: 0; display: none; height: 67px; left: 0; padding: 16px; position: fixed; right: 0; } .filtered-close .filtered-close__link { margin: auto; position: relative !important; } @media (min-width: 60em) { .filtered-dropdown__options { max-height: 400px; overflow-y: auto; width: 100%; } } @media (max-width: 60em) { .filtered-dropdown { border-radius: 0; box-shadow: none; left: 0; margin-top: 0; overflow-y: auto; position: fixed; right: 0; transition: all 0.6s; width: 100%; } .open ~ .filtered-dropdown { height: 100%; top: 0; } .closed ~ .filtered-dropdown { height: 0; top: 100%; } .filtered-dropdown .filtered-dropdown__subheader, .filtered-dropdown .filtered-dropdown__link { padding: 22px; height: 100%; width: 100%; } .open ~ .filtered-dropdown .filtered-close { display: block; } .filtered-dropdown__header { border-bottom: 1px solid var(--interface-secondary-x-light); } .filtered-dropdown__options { bottom: 10vh; height: 100%; left: 5%; max-height: 100%; right: 5%; z-index: var(--z-index-modal); } .clear-bottom { padding-bottom: 100px; } } filters-trigger, .filters-trigger { display: flex; } .filters-trigger__btn { align-items: center; display: flex; } .filters-trigger__btn.active { background-color: var(--interface-primary-x-light); border-color: var(--interface-primary); color: var(--interface-primary); } .filters-trigger__count { font-size: var(--t-small); font-weight: var(--t-heavy); line-height: 1; } .filters-trigger__icon { height: 14px; width: 16px; } .filters-overlay-container { display: block; margin: 16px auto 0 auto; position: relative; } filters-overlay, .filters-overlay { background-color: var(--interface-white); background-clip: padding-box; border-radius: var(--border-radius); box-shadow: var(--box-shadow-heavy); display: none; left: 0; padding: 16px; position: absolute; top: 0; z-index: var(--z-index-popover); display: block; padding: 0; right: auto; } .filters-overlay__header, .filters-overlay__body, .filters-overlay__footer { padding: 16px; } .filters-overlay__header, .filters-overlay__footer { display: flex; width: 100%; } .filters-overlay__header { border-bottom: var(--t-rule); } .filters-overlay__footer { border-top: var(--t-rule); } .filters-header__title { font-size: var(--t-small); font-weight: var(--t-heavy); } .filters-overlay__rule { border: none; border-bottom: var(--t-rule); margin: 16px 0; margin-left: -16px; width: calc(16px * 2 + 100%); } .filters-overlay__accordion { display: block; } filters-submit, .filters-submit { align-items: center; display: flex; justify-content: flex-end; } filters-input, .filters-input { display: flex; } .filters-input-container__results { border: 1px solid var(--interface-secondary-x-light); border-radius: var(--border-radius); margin-top: 8px; padding: 16px; } .form-input.filters-input__input { border-radius: var(--border-radius) 0 0 var(--border-radius); border-right: none; } .filters-input__button { border-left: none; border-radius: 0 var(--border-radius) var(--border-radius) 0; flex-shrink: 0; } filters-results, .filters-results { display: block; } @media (max-width: 45em) { .filters-overlay-container { left: 0; position: absolute; right: 0; width: 90vw; } filters-overlay, .filters-overlay { right: 0; } } @media (min-width: 45em) { filters-overlay, .filters-overlay { min-width: 400px; } .filters-overlay--right { left: auto; right: 0; } } @media (min-width: 80em) { filters-overlay, .filters-overlay { min-width: 580px; } } ::placeholder { color: inherit; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: none; padding: 0; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; } optgroup { font-weight: var(--t-heavy); } fieldset { margin: 0; padding: 0; } label abbr { border: none; text-decoration: none; } .fieldset { border: none; margin: 0; padding: 0; } .form-group { margin-bottom: 16px; } .textarea { -webkit-appearance: none; appearance: none; -webkit-appearance: none; appearance: none; box-shadow: none; box-sizing: border-box; border: var(--input-field-border-width) solid var(--input-field-border-color); border-radius: var(--input-field-border-radius); padding: var(--input-field-padding); box-shadow: var(--input-field-box-shadow-inactive); transition: var(--input-field-transition); background: transparent; display: block; font: inherit; width: 100%; } .textarea:hover { box-shadow: var(--input-field-box-shadow); border-color: var(--input-field-border-color-active); } .textarea:focus, .textarea.form-input--focused { border-width: var(--input-field-border-width-active); border-color: var(--input-field-border-color-active); box-shadow: var(--input-field-box-shadow-active); outline: none; } .form-input, .input-field { -webkit-appearance: none; appearance: none; box-shadow: none; box-sizing: border-box; border: var(--input-field-border-width) solid var(--input-field-border-color); border-radius: var(--input-field-border-radius); padding: var(--input-field-padding); box-shadow: var(--input-field-box-shadow-inactive); transition: var(--input-field-transition); font-family: var(--t-font-stack); font-size: var(--t-small); font-weight: var(--t-regular); width: 100%; } .form-input:hover, .input-field:hover { box-shadow: var(--input-field-box-shadow); border-color: var(--input-field-border-color-active); } .form-input:focus, .form-input.form-input--focused, .input-field:focus, .input-field.form-input--focused { border-width: var(--input-field-border-width-active); border-color: var(--input-field-border-color-active); box-shadow: var(--input-field-box-shadow-active); outline: none; } .form-input:-ms-input-placeholder, .form-input--textarea:-ms-input-placeholder, .input-field:-ms-input-placeholder, .textarea:-ms-input-placeholder { color: var(--ghost-text-color); font-size: var(--t-small); } .form-input::placeholder, .form-input--textarea::placeholder, .input-field::placeholder, .textarea::placeholder { color: var(--ghost-text-color); font-size: var(--t-small); opacity: 1; } .form-input--xs { max-width: 30%; } .form-input--small { display: flex; max-width: 40%; } .form-input--med { max-width: 50%; } .form-input--textarea, .textarea--auto-height { height: auto; } .textarea--resize-vert { resize: vertical; } .form-input--textarea { padding: 8px; } .form-group--error .form-input, .form-input--error { border-color: var(--interface-error); } .form-input[disabled], .form-input--disabled { -webkit-text-fill-color: var(--input-field-text-disabled); background-color: var(--input-field-background-disabled); color: var(--input-field-text-disabled); cursor: not-allowed; } .form-input[readonly] { background-color: transparent; border-color: transparent; } .input--checkbox { margin-right: 0.25rem; width: auto; } .form__legend { display: block; font-size: var(--t-medium); font-weight: var(--t-heavy); margin-bottom: var(--s-xs); } .form__label { display: inline-block; font-weight: inherit; font-weight: var(--t-heavy); margin-bottom: 4px; } .form__label .form__label { display: block; font-size: var(--t-small); font-weight: var(--t-regular); margin-bottom: 1.25em; margin-top: 0; } .form__radio:hover, .form__checkbox:hover { cursor: pointer; } .form__radio:hover:disabled, .form__checkbox:hover:disabled { cursor: not-allowed; } .form__label--checkbox, .form__label--radio { align-items: center; cursor: pointer; display: flex; font-size: var(--t-small); font-weight: var(--t-regular); margin: 0; } .form__label--checkbox .form__radio, .form__label--checkbox .form__checkbox, .form__label--checkbox .input-checkbox, .form__label--radio .form__radio, .form__label--radio .form__checkbox, .form__label--radio .input-checkbox { margin-right: 8px; } .form__label--medium { font-size: var(--t-medium); } .form__label--large { font-size: var(--t-large); } .form__label--stacked, .label--stacked { display: block; margin-bottom: 0; } .label--stacked .form-input { margin-top: 4px; } .form__label--disabled { cursor: not-allowed; opacity: 0.5; } .form__hint { color: var(--ghost-text-color); font-size: var(--t-small); font-weight: var(--t-regular); line-height: 1.15; margin: 4px 0; } .form__hint--error { color: var(--interface-error); } .form__label--error + .form__hint { display: none; } .form-alerts { position: relative; } .form-alert { margin-bottom: 0; margin-top: 0; position: absolute; right: 0; top: 0; transform: translateY(0); } .form-alert__error { animation-duration: 0.5s; animation-fill-mode: forwards; animation-name: fadeUp; color: var(--t-error); } .form-alert__saved { animation-fill-mode: forwards; -webkit-animation: fade-up-down 3s; -moz-animation: fade-up-down 3s; } @keyframes fade-up-down { 0% { opacity: 0; transform: translateY(5px); } 5% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(5px); } } @-webkit-keyframes fade-up-down { 0% { opacity: 0; transform: translateY(5px); } 5% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(5px); } } .form__list { margin-left: 24px; } .form__bullet { list-style-type: disc; } .radio-btn-group { display: flex; flex-wrap: wrap; justify-content: flex-start; } .radio-btn-group__label { margin-right: 8px; } .radio-btn-group__label:focus-within { outline: var(--focus-outline-color) 1px solid; border-radius: var(--border-radius); } .input--hidden { border: none; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .input--hidden:disabled + .btn--inverse { cursor: not-allowed; opacity: 0.5; } .input--hidden:checked + .btn--inverse { --btn-inverse-bg: var(--button-bg-color-inverse-selected); --btn-inverse-border-color: var(--button-border-color-inverse-selected); } .inline-edit { height: 34px; width: 100%; } .inline-edit__text { height: 34px; line-height: 1; overflow: hidden; padding: 7px 0 0 10px; text-overflow: ellipsis; white-space: nowrap; } .inline-edit__text:hover, .inline-edit__text:focus { background: var(--interface-white); border-color: var(--input-field-border-color); } .inline-edit__input { border: none; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; background: var(--interface-white); font-size: var(--t-large); padding: var(--s-small); top: 0; } .inline-edit__input:active, .inline-edit__input:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .inline-edit__input.editing, .inline-edit__input:focus { border-color: var(--interface-primary); height: 34px; line-height: 1; position: absolute; width: 100%; } .input--inline { margin-right: 24px; } .form__error > p { margin-bottom: 0; } .form__rule { border: none; border-top: var(--t-rule); margin: 24px 0; } .form__row { border-top: var(--t-rule-thick); display: flex; margin-top: 24px; padding-top: 24px; } .form__column { flex-direction: column; } .input-checkbox, .input-checkbox::before { height: var(--t-small); width: var(--t-small); } .input-checkbox--medium, .input-checkbox--medium::before { height: var(--t-medium); width: var(--t-medium); } .input-checkbox--large, .input-checkbox--large::before { height: var(--t-large); width: var(--t-large); } .input-checkbox { -webkit-appearance: none; appearance: none; border: none; cursor: pointer; padding-left: var(--t-small); position: relative; top: 0; } .input-checkbox::before { background: var(--checkbox-bg); border: 1px solid var(--checkbox-border-color); border-radius: var(--border-radius); content: ""; left: 0; position: absolute; } .input-checkbox:disabled { cursor: not-allowed; } .input-checkbox--large { padding-left: var(--t-medium); } .input-checkbox:checked::before { --checkbox-bg: var(--interface-blue) var(--checkmark-icon-white) no-repeat center center; --checkbox-border-color: var(--interface-primary); background-size: 70%; } /* stylelint-disable-next-line max-line-length */ .input--stepper { max-width: 100px; padding: 8px 0 7px 8px; } .input--stepper::-webkit-textfield-decoration-container { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjM2cHgiIHZpZXdCb3g9IjAgMCA0MCAzNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TbGljZSAxPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iRHJvcGRvd24vRGFyayI+ICAgICAgICAgICAgPHBhdGggZD0iTTAsMCBMMzgsMCBMMzgsMCBDMzkuMTA0NTY5NSwtMi4wMjkwNjEyNWUtMTYgNDAsMC44OTU0MzA1IDQwLDIgTDQwLDM0IEw0MCwzNCBDNDAsMzUuMTA0NTY5NSAzOS4xMDQ1Njk1LDM2IDM4LDM2IEwwLDM2IEwwLDAgWiIgaWQ9IkJhc2UiIGZpbGw9IiNGN0Y5RkEiPjwvcGF0aD4gICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2LjAwMDAwMCwgOC4wMDAwMDApIiBmaWxsPSIjMUIzMTRCIj4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuOTM3MjUyMDEsMTQuNDMyIEM3LjgyNzI1NDI4LDE0LjE2ODc1IDcuNTkyNTkyNDYsMTQgNy4zMzMyNjQ0OSwxNCBMMC42NjY3MzU1MTMsMTQgQzAuNDA3NDA3NTM2LDE0IDAuMTcyNzQ1NzE2LDE0LjE2ODc1IDAuMDYyNzQ3OTg4LDE0LjQzMiBDLTAuMDQ2NTgzMDg3MiwxNC42OTYgLTAuMDExMjUwNDgzNiwxNS4wMDY1IDAuMTU0NzQ2MDg4LDE1LjIzMDc1IEwzLjQ4ODAxMDU3LDE5LjczMDc1IEMzLjYxNDAwNzk3LDE5LjkwMSAzLjgwMjAwNDA5LDIwIDQsMjAgQzQuMTk3OTk1OTEsMjAgNC4zODUzMjUzNywxOS45MDAyNSA0LjUxMTk4OTQzLDE5LjczMDc1IEw3Ljg0NTI1MzkxLDE1LjIzMDc1IEM4LjAxMTI1MDQ4LDE1LjAwNjUgOC4wNDY1ODMwOSwxNC42OTYgNy45MzcyNTIwMSwxNC40MzIgWiIgaWQ9IlRyaWFuZ2xlLURvd24iPjwvcGF0aD4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuOTM3MjUyMDEsMC40MzIgQzcuODI3MjU0MjgsMC4xNjg3NSA3LjU5MjU5MjQ2LDAgNy4zMzMyNjQ0OSwwIEwwLjY2NjczNTUxMywwIEMwLjQwNzQwNzUzNiwwIDAuMTcyNzQ1NzE2LDAuMTY4NzUgMC4wNjI3NDc5ODgsMC40MzIgQy0wLjA0NjU4MzA4NzIsMC42OTYgLTAuMDExMjUwNDgzNiwxLjAwNjUgMC4xNTQ3NDYwODgsMS4yMzA3NSBMMy40ODgwMTA1Nyw1LjczMDc1IEMzLjYxNDAwNzk3LDUuOTAxIDMuODAyMDA0MDksNiA0LDYgQzQuMTk3OTk1OTEsNiA0LjM4NTMyNTM3LDUuOTAwMjUgNC41MTE5ODk0Myw1LjczMDc1IEw3Ljg0NTI1MzkxLDEuMjMwNzUgQzguMDExMjUwNDgsMS4wMDY1IDguMDQ2NTgzMDksMC42OTYgNy45MzcyNTIwMSwwLjQzMiBaIiBpZD0iVHJpYW5nbGUtRG93bi1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LjAwMDAwMCwgMy4wMDAwMDApIHNjYWxlKDEsIC0xKSB0cmFuc2xhdGUoLTQuMDAwMDAwLCAtMy4wMDAwMDApICI+PC9wYXRoPiAgICAgICAgICAgIDwvZz4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg=="); background-position: 100% 0; background-repeat: no-repeat; } .input--stepper::-webkit-inner-spin-button { -webkit-appearance: none; cursor: pointer; padding: 19px 0 18px 0; width: 34px; } [slot=actions] tk-dropdown:hover, [slot=actions] button:hover, [slot=actions] button:focus { --icon-fill-color: var(--interface-secondary); } [slot=actions] tk-dropdown:hover { --dropdown-text-color: var(--interface-secondary); } [slot=actions] button { margin: var(--s-xs); } tk-gallery-card-actions .btn--icon-only { --btn-bg: transparent; --btn-overlay-bg-active: hsl(var(--hsl-value-primary) / 16%); --btn-overlay-bg-focus: hsl(var(--hsl-value-primary) / 12%); --btn-overlay-bg-hover: hsl(var(--hsl-value-primary) / 8%); background: var(--btn-bg); padding: var(--s-xs); } tk-gallery-card-actions .btn--icon-only:hover { background: linear-gradient(var(--btn-overlay-bg-hover), var(--btn-overlay-bg-hover)), linear-gradient(var(--btn-bg), var(--btn-bg)); border-radius: 2px; } tk-gallery-card-actions .btn--icon-only:focus { background: linear-gradient(var(--btn-overlay-bg-focus), var(--btn-overlay-bg-focus)), linear-gradient(var(--btn-bg), var(--btn-bg)); } tk-gallery-card-actions .btn--icon-only:active { background: linear-gradient(var(--btn-overlay-bg-active), var(--btn-overlay-bg-active)), linear-gradient(var(--btn-bg), var(--btn-bg)); } .btn__icon { color: var(--interface-primary); cursor: pointer; display: inline-block; margin-right: var(--s-medium); } .icon--success { color: var(--icon-color-success); } .icon--error { color: var(--icon-color-error); } .study-title__display { background-color: var(--input-title-bg-color); border-color: var(--input-title-border-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .study-title__display:hover { --input-title-bg-color: var(--interface-white); --input-title-border-color: var(--interface-secondary-x-light); } .study-title__input { font-weight: var(--t-heavy); line-height: normal; margin-left: -16px; } .study-title__input::placeholder { font-size: inherit; } .study-title__label { width: 100%; } .study-title__workspace { align-items: center; display: flex; } .title-editor { color: var(--title-editor-text); display: inline-block; font-size: var(--t-xl); font-weight: var(--t-heavy); height: 34px; } @keyframes fade-in { from { opacity: 0; } } @keyframes fade-out { to { opacity: 0; } } @keyframes scale { from { transform: scale(0.2); } to { transform: scale(1); } } /* Apply these styles only if the view transitions API is supported */ @supports (view-transition-name: none) { ::view-transition-old(root) { animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out; } ::view-transition-new(root) { animation: 310ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 400ms cubic-bezier(0.4, 0, 0.2, 1) both scale; } } tk-list[flush=""] tk-list-row, tk-list[flush=true] tk-list-row { border-top: var(--list-row-border-first); border-bottom: var(--list-row-border); } tk-list[flush=""] tk-list-row:first-of-type, tk-list[flush=true] tk-list-row:first-of-type { border-radius: var(--list-row-radius) var(--list-row-radius) 0 0; border: var(--list-row-border); } tk-list[flush=""] tk-list-header ~ tk-list-row:first-of-type, tk-list[flush=true] tk-list-header ~ tk-list-row:first-of-type { --list-row-radius: 0; border-top: var(--list-row-border-first); border-right: var(--list-row-border); border-bottom: var(--list-row-border); border-left: var(--list-row-border); } tk-list[flush=""] tk-list-row:last-of-type, tk-list[flush=true] tk-list-row:last-of-type, tk-list[flush=""] tk-list-header ~ tk-list-row:last-of-type, tk-list[flush=true] tk-list-header ~ tk-list-row:last-of-type { border-top: var(--list-row-border-first); border-right: var(--list-row-border); border-bottom: var(--list-row-border); border-left: var(--list-row-border); border-radius: 0 0 var(--list-row-radius) var(--list-row-radius); } [slot=row-body] { --indicator-text: var(--t-base); } [slot=row-body] p { margin-bottom: 0; } [slot=row-body] .row-title { font-size: var(--list-row-title-text-size); } [slot=row-body] .row-subtitle { color: var(--ghost-text-color); font-size: var(--list-row-subtitle-text-size); } tk-list-row[is-selected=""] .row-subtitle, tk-list-row[is-selected=true] .row-subtitle { color: var(--text-color); } tk-list-columns [start="1"] { grid-column-start: 1; } tk-list-row [start="1"] { grid-column-start: body-1; } tk-list [span="1"] { grid-column-end: span 1; } tk-list-columns [start="2"] { grid-column-start: 2; } tk-list-row [start="2"] { grid-column-start: body-2; } tk-list [span="2"] { grid-column-end: span 2; } tk-list-columns [start="3"] { grid-column-start: 3; } tk-list-row [start="3"] { grid-column-start: body-3; } tk-list [span="3"] { grid-column-end: span 3; } tk-list-columns [start="4"] { grid-column-start: 4; } tk-list-row [start="4"] { grid-column-start: body-4; } tk-list [span="4"] { grid-column-end: span 4; } tk-list-columns [start="5"] { grid-column-start: 5; } tk-list-row [start="5"] { grid-column-start: body-5; } tk-list [span="5"] { grid-column-end: span 5; } tk-list-columns [start="6"] { grid-column-start: 6; } tk-list-row [start="6"] { grid-column-start: body-6; } tk-list [span="6"] { grid-column-end: span 6; } tk-list-columns [start="7"] { grid-column-start: 7; } tk-list-row [start="7"] { grid-column-start: body-7; } tk-list [span="7"] { grid-column-end: span 7; } tk-list-columns [start="8"] { grid-column-start: 8; } tk-list-row [start="8"] { grid-column-start: body-8; } tk-list [span="8"] { grid-column-end: span 8; } tk-list-columns [start="9"] { grid-column-start: 9; } tk-list-row [start="9"] { grid-column-start: body-9; } tk-list [span="9"] { grid-column-end: span 9; } tk-list-columns [start="10"] { grid-column-start: 10; } tk-list-row [start="10"] { grid-column-start: body-10; } tk-list [span="10"] { grid-column-end: span 10; } tk-list-columns [start="11"] { grid-column-start: 11; } tk-list-row [start="11"] { grid-column-start: body-11; } tk-list [span="11"] { grid-column-end: span 11; } .list--conversation { display: flex; flex-direction: column; list-style: none; margin: 0 auto; } .list-cell--conversation { margin: 0.15rem 0; max-width: 80%; } .list-cell.not-you, .list-cell--recipient { align-self: flex-start; } .list-cell.is-you, .list-cell--sender { align-self: flex-end; text-align: right; } .message-author { font-size: var(--t-small); max-width: 12rem; } .is-you .message-author, .list-cell--sender .message-author { text-align: right; } .message-author__username { font-weight: var(--t-heavy); } .message-bubble { background-color: var(--message-bubble-bg); border-radius: 1.5em; display: inline-flex; flex-direction: column; padding: 0.4em 1.3em; position: relative; } .message-bubble p { font-size: var(--t-small); margin: 0 0 1rem 0; text-align: left; } .message-bubble p:only-of-type { margin: 0; } .message-bubble a, .message-bubble p { word-break: break-all; word-break: break-word; } .message-bubble::before, .message-bubble::after { bottom: -2px; content: " "; height: 20px; position: absolute; } .message-bubble::before { -webkit-transform: translate(0, -2px); -moz-transform: translate(0, -2px); -ms-transform: translate(0, -2px); -o-transform: translate(0, -2px); transform: translate(0, -2px); } .message-bubble::after { -webkit-transform: translate(-30px, -2px); -moz-transform: translate(-30px, -2px); -ms-transform: translate(-30px, -2px); -o-transform: translate(-30px, -2px); transform: translate(-30px, -2px); background: var(--interface-white); width: 26px; } .is-you .message-bubble, .message-bubble--sender { --message-bubble-bg: var(--interface-primary); color: var(--interface-white); } .is-you .message-bubble::before, .message-bubble--sender::before { border-bottom-left-radius: 16px 14px; border-right: 20px solid var(--message-bubble-bg); right: -7px; z-index: 1; } .is-you .message-bubble::after, .message-bubble--sender::after { border-bottom-left-radius: 10px; right: -56px; z-index: 2; } .is-you .message-bubble a, .message-bubble--sender a { color: var(--interface-white); text-decoration: underline; } .not-you .message-bubble::before, .message-bubble--recipient::before { border-bottom-right-radius: 16px 14px; border-left: 20px solid var(--message-bubble-bg); left: -7px; z-index: 2; } .not-you .message-bubble::after, .message-bubble--recipient::after { border-bottom-right-radius: 10px; left: 4px; z-index: 3; } .modal { display: none; inset: 0; outline: 0; overflow: hidden; -webkit-overflow-scrolling: touch; position: fixed; z-index: var(--z-index-modal); } .modal.show { display: block; } .fancybox-wrap { background: #fff; border-radius: var(--border-radius); } /* stylelint-disable-next-line selector-id-pattern */ #fancybox-overlay, .modal-backdrop { background-color: var(--interface-black); inset: 0; position: fixed; z-index: calc(var(--z-index-modal) - 1) !important; } #fancybox-overlay.fade, .modal-backdrop.fade { opacity: 0; } #fancybox-overlay.show, #fancybox-overlay.in, .modal-backdrop.show, .modal-backdrop.in { opacity: 0.5; } .fancybox-close { background: none; right: 15px; top: -10px; } .popover-close-x { box-shadow: none; box-sizing: border-box; cursor: pointer; font: inherit; margin: 0; text-align: center; text-shadow: none; white-space: nowrap; background: transparent; border: none; color: var(--interface-secondary-light); display: block; font-size: 3.25rem; padding: 0; } .popover-close { position: absolute; right: 20px; top: 0; } .modal.fade .modal-dialog { -webkit-transform: translate(0, -25%); -moz-transform: translate(0, -25%); -ms-transform: translate(0, -25%); -o-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: transform 0.3s ease-out; -moz-transition: transform 0.3s ease-out; -ms-transition: transform 0.3s ease-out; -o-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; } .modal.show .modal-dialog, .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .modal-dialog { margin: 1rem; position: relative; width: auto; } .modal-open { overflow-y: auto; } .modal-open .modal { overflow-x: hidden; overflow-y: auto; } .modal-content { background-clip: padding-box; background-color: var(--interface-white); border-radius: var(--border-radius); outline: 0; position: relative; } .modal-body { padding: 15px; position: relative; } .modal-body--scroll { max-height: 400px; max-height: 70vh; overflow-y: auto; } .modal__header { background-color: var(--modal-header-bg); border-radius: var(--border-radius); color: var(--text-color); font-size: var(--t-base); font-weight: var(--t-heavy); padding: var(--s-medium); } .modal__footer { border-top: var(--modal-footer-border); padding: var(--s-large); } .modal-btn-group { display: flex; justify-content: flex-end; } .modal-dialog, .modal--small:not(.fade), .modal--med:not(.fade), .modal--large:not(.fade) { max-width: 90%; } @media (max-width: 45em) { .popover-close { right: 10px; } .popover-close-x { font-size: 2rem; } .modal-btn-group { justify-content: center; } } @media (min-width: 45em) { .modal-dialog { margin: 2.5rem auto; } .modal--small:not(.fade), .modal--small .modal-dialog { max-width: var(--container-small); } .modal-dialog, .modal--med:not(.fade) { max-width: var(--container-medium); } .modal--large:not(.fade), .modal--large .modal-dialog { max-width: var(--container-xl); } .modal-body { padding: var(--s-large); } .modal__header { padding: var(--s-large); } } @media (min-width: 60em) { .modal--large { max-width: 960px; } } [slot=legend] { font-weight: bold; padding: 0; } .nav-bar__logo { grid-area: 1/control/1/control; } @media (min-width: 60em) { .nav-bar__logo { grid-area: logo; } } .nav-bar__control { grid-area: control; } .nav-bar__body { grid-area: body; } .nav-bar__navigation { grid-area: navigation; } .nav-bar__actions { grid-area: actions; } .nav-bar__subnav { grid-area: subnav; } .header { width: 100%; } .header--global { align-content: stretch; align-items: center; background-color: var(--header-bg); display: flex; justify-content: flex-start; padding: var(--s-medium) 0; } .header--employee { background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(0, 0, 0, 0.15) 35px, rgba(0, 0, 0, 0.15) 70px); } .header__logo { --logo-fill-ut-bubble: var(--header-logo-fill); --logo-fill-ut-testing: var(--header-logo-fill); --logo-fill-ut-u: var(--header-logo-fill); --logo-fill-ut-user: var(--header-bg); --logo-height: 34px; } .header__icon { color: var(--header-text); } .site-subheader { background-color: var(--subheader-bg); box-shadow: var(--subheader-box-shadow); padding: 0; } .site-subheader__wrapper { align-items: center; display: flex; } .nav { align-items: center; display: flex; justify-content: space-between; width: 100%; } .nav li { list-style: none; } .breadcrumbs { align-content: center; align-items: center; display: flex; justify-content: flex-start; } .breadcrumbs__item { display: flex; padding: 0 8px; } .breadcrumbs__separator { padding: 0; } .breadcrumbs__text, .breadcrumbs__link { color: var(--breadcrumbs-text); font-size: var(--breadcrumbs-text-size); } .breadcrumbs__text:first-child, .breadcrumbs__link:first-child { padding-left: 0; } .breadcrumbs__link:hover, .breadcrumbs__link:focus { color: var(--breadcrumbs-text-hover); text-decoration: none; } .breadcrumbs__icon { color: var(--breadcrumbs-icon); font-size: var(--t-small); opacity: 0.5; padding: 0 var(--s-small); } .breadcrumbs__link .small-hide, .breadcrumbs__link .username { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 5em; } tk-sidebar tk-logo-usertesting { --logo-height: 34px; } tk-sidebar[variant=page] tk-dropdown { --tk-dropdown-button-max-width: 32px; align-self: center; grid-area: options_button; max-width: var(--tk-dropdown-button-max-width); } .page-sidebar { --header-height: 110px; } .page-sidebar-offset { --header-height: 110px; margin-top: calc(var(--header-height) + var(--page-sidebar-collapser-height)); overflow-y: scroll; } /* stylelint-disable-next-line media-query-no-invalid */ @media (max-width: 45em) { .site-subheader { overflow-x: auto; } .study-subheader__tabs, .site-subheader__tabs { align-items: center; display: flex; } .study-subheader__tabs::before, .study-subheader__tabs::after, .site-subheader__tabs::before, .site-subheader__tabs::after { content: ""; height: 50px; pointer-events: none; position: absolute; width: 5%; z-index: var(--z-index-dropdown); } .study-subheader__tabs::before, .site-subheader__tabs::before { background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.25), var(--subheader-bg)); left: 0; } .study-subheader__tabs::after, .site-subheader__tabs::after { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.25), var(--subheader-bg)); right: 0; } } @media (min-width: 60em) { .page-sidebar { --header-height: 74px; } .sidebar-offset { margin-left: var(--sidebar-nav-offset); } .page-sidebar-offset { --header-height: 74px; margin-left: var(--page-sidebar-nav-offset); } } /* stylelint-disable-next-line media-query-no-invalid */ @media (min-width: 60em) and (max-width: 66em) { .breadcrumbs__link .username, .breadcrumbs__link .small-hide { max-width: 7em; } } /* stylelint-disable-next-line media-query-no-invalid */ @media (min-width: 80em) { .breadcrumbs__link { max-width: none; } .breadcrumbs__link * { max-width: 20em; } } .pagination { font-size: 1em; line-height: 1.5em; } .pagination__text--prev, .pagination__text--next { margin: 0 var(--s-small); } .pagination__item { background: var(--pagination-item-bg); border: var(--pagination-item-border); display: inline-flex; } .pagination__item--current { --pagination-item-bg: var(--interface-primary-x-light); --pagination-item-border: 1px solid var(--interface-primary); cursor: default; font-weight: var(--t-regular); } .pagination__item--current, .pagination__link, .pagination__gap { border-radius: var(--border-radius); display: inline-block; font-size: var(--t-small); } .pagination__item--current, .pagination__link { height: 32px; line-height: 32px; padding: 0; text-align: center; width: 32px; } .pagination__link, .pagination__gap { background: var(--pagination-btn-bg); border: var(--pagination-btn-border); color: var(--pagination-btn-text-color); } .pagination__link:hover, .pagination__gap:hover { --pagination-btn-bg: var(--interface-secondary-x-light); --pagination-btn-text-color: var(--text-color); } .pagination__text { font-size: var(--t-base); } .pagination__text:hover { text-decoration: underline; } .pagination__gap { padding: 0 var(--s-small); } .top > .arrow { border: 10px solid transparent; border-top-width: 0; border-bottom-color: var(--interface-white); display: block; height: 0; position: absolute; width: 0; top: 100%; right: calc(50% - 10px); transform: rotate(180deg); } .bottom > .arrow { border: 10px solid transparent; border-top-width: 0; border-bottom-color: var(--interface-white); display: block; height: 0; position: absolute; width: 0; bottom: 100%; right: calc(50% - 10px); } .right > .arrow { border: 10px solid transparent; border-top-width: 0; border-bottom-color: var(--interface-white); display: block; height: 0; position: absolute; width: 0; right: calc(100% - 5px); top: calc(50% - 5px); transform: rotate(-90deg); } .left > .arrow { border: 10px solid transparent; border-top-width: 0; border-bottom-color: var(--interface-white); display: block; height: 0; position: absolute; width: 0; left: calc(100% - 5px); top: calc(50% - 5px); transform: rotate(90deg); } .popover { background-color: var(--interface-white); background-clip: padding-box; border-radius: var(--border-radius); box-shadow: var(--box-shadow-heavy); display: none; left: 0; padding: 16px; position: absolute; top: 0; z-index: var(--z-index-popover); } .popover.bottom { margin-top: 10px; } @media (max-width: 45em) { .popover { margin-left: auto; margin-right: auto; width: 90%; } } @media (min-width: 45em) { .popover.top, .popover.left { margin-top: -10px; } .popover.right { margin-left: 10px; } } tk-v2-popover { display: none; } tk-v2-popover[context=modal].is-opened { display: block; } tk-search-overlay-section [slot=header] { margin: var(--search-overlay-section-header-margin); } .search { --search-height: auto; display: flex; height: var(--search-height); justify-content: flex-end; padding: 0; width: 100%; } .search__button { border-left: none; border-radius: 0 var(--border-radius) var(--border-radius) 0; flex-shrink: 0; } .form-input:focus ~ .search__button { background-color: var(--interface-primary); border-color: var(--interface-primary); color: white; } .input--search { -webkit-appearance: none; appearance: none; background: white; border: var(--input-field-border-width) solid var(--input-field-border-color); border-radius: var(--border-radius) 0 0 var(--border-radius); border-right: none; box-shadow: none; box-sizing: border-box; font-family: var(--t-font-stack); font-size: var(--t-small); font-weight: var(--t-regular); padding: var(--input-field-padding); width: 100%; } .input--search:focus, .input--search.form-input--focused { --input-field-border-color: var(--interface-primary); outline: none; } .input--search:empty:focus::before { content: none; display: block; } .input--search:empty::before { color: var(--ghost-text-color); content: attr(placeholder); display: block; } .input--search::-webkit-search-decoration, .input--search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } [slot=slider-min], [slot=slider-max] { margin-top: var(--s-large); } .split-view { overflow-wrap: break-word; word-wrap: break-word; background: #fff; box-shadow: var(--box-shadow); display: block; margin-bottom: 24px; } .split-view--stacked { display: block; } .split-view .table, .single-study__panel table { box-shadow: none; } .single-study__panel { background-color: #fff; box-shadow: var(--box-shadow); margin-bottom: 24px; } .split-view__heading { font-size: var(--t-medium); font-weight: var(--t-heavy); margin-bottom: var(--s-medium); } .split-view__description { background-color: #dde0e4; } .split-view__data .table td, .split-view__data .table .table__header { height: 100%; padding: var(--s-small) 0; vertical-align: top; } .split-view__data, .split-view__description { padding: 16px; width: 100%; } .split-view__text { margin-bottom: 32px; } .split-view__group { border-bottom: var(--split-view-group-border-bottom); margin-bottom: 16px; padding-bottom: 16px; } .split-view__group:last-child { --split-view-group-border-bottom: none; } .table--lined { border-collapse: separate; border-spacing: 0; vertical-align: middle; width: 100%; } .table--lined td { border-bottom: var(--table-header-border-bottom); padding-left: 0; padding-right: 0; } .table__value { font-size: var(--t-small); text-align: right; } @media (min-width: 45em) { .split-view { display: flex; } .split-view__description { width: 35%; } .split-view__data { width: 65%; } .split-view--stacked { display: block; } .split-view--stacked .split-view__description, .split-view--stacked .split-view__data { width: 100%; } } .table { box-shadow: var(--box-shadow); margin: 0; } .table-wrapper { width: 100%; } .table__header, .table td { padding: 16px; } .table td { font-size: var(--t-small); } .table--nested { box-shadow: 0; } .table--stripe td { background-color: var(--table-bg-color); border-bottom: var(--table-border-bottom); } .table--stripe tr:nth-child(odd) td { --table-bg-color: var( --body-bg-offset ); } .table--stripe tr:last-child td { --table-border-bottom: none; } .table__header { background-color: var(--table-header-bg-color); border-bottom: var(--table-header-border-bottom); font-size: var(--t-base); font-weight: var(--t-heavy); } .table__header:last-of-type { border-right: none; } .is-new td, .table--stripe .is-new:nth-child(odd) td { --table-bg-color: var(--interface-highlight-x-light); font-weight: var(--t-heavy); } @media (max-width: 60em) { .table-wrapper { overflow-y: auto; } } @media (max-width: 45em) { .tabs-container__wrapper { max-width: none; } } tk-tab-button:first-child, tk-tab-subheader:first-child + tk-tab-button, tk-tab-divider:first-child + tk-tab-button, tk-tab-link:first-child, tk-tab-subheader:first-child + tk-tab-link, tk-tab-divider:first-child + tk-tab-link { grid-column: 1; grid-row: 1; } .tag { background-color: var(--tag-bg-color); border-radius: var(--border-radius); color: var(--tag-text-color); font-size: var(--tag-text-size); font-weight: var(--t-heavy); line-height: 1; padding: var(--tag-spacing); } .tag--xs { --tag-spacing: var(--tag-spacing-xs); } .tag--xs, .tag--small { --tag-text-size: var(--tag-text-size-small); } .tag:disabled { --tag-bg-color: var(--interface-secondary-xx-light); --tag-text-color: var(--interface-secondary-light); } tk-v2-tooltip { display: inline-block; } @supports (position-area: block-start) { tk-v2-tooltip { --tooltip-v2-z-index: 1; } tk-v2-tooltip [slot=tooltip-v2-trigger] { anchor-name: var(--anchor-name); } } tk-v2-tooltip[context=modal] { --tooltip-v2-position: fixed; } tk-v2-tooltip-body { opacity: 0; } tk-v2-tooltip-body[open]:not([open=false]) { opacity: 1; } .typeahead { background-color: var(--typeahead-bg); width: 100%; } .typeahead__input { -webkit-appearance: none; appearance: none; box-shadow: none; box-sizing: border-box; background-color: transparent; outline: none; } .typeahead__input:-ms-input-placeholder { color: var(--ghost-text-color); font-size: var(--t-small); } .typeahead__input::placeholder { color: var(--ghost-text-color); font-size: var(--t-small); opacity: 1; } .typeahead__input.single { width: 100%; } .typeahead__selectable { display: block; } .typeahead__results { margin-top: var(--s-medium); position: absolute; width: inherit; width: max-content; width: -moz-max-content; width: -webkit-max-content; } .typeahead__wrap { background-color: var(--typeahead-wrap-bg); border-radius: var(--border-radius); box-shadow: var(--box-shadow-heavy); box-sizing: content-box; left: 0; max-height: 400px; min-width: 200px; min-width: -moz-max-content; min-width: -webkit-max-content; min-width: max-content; overflow-y: auto; position: absolute; width: 100%; z-index: var(--z-index-popover); } .typeahead__list { list-style: none; padding: 0; width: 100%; } .typeahead__item { border-bottom: var(--typeahead-item-border-bottom); } .typeahead__item:last-child { --typeahead-item-border-bottom: none; } .typeahead__option { box-shadow: none; box-sizing: border-box; cursor: pointer; font: inherit; margin: 0; text-align: center; text-shadow: none; white-space: nowrap; background-color: var(--typeahead-option-bg); color: var(--typeahead-option-text-color); font-size: var(--t-small); padding: var(--s-small); text-align: left; width: 100%; } .typeahead__option:hover, .typeahead__option:focus { --typeahead-option-bg: var(--typeahead-option-bg-color-hover); } html { font-family: var(--t-font-stack); font-size: var(--t-base); font-size: initial; font-weight: var(--t-regular); } body { color: var(--text-color); } strong { font-weight: var(--t-heavy); } em { font-style: italic; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } p { margin: 0 0 1.5em 0; } p:last-child { margin-bottom: 0; } .wrap-text { overflow-wrap: break-word; word-wrap: break-word; width: 100%; } .title, .t-xl { font-size: var(--t-xl); } h1, .headline, .t-large { font-size: var(--t-large); font-weight: var(--t-regular); } h2, h3, h4, .subheadline, .t-medium { font-size: var(--t-medium); font-weight: var(--t-heavy); } h5, h6 { font-family: var(--t-font-stack); font-size: var(--t-base); font-weight: var(--t-regular); } a, li, dt, dd, p, .paragraph, .t-small { font-size: var(--t-small); } .t-base { font-size: var(--t-base); font-weight: var(--t-regular); } .ghost-text, .t-ghost { color: var(--ghost-text-color); font-size: var(--t-small); } .t-ghost-small { color: var(--ghost-text-color); font-size: var(--t-small); } .caption { font-size: var(--t-small); } .horizontal-rule { border: none; border-top: var(--t-rule); margin-bottom: 24px; margin-top: 24px; } .t-heavy { font-weight: var(--t-heavy); } .t-normal { font-weight: var(--t-regular); } .t-sentence-case::first-letter { text-transform: uppercase; } .t-center { text-align: center; } .t-left { text-align: left; } .t-right { text-align: right; } .t-nowrap { white-space: nowrap; } .t-dangerous, .error, .error-text, .form__label--error, .red-text { color: var(--t-error); } .t-tabular-alignment { font-variant-numeric: tabular-nums; } .t-truncate-1x { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .t-truncate-2x { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .t-truncate-3x { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .t-truncate-4x { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .t-truncate-wrapped-1x { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; } .t-truncate-wrapped-2x { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; } .t-truncate-wrapped-3x { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all; } .t-truncate-wrapped-4x { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; word-break: break-all; } .bulleted-list, .numbered-list { padding-left: var(--s-medium); } .bulleted-list > li { list-style: disc; } .numbered-list > li { list-style: decimal; } .pipe-delimited-list > li { border-right: 1px solid var(--interface-midnight-x-light); display: inline; list-style: none; margin-right: var(--s-small); padding-right: var(--s-small); } .pipe-delimited-list > li:last-child { border-right: none; margin-right: 0; padding-right: 0; } .pipe-delimited-list > li::before { content: " "; font-size: 0; } .subheadline ~ .bulleted-list { margin-bottom: var(--s-medium); } .list--numbered > li { list-style: decimal; margin-left: var(--s-medium); } .list--bulleted > li { list-style: disc; margin-left: var(--s-medium); } .definition-list, .definition-list dt, .definition-list dd { margin: 0; } .keyboard-shortcut { background: var(--keyboard-shortcut-bg); border: var(--keyboard-shortcut-border); border-radius: var(--border-radius); box-shadow: var(--box-shadow); display: inline-block; font-family: var(--t-font-stack); font-weight: var(--t-heavy); padding: var(--s-xs) var(--s-small); } .tooltip__link { border-bottom: 1px solid var(--tooltip-text-color); color: var(--tooltip-text-color); } @media (min-width: 60em) { html { font-size: var(--t-base); } } .user-notifications { align-items: center; display: flex; position: relative; } .notification__body--wrapper { flex-wrap: wrap; max-width: 95%; } .user-notifications__indicator { background: var(--header-bg); -webkit-clip-path: circle(6px at center); clip-path: circle(6px at center); margin-left: -2px; margin-top: -4px; padding: var(--s-xs) 0 var(--s-xs) var(--s-xs); position: absolute; } .user-notifications__empty { padding: var(--s-xl) var(--s-medium); text-align: center; } .notification__item { border-bottom: var(--user-notification-item-border-bottom); display: flex; flex-wrap: wrap; padding: var(--s-small) 0; position: relative; } .notification__item:last-child { border-bottom: none; } .notification__header { align-items: baseline; display: flex; flex-wrap: wrap; } .notification__title { font-size: var(--t-small); font-weight: var(--t-heavy); margin-bottom: var(--s-xs); margin-right: var(--s-small); } .notification__post-date { flex-shrink: 0; margin-bottom: var(--s-xs); width: 100%; } .notification__body { flex-basis: 100%; margin: 0; } .ut-banner-link { color: var(--colorTypographyLinkDefault); font-size: var(--sizeSizeMd); line-height: var(--lineHeightLineHeightMd); letter-spacing: var(--letterSpacingLetterSpacingTight); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } /* stylelint-disable scss/dollar-variable-pattern */ /* stylelint-disable scss/dollar-variable-pattern */ /* stylelint-disable max-line-length, scss/dollar-variable-pattern */ /* stylelint-disable-next-line scss/at-mixin-pattern */ /* stylelint-disable-next-line scss/at-mixin-pattern */ /* stylelint-disable-next-line scss/at-mixin-pattern */ /* stylelint-disable-next-line scss/at-mixin-pattern */ /* stylelint-disable-next-line scss/at-mixin-pattern */ .no-padding { padding: 0; } .m-auto { margin: auto; } .mh-auto { margin-left: auto; margin-right: auto; } .mv-auto { margin-bottom: auto; margin-top: auto; } .mb-auto { margin-bottom: auto; } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } .mt-auto { margin-top: auto; } .m-0x { margin: 0; } .mh-0x { margin-left: 0; margin-right: 0; } .mv-0x { margin-bottom: 0; margin-top: 0; } .mb-0x { margin-bottom: 0; } .ml-0x { margin-left: 0; } .mr-0x { margin-right: 0; } .mt-0x { margin-top: 0; } .m-1x { margin: var(--s-xs); } .mh-1x { margin-left: var(--s-xs); margin-right: var(--s-xs); } .mv-1x { margin-bottom: var(--s-xs); margin-top: var(--s-xs); } .mb-1x { margin-bottom: var(--s-xs); } .ml-1x { margin-left: var(--s-xs); } .mr-1x { margin-right: var(--s-xs); } .mt-1x { margin-top: var(--s-xs); } .m-2x { margin: var(--s-small); } .mh-2x { margin-left: var(--s-small); margin-right: var(--s-small); } .mv-2x { margin-bottom: var(--s-small); margin-top: var(--s-small); } .mb-2x { margin-bottom: var(--s-small); } .ml-2x { margin-left: var(--s-small); } .mr-2x { margin-right: var(--s-small); } .mt-2x { margin-top: var(--s-small); } .m-3x { margin: var(--s-medium); } .mh-3x { margin-left: var(--s-medium); margin-right: var(--s-medium); } .mv-3x { margin-bottom: var(--s-medium); margin-top: var(--s-medium); } .mb-3x { margin-bottom: var(--s-medium); } .ml-3x { margin-left: var(--s-medium); } .mr-3x { margin-right: var(--s-medium); } .mt-3x { margin-top: var(--s-medium); } .m-4x { margin: var(--s-large); } .mh-4x { margin-left: var(--s-large); margin-right: var(--s-large); } .mv-4x { margin-bottom: var(--s-large); margin-top: var(--s-large); } .mb-4x { margin-bottom: var(--s-large); } .ml-4x { margin-left: var(--s-large); } .mr-4x { margin-right: var(--s-large); } .mt-4x { margin-top: var(--s-large); } .m-5x { margin: var(--s-xl); } .mh-5x { margin-left: var(--s-xl); margin-right: var(--s-xl); } .mv-5x { margin-bottom: var(--s-xl); margin-top: var(--s-xl); } .mb-5x { margin-bottom: var(--s-xl); } .ml-5x { margin-left: var(--s-xl); } .mr-5x { margin-right: var(--s-xl); } .mt-5x { margin-top: var(--s-xl); } .m-6x { margin: var(--s-2xl); } .mh-6x { margin-left: var(--s-2xl); margin-right: var(--s-2xl); } .mv-6x { margin-bottom: var(--s-2xl); margin-top: var(--s-2xl); } .mb-6x { margin-bottom: var(--s-2xl); } .ml-6x { margin-left: var(--s-2xl); } .mr-6x { margin-right: var(--s-2xl); } .mt-6x { margin-top: var(--s-2xl); } .m-7x { margin: var(--s-3xl); } .mh-7x { margin-left: var(--s-3xl); margin-right: var(--s-3xl); } .mv-7x { margin-bottom: var(--s-3xl); margin-top: var(--s-3xl); } .mb-7x { margin-bottom: var(--s-3xl); } .ml-7x { margin-left: var(--s-3xl); } .mr-7x { margin-right: var(--s-3xl); } .mt-7x { margin-top: var(--s-3xl); } .m-8x { margin: var(--s-4xl); } .mh-8x { margin-left: var(--s-4xl); margin-right: var(--s-4xl); } .mv-8x { margin-bottom: var(--s-4xl); margin-top: var(--s-4xl); } .mb-8x { margin-bottom: var(--s-4xl); } .ml-8x { margin-left: var(--s-4xl); } .mr-8x { margin-right: var(--s-4xl); } .mt-8x { margin-top: var(--s-4xl); } .m-9x { margin: var(--s-5xl); } .mh-9x { margin-left: var(--s-5xl); margin-right: var(--s-5xl); } .mv-9x { margin-bottom: var(--s-5xl); margin-top: var(--s-5xl); } .mb-9x { margin-bottom: var(--s-5xl); } .ml-9x { margin-left: var(--s-5xl); } .mr-9x { margin-right: var(--s-5xl); } .mt-9x { margin-top: var(--s-5xl); } .m-10x { margin: var(--s-6xl); } .mh-10x { margin-left: var(--s-6xl); margin-right: var(--s-6xl); } .mv-10x { margin-bottom: var(--s-6xl); margin-top: var(--s-6xl); } .mb-10x { margin-bottom: var(--s-6xl); } .ml-10x { margin-left: var(--s-6xl); } .mr-10x { margin-right: var(--s-6xl); } .mt-10x { margin-top: var(--s-6xl); } @media (max-width: 45em) { .m-sm-auto { margin: auto; } .mh-sm-auto { margin-left: auto; margin-right: auto; } .mv-sm-auto { margin-bottom: auto; margin-top: auto; } .mb-sm-auto { margin-bottom: auto; } .ml-sm-auto { margin-left: auto; } .mr-sm-auto { margin-right: auto; } .mt-sm-auto { margin-top: auto; } .m-sm-0x { margin: 0; } .mh-sm-0x { margin-left: 0; margin-right: 0; } .mv-sm-0x { margin-bottom: 0; margin-top: 0; } .mb-sm-0x { margin-bottom: 0; } .ml-sm-0x { margin-left: 0; } .mr-sm-0x { margin-right: 0; } .mt-sm-0x { margin-top: 0; } .m-sm-1x { margin: var(--s-xs); } .mh-sm-1x { margin-left: var(--s-xs); margin-right: var(--s-xs); } .mv-sm-1x { margin-bottom: var(--s-xs); margin-top: var(--s-xs); } .mb-sm-1x { margin-bottom: var(--s-xs); } .ml-sm-1x { margin-left: var(--s-xs); } .mr-sm-1x { margin-right: var(--s-xs); } .mt-sm-1x { margin-top: var(--s-xs); } .m-sm-2x { margin: var(--s-small); } .mh-sm-2x { margin-left: var(--s-small); margin-right: var(--s-small); } .mv-sm-2x { margin-bottom: var(--s-small); margin-top: var(--s-small); } .mb-sm-2x { margin-bottom: var(--s-small); } .ml-sm-2x { margin-left: var(--s-small); } .mr-sm-2x { margin-right: var(--s-small); } .mt-sm-2x { margin-top: var(--s-small); } .m-sm-3x { margin: var(--s-medium); } .mh-sm-3x { margin-left: var(--s-medium); margin-right: var(--s-medium); } .mv-sm-3x { margin-bottom: var(--s-medium); margin-top: var(--s-medium); } .mb-sm-3x { margin-bottom: var(--s-medium); } .ml-sm-3x { margin-left: var(--s-medium); } .mr-sm-3x { margin-right: var(--s-medium); } .mt-sm-3x { margin-top: var(--s-medium); } .m-sm-4x { margin: var(--s-large); } .mh-sm-4x { margin-left: var(--s-large); margin-right: var(--s-large); } .mv-sm-4x { margin-bottom: var(--s-large); margin-top: var(--s-large); } .mb-sm-4x { margin-bottom: var(--s-large); } .ml-sm-4x { margin-left: var(--s-large); } .mr-sm-4x { margin-right: var(--s-large); } .mt-sm-4x { margin-top: var(--s-large); } .m-sm-5x { margin: var(--s-xl); } .mh-sm-5x { margin-left: var(--s-xl); margin-right: var(--s-xl); } .mv-sm-5x { margin-bottom: var(--s-xl); margin-top: var(--s-xl); } .mb-sm-5x { margin-bottom: var(--s-xl); } .ml-sm-5x { margin-left: var(--s-xl); } .mr-sm-5x { margin-right: var(--s-xl); } .mt-sm-5x { margin-top: var(--s-xl); } .m-sm-6x { margin: var(--s-2xl); } .mh-sm-6x { margin-left: var(--s-2xl); margin-right: var(--s-2xl); } .mv-sm-6x { margin-bottom: var(--s-2xl); margin-top: var(--s-2xl); } .mb-sm-6x { margin-bottom: var(--s-2xl); } .ml-sm-6x { margin-left: var(--s-2xl); } .mr-sm-6x { margin-right: var(--s-2xl); } .mt-sm-6x { margin-top: var(--s-2xl); } .m-sm-7x { margin: var(--s-3xl); } .mh-sm-7x { margin-left: var(--s-3xl); margin-right: var(--s-3xl); } .mv-sm-7x { margin-bottom: var(--s-3xl); margin-top: var(--s-3xl); } .mb-sm-7x { margin-bottom: var(--s-3xl); } .ml-sm-7x { margin-left: var(--s-3xl); } .mr-sm-7x { margin-right: var(--s-3xl); } .mt-sm-7x { margin-top: var(--s-3xl); } .m-sm-8x { margin: var(--s-4xl); } .mh-sm-8x { margin-left: var(--s-4xl); margin-right: var(--s-4xl); } .mv-sm-8x { margin-bottom: var(--s-4xl); margin-top: var(--s-4xl); } .mb-sm-8x { margin-bottom: var(--s-4xl); } .ml-sm-8x { margin-left: var(--s-4xl); } .mr-sm-8x { margin-right: var(--s-4xl); } .mt-sm-8x { margin-top: var(--s-4xl); } .m-sm-9x { margin: var(--s-5xl); } .mh-sm-9x { margin-left: var(--s-5xl); margin-right: var(--s-5xl); } .mv-sm-9x { margin-bottom: var(--s-5xl); margin-top: var(--s-5xl); } .mb-sm-9x { margin-bottom: var(--s-5xl); } .ml-sm-9x { margin-left: var(--s-5xl); } .mr-sm-9x { margin-right: var(--s-5xl); } .mt-sm-9x { margin-top: var(--s-5xl); } .m-sm-10x { margin: var(--s-6xl); } .mh-sm-10x { margin-left: var(--s-6xl); margin-right: var(--s-6xl); } .mv-sm-10x { margin-bottom: var(--s-6xl); margin-top: var(--s-6xl); } .mb-sm-10x { margin-bottom: var(--s-6xl); } .ml-sm-10x { margin-left: var(--s-6xl); } .mr-sm-10x { margin-right: var(--s-6xl); } .mt-sm-10x { margin-top: var(--s-6xl); } } @media (min-width: 45em) { .m-md-auto { margin: auto; } .mh-md-auto { margin-left: auto; margin-right: auto; } .mv-md-auto { margin-bottom: auto; margin-top: auto; } .mb-md-auto { margin-bottom: auto; } .ml-md-auto { margin-left: auto; } .mr-md-auto { margin-right: auto; } .mt-md-auto { margin-top: auto; } .m-md-0x { margin: 0; } .mh-md-0x { margin-left: 0; margin-right: 0; } .mv-md-0x { margin-bottom: 0; margin-top: 0; } .mb-md-0x { margin-bottom: 0; } .ml-md-0x { margin-left: 0; } .mr-md-0x { margin-right: 0; } .mt-md-0x { margin-top: 0; } .m-md-1x { margin: var(--s-xs); } .mh-md-1x { margin-left: var(--s-xs); margin-right: var(--s-xs); } .mv-md-1x { margin-bottom: var(--s-xs); margin-top: var(--s-xs); } .mb-md-1x { margin-bottom: var(--s-xs); } .ml-md-1x { margin-left: var(--s-xs); } .mr-md-1x { margin-right: var(--s-xs); } .mt-md-1x { margin-top: var(--s-xs); } .m-md-2x { margin: var(--s-small); } .mh-md-2x { margin-left: var(--s-small); margin-right: var(--s-small); } .mv-md-2x { margin-bottom: var(--s-small); margin-top: var(--s-small); } .mb-md-2x { margin-bottom: var(--s-small); } .ml-md-2x { margin-left: var(--s-small); } .mr-md-2x { margin-right: var(--s-small); } .mt-md-2x { margin-top: var(--s-small); } .m-md-3x { margin: var(--s-medium); } .mh-md-3x { margin-left: var(--s-medium); margin-right: var(--s-medium); } .mv-md-3x { margin-bottom: var(--s-medium); margin-top: var(--s-medium); } .mb-md-3x { margin-bottom: var(--s-medium); } .ml-md-3x { margin-left: var(--s-medium); } .mr-md-3x { margin-right: var(--s-medium); } .mt-md-3x { margin-top: var(--s-medium); } .m-md-4x { margin: var(--s-large); } .mh-md-4x { margin-left: var(--s-large); margin-right: var(--s-large); } .mv-md-4x { margin-bottom: var(--s-large); margin-top: var(--s-large); } .mb-md-4x { margin-bottom: var(--s-large); } .ml-md-4x { margin-left: var(--s-large); } .mr-md-4x { margin-right: var(--s-large); } .mt-md-4x { margin-top: var(--s-large); } .m-md-5x { margin: var(--s-xl); } .mh-md-5x { margin-left: var(--s-xl); margin-right: var(--s-xl); } .mv-md-5x { margin-bottom: var(--s-xl); margin-top: var(--s-xl); } .mb-md-5x { margin-bottom: var(--s-xl); } .ml-md-5x { margin-left: var(--s-xl); } .mr-md-5x { margin-right: var(--s-xl); } .mt-md-5x { margin-top: var(--s-xl); } .m-md-6x { margin: var(--s-2xl); } .mh-md-6x { margin-left: var(--s-2xl); margin-right: var(--s-2xl); } .mv-md-6x { margin-bottom: var(--s-2xl); margin-top: var(--s-2xl); } .mb-md-6x { margin-bottom: var(--s-2xl); } .ml-md-6x { margin-left: var(--s-2xl); } .mr-md-6x { margin-right: var(--s-2xl); } .mt-md-6x { margin-top: var(--s-2xl); } .m-md-7x { margin: var(--s-3xl); } .mh-md-7x { margin-left: var(--s-3xl); margin-right: var(--s-3xl); } .mv-md-7x { margin-bottom: var(--s-3xl); margin-top: var(--s-3xl); } .mb-md-7x { margin-bottom: var(--s-3xl); } .ml-md-7x { margin-left: var(--s-3xl); } .mr-md-7x { margin-right: var(--s-3xl); } .mt-md-7x { margin-top: var(--s-3xl); } .m-md-8x { margin: var(--s-4xl); } .mh-md-8x { margin-left: var(--s-4xl); margin-right: var(--s-4xl); } .mv-md-8x { margin-bottom: var(--s-4xl); margin-top: var(--s-4xl); } .mb-md-8x { margin-bottom: var(--s-4xl); } .ml-md-8x { margin-left: var(--s-4xl); } .mr-md-8x { margin-right: var(--s-4xl); } .mt-md-8x { margin-top: var(--s-4xl); } .m-md-9x { margin: var(--s-5xl); } .mh-md-9x { margin-left: var(--s-5xl); margin-right: var(--s-5xl); } .mv-md-9x { margin-bottom: var(--s-5xl); margin-top: var(--s-5xl); } .mb-md-9x { margin-bottom: var(--s-5xl); } .ml-md-9x { margin-left: var(--s-5xl); } .mr-md-9x { margin-right: var(--s-5xl); } .mt-md-9x { margin-top: var(--s-5xl); } .m-md-10x { margin: var(--s-6xl); } .mh-md-10x { margin-left: var(--s-6xl); margin-right: var(--s-6xl); } .mv-md-10x { margin-bottom: var(--s-6xl); margin-top: var(--s-6xl); } .mb-md-10x { margin-bottom: var(--s-6xl); } .ml-md-10x { margin-left: var(--s-6xl); } .mr-md-10x { margin-right: var(--s-6xl); } .mt-md-10x { margin-top: var(--s-6xl); } } @media (min-width: 60em) { .m-lg-auto { margin: auto; } .mh-lg-auto { margin-left: auto; margin-right: auto; } .mv-lg-auto { margin-bottom: auto; margin-top: auto; } .mb-lg-auto { margin-bottom: auto; } .ml-lg-auto { margin-left: auto; } .mr-lg-auto { margin-right: auto; } .mt-lg-auto { margin-top: auto; } .m-lg-0x { margin: 0; } .mh-lg-0x { margin-left: 0; margin-right: 0; } .mv-lg-0x { margin-bottom: 0; margin-top: 0; } .mb-lg-0x { margin-bottom: 0; } .ml-lg-0x { margin-left: 0; } .mr-lg-0x { margin-right: 0; } .mt-lg-0x { margin-top: 0; } .m-lg-1x { margin: var(--s-xs); } .mh-lg-1x { margin-left: var(--s-xs); margin-right: var(--s-xs); } .mv-lg-1x { margin-bottom: var(--s-xs); margin-top: var(--s-xs); } .mb-lg-1x { margin-bottom: var(--s-xs); } .ml-lg-1x { margin-left: var(--s-xs); } .mr-lg-1x { margin-right: var(--s-xs); } .mt-lg-1x { margin-top: var(--s-xs); } .m-lg-2x { margin: var(--s-small); } .mh-lg-2x { margin-left: var(--s-small); margin-right: var(--s-small); } .mv-lg-2x { margin-bottom: var(--s-small); margin-top: var(--s-small); } .mb-lg-2x { margin-bottom: var(--s-small); } .ml-lg-2x { margin-left: var(--s-small); } .mr-lg-2x { margin-right: var(--s-small); } .mt-lg-2x { margin-top: var(--s-small); } .m-lg-3x { margin: var(--s-medium); } .mh-lg-3x { margin-left: var(--s-medium); margin-right: var(--s-medium); } .mv-lg-3x { margin-bottom: var(--s-medium); margin-top: var(--s-medium); } .mb-lg-3x { margin-bottom: var(--s-medium); } .ml-lg-3x { margin-left: var(--s-medium); } .mr-lg-3x { margin-right: var(--s-medium); } .mt-lg-3x { margin-top: var(--s-medium); } .m-lg-4x { margin: var(--s-large); } .mh-lg-4x { margin-left: var(--s-large); margin-right: var(--s-large); } .mv-lg-4x { margin-bottom: var(--s-large); margin-top: var(--s-large); } .mb-lg-4x { margin-bottom: var(--s-large); } .ml-lg-4x { margin-left: var(--s-large); } .mr-lg-4x { margin-right: var(--s-large); } .mt-lg-4x { margin-top: var(--s-large); } .m-lg-5x { margin: var(--s-xl); } .mh-lg-5x { margin-left: var(--s-xl); margin-right: var(--s-xl); } .mv-lg-5x { margin-bottom: var(--s-xl); margin-top: var(--s-xl); } .mb-lg-5x { margin-bottom: var(--s-xl); } .ml-lg-5x { margin-left: var(--s-xl); } .mr-lg-5x { margin-right: var(--s-xl); } .mt-lg-5x { margin-top: var(--s-xl); } .m-lg-6x { margin: var(--s-2xl); } .mh-lg-6x { margin-left: var(--s-2xl); margin-right: var(--s-2xl); } .mv-lg-6x { margin-bottom: var(--s-2xl); margin-top: var(--s-2xl); } .mb-lg-6x { margin-bottom: var(--s-2xl); } .ml-lg-6x { margin-left: var(--s-2xl); } .mr-lg-6x { margin-right: var(--s-2xl); } .mt-lg-6x { margin-top: var(--s-2xl); } .m-lg-7x { margin: var(--s-3xl); } .mh-lg-7x { margin-left: var(--s-3xl); margin-right: var(--s-3xl); } .mv-lg-7x { margin-bottom: var(--s-3xl); margin-top: var(--s-3xl); } .mb-lg-7x { margin-bottom: var(--s-3xl); } .ml-lg-7x { margin-left: var(--s-3xl); } .mr-lg-7x { margin-right: var(--s-3xl); } .mt-lg-7x { margin-top: var(--s-3xl); } .m-lg-8x { margin: var(--s-4xl); } .mh-lg-8x { margin-left: var(--s-4xl); margin-right: var(--s-4xl); } .mv-lg-8x { margin-bottom: var(--s-4xl); margin-top: var(--s-4xl); } .mb-lg-8x { margin-bottom: var(--s-4xl); } .ml-lg-8x { margin-left: var(--s-4xl); } .mr-lg-8x { margin-right: var(--s-4xl); } .mt-lg-8x { margin-top: var(--s-4xl); } .m-lg-9x { margin: var(--s-5xl); } .mh-lg-9x { margin-left: var(--s-5xl); margin-right: var(--s-5xl); } .mv-lg-9x { margin-bottom: var(--s-5xl); margin-top: var(--s-5xl); } .mb-lg-9x { margin-bottom: var(--s-5xl); } .ml-lg-9x { margin-left: var(--s-5xl); } .mr-lg-9x { margin-right: var(--s-5xl); } .mt-lg-9x { margin-top: var(--s-5xl); } .m-lg-10x { margin: var(--s-6xl); } .mh-lg-10x { margin-left: var(--s-6xl); margin-right: var(--s-6xl); } .mv-lg-10x { margin-bottom: var(--s-6xl); margin-top: var(--s-6xl); } .mb-lg-10x { margin-bottom: var(--s-6xl); } .ml-lg-10x { margin-left: var(--s-6xl); } .mr-lg-10x { margin-right: var(--s-6xl); } .mt-lg-10x { margin-top: var(--s-6xl); } } .swatch { background-color: var(--swatch-bg); border-radius: var(--border-radius-medium); box-shadow: var(--box-shadow-heavy); display: flex; justify-content: flex-end; } .swatch.major { grid-row: span 2; } .swatch__name { background-color: var(--interface-white); border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0; flex-basis: 80%; font-family: monospace; font-size: var(--t-small); padding: var(--s-large) var(--s-medium); } @media (max-width: 60em) { .swatch { margin-bottom: var(--s-medium); } } @media (min-width: 60em) { .swatch--large { flex-direction: column; min-height: 200px; } .swatch--large .swatch__name { border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium); flex-basis: auto; } } html { scroll-behavior: smooth; } body { background-color: var(--body-bg-offset); color: var(--text-color); } pre, code { font-family: monospace; margin: 0; padding: 0; white-space: pre-wrap; } code:not([class^=language-]), .code__inline { background-color: var(--interface-secondary-xx-light); border-radius: var(--border-radius); color: var(--data-viz-red-50-D); font-size: var(--t-small); padding: var(--s-xs); } tk-avatar { display: inherit; } .section-intro { margin: var(--s-xl) 0; } .example-group-item[data-state=""] ~ .example-group-item, .example-group-item[data-state=hidden] { display: none; } .example-group-item[data-state=visible] { display: block; } .bulleted-list { list-style: disc; margin-left: var(--s-medium); } .ut-section__events table, .ut-section__props table { max-width: 100%; } .ut-styleguide { display: flex; justify-content: flex-start; } .ut-header { padding: var(--s-medium) var(--s-large); } .ut-main__component-other-info { margin: 4px 0; } .ut-title { font-size: var(--t-xl); font-weight: var(--t-heavy); } .ut-subtitle { color: var(--ghost-text-color); font-size: var(--t-large); } .ut-content { display: grid; gap: 2%; grid-template-columns: 83% 15%; margin: var(--s-xl); width: 90%; } .ut-content > ul { list-style: disc; padding-left: var(--s-medium); } .ut-content > ol { list-style: decimal; margin-left: var(--s-medium); } .ut-table-of-contents { height: 100vh; overflow-y: scroll; position: sticky; top: 0; } .ut-table-of-contents .ut-table-of-contents__link { border-left: 2px solid var(--interface-secondary-x-light); font-size: var(--t-small); line-height: var(--t-large); margin-top: var(--s-xs); padding: var(--s-small); } .ut-table-of-contents .activeSection { border-left: 2px solid var(--interface-primary); border-radius: 3px; } .ut-table-of-contents .ut-section__link-svg { display: none; } .ut-menu { height: 100vh; overflow-y: scroll; position: sticky; top: 0; } .ut-menu .menu-subtitle { display: none; } .ut-sidebar { background-color: var(--interface-secondary-xx-light); padding-top: var(--s-small); } .ut-sidebar__heading { font-size: var(--t-medium); font-weight: var(--t-heavy); } .ut-sidebar__heading:first-of-type { margin-top: 0; } .ut-sidebar__heading .preview-links { display: none; } .ut-sidebar__heading:active { background-color: var(--interface-secondary-x-light); } .ut-sidebar__heading-icon { transition: 0.4s ease-in-out; } .ut-sidebar__collapsible[open] .ut-sidebar__heading-icon { transform: rotate(180deg); transition: 0.4s ease-in-out; } .ut-sidebar__collapsible { margin-top: var(--s-small); transition: height 0.4s ease; } .ut-sidebar__collapsible:first-of-type { margin-top: var(--s-small); } .ut-sidebar__collapsible[open] { overflow: hidden; } details summary { align-items: center; display: flex; justify-content: space-between; padding: var(--s-small) var(--s-medium); } details summary::-webkit-details-marker { display: none; } .ut-sidebar-ul { margin-top: var(--s-xs); } .ut-sidebar__collapsible summary { cursor: pointer; } .ut-menu__link { color: var(--text-color); display: block; font-size: var(--t-medium); padding: var(--s-small) var(--s-medium); text-transform: capitalize; } .ut-menu__link.active { color: var(--link-color); } .ut-accessibility { margin: var(--s-xl) 0; } .ut-accessibility__example { margin-top: var(--s-medium) 0 var(--s-xl) 0; padding: var(--s-medium) 0; } .ut-accessibility__example li { padding: 0 var(--s-medium); width: 100%; } .ut-accessibility__example li:not(:last-child) { border-bottom: 1px solid var(--interface-secondary-x-light); margin-bottom: var(--s-medium); padding-bottom: var(--s-medium); } .ut-section__headline, .ut-section__link { align-items: center; display: flex; font-size: var(--s-large); } .ut-section__headline { margin-top: var(--s-large); } .ut-section__link { color: var(--text-color); } .ut-section__link:hover, .ut-section__link:focus { color: var(--link-color); } .ut-section__link-svg { align-items: center; display: flex; } ::-webkit-scrollbar { -webkit-appearance: none; width: 4px; } ::-webkit-scrollbar-thumb { border-radius: 4px; /* stylelint-disable-next-line function-name-case -- RGB needs to be uppercase because otherwise the Hugo Sass compiler incorrectly assumes it's the rgb Sass function and fails to compile. */ background-color: RGB(0 0 0/50%); /* stylelint-disable-next-line function-name-case -- RGB needs to be uppercase because otherwise the Hugo Sass compiler incorrectly assumes it's the rgb Sass function and fails to compile. */ -webkit-box-shadow: 0 0 1px RGB(255 255 255/50%); } .ut-code-example__output--dark { background-color: var(--interface-secondary-light); border-radius: var(--border-radius) var(--border-radius) 0 0; } .ut-code-example__output--med-dark { background-color: var(--interface-secondary-xx-light); } .ut-code-example__output--brand { background-color: var(--interface-primary); } .ut-code-example--short { min-height: 200px; } .ut-code-example--tall { min-height: 600px; } .ut-code-example__output .wrapper { border: 1px dotted var(--interface-secondary); color: var(--text-color); text-align: center; } table:not(.table) { box-shadow: var(--box-shadow); border-radius: var(--border-radius); margin: var(--s-large) 0; max-width: -moz-fit-content; max-width: fit-content; } table:not(.table) td, table:not(.table) th { background-color: var(--table-bg-color); border-bottom: 1px solid var(--interface-secondary-x-light); padding: var(--s-small); } table:not(.table) tr:last-child td { border-bottom: none; } hr:not([class]) { border: 0; border-top: var(--t-rule); margin-bottom: var(--s-medium); margin-top: var(--s-medium); } .mobile-nav, .mobile-nav__button, .mobile-nav__overlay { display: none; } @media (max-width: 45em) { .ut-styleguide { flex-wrap: wrap; } .ut-sidebar { display: none; order: 2; width: 100%; } .ut-section__link-svg { --icon-size: 0.75em; } .ut-code-example--visual { max-width: 90vw; } .ut-header { z-index: var(--z-index-overlay); } .mobile-nav__button { --icon-fill-color: white; display: block; } .header__logo { margin: auto; } .mobile-nav { background-color: var(--interface-white); display: block; height: 93.5vh; left: -100%; overflow-y: scroll; position: absolute; top: 100%; transition: all ease-in-out 0.3s; width: 60%; z-index: var(--z-index-overlay); } .mobile-nav nav { overflow-y: scroll; padding: var(--s-xl); } .mobile-nav__overlay .ut-content { display: block; } .mobile-nav__overlay .ut-table-of-contents { display: none; } .ut-content { display: block; margin: var(--s-xl) auto; } } @media (min-width: 45em) { .ut-sidebar { margin-right: var(--s-large); width: 250px; } .ut-content { max-width: var(--container-medium); } } @media (min-width: 60em) { .ut-content { max-width: var(--container-xl); } } .preview-page { color: var(--text-color); width: 100%; } .preview-page .preview-category-container { margin-top: var(--s-medium); } .preview-page .preview-ul { padding: var(--s-small); } .preview-page .preview-category-heading { align-items: center; display: flex; margin-bottom: var(--s-medium); } .preview-page__button { align-items: center; color: var(--text-color); display: flex; justify-content: space-between; padding: var(--s-small) var(--s-medium); width: 100%; } .preview-page__button h3 { align-items: center; color: var(--text-color); display: flex; justify-content: center; } .preview-page__button .preview-page-icon { margin: 0; } .preview-items { height: 100%; } .preview-items .preview-cards { height: 100%; } .preview-items .preview-title { color: var(--text-color); font-size: var(--s-medium); } .preview-items .preview-subtitle { color: var(--text-color); margin-top: var(--s-medium); } .preview-items .example-image-container { align-items: center; display: flex; justify-content: center; height: 10rem; } .preview-items .example-image-container .example-image { max-height: 100%; width: auto; } .preview-cards:hover { box-shadow: var(--box-shadow-heavy); transition: all 0.1s ease-in-out; } .preview-page-container { display: none; } .ut-hero-wrapper p, .ut-hero-wrapper a { font-size: var(--t-base); } .ut-home-wrapper { align-items: stretch; display: flex; flex-direction: column; justify-content: center; width: 100%; } .ut-home-wrapper .ut-table-of-contents { display: none; } .changelog__wrapper { position: relative; width: 100%; } .changelog__wrapper h1 { border-bottom: 1px solid var(--interface-secondary-x-light); font-size: var(--t-xl); margin-top: var(--s-2xl); } .changelog__wrapper ul { list-style: disc; } .changelog__wrapper li { font-size: medium; margin-left: var(--s-2xl); padding: 8px; } .changelog__title { border-bottom: none; font-size: var(--s-large); font-weight: bold; } .changelog__opacity-transition { background: var(--changelog-gradient); bottom: 10px; height: 30vh; left: 0; position: absolute; width: 100%; } @media (min-width: 45em) { .ut-hero-wrapper { display: flex; justify-content: flex-start; margin: var(--s-xl) 0; } .ut-hero-wrapper__artwork { flex-basis: 33%; } } .example-group { position: relative; } .ut-section__headline { height: var(--s-3xl); } .ut-accessibility__example, .ut-code-example { background-color: var(--interface-white); border: 1px solid var(--interface-secondary-x-light); border-radius: var(--border-radius); } .ut-code-example__inline { display: flex; justify-content: center; margin: var(--s-xl) 0; } .ut-code-example__output { padding: var(--s-medium); } .ut-code-example__block { background-color: var(--interface-white); border: 1px solid var(--interface-secondary-x-light); border-radius: var(--border-radius); padding: var(--s-medium); position: relative; } .ut-code-example__block pre, .ut-code-example__block td { background-color: transparent !important; } .ut-code-example__block pre span, .ut-code-example__block code span { font-family: Courier, monospace; font-size: var(--t-base); } .ut-code-example__block[data-collapsed=true] { max-height: 200px; overflow-y: hidden; } .ut-code-example__block[data-collapsed=true]::after { background-image: linear-gradient(0deg, #fff, rgba(255, 255, 255, 0.25)); bottom: 0; content: ""; height: 50px; left: 0; pointer-events: none; position: absolute; right: 0; } .ut-code-example__expand, .ut-code-example__copy { position: absolute; } .ut-code-example__expand { right: 85px; } .ut-code-example__copy { right: var(--s-medium); top: var(--s-medium); } tk-highlight:empty { display: none; } .component-readme-wrapper { overflow-x: auto; } .component-readme-wrapper h1 { font-size: var(--s-xl); } .component-readme-wrapper h2 { font-size: var(--s-large); margin-bottom: var(--s-small); } .component-readme-wrapper table { margin: 0 auto var(--s-2xl) auto; max-width: 99%; } .component-readme-wrapper hr { display: none; } .description-block { background-color: var(--interface-white); border: 1px solid var(--interface-secondary-x-light); border-radius: var(--border-radius); padding: var(--s-large); } .description-block a, .description-block > p { font-size: var(--t-base); } .description-block a { border-bottom: 1px solid currentcolor; padding-bottom: 1px; } .description-block a:hover, .description-block a:focus { color: var(--interface-secondary-dark); } .example-group .description-block { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; margin-top: calc(var(--border-radius) * -1); position: relative; } .example-group .logo-grid ~ .description-block { border-radius: var(--border-radius); border-top: 1px solid var(--interface-secondary-x-light); margin-top: 0; } .description-block__headline { color: var(--ghost-text-color); } :root { --elevations-container-height: 200px; } .demo-elevations__container { border-radius: var(--border-radius-500); height: var(--elevations-container-height); text-align: center; width: 100%; } .demo-elevations__label { color: var(--neutral-grey-1000); font-size: var(--t-font-size-100); line-height: var(--elevations-container-height); } .box-shadow__small { background-color: var(--saturated-blue-50); box-shadow: var(--box-shadow-100); font-size: var(--t-font-size-100); line-height: var(--elevations-container-height); } .box-shadow__medium { background-color: var(--saturated-blue-100); box-shadow: var(--box-shadow-200); font-size: var(--t-font-size-100); line-height: var(--elevations-container-height); } .box-shadow__large { background-color: var(--saturated-blue-150); box-shadow: var(--box-shadow-300); font-size: var(--t-font-size-100); line-height: var(--elevations-container-height); } :root { --demo-layout-bg: transparent; --demo-layout-box-bg: transparent; --demo-layout-box-border: transparent; --block-layout-bg: var(--interface-error-light); --block-layout-box-bg: var(--interface-error-x-light); --block-layout-box-border: var(--interface-error); --flex-layout-bg: var(--interface-highlight-light); --flex-layout-box-bg: var(--interface-highlight-x-light); --flex-layout-box-border: var(--interface-highlight); --grid-layout-bg: var(--interface-blue-light); --grid-layout-box-bg: var(--interface-blue-x-light); --grid-layout-box-border: var(--interface-blue); --width-layout-box-bg: var(--interface-secondary-x-light); --width-layout-box-border: var(--interface-secondary-light); } [demo-block], [demo-flex], [demo-grid], [demo-combo] { background-image: radial-gradient(var(--demo-layout-bg) 20%, transparent 20%), radial-gradient(var(--interface-white) 20%, transparent 20%); background-size: var(--s-small) var(--s-small); } [demo-box] { background-color: var(--demo-layout-box-bg); border: 3px solid var(--demo-layout-box-border); font-weight: var(--t-heavy); padding: var(--s-small); text-align: center; } [demo-flex], [demo-combo-1] { --demo-layout-bg: var(--flex-layout-bg); --demo-layout-box-bg: var(--flex-layout-box-bg); --demo-layout-box-border: var(--flex-layout-box-border); } [demo-flex][tall], [demo-combo-1][tall] { height: 80px; } [demo-block], [demo-combo-2] { --demo-layout-bg: var(--block-layout-bg); --demo-layout-box-bg: var(--block-layout-box-bg); --demo-layout-box-border: var(--block-layout-box-border); } [demo-grid] { --demo-layout-bg: var(--grid-layout-bg); --demo-layout-box-bg: var(--grid-layout-box-bg); --demo-layout-box-border: var(--grid-layout-box-border); } [demo-combo-3] { --demo-layout-box-bg: var(--width-layout-box-bg); --demo-layout-box-border: var(--width-layout-box-border); } @media (min-width: 45em) { [demo-combo-1] { --demo-layout-bg: var(--grid-layout-bg); --demo-layout-box-bg: var(--grid-layout-box-bg); --demo-layout-box-border: var(--grid-layout-box-border); } [demo-combo-2] { --demo-layout-bg: var(--flex-layout-bg); --demo-layout-box-bg: var(--flex-layout-box-bg); --demo-layout-box-border: var(--flex-layout-box-border); } } .demo-pre, .demo-actions { border: 3px dotted var(--interface-secondary-light); } .demo-body { background: var(--interface-success-x-light); border: 3px solid var(--interface-success); } .demo-body > div { background-color: var(--interface-secondary); color: var(--interface-white); font-weight: var(--t-heavy); padding: var(--s-small) 0; text-align: center; } .icon-grid, .logo-grid { grid-auto-rows: auto; grid-gap: var(--s-medium); } .icon-grid__set, .logo-grid__set { background-color: var(--interface-white); border: 1px solid var(--interface-secondary-x-light); border-radius: var(--border-radius); } .icon-grid__set { grid-template-columns: 60px auto; } .logo-grid__set { grid-template-columns: 200px auto; } .icon-grid__name, .icon-grid__output { padding: var(--s-medium); } .logo-grid__output, .logo-grid__name { padding: var(--s-medium) 0; } .icon-grid__name { background-color: var(--interface-secondary-xx-light); display: grid; } .logo-grid__name { border-left: 1px solid var(--interface-secondary-x-light); padding: var(--s-medium); } .demo-icon { --icon-height: 20px; } @media (min-width: 45em) { .icon-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 60em) { .icon-grid { grid-template-columns: repeat(3, 1fr); } .logo-grid { grid-template-columns: repeat(2, 1fr); } .demo-icon { --icon-height: 40px; } } @media (min-width: 80em) { .icon-grid { grid-template-columns: repeat(4, 1fr); } } .demo-layer--controls { --layer-filter: brightness(20%); --layer-width: 100%; z-index: var(--z-index-controls); } .demo-layer--content { --layer-filter: brightness(40%); --layer-width: 80%; z-index: var(--z-index-content); } .demo-layer--popover { --layer-filter: brightness(60%); --layer-width: 60%; z-index: var(--z-index-popover); } .demo-layer--dropdown { --layer-filter: brightness(80%); --layer-width: 40%; z-index: var(--z-index-dropdown); } .demo-layer--overlay { --layer-filter: brightness(100%); --layer-width: 20%; z-index: var(--z-index-overlay); } .demo-layer--modal { --layer-filter: brightness(140%); --layer-width: 10%; z-index: var(--z-index-modal); } .demo-layers { height: 300px; position: relative; } .demo-layer { margin: 0 auto; padding: var(--s-large); width: var(--layer-width); } .demo-layer__background { background-color: var(--interface-primary); border-radius: var(--border-radius); bottom: 0; -webkit-filter: var(--layer-filter); filter: var(--layer-filter); top: 0; z-index: -1; } .demo-layer, .demo-layer__background { left: 0; position: absolute; right: 0; } .demo-layer__text { color: var(--interface-white); font-weight: var(--t-heavy); } .demo-layer--modal { top: 200px; } .demo-layer--overlay { top: 160px; } .demo-layer--dropdown { top: 120px; } .demo-layer--popover { top: 80px; } .demo-layer--content { top: 40px; } .demo-layer--controls { top: 0; } :root { --playground-bg: var(--interface-secondary-xx-light); } .playground { background: var(--playground-bg); border: var(--t-rule); padding: var(--s-large); } #buttonDescriptions [description=contained], #buttonDescriptions [description=compact], #buttonDescriptions [description=outline], #buttonDescriptions [description=outline-dark], #buttonDescriptions [description=ghost], #buttonDescriptions [description=destructive], #buttonDescriptions [description=large], #buttonDescriptions [description=is-icon] { display: none; } #buttonDescriptions[size=compact] [description=compact], #buttonDescriptions[type=contained] [description=contained], #buttonDescriptions[type=ghost] [description=ghost], #buttonDescriptions[type=outline] [description=outline], #buttonDescriptions[type=outline-dark] [description=outline-dark], #buttonDescriptions[variant=destructive] [description=destructive], #buttonDescriptions[size=large] [description=large], #buttonDescriptions[is-icon=true] [description=is-icon] { display: block; } .demo-popovers { background-color: var(--interface-secondary-dark); height: 100vh; } .demo-popovers__header { align-content: space-between; background-color: var(--interface-secondary); display: grid; height: 5rem; padding: var(--s-medium); width: 100vw; } .trailing .demo-popovers__header, .leading .demo-popovers__header { height: 100vh; justify-content: center; padding: var(--s-medium) 0; width: 5rem; } .demo-popovers__description { color: var(--interface-white); } .usage-example-container { display: grid; grid-gap: var(--s-medium); grid-template-columns: 1fr; margin: var(--s-medium) 0; } .usage-example { background-color: var(--interface-white); border: 1px solid var(--interface-secondary-x-light); border-left: none; padding: var(--s-medium); position: relative; } .usage-example ul { padding-left: var(--s-medium); } .usage-example li { list-style: disc; } .usage-example--positive { box-shadow: -2px 0 0 0 var(--interface-success); } .usage-example--positive .usage-example__headline { color: var(--interface-success); } .usage-example--negative { box-shadow: -2px 0 0 0 var(--interface-error); } .usage-example--negative .usage-example__headline { color: var(--interface-error); } @media (min-width: 45em) { .usage-example-container { grid-template-columns: 1fr 1fr; } } /** * Copyright (c) 2013 Trulia, Inc. * * MIT License * * Permission is hereby granted, free of charge, to any person obtaining * a copy of this software and associated documentation files (the * "Software"), to deal in the Software without restriction, including * without limitation the rights to use, copy, modify, merge, publish, * distribute, sublicense, and/or sell copies of the Software, and to * permit persons to whom the Software is furnished to do so, subject to * the following conditions: * * The above copyright notice and this permission notice shall be * included in all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ /* stylelint-disable -- Autogenerated file */ hll { background-color: #ffffcc; } .c { color: #999988; font-style: italic; } /* Comment */ .err { color: #a61717; background-color: #e3d2d2; } /* Error */ .k { color: #000000; font-weight: bold; } /* Keyword */ .o { color: #000000; font-weight: bold; } /* Operator */ .cm { color: #999988; font-style: italic; } /* Comment.Multiline */ .cp { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Preproc */ .c1 { color: #999988; font-style: italic; } /* Comment.Single */ .cs { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Special */ .gd { color: #000000; background-color: #ffdddd; } /* Generic.Deleted */ .ge { color: #000000; font-style: italic; } /* Generic.Emph */ .gr { color: #aa0000; } /* Generic.Error */ .gh { color: #999999; } /* Generic.Heading */ .gi { color: #000000; background-color: #ddffdd; } /* Generic.Inserted */ .go { color: #888888; } /* Generic.Output */ .gp { color: #555555; } /* Generic.Prompt */ .gs { font-weight: bold; } /* Generic.Strong */ .gu { color: #aaaaaa; } /* Generic.Subheading */ .gt { color: #aa0000; } /* Generic.Traceback */ .kc { color: #000000; font-weight: bold; } /* Keyword.Constant */ .kd { color: #000000; font-weight: bold; } /* Keyword.Declaration */ .kn { color: #000000; font-weight: bold; } /* Keyword.Namespace */ .kp { color: #000000; font-weight: bold; } /* Keyword.Pseudo */ .kr { color: #000000; font-weight: bold; } /* Keyword.Reserved */ .kt { color: #445588; font-weight: bold; } /* Keyword.Type */ .m { color: #009999; } /* Literal.Number */ .s { color: #d01040; } /* Literal.String */ .na { color: #008080; } /* Name.Attribute */ .nb { color: #0086b3; } /* Name.Builtin */ .nc { color: #445588; font-weight: bold; } /* Name.Class */ .no { color: #008080; } /* Name.Constant */ .nd { color: #3c5d5d; font-weight: bold; } /* Name.Decorator */ .ni { color: #800080; } /* Name.Entity */ .ne { color: #990000; font-weight: bold; } /* Name.Exception */ .nf { color: #990000; font-weight: bold; } /* Name.Function */ .nl { color: #990000; font-weight: bold; } /* Name.Label */ .nn { color: #555555; } /* Name.Namespace */ .nt { color: #000080; } /* Name.Tag */ .nv { color: #008080; } /* Name.Variable */ .ow { color: #000000; font-weight: bold; } /* Operator.Word */ .w { color: #bbbbbb; } /* Text.Whitespace */ .mf { color: #009999; } /* Literal.Number.Float */ .mh { color: #009999; } /* Literal.Number.Hex */ .mi { color: #009999; } /* Literal.Number.Integer */ .mo { color: #009999; } /* Literal.Number.Oct */ .sb { color: #d01040; } /* Literal.String.Backtick */ .sc { color: #d01040; } /* Literal.String.Char */ .sd { color: #d01040; } /* Literal.String.Doc */ .s2 { color: #d01040; } /* Literal.String.Double */ .se { color: #d01040; } /* Literal.String.Escape */ .sh { color: #d01040; } /* Literal.String.Heredoc */ .si { color: #d01040; } /* Literal.String.Interpol */ .sx { color: #d01040; } /* Literal.String.Other */ .sr { color: #009926; } /* Literal.String.Regex */ .s1 { color: #d01040; } /* Literal.String.Single */ .ss { color: #990073; } /* Literal.String.Symbol */ .bp { color: #999999; } /* Name.Builtin.Pseudo */ .vc { color: #008080; } /* Name.Variable.Class */ .vg { color: #008080; } /* Name.Variable.Global */ .vi { color: #008080; } /* Name.Variable.Instance */ .il { color: #009999; } /* Literal.Number.Integer.Long */ .search-modal { --modal-margin: 300px auto; } .search-btn { color: var(--interface-white); transition: transform ease-in-out 0.2s; } .search-btn:hover, .search-btn:focus { transform: translateY(-2px); transition: transform ease-in-out 0.2s; } .menu-search-bar { border-bottom: 2px solid var(--interface-primary-x-light); margin-left: 10px; padding: 10px; width: 100%; } .menu-search-bar:focus { border: none; border-bottom: 2px solid var(--interface-primary-x-light); outline: none; } .menu-search-bar::placeholder, .search-button { color: var(--interface-secondary-light); } .search-results__link { background-color: var(--interface-primary-x-light); border-radius: var(--border-radius-medium); display: block; font-weight: var(--t-heavy); margin: var(--s-small); padding: var(--s-medium); transition: all 0.2s; } .search-results__link:hover { background-color: var(--interface-primary); transition: all 0.2s; } .search-results__link:hover, .search-results__link:hover .search-results__section { color: var(--interface-white); } .search-results__section { color: var(--text-color); display: block; font-size: var(--t-small); font-weight: var(--t-regular); text-transform: capitalize; } .full-page-message-layout { height: 100%; border: 1px solid var(--interface-primary); } .full-page-message-header { position: sticky; background-color: var(--interface-white); z-index: var(--z-index-controls); min-height: 54px; } .full-page-message-navbar { padding: var(--s-medium) var(--s-large); min-height: 64px; flex: 1; background-color: var(--interface-white); } .full-page-message-navbar-icon { --logo-height: 24px; } .full-page-message-main { flex: 1; background-color: var(--interface-white); } .full-page-message-content { width: 100%; height: 100%; padding: var(--s-large); } .full-page-message-image { max-width: 100%; height: 100%; width: 100%; overflow: auto; max-height: 200px; } .full-page-message-title { color: var(--interface-secondary); margin-top: var(--s-3xl); } .full-page-message-body { color: var(--interface-secondary); } .full-page-message-banner { width: 100%; padding: 12px var(--s-medium); } .full-page-message-banner-title { color: var(--interface-secondary); } .full-page-message-banner-body { color: var(--interface-secondary); overflow-wrap: break-word; } .full-page-message-button { position: static; bottom: auto; width: auto; margin-bottom: var(--s-3xl); } .question-card { min-height: 80px; padding: 0 var(--s-small) var(--s-small) var(--s-small); } .question-card-actions-delete { padding-bottom: 5px; } .question-card-actions-divider { border-left: 1px solid var(--neutral-grey-100); height: var(--s-2xl); } .question-card-body-hr { --t-rule: 1px solid var(--neutral-grey-100); } .question-card-body-label { color: var(--neutral-grey-600); font-size: var(--t-font-size-87); font-weight: 600; } .question-card-content-color { color: var(--neutral-grey-700); } .question-card-header-hr { border-bottom: 1px solid var(--neutral-grey-100); margin: 0 -25px var(--s-small); width: calc(100% + 100px); } .subheader-content-text { --t-font-color-body: var(--neutral-grey-500); } @media (max-width: 45em) { .question-card-container { width: 520px; } } @media (min-width: 45em) { .question-card-container { width: 500px; } } @media (min-width: 60em) { .question-card-container { width: 800px; } } .hidden { display: none; } .ut-code-example__output .modal { display: block; position: relative; } .ut-code-example__output .modal-backdrop { display: none; } /*# sourceMappingURL=style.css.map */