smart-webcomponents-community/source/styles/smart.utilities.css

Web Components & Custom Elements Community Version

:root {
  --smart-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem);
  --smart-text-display-h1-line-height: normal;
  --smart-text-display-h1-font-weight: 400;
  --smart-text-display-h1-letter-spacing: -1.5px;
  --smart-text-display-h1-color: var(--smart-text-title-color);
  --smart-text-display-h1-margin-block-start: 0;
  --smart-text-display-h1-margin-block-end: 1rem;
  --smart-text-display-h2-font-size: clamp(3rem, 4.167vw, 3.75rem);
  --smart-text-display-h2-line-height: normal;
  --smart-text-display-h2-font-weight: 400;
  --smart-text-display-h2-letter-spacing: -0.5px;
  --smart-text-display-h2-color: var(--smart-text-title-color);
  --smart-text-display-h2-margin-block-start: 0;
  --smart-text-display-h2-margin-block-end: 1rem;
  --smart-text-display-h3-font-size: clamp(2.25rem, 3.333vw, 3rem);
  --smart-text-display-h3-line-height: normal;
  --smart-text-display-h3-font-weight: 400;
  --smart-text-display-h3-letter-spacing: 0;
  --smart-text-display-h3-color: var(--smart-text-title-color);
  --smart-text-display-h3-margin-block-start: 0;
  --smart-text-display-h3-margin-block-end: 0.75rem;
  --smart-text-display-h4-font-size: clamp(1.75rem, 2.361vw, 2.125rem);
  --smart-text-display-h4-line-height: normal;
  --smart-text-display-h4-font-weight: 400;
  --smart-text-display-h4-letter-spacing: 0.25px;
  --smart-text-display-h4-color: var(--smart-text-title-color);
  --smart-text-display-h4-margin-block-start: 0;
  --smart-text-display-h4-margin-block-end: 0.5rem;
  --smart-text-display-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem);
  --smart-text-display-h5-line-height: normal;
  --smart-text-display-h5-font-weight: 400;
  --smart-text-display-h5-letter-spacing: 0;
  --smart-text-display-h5-color: var(--smart-text-title-color);
  --smart-text-display-h5-margin-block-start: 0;
  --smart-text-display-h5-margin-block-end: 0.5rem;
  --smart-text-display-h6-font-size: clamp(1rem, 1.389vw, 1.25rem);
  --smart-text-display-h6-line-height: normal;
  --smart-text-display-h6-font-weight: 500;
  --smart-text-display-h6-letter-spacing: 0.15px;
  --smart-text-display-h6-color: var(--smart-text-title-color);
  --smart-text-display-h6-margin-block-start: 0;
  --smart-text-display-h6-margin-block-end: 0.5rem;
  --smart-text-h1-font-size: clamp(3rem, 4.167vw, 3.5625rem);
  --smart-text-h1-line-height: normal;
  --smart-text-h1-font-weight: 400;
  --smart-text-h1-letter-spacing: -0.5px;
  --smart-text-h1-color: var(--smart-text-title-color);
  --smart-text-h1-margin-block-start: 0;
  --smart-text-h1-margin-block-end: 1rem;
  --smart-text-h2-font-size: clamp(2.25rem, 3.333vw, 2.8125rem);
  --smart-text-h2-line-height: normal;
  --smart-text-h2-font-weight: 400;
  --smart-text-h2-letter-spacing: 0;
  --smart-text-h2-color: var(--smart-text-title-color);
  --smart-text-h2-margin-block-start: 0;
  --smart-text-h2-margin-block-end: 1rem;
  --smart-text-h3-font-size: clamp(1.75rem, 2.361vw, 2.125rem);
  --smart-text-h3-line-height: normal;
  --smart-text-h3-font-weight: 400;
  --smart-text-h3-letter-spacing: 0;
  --smart-text-h3-color: var(--smart-text-title-color);
  --smart-text-h3-margin-block-start: 0;
  --smart-text-h3-margin-block-end: 0.75rem;
  --smart-text-h4-font-size: clamp(1.25rem, 1.667vw, 1.5rem);
  --smart-text-h4-line-height: normal;
  --smart-text-h4-font-weight: 400;
  --smart-text-h4-letter-spacing: 0.15px;
  --smart-text-h4-color: var(--smart-text-title-color);
  --smart-text-h4-margin-block-start: 0;
  --smart-text-h4-margin-block-end: 0.5rem;
  --smart-text-h5-font-size: clamp(1rem, 1.389vw, 1.25rem);
  --smart-text-h5-line-height: normal;
  --smart-text-h5-font-weight: 500;
  --smart-text-h5-letter-spacing: 0.15px;
  --smart-text-h5-color: var(--smart-text-title-color);
  --smart-text-h5-margin-block-start: 0;
  --smart-text-h5-margin-block-end: 0.5rem;
  --smart-text-h6-font-size: clamp(0.875rem, 1.389vw, 1rem);
  --smart-text-h6-line-height: normal;
  --smart-text-h6-font-weight: 500;
  --smart-text-h6-letter-spacing: 0.1px;
  --smart-text-h6-color: var(--smart-text-title-color);
  --smart-text-h6-margin-block-start: 0;
  --smart-text-h6-margin-block-end: 0.5rem;
  --smart-text-subtitle1-font-size: 1rem;
  --smart-text-subtitle1-line-height: 1.5;
  --smart-text-subtitle1-font-weight: 400;
  --smart-text-subtitle1-letter-spacing: 0.15px;
  --smart-text-subtitle1-color: var(--smart-text-title-color);
  --smart-text-subtitle1-margin-block-start: 0;
  --smart-text-subtitle1-margin-block-end: 0.5rem;
  --smart-text-subtitle2-font-size: 0.875rem;
  --smart-text-subtitle2-line-height: 1.5;
  --smart-text-subtitle2-font-weight: 500;
  --smart-text-subtitle2-letter-spacing: 0.1px;
  --smart-text-subtitle2-color: var(--smart-text-title-color);
  --smart-text-subtitle2-margin-block-start: 0;
  --smart-text-subtitle2-margin-block-end: 0.5rem;
  --smart-text-body1-font-size: 1rem;
  --smart-text-body1-line-height: 1.5;
  --smart-text-body1-font-weight: 400;
  --smart-text-body1-letter-spacing: 0.5px;
  --smart-text-body1-color: var(--smart-text-color);
  --smart-text-body1-margin-block-start: 0;
  --smart-text-body1-margin-block-end: 0.5rem;
  --smart-text-body2-font-size: 0.875rem;
  --smart-text-body2-line-height: 1.5;
  --smart-text-body2-font-weight: 400;
  --smart-text-body2-letter-spacing: 0.25px;
  --smart-text-body2-color: var(--smart-text-color);
  --smart-text-body2-margin-block-start: 0;
  --smart-text-body2-margin-block-end: 0.5rem;
  --smart-text-button-font-size: 0.875rem;
  --smart-text-button-line-height: normal;
  --smart-text-button-font-weight: 500;
  --smart-text-button-letter-spacing: 1.25px;
  --smart-text-button-text-transform: uppercase;
  --smart-text-button-color: var(--smart-text-color);
  --smart-text-button-margin-block-start: 0;
  --smart-text-button-margin-block-end: 0.5rem;
  --smart-text-caption-font-size: 0.75rem;
  --smart-text-caption-line-height: normal;
  --smart-text-caption-font-weight: 400;
  --smart-text-caption-letter-spacing: 0.4px;
  --smart-text-caption-color: var(--smart-text-color);
  --smart-text-caption-margin-block-start: 0;
  --smart-text-caption-margin-block-end: 0.5rem;
  --smart-text-overline-font-size: 0.625rem;
  --smart-text-overline-line-height: normal;
  --smart-text-overline-font-weight: 400;
  --smart-text-overline-letter-spacing: 1.5px;
  --smart-text-overline-text-transform: uppercase;
  --smart-text-overline-color: var(--smart-text-color);
  --smart-text-overline-margin-block-start: 0;
  --smart-text-overline-margin-block-end: 0.5rem;
  --smart-text-selection-background-color: var(--smart-primary-light);
  --smart-text-selection-color: var(--smart-on-primary-light);
  --smart-link-color: var(--smart-primary);
  --smart-link-text-decoration: none;
  --smart-link-hover-color: var(--smart-primary-dark);
  --smart-link-hover-text-decoration: underline;
  --smart-link-focus-outline: var(--smart-outline-focus);
  --smart-link-focus-outline-offset: var(--smart-outline-offset);
  --smart-white: #ffffff;
  --smart-black: #000000;
  --smart-base: #dfe5ec;
  --smart-base-50: #f8fafb;
  --smart-base-100: #f3f6f9;
  --smart-base-200: #e3eaf2;
  --smart-base-300: #dfe5ec;
  --smart-base-400: #dbe0e6;
  --smart-base-500: #d7dbe0;
  --smart-base-600: #c6cbd2;
  --smart-base-700: #74787e;
  --smart-base-800: #45494f;
  --smart-base-900: #1b1d20;
  --smart-base-light: #f3f6f9;
  --smart-base-lighter: #ffffff;
  --smart-base-dark: #45494f;
  --smart-base-darker: #1b1d20;
  --smart-primary: #2c6fd1;
  --smart-primary-rgb: 44, 111, 209;
  --smart-primary-light: #bcd8ff;
  --smart-primary-lighter: rgba(0, 111, 255, 0.13);
  --smart-primary-dark: #90caf9;
  --smart-primary-darker: #00215d;
  --smart-secondary: #5b6371;
  --smart-secondary-light: #c2ccdc;
  --smart-secondary-lighter: rgba(0, 98, 255, 0.13);
  --smart-secondary-dark: #444c58;
  --smart-secondary-darker: #19202b;
  --smart-info: #085786;
  --smart-info-light: #aadaff;
  --smart-info-lighter: rgba(170, 218, 255, 0.5);
  --smart-info-dark: #086791;
  --smart-info-darker: #002d41;
  --smart-success: #3e9108;
  --smart-success-light: #c6ffaa;
  --smart-success-lighter: rgba(198, 255, 170, 0.5);
  --smart-success-dark: #479108;
  --smart-success-darker: #1e4100;
  --smart-warning: #e8e971;
  --smart-warning-light: #f9ffaa;
  --smart-warning-lighter: rgba(249, 255, 170, 0.5);
  --smart-warning-dark: #918908;
  --smart-warning-darker: #413d00;
  --smart-error: #d35153;
  --smart-error-light: #ffaeaa;
  --smart-error-lighter: rgba(255, 174, 170, 0.5);
  --smart-error-dark: #910813;
  --smart-error-darker: #410005;
  --smart-on-base: #1b1d20;
  --smart-on-base-light: #1b1d20;
  --smart-on-base-lighter: #1b1d20;
  --smart-on-base-dark: #ffffff;
  --smart-on-base-darker: #f8fafb;
  --smart-on-primary: #ffffff;
  --smart-on-primary-light: #00215d;
  --smart-on-primary-lighter: #00215d;
  --smart-on-primary-dark: var(#000000);
  --smart-on-primary-darker: #bcd8ff;
  --smart-on-secondary: #ffffff;
  --smart-on-secondary-light: #19202b;
  --smart-on-secondary-lighter: #19202b;
  --smart-on-secondary-dark: #ffffff;
  --smart-on-secondary-darker: #c2ccdc;
  --smart-on-info: #ffffff;
  --smart-on-info-light: #002d41;
  --smart-on-info-lighter: #086791;
  --smart-on-info-dark: #ffffff;
  --smart-on-info-darker: #aadaff;
  --smart-on-success: #ffffff;
  --smart-on-success-light: #1e4100;
  --smart-on-success-lighter: #1e4100;
  --smart-on-success-dark: #ffffff;
  --smart-on-success-darker: #c6ffaa;
  --smart-on-warning: #1b1d20;
  --smart-on-warning-light: #413d00;
  --smart-on-warning-lighter: #413d00;
  --smart-on-warning-dark: #ffffff;
  --smart-on-warning-darker: #f9ffaa;
  --smart-on-error: #ffffff;
  --smart-on-error-light: #410005;
  --smart-on-error-lighter: #410005;
  --smart-on-error-dark: #ffffff;
  --smart-on-error-darker: #ffaeaa;
}

[class^=smart-], [class^=smart-]::before, [class^=smart-]::after, [class^=smart-] *, [class^=smart-] *::before, [class^=smart-] *::after, [class*=" smart-"], [class*=" smart-"]::before, [class*=" smart-"]::after, [class*=" smart-"] *, [class*=" smart-"] *::before, [class*=" smart-"] *::after {
  box-sizing: border-box;
}

.smart-text-title-color {
  color: var(--smart-base-900) !important;
}

.smart-text-color {
  color: var(--smart-base-900) !important;
}

.smart-text-secondary-color {
  color: var(--smart-base-800) !important;
}

.smart-text-tertiary-color {
  color: var(--smart-base-700) !important;
}

.smart-text-disabled-color {
  color: var(--smart-base-600) !important;
}

.smart-text-contrast-color {
  color: var(--smart-white) !important;
}

.smart-border-radius {
  border-radius: var(--smart-border-radius) !important;
}

.smart-border-radius-0 {
  border-radius: var(--smart-border-radius-0) !important;
}

.smart-border-radius-1 {
  border-radius: var(--smart-border-radius-1) !important;
}

.smart-border-radius-2 {
  border-radius: var(--smart-border-radius-2) !important;
}

.smart-border-radius-3 {
  border-radius: var(--smart-border-radius-3) !important;
}

.smart-border-radius-4 {
  border-radius: var(--smart-border-radius-4) !important;
}

.smart-border-radius-5 {
  border-radius: var(--smart-border-radius-5) !important;
}

.smart-border-radius-6 {
  border-radius: var(--smart-border-radius-6) !important;
}

.smart-border-radius-7 {
  border-radius: var(--smart-border-radius-7) !important;
}

.smart-border-radius-8 {
  border-radius: var(--smart-border-radius-8) !important;
}

.smart-border-radius-9 {
  border-radius: var(--smart-border-radius-9) !important;
}

.smart-border-radius-10 {
  border-radius: var(--smart-border-radius-10) !important;
}

.smart-elevation-0 {
  box-shadow: var(--smart-elevation-0) !important;
}

.smart-elevation-1 {
  box-shadow: var(--smart-elevation-1) !important;
}

.smart-elevation-2 {
  box-shadow: var(--smart-elevation-2) !important;
}

.smart-elevation-3 {
  box-shadow: var(--smart-elevation-3) !important;
}

.smart-elevation-4 {
  box-shadow: var(--smart-elevation-4) !important;
}

.smart-elevation-5 {
  box-shadow: var(--smart-elevation-5) !important;
}

.smart-elevation-6 {
  box-shadow: var(--smart-elevation-6) !important;
}

.smart-elevation-7 {
  box-shadow: var(--smart-elevation-7) !important;
}

.smart-elevation-8 {
  box-shadow: var(--smart-elevation-8) !important;
}

.smart-elevation-9 {
  box-shadow: var(--smart-elevation-9) !important;
}

.smart-elevation-10 {
  box-shadow: var(--smart-elevation-10) !important;
}

.smart-display-none {
  display: none !important;
}

.smart-display-block {
  display: block !important;
}

.smart-display-inline {
  display: inline !important;
}

.smart-display-inline-block {
  display: inline-block !important;
}

.smart-display-flex {
  display: flex !important;
}

.smart-display-inline-flex {
  display: inline-flex !important;
}

.smart-display-grid {
  display: grid !important;
}

.smart-display-inline-grid {
  display: inline-grid !important;
}

.smart-justify-content-normal {
  justify-content: normal !important;
}

.smart-justify-content-stretch {
  justify-content: stretch !important;
}

.smart-justify-content-center {
  justify-content: center !important;
}

.smart-justify-content-start {
  justify-content: start !important;
}

.smart-justify-content-end {
  justify-content: end !important;
}

.smart-justify-content-flex-start {
  justify-content: flex-start !important;
}

.smart-justify-content-flex-end {
  justify-content: flex-end !important;
}

.smart-justify-content-left {
  justify-content: left !important;
}

.smart-justify-content-right {
  justify-content: right !important;
}

.smart-justify-content-space-between {
  justify-content: space-between !important;
}

.smart-justify-content-space-around {
  justify-content: space-around !important;
}

.smart-justify-content-space-evenly {
  justify-content: space-evenly !important;
}

.smart-align-items-normal {
  align-items: normal !important;
}

.smart-align-items-stretch {
  align-items: stretch !important;
}

.smart-align-items-center {
  align-items: center !important;
}

.smart-align-items-start {
  align-items: start !important;
}

.smart-align-items-end {
  align-items: end !important;
}

.smart-align-items-flex-start {
  align-items: flex-start !important;
}

.smart-align-items-flex-end {
  align-items: flex-end !important;
}

.smart-overflow-auto {
  overflow: auto !important;
}

.smart-overflow-scroll {
  overflow: scroll !important;
}

.smart-overflow-visible {
  overflow: visible !important;
}

.smart-overflow-hidden {
  overflow: hidden !important;
}

.smart-w-25 {
  width: 25% !important;
}

.smart-w-50 {
  width: 50% !important;
}

.smart-w-75 {
  width: 75% !important;
}

.smart-w-100 {
  width: 100% !important;
}

.smart-vw-25 {
  width: 25vw !important;
}

.smart-vw-50 {
  width: 50vw !important;
}

.smart-vw-75 {
  width: 75vw !important;
}

.smart-vw-100 {
  width: 100vw !important;
}

.smart-w-auto {
  width: auto !important;
}

.smart-w-fit-content {
  width: fit-content !important;
}

.smart-w-min-content {
  width: min-content !important;
}

.smart-w-max-content {
  width: max-content !important;
}

.smart-w-stretch {
  width: stretch !important;
}

.smart-min-w-25 {
  min-width: 25% !important;
}

.smart-min-w-50 {
  min-width: 50% !important;
}

.smart-min-w-75 {
  min-width: 75% !important;
}

.smart-min-w-100 {
  min-width: 100% !important;
}

.smart-max-w-25 {
  max-width: 25% !important;
}

.smart-max-w-50 {
  max-width: 50% !important;
}

.smart-max-w-75 {
  max-width: 75% !important;
}

.smart-max-w-100 {
  max-width: 100% !important;
}

.smart-h-25 {
  height: 25% !important;
}

.smart-h-50 {
  height: 50% !important;
}

.smart-h-75 {
  height: 75% !important;
}

.smart-h-100 {
  height: 100% !important;
}

.smart-vh-25 {
  height: 25vh !important;
}

.smart-vh-50 {
  height: 50vh !important;
}

.smart-vh-75 {
  height: 75vh !important;
}

.smart-vh-100 {
  height: 100vh !important;
}

.smart-h-auto {
  height: auto !important;
}

.smart-min-h-25 {
  min-height: 25% !important;
}

.smart-min-h-50 {
  min-height: 50% !important;
}

.smart-min-h-75 {
  min-height: 75% !important;
}

.smart-min-h-100 {
  min-height: 100% !important;
}

.smart-max-h-25 {
  max-height: 25% !important;
}

.smart-max-h-50 {
  max-height: 50% !important;
}

.smart-max-h-75 {
  max-height: 75% !important;
}

.smart-max-h-100 {
  max-height: 100% !important;
}

@media (min-width: 576px) {
  .smart-display-xs-none {
    display: none !important;
  }
  .smart-display-xs-block {
    display: block !important;
  }
  .smart-display-xs-inline {
    display: inline !important;
  }
  .smart-display-xs-inline-block {
    display: inline-block !important;
  }
  .smart-display-xs-flex {
    display: flex !important;
  }
  .smart-display-xs-inline-flex {
    display: inline-flex !important;
  }
  .smart-display-xs-grid {
    display: grid !important;
  }
  .smart-display-xs-inline-grid {
    display: inline-grid !important;
  }
  .smart-justify-content-xs-normal {
    justify-content: normal !important;
  }
  .smart-justify-content-xs-stretch {
    justify-content: stretch !important;
  }
  .smart-justify-content-xs-center {
    justify-content: center !important;
  }
  .smart-justify-content-xs-start {
    justify-content: start !important;
  }
  .smart-justify-content-xs-end {
    justify-content: end !important;
  }
  .smart-justify-content-xs-flex-start {
    justify-content: flex-start !important;
  }
  .smart-justify-content-xs-flex-end {
    justify-content: flex-end !important;
  }
  .smart-justify-content-xs-left {
    justify-content: left !important;
  }
  .smart-justify-content-xs-right {
    justify-content: right !important;
  }
  .smart-justify-content-xs-space-between {
    justify-content: space-between !important;
  }
  .smart-justify-content-xs-space-around {
    justify-content: space-around !important;
  }
  .smart-justify-content-xs-space-evenly {
    justify-content: space-evenly !important;
  }
  .smart-align-items-xs-normal {
    align-items: normal !important;
  }
  .smart-align-items-xs-stretch {
    align-items: stretch !important;
  }
  .smart-align-items-xs-center {
    align-items: center !important;
  }
  .smart-align-items-xs-start {
    align-items: start !important;
  }
  .smart-align-items-xs-end {
    align-items: end !important;
  }
  .smart-align-items-xs-flex-start {
    align-items: flex-start !important;
  }
  .smart-align-items-xs-flex-end {
    align-items: flex-end !important;
  }
  .smart-overflow-xs-auto {
    overflow: auto !important;
  }
  .smart-overflow-xs-scroll {
    overflow: scroll !important;
  }
  .smart-overflow-xs-visible {
    overflow: visible !important;
  }
  .smart-overflow-xs-hidden {
    overflow: hidden !important;
  }
  .smart-w-xs-25 {
    width: 25% !important;
  }
  .smart-w-xs-50 {
    width: 50% !important;
  }
  .smart-w-xs-75 {
    width: 75% !important;
  }
  .smart-w-xs-100 {
    width: 100% !important;
  }
  .smart-vw-xs-25 {
    width: 25vw !important;
  }
  .smart-vw-xs-50 {
    width: 50vw !important;
  }
  .smart-vw-xs-75 {
    width: 75vw !important;
  }
  .smart-vw-xs-100 {
    width: 100vw !important;
  }
  .smart-w-xs-auto {
    width: auto !important;
  }
  .smart-w-xs-fit-content {
    width: fit-content !important;
  }
  .smart-w-xs-min-content {
    width: min-content !important;
  }
  .smart-w-xs-max-content {
    width: max-content !important;
  }
  .smart-w-xs-stretch {
    width: stretch !important;
  }
  .smart-min-w-xs-25 {
    min-width: 25% !important;
  }
  .smart-min-w-xs-50 {
    min-width: 50% !important;
  }
  .smart-min-w-xs-75 {
    min-width: 75% !important;
  }
  .smart-min-w-xs-100 {
    min-width: 100% !important;
  }
  .smart-max-w-xs-25 {
    max-width: 25% !important;
  }
  .smart-max-w-xs-50 {
    max-width: 50% !important;
  }
  .smart-max-w-xs-75 {
    max-width: 75% !important;
  }
  .smart-max-w-xs-100 {
    max-width: 100% !important;
  }
  .smart-h-xs-25 {
    height: 25% !important;
  }
  .smart-h-xs-50 {
    height: 50% !important;
  }
  .smart-h-xs-75 {
    height: 75% !important;
  }
  .smart-h-xs-100 {
    height: 100% !important;
  }
  .smart-vh-xs-25 {
    height: 25vh !important;
  }
  .smart-vh-xs-50 {
    height: 50vh !important;
  }
  .smart-vh-xs-75 {
    height: 75vh !important;
  }
  .smart-vh-xs-100 {
    height: 100vh !important;
  }
  .smart-h-xs-auto {
    height: auto !important;
  }
  .smart-min-h-xs-25 {
    min-height: 25% !important;
  }
  .smart-min-h-xs-50 {
    min-height: 50% !important;
  }
  .smart-min-h-xs-75 {
    min-height: 75% !important;
  }
  .smart-min-h-xs-100 {
    min-height: 100% !important;
  }
  .smart-max-h-xs-25 {
    max-height: 25% !important;
  }
  .smart-max-h-xs-50 {
    max-height: 50% !important;
  }
  .smart-max-h-xs-75 {
    max-height: 75% !important;
  }
  .smart-max-h-xs-100 {
    max-height: 100% !important;
  }
}
@media (min-width: 768px) {
  .smart-display-sm-none {
    display: none !important;
  }
  .smart-display-sm-block {
    display: block !important;
  }
  .smart-display-sm-inline {
    display: inline !important;
  }
  .smart-display-sm-inline-block {
    display: inline-block !important;
  }
  .smart-display-sm-flex {
    display: flex !important;
  }
  .smart-display-sm-inline-flex {
    display: inline-flex !important;
  }
  .smart-display-sm-grid {
    display: grid !important;
  }
  .smart-display-sm-inline-grid {
    display: inline-grid !important;
  }
  .smart-justify-content-sm-normal {
    justify-content: normal !important;
  }
  .smart-justify-content-sm-stretch {
    justify-content: stretch !important;
  }
  .smart-justify-content-sm-center {
    justify-content: center !important;
  }
  .smart-justify-content-sm-start {
    justify-content: start !important;
  }
  .smart-justify-content-sm-end {
    justify-content: end !important;
  }
  .smart-justify-content-sm-flex-start {
    justify-content: flex-start !important;
  }
  .smart-justify-content-sm-flex-end {
    justify-content: flex-end !important;
  }
  .smart-justify-content-sm-left {
    justify-content: left !important;
  }
  .smart-justify-content-sm-right {
    justify-content: right !important;
  }
  .smart-justify-content-sm-space-between {
    justify-content: space-between !important;
  }
  .smart-justify-content-sm-space-around {
    justify-content: space-around !important;
  }
  .smart-justify-content-sm-space-evenly {
    justify-content: space-evenly !important;
  }
  .smart-align-items-sm-normal {
    align-items: normal !important;
  }
  .smart-align-items-sm-stretch {
    align-items: stretch !important;
  }
  .smart-align-items-sm-center {
    align-items: center !important;
  }
  .smart-align-items-sm-start {
    align-items: start !important;
  }
  .smart-align-items-sm-end {
    align-items: end !important;
  }
  .smart-align-items-sm-flex-start {
    align-items: flex-start !important;
  }
  .smart-align-items-sm-flex-end {
    align-items: flex-end !important;
  }
  .smart-overflow-sm-auto {
    overflow: auto !important;
  }
  .smart-overflow-sm-scroll {
    overflow: scroll !important;
  }
  .smart-overflow-sm-visible {
    overflow: visible !important;
  }
  .smart-overflow-sm-hidden {
    overflow: hidden !important;
  }
  .smart-w-sm-25 {
    width: 25% !important;
  }
  .smart-w-sm-50 {
    width: 50% !important;
  }
  .smart-w-sm-75 {
    width: 75% !important;
  }
  .smart-w-sm-100 {
    width: 100% !important;
  }
  .smart-vw-sm-25 {
    width: 25vw !important;
  }
  .smart-vw-sm-50 {
    width: 50vw !important;
  }
  .smart-vw-sm-75 {
    width: 75vw !important;
  }
  .smart-vw-sm-100 {
    width: 100vw !important;
  }
  .smart-w-sm-auto {
    width: auto !important;
  }
  .smart-w-sm-fit-content {
    width: fit-content !important;
  }
  .smart-w-sm-min-content {
    width: min-content !important;
  }
  .smart-w-sm-max-content {
    width: max-content !important;
  }
  .smart-w-sm-stretch {
    width: stretch !important;
  }
  .smart-min-w-sm-25 {
    min-width: 25% !important;
  }
  .smart-min-w-sm-50 {
    min-width: 50% !important;
  }
  .smart-min-w-sm-75 {
    min-width: 75% !important;
  }
  .smart-min-w-sm-100 {
    min-width: 100% !important;
  }
  .smart-max-w-sm-25 {
    max-width: 25% !important;
  }
  .smart-max-w-sm-50 {
    max-width: 50% !important;
  }
  .smart-max-w-sm-75 {
    max-width: 75% !important;
  }
  .smart-max-w-sm-100 {
    max-width: 100% !important;
  }
  .smart-h-sm-25 {
    height: 25% !important;
  }
  .smart-h-sm-50 {
    height: 50% !important;
  }
  .smart-h-sm-75 {
    height: 75% !important;
  }
  .smart-h-sm-100 {
    height: 100% !important;
  }
  .smart-vh-sm-25 {
    height: 25vh !important;
  }
  .smart-vh-sm-50 {
    height: 50vh !important;
  }
  .smart-vh-sm-75 {
    height: 75vh !important;
  }
  .smart-vh-sm-100 {
    height: 100vh !important;
  }
  .smart-h-sm-auto {
    height: auto !important;
  }
  .smart-min-h-sm-25 {
    min-height: 25% !important;
  }
  .smart-min-h-sm-50 {
    min-height: 50% !important;
  }
  .smart-min-h-sm-75 {
    min-height: 75% !important;
  }
  .smart-min-h-sm-100 {
    min-height: 100% !important;
  }
  .smart-max-h-sm-25 {
    max-height: 25% !important;
  }
  .smart-max-h-sm-50 {
    max-height: 50% !important;
  }
  .smart-max-h-sm-75 {
    max-height: 75% !important;
  }
  .smart-max-h-sm-100 {
    max-height: 100% !important;
  }
}
@media (min-width: 1024px) {
  .smart-display-md-none {
    display: none !important;
  }
  .smart-display-md-block {
    display: block !important;
  }
  .smart-display-md-inline {
    display: inline !important;
  }
  .smart-display-md-inline-block {
    display: inline-block !important;
  }
  .smart-display-md-flex {
    display: flex !important;
  }
  .smart-display-md-inline-flex {
    display: inline-flex !important;
  }
  .smart-display-md-grid {
    display: grid !important;
  }
  .smart-display-md-inline-grid {
    display: inline-grid !important;
  }
  .smart-justify-content-md-normal {
    justify-content: normal !important;
  }
  .smart-justify-content-md-stretch {
    justify-content: stretch !important;
  }
  .smart-justify-content-md-center {
    justify-content: center !important;
  }
  .smart-justify-content-md-start {
    justify-content: start !important;
  }
  .smart-justify-content-md-end {
    justify-content: end !important;
  }
  .smart-justify-content-md-flex-start {
    justify-content: flex-start !important;
  }
  .smart-justify-content-md-flex-end {
    justify-content: flex-end !important;
  }
  .smart-justify-content-md-left {
    justify-content: left !important;
  }
  .smart-justify-content-md-right {
    justify-content: right !important;
  }
  .smart-justify-content-md-space-between {
    justify-content: space-between !important;
  }
  .smart-justify-content-md-space-around {
    justify-content: space-around !important;
  }
  .smart-justify-content-md-space-evenly {
    justify-content: space-evenly !important;
  }
  .smart-align-items-md-normal {
    align-items: normal !important;
  }
  .smart-align-items-md-stretch {
    align-items: stretch !important;
  }
  .smart-align-items-md-center {
    align-items: center !important;
  }
  .smart-align-items-md-start {
    align-items: start !important;
  }
  .smart-align-items-md-end {
    align-items: end !important;
  }
  .smart-align-items-md-flex-start {
    align-items: flex-start !important;
  }
  .smart-align-items-md-flex-end {
    align-items: flex-end !important;
  }
  .smart-overflow-md-auto {
    overflow: auto !important;
  }
  .smart-overflow-md-scroll {
    overflow: scroll !important;
  }
  .smart-overflow-md-visible {
    overflow: visible !important;
  }
  .smart-overflow-md-hidden {
    overflow: hidden !important;
  }
  .smart-w-md-25 {
    width: 25% !important;
  }
  .smart-w-md-50 {
    width: 50% !important;
  }
  .smart-w-md-75 {
    width: 75% !important;
  }
  .smart-w-md-100 {
    width: 100% !important;
  }
  .smart-vw-md-25 {
    width: 25vw !important;
  }
  .smart-vw-md-50 {
    width: 50vw !important;
  }
  .smart-vw-md-75 {
    width: 75vw !important;
  }
  .smart-vw-md-100 {
    width: 100vw !important;
  }
  .smart-w-md-auto {
    width: auto !important;
  }
  .smart-w-md-fit-content {
    width: fit-content !important;
  }
  .smart-w-md-min-content {
    width: min-content !important;
  }
  .smart-w-md-max-content {
    width: max-content !important;
  }
  .smart-w-md-stretch {
    width: stretch !important;
  }
  .smart-min-w-md-25 {
    min-width: 25% !important;
  }
  .smart-min-w-md-50 {
    min-width: 50% !important;
  }
  .smart-min-w-md-75 {
    min-width: 75% !important;
  }
  .smart-min-w-md-100 {
    min-width: 100% !important;
  }
  .smart-max-w-md-25 {
    max-width: 25% !important;
  }
  .smart-max-w-md-50 {
    max-width: 50% !important;
  }
  .smart-max-w-md-75 {
    max-width: 75% !important;
  }
  .smart-max-w-md-100 {
    max-width: 100% !important;
  }
  .smart-h-md-25 {
    height: 25% !important;
  }
  .smart-h-md-50 {
    height: 50% !important;
  }
  .smart-h-md-75 {
    height: 75% !important;
  }
  .smart-h-md-100 {
    height: 100% !important;
  }
  .smart-vh-md-25 {
    height: 25vh !important;
  }
  .smart-vh-md-50 {
    height: 50vh !important;
  }
  .smart-vh-md-75 {
    height: 75vh !important;
  }
  .smart-vh-md-100 {
    height: 100vh !important;
  }
  .smart-h-md-auto {
    height: auto !important;
  }
  .smart-min-h-md-25 {
    min-height: 25% !important;
  }
  .smart-min-h-md-50 {
    min-height: 50% !important;
  }
  .smart-min-h-md-75 {
    min-height: 75% !important;
  }
  .smart-min-h-md-100 {
    min-height: 100% !important;
  }
  .smart-max-h-md-25 {
    max-height: 25% !important;
  }
  .smart-max-h-md-50 {
    max-height: 50% !important;
  }
  .smart-max-h-md-75 {
    max-height: 75% !important;
  }
  .smart-max-h-md-100 {
    max-height: 100% !important;
  }
}
@media (min-width: 1280px) {
  .smart-display-lg-none {
    display: none !important;
  }
  .smart-display-lg-block {
    display: block !important;
  }
  .smart-display-lg-inline {
    display: inline !important;
  }
  .smart-display-lg-inline-block {
    display: inline-block !important;
  }
  .smart-display-lg-flex {
    display: flex !important;
  }
  .smart-display-lg-inline-flex {
    display: inline-flex !important;
  }
  .smart-display-lg-grid {
    display: grid !important;
  }
  .smart-display-lg-inline-grid {
    display: inline-grid !important;
  }
  .smart-justify-content-lg-normal {
    justify-content: normal !important;
  }
  .smart-justify-content-lg-stretch {
    justify-content: stretch !important;
  }
  .smart-justify-content-lg-center {
    justify-content: center !important;
  }
  .smart-justify-content-lg-start {
    justify-content: start !important;
  }
  .smart-justify-content-lg-end {
    justify-content: end !important;
  }
  .smart-justify-content-lg-flex-start {
    justify-content: flex-start !important;
  }
  .smart-justify-content-lg-flex-end {
    justify-content: flex-end !important;
  }
  .smart-justify-content-lg-left {
    justify-content: left !important;
  }
  .smart-justify-content-lg-right {
    justify-content: right !important;
  }
  .smart-justify-content-lg-space-between {
    justify-content: space-between !important;
  }
  .smart-justify-content-lg-space-around {
    justify-content: space-around !important;
  }
  .smart-justify-content-lg-space-evenly {
    justify-content: space-evenly !important;
  }
  .smart-align-items-lg-normal {
    align-items: normal !important;
  }
  .smart-align-items-lg-stretch {
    align-items: stretch !important;
  }
  .smart-align-items-lg-center {
    align-items: center !important;
  }
  .smart-align-items-lg-start {
    align-items: start !important;
  }
  .smart-align-items-lg-end {
    align-items: end !important;
  }
  .smart-align-items-lg-flex-start {
    align-items: flex-start !important;
  }
  .smart-align-items-lg-flex-end {
    align-items: flex-end !important;
  }
  .smart-overflow-lg-auto {
    overflow: auto !important;
  }
  .smart-overflow-lg-scroll {
    overflow: scroll !important;
  }
  .smart-overflow-lg-visible {
    overflow: visible !important;
  }
  .smart-overflow-lg-hidden {
    overflow: hidden !important;
  }
  .smart-w-lg-25 {
    width: 25% !important;
  }
  .smart-w-lg-50 {
    width: 50% !important;
  }
  .smart-w-lg-75 {
    width: 75% !important;
  }
  .smart-w-lg-100 {
    width: 100% !important;
  }
  .smart-vw-lg-25 {
    width: 25vw !important;
  }
  .smart-vw-lg-50 {
    width: 50vw !important;
  }
  .smart-vw-lg-75 {
    width: 75vw !important;
  }
  .smart-vw-lg-100 {
    width: 100vw !important;
  }
  .smart-w-lg-auto {
    width: auto !important;
  }
  .smart-w-lg-fit-content {
    width: fit-content !important;
  }
  .smart-w-lg-min-content {
    width: min-content !important;
  }
  .smart-w-lg-max-content {
    width: max-content !important;
  }
  .smart-w-lg-stretch {
    width: stretch !important;
  }
  .smart-min-w-lg-25 {
    min-width: 25% !important;
  }
  .smart-min-w-lg-50 {
    min-width: 50% !important;
  }
  .smart-min-w-lg-75 {
    min-width: 75% !important;
  }
  .smart-min-w-lg-100 {
    min-width: 100% !important;
  }
  .smart-max-w-lg-25 {
    max-width: 25% !important;
  }
  .smart-max-w-lg-50 {
    max-width: 50% !important;
  }
  .smart-max-w-lg-75 {
    max-width: 75% !important;
  }
  .smart-max-w-lg-100 {
    max-width: 100% !important;
  }
  .smart-h-lg-25 {
    height: 25% !important;
  }
  .smart-h-lg-50 {
    height: 50% !important;
  }
  .smart-h-lg-75 {
    height: 75% !important;
  }
  .smart-h-lg-100 {
    height: 100% !important;
  }
  .smart-vh-lg-25 {
    height: 25vh !important;
  }
  .smart-vh-lg-50 {
    height: 50vh !important;
  }
  .smart-vh-lg-75 {
    height: 75vh !important;
  }
  .smart-vh-lg-100 {
    height: 100vh !important;
  }
  .smart-h-lg-auto {
    height: auto !important;
  }
  .smart-min-h-lg-25 {
    min-height: 25% !important;
  }
  .smart-min-h-lg-50 {
    min-height: 50% !important;
  }
  .smart-min-h-lg-75 {
    min-height: 75% !important;
  }
  .smart-min-h-lg-100 {
    min-height: 100% !important;
  }
  .smart-max-h-lg-25 {
    max-height: 25% !important;
  }
  .smart-max-h-lg-50 {
    max-height: 50% !important;
  }
  .smart-max-h-lg-75 {
    max-height: 75% !important;
  }
  .smart-max-h-lg-100 {
    max-height: 100% !important;
  }
}
@media (min-width: 1920px) {
  .smart-display-xl-none {
    display: none !important;
  }
  .smart-display-xl-block {
    display: block !important;
  }
  .smart-display-xl-inline {
    display: inline !important;
  }
  .smart-display-xl-inline-block {
    display: inline-block !important;
  }
  .smart-display-xl-flex {
    display: flex !important;
  }
  .smart-display-xl-inline-flex {
    display: inline-flex !important;
  }
  .smart-display-xl-grid {
    display: grid !important;
  }
  .smart-display-xl-inline-grid {
    display: inline-grid !important;
  }
  .smart-justify-content-xl-normal {
    justify-content: normal !important;
  }
  .smart-justify-content-xl-stretch {
    justify-content: stretch !important;
  }
  .smart-justify-content-xl-center {
    justify-content: center !important;
  }
  .smart-justify-content-xl-start {
    justify-content: start !important;
  }
  .smart-justify-content-xl-end {
    justify-content: end !important;
  }
  .smart-justify-content-xl-flex-start {
    justify-content: flex-start !important;
  }
  .smart-justify-content-xl-flex-end {
    justify-content: flex-end !important;
  }
  .smart-justify-content-xl-left {
    justify-content: left !important;
  }
  .smart-justify-content-xl-right {
    justify-content: right !important;
  }
  .smart-justify-content-xl-space-between {
    justify-content: space-between !important;
  }
  .smart-justify-content-xl-space-around {
    justify-content: space-around !important;
  }
  .smart-justify-content-xl-space-evenly {
    justify-content: space-evenly !important;
  }
  .smart-align-items-xl-normal {
    align-items: normal !important;
  }
  .smart-align-items-xl-stretch {
    align-items: stretch !important;
  }
  .smart-align-items-xl-center {
    align-items: center !important;
  }
  .smart-align-items-xl-start {
    align-items: start !important;
  }
  .smart-align-items-xl-end {
    align-items: end !important;
  }
  .smart-align-items-xl-flex-start {
    align-items: flex-start !important;
  }
  .smart-align-items-xl-flex-end {
    align-items: flex-end !important;
  }
  .smart-overflow-xl-auto {
    overflow: auto !important;
  }
  .smart-overflow-xl-scroll {
    overflow: scroll !important;
  }
  .smart-overflow-xl-visible {
    overflow: visible !important;
  }
  .smart-overflow-xl-hidden {
    overflow: hidden !important;
  }
  .smart-w-xl-25 {
    width: 25% !important;
  }
  .smart-w-xl-50 {
    width: 50% !important;
  }
  .smart-w-xl-75 {
    width: 75% !important;
  }
  .smart-w-xl-100 {
    width: 100% !important;
  }
  .smart-vw-xl-25 {
    width: 25vw !important;
  }
  .smart-vw-xl-50 {
    width: 50vw !important;
  }
  .smart-vw-xl-75 {
    width: 75vw !important;
  }
  .smart-vw-xl-100 {
    width: 100vw !important;
  }
  .smart-w-xl-auto {
    width: auto !important;
  }
  .smart-w-xl-fit-content {
    width: fit-content !important;
  }
  .smart-w-xl-min-content {
    width: min-content !important;
  }
  .smart-w-xl-max-content {
    width: max-content !important;
  }
  .smart-w-xl-stretch {
    width: stretch !important;
  }
  .smart-min-w-xl-25 {
    min-width: 25% !important;
  }
  .smart-min-w-xl-50 {
    min-width: 50% !important;
  }
  .smart-min-w-xl-75 {
    min-width: 75% !important;
  }
  .smart-min-w-xl-100 {
    min-width: 100% !important;
  }
  .smart-max-w-xl-25 {
    max-width: 25% !important;
  }
  .smart-max-w-xl-50 {
    max-width: 50% !important;
  }
  .smart-max-w-xl-75 {
    max-width: 75% !important;
  }
  .smart-max-w-xl-100 {
    max-width: 100% !important;
  }
  .smart-h-xl-25 {
    height: 25% !important;
  }
  .smart-h-xl-50 {
    height: 50% !important;
  }
  .smart-h-xl-75 {
    height: 75% !important;
  }
  .smart-h-xl-100 {
    height: 100% !important;
  }
  .smart-vh-xl-25 {
    height: 25vh !important;
  }
  .smart-vh-xl-50 {
    height: 50vh !important;
  }
  .smart-vh-xl-75 {
    height: 75vh !important;
  }
  .smart-vh-xl-100 {
    height: 100vh !important;
  }
  .smart-h-xl-auto {
    height: auto !important;
  }
  .smart-min-h-xl-25 {
    min-height: 25% !important;
  }
  .smart-min-h-xl-50 {
    min-height: 50% !important;
  }
  .smart-min-h-xl-75 {
    min-height: 75% !important;
  }
  .smart-min-h-xl-100 {
    min-height: 100% !important;
  }
  .smart-max-h-xl-25 {
    max-height: 25% !important;
  }
  .smart-max-h-xl-50 {
    max-height: 50% !important;
  }
  .smart-max-h-xl-75 {
    max-height: 75% !important;
  }
  .smart-max-h-xl-100 {
    max-height: 100% !important;
  }
}
@media (min-width: 2560px) {
  .smart-display-xx-none {
    display: none !important;
  }
  .smart-display-xx-block {
    display: block !important;
  }
  .smart-display-xx-inline {
    display: inline !important;
  }
  .smart-display-xx-inline-block {
    display: inline-block !important;
  }
  .smart-display-xx-flex {
    display: flex !important;
  }
  .smart-display-xx-inline-flex {
    display: inline-flex !important;
  }
  .smart-display-xx-grid {
    display: grid !important;
  }
  .smart-display-xx-inline-grid {
    display: inline-grid !important;
  }
  .smart-justify-content-xx-normal {
    justify-content: normal !important;
  }
  .smart-justify-content-xx-stretch {
    justify-content: stretch !important;
  }
  .smart-justify-content-xx-center {
    justify-content: center !important;
  }
  .smart-justify-content-xx-start {
    justify-content: start !important;
  }
  .smart-justify-content-xx-end {
    justify-content: end !important;
  }
  .smart-justify-content-xx-flex-start {
    justify-content: flex-start !important;
  }
  .smart-justify-content-xx-flex-end {
    justify-content: flex-end !important;
  }
  .smart-justify-content-xx-left {
    justify-content: left !important;
  }
  .smart-justify-content-xx-right {
    justify-content: right !important;
  }
  .smart-justify-content-xx-space-between {
    justify-content: space-between !important;
  }
  .smart-justify-content-xx-space-around {
    justify-content: space-around !important;
  }
  .smart-justify-content-xx-space-evenly {
    justify-content: space-evenly !important;
  }
  .smart-align-items-xx-normal {
    align-items: normal !important;
  }
  .smart-align-items-xx-stretch {
    align-items: stretch !important;
  }
  .smart-align-items-xx-center {
    align-items: center !important;
  }
  .smart-align-items-xx-start {
    align-items: start !important;
  }
  .smart-align-items-xx-end {
    align-items: end !important;
  }
  .smart-align-items-xx-flex-start {
    align-items: flex-start !important;
  }
  .smart-align-items-xx-flex-end {
    align-items: flex-end !important;
  }
  .smart-overflow-xx-auto {
    overflow: auto !important;
  }
  .smart-overflow-xx-scroll {
    overflow: scroll !important;
  }
  .smart-overflow-xx-visible {
    overflow: visible !important;
  }
  .smart-overflow-xx-hidden {
    overflow: hidden !important;
  }
  .smart-w-xx-25 {
    width: 25% !important;
  }
  .smart-w-xx-50 {
    width: 50% !important;
  }
  .smart-w-xx-75 {
    width: 75% !important;
  }
  .smart-w-xx-100 {
    width: 100% !important;
  }
  .smart-vw-xx-25 {
    width: 25vw !important;
  }
  .smart-vw-xx-50 {
    width: 50vw !important;
  }
  .smart-vw-xx-75 {
    width: 75vw !important;
  }
  .smart-vw-xx-100 {
    width: 100vw !important;
  }
  .smart-w-xx-auto {
    width: auto !important;
  }
  .smart-w-xx-fit-content {
    width: fit-content !important;
  }
  .smart-w-xx-min-content {
    width: min-content !important;
  }
  .smart-w-xx-max-content {
    width: max-content !important;
  }
  .smart-w-xx-stretch {
    width: stretch !important;
  }
  .smart-min-w-xx-25 {
    min-width: 25% !important;
  }
  .smart-min-w-xx-50 {
    min-width: 50% !important;
  }
  .smart-min-w-xx-75 {
    min-width: 75% !important;
  }
  .smart-min-w-xx-100 {
    min-width: 100% !important;
  }
  .smart-max-w-xx-25 {
    max-width: 25% !important;
  }
  .smart-max-w-xx-50 {
    max-width: 50% !important;
  }
  .smart-max-w-xx-75 {
    max-width: 75% !important;
  }
  .smart-max-w-xx-100 {
    max-width: 100% !important;
  }
  .smart-h-xx-25 {
    height: 25% !important;
  }
  .smart-h-xx-50 {
    height: 50% !important;
  }
  .smart-h-xx-75 {
    height: 75% !important;
  }
  .smart-h-xx-100 {
    height: 100% !important;
  }
  .smart-vh-xx-25 {
    height: 25vh !important;
  }
  .smart-vh-xx-50 {
    height: 50vh !important;
  }
  .smart-vh-xx-75 {
    height: 75vh !important;
  }
  .smart-vh-xx-100 {
    height: 100vh !important;
  }
  .smart-h-xx-auto {
    height: auto !important;
  }
  .smart-min-h-xx-25 {
    min-height: 25% !important;
  }
  .smart-min-h-xx-50 {
    min-height: 50% !important;
  }
  .smart-min-h-xx-75 {
    min-height: 75% !important;
  }
  .smart-min-h-xx-100 {
    min-height: 100% !important;
  }
  .smart-max-h-xx-25 {
    max-height: 25% !important;
  }
  .smart-max-h-xx-50 {
    max-height: 50% !important;
  }
  .smart-max-h-xx-75 {
    max-height: 75% !important;
  }
  .smart-max-h-xx-100 {
    max-height: 100% !important;
  }
}
.smart-color-white {
  color: var(--smart-white) !important;
}

.smart-color-black {
  color: var(--smart-black) !important;
}

.smart-color-base {
  color: var(--smart-base) !important;
}

.smart-color-base-50 {
  color: var(--smart-base-50) !important;
}

.smart-color-base-100 {
  color: var(--smart-base-100) !important;
}

.smart-color-base-200 {
  color: var(--smart-base-200) !important;
}

.smart-color-base-300 {
  color: var(--smart-base-300) !important;
}

.smart-color-base-400 {
  color: var(--smart-base-400) !important;
}

.smart-color-base-500 {
  color: var(--smart-base-500) !important;
}

.smart-color-base-600 {
  color: var(--smart-base-600) !important;
}

.smart-color-base-700 {
  color: var(--smart-base-700) !important;
}

.smart-color-base-800 {
  color: var(--smart-base-800) !important;
}

.smart-color-base-900 {
  color: var(--smart-base-900) !important;
}

.smart-color-base-light {
  color: var(--smart-base-light) !important;
}

.smart-color-base-lighter {
  color: var(--smart-base-lighter) !important;
}

.smart-color-base-dark {
  color: var(--smart-base-dark) !important;
}

.smart-color-base-darker {
  color: var(--smart-base-darker) !important;
}

.smart-color-primary {
  color: var(--smart-primary) !important;
}

.smart-color-primary-light {
  color: var(--smart-primary-light) !important;
}

.smart-color-primary-lighter {
  color: var(--smart-primary-lighter) !important;
}

.smart-color-primary-dark {
  color: var(--smart-primary-dark) !important;
}

.smart-color-primary-darker {
  color: var(--smart-primary-darker) !important;
}

.smart-color-secondary {
  color: var(--smart-secondary) !important;
}

.smart-color-secondary-light {
  color: var(--smart-secondary-light) !important;
}

.smart-color-secondary-lighter {
  color: var(--smart-secondary-lighter) !important;
}

.smart-color-secondary-dark {
  color: var(--smart-secondary-dark) !important;
}

.smart-color-secondary-darker {
  color: var(--smart-secondary-darker) !important;
}

.smart-color-info {
  color: var(--smart-info) !important;
}

.smart-color-info-light {
  color: var(--smart-info-light) !important;
}

.smart-color-info-lighter {
  color: var(--smart-info-lighter) !important;
}

.smart-color-info-dark {
  color: var(--smart-info-dark) !important;
}

.smart-color-info-darker {
  color: var(--smart-info-darker) !important;
}

.smart-color-success {
  color: var(--smart-success) !important;
}

.smart-color-success-light {
  color: var(--smart-success-light) !important;
}

.smart-color-success-lighter {
  color: var(--smart-success-lighter) !important;
}

.smart-color-success-dark {
  color: var(--smart-success-dark) !important;
}

.smart-color-success-darker {
  color: var(--smart-success-darker) !important;
}

.smart-color-warning {
  color: var(--smart-warning) !important;
}

.smart-color-warning-light {
  color: var(--smart-warning-light) !important;
}

.smart-color-warning-lighter {
  color: var(--smart-warning-lighter) !important;
}

.smart-color-warning-dark {
  color: var(--smart-warning-dark) !important;
}

.smart-color-warning-darker {
  color: var(--smart-warning-darker) !important;
}

.smart-color-error {
  color: var(--smart-error) !important;
}

.smart-color-error-light {
  color: var(--smart-error-light) !important;
}

.smart-color-error-lighter {
  color: var(--smart-error-lighter) !important;
}

.smart-color-error-dark {
  color: var(--smart-error-dark) !important;
}

.smart-color-error-darker {
  color: var(--smart-error-darker) !important;
}

.smart-color-on-base {
  color: var(--smart-on-base) !important;
}

.smart-color-on-base-light {
  color: var(--smart-on-base-light) !important;
}

.smart-color-on-base-lighter {
  color: var(--smart-on-base-lighter) !important;
}

.smart-color-on-base-dark {
  color: var(--smart-on-base-dark) !important;
}

.smart-color-on-base-darker {
  color: var(--smart-on-base-darker) !important;
}

.smart-color-on-primary {
  color: var(--smart-on-primary) !important;
}

.smart-color-on-primary-light {
  color: var(--smart-on-primary-light) !important;
}

.smart-color-on-primary-lighter {
  color: var(--smart-on-primary-lighter) !important;
}

.smart-color-on-primary-dark {
  color: var(--smart-on-primary-dark) !important;
}

.smart-color-on-primary-darker {
  color: var(--smart-on-primary-darker) !important;
}

.smart-color-on-secondary {
  color: var(--smart-on-secondary) !important;
}

.smart-color-on-secondary-light {
  color: var(--smart-on-secondary-light) !important;
}

.smart-color-on-secondary-lighter {
  color: var(--smart-on-secondary-lighter) !important;
}

.smart-color-on-secondary-dark {
  color: var(--smart-on-secondary-dark) !important;
}

.smart-color-on-secondary-darker {
  color: var(--smart-on-secondary-darker) !important;
}

.smart-color-on-info {
  color: var(--smart-on-info) !important;
}

.smart-color-on-info-light {
  color: var(--smart-on-info-light) !important;
}

.smart-color-on-info-lighter {
  color: var(--smart-on-info-lighter) !important;
}

.smart-color-on-info-dark {
  color: var(--smart-on-info-dark) !important;
}

.smart-color-on-info-darker {
  color: var(--smart-on-info-darker) !important;
}

.smart-color-on-success {
  color: var(--smart-on-success) !important;
}

.smart-color-on-success-light {
  color: var(--smart-on-success-light) !important;
}

.smart-color-on-success-lighter {
  color: var(--smart-on-success-lighter) !important;
}

.smart-color-on-success-dark {
  color: var(--smart-on-success-dark) !important;
}

.smart-color-on-success-darker {
  color: var(--smart-on-success-darker) !important;
}

.smart-color-on-warning {
  color: var(--smart-on-warning) !important;
}

.smart-color-on-warning-light {
  color: var(--smart-on-warning-light) !important;
}

.smart-color-on-warning-lighter {
  color: var(--smart-on-warning-lighter) !important;
}

.smart-color-on-warning-dark {
  color: var(--smart-on-warning-dark) !important;
}

.smart-color-on-warning-darker {
  color: var(--smart-on-warning-darker) !important;
}

.smart-color-on-error {
  color: var(--smart-on-error) !important;
}

.smart-color-on-error-light {
  color: var(--smart-on-error-light) !important;
}

.smart-color-on-error-lighter {
  color: var(--smart-on-error-lighter) !important;
}

.smart-color-on-error-dark {
  color: var(--smart-on-error-dark) !important;
}

.smart-color-on-error-darker {
  color: var(--smart-on-error-darker) !important;
}

.smart-background-color-white {
  background-color: var(--smart-white) !important;
}

.smart-background-color-black {
  background-color: var(--smart-black) !important;
}

.smart-background-color-base {
  backg