/* Data Backgrounds */
.bg-data-1 { background-color: var(--bg-data-1) !important; }
.bg-data-2 { background-color: var(--bg-data-2) !important; }
.bg-data-3 { background-color: var(--bg-data-3) !important; }
.bg-data-4 { background-color: var(--bg-data-4) !important; }

/* Surface Backgrounds */
.bg-surface-base { background-color: var(--bg-surface-base) !important; }
.bg-surface-layer1 { background-color: var(--bg-surface-layer1) !important; }
.bg-surface-layer2 { background-color: var(--bg-surface-layer2) !important; }

/* Success Backgrounds */
.bg-success-weak { background-color: var(--bg-success-weak) !important; }
.bg-success-down { background-color: var(--bg-success-down) !important; }
.bg-success-hover { background-color: var(--bg-success-hover) !important; }
.bg-success-default { background-color: var(--bg-success-default) !important; }

/* Danger Backgrounds */
.bg-danger-weak { background-color: var(--bg-danger-weak) !important; }
.bg-danger-down { background-color: var(--bg-danger-down) !important; }
.bg-danger-hover { background-color: var(--bg-danger-hover) !important; }
.bg-danger-default { background-color: var(--bg-danger-default) !important; }

/* Accent Backgrounds */
.bg-accent-weak { background-color: var(--bg-accent-weak) !important; }
.bg-accent-down { background-color: var(--bg-accent-down) !important; }
.bg-accent-hover { background-color: var(--bg-accent-hover) !important; }
.bg-accent-default { background-color: var(--bg-accent-default) !important; }

/* Brand Backgrounds */
.bg-brand-weak { background-color: var(--bg-brand-weak) !important; }
.bg-brand-down { background-color: var(--bg-brand-down) !important; }
.bg-brand-hover { background-color: var(--bg-brand-hover) !important; }
.bg-brand-default { background-color: var(--bg-brand-default) !important; }

/* Bold Backgrounds */
.bg-bold-press { background-color: var(--bg-bold-press) !important; }
.bg-bold-hover { background-color: var(--bg-bold-hover) !important; }
.bg-bold-default { background-color: var(--bg-bold-default) !important; }

/* Highlight Backgrounds */
.bg-highlight-selected { background-color: var(--bg-highlight-selected) !important; }
.bg-highlight-disabled { background-color: var(--bg-highlight-disabled) !important; }
.bg-highlight-down { background-color: var(--bg-highlight-down) !important; }
.bg-highlight-hover { background-color: var(--bg-highlight-hover) !important; }
.bg-highlight-default { background-color: var(--bg-highlight-default) !important; }

/* General Backgrounds */
.bg-strong { background-color: var(--bg-strong) !important; }
.bg-medium { background-color: var(--bg-medium) !important; }
.bg-default { background-color: var(--bg-default) !important; }

/* Data Borders */
.border-data-1 { border-color: var(--border-data-1) !important; }
.border-data-2 { border-color: var(--border-data-2) !important; }
.border-data-3 { border-color: var(--border-data-3) !important; }
.border-data-4 { border-color: var(--border-data-4) !important; }

/* Success Borders */
.border-success-down { border-color: var(--border-success-down) !important; }
.border-success-hover { border-color: var(--border-success-hover) !important; }
.border-success-default { border-color: var(--border-success-default) !important; }

/* Danger Borders */
.border-danger-down { border-color: var(--border-danger-down) !important; }
.border-danger-hover { border-color: var(--border-danger-hover) !important; }
.border-danger-default { border-color: var(--border-danger-default) !important; }

/* Accent Borders */
.border-accent-down { border-color: var(--border-accent-down) !important; }
.border-accent-hover { border-color: var(--border-accent-hover) !important; }
.border-accent-default { border-color: var(--border-accent-default) !important; }

/* Brand Borders */
.border-brand-down { border-color: var(--border-brand-down) !important; }
.border-brand-hover { border-color: var(--border-brand-hover) !important; }
.border-brand-default { border-color: var(--border-brand-default) !important; }

/* General Borders */
.border-negative { border-color: var(--border-negative) !important; }
.border-weak { border-color: var(--border-weak) !important; }
.border-down { border-color: var(--border-down) !important; }
.border-hover { border-color: var(--border-hover) !important; }
.border-default { border-color: var(--border-default) !important; }

/* Success Icons */
.icon-success-down { color: var(--icon-success-down) !important; }
.icon-success-hover { color: var(--icon-success-hover) !important; }
.icon-success-default { color: var(--icon-success-default) !important; }

/* Danger Icons */
.icon-danger-down { color: var(--icon-danger-down) !important; }
.icon-danger-hover { color: var(--icon-danger-hover) !important; }
.icon-danger-default { color: var(--icon-danger-default) !important; }

/* Accent Icons */
.icon-accent-down { color: var(--icon-accent-down) !important; }
.icon-accent-hover { color: var(--icon-accent-hover) !important; }
.icon-accent-default { color: var(--icon-accent-default) !important; }

/* Brand Icons */
.icon-brand-down { color: var(--icon-brand-down) !important; }
.icon-brand-hover { color: var(--icon-brand-hover) !important; }
.icon-brand-default { color: var(--icon-brand-default) !important; }

/* Inverted Icons */
.icon-inverted-weak { color: var(--icon-inverted-weak) !important; }
.icon-inverted-default { color: var(--icon-inverted-default) !important; }
.icon-disabled { color: var(--icon-disabled) !important; }

/* General Icon Styles */
.icon-strong { color: var(--icon-strong) !important; }
.icon-weak { color: var(--icon-weak) !important; }
.icon-default { color: var(--icon-default) !important; }

/* Warning Icon */
.icon-warning-press { color: var(--icon-warning-press) !important; }
.icon-warning-hover { color: var(--icon-warning-hover) !important; }
.icon-warning-default { color: var(--icon-warning-default) !important; }

/* Icon Border */
.icon-border-default { border-color: var(--icon-border-default) !important; }

/* Success Text */
.text-success-down { color: var(--text-success-down) !important; }
.text-success-hover { color: var(--text-success-hover) !important; }
.text-success-default { color: var(--text-success-default) !important; }

/* Danger Text */
.text-danger-down { color: var(--text-danger-down) !important; }
.text-danger-hover { color: var(--text-danger-hover) !important; }
.text-danger-default { color: var(--text-danger-default) !important; }

/* Link Text */
.text-link-down { color: var(--text-link-down) !important; }
.text-link-hover { color: var(--text-link-hover) !important; }
.text-link-default { color: var(--text-link-default) !important; }

/* Accent Text */
.text-accent-down { color: var(--text-accent-down) !important; }
.text-accent-hover { color: var(--text-accent-hover) !important; }
.text-accent-default { color: var(--text-accent-default) !important; }

/* Brand Text */
.text-brand-down { color: var(--text-brand-down) !important; }
.text-brand-hover { color: var(--text-brand-hover) !important; }
.text-brand-default { color: var(--text-brand-default) !important; }

/* Inverted Text */
.text-inverted-disabled { color: var(--text-inverted-disabled) !important; }
.text-inverted-weak { color: var(--text-inverted-weak) !important; }
.text-inverted-default { color: var(--text-inverted-default) !important; }
.text-disabled { color: var(--text-disabled) !important; }

/* General Text Styles */
.text-strong { color: var(--text-strong) !important; }
.text-weak { color: var(--text-weak) !important; }
.text-default { color: var(--text-default) !important; }

.text-grey-100 {color: var(--gray-100) !important}
/* Warning Background */
.bg-warning-weak { background-color: var(--bg-warning-weak) !important; }

/* Danger Background */
.bg-danger-disabled { background-color: var(--bg-danger-disabled) !important; }

/* Bold Background and Border */
.bg-bold-disabled { background-color: var(--bg-bold-disabled) !important; }
.border-bold-negative { border-color: var(--border-bold-negative) !important; }
.border-bold-weak { border-color: var(--border-bold-weak) !important; }
.border-bold-down { border-color: var(--border-bold-down) !important; }
.border-bold-hover { border-color: var(--border-bold-hover) !important; }
.border-bold-default { border-color: var(--border-bold-default) !important; }

/* Surface Background */
.bg-surface-disabled { background-color: var(--bg-surface-disabled) !important; }

/*link Text*/

/* Data Backgrounds and Borders */
.bg-data-5 { background-color: var(--bg-data-5) !important; }
.bg-data-6 { background-color: var(--bg-data-6) !important; }
.bg-data-7 { background-color: var(--bg-data-7) !important; }
.bg-data-8 { background-color: var(--bg-data-8) !important; }
.bg-data-9 { background-color: var(--bg-data-9) !important; }
.bg-data-10 { background-color: var(--bg-data-10) !important; }
.bg-data-11 { background-color: var(--bg-data-11) !important; }

.border-data-5 { border-color: var(--border-data-5) !important; }
.border-data-6 { border-color: var(--border-data-6) !important; }
.border-data-7 { border-color: var(--border-data-7) !important; }
.border-data-8 { border-color: var(--border-data-8) !important; }
.border-data-9 { border-color: var(--border-data-9) !important; }
.border-data-10 { border-color: var(--border-data-10) !important; }
.border-data-11 { border-color: var(--border-data-11) !important; }

/* Gradient Backgrounds */

.bg-gradient-brand-100 {
    background: linear-gradient(180deg, var(--bg-gradient-brand-100-start) 0%, var(--bg-gradient-brand-100-stop) 100%) !important;
}

.bg-gradient-brand-200 {
    background: linear-gradient(180deg, var(--bg-gradient-brand-200-start) 0%, var(--bg-gradient-brand-200-stop) 100%) !important;
}

.bg-gradient-brand-200-radial {
    background: radial-gradient(circle at center, var(--bg-gradient-brand-200-radial-center), var(--bg-gradient-brand-200-radial-start), var(--bg-gradient-brand-200-radial-end)) !important;
}

.bg-gradient-brand-300 {
    background: linear-gradient(180deg, var(--bg-gradient-brand-300-start) 0%, var(--bg-gradient-brand-300-stop) 100%) !important;
}

.bg-gradient-accent-100 {
    background: linear-gradient(180deg, var(--bg-gradient-accent-100-start) 0%, var(--bg-gradient-accent-100-stop) 100%) !important;
}

.bg-gradient-gray-100 {
    background: linear-gradient(180deg, var(--bg-gradient-gray-100-start) 0%, var(--bg-gradient-gray-100-stop) 100%) !important;
}

.bg-gradient-gray-200 {
    background: linear-gradient(180deg, var(--bg-gradient-gray-200-start) 0%, var(--bg-gradient-gray-200-stop) 100%) !important;
}
.bg-gradient-overlay-100{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%) !important;
}
.bg-gradient-overlay-200{
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%) !important;
}

/* Overlay Backgrounds */
.bg-overlay-dark { background-color: var(--bg-overlay-dark) !important; }
.bg-overlay-light { background-color: var(--bg-overlay-light) !important; }

/* Headline Font Sizes */
.text-font-size-headline-100 {
    font-size: var(--text-font-size-headline-100) !important;
}
.text-font-size-headline-200 {
    font-size: var(--text-font-size-headline-200) !important;
}
.text-font-size-headline-300 {
    font-size: var(--text-font-size-headline-300) !important;
}
.text-font-size-headline-400 {
    font-size: var(--text-font-size-headline-400) !important;
}
.text-font-size-headline-500 {
    font-size: var(--text-font-size-headline-500) !important;
}

/* Paragraph Font Sizes */
.text-font-size-paragraph-100 {
    font-size: var(--text-font-size-paragraph-100) !important;
}
.text-font-size-paragraph-200 {
    font-size: var(--text-font-size-paragraph-200) !important;
}
.text-font-size-paragraph-300 {
    font-size: var(--text-font-size-paragraph-300) !important;
}
.text-font-size-paragraph-400 {
    font-size: var(--text-font-size-paragraph-400) !important;
}

/* Line Heights */
.text-font-line-height-100 {
    line-height: var(--text-font-line-height-100) !important;
}
.text-font-line-height-200 {
    line-height: var(--text-font-line-height-200) !important;
}
.text-font-line-height-300 {
    line-height: var(--text-font-line-height-300) !important;
}
.text-font-line-height-400 {
    line-height: var(--text-font-line-height-400) !important;
}
.text-font-line-height-500 {
    line-height: var(--text-font-line-height-500) !important;
}
.text-font-line-height-600 {
    line-height: var(--text-font-line-height-600) !important;
}
.text-font-line-height-700 {
    line-height: var(--text-font-line-height-700) !important;
}
.text-font-line-height-800 {
    line-height: var(--text-font-line-height-800) !important;
}
.text-font-line-height-900 {
    line-height: var(--text-font-line-height-900) !important;
}

/* Button Font Sizes */
.text-font-size-button-100 {
    font-size: var(--text-font-size-button-100) !important;
}

/* Label Font Sizes */
.text-font-size-label-100 {
    font-size: var(--text-font-size-label-100) !important;
}
.text-font-size-label-200 {
    font-size: var(--text-font-size-label-200) !important;
}
.text-font-size-label-300 {
    font-size: var(--text-font-size-label-300) !important;
}
.text-font-size-label-400 {
    font-size: var(--text-font-size-label-400) !important;
}

/* Letter Spacing */
.text-font-letter-spacing-loose {
    letter-spacing: var(--text-font-letter-spacing-loose) !important;
}
.text-font-letter-spacing-default {
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}
.text-font-letter-spacing-tight {
    letter-spacing: var(--text-font-letter-spacing-tight) !important;
}

/* Breakpoints */
.breakpoint-xxlarge {
    max-width: var(--breakpoint-xxlarge) !important;
}
.breakpoint-xlarge {
    max-width: var(--breakpoint-xlarge) !important;
}
.breakpoint-large {
    max-width: var(--breakpoint-large) !important;
}
.breakpoint-medium {
    max-width: var(--breakpoint-medium) !important;
}
.breakpoint-small {
    max-width: var(--breakpoint-small) !important;
}
.breakpoint-xsmall {
    max-width: var(--breakpoint-xsmall) !important;
}

/* Border Radius */
.corner-none {
    border-radius: var(--corner-none) !important;
}
.corner-base {
    border-radius: var(--corner-base) !important;
}
.corner-small {
    border-radius: var(--corner-small) !important;
}
.corner-round {
    border-radius: var(--corner-round) !important;
}
.corner-ring {
    border-radius: var(--corner-ring) !important;
}
.video-corner-base {
    border-radius: var(--corner-small) !important;
    overflow: hidden;
    -webkit-transform: translateZ(0);
}
.photo-corner-base {
    border-radius: var(--corner-small) !important;
}

/* Spacing */
.spacing-none {
    padding: 0px !important;
}

.spacing-xxsmall {
    padding: var(--spacing-xxsmall) !important;
}

.spacing-xxsmall-t {
    padding-top: var(--spacing-xxsmall) !important;
}

.spacing-xxsmall-r {
    padding-right: var(--spacing-xxsmall) !important;
}

.spacing-xxsmall-b {
    padding-bottom: var(--spacing-xxsmall) !important;
}

.spacing-xxsmall-l {
    padding-left: var(--spacing-xxsmall) !important;
}

.spacing-xsmall {
    padding: var(--spacing-xsmall) !important;
}

.spacing-xsmall-t {
    padding-top: var(--spacing-xsmall) !important;
}

.spacing-xsmall-r {
    padding-right: var(--spacing-xsmall) !important;
}

.spacing-xsmall-b {
    padding-bottom: var(--spacing-xsmall) !important;
}

.spacing-xsmall-l {
    padding-left: var(--spacing-xsmall) !important;
}

.spacing-small {
    padding: var(--spacing-small) !important;
}

.spacing-small-t {
    padding-top: var(--spacing-small) !important;
}

.spacing-small-r {
    padding-right: var(--spacing-small) !important;
}

.spacing-small-b {
    padding-bottom: var(--spacing-small) !important;
}

.spacing-small-l {
    padding-left: var(--spacing-small) !important;
}

.spacing-base {
    padding: var(--spacing-base) !important;
}

.spacing-base-t {
    padding-top: var(--spacing-base) !important;
}

.spacing-base-r {
    padding-right: var(--spacing-base) !important;
}

.spacing-base-b {
    padding-bottom: var(--spacing-base) !important;
}

.spacing-base-l {
    padding-left: var(--spacing-base) !important;
}

.spacing-large {
    padding: var(--spacing-large) !important;
}

.spacing-large-t {
    padding-top: var(--spacing-large) !important;
}

.spacing-large-r {
    padding-right: var(--spacing-large) !important;
}

.spacing-large-b {
    padding-bottom: var(--spacing-large) !important;
}

.spacing-large-l {
    padding-left: var(--spacing-large) !important;
}

.spacing-xlarge {
    padding: var(--spacing-xlarge) !important;
}

.spacing-xlarge-t {
    padding-top: var(--spacing-xlarge) !important;
}

.spacing-xlarge-r {
    padding-right: var(--spacing-xlarge) !important;
}

.spacing-xlarge-b {
    padding-bottom: var(--spacing-xlarge) !important;
}

.spacing-xlarge-l {
    padding-left: var(--spacing-xlarge) !important;
}

.spacing-xxlarge {
    padding: var(--spacing-xxlarge) !important;
}

.spacing-xxlarge-t {
    padding-top: var(--spacing-xxlarge) !important;
}

.spacing-xxlarge-r {
    padding-right: var(--spacing-xxlarge) !important;
}

.spacing-xxlarge-b {
    padding-bottom: var(--spacing-xxlarge) !important;
}

.spacing-xxlarge-l {
    padding-left: var(--spacing-xxlarge) !important;
}


/* Gap Utility Classes */
.gap-none {
  gap: var(--spacing-none);
}

.gap-xxsmall {
  gap: var(--spacing-xxsmall);
}

.gap-xsmall {
  gap: var(--spacing-xsmall);
}

.gap-small {
  gap: var(--spacing-small);
}

.gap-base {
  gap: var(--spacing-base);
}

.gap-large {
  gap: var(--spacing-large);
}

.gap-xlarge {
  gap: var(--spacing-xlarge);
}

.gap-xxlarge {
  gap: var(--spacing-xxlarge);
}

/* Icon Sizes */
.size-icon-xsmall {
    font-size: var(--size-icon-xsmall) !important;  
}
.size-icon-small {
    font-size: var(--size-icon-small) !important;
}
.size-icon-base {
    font-size: var(--size-icon-base) !important;
}
.size-icon-brand-xxsmall img, .size-icon-brand-xxsmall svg{
    width: var(--size-icon-brand-xxsmall) !important;
    height: var(--size-icon-brand-xxsmall) !important;
}
.size-icon-brand-base img, .size-icon-brand-base svg{
    width: var(--size-icon-brand-base) !important;
    height: var(--size-icon-brand-base) !important;
}
.size-icon-brand-xxlarge img, .size-icon-brand-xxlarge svg{
    width: var(--size-icon-brand-xxlarge) !important;
    height: var(--size-icon-brand-xxlarge) !important;
}
.size-icon-large {
    width: var(--size-icon-large) !important;
    height: var(--size-icon-large) !important;
}

/* Component Sizes */
.size-component-xxsmall {
    width: var(--size-component-xxsmall) !important;
    height: var(--size-component-xxsmall) !important;
}
.size-component-xsmall {
    width: var(--size-component-xsmall) !important;
    height: var(--size-component-xsmall) !important;
}
.size-component-small {
    width: var(--size-component-small) !important;
    height: var(--size-component-small) !important;
}
.size-component-base {
    width: var(--size-component-base) !important;
    height: var(--size-component-base) !important;
}
.size-component-large {
    width: var(--size-component-large) !important;
    height: var(--size-component-large) !important;
}
.size-component-xlarge {
    width: var(--size-component-xlarge) !important;
    height: var(--size-component-xlarge) !important;
}
/* Font Family Classes */
.font-family-headline {
    font-family: var(--font-family-headline) !important;
  }
  .font-family-paragraph {
    font-family: var(--font-family-paragraph) !important;
  }
  .font-family-button {
    font-family: var(--font-family-button) !important;
  }
  .font-family-label {
    font-family: var(--font-family-label) !important;
  }
  
  /* Font Size Classes */
  .font-size-100 {
    font-size: var(--font-size-100) !important;
  }
  .font-size-200 {
    font-size: var(--font-size-200) !important;
  }
  .font-size-300 {
    font-size: var(--font-size-300) !important;
  }
  .font-size-400 {
    font-size: var(--font-size-400) !important;
  }
  .font-size-500 {
    font-size: var(--font-size-500) !important;
  }
  .font-size-600 {
    font-size: var(--font-size-600) !important;
  }
  .font-size-700 {
    font-size: var(--font-size-700) !important;
  }
  .font-size-800 {
    font-size: var(--font-size-800) !important;
  }
  .font-size-900 {
    font-size: var(--font-size-900) !important;
  }
  .font-size-button-100 {
    font-size: var(--font-size-button-100) !important;
  }
  .font-size-button-50 {
    font-size: var(--font-size-button-50) !important;
  }
  .font-size-label-100 {
    font-size: var(--font-size-label-100) !important;
  }
  .font-size-label-200 {
    font-size: var(--font-size-label-200) !important;
  }
  .font-size-label-300 {
    font-size: var(--font-size-label-300) !important;
  }
  .font-size-label-400 {
    font-size: var(--font-size-label-400) !important;
  }
  
  /* Line Height Classes */
  .font-line-height-100 {
    line-height: var(--font-line-height-100) !important;
  }
  .font-line-height-200 {
    line-height: var(--font-line-height-200) !important;
  }
  .font-line-height-300 {
    line-height: var(--font-line-height-300) !important;
  }
  .font-line-height-400 {
    line-height: var(--font-line-height-400) !important;
  }
  .font-line-height-500 {
    line-height: var(--font-line-height-500) !important;
  }
  .font-line-height-600 {
    line-height: var(--font-line-height-600) !important;
  }
  .font-line-height-700 {
    line-height: var(--font-line-height-700) !important;
  }
  .font-line-height-800 {
    line-height: var(--font-line-height-800) !important;
  }
  .font-line-height-900 {
    line-height: var(--font-line-height-900) !important;
  }
  
  /* Letter Spacing Classes */
  .font-letter-spacing-100 {
    letter-spacing: var(--font-letter-spacing-100) !important;
  }
  .font-letter-spacing-200 {
    letter-spacing: var(--font-letter-spacing-200) !important;
  }
  .font-letter-spacing-300 {
    letter-spacing: var(--font-letter-spacing-300) !important;
  }
  
  /* Font Weight Classes */
  .font-weight-100 {
    font-weight: var(--font-weight-100) !important; 
  }
  .font-weight-200 {
    font-weight: var(--font-weight-200) !important; 
  }
  .font-weight-300 {
    font-weight: var(--font-weight-300) !important; 
  }
  .font-weight-400 {
    font-weight: var(--font-weight-400) !important; 
  }
  .font-weight-500 {
    font-weight: var(--font-weight-500) !important; 
  }
  .font-weight-600 {
    font-weight: var(--font-weight-600) !important;
  }
  .font-weight-700 {
    font-weight: var(--font-weight-700) !important;
  }
  .font-weight-800 {
    font-weight: var(--font-weight-800) !important; 
  }
  .font-weight-900 {
    font-weight: var(--font-weight-900) !important;
  }
  

/* Classes for font styles */
.font-style-normal {
  font-style: var(--font-style-normal) !important;
}

.font-style-italic {
  font-style: var(--font-style-italic) !important;
}

/* Classes for text transform */
.text-transform-none {
  text-transform: var(--text-transform-none) !important;
}

.text-transform-capitalize {
  text-transform: var(--text-transform-capitalize) !important;
}

.text-transform-uppercase {
  text-transform: var(--text-transform-uppercase) !important;
}

.text-transform-lowercase {
  text-transform: var(--text-transform-lowercase) !important;
}

.text-transform-initial {
  text-transform: var(--text-transform-initial) !important;
}

.text-transform-inherit {
  text-transform: var(--text-transform-inherit) !important;
}

/* Classes for text decoration */
.text-decoration-underline {
  text-decoration: var(--text-decoration-underline) !important;
}


/* typography stack */
.headline__100__light {
    font-size: var(--text-font-size-headline-100) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-400) !important;
    letter-spacing: var(--text-font-letter-spacing-tight) !important;
    line-height: var(--text-font-line-height-100) !important;
}

.headline__100__emphasis__lightitalic {
    font-size: var(--text-font-size-headline-100) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-400) !important;
    letter-spacing: var(--text-font-letter-spacing-tight) !important;
    line-height: var(--text-font-line-height-100) !important;
    font-style: var(--font-style-italic) !important;
}

.headline__100__emphasis__heavy {
    font-size: var(--text-font-size-headline-100) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-700) !important;
    letter-spacing: var(--text-font-letter-spacing-tight) !important;
    line-height: var(--text-font-line-height-100) !important;
}

.headline__100__emphasis__heavyitalic {
    font-size: var(--text-font-size-headline-100) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-700) !important;
    font-style: var(--font-style-italic) !important;
    letter-spacing: var(--text-font-letter-spacing-tight) !important;
    line-height: var(--text-font-line-height-100) !important;
}

.headline__200__light {
    font-size: var(--text-font-size-headline-200) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-400) !important;
    letter-spacing: var(--text-font-letter-spacing-tight) !important;
    line-height: var(--text-font-line-height-200) !important;
}

.headline__200__emphasis__lightitalic {
    font-size: var(--text-font-size-headline-200) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-400) !important;
    letter-spacing: var(--text-font-letter-spacing-tight) !important;
    line-height: var(--text-font-line-height-200) !important;
    font-style: var(--font-style-italic) !important;
}

.headline__200__emphasis__heavy {
    font-size: var(--text-font-size-headline-200) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-700) !important;
    letter-spacing: var(--text-font-letter-spacing-tight) !important;
    line-height: var(--text-font-line-height-200) !important;
}

.headline__200__emphasis__heavyitalic {
    font-size: var(--text-font-size-headline-200) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-700) !important;
    font-style: var(--font-style-italic) !important;
    letter-spacing: var(--text-font-letter-spacing-tight) !important;
    line-height: var(--text-font-line-height-200) !important;
}

.headline__300__light{
    font-size: var(--text-font-size-headline-300) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-400) !important;
    letter-spacing: var(--text-font-letter-spacing-tight) !important;
    line-height: 37px !important;
}
.headline__300__emphasis__lightitalic{
    font-size: var(--text-font-size-headline-300) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-400) !important;
    letter-spacing: var(--text-font-letter-spacing-tight) !important;
    line-height: var(--text-font-line-height-300) !important;
    font-style: var(--font-style-italic) !important;
}
.headline__300__emphasis__heavy{
    font-size: var(--text-font-size-headline-300) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-700) !important;
    letter-spacing: var(--text-font-letter-spacing-tight) !important;
    line-height: var(--text-font-line-height-300) !important;
}
.headline__300__emphasis__heavyitalic{
    font-size: var(--text-font-size-headline-300) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-700) !important;
    font-style: var(--font-style-italic) !important;
    letter-spacing: var(--text-font-letter-spacing-tight) !important;
    line-height: var(--text-font-line-height-300) !important;
}
.headline__400__light{
    font-size: var(--text-font-size-headline-400) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-400) !important;
    line-height: var(--text-font-line-height-400) !important;
}
.headline__400__emphasis__lightitalic{
    font-size: var(--text-font-size-headline-400) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-400) !important;
    line-height: var(--text-font-line-height-400) !important;
    font-style: var(--font-style-italic) !important;
}
.headline__400__emphasis__heavy{
    font-size: var(--text-font-size-headline-400) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-700) !important;
    line-height: var(--text-font-line-height-400) !important;
}
.headline__400__emphasis__heavyitalic{
    font-size: var(--text-font-size-headline-400) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-700) !important;
    font-style: var(--font-style-italic) !important;
    line-height: var(--text-font-line-height-400) !important;
}
.headline__500__light{
    font-size: var(--text-font-size-headline-500) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-400) !important;
    line-height: var(--text-font-line-height-500) !important;
}
.headline__500__emphasis__lightitalic{
    font-size: var(--text-font-size-headline-500) !important;
    font-family: var(--text-font-family-headline) !important;
    font-style: var(--font-style-italic) !important;
    font-weight: var(--font-weight-400) !important;
    line-height: var(--text-font-line-height-500) !important;
}
.headline__500__emphasis__heavy{
    font-size: var(--text-font-size-headline-500) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-700) !important;
    line-height: var(--text-font-line-height-500) !important;
}
.headline__500__emphasis__heavyitalic{
    font-size: var(--text-font-size-headline-500) !important;
    font-family: var(--text-font-family-headline) !important;
    font-weight: var(--font-weight-700) !important;
    font-style: var(--font-style-italic) !important;
    line-height: var(--text-font-line-height-500) !important;
}
.paragraph__100__light {
    font-size: var(--text-font-size-paragraph-100) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-400);
    line-height: var(--text-font-line-height-500) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}
.paragraph__100__lightloose {
    font-size: var(--text-font-size-paragraph-100) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-400) !important;
    line-height: var(--text-font-line-height-300) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}
.paragraph__100__emphasis__lightitalic {
    font-size: var(--text-font-size-paragraph-100) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-italic-400) !important;
    line-height: var(--text-font-line-height-300) !important;
    font-style: var(--font-style-italic) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}
.paragraph__100__emphasis__heavy {
    font-size: var(--text-font-size-paragraph-100) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-700) !important;
    line-height: var(--text-font-line-height-500) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}
.paragraph__100__emphasis__heavyitalic {
    font-size: var(--text-font-size-paragraph-100) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-italic-700) !important;
    font-style: var(--font-style-italic) !important;
    line-height: var(--text-font-line-height-500) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}
.paragraph__200__light {
    font-size: var(--text-font-size-paragraph-200) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-400) !important;
    line-height: var(--text-font-line-height-600) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}

.paragraph__200__emphasis__lightitalic {
    font-size: var(--text-font-size-paragraph-200) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-italic-400) !important;
    line-height: var(--text-font-line-height-400) !important;
    font-style: var(--font-style-italic) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}

.paragraph__200__emphasis__heavy {
    font-size: var(--text-font-size-paragraph-200) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-700) !important;
    line-height: var(--text-font-line-height-600) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}

.paragraph__200__emphasis__heavyitalic {
    font-size: var(--text-font-size-paragraph-200) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-italic-700) !important;
    font-style: var(--font-style-italic) !important;
    line-height: var(--text-font-line-height-400) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}

.paragraph__300__light {
    font-size: var(--text-font-size-paragraph-300) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-400) !important;
    line-height: var(--text-font-line-height-800) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}

.paragraph__300__emphasis__lightitalic {
    font-size: var(--text-font-size-paragraph-300) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-italic-400) !important;
    line-height: var(--text-font-line-height-800) !important;
    font-style: var(--font-style-italic) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}

.paragraph__300__emphasis__heavy {
    font-size: var(--text-font-size-paragraph-300) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-700) !important;
    line-height: var(--text-font-line-height-800) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}

.paragraph__300__emphasis__heavyitalic {
    font-size: var(--text-font-size-paragraph-300) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-italic-700) !important;
    font-style: var(--font-style-italic) !important;
    line-height: var(--text-font-line-height-800) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}

.paragraph__400__light {
    font-size: var(--text-font-size-paragraph-400) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-400) !important;
    line-height: var(--text-font-line-height-900) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}

.paragraph__400__emphasis__lightitalic {
    font-size: var(--text-font-size-paragraph-400) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-italic-400) !important;
    line-height: var(--text-font-line-height-900) !important;
    font-style: var(--font-style-italic) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}

.paragraph__400__emphasis__heavy {
    font-size: var(--text-font-size-paragraph-400) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-700) !important;
    line-height: var(--text-font-line-height-900) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}

.paragraph__400__emphasis__heavyitalic {
    font-size: var(--text-font-size-paragraph-400) !important;
    font-family: var(--text-font-family-paragraph) !important;
    font-weight: var(--font-weight-italic-700) !important;
    font-style: var(--font-style-italic) !important;
    line-height: var(--text-font-line-height-900) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
}
.button__100 {
    font-size: var(--text-font-size-button-100) !important;
    font-family: var(--text-font-family-button) !important;
    font-weight: var(--text-font-weight-button) !important;
    line-height: var(--text-font-line-height-700) !important;
}
.button__200 {
    font-size: var(--text-font-size-button-200) !important;
    font-family: var(--text-font-family-button) !important;
    font-weight: var(--text-font-weight-button) !important;
    line-height: var(--text-font-line-height-800) !important;
}
.label__100 {
    font-size: var(--text-font-size-label-100) !important;
    font-family: var(--text-font-family-label) !important;
    font-weight: var(--text-font-weight-label) !important;
}
.label__200 {
    font-size: var(--text-font-size-label-200) !important;
    font-family: var(--text-font-family-label) !important;
    font-weight: var(--text-font-weight-label) !important;
    line-height: var(--text-font-line-height-500) !important;
    text-decoration: var(--text-transform-capitalize) !important;
}
.label__300 {
    font-size: var(--text-font-size-label-300) !important;
    font-family: var(--text-font-family-label) !important;
    font-weight: var(--text-font-weight-label) !important;
    line-height: var(--text-font-line-height-600) !important;
    text-decoration: var(--text-transform-capitalize) !important;
}
.label__400 {
    font-size: var(--text-font-size-label-400) !important;
    font-family: var(--text-font-family-label) !important;
    font-weight: var(--text-font-weight-label) !important;
    line-height: var(--text-font-line-height-800) !important;
    text-decoration: var(--text-transform-capitalize) !important;
}
.tab__100 {
    font-size: var(--text-font-size-tab-100) !important;
    font-family: var(--text-font-family-tab) !important;
    font-weight: var(--font-weight-600) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
    line-height: var(--text-font-line-height-600) !important;
}

.tab__200 {
    font-size: var(--text-font-size-tab-200) !important;
    font-family: var(--text-font-family-tab) !important;
    font-weight: var(--font-weight-600) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
    line-height: var(--text-font-line-height-800) !important;
}

.tab__300 {
    font-size: var(--text-font-size-tab-300) !important;
    font-family: var(--text-font-family-tab) !important;
    font-weight: var(--font-weight-600) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
    line-height: var(--text-font-line-height-900) !important;
}
.caption__100 {
    font-size: var(--text-font-size-caption-100) !important;
    font-family: var(--text-font-family-caption) !important;
    font-weight: var(--font-weight-400) !important;
    letter-spacing: var(--text-font-letter-spacing-default) !important;
    line-height: var(--text-font-line-height-600) !important;
}

/* elevation or box shadow classes */
.elevation__default{
  box-shadow: 0px 2px 8px var(--bg-elevation-default) !important;
}
.elevation__hover{
  box-shadow: 0px 8px 16px var(--bg-elevation-hover) !important;
}
.elevation__selected{
  box-shadow: 0px 8px 32px var(--bg-elevation-selected) !important;
}
.highlight__brand{
  box-shadow: 0px 0px 0px rgba(2, 101, 220, 0.08) !important;
}
.highlight__danger{
  box-shadow: 0px 0px 0px rgba(211, 21, 16, 0.08) !important;
}
.highlight__white{
  box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.2) !important;
}

  /* custom classes for grid column numbers */
  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}
.grid-span-3{
    grid-column: span 3 !important;
}

/*Default Typography Styles*/
p, ol, ul, li {
    font-size: var(--text-font-size-paragraph-100);
    font-family: var(--text-font-family-paragraph);
    font-weight: var(--font-weight-400);
    line-height: var(--text-font-line-height-500);
    color: var(--text-default);
    text-wrap: balance;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--text-font-family-headline) !important;
    color: var(--text-default) !important;
    text-wrap: balance;
}

h1 {
    font-size: var(--text-font-size-headline-100) !important;
    font-weight: var(--font-weight-700) !important;
    letter-spacing: var(--text-font-letter-spacing-tight) !important;
    line-height: var(--text-font-line-height-100) !important;
}

h2 {
    font-size: var(--text-font-size-headline-200) !important;
    font-weight: var(--font-weight-700) !important;
    letter-spacing: var(--text-font-letter-spacing-tight) !important;
    line-height: var(--text-font-line-height-200) !important;
}

h3 {
    font-size: var(--text-font-size-headline-300) !important;
    font-weight: var(--font-weight-700) !important;
    letter-spacing: var(--text-font-letter-spacing-tight) !important;
    line-height: var(--text-font-line-height-300) !important;
}

h4 {
    font-size: var(--text-font-size-headline-400) !important;
    font-weight: var(--font-weight-700) !important;
    line-height: var(--text-font-line-height-400) !important;
}

h5 {
    font-size: var(--text-font-size-headline-500) !important;
    font-weight: var(--font-weight-700) !important;
    line-height: var(--text-font-line-height-500) !important;
}

a:focus-visible {
    outline: 4px solid var(--text-link-default);
    outline-offset: 2px
}
.audio-graphic-icon {
    background-repeat: no-repeat !important;
    background-position-x: right !important;
    background-position-y: bottom !important;
}
    a{
        color: var(--text-link-default);
    }

    a:visited {
        color: var(--text-link-default);
    }

    a:hover {
        color: var(--text-link-hover);
    }

    a:active {
        color: var(--text-link-down);
    }

    a:focus {
        color: var(--text-link-hover);
    }
.field-link{
    color:inherit;
}
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

#updateMemberError {
    background: var(--bg-data-8);
    color: white;
    margin-bottom: 0 !important;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
}

    #updateMemberError #unexpectedError {
        width: 23px !important;
    }

    #updateMemberError #errorResult {
        margin-bottom: 0;
    }