SparkUI

A modern React component library built on the IG CDN design system.

Installation

npm install @sdworx/sparkui

Quick Start

1. Set up SparkUI (Optional CLI)

Install the CLI for easy setup:

npm install -g @sdworx/sparkui-cli
sparkui init

2. Import Styles

Add SparkUI styles to your main file (e.g., main.tsx or App.tsx):

import '@sdworx/sparkui/styles'

3. Use Components

import React from 'react'
import { Button, Card, Typography } from '@sdworx/sparkui'

export default function App() {
  return (
    <div className="p-8">
      <Typography variant="h1">Welcome to SparkUI!</Typography>
      
      <Card className="p-6 mt-6">
        <Typography variant="h2" className="mb-4">
          Getting Started
        </Typography>
        <Typography variant="body" className="mb-4">
          Start building beautiful interfaces with SparkUI components.
        </Typography>
        <Button variant="primary">
          Get Started
        </Button>
      </Card>
    </div>
  )
}

Available Components

Basic Components

• Button - Various button styles and sizes
• Typography - Text components with consistent styling
• Body - Main content wrapper
• Card - Card components with header, body, footer
• Grid - Responsive grid system
• Tabs - Tab navigation components

Extended Components

• ProfileCard - User profile display
• FeatureCard - Feature highlight cards
• MetricCard - Metric display cards
• ContentCard - Content block cards

Composite Components

• Marquee - Scrolling text component
• WidgetHome - Homepage widget
• AccreditationBar - Accreditation display

CLI Commands

If you have the CLI installed:

# Initialize SparkUI in your project
sparkui init

# List all available components
sparkui list

# Show current configuration
sparkui config

# Generate component example
sparkui example Button

TypeScript Support

SparkUI is built with TypeScript and provides full type definitions.

import { ButtonProps, CardProps } from '@sdworx/sparkui'

Styling

SparkUI uses Tailwind CSS and CSS variables for theming. The library includes:

• Light/dark mode support
• Responsive design utilities
• IG CDN design system integration
• Customizable CSS variables

Contributing

See our Contributing Guide for development instructions.

License

MIT © SD Worx --ig-background-accent-5-bold-hover: #00927d; --ig-background-accent-5-bold-pressed: #005d4f; --ig-background-accent-5-subtle: light-dark(#ebfdf9, #001e17); --ig-background-accent-5-subtle-hover: light-dark(#c3fcf0, #003128); --ig-background-accent-5-subtle-pressed: light-dark(#23dbc1, #001e17); --ig-background-accent-6-bold: #007e85; --ig-background-accent-6-bold-hover: #008e96; --ig-background-accent-6-bold-pressed: #005b60; --ig-background-accent-6-subtle: light-dark(#eafdfe, #001d1f); --ig-background-accent-6-subtle-hover: light-dark(#c0fbfe, #002f33); --ig-background-accent-6-subtle-pressed: light-dark(#00d8e1, #001d1f); --ig-background-accent-7-bold: #007a9a; --ig-background-accent-7-bold-hover: #008aae; --ig-background-accent-7-bold-pressed: #005871; --ig-background-accent-7-subtle: light-dark(#ebfcff, #001b28); --ig-background-accent-7-subtle-hover: light-dark(#c2f9ff, #002d3e); --ig-background-accent-7-subtle-pressed: light-dark(#25d2fc, #001b28); --ig-background-accent-8-bold: #0073b8; --ig-background-accent-8-bold-hover: #0083ce; --ig-background-accent-8-bold-pressed: #005389; --ig-background-accent-8-subtle: light-dark(#edfbff, #001833); --ig-background-accent-8-subtle-hover: light-dark(#d1f4ff, #00294d); --ig-background-accent-8-subtle-pressed: light-dark(#5fc9ff, #001833); --ig-background-accent-9-bold: #5c53da; --ig-background-accent-9-bold-hover: #6861f1; --ig-background-accent-9-bold-pressed: #4137a6; --ig-background-accent-9-subtle: light-dark(#f5f7ff, #110b3d); --ig-background-accent-9-subtle-hover: light-dark(#e8ecff, #1f175e); --ig-background-accent-9-subtle-pressed: light-dark(#aeb4ff, #110b3d); --ig-background-accent-10-bold: #8044cb; --ig-background-accent-10-bold-hover: #9051e1; --ig-background-accent-10-bold-pressed: #5e2b9a; --ig-background-accent-10-subtle: light-dark(#faf6ff, #1d0638); --ig-background-accent-10-subtle-hover: light-dark(#f3e7ff, #310e57); --ig-background-accent-10-subtle-pressed: light-dark(#cca8ff, #1d0638); --ig-background-accent-11-bold: #9c36b1; --ig-background-accent-11-bold-hover: #ae42c5; --ig-background-accent-11-bold-pressed: #731f85; --ig-background-accent-11-subtle: light-dark(#fff4ff, #27022e); --ig-background-accent-11-subtle-hover: light-dark(#ffe2ff, #3e0649); --ig-background-accent-11-subtle-pressed: light-dark(#e59ff6, #27022e); --ig-background-accent-12-bold: #be1b67; --ig-background-accent-12-bold-hover: #d42975; --ig-background-accent-12-bold-pressed: #8e0049; --ig-background-accent-12-subtle: light-dark(#fff3f8, #320014); --ig-background-accent-12-subtle-hover: light-dark(#ffe1ed, #4f0024); --ig-background-accent-12-subtle-pressed: light-dark(#ff95ba, #320014); --ig-background-indicator-primary: light-dark(#da3300, #ff9b7d); --ig-background-indicator-primary-hover: light-dark(#e84c1d, #ffe4d9); --ig-background-indicator-secondary: light-dark(#1272ab, #bbdcf6); --ig-background-indicator-secondary-hover: light-dark(#1882c0, #e1f1fe); --ig-border-clear: light-dark(#fff, #0e171e); --ig-border-subtle: light-dark(#f6f9fb, #1d2830); --ig-border-soft: light-dark(#e9f0f5, #303c45); --ig-border-medium: light-dark(#b7c3cc, #424f59); --ig-border-bold: #606e78; --ig-border-transparent: transparent; --ig-border-focus: light-dark(#042941, #e84c1d); --ig-border-selected-primary: light-dark(#e84c1d, #c42600); --ig-border-selected-secondary: light-dark(#1882c0, #01527e); --ig-border-primary-bold: light-dark(#da3300, #ff9b7d); --ig-border-primary-bold-hover: light-dark(#e84c1d, #ffe4d9); --ig-border-primary-bold-pressed: light-dark(#c42600, #e84c1d); --ig-border-primary-soft: light-dark(#ffe4d9, #520000); --ig-border-primary-soft-hover: light-dark(#fff4ef, #ff9b7d); --ig-border-primary-soft-pressed: light-dark(#ff9b7d, #e84c1d); --ig-border-secondary-bold: light-dark(#1272ab, #1882c0); --ig-border-secondary-bold-hover: light-dark(#1882c0, lch(53.596% 40.583 254.16)); --ig-border-secondary-bold-pressed: light-dark(#01527e, #1272ab); --ig-border-secondary-soft: light-dark(#e1f1fe, #01527e); --ig-border-secondary-soft-hover: light-dark(#f3f9ff, #042941); --ig-border-secondary-soft-pressed: light-dark(#bbdcf6, #1272ab); --ig-border-info-bold: light-dark(#006aff, #8fbeff); --ig-border-info-soft: light-dark(#8fbeff, #003286); --ig-border-warning-bold: #f3b01d; --ig-border-warning-soft: light-dark(#ffebc2, #533300); --ig-border-danger-bold: light-dark(#e90040, #ff979d); --ig-border-danger-soft: light-dark(#ff979d, #75001c); --ig-border-success-bold: light-dark(#009800, #75d87a); --ig-border-success-soft: light-dark(#75d87a, #004b00); --ig-border-accent-1-bold: #a65200; --ig-border-accent-1-soft: light-dark(#ffa659, #431900); --ig-border-accent-2-bold: #7e6c00; --ig-border-accent-2-soft: light-dark(#d3bf46, #2f2600); --ig-border-accent-3-bold: #627700; --ig-border-accent-3-soft: light-dark(#b2cb5c, #222b00); --ig-border-accent-4-bold: #00844d; --ig-border-accent-4-soft: light-dark(#5ed99e, #003217); --ig-border-accent-5-bold: #00816e; --ig-border-accent-5-soft: light-dark(#23dbc1, #003128); --ig-border-accent-6-bold: #007e85; --ig-border-accent-6-soft: light-dark(#00d8e1, #002f33); --ig-border-accent-7-bold: #007a9a; --ig-border-accent-7-soft: light-dark(#25d2fc, #002d3e); --ig-border-accent-8-bold: #0073b8; --ig-border-accent-8-soft: light-dark(#5fc9ff, #00294d); --ig-border-accent-9-bold: #5c53da; --ig-border-accent-9-soft: light-dark(#aeb4ff, #1f175e); --ig-border-accent-10-bold: #8044cb; --ig-border-accent-10-soft: light-dark(#cca8ff, #310e57); --ig-border-accent-11-bold: #9c36b1; --ig-border-accent-11-soft: light-dark(#e59ff6, #3e0649); --ig-border-accent-12-bold: #be1b67; --ig-border-accent-12-soft: light-dark(#ff95ba, #4f0024); --ig-icon-bold: light-dark(#303c45, #f6f9fb); --ig-icon-medium: light-dark(#54636d, #6f7c86); --ig-icon-close: light-dark(#54636d, #b7c3cc); --ig-icon-primary: light-dark(#c42600, #ff9b7d); --ig-icon-secondary: #01527e; --ig-icon-info: #006aff; --ig-icon-warning: #f3b01d; --ig-icon-danger: #e90040; --ig-icon-success: #009800; --ig-icon-on-bold: #fff; --ig-icon-on-warning: #835600; --ig-logo-text: light-dark(#303642, #fff); --ig-logo-icon-item1: #438ab5; --ig-logo-icon-item2: #f1002f; --ig-logo-icon-item3: #ffbe00; --ig-logo-inverse-text: light-dark(#fff, #303642); --ig-logo-inverse-icon-item1: light-dark(#fff, #303642); --ig-logo-inverse-icon-item2: light-dark(#fff, #303642); --ig-logo-inverse-icon-item3: light-dark(#fff, #303642); --ig-opacity-disabled: .4; --ig-elevation-level-1: 0px 0px 3px 0px #04294114, 0px 2px 6px -1px #04294133; --ig-elevation-level-2: 0px 1px 8px 0px #0429411c, 0px 5px 8px 0px #0429411a; --ig-elevation-level-3: 0px 1px 8px 0px #0429411f, 0px 6px 12px 0px #0429412b; --ig-elevation-level-4: 0px 8px 24px 0px #04294133, 0px 3px 8px 0px #0429411f; --ig-elevation-inset: inset 0px 2px 2px 0px #04294114; --ig-gradients-brand-primary: linear-gradient(135deg, #ff9b7d 0%, #da3300 100%); --ig-gradients-brand-secondary: linear-gradient(135deg, #bbdcf6 0%, #1272ab 100%); --ig-gradients-brand-tertiary: linear-gradient(135deg, #ff97ce 0%, #b72280 100%); --ig-gradients-brand-neutral: linear-gradient(135deg, #b7c3cc 0%, #606e78 100%); --ig-gradients-functional-info: linear-gradient(135deg, #8fbeff 0%, #006aff 100%); --ig-gradients-functional-success: linear-gradient(135deg, #75d87a 0%, #009800 100%); --ig-gradients-functional-warning: linear-gradient(135deg, #ffebc2 0%, #f3b01d 100%); --ig-gradients-functional-danger: linear-gradient(135deg, #ff979d 0%, #e90040 100%); --ig-dataviz-brand-1: #3591ce; --ig-dataviz-brand-2: #da489e; --ig-dataviz-categorical-1: #3591ce; --ig-dataviz-categorical-2: #75001c; --ig-dataviz-categorical-3: #00a38c; --ig-dataviz-categorical-4: #003f6c; --ig-dataviz-categorical-5: #ac77fa; --ig-dataviz-categorical-6: #710037; --ig-dataviz-categorical-7: #f05b93; --ig-dataviz-categorical-8: #533300; --ig-dataviz-categorical-9: #e67600; --ig-dataviz-categorical-10: #5e2b9a; --ig-dataviz-sequential-1-strong: #042941; --ig-dataviz-sequential-1-bold: #01527e; --ig-dataviz-sequential-1-medium: #1272ab; --ig-dataviz-sequential-1-soft: #3591ce; --ig-dataviz-sequential-1-subtle: #6fb3e5; --ig-dataviz-sequential-1-light: #bbdcf6; --ig-dataviz-sequential-2-strong: #4b0030; --ig-dataviz-sequential-2-bold: #880a5d; --ig-dataviz-sequential-2-medium: #b72280; --ig-dataviz-sequential-2-soft: #da489e; --ig-dataviz-sequential-2-subtle: #f27dbc; --ig-dataviz-sequential-2-light: #ffbbe4; --ig-dataviz-diverging-1-start-bold: #990025; --ig-dataviz-diverging-1-start-medium: #cf0038; --ig-dataviz-diverging-1-start-soft: #f75b6d; --ig-dataviz-diverging-1-start-subtle: #ffc1c3; --ig-dataviz-diverging-1-middle: #e9f0f5; --ig-dataviz-diverging-1-end-bold: #005389; --ig-dataviz-diverging-1-end-medium: #0073b8; --ig-dataviz-diverging-1-end-soft: #00a3fc; --ig-dataviz-diverging-1-end-subtle: #a1e0ff; --ig-dataviz-diverging-2-start-bold: #455500; --ig-dataviz-diverging-2-start-medium: #627700; --ig-dataviz-diverging-2-start-soft: #8ba700; --ig-dataviz-diverging-2-start-subtle: #cde387; --ig-dataviz-diverging-2-middle: #e9f0f5; --ig-dataviz-diverging-2-end-bold: #5e2b9a; --ig-dataviz-diverging-2-end-medium: #8044cb; --ig-dataviz-diverging-2-end-soft: #ac77fa; --ig-dataviz-diverging-2-end-subtle: #e1caff; --ig-dataviz-common-gender-male: #009fa7; --ig-dataviz-common-gender-female: #731f85; --ig-dataviz-common-gender-other: #e67600; --ig-dataviz-common-work-schedule-full-time: #8e0049; --ig-dataviz-common-work-schedule-part-time: #f05b93; --ig-dataviz-common-workforce-segment-blue-colllar: #5e2b9a; --ig-dataviz-common-workforce-segment-white-collar: #ac77fa; --ig-border-radius-0: 0px; --ig-border-radius: 4px; --ig-border-radius-small: 2px; --ig-border-radius-large: 8px; --ig-border-radius-focus: 4px; --ig-border-radius-input: 4px; --ig-border-width: 1px; --ig-border-width-2x: 2px; --ig-border-width-focus: 2px; --ig-border-width-input: 1px; --ig-border-width-indicator: 2px; --ig-font-size-html: 1rem; --ig-font-size-body-xsmall: .75rem; --ig-font-size-body-small: .875rem; --ig-font-size-body: 1rem; --ig-font-size-body-large: 1.125rem; --ig-font-size-heading-xxsmall: 1.125rem; --ig-font-size-heading-xsmall: 1.5rem; --ig-font-size-heading-small: 2rem; --ig-font-size-heading-medium: 2.5rem; --ig-font-size-heading-large: 3rem; --ig-font-size-heading-xlarge: 3.5rem; --ig-font-size-heading-xxlarge: 4rem; --ig-font-size-caption-xsmall: .5rem; --ig-font-size-caption-small: .625rem; --ig-font-size-caption: .75rem; --ig-font-size-caption-large: .875rem; --ig-font-family-body: Roboto; --ig-font-family-heading: Roboto; --ig-font-family-caption: Roboto; --ig-font-weight-regular: 400; --ig-font-weight-light: 300; --ig-font-weight-medium: 500; --ig-font-weight-bold: 700; --ig-line-height-body-xsmall: 1rem; --ig-line-height-body-small: 1.25rem; --ig-line-height-body: 1.5rem; --ig-line-height-body-large: 1.75rem; --ig-line-height-heading-xxsmall: 1.5rem; --ig-line-height-heading-xsmall: 2rem; --ig-line-height-heading-small: 2.25rem; --ig-line-height-heading-medium: 2.75rem; --ig-line-height-heading-large: 3.25rem; --ig-line-height-heading-xlarge: 4rem; --ig-line-height-heading-xxlarge: 4.5rem; --ig-line-height-caption-xsmall: .5rem; --ig-line-height-caption-small: .75rem; --ig-line-height-caption: 1rem; --ig-line-height-caption-large: 1.25rem; --ig-component-size-xsmall: 1.25rem; --ig-component-size-small: 2rem; --ig-component-size-medium: 2.5rem; --ig-component-size-large: 3rem; --ig-component-size-xlarge: 4rem; --ig-component-vertical-fix-xsmall: .125rem; --ig-component-vertical-fix-small: .3125rem; --ig-component-vertical-fix-medium: .4375rem; --ig-component-vertical-fix-large: .5625rem; --ig-component-input-small-gap: .375rem; --ig-component-input-small-horizontal-padding: .75rem; --ig-component-input-small-vertical-padding: .3125rem; --ig-component-input-small-label-horizontal-gap: 1rem; --ig-component-input-small-label-vertical-gap: .375rem; --ig-component-input-medium-gap: .75rem; --ig-component-input-medium-horizontal-padding: 1rem; --ig-component-input-medium-vertical-padding: .4375rem; --ig-component-input-medium-label-horizontal-gap: 1rem; --ig-component-input-medium-label-vertical-gap: .5rem; --ig-component-input-large-gap: 1rem; --ig-component-input-large-horizontal-padding: 1.25rem; --ig-component-input-large-vertical-padding: .5625rem; --ig-component-input-large-label-horizontal-gap: 1rem; --ig-component-input-large-label-vertical-gap: .375rem; --ig-size-0: 0; --ig-size-100: .75rem; --ig-size-150: 1rem; --ig-size-200: 1.25rem; --ig-size-250: 1.5rem; --ig-size-300: 2rem; --ig-size-400: 2.5rem; --ig-size-500: 3rem; --ig-size-600: 4rem; --ig-size-800: 5rem; --ig-size-1000: 6rem; --ig-size-1200: 8rem; --ig-size-1600: 10rem; --ig-size-025: .25rem; --ig-size-050: .375rem; --ig-size-075: .5rem; --ig-size-spacer: .75rem; --ig-typography-heading-xxsmall-bold: 700 1.125rem / 1.5rem Roboto; --ig-typography-heading-xxsmall-regular: 400 1.125rem / 1.5rem Roboto; --ig-typography-heading-xsmall-bold: 700 1.5rem / 2rem Roboto; --ig-typography-heading-xsmall-regular: 400 1.5rem / 2rem Roboto; --ig-typography-heading-small-bold: 700 2rem / 2.25rem Roboto; --ig-typography-heading-small-regular: 400 2rem / 2.25rem Roboto; --ig-typography-heading-medium-bold: 700 2.5rem / 2.75rem Roboto; --ig-typography-heading-medium-regular: 400 2.5rem / 2.75rem Roboto; --ig-typography-heading-large-bold: 700 3rem / 3.25rem Roboto; --ig-typography-heading-large-regular: 400 3rem / 3.25rem Roboto; --ig-typography-heading-xlarge-bold: 700 3.5rem / 4rem Roboto; --ig-typography-heading-xlarge-regular: 400 3.5rem / 4rem Roboto; --ig-typography-heading-xxlarge-bold: 700 4rem / 4.5rem Roboto; --ig-typography-heading-xxlarge-regular: 400 4rem / 4.5rem Roboto; --ig-typography-body-xsmall-bold: 700 .75rem / 1rem Roboto; --ig-typography-body-xsmall-medium: 500 .75rem / 1rem Roboto; --ig-typography-body-xsmall-regular: 400 .75rem / 1rem Roboto; --ig-typography-body-small-bold: 700 .875rem / 1.25rem Roboto; --ig-typography-body-small-medium: 500 .875rem / 1.25rem Roboto; --ig-typography-body-small-regular: 400 .875rem / 1.25rem Roboto; --ig-typography-body-medium-bold: 700 1rem / 1.5rem Roboto; --ig-typography-body-medium-medium: 500 1rem / 1.5rem Roboto; --ig-typography-body-medium-regular: 400 1rem / 1.5rem Roboto; --ig-typography-body-large-bold: 700 1.125rem / 1.75rem Roboto; --ig-typography-body-large-medium: 500 1.125rem / 1.75rem Roboto; --ig-typography-body-large-regular: 400 1.125rem / 1.75rem Roboto; --ig-typography-caption-xsmall-bold: 700 .5rem / .5rem Roboto; --ig-typography-caption-xsmall-medium: 500 .5rem / .5rem Roboto; --ig-typography-caption-xsmall-regular: 400 .5rem / .5rem Roboto; --ig-typography-caption-small-bold: 700 .625rem / .75rem Roboto; --ig-typography-caption-small-medium: 500 .625rem / .75rem Roboto; --ig-typography-caption-small-regular: 400 .625rem / .75rem Roboto; --ig-typography-caption-medium-bold: 700 .75rem / 1rem Roboto; --ig-typography-caption-medium-medium: 500 .75rem / 1rem Roboto; --ig-typography-caption-medium-regular: 400 .75rem / 1rem Roboto; --ig-typography-caption-large-bold: 700 .875rem / 1.25rem Roboto; --ig-typography-caption-large-medium: 500 .875rem / 1.25rem Roboto; --ig-typography-caption-large-regular: 400 .875rem / 1.25rem Roboto; --ig-text-decoration-link: underline; --ig-text-decoration-none: none; --ig-text-decoration-invalid: line-through; --ig-text-transform-none: none; --ig-text-transform-lowercase: lowercase; --ig-text-transform-uppercase: uppercase; --ig-letter-spacing-heading: -.8rem; --ig-letter-spacing-body: 0; --ig-letter-spacing-caption: 0; --ig-box-shadow-focus: 0px 0px 0px 2px var(--ig-border-focus); --ig-transition-duration: .25s; }

:root, [data-theme="light"] { color-scheme: light; }

[data-theme="dark"] { color-scheme: dark; }

*, :before, :after { box-sizing: border-box; background-repeat: no-repeat; }

:before, :after { text-decoration: inherit; vertical-align: inherit; }

@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } }

@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; transition: none; animation: none; } }

html { height: 100%; }

body { text-align: start; height: auto; min-height: 100%; color: var(--ig-text-bold); background-color: var(--ig-background-page-clear); overflow-wrap: break-word; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; -webkit-tap-highlight-color: transparent; margin: 0; }

p { margin-top: 0; margin-bottom: var(--ig-size-200); }

pre { margin: var(--ig-size-200) 0; background-color: var(--ig-background-surface-on-clear-soft); padding: var(--ig-size-100); display: block; overflow: auto; }

pre code { color: inherit; word-break: normal; }

pre code:before, pre code:after { content: ""; }

code { word-wrap: break-word; }

code:before, code:after { content: "'"; }

blockquote { padding: var(--ig-component-input-medium-vertical-padding) var(--ig-component-input-small-horizontal-padding); border-left: var(--ig-border-width-2x) solid var(--ig-background-subtle-pressed); background-color: var(--ig-background-surface-on-clear-soft); }

blockquote p { margin: 0; }

figure { margin: 0 0 var(--ig-size-200); }

img, svg { vertical-align: middle; }

hr { margin: var(--ig-size-200) 0; color: var(--ig-border-bold); border: 0; border-top: 1px solid var(--ig-border-bold); opacity: 1; }

table { caption-side: bottom; border-collapse: collapse; }

caption { padding-top: var(--ig-size-100); padding-bottom: var(--ig-size-100); text-align: left; }

th { text-align: inherit; text-align: -webkit-match-parent; }

thead, tbody, tfoot, tr, td, th { border-color: inherit; border-style: solid; border-width: 0; }

label { display: inline-block; }

button { border: 0; border-radius: 0; }

input, button, select, optgroup, textarea { font-family: inherit; font-size: inherit; line-height: inherit; margin: 0; }

button, select { text-transform: none; }

[role="button"] { cursor: pointer; }

select { word-wrap: normal; }

select:disabled { opacity: 1; }

button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; appearance: button; }

button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; }

textarea { resize: vertical; }

fieldset { border: 0; min-width: 0; margin: 0; padding: 0; }

legend { float: left; width: 100%; margin-bottom: var(--ig-size-100); font-size: inherit; font-weight: inherit; line-height: inherit; padding: 0; }

legend + * { clear: left; }

iframe { border: 0; }

[hidden] { display: none !important; }

h6, .h6, div[role="heading"][aria-level="6"], h5, .h5, div[role="heading"][aria-level="5"], h4, .h4, div[role="heading"][aria-level="4"], h3, .h3, div[role="heading"][aria-level="3"], h2, .h2, div[role="heading"][aria-level="2"], h1, .h1, div[role="heading"][aria-level="1"] { margin-top: 0; margin-bottom: var(--ig-size-100); }

body { font: var(--ig-typography-body-medium-regular); -webkit-font-smoothing: antialiased; font-feature-settings: "kern" 1; }

h1, .h1, div[role="heading"][aria-level="1"] { font: var(--ig-typography-heading-xxlarge-bold); }

h2, .h2, div[role="heading"][aria-level="2"] { font: var(--ig-typography-heading-xlarge-bold); }

h3, .h3, div[role="heading"][aria-level="3"] { font: var(--ig-typography-heading-large-bold); }

h4, .h4, div[role="heading"][aria-level="4"] { font: var(--ig-typography-heading-medium-bold); }

h5, .h5, div[role="heading"][aria-level="5"] { font: var(--ig-typography-heading-small-bold); }

h6, .h6, div[role="heading"][aria-level="6"] { font: var(--ig-typography-heading-xsmall-bold); }

b, strong { font-weight: var(--ig-font-weight-medium); }

small { font: var(--ig-typography-body-small-regular); }

pre, code { font-size: var(--ig-font-size-body); font-family: var(--ig-font-family-mono); }

.ig-btn:focus-visible, a:focus-visible { outline: var(--ig-border-focus) solid 2px; }

a { outline: 0; }

.ig-btn { outline: 0; text-decoration: none; overflow: hidden; }

.ig-btn:is(:hover, :focus, :focus-visible) { transform: none; }

.ig-btn:is(.disabled, [disabled]) { cursor: default; box-shadow: none; }

.m-0 { margin: 0; }

.m-1 { margin: .375rem; }

.m-2 { margin: .75rem; }

.m, .m-3 { margin: 1.25rem; }

.m-4 { margin: 2rem; }

.m-5 { margin: 2.5rem; }

.m-6 { margin: 4rem; }

.m-auto { margin: auto; }

.mx-0 { margin-left: 0; margin-right: 0; }

.mx-1 { margin-left: .375rem; margin-right: .375rem; }

.mx-2 { margin-left: .75rem; margin-right: .75rem; }

.mx, .mx-3 { margin-left: 1.25rem; margin-right: 1.25rem; }

.mx-4 { margin-left: 2rem; margin-right: 2rem; }

.mx-5 { margin-left: 2.5rem; margin-right: 2.5rem; }

.mx-6 { margin-left: 4rem; margin-right: 4rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

.my-0 { margin-top: 0; margin-bottom: 0; }

.my-1 { margin-top: .375rem; margin-bottom: .375rem; }

.my-2 { margin-top: .75rem; margin-bottom: .75rem; }

.my, .my-3 { margin-top: 1.25rem; margin-bottom: 1.25rem; }

.my-4 { margin-top: 2rem; margin-bottom: 2rem; }

.my-5 { margin-top: 2.5rem; margin-bottom: 2.5rem; }

.my-6 { margin-top: 4rem; margin-bottom: 4rem; }

.my-auto { margin-top: auto; margin-bottom: auto; }

.mt-0 { margin-top: 0; }

.mt-1 { margin-top: .375rem; }

.mt-2 { margin-top: .75rem; }

.mt, .mt-3 { margin-top: 1.25rem; }

.mt-4 { margin-top: 2rem; }

.mt-5 { margin-top: 2.5rem; }

.mt-6 { margin-top: 4rem; }

.mt-auto { margin-top: auto; }

.me-0 { margin-right: 0; }

.me-1 { margin-right: .375rem; }

.me-2 { margin-right: .75rem; }

.me, .me-3 { margin-right: 1.25rem; }

.me-4 { margin-right: 2rem; }

.me-5 { margin-right: 2.5rem; }

.me-6 { margin-right: 4rem; }

.me-auto { margin-right: auto; }

.mb-0 { margin-bottom: 0; }

.mb-1 { margin-bottom: .375rem; }

.mb-2 { margin-bottom: .75rem; }

.mb, .mb-3 { margin-bottom: 1.25rem; }

.mb-4 { margin-bottom: 2rem; }

.mb-5 { margin-bottom: 2.5rem; }

.mb-6 { margin-bottom: 4rem; }

.mb-auto { margin-bottom: auto; }

.ms-0 { margin-left: 0; }

.ms-1 { margin-left: .375rem; }

.ms-2 { margin-left: .75rem; }

.ms, .ms-3 { margin-left: 1.25rem; }

.ms-4 { margin-left: 2rem; }

.ms-5 { margin-left: 2.5rem; }

.ms-6 { margin-left: 4rem; }

.ms-auto { margin-left: auto; }

.p-0 { padding: 0; }

.p-1 { padding: .375rem; }

.p-2 { padding: .75rem; }

.p, .p-3 { padding: 1.25rem; }

.p-4 { padding: 2rem; }

.p-5 { padding: 2.5rem; }

.p-6 { padding: 4rem; }

.px-0 { padding-left: 0; padding-right: 0; }

.px-1 { padding-left: .375rem; padding-right: .375rem; }

.px-2 { padding-left: .75rem; padding-right: .75rem; }

.px, .px-3 { padding-left: 1.25rem; padding-right: 1.25rem; }

.px-4 { padding-left: 2rem; padding-right: 2rem; }

.px-5 { padding-left: 2.5rem; padding-right: 2.5rem; }

.px-6 { padding-left: 4rem; padding-right: 4rem; }

.py-0 { padding-top: 0; padding-bottom: 0; }

.py-1 { padding-top: .375rem; padding-bottom: .375rem; }

.py-2 { padding-top: .75rem; padding-bottom: .75rem; }

.py, .py-3 { padding-top: 1.25rem; padding-bottom: 1.25rem; }

.py-4 { padding-top: 2rem; padding-bottom: 2rem; }

.py-5 { padding-top: 2.5rem; padding-bottom: 2.5rem; }

.py-6 { padding-top: 4rem; padding-bottom: 4rem; }

.pt-0 { padding-top: 0; }

.pt-1 { padding-top: .375rem; }

.pt-2 { padding-top: .75rem; }

.pt, .pt-3 { padding-top: 1.25rem; }

.pt-4 { padding-top: 2rem; }

.pt-5 { padding-top: 2.5rem; }

.pt-6 { padding-top: 4rem; }

.pe-0 { padding-right: 0; }

.pe-1 { padding-right: .375rem; }

.pe-2 { padding-right: .75rem; }

.pe, .pe-3 { padding-right: 1.25rem; }

.pe-4 { padding-right: 2rem; }

.pe-5 { padding-right: 2.5rem; }

.pe-6 { padding-right: 4rem; }

.pb-0 { padding-bottom: 0; }

.pb-1 { padding-bottom: .375rem; }

.pb-2 { padding-bottom: .75rem; }

.pb, .pb-3 { padding-bottom: 1.25rem; }

.pb-4 { padding-bottom: 2rem; }

.pb-5 { padding-bottom: 2.5rem; }

.pb-6 { padding-bottom: 4rem; }

.ps-0 { padding-left: 0; }

.ps-1 { padding-left: .375rem; }

.ps-2 { padding-left: .75rem; }

.ps, .ps-3 { padding-left: 1.25rem; }

.ps-4 { padding-left: 2rem; }

.ps-5 { padding-left: 2.5rem; }

.ps-6 { padding-left: 4rem; }

.gap-0 { gap: 0; }

.gap-1 { gap: .375rem; }

.gap-2 { gap: .75rem; }

.gap, .gap-3 { gap: 1.25rem; }

.gap-4 { gap: 2rem; }

.gap-5 { gap: 2.5rem; }

.gap-6 { gap: 4rem; }

.position-static { position: static; }

.position-relative { position: relative; }

.position-absolute { position: absolute; }

.position-fixed { position: fixed; }

.position-sticky { position: sticky; }

.cursor-pointer { cursor: pointer; }

.cursor-not-allowed { cursor: not-allowed; }

.cursor-wait { cursor: wait; }

.flip-h { transform: scaleX(-1); }

.flip-v { transform: scaleY(-1); }

#ig-application { --ig-grid-header-height: 48px; --ig-grid-nav-width: 238px; --ig-grid-footer-height: 48px; grid-template-areas: "header header" "nav content"; grid-template-rows: var(--ig-grid-header-height) 1fr; grid-template-columns: var(--ig-grid-nav-width) 1fr; width: 100vw; height: 100vh; display: grid; }

#ig-application #ig-application--header { grid-area: header; }

#ig-application #ig-application--nav { grid-area: nav; overflow: auto; }

#ig-application #ig-application--content { grid-area: content; position: relative; overflow: auto; }

#ig-application #ig-application--footer { display: none; }

.ig-container, .ig-container-fluid, .ig-container-xxl, .ig-container-xl, .ig-container-lg, .ig-container-md, .ig-container-sm, .ig-container-xs { --ig-container-padding-x: var(--ig-size-300); width: 100%; padding-left: calc(var(--ig-container-padding-x) * .5); padding-right: calc(var(--ig-container-padding-x) * .5); margin-left: auto; margin-right: auto; }

@media (width >= 576px) { .ig-container-sm, .ig-container { max-width: 540px; } }

@media (width >= 768px) { .ig-container-md, .ig-container-sm, .ig-container { max-width: 720px; } }

@media (width >= 992px) { .ig-container-lg, .ig-container-md, .ig-container-sm, .ig-container { max-width: 960px; } }

@media (width >= 1200px) { .ig-container-xl, .ig-container-lg, .ig-container-md, .ig-container-sm, .ig-container { max-width: 1140px; } }

@media (width >= 1920px) { .ig-container-xxl, .ig-container-xl, .ig-container-lg, .ig-container-md, .ig-container-sm, .ig-container { max-width: 1280px; } }

.ig-grid { --ig-grid-columns: 12; --ig-grid-col-gap: 1rem; --ig-grid-row-gap: 1rem; grid-template-columns: repeat(var(--ig-grid-columns), 1fr); gap: var(--ig-grid-row-gap) var(--ig-grid-col-gap); display: grid; }

.ig-grid .ig-col-1 { grid-column: auto / span 1; }

.ig-grid .ig-col-start-1 { grid-column-start: 1; }

.ig-grid .ig-col-end-1 { grid-column-end: 2; }

.ig-grid .ig-col-2 { grid-column: auto / span 2; }

.ig-grid .ig-col-start-2 { grid-column-start: 2; }

.ig-grid .ig-col-end-2 { grid-column-end: 3; }

.ig-grid .ig-col-3 { grid-column: auto / span 3; }

.ig-grid .ig-col-start-3 { grid-column-start: 3; }

.ig-grid .ig-col-end-3 { grid-column-end: 4; }

.ig-grid .ig-col-4 { grid-column: auto / span 4; }

.ig-grid .ig-col-start-4 { grid-column-start: 4; }

.ig-grid .ig-col-end-4 { grid-column-end: 5; }

.ig-grid .ig-col-5 { grid-column: auto / span 5; }

.ig-grid .ig-col-start-5 { grid-column-start: 5; }

.ig-grid .ig-col-end-5 { grid-column-end: 6; }

.ig-grid .ig-col-6 { grid-column: auto / span 6; }

.ig-grid .ig-col-start-6 { grid-column-start: 6; }

.ig-grid .ig-col-end-6 { grid-column-end: 7; }

.ig-grid .ig-col-7 { grid-column: auto / span 7; }

.ig-grid .ig-col-start-7 { grid-column-start: 7; }

.ig-grid .ig-col-end-7 { grid-column-end: 8; }

.ig-grid .ig-col-8 { grid-column: auto / span 8; }

.ig-grid .ig-col-start-8 { grid-column-start: 8; }

.ig-grid .ig-col-end-8 { grid-column-end: 9; }

.ig-grid .ig-col-9 { grid-column: auto / span 9; }

.ig-grid .ig-col-start-9 { grid-column-start: 9; }

.ig-grid .ig-col-end-9 { grid-column-end: 10; }

.ig-grid .ig-col-10 { grid-column: auto / span 10; }

.ig-grid .ig-col-start-10 { grid-column-start: 10; }

.ig-grid .ig-col-end-10 { grid-column-end: 11; }

.ig-grid .ig-col-11 { grid-column: auto / span 11; }

.ig-grid .ig-col-start-11 { grid-column-start: 11; }

.ig-grid .ig-col-end-11 { grid-column-end: 12; }

.ig-grid .ig-col-12 { grid-column: auto / span 12; }

.ig-grid .ig-col-start-12 { grid-column-start: 12; }

.ig-grid .ig-col-end-12 { grid-column-end: 13; }

@media (width >= 576px) { .ig-grid .ig-col-sm-1 { grid-column: auto / span 1; }

.ig-grid .ig-col-sm-start-1 { grid-column-start: 1; }

.ig-grid .ig-col-sm-end-1 { grid-column-end: 2; }

.ig-grid .ig-col-sm-2 { grid-column: auto / span 2; }

.ig-grid .ig-col-sm-start-2 { grid-column-start: 2; }

.ig-grid .ig-col-sm-end-2 { grid-column-end: 3; }

.ig-grid .ig-col-sm-3 { grid-column: auto / span 3; }

.ig-grid .ig-col-sm-start-3 { grid-column-start: 3; }

.ig-grid .ig-col-sm-end-3 { grid-column-end: 4; }

.ig-grid .ig-col-sm-4 { grid-column: auto / span 4; }

.ig-grid .ig-col-sm-start-4 { grid-column-start: 4; }

.ig-grid .ig-col-sm-end-4 { grid-column-end: 5; }

.ig-grid .ig-col-sm-5 { grid-column: auto / span 5; }

.ig-grid .ig-col-sm-start-5 { grid-column-start: 5; }

.ig-grid .ig-col-sm-end-5 { grid-column-end: 6; }

.ig-grid .ig-col-sm-6 { grid-column: auto / span 6; }

.ig-grid .ig-col-sm-start-6 { grid-column-start: 6; }

.ig-grid .ig-col-sm-end-6 { grid-column-end: 7; }

.ig-grid .ig-col-sm-7 { grid-column: auto / span 7; }

.ig-grid .ig-col-sm-start-7 { grid-column-start: 7; }

.ig-grid .ig-col-sm-end-7 { grid-column-end: 8; }

.ig-grid .ig-col-sm-8 { grid-column: auto / span 8; }

.ig-grid .ig-col-sm-start-8 { grid-column-start: 8; }

.ig-grid .ig-col-sm-end-8 { grid-column-end: 9; }

.ig-grid .ig-col-sm-9 { grid-column: auto / span 9; }

.ig-grid .ig-col-sm-start-9 { grid-column-start: 9; }

.ig-grid .ig-col-sm-end-9 { grid-column-end: 10; }

.ig-grid .ig-col-sm-10 { grid-column: auto / span 10; }

.ig-grid .ig-col-sm-start-10 { grid-column-start: 10; }

.ig-grid .ig-col-sm-end-10 { grid-column-end: 11; }

.ig-grid .ig-col-sm-11 { grid-column: auto / span 11; }

.ig-grid .ig-col-sm-start-11 { grid-column-start: 11; }

.ig-grid .ig-col-sm-end-11 { grid-column-end: 12; }

.ig-grid .ig-col-sm-12 { grid-column: auto / span 12; }

.ig-grid .ig-col-sm-start-12 { grid-column-start: 12; }

.ig-grid .ig-col-sm-end-12 { grid-column-end: 13; } }

@media (width >= 768px) { .ig-grid .ig-col-md-1 { grid-column: auto / span 1; }

.ig-grid .ig-col-md-start-1 { grid-column-start: 1; }

.ig-grid .ig-col-md-end-1 { grid-column-end: 2; }

.ig-grid .ig-col-md-2 { grid-column: auto / span 2; }

.ig-grid .ig-col-md-start-2 { grid-column-start: 2; }

.ig-grid .ig-col-md-end-2 { grid-column-end: 3; }

.ig-grid .ig-col-md-3 { grid-column: auto / span 3; }

.ig-grid .ig-col-md-start-3 { grid-column-start: 3; }

.ig-grid .ig-col-md-end-3 { grid-column-end: 4; }

.ig-grid .ig-col-md-4 { grid-column: auto / span 4; }

.ig-grid .ig-col-md-start-4 { grid-column-start: 4; }

.ig-grid .ig-col-md-end-4 { grid-column-end: 5; }

.ig-grid .ig-col-md-5 { grid-column: auto / span 5; }

.ig-grid .ig-col-md-start-5 { grid-column-start: 5; }

.ig-grid .ig-col-md-end-5 { grid-column-end: 6; }

.ig-grid .ig-col-md-6 { grid-column: auto / span 6; }

.ig-grid .ig-col-md-start-6 { grid-column-start: 6; }

.ig-grid .ig-col-md-end-6 { grid-column-end: 7; }

.ig-grid .ig-col-md-7 { grid-column: auto / span 7; }

.ig-grid .ig-col-md-start-7 { grid-column-start: 7; }

.ig-grid .ig-col-md-end-7 { grid-column-end: 8; }

.ig-grid .ig-col-md-8 { grid-column: auto / span 8; }

.ig-grid .ig-col-md-start-8 { grid-column-start: 8; }

.ig-grid .ig-col-md-end-8 { grid-column-end: 9; }

.ig-grid .ig-col-md-9 { grid-column: auto / span 9; }

.ig-grid .ig-col-md-start-9 { grid-column-start: 9; }

.ig-grid .ig-col-md-end-9 { grid-column-end: 10; }

.ig-grid .ig-col-md-10 { grid-column: auto / span 10; }

.ig-grid .ig-col-md-start-10 { grid-column-start: 10; }

.ig-grid .ig-col-md-end-10 { grid-column-end: 11; }

.ig-grid .ig-col-md-11 { grid-column: auto / span 11; }

.ig-grid .ig-col-md-start-11 { grid-column-start: 11; }

.ig-grid .ig-col-md-end-11 { grid-column-end: 12; }

.ig-grid .ig-col-md-12 { grid-column: auto / span 12; }

.ig-grid .ig-col-md-start-12 { grid-column-start: 12; }

.ig-grid .ig-col-md-end-12 { grid-column-end: 13; } }

@media (width >= 992px) { .ig-grid .ig-col-lg-1 { grid-column: auto / span 1; }

.ig-grid .ig-col-lg-start-1 { grid-column-start: 1; }

.ig-grid .ig-col-lg-end-1 { grid-column-end: 2; }

.ig-grid .ig-col-lg-2 { grid-column: auto / span 2; }

.ig-grid .ig-col-lg-start-2 { grid-column-start: 2; }

.ig-grid .ig-col-lg-end-2 { grid-column-end: 3; }

.ig-grid .ig-col-lg-3 { grid-column: auto / span 3; }

.ig-grid .ig-col-lg-start-3 { grid-column-start: 3; }

.ig-grid .ig-col-lg-end-3 { grid-column-end: 4; }

.ig-grid .ig-col-lg-4 { grid-column: auto / span 4; }

.ig-grid .ig-col-lg-start-4 { grid-column-start: 4; }

.ig-grid .ig-col-lg-end-4 { grid-column-end: 5; }

.ig-grid .ig-col-lg-5 { grid-column: auto / span 5; }

.ig-grid .ig-col-lg-start-5 { grid-column-start: 5; }

.ig-grid .ig-col-lg-end-5 { grid-column-end: 6; }

.ig-grid .ig-col-lg-6 { grid-column: auto / span 6; }

.ig-grid .ig-col-lg-start-6 { grid-column-start: 6; }

.ig-grid .ig-col-lg-end-6 { grid-column-end: 7; }

.ig-grid .ig-col-lg-7 { grid-column: auto / span 7; }

.ig-grid .ig-col-lg-start-7 { grid-column-start: 7; }

.ig-grid .ig-col-lg-end-7 { grid-column-end: 8; }

.ig-grid .ig-col-lg-8 { grid-column: auto / span 8; }

.ig-grid .ig-col-lg-start-8 { grid-column-start: 8; }

.ig-grid .ig-col-lg-end-8 { grid-column-end: 9; }

.ig-grid .ig-col-lg-9 { grid-column: auto / span 9; }

.ig-grid .ig-col-lg-start-9 { grid-column-start: 9; }

.ig-grid .ig-col-lg-end-9 { grid-column-end: 10; }

.ig-grid .ig-col-lg-10 { grid-column: auto / span 10; }

.ig-grid .ig-col-lg-start-10 { grid-column-start: 10; }

.ig-grid .ig-col-lg-end-10 { grid-column-end: 11; }

.ig-grid .ig-col-lg-11 { grid-column: auto / span 11; }

.ig-grid .ig-col-lg-start-11 { grid-column-start: 11; }

.ig-grid .ig-col-lg-end-11 { grid-column-end: 12; }

.ig-grid .ig-col-lg-12 { grid-column: auto / span 12; }

.ig-grid .ig-col-lg-start-12 { grid-column-start: 12; }

.ig-grid .ig-col-lg-end-12 { grid-column-end: 13; } }

@media (width >= 1200px) { .ig-grid .ig-col-xl-1 { grid-column: auto / span 1; }

.ig-grid .ig-col-xl-start-1 { grid-column-start: 1; }

.ig-grid .ig-col-xl-end-1 { grid-column-end: 2; }

.ig-grid .ig-col-xl-2 { grid-column: auto / span 2; }

.ig-grid .ig-col-xl-start-2 { grid-column-start: 2; }

.ig-grid .ig-col-xl-end-2 { grid-column-end: 3; }

.ig-grid .ig-col-xl-3 { grid-column: auto / span 3; }

.ig-grid .ig-col-xl-start-3 { grid-column-start: 3; }

.ig-grid .ig-col-xl-end-3 { grid-column-end: 4; }

.ig-grid .ig-col-xl-4 { grid-column: auto / span 4; }

.ig-grid .ig-col-xl-start-4 { grid-column-start: 4; }

.ig-grid .ig-col-xl-end-4 { grid-column-end: 5; }

.ig-grid .ig-col-xl-5 { grid-column: auto / span 5; }

.ig-grid .ig-col-xl-start-5 { grid-column-start: 5; }

.ig-grid .ig-col-xl-end-5 { grid-column-end: 6; }

.ig-grid .ig-col-xl-6 { grid-column: auto / span 6; }

.ig-grid .ig-col-xl-start-6 { grid-column-start: 6; }

.ig-grid .ig-col-xl-end-6 { grid-column-end: 7; }

.ig-grid .ig-col-xl-7 { grid-column: auto / span 7; }

.ig-grid .ig-col-xl-start-7 { grid-column-start: 7; }

.ig-grid .ig-col-xl-end-7 { grid-column-end: 8; }

.ig-grid .ig-col-xl-8 { grid-column: auto / span 8; }

.ig-grid .ig-col-xl-start-8 { grid-column-start: 8; }

.ig-grid .ig-col-xl-end-8 { grid-column-end: 9; }

.ig-grid .ig-col-xl-9 { grid-column: auto / span 9; }

.ig-grid .ig-col-xl-start-9 { grid-column-start: 9; }

.ig-grid .ig-col-xl-end-9 { grid-column-end: 10; }

.ig-grid .ig-col-xl-10 { grid-column: auto / span 10; }

.ig-grid .ig-col-xl-start-10 { grid-column-start: 10; }

.ig-grid .ig-col-xl-end-10 { grid-column-end: 11; }

.ig-grid .ig-col-xl-11 { grid-column: auto / span 11; }

.ig-grid .ig-col-xl-start-11 { grid-column-start: 11; }

.ig-grid .ig-col-xl-end-11 { grid-column-end: 12; }

.ig-grid .ig-col-xl-12 { grid-column: auto / span 12; }

.ig-grid .ig-col-xl-start-12 { grid-column-start: 12; }

.ig-grid .ig-col-xl-end-12 { grid-column-end: 13; } }

@media (width >= 1920px) { .ig-grid .ig-col-xxl-1 { grid-column: auto / span 1; }

.ig-grid .ig-col-xxl-start-1 { grid-column-start: 1; }

.ig-grid .ig-col-xxl-end-1 { grid-column-end: 2; }

.ig-grid .ig-col-xxl-2 { grid-column: auto / span 2; }

.ig-grid .ig-col-xxl-start-2 { grid-column-start: 2; }

.ig-grid .ig-col-xxl-end-2 { grid-column-end: 3; }

.ig-grid .ig-col-xxl-3 { grid-column: auto / span 3; }

.ig-grid .ig-col-xxl-start-3 { grid-column-start: 3; }

.ig-grid .ig-col-xxl-end-3 { grid-column-end: 4; }

.ig-grid .ig-col-xxl-4 { grid-column: auto / span 4; }

.ig-grid .ig-col-xxl-start-4 { grid-column-start: 4; }

.ig-grid .ig-col-xxl-end-4 { grid-column-end: 5; }

.ig-grid .ig-col-xxl-5 { grid-column: auto / span 5; }

.ig-grid .ig-col-xxl-start-5 { grid-column-start: 5; }

.ig-grid .ig-col-xxl-end-5 { grid-column-end: 6; }

.ig-grid .ig-col-xxl-6 { grid-column: auto / span 6; }

.ig-grid .ig-col-xxl-start-6 { grid-column-start: 6; }

.ig-grid .ig-col-xxl-end-6 { grid-column-end: 7; }

.ig-grid .ig-col-xxl-7 { grid-column: auto / span 7; }

.ig-grid .ig-col-xxl-start-7 { grid-column-start: 7; }

.ig-grid .ig-col-xxl-end-7 { grid-column-end: 8; }

.ig-grid .ig-col-xxl-8 { grid-column: auto / span 8; }

.ig-grid .ig-col-xxl-start-8 { grid-column-start: 8; }

.ig-grid .ig-col-xxl-end-8 { grid-column-end: 9; }

.ig-grid .ig-col-xxl-9 { grid-column: auto / span 9; }

.ig-grid .ig-col-xxl-start-9 { grid-column-start: 9; }

.ig-grid .ig-col-xxl-end-9 { grid-column-end: 10; }

.ig-grid .ig-col-xxl-10 { grid-column: auto / span 10; }

.ig-grid .ig-col-xxl-start-10 { grid-column-start: 10; }

.ig-grid .ig-col-xxl-end-10 { grid-column-end: 11; }

.ig-grid .ig-col-xxl-11 { grid-column: auto / span 11; }

.ig-grid .ig-col-xxl-start-11 { grid-column-start: 11; }

.ig-grid .ig-col-xxl-end-11 { grid-column-end: 12; }

.ig-grid .ig-col-xxl-12 { grid-column: auto / span 12; }

.ig-grid .ig-col-xxl-start-12 { grid-column-start: 12; }

.ig-grid .ig-col-xxl-end-12 { grid-column-end: 13; } }

.ig-avatar { --ig-avatar-gray-bold-background: var(--ig-background-bold); --ig-avatar-gray-bold-border: var(--ig-border-clear); --ig-avatar-gray-bold-content: var(--ig-text-on-bold-bold); --ig-avatar-gray-subtle-background: var(--ig-background-soft); --ig-avatar-gray-subtle-border: var(--ig-border-medium); --ig-avatar-gray-subtle-content: var(--ig-text-bold); --ig-avatar-accent-01-bold-background: var(--ig-background-accent-1-bold); --ig-avatar-accent-01-bold-border: var(--ig-border-clear); --ig-avatar-accent-01-bold-content: var(--ig-text-on-bold-bold); --ig-avatar-accent-01-subtle-background: var(--ig-background-accent-1-subtle); --ig-avatar-accent-01-subtle-border: var(--ig-border-accent-1-bold); --ig-avatar-accent-01-subtle-content: var(--ig-text-accent-1); --ig-avatar-accent-02-bold-background: var(--ig-background-accent-2-bold); --ig-avatar-accent-02-bold-border: var(--ig-border-clear); --ig-avatar-accent-02-bold-content: var(--ig-text-on-bold-bold); --ig-avatar-accent-02-subtle-background: var(--ig-background-accent-2-subtle); --ig-avatar-accent-02-subtle-border: var(--ig-border-accent-2-bold); --ig-avatar-accent-02-subtle-content: var(--ig-text-accent-2); --ig-avatar-accent-03-bold-background: var(--ig-background-accent-3-bold); --ig-avatar-accent-03-bold-border: var(--ig-border-clear); --ig-avatar-accent-03-bold-content: var(--ig-text-on-bold-bold); --ig-avatar-accent-03-subtle-background: var(--ig-background-accent-3-subtle); --ig-avatar-accent-03-subtle-border: var(--ig-border-accent-3-bold); --ig-avatar-accent-03-subtle-content: var(--ig-text-accent-3); --ig-avatar-accent-04-bold-background: var(--ig-background-accent-4-bold); --ig-avatar-accent-04-bold-border: var(--ig-border-clear); --ig-avatar-accent-04-bold-content: var(--ig-text-on-bold-bold); --ig-avatar-accent-04-subtle-background: var(--ig-background-accent-4-subtle); --ig-avatar-accent-04-subtle-border: var(--ig-border-accent-4-bold); --ig-avatar-accent-04-subtle-content: var(--ig-text-accent-4); --ig-avatar-accent-05-bold-background: var(--ig-background-accent-5-bold); --ig-avatar-accent-05-bold-border: var(--ig-border-clear); --ig-avatar-accent-05-bold-content: var(--ig-text-on-bold-bold); --ig-avatar-accent-05-subtle-background: var(--ig-background-accent-5-subtle); --ig-avatar-accent-05-subtle-border: var(--ig-border-accent-5-bold); --ig-avatar-accent-05-subtle-content: var(--ig-text-accent-5); --ig-avatar-accent-06-bold-background: var(--ig-background-accent-6-bold); --ig-avatar-accent-06-bold-border: var(--ig-border-clear); --ig-avatar-accent-06-bold-content: var(--ig-text-on-bold-bold); --ig-avatar-accent-06-subtle-background: var(--ig-background-accent-6-subtle); --ig-avatar-accent-06-subtle-border: var(--ig-border-accent-6-bold); --ig-avatar-accent-06-subtle-content: var(--ig-text-accent-6); --ig-avatar-accent-07-bold-background: var(--ig-background-accent-7-bold); --ig-avatar-accent-07-bold-border: var(--ig-border-clear); --ig-avatar-accent-07-bold-content: var(--ig-text-on-bold-bold); --ig-avatar-accent-07-subtle-background: var(--ig-background-accent-7-subtle); --ig-avatar-accent-07-subtle-border: var(--ig-border-accent-7-bold); --ig-avatar-accent-07-subtle-content: var(--ig-text-accent-7); --ig-avatar-accent-08-bold-background: var(--ig-background-accent-8-bold); --ig-avatar-accent-08-bold-border: var(--ig-border-clear); --ig-avatar-accent-08-bold-content: var(--ig-text-on-bold-bold); --ig-avatar-accent-08-subtle-background: var(--ig-background-accent-8-subtle); --ig-avatar-accent-08-subtle-border: var(--ig-border-accent-8-bold); --ig-avatar-accent-08-subtle-content: var(--ig-text-accent-8); --ig-avatar-accent-09-bold-background: var(--ig-background-accent-9-bold); --ig-avatar-accent-09-bold-border: var(--ig-border-clear); --ig-avatar-accent-09-bold-content: var(--ig-text-on-bold-bold); --ig-avatar-accent-09-subtle-background: var(--ig-background-accent-9-subtle); --ig-avatar-accent-09-subtle-border: var(--ig-border-accent-9-bold); --ig-avatar-accent-09-subtle-content: var(--ig-text-accent-9); --ig-avatar-accent-10-bold-background: var(--ig-background-accent-10-bold); --ig-avatar-accent-10-bold-border: var(--ig-border-clear); --ig-avatar-accent-10-bold-content: var(--ig-text-on-bold-bold); --ig-avatar-accent-10-subtle-background: var(--ig-background-accent-10-subtle); --ig-avatar-accent-10-subtle-border: var(--ig-border-accent-10-bold); --ig-avatar-accent-10-subtle-content: var(--ig-text-accent-10); --ig-avatar-accent-11-bold-background: var(--ig-background-accent-11-bold); --ig-avatar-accent-11-bold-border: var(--ig-border-clear); --ig-avatar-accent-11-bold-content: var(--ig-text-on-bold-bold); --ig-avatar-accent-11-subtle-background: var(--ig-background-accent-11-subtle); --ig-avatar-accent-11-subtle-border: var(--ig-border-accent-11-bold); --ig-avatar-accent-11-subtle-content: var(--ig-text-accent-11); --ig-avatar-accent-12-bold-background: var(--ig-background-accent-12-bold); --ig-avatar-accent-12-bold-border: var(--ig-border-clear); --ig-avatar-accent-12-bold-content: var(--ig-text-on-bold-bold); --ig-avatar-accent-12-subtle-background: var(--ig-background-accent-12-subtle); --ig-avatar-accent-12-subtle-border: var(--ig-border-accent-12-bold); --ig-avatar-accent-12-subtle-content: var(--ig-text-accent-12); --ig-avatar-size: var(--ig-size-500); --ig-avatar-font: var(--ig-font-weight-regular) var(--ig-size-200) / var(--ig-size-300) var(--ig-font-family-body); --ig-avatar-icon-size: var(--ig-size-300); --ig-avatar-bg: var(--ig-avatar-gray-bold-background); --ig-avatar-border: var(--ig-avatar-gray-bold-border); --ig-avatar-color: var(--ig-avatar-gray-bold-content); white-space: nowrap; font: var(--ig-avatar-font); text-transform: var(--ig-text-transform-uppercase); width: var(--ig-avatar-size); height: var(--ig-avatar-size); background-color: var(--ig-avatar-bg); border: solid 1px var(--ig-avatar-border); color: var(--ig-avatar-color); border-radius: 50%; justify-content: center; align-items: center; display: flex; position: relative; }

.ig-avatar.ig-avatar--subtle { --ig-avatar-bg: var(--ig-avatar-gray-subtle-background); --ig-avatar-border: var(--ig-avatar-gray-subtle-border); --ig-avatar-color: var(--ig-avatar-gray-subtle-content); }

.ig-avatar > img { vertical-align: top; border-radius: 50%; width: 100%; }

.ig-avatar > i { font-size: var(--ig-avatar-icon-size); line-height: 0; }

.ig-avatar.ig-avatar--gray { --ig-avatar-bg: var(--ig-avatar-gray-bold-background); --ig-avatar-border: var(--ig-avatar-gray-bold-border); --ig-avatar-color: var(--ig-avatar-gray-bold-content); }

.ig-avatar.ig-avatar--gray.ig-avatar--subtle { --ig-avatar-bg: var(--ig-avatar-gray-subtle-background); --ig-avatar-border: var(--ig-avatar-gray-subtle-border); --ig-avatar-color: var(--ig-avatar-gray-subtle-content); }

.ig-avatar.ig-avatar--accent-01 { --ig-avatar-bg: var(--ig-avatar-accent-01-bold-background); --ig-avatar-border: var(--ig-avatar-accent-01-bold-border); --ig-avatar-color: var(--ig-avatar-accent-01-bold-content); }

.ig-avatar.ig-avatar--accent-01.ig-avatar--subtle { --ig-avatar-bg: var(--ig-avatar-accent-01-subtle-background); --ig-avatar-border: var(--ig-avatar-accent-01-subtle-border); --ig-avatar-color: var(--ig-avatar-accent-01-subtle-content); }

.ig-avatar.ig-avatar--accent-02 { --ig-avatar-bg: var(--ig-avatar-accent-02-bold-background); --ig-avatar-border: var(--ig-avatar-accent-02-bold-border); --ig-avatar-color: var(--ig-avatar-accent-02-bold-content); }

.ig-avatar.ig-avatar--accent-02.ig-avatar--subtle { --ig-avatar-bg: var(--ig-avatar-accent-02-subtle-background); --ig-avatar-border: var(--ig-avatar-accent-02-subtle-border); --ig-avatar-color: var(--ig-avatar-accent-02-subtle-content); }

.ig-avatar.ig-avatar--accent-03 { --ig-avatar-bg: var(--ig-avatar-accent-03-bold-background); --ig-avatar-border: var(--ig-avatar-accent-03-bold-border); --ig-avatar-color: var(--ig-avatar-accent-03-bold-content); }

.ig-avatar.ig-avatar--accent-03.ig-avatar--subtle { --ig-avatar-bg: var(--ig-avatar-accent-03-subtle-background); --ig-avatar-border: var(--ig-avatar-accent-03-subtle-border); --ig-avatar-color: var(--ig-avatar-accent-03-subtle-content); }

.ig-avatar.ig-avatar--accent-04 { --ig-avatar-bg: var(--ig-avatar-accent-04-bold-background); --ig-avatar-border: var(--ig-avatar-accent-04-bold-border); --ig-avatar-color: var(--ig-avatar-accent-04-bold-content); }

.ig-avatar.ig-avatar--accent-04.ig-avatar--subtle { --ig-avatar-bg: var(--ig-avatar-accent-04-subtle-background); --ig-avatar-border: var(--ig-avatar-accent-04-subtle-border); --ig-avatar-color: var(--ig-avatar-accent-04-subtle-content); }

.ig-avatar.ig-avatar--accent-05 { --ig-avatar-bg: var(--ig-avatar-accent-05-bold-background); --ig-avatar-border: var(--ig-avatar-accent-05-bold-border); --ig-avatar-color: var(--ig-avatar-accent-05-bold-content); }

.ig-avatar.ig-avatar--accent-05.ig-avatar--subtle { --ig-avatar-bg: var(--ig-avatar-accent-05-subtle-background); --ig-avatar-border: var(--ig-avatar-accent-05-subtle-border); --ig-avatar-color: var(--ig-avatar-accent-05-subtle-content); }

.ig-avatar.ig-avatar--accent-06 { --ig-avatar-bg: var(--ig-avatar-accent-06-bold-background); --ig-avatar-border: var(--ig-avatar-accent-06-bold-border); --ig-avatar-color: var(--ig-avatar-accent-06-bold-content); }

.ig-avatar.ig-avatar--accent-06.ig-avatar--subtle { --ig-avatar-bg: var(--ig-avatar-accent-06-subtle-background); --ig-avatar-border: var(--ig-avatar-accent-06-subtle-border); --ig-avatar-color: var(--ig-avatar-accent-06-subtle-content); }

.ig-avatar.ig-avatar--accent-07 { --ig-avatar-bg: var(--ig-avatar-accent-07-bold-background); --ig-avatar-border: var(--ig-avatar-accent-07-bold-border); --ig-avatar-color: var(--ig-avatar-accent-07-bold-content); }

.ig-avatar.ig-avatar--accent-07.ig-avatar--subtle { --ig-avatar-bg: var(--ig-avatar-accent-07-subtle-background); --ig-avatar-border: var(--ig-avatar-accent-07-subtle-border); --ig-avatar-color: var(--ig-avatar-accent-07-subtle-content); }

.ig-avatar.ig-avatar--accent-08 { --ig-avatar-bg: var(--ig-avatar-accent-08-bold-background); --ig-avatar-border: var(--ig-avatar-accent-08-bold-border); --ig-avatar-color: var(--ig-avatar-accent-08-bold-content); }

.ig-avatar.ig-avatar--accent-08.ig-avatar--subtle { --ig-avatar-bg: var(--ig-avatar-accent-08-subtle-background); --ig-avatar-border: var(--ig-avatar-accent-08-subtle-border); --ig-avatar-color: var(--ig-avatar-accent-08-subtle-content); }

.ig-avatar.ig-avatar--accent-09 { --ig-avatar-bg: var(--ig-avatar-accent-09-bold-background); --ig-avatar-border: var(--ig-avatar-accent-09-bold-border); --ig-avatar-color: var(--ig-avatar-accent-09-bold-content); }

.ig-avatar.ig-avatar--accent-09.ig-avatar--subtle { --ig-avatar-bg: var(--ig-avatar-accent-09-subtle-background); --ig-avatar-border: var(--ig-avatar-accent-09-subtle-border); --ig-avatar-color: var(--ig-avatar-accent-09-subtle-content); }

.ig-avatar.ig-avatar--accent-10 { --ig-avatar-bg: var(--ig-avatar-accent-10-bold-background); --ig-avatar-border: var(--ig-avatar-accent-10-bold-border); --ig-avatar-color: var(--ig-avatar-accent-10-bold-content); }

.ig-avatar.ig-avatar--accent-10.ig-avatar--subtle { --ig-avatar-bg: var(--ig-avatar-accent-10-subtle-background); --ig-avatar-border: var(--ig-avatar-accent-10-subtle-border); --ig-avatar-color: var(--ig-avatar-accent-10-subtle-content); }

.ig-avatar.ig-avatar--accent-11 { --ig-avatar-bg: var(--ig-avatar-accent-11-bold-background); --ig-avatar-border: var(--ig-avatar-accent-11-bold-border); --ig-avatar-color: var(--ig-avatar-accent-11-bold-content); }

.ig-avatar.ig-avatar--accent-11.ig-avatar--subtle { --ig-avatar-bg: var(--ig-avatar-accent-11-subtle-background); --ig-avatar-border: var(--ig-avatar-accent-11-subtle-border); --ig-avatar-color: var(--ig-avatar-accent-11-subtle-content); }

.ig-avatar.ig-avatar--accent-12 { --ig-avatar-bg: var(--ig-avatar-accent-12-bold-background); --ig-avatar-border: var(--ig-avatar-accent-12-bold-border); --ig-avatar-color: var(--ig-avatar-accent-12-bold-content); }

.ig-avatar.ig-avatar--accent-12.ig-avatar--subtle { --ig-avatar-bg: var(--ig-avatar-accent-12-subtle-background); --ig-avatar-border: var(--ig-avatar-accent-12-subtle-border); --ig-avatar-color: var(--ig-avatar-accent-12-subtle-content); }

.ig-avatar.ig-avatar--xxl { --ig-avatar-size: var(--ig-size-1600); --ig-avatar-font: var(--ig-font-weight-regular) var(--ig-size-600) / var(--ig-size-300) var(--ig-font-family-body); --ig-avatar-icon-size: var(--ig-size-1000); }

.ig-avatar.ig-avatar--xxl > .ig-badge { --ig-badge-size: var(--ig-size-600); --ig-badge-font: var(--ig-typography-body-large-bold); }

.ig-avatar.ig-avatar--xl { --ig-avatar-size: var(--ig-size-1200); --ig-avatar-font: var(--ig-font-weight-regular) var(--ig-size-500) / var(--ig-size-300) var(--ig-font-family-body); --ig-avatar-icon-size: 56px; }

.ig-avatar.ig-avatar--xl > .ig-badge { --ig-badge-size: var(--ig-size-500); --ig-badge-font: var(--ig-typography-body-medium-bold); }

.ig-avatar.ig-avatar--lg { --ig-avatar-size: var(--ig-size-800); --ig-avatar-font: var(--ig-font-weight-regular) var(--ig-size-300) / var(--ig-size-300) var(--ig-font-family-body); --ig-avatar-icon-size: var(--ig-size-500); }

.ig-avatar.ig-avatar--lg > .ig-badge { --ig-badge-size: var(--ig-size-300); --ig-badge-font: var(--ig-typography-body-small-bold); }

.ig-avatar.ig-avatar--sm { --ig-avatar-size: var(--ig-size-400); --ig-avatar-font: var(--ig-font-weight-regular) var(--ig-font-size-body) / var(--ig-size-300) var(--ig-font-family-body); --ig-avatar-icon-size: var(--ig-size-250); }

.ig-avatar.ig-avatar--sm > .ig-badge { --ig-badge-size: var(--ig-size-200); --ig-badge-font: var(--ig-typography-body-xsmall-bold); }

.ig-avatar.ig-avatar--xs { --ig-avatar-size: var(--ig-size-300); --ig-avatar-font: var(--ig-font-weight-regular) var(--ig-size-150) / var(--ig-size-300) var(--ig-font-family-body); --ig-avatar-icon-size: var(--ig-size-200); }

.ig-avatar.ig-avatar--xs > .ig-badge { display: none; }

.ig-avatar.ig-avatar--xxs { --ig-avatar-size: var(--ig-size-200); --ig-avatar-font: var(--ig-font-weight-regular) var(--ig-size-100) / var(--ig-size-300) var(--ig-font-family-body); --ig-avatar-icon-size: var(--ig-size-150); }

.ig-avatar.ig-avatar--xxs > .ig-badge { display: none; }

.ig-avatar > .ig-badge { --ig-badge-size: var(--ig-size-200); position: absolute; top: -5px; right: -5px; }

.ig-badge { --ig-badge-gray-background: var(--ig-background-bold); --ig-badge-gray-content: var(--ig-text-on-bold-bold); --ig-badge-gray-border: var(--ig-border-clear); --ig-badge-info-background: var(--ig-background-info-bold); --ig-badge-info-content: var(--ig-text-on-bold-bold); --ig-badge-info-border: var(--ig-border-clear); --ig-badge-warning-background: var(--ig-background-warning-bold); --ig-badge-warning-content: var(--ig-text-warning); --ig-badge-warning-border: var(--ig-border-clear); --ig-badge-danger-background: var(--ig-background-danger-bold); --ig-badge-danger-content: var(--ig-text-on-bold-bold); --ig-badge-danger-border: var(--ig-border-clear); --ig-badge-success-background: var(--ig-background-success-bold); --ig-badge-success-content: var(--ig-text-on-bold-bold); --ig-badge-success-border: var(--ig-border-clear); --ig-badge-size: var(--ig-size-200); --ig-badge-icon-size: var(--ig-size-200); --ig-badge-font: var(--ig-typography-body-xsmall-bold); --ig-badge-bg: var(--ig-badge-gray-background); --ig-badge-border: var(--ig-badge-gray-border); --ig-badge-color: var(--ig-badge-gray-content); font: var(--ig-badge-font); width: var(--ig-badge-size); height: var(--ig-badge-size); color: var(--ig-badge-color); background: var(--ig-badge-bg); border: var(--ig-border-width-2x) solid var(--ig-badge-border); border-radius: 50%; justify-content: center; align-items: center; display: flex; }

.ig-badge i { font-size: calc(var(--ig-badge-size) * .6); line-height: 0; }

.ig-badge.ig-badge--gray { --ig-badge-bg: var(--ig-badge-gray-background); --ig-badge-border: var(--ig-badge-gray-border); --ig-badge-color: var(--ig-badge-gray-content); }

.ig-badge.ig-badge--info { --ig-badge-bg: var(--ig-badge-info-background); --ig-badge-border: var(--ig-badge-info-border); --ig-badge-color: var(--ig-badge-info-content); }

.ig-badge.ig-badge--danger { --ig-badge-bg: var(--ig-badge-danger-background); --ig-badge-border: var(--ig-badge-danger-border); --ig-badge-color: var(--ig-badge-danger-content); }

.ig-badge.ig-badge--success { --ig-badge-bg: var(--ig-badge-success-background); --ig-badge-border: var(--ig-badge-success-border); --ig-badge-color: var(--ig-badge-success-content); }

.ig-badge.ig-badge--warning { --ig-badge-bg: var(--ig-badge-warning-background); --ig-badge-border: var(--ig-badge-warning-border); --ig-badge-color: var(--ig-badge-warning-content); }

.ig-btn-close { width: var(--ig-component-size-small); height: var(--ig-component-size-small); background: var(--ig-icon-close); mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 48 48'%3e%3cpath d='M39.486 6.979a1.5 1.5 0 0 0-1.047.46L24 21.88 9.56 7.439a1.5 1.5 0 0 0-1.076-.455A1.5 1.5 0 0 0 7.44 9.561L21.88 24 7.439 38.44a1.5 1.5 0 1 0 2.122 2.12L24 26.122l14.44 14.44a1.5 1.5 0 1 0 2.12-2.122L26.122 24l14.44-14.44a1.5 1.5 0 0 0-1.075-2.581'/%3e%3c/svg%3e"); mask-position: center; mask-size: contain; mask-repeat: no-repeat; }

.ig-btn { --ig-button-filled-border: var(--ig-border-transparent); --ig-button-filled-background: var(--ig-background-primary-bold); --ig-button-filled-background-hover: var(--ig-background-primary-bold-hover); --ig-button-filled-background-pressed: var(--ig-background-primary-bold-pressed); --ig-button-filled-content: var(--ig-text-on-bold-bold); --ig-button-filled-content-hover: var(--ig-text-on-bold-bold-hover); --ig-button-filled-content-pressed: var(--ig-text-on-bold-bold-pressed); --ig-button-outlined-border: var(--ig-border-primary-bold); --ig-button-outlined-background: var(--ig-background-clear); --ig-button-outlined-background-hover: var(--ig-background-clear-hover); --ig-button-outlined-background-pressed: var(--ig-background-clear-pressed); --ig-button-outlined-content: var(--ig-text-primary); --ig-button-outlined-content-hover: var(--ig-text-primary-hover); --ig-button-outlined-content-pressed: var(--ig-text-primary-pressed); --ig-button-soft-border: var(--ig-border-transparent); --ig-button-soft-background: var(--ig-background-transparent-subtle); --ig-button-soft-background-hover: var(--ig-background-transparent-subtle-hover); --ig-button-soft-background-pressed: var(--ig-background-transparent-subtle-pressed); --ig-button-soft-content: var(--ig-text-bol