@universal-material/web/css/universal-material.css

Material web components

:root {
  --u-state-layer-color: currentColor;
  --u-state-layer-hover-opacity: 8%;
  --u-state-layer-focus-opacity: 12%;
  --u-state-layer-pressed-opacity: 12%;
  --u-state-layer-dragged-opacity: 16%;
  --u-high-emphasis-opacity: 100%;
  --u-low-emphasis-opacity: 75%;
  --u-lower-emphasis-opacity: 50%;
  --u-color-body: var(--u-color-surface, rgb(254, 247, 255));
  --u-color-on-body: var(--u-color-on-surface, rgb(29, 27, 32));
  --u-font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --u-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  --u-text-opacity: var(--u-high-emphasis-opacity);
  --u-layout-margin: var(--u-layout-margin-default);
  --u-layout-gutter: var(--u-layout-gutter-default);
  --u-layout-margin-default: var(--u-spacing-medium);
  --u-layout-gutter-default: var(--u-spacing-medium);
  --u-color-high-emphasis: color-mix(in srgb, currentColor var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, currentColor var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, currentColor var(--u-lower-emphasis-opacity), transparent) !important;
  --u-font-weight-thin: 100;
  --u-font-weight-light: 300;
  --u-font-weight-regular: 400;
  --u-font-weight-medium: 500;
  --u-font-weight-bold: 700;
  --u-font-weight-bolder: 900;
  --u-spacing-0: 0;
  --u-spacing-extra-small: 4px;
  --u-spacing-small: 8px;
  --u-spacing-medium: 16px;
  --u-spacing-large: 24px;
  --u-spacing-extra-large: 40px;
  --u-shape-corner-none: 0;
  --u-shape-corner-extra-small: 4px;
  --u-shape-corner-small: 8px;
  --u-shape-corner-medium: 12px;
  --u-shape-corner-large: 16px;
  --u-shape-corner-extra-large: 28px;
  --u-shape-corner-full: 9999px;
}

@media (min-width: 600px) {
  :root {
    --u-layout-margin-default: var(--u-spacing-large);
    --u-layout-gutter-default: var(--u-spacing-large);
  }
}
.u-text-bg-primary {
  color: var(--u-color-on-primary) !important;
  background-color: var(--u-color-primary) !important;
}

.u-text-bg-inverse-primary {
  color: var(--u-color-on-inverse-primary) !important;
  background-color: var(--u-color-inverse-primary) !important;
}

.u-bg-primary {
  background-color: var(--u-color-primary) !important;
}

.u-bg-inverse-primary {
  background-color: var(--u-color-inverse-primary) !important;
}

.u-text-bg-primary-container {
  color: var(--u-color-on-primary-container) !important;
  background-color: var(--u-color-primary-container) !important;
}

.u-text-bg-inverse-primary-container {
  color: var(--u-color-on-inverse-primary-container) !important;
  background-color: var(--u-color-inverse-primary-container) !important;
}

.u-bg-primary-container {
  background-color: var(--u-color-primary-container) !important;
}

.u-bg-inverse-primary-container {
  background-color: var(--u-color-inverse-primary-container) !important;
}

.u-text-bg-secondary {
  color: var(--u-color-on-secondary) !important;
  background-color: var(--u-color-secondary) !important;
}

.u-text-bg-inverse-secondary {
  color: var(--u-color-on-inverse-secondary) !important;
  background-color: var(--u-color-inverse-secondary) !important;
}

.u-bg-secondary {
  background-color: var(--u-color-secondary) !important;
}

.u-bg-inverse-secondary {
  background-color: var(--u-color-inverse-secondary) !important;
}

.u-text-bg-secondary-container {
  color: var(--u-color-on-secondary-container) !important;
  background-color: var(--u-color-secondary-container) !important;
}

.u-text-bg-inverse-secondary-container {
  color: var(--u-color-on-inverse-secondary-container) !important;
  background-color: var(--u-color-inverse-secondary-container) !important;
}

.u-bg-secondary-container {
  background-color: var(--u-color-secondary-container) !important;
}

.u-bg-inverse-secondary-container {
  background-color: var(--u-color-inverse-secondary-container) !important;
}

.u-text-bg-tertiary {
  color: var(--u-color-on-tertiary) !important;
  background-color: var(--u-color-tertiary) !important;
}

.u-text-bg-inverse-tertiary {
  color: var(--u-color-on-inverse-tertiary) !important;
  background-color: var(--u-color-inverse-tertiary) !important;
}

.u-bg-tertiary {
  background-color: var(--u-color-tertiary) !important;
}

.u-bg-inverse-tertiary {
  background-color: var(--u-color-inverse-tertiary) !important;
}

.u-text-bg-tertiary-container {
  color: var(--u-color-on-tertiary-container) !important;
  background-color: var(--u-color-tertiary-container) !important;
}

.u-text-bg-inverse-tertiary-container {
  color: var(--u-color-on-inverse-tertiary-container) !important;
  background-color: var(--u-color-inverse-tertiary-container) !important;
}

.u-bg-tertiary-container {
  background-color: var(--u-color-tertiary-container) !important;
}

.u-bg-inverse-tertiary-container {
  background-color: var(--u-color-inverse-tertiary-container) !important;
}

.u-text-bg-error {
  color: var(--u-color-on-error) !important;
  background-color: var(--u-color-error) !important;
}

.u-text-bg-inverse-error {
  color: var(--u-color-on-inverse-error) !important;
  background-color: var(--u-color-inverse-error) !important;
}

.u-bg-error {
  background-color: var(--u-color-error) !important;
}

.u-bg-inverse-error {
  background-color: var(--u-color-inverse-error) !important;
}

.u-text-bg-error-container {
  color: var(--u-color-on-error-container) !important;
  background-color: var(--u-color-error-container) !important;
}

.u-text-bg-inverse-error-container {
  color: var(--u-color-on-inverse-error-container) !important;
  background-color: var(--u-color-inverse-error-container) !important;
}

.u-bg-error-container {
  background-color: var(--u-color-error-container) !important;
}

.u-bg-inverse-error-container {
  background-color: var(--u-color-inverse-error-container) !important;
}

.u-text-bg-surface {
  color: var(--u-color-on-surface) !important;
  background-color: var(--u-color-surface) !important;
}

.u-text-bg-inverse-surface {
  color: var(--u-color-on-inverse-surface) !important;
  background-color: var(--u-color-inverse-surface) !important;
}

.u-bg-surface {
  background-color: var(--u-color-surface) !important;
}

.u-bg-inverse-surface {
  background-color: var(--u-color-inverse-surface) !important;
}

.u-text-bg-surface-variant {
  color: var(--u-color-on-surface-variant) !important;
  background-color: var(--u-color-surface-variant) !important;
}

.u-text-bg-inverse-surface-variant {
  color: var(--u-color-on-inverse-surface-variant) !important;
  background-color: var(--u-color-inverse-surface-variant) !important;
}

.u-bg-surface-variant {
  background-color: var(--u-color-surface-variant) !important;
}

.u-bg-inverse-surface-variant {
  background-color: var(--u-color-inverse-surface-variant) !important;
}

.u-text-bg-surface-container {
  color: var(--u-color-on-surface) !important;
  background-color: var(--u-color-surface-container) !important;
}

.u-text-bg-inverse-surface-container {
  color: var(--u-color-on-inverse-surface) !important;
  background-color: var(--u-color-inverse-surface-container) !important;
}

.u-bg-surface-container {
  background-color: var(--u-color-surface-container) !important;
}

.u-bg-inverse-surface-container {
  background-color: var(--u-color-inverse-surface-container) !important;
}

.u-text-bg-surface-container-highest {
  color: var(--u-color-on-surface) !important;
  background-color: var(--u-color-surface-container-highest) !important;
}

.u-text-bg-inverse-surface-container-highest {
  color: var(--u-color-on-inverse-surface) !important;
  background-color: var(--u-color-inverse-surface-container-highest) !important;
}

.u-bg-surface-container-highest {
  background-color: var(--u-color-surface-container-highest) !important;
}

.u-bg-inverse-surface-container-highest {
  background-color: var(--u-color-inverse-surface-container-highest) !important;
}

.u-text-bg-surface-container-high {
  color: var(--u-color-on-surface) !important;
  background-color: var(--u-color-surface-container-high) !important;
}

.u-text-bg-inverse-surface-container-high {
  color: var(--u-color-on-inverse-surface) !important;
  background-color: var(--u-color-inverse-surface-container-high) !important;
}

.u-bg-surface-container-high {
  background-color: var(--u-color-surface-container-high) !important;
}

.u-bg-inverse-surface-container-high {
  background-color: var(--u-color-inverse-surface-container-high) !important;
}

.u-text-bg-surface-container-low {
  color: var(--u-color-on-surface) !important;
  background-color: var(--u-color-surface-container-low) !important;
}

.u-text-bg-inverse-surface-container-low {
  color: var(--u-color-on-inverse-surface) !important;
  background-color: var(--u-color-inverse-surface-container-low) !important;
}

.u-bg-surface-container-low {
  background-color: var(--u-color-surface-container-low) !important;
}

.u-bg-inverse-surface-container-low {
  background-color: var(--u-color-inverse-surface-container-low) !important;
}

.u-text-bg-surface-container-lowest {
  color: var(--u-color-on-surface) !important;
  background-color: var(--u-color-surface-container-lowest) !important;
}

.u-text-bg-inverse-surface-container-lowest {
  color: var(--u-color-on-inverse-surface) !important;
  background-color: var(--u-color-inverse-surface-container-lowest) !important;
}

.u-bg-surface-container-lowest {
  background-color: var(--u-color-surface-container-lowest) !important;
}

.u-bg-inverse-surface-container-lowest {
  background-color: var(--u-color-inverse-surface-container-lowest) !important;
}

.u-text-bg-success {
  color: var(--u-color-on-success) !important;
  background-color: var(--u-color-success) !important;
}

.u-text-bg-success-container {
  color: var(--u-color-on-success-container) !important;
  background-color: var(--u-color-success-container) !important;
}

.u-bg-success {
  background-color: var(--u-color-success) !important;
}

.u-bg-success-container {
  background-color: var(--u-color-success-container) !important;
}

.u-text-bg-info {
  color: var(--u-color-on-info) !important;
  background-color: var(--u-color-info) !important;
}

.u-text-bg-info-container {
  color: var(--u-color-on-info-container) !important;
  background-color: var(--u-color-info-container) !important;
}

.u-bg-info {
  background-color: var(--u-color-info) !important;
}

.u-bg-info-container {
  background-color: var(--u-color-info-container) !important;
}

.u-text-bg-warning {
  color: var(--u-color-on-warning) !important;
  background-color: var(--u-color-warning) !important;
}

.u-text-bg-warning-container {
  color: var(--u-color-on-warning-container) !important;
  background-color: var(--u-color-warning-container) !important;
}

.u-bg-warning {
  background-color: var(--u-color-warning) !important;
}

.u-bg-warning-container {
  background-color: var(--u-color-warning-container) !important;
}

.u-text-bg-primary-fixed {
  color: var(--u-color-on-primary-fixed) !important;
  background-color: var(--u-color-primary-fixed) !important;
}

.u-text-bg-primary-fixed-dim {
  color: var(--u-color-on-primary-fixed) !important;
  background-color: var(--u-color-primary-fixed-dim) !important;
}

.u-bg-primary-fixed {
  background-color: var(--u-color-primary-fixed) !important;
}

.u-bg-primary-fixed-dim {
  background-color: var(--u-color-primary-fixed-dim) !important;
}

.u-text-bg-secondary-fixed {
  color: var(--u-color-on-secondary-fixed) !important;
  background-color: var(--u-color-secondary-fixed) !important;
}

.u-text-bg-secondary-fixed-dim {
  color: var(--u-color-on-secondary-fixed) !important;
  background-color: var(--u-color-secondary-fixed-dim) !important;
}

.u-bg-secondary-fixed {
  background-color: var(--u-color-secondary-fixed) !important;
}

.u-bg-secondary-fixed-dim {
  background-color: var(--u-color-secondary-fixed-dim) !important;
}

.u-text-bg-tertiary-fixed {
  color: var(--u-color-on-tertiary-fixed) !important;
  background-color: var(--u-color-tertiary-fixed) !important;
}

.u-text-bg-tertiary-fixed-dim {
  color: var(--u-color-on-tertiary-fixed) !important;
  background-color: var(--u-color-tertiary-fixed-dim) !important;
}

.u-bg-tertiary-fixed {
  background-color: var(--u-color-tertiary-fixed) !important;
}

.u-bg-tertiary-fixed-dim {
  background-color: var(--u-color-tertiary-fixed-dim) !important;
}

.u-text-bg-body {
  color: var(--u-color-on-body) !important;
  background-color: var(--u-color-body) !important;
}

.u-text-bg-inverse-body {
  color: var(--u-color-on-inverse-body) !important;
  background-color: var(--u-color-inverse-body) !important;
}

.u-text-bg-light {
  color: var(--u-color-on-light) !important;
  background-color: var(--u-color-light) !important;
}

.u-text-bg-dark {
  color: var(--u-color-on-dark) !important;
  background-color: var(--u-color-dark) !important;
}

.u-bg-body {
  background-color: var(--u-color-body) !important;
}

.u-bg-inverse-body {
  background-color: var(--u-color-inverse-body) !important;
}

.u-bg-light {
  background-color: var(--u-color-light) !important;
}

.u-bg-dark {
  background-color: var(--u-color-dark) !important;
}

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

.u-text-inverse-primary {
  color: var(--u-color-inverse-primary) !important;
}

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

.u-text-on-inverse-primary {
  color: var(--u-color-on-inverse-primary) !important;
}

.u-text-on-primary-container {
  color: var(--u-color-on-primary-container) !important;
}

.u-text-on-inverse-primary-container {
  color: var(--u-color-on-inverse-primary-container) !important;
}

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

.u-text-inverse-secondary {
  color: var(--u-color-inverse-secondary) !important;
}

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

.u-text-on-inverse-secondary {
  color: var(--u-color-on-inverse-secondary) !important;
}

.u-text-on-secondary-container {
  color: var(--u-color-on-secondary-container) !important;
}

.u-text-on-inverse-secondary-container {
  color: var(--u-color-on-inverse-secondary-container) !important;
}

.u-text-tertiary {
  color: var(--u-color-tertiary) !important;
}

.u-text-inverse-tertiary {
  color: var(--u-color-inverse-tertiary) !important;
}

.u-text-on-tertiary {
  color: var(--u-color-on-tertiary) !important;
}

.u-text-on-inverse-tertiary {
  color: var(--u-color-on-inverse-tertiary) !important;
}

.u-text-on-tertiary-container {
  color: var(--u-color-on-tertiary-container) !important;
}

.u-text-on-inverse-tertiary-container {
  color: var(--u-color-on-inverse-tertiary-container) !important;
}

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

.u-text-inverse-error {
  color: var(--u-color-inverse-error) !important;
}

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

.u-text-on-inverse-error {
  color: var(--u-color-on-inverse-error) !important;
}

.u-text-on-error-container {
  color: var(--u-color-on-error-container) !important;
}

.u-text-on-inverse-error-container {
  color: var(--u-color-on-inverse-error-container) !important;
}

.u-text-surface {
  color: var(--u-color-surface) !important;
}

.u-text-inverse-surface {
  color: var(--u-color-inverse-surface) !important;
}

.u-text-on-surface {
  color: var(--u-color-on-surface) !important;
}

.u-text-on-inverse-surface {
  color: var(--u-color-on-inverse-surface) !important;
}

.u-text-surface-variant {
  color: var(--u-color-surface-variant) !important;
}

.u-text-inverse-surface-variant {
  color: var(--u-color-inverse-surface-variant) !important;
}

.u-text-on-surface-variant {
  color: var(--u-color-on-surface-variant) !important;
}

.u-text-on-inverse-surface-variant {
  color: var(--u-color-on-inverse-surface-variant) !important;
}

.u-text-on-surface-container {
  color: var(--u-color-on-surface-container) !important;
}

.u-text-on-inverse-surface-container {
  color: var(--u-color-on-inverse-surface-container) !important;
}

.u-text-on-surface-container-highest {
  color: var(--u-color-on-surface-container-highest) !important;
}

.u-text-on-inverse-surface-container-highest {
  color: var(--u-color-on-inverse-surface-container-highest) !important;
}

.u-text-on-surface-container-high {
  color: var(--u-color-on-surface-container-high) !important;
}

.u-text-on-inverse-surface-container-high {
  color: var(--u-color-on-inverse-surface-container-high) !important;
}

.u-text-on-surface-container-low {
  color: var(--u-color-on-surface-container-low) !important;
}

.u-text-on-inverse-surface-container-low {
  color: var(--u-color-on-inverse-surface-container-low) !important;
}

.u-text-on-surface-container-lowest {
  color: var(--u-color-on-surface-container-lowest) !important;
}

.u-text-on-inverse-surface-container-lowest {
  color: var(--u-color-on-inverse-surface-container-lowest) !important;
}

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

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

.u-text-success-container {
  color: var(--u-color-success-container) !important;
}

.u-text-on-success-container {
  color: var(--u-color-on-success-container) !important;
}

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

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

.u-text-info-container {
  color: var(--u-color-info-container) !important;
}

.u-text-on-info-container {
  color: var(--u-color-on-info-container) !important;
}

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

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

.u-text-warning-container {
  color: var(--u-color-warning-container) !important;
}

.u-text-on-warning-container {
  color: var(--u-color-on-warning-container) !important;
}

.u-text-primary-fixed {
  color: var(--u-color-primary-fixed) !important;
}

.u-text-primary-fixed-dim {
  color: var(--u-color-primary-fixed-dim) !important;
}

.u-text-on-primary-fixed {
  color: var(--u-color-on-primary-fixed) !important;
}

.u-text-on-primary-fixed-variant {
  color: var(--u-color-on-primary-fixed-variant) !important;
}

.u-text-secondary-fixed {
  color: var(--u-color-secondary-fixed) !important;
}

.u-text-secondary-fixed-dim {
  color: var(--u-color-secondary-fixed-dim) !important;
}

.u-text-on-secondary-fixed {
  color: var(--u-color-on-secondary-fixed) !important;
}

.u-text-on-secondary-fixed-variant {
  color: var(--u-color-on-secondary-fixed-variant) !important;
}

.u-text-tertiary-fixed {
  color: var(--u-color-tertiary-fixed) !important;
}

.u-text-tertiary-fixed-dim {
  color: var(--u-color-tertiary-fixed-dim) !important;
}

.u-text-on-tertiary-fixed {
  color: var(--u-color-on-tertiary-fixed) !important;
}

.u-text-on-tertiary-fixed-variant {
  color: var(--u-color-on-tertiary-fixed-variant) !important;
}

.u-text-on-body {
  color: var(--u-color-on-body) !important;
}

.u-text-on-inverse-body {
  color: var(--u-color-on-inverse-body) !important;
}

.u-text-on-light {
  color: var(--u-color-on-light) !important;
}

.u-text-on-dark {
  color: var(--u-color-on-dark) !important;
}

.u-container-fluid,
.u-container {
  padding-inline: var(--u-layout-margin-inline, var(--u-layout-margin));
  padding-block: var(--u-layout-margin-block, var(--u-layout-margin));
  width: 100%;
}

.u-container {
  max-width: var(--u-container-width, 992px);
  margin-inline: auto;
}

.u-grid {
  display: grid;
  grid-template-columns: repeat(var(--u-grid-columns, 2), minmax(0, 1fr));
  column-gap: var(--u-layout-gutter-inline, var(--u-layout-gutter));
  row-gap: var(--u-layout-gutter-block, var(--u-layout-gutter));
}

.u-column {
  display: flex;
  flex-direction: column;
  gap: var(--u-layout-gutter-block, var(--u-layout-gutter));
}

.u-margin-default {
  --u-layout-margin: var(--u-layout-margin-default);
}

.u-gutter-default {
  --u-layout-gutter: var(--u-layout-gutter-default);
}

.u-margin-block-default {
  --u-layout-margin-block: var(--u-layout-margin-default);
}

.u-gutter-block-default {
  --u-layout-gutter-block: var(--u-layout-gutter-default);
}

.u-margin-inline-default {
  --u-layout-margin-inline: var(--u-layout-margin-default);
}

.u-gutter-inline-default {
  --u-layout-gutter-inline: var(--u-layout-gutter-default);
}

.u-margin-0 {
  --u-layout-margin: var(--u-spacing-0);
}

.u-gutter-0 {
  --u-layout-gutter: var(--u-spacing-0);
}

.u-margin-block-0 {
  --u-layout-margin-block: var(--u-spacing-0);
}

.u-gutter-block-0 {
  --u-layout-gutter-block: var(--u-spacing-0);
}

.u-margin-inline-0 {
  --u-layout-margin-inline: var(--u-spacing-0);
}

.u-gutter-inline-0 {
  --u-layout-gutter-inline: var(--u-spacing-0);
}

.u-margin-extra-small {
  --u-layout-margin: var(--u-spacing-extra-small);
}

.u-gutter-extra-small {
  --u-layout-gutter: var(--u-spacing-extra-small);
}

.u-margin-block-extra-small {
  --u-layout-margin-block: var(--u-spacing-extra-small);
}

.u-gutter-block-extra-small {
  --u-layout-gutter-block: var(--u-spacing-extra-small);
}

.u-margin-inline-extra-small {
  --u-layout-margin-inline: var(--u-spacing-extra-small);
}

.u-gutter-inline-extra-small {
  --u-layout-gutter-inline: var(--u-spacing-extra-small);
}

.u-margin-small {
  --u-layout-margin: var(--u-spacing-small);
}

.u-gutter-small {
  --u-layout-gutter: var(--u-spacing-small);
}

.u-margin-block-small {
  --u-layout-margin-block: var(--u-spacing-small);
}

.u-gutter-block-small {
  --u-layout-gutter-block: var(--u-spacing-small);
}

.u-margin-inline-small {
  --u-layout-margin-inline: var(--u-spacing-small);
}

.u-gutter-inline-small {
  --u-layout-gutter-inline: var(--u-spacing-small);
}

.u-margin-medium {
  --u-layout-margin: var(--u-spacing-medium);
}

.u-gutter-medium {
  --u-layout-gutter: var(--u-spacing-medium);
}

.u-margin-block-medium {
  --u-layout-margin-block: var(--u-spacing-medium);
}

.u-gutter-block-medium {
  --u-layout-gutter-block: var(--u-spacing-medium);
}

.u-margin-inline-medium {
  --u-layout-margin-inline: var(--u-spacing-medium);
}

.u-gutter-inline-medium {
  --u-layout-gutter-inline: var(--u-spacing-medium);
}

.u-margin-large {
  --u-layout-margin: var(--u-spacing-large);
}

.u-gutter-large {
  --u-layout-gutter: var(--u-spacing-large);
}

.u-margin-block-large {
  --u-layout-margin-block: var(--u-spacing-large);
}

.u-gutter-block-large {
  --u-layout-gutter-block: var(--u-spacing-large);
}

.u-margin-inline-large {
  --u-layout-margin-inline: var(--u-spacing-large);
}

.u-gutter-inline-large {
  --u-layout-gutter-inline: var(--u-spacing-large);
}

.u-margin-extra-large {
  --u-layout-margin: var(--u-spacing-extra-large);
}

.u-gutter-extra-large {
  --u-layout-gutter: var(--u-spacing-extra-large);
}

.u-margin-block-extra-large {
  --u-layout-margin-block: var(--u-spacing-extra-large);
}

.u-gutter-block-extra-large {
  --u-layout-gutter-block: var(--u-spacing-extra-large);
}

.u-margin-inline-extra-large {
  --u-layout-margin-inline: var(--u-spacing-extra-large);
}

.u-gutter-inline-extra-large {
  --u-layout-gutter-inline: var(--u-spacing-extra-large);
}

@media (min-width: 600px) {
  .u-margin-sm-default {
    --u-layout-margin: var(--u-layout-margin-default);
  }
  .u-gutter-sm-default {
    --u-layout-gutter: var(--u-layout-gutter-default);
  }
}
@media (min-width: 600px) {
  .u-margin-block-sm-default {
    --u-layout-margin-block: var(--u-layout-margin-default);
  }
  .u-gutter-block-sm-default {
    --u-layout-gutter-block: var(--u-layout-gutter-default);
  }
}
@media (min-width: 600px) {
  .u-margin-inline-sm-default {
    --u-layout-margin-inline: var(--u-layout-margin-default);
  }
  .u-gutter-inline-sm-default {
    --u-layout-gutter-inline: var(--u-layout-gutter-default);
  }
}
@media (min-width: 600px) {
  .u-margin-sm-0 {
    --u-layout-margin: var(--u-spacing-0);
  }
  .u-gutter-sm-0 {
    --u-layout-gutter: var(--u-spacing-0);
  }
}
@media (min-width: 600px) {
  .u-margin-block-sm-0 {
    --u-layout-margin-block: var(--u-spacing-0);
  }
  .u-gutter-block-sm-0 {
    --u-layout-gutter-block: var(--u-spacing-0);
  }
}
@media (min-width: 600px) {
  .u-margin-inline-sm-0 {
    --u-layout-margin-inline: var(--u-spacing-0);
  }
  .u-gutter-inline-sm-0 {
    --u-layout-gutter-inline: var(--u-spacing-0);
  }
}
@media (min-width: 600px) {
  .u-margin-sm-extra-small {
    --u-layout-margin: var(--u-spacing-extra-small);
  }
  .u-gutter-sm-extra-small {
    --u-layout-gutter: var(--u-spacing-extra-small);
  }
}
@media (min-width: 600px) {
  .u-margin-block-sm-extra-small {
    --u-layout-margin-block: var(--u-spacing-extra-small);
  }
  .u-gutter-block-sm-extra-small {
    --u-layout-gutter-block: var(--u-spacing-extra-small);
  }
}
@media (min-width: 600px) {
  .u-margin-inline-sm-extra-small {
    --u-layout-margin-inline: var(--u-spacing-extra-small);
  }
  .u-gutter-inline-sm-extra-small {
    --u-layout-gutter-inline: var(--u-spacing-extra-small);
  }
}
@media (min-width: 600px) {
  .u-margin-sm-small {
    --u-layout-margin: var(--u-spacing-small);
  }
  .u-gutter-sm-small {
    --u-layout-gutter: var(--u-spacing-small);
  }
}
@media (min-width: 600px) {
  .u-margin-block-sm-small {
    --u-layout-margin-block: var(--u-spacing-small);
  }
  .u-gutter-block-sm-small {
    --u-layout-gutter-block: var(--u-spacing-small);
  }
}
@media (min-width: 600px) {
  .u-margin-inline-sm-small {
    --u-layout-margin-inline: var(--u-spacing-small);
  }
  .u-gutter-inline-sm-small {
    --u-layout-gutter-inline: var(--u-spacing-small);
  }
}
@media (min-width: 600px) {
  .u-margin-sm-medium {
    --u-layout-margin: var(--u-spacing-medium);
  }
  .u-gutter-sm-medium {
    --u-layout-gutter: var(--u-spacing-medium);
  }
}
@media (min-width: 600px) {
  .u-margin-block-sm-medium {
    --u-layout-margin-block: var(--u-spacing-medium);
  }
  .u-gutter-block-sm-medium {
    --u-layout-gutter-block: var(--u-spacing-medium);
  }
}
@media (min-width: 600px) {
  .u-margin-inline-sm-medium {
    --u-layout-margin-inline: var(--u-spacing-medium);
  }
  .u-gutter-inline-sm-medium {
    --u-layout-gutter-inline: var(--u-spacing-medium);
  }
}
@media (min-width: 600px) {
  .u-margin-sm-large {
    --u-layout-margin: var(--u-spacing-large);
  }
  .u-gutter-sm-large {
    --u-layout-gutter: var(--u-spacing-large);
  }
}
@media (min-width: 600px) {
  .u-margin-block-sm-large {
    --u-layout-margin-block: var(--u-spacing-large);
  }
  .u-gutter-block-sm-large {
    --u-layout-gutter-block: var(--u-spacing-large);
  }
}
@media (min-width: 600px) {
  .u-margin-inline-sm-large {
    --u-layout-margin-inline: var(--u-spacing-large);
  }
  .u-gutter-inline-sm-large {
    --u-layout-gutter-inline: var(--u-spacing-large);
  }
}
@media (min-width: 600px) {
  .u-margin-sm-extra-large {
    --u-layout-margin: var(--u-spacing-extra-large);
  }
  .u-gutter-sm-extra-large {
    --u-layout-gutter: var(--u-spacing-extra-large);
  }
}
@media (min-width: 600px) {
  .u-margin-block-sm-extra-large {
    --u-layout-margin-block: var(--u-spacing-extra-large);
  }
  .u-gutter-block-sm-extra-large {
    --u-layout-gutter-block: var(--u-spacing-extra-large);
  }
}
@media (min-width: 600px) {
  .u-margin-inline-sm-extra-large {
    --u-layout-margin-inline: var(--u-spacing-extra-large);
  }
  .u-gutter-inline-sm-extra-large {
    --u-layout-gutter-inline: var(--u-spacing-extra-large);
  }
}
@media (min-width: 840px) {
  .u-margin-md-default {
    --u-layout-margin: var(--u-layout-margin-default);
  }
  .u-gutter-md-default {
    --u-layout-gutter: var(--u-layout-gutter-default);
  }
}
@media (min-width: 840px) {
  .u-margin-block-md-default {
    --u-layout-margin-block: var(--u-layout-margin-default);
  }
  .u-gutter-block-md-default {
    --u-layout-gutter-block: var(--u-layout-gutter-default);
  }
}
@media (min-width: 840px) {
  .u-margin-inline-md-default {
    --u-layout-margin-inline: var(--u-layout-margin-default);
  }
  .u-gutter-inline-md-default {
    --u-layout-gutter-inline: var(--u-layout-gutter-default);
  }
}
@media (min-width: 840px) {
  .u-margin-md-0 {
    --u-layout-margin: var(--u-spacing-0);
  }
  .u-gutter-md-0 {
    --u-layout-gutter: var(--u-spacing-0);
  }
}
@media (min-width: 840px) {
  .u-margin-block-md-0 {
    --u-layout-margin-block: var(--u-spacing-0);
  }
  .u-gutter-block-md-0 {
    --u-layout-gutter-block: var(--u-spacing-0);
  }
}
@media (min-width: 840px) {
  .u-margin-inline-md-0 {
    --u-layout-margin-inline: var(--u-spacing-0);
  }
  .u-gutter-inline-md-0 {
    --u-layout-gutter-inline: var(--u-spacing-0);
  }
}
@media (min-width: 840px) {
  .u-margin-md-extra-small {
    --u-layout-margin: var(--u-spacing-extra-small);
  }
  .u-gutter-md-extra-small {
    --u-layout-gutter: var(--u-spacing-extra-small);
  }
}
@media (min-width: 840px) {
  .u-margin-block-md-extra-small {
    --u-layout-margin-block: var(--u-spacing-extra-small);
  }
  .u-gutter-block-md-extra-small {
    --u-layout-gutter-block: var(--u-spacing-extra-small);
  }
}
@media (min-width: 840px) {
  .u-margin-inline-md-extra-small {
    --u-layout-margin-inline: var(--u-spacing-extra-small);
  }
  .u-gutter-inline-md-extra-small {
    --u-layout-gutter-inline: var(--u-spacing-extra-small);
  }
}
@media (min-width: 840px) {
  .u-margin-md-small {
    --u-layout-margin: var(--u-spacing-small);
  }
  .u-gutter-md-small {
    --u-layout-gutter: var(--u-spacing-small);
  }
}
@media (min-width: 840px) {
  .u-margin-block-md-small {
    --u-layout-margin-block: var(--u-spacing-small);
  }
  .u-gutter-block-md-small {
    --u-layout-gutter-block: var(--u-spacing-small);
  }
}
@media (min-width: 840px) {
  .u-margin-inline-md-small {
    --u-layout-margin-inline: var(--u-spacing-small);
  }
  .u-gutter-inline-md-small {
    --u-layout-gutter-inline: var(--u-spacing-small);
  }
}
@media (min-width: 840px) {
  .u-margin-md-medium {
    --u-layout-margin: var(--u-spacing-medium);
  }
  .u-gutter-md-medium {
    --u-layout-gutter: var(--u-spacing-medium);
  }
}
@media (min-width: 840px) {
  .u-margin-block-md-medium {
    --u-layout-margin-block: var(--u-spacing-medium);
  }
  .u-gutter-block-md-medium {
    --u-layout-gutter-block: var(--u-spacing-medium);
  }
}
@media (min-width: 840px) {
  .u-margin-inline-md-medium {
    --u-layout-margin-inline: var(--u-spacing-medium);
  }
  .u-gutter-inline-md-medium {
    --u-layout-gutter-inline: var(--u-spacing-medium);
  }
}
@media (min-width: 840px) {
  .u-margin-md-large {
    --u-layout-margin: var(--u-spacing-large);
  }
  .u-gutter-md-large {
    --u-layout-gutter: var(--u-spacing-large);
  }
}
@media (min-width: 840px) {
  .u-margin-block-md-large {
    --u-layout-margin-block: var(--u-spacing-large);
  }
  .u-gutter-block-md-large {
    --u-layout-gutter-block: var(--u-spacing-large);
  }
}
@media (min-width: 840px) {
  .u-margin-inline-md-large {
    --u-layout-margin-inline: var(--u-spacing-large);
  }
  .u-gutter-inline-md-large {
    --u-layout-gutter-inline: var(--u-spacing-large);
  }
}
@media (min-width: 840px) {
  .u-margin-md-extra-large {
    --u-layout-margin: var(--u-spacing-extra-large);
  }
  .u-gutter-md-extra-large {
    --u-layout-gutter: var(--u-spacing-extra-large);
  }
}
@media (min-width: 840px) {
  .u-margin-block-md-extra-large {
    --u-layout-margin-block: var(--u-spacing-extra-large);
  }
  .u-gutter-block-md-extra-large {
    --u-layout-gutter-block: var(--u-spacing-extra-large);
  }
}
@media (min-width: 840px) {
  .u-margin-inline-md-extra-large {
    --u-layout-margin-inline: var(--u-spacing-extra-large);
  }
  .u-gutter-inline-md-extra-large {
    --u-layout-gutter-inline: var(--u-spacing-extra-large);
  }
}
@media (min-width: 1200px) {
  .u-margin-lg-default {
    --u-layout-margin: var(--u-layout-margin-default);
  }
  .u-gutter-lg-default {
    --u-layout-gutter: var(--u-layout-gutter-default);
  }
}
@media (min-width: 1200px) {
  .u-margin-block-lg-default {
    --u-layout-margin-block: var(--u-layout-margin-default);
  }
  .u-gutter-block-lg-default {
    --u-layout-gutter-block: var(--u-layout-gutter-default);
  }
}
@media (min-width: 1200px) {
  .u-margin-inline-lg-default {
    --u-layout-margin-inline: var(--u-layout-margin-default);
  }
  .u-gutter-inline-lg-default {
    --u-layout-gutter-inline: var(--u-layout-gutter-default);
  }
}
@media (min-width: 1200px) {
  .u-margin-lg-0 {
    --u-layout-margin: var(--u-spacing-0);
  }
  .u-gutter-lg-0 {
    --u-layout-gutter: var(--u-spacing-0);
  }
}
@media (min-width: 1200px) {
  .u-margin-block-lg-0 {
    --u-layout-margin-block: var(--u-spacing-0);
  }
  .u-gutter-block-lg-0 {
    --u-layout-gutter-block: var(--u-spacing-0);
  }
}
@media (min-width: 1200px) {
  .u-margin-inline-lg-0 {
    --u-layout-margin-inline: var(--u-spacing-0);
  }
  .u-gutter-inline-lg-0 {
    --u-layout-gutter-inline: var(--u-spacing-0);
  }
}
@media (min-width: 1200px) {
  .u-margin-lg-extra-small {
    --u-layout-margin: var(--u-spacing-extra-small);
  }
  .u-gutter-lg-extra-small {
    --u-layout-gutter: var(--u-spacing-extra-small);
  }
}
@media (min-width: 1200px) {
  .u-margin-block-lg-extra-small {
    --u-layout-margin-block: var(--u-spacing-extra-small);
  }
  .u-gutter-block-lg-extra-small {
    --u-layout-gutter-block: var(--u-spacing-extra-small);
  }
}
@media (min-width: 1200px) {
  .u-margin-inline-lg-extra-small {
    --u-layout-margin-inline: var(--u-spacing-extra-small);
  }
  .u-gutter-inline-lg-extra-small {
    --u-layout-gutter-inline: var(--u-spacing-extra-small);
  }
}
@media (min-width: 1200px) {
  .u-margin-lg-small {
    --u-layout-margin: var(--u-spacing-small);
  }
  .u-gutter-lg-small {
    --u-layout-gutter: var(--u-spacing-small);
  }
}
@media (min-width: 1200px) {
  .u-margin-block-lg-small {
    --u-layout-margin-block: var(--u-spacing-small);
  }
  .u-gutter-block-lg-small {
    --u-layout-gutter-block: var(--u-spacing-small);
  }
}
@media (min-width: 1200px) {
  .u-margin-inline-lg-small {
    --u-layout-margin-inline: var(--u-spacing-small);
  }
  .u-gutter-inline-lg-small {
    --u-layout-gutter-inline: var(--u-spacing-small);
  }
}
@media (min-width: 1200px) {
  .u-margin-lg-medium {
    --u-layout-margin: var(--u-spacing-medium);
  }
  .u-gutter-lg-medium {
    --u-layout-gutter: var(--u-spacing-medium);
  }
}
@media (min-width: 1200px) {
  .u-margin-block-lg-medium {
    --u-layout-margin-block: var(--u-spacing-medium);
  }
  .u-gutter-block-lg-medium {
    --u-layout-gutter-block: var(--u-spacing-medium);
  }
}
@media (min-width: 1200px) {
  .u-margin-inline-lg-medium {
    --u-layout-margin-inline: var(--u-spacing-medium);
  }
  .u-gutter-inline-lg-medium {
    --u-layout-gutter-inline: var(--u-spacing-medium);
  }
}
@media (min-width: 1200px) {
  .u-margin-lg-large {
    --u-layout-margin: var(--u-spacing-large);
  }
  .u-gutter-lg-large {
    --u-layout-gutter: var(--u-spacing-large);
  }
}
@media (min-width: 1200px) {
  .u-margin-block-lg-large {
    --u-layout-margin-block: var(--u-spacing-large);
  }
  .u-gutter-block-lg-large {
    --u-layout-gutter-block: var(--u-spacing-large);
  }
}
@media (min-width: 1200px) {
  .u-margin-inline-lg-large {
    --u-layout-margin-inline: var(--u-spacing-large);
  }
  .u-gutter-inline-lg-large {
    --u-layout-gutter-inline: var(--u-spacing-large);
  }
}
@media (min-width: 1200px) {
  .u-margin-lg-extra-large {
    --u-layout-margin: var(--u-spacing-extra-large);
  }
  .u-gutter-lg-extra-large {
    --u-layout-gutter: var(--u-spacing-extra-large);
  }
}
@media (min-width: 1200px) {
  .u-margin-block-lg-extra-large {
    --u-layout-margin-block: var(--u-spacing-extra-large);
  }
  .u-gutter-block-lg-extra-large {
    --u-layout-gutter-block: var(--u-spacing-extra-large);
  }
}
@media (min-width: 1200px) {
  .u-margin-inline-lg-extra-large {
    --u-layout-margin-inline: var(--u-spacing-extra-large);
  }
  .u-gutter-inline-lg-extra-large {
    --u-layout-gutter-inline: var(--u-spacing-extra-large);
  }
}
@media (min-width: 1600px) {
  .u-margin-xl-default {
    --u-layout-margin: var(--u-layout-margin-default);
  }
  .u-gutter-xl-default {
    --u-layout-gutter: var(--u-layout-gutter-default);
  }
}
@media (min-width: 1600px) {
  .u-margin-block-xl-default {
    --u-layout-margin-block: var(--u-layout-margin-default);
  }
  .u-gutter-block-xl-default {
    --u-layout-gutter-block: var(--u-layout-gutter-default);
  }
}
@media (min-width: 1600px) {
  .u-margin-inline-xl-default {
    --u-layout-margin-inline: var(--u-layout-margin-default);
  }
  .u-gutter-inline-xl-default {
    --u-layout-gutter-inline: var(--u-layout-gutter-default);
  }
}
@media (min-width: 1600px) {
  .u-margin-xl-0 {
    --u-layout-margin: var(--u-spacing-0);
  }
  .u-gutter-xl-0 {
    --u-layout-gutter: var(--u-spacing-0);
  }
}
@media (min-width: 1600px) {
  .u-margin-block-xl-0 {
    --u-layout-margin-block: var(--u-spacing-0);
  }
  .u-gutter-block-xl-0 {
    --u-layout-gutter-block: var(--u-spacing-0);
  }
}
@media (min-width: 1600px) {
  .u-margin-inline-xl-0 {
    --u-layout-margin-inline: var(--u-spacing-0);
  }
  .u-gutter-inline-xl-0 {
    --u-layout-gutter-inline: var(--u-spacing-0);
  }
}
@media (min-width: 1600px) {
  .u-margin-xl-extra-small {
    --u-layout-margin: var(--u-spacing-extra-small);
  }
  .u-gutter-xl-extra-small {
    --u-layout-gutter: var(--u-spacing-extra-small);
  }
}
@media (min-width: 1600px) {
  .u-margin-block-xl-extra-small {
    --u-layout-margin-block: var(--u-spacing-extra-small);
  }
  .u-gutter-block-xl-extra-small {
    --u-layout-gutter-block: var(--u-spacing-extra-small);
  }
}
@media (min-width: 1600px) {
  .u-margin-inline-xl-extra-small {
    --u-layout-margin-inline: var(--u-spacing-extra-small);
  }
  .u-gutter-inline-xl-extra-small {
    --u-layout-gutter-inline: var(--u-spacing-extra-small);
  }
}
@media (min-width: 1600px) {
  .u-margin-xl-small {
    --u-layout-margin: var(--u-spacing-small);
  }
  .u-gutter-xl-small {
    --u-layout-gutter: var(--u-spacing-small);
  }
}
@media (min-width: 1600px) {
  .u-margin-block-xl-small {
    --u-layout-margin-block: var(--u-spacing-small);
  }
  .u-gutter-block-xl-small {
    --u-layout-gutter-block: var(--u-spacing-small);
  }
}
@media (min-width: 1600px) {
  .u-margin-inline-xl-small {
    --u-layout-margin-inline: var(--u-spacing-small);
  }
  .u-gutter-inline-xl-small {
    --u-layout-gutter-inline: var(--u-spacing-small);
  }
}
@media (min-width: 1600px) {
  .u-margin-xl-medium {
    --u-layout-margin: var(--u-spacing-medium);
  }
  .u-gutter-xl-medium {
    --u-layout-gutter: var(--u-spacing-medium);
  }
}
@media (min-width: 1600px) {
  .u-margin-block-xl-medium {
    --u-layout-margin-block: var(--u-spacing-medium);
  }
  .u-gutter-block-xl-medium {
    --u-layout-gutter-block: var(--u-spacing-medium);
  }
}
@media (min-width: 1600px) {
  .u-margin-inline-xl-medium {
    --u-layout-margin-inline: var(--u-spacing-medium);
  }
  .u-gutter-inline-xl-medium {
    --u-layout-gutter-inline: var(--u-spacing-medium);
  }
}
@media (min-width: 1600px) {
  .u-margin-xl-large {
    --u-layout-margin: var(--u-spacing-large);
  }
  .u-gutter-xl-large {
    --u-layout-gutter: var(--u-spacing-large);
  }
}
@media (min-width: 1600px) {
  .u-margin-block-xl-large {
    --u-layout-margin-block: var(--u-spacing-large);
  }
  .u-gutter-block-xl-large {
    --u-layout-gutter-block: var(--u-spacing-large);
  }
}
@media (min-width: 1600px) {
  .u-margin-inline-xl-large {
    --u-layout-margin-inline: var(--u-spacing-large);
  }
  .u-gutter-inline-xl-large {
    --u-layout-gutter-inline: var(--u-spacing-large);
  }
}
@media (min-width: 1600px) {
  .u-margin-xl-extra-large {
    --u-layout-margin: var(--u-spacing-extra-large);
  }
  .u-gutter-xl-extra-large {
    --u-layout-gutter: var(--u-spacing-extra-large);
  }
}
@media (min-width: 1600px) {
  .u-margin-block-xl-extra-large {
    --u-layout-margin-block: var(--u-spacing-extra-large);
  }
  .u-gutter-block-xl-extra-large {
    --u-layout-gutter-block: var(--u-spacing-extra-large);
  }
}
@media (min-width: 1600px) {
  .u-margin-inline-xl-extra-large {
    --u-layout-margin-inline: var(--u-spacing-extra-large);
  }
  .u-gutter-inline-xl-extra-large {
    --u-layout-gutter-inline: var(--u-spacing-extra-large);
  }
}
.u-divider,
.u-divider-no-margin {
  display: block;
  height: var(--u-divider-thickness, 1px);
  background-color: var(--u-divider-color, currentColor);
  opacity: var(--u-divider-opacity, 0.4);
}

.u-divider {
  margin-block: 8px;
}

.u-dark {
  color-scheme: dark !important;
  color: var(--u-color-on-body);
}

.u-light {
  color-scheme: light !important;
  color: var(--u-color-on-body);
}

.u-m-0 {
  margin: var(--u-spacing-0);
}

.u-p-0 {
  padding: var(--u-spacing-0);
}

.u-mt-0 {
  margin-top: var(--u-spacing-0);
}

.u-pt-0 {
  padding-top: var(--u-spacing-0);
}

.u-mb-0 {
  margin-bottom: var(--u-spacing-0);
}

.u-pb-0 {
  padding-bottom: var(--u-spacing-0);
}

.u-ms-0 {
  margin-inline-start: var(--u-spacing-0);
}

.u-ps-0 {
  padding-inline-start: var(--u-spacing-0);
}

.u-me-0 {
  margin-inline-end: var(--u-spacing-0);
}

.u-pe-0 {
  padding-inline-end: var(--u-spacing-0);
}

.u-mx-0 {
  margin-inline: var(--u-spacing-0);
}

.u-px-0 {
  padding-inline: var(--u-spacing-0);
}

.u-my-0 {
  margin-block: var(--u-spacing-0);
}

.u-py-0 {
  padding-block: var(--u-spacing-0);
}

.u-m-extra-small {
  margin: var(--u-spacing-extra-small);
}

.u-p-extra-small {
  padding: var(--u-spacing-extra-small);
}

.u-mt-extra-small {
  margin-top: var(--u-spacing-extra-small);
}

.u-pt-extra-small {
  padding-top: var(--u-spacing-extra-small);
}

.u-mb-extra-small {
  margin-bottom: var(--u-spacing-extra-small);
}

.u-pb-extra-small {
  padding-bottom: var(--u-spacing-extra-small);
}

.u-ms-extra-small {
  margin-inline-start: var(--u-spacing-extra-small);
}

.u-ps-extra-small {
  padding-inline-start: var(--u-spacing-extra-small);
}

.u-me-extra-small {
  margin-inline-end: var(--u-spacing-extra-small);
}

.u-pe-extra-small {
  padding-inline-end: var(--u-spacing-extra-small);
}

.u-mx-extra-small {
  margin-inline: var(--u-spacing-extra-small);
}

.u-px-extra-small {
  padding-inline: var(--u-spacing-extra-small);
}

.u-my-extra-small {
  margin-block: var(--u-spacing-extra-small);
}

.u-py-extra-small {
  padding-block: var(--u-spacing-extra-small);
}

.u-m-small {
  margin: var(--u-spacing-small);
}

.u-p-small {
  padding: var(--u-spacing-small);
}

.u-mt-small {
  margin-top: var(--u-spacing-small);
}

.u-pt-small {
  padding-top: var(--u-spacing-small);
}

.u-mb-small {
  margin-bottom: var(--u-spacing-small);
}

.u-pb-small {
  padding-bottom: var(--u-spacing-small);
}

.u-ms-small {
  margin-inline-start: var(--u-spacing-small);
}

.u-ps-small {
  padding-inline-start: var(--u-spacing-small);
}

.u-me-small {
  margin-inline-end: var(--u-spacing-small);
}

.u-pe-small {
  padding-inline-end: var(--u-spacing-small);
}

.u-mx-small {
  margin-inline: var(--u-spacing-small);
}

.u-px-small {
  padding-inline: var(--u-spacing-small);
}

.u-my-small {
  margin-block: var(--u-spacing-small);
}

.u-py-small {
  padding-block: var(--u-spacing-small);
}

.u-m-medium {
  margin: var(--u-spacing-medium);
}

.u-p-medium {
  padding: var(--u-spacing-medium);
}

.u-mt-medium {
  margin-top: var(--u-spacing-medium);
}

.u-pt-medium {
  padding-top: var(--u-spacing-medium);
}

.u-mb-medium {
  margin-bottom: var(--u-spacing-medium);
}

.u-pb-medium {
  padding-bottom: var(--u-spacing-medium);
}

.u-ms-medium {
  margin-inline-start: var(--u-spacing-medium);
}

.u-ps-medium {
  padding-inline-start: var(--u-spacing-medium);
}

.u-me-medium {
  margin-inline-end: var(--u-spacing-medium);
}

.u-pe-medium {
  padding-inline-end: var(--u-spacing-medium);
}

.u-mx-medium {
  margin-inline: var(--u-spacing-medium);
}

.u-px-medium {
  padding-inline: var(--u-spacing-medium);
}

.u-my-medium {
  margin-block: var(--u-spacing-medium);
}

.u-py-medium {
  padding-block: var(--u-spacing-medium);
}

.u-m-large {
  margin: var(--u-spacing-large);
}

.u-p-large {
  padding: var(--u-spacing-large);
}

.u-mt-large {
  margin-top: var(--u-spacing-large);
}

.u-pt-large {
  padding-top: var(--u-spacing-large);
}

.u-mb-large {
  margin-bottom: var(--u-spacing-large);
}

.u-pb-large {
  padding-bottom: var(--u-spacing-large);
}

.u-ms-large {
  margin-inline-start: var(--u-spacing-large);
}

.u-ps-large {
  padding-inline-start: var(--u-spacing-large);
}

.u-me-large {
  margin-inline-end: var(--u-spacing-large);
}

.u-pe-large {
  padding-inline-end: var(--u-spacing-large);
}

.u-mx-large {
  margin-inline: var(--u-spacing-large);
}

.u-px-large {
  padding-inline: var(--u-spacing-large);
}

.u-my-large {
  margin-block: var(--u-spacing-large);
}

.u-py-large {
  padding-block: var(--u-spacing-large);
}

.u-m-extra-large {
  margin: var(--u-spacing-extra-large);
}

.u-p-extra-large {
  padding: var(--u-spacing-extra-large);
}

.u-mt-extra-large {
  margin-top: var(--u-spacing-extra-large);
}

.u-pt-extra-large {
  padding-top: var(--u-spacing-extra-large);
}

.u-mb-extra-large {
  margin-bottom: var(--u-spacing-extra-large);
}

.u-pb-extra-large {
  padding-bottom: var(--u-spacing-extra-large);
}

.u-ms-extra-large {
  margin-inline-start: var(--u-spacing-extra-large);
}

.u-ps-extra-large {
  padding-inline-start: var(--u-spacing-extra-large);
}

.u-me-extra-large {
  margin-inline-end: var(--u-spacing-extra-large);
}

.u-pe-extra-large {
  padding-inline-end: var(--u-spacing-extra-large);
}

.u-mx-extra-large {
  margin-inline: var(--u-spacing-extra-large);
}

.u-px-extra-large {
  padding-inline: var(--u-spacing-extra-large);
}

.u-my-extra-large {
  margin-block: var(--u-spacing-extra-large);
}

.u-py-extra-large {
  padding-block: var(--u-spacing-extra-large);
}

@media (min-width: 600px) {
  .u-m-sm-0 {
    margin: var(--u-spacing-0);
  }
  .u-p-sm-0 {
    padding: var(--u-spacing-0);
  }
}
@media (min-width: 600px) {
  .u-mt-sm-0 {
    margin-top: var(--u-spacing-0);
  }
  .u-pt-sm-0 {
    padding-top: var(--u-spacing-0);
  }
}
@media (min-width: 600px) {
  .u-mb-sm-0 {
    margin-bottom: var(--u-spacing-0);
  }
  .u-pb-sm-0 {
    padding-bottom: var(--u-spacing-0);
  }
}
@media (min-width: 600px) {
  .u-ms-sm-0 {
    margin-inline-start: var(--u-spacing-0);
  }
  .u-ps-sm-0 {
    padding-inline-start: var(--u-spacing-0);
  }
}
@media (min-width: 600px) {
  .u-me-sm-0 {
    margin-inline-end: var(--u-spacing-0);
  }
  .u-pe-sm-0 {
    padding-inline-end: var(--u-spacing-0);
  }
}
@media (min-width: 600px) {
  .u-mx-sm-0 {
    margin-inline: var(--u-spacing-0);
  }
  .u-px-sm-0 {
    padding-inline: var(--u-spacing-0);
  }
}
@media (min-width: 600px) {
  .u-my-sm-0 {
    margin-block: var(--u-spacing-0);
  }
  .u-py-sm-0 {
    padding-block: var(--u-spacing-0);
  }
}
@media (min-width: 600px) {
  .u-m-sm-extra-small {
    margin: var(--u-spacing-extra-small);
  }
  .u-p-sm-extra-small {
    padding: var(--u-spacing-extra-small);
  }
}
@media (min-width: 600px) {
  .u-mt-sm-extra-small {
    margin-top: var(--u-spacing-extra-small);
  }
  .u-pt-sm-extra-small {
    padding-top: var(--u-spacing-extra-small);
  }
}
@media (min-width: 600px) {
  .u-mb-sm-extra-small {
    margin-bottom: var(--u-spacing-extra-small);
  }
  .u-pb-sm-extra-small {
    padding-bottom: var(--u-spacing-extra-small);
  }
}
@media (min-width: 600px) {
  .u-ms-sm-extra-small {
    margin-inline-start: var(--u-spacing-extra-small);
  }
  .u-ps-sm-extra-small {
    padding-inline-start: var(--u-spacing-extra-small);
  }
}
@media (min-width: 600px) {
  .u-me-sm-extra-small {
    margin-inline-end: var(--u-spacing-extra-small);
  }
  .u-pe-sm-extra-small {
    padding-inline-end: var(--u-spacing-extra-small);
  }
}
@media (min-width: 600px) {
  .u-mx-sm-extra-small {
    margin-inline: var(--u-spacing-extra-small);
  }
  .u-px-sm-extra-small {
    padding-inline: var(--u-spacing-extra-small);
  }
}
@media (min-width: 600px) {
  .u-my-sm-extra-small {
    margin-block: var(--u-spacing-extra-small);
  }
  .u-py-sm-extra-small {
    padding-block: var(--u-spacing-extra-small);
  }
}
@media (min-width: 600px) {
  .u-m-sm-small {
    margin: var(--u-spacing-small);
  }
  .u-p-sm-small {
    padding: var(--u-spacing-small);
  }
}
@media (min-width: 600px) {
  .u-mt-sm-small {
    margin-top: var(--u-spacing-small);
  }
  .u-pt-sm-small {
    padding-top: var(--u-spacing-small);
  }
}
@media (min-width: 600px) {
  .u-mb-sm-small {
    margin-bottom: var(--u-spacing-small);
  }
  .u-pb-sm-small {
    padding-bottom: var(--u-spacing-small);
  }
}
@media (min-width: 600px) {
  .u-ms-sm-small {
    margin-inline-start: var(--u-spacing-small);
  }
  .u-ps-sm-small {
    padding-inline-start: var(--u-spacing-small);
  }
}
@media (min-width: 600px) {
  .u-me-sm-small {
    margin-inline-end: var(--u-spacing-small);
  }
  .u-pe-sm-small {
    padding-inline-end: var(--u-spacing-small);
  }
}
@media (min-width: 600px) {
  .u-mx-sm-small {
    margin-inline: var(--u-spacing-small);
  }
  .u-px-sm-small {
    padding-inline: var(--u-spacing-small);
  }
}
@media (min-width: 600px) {
  .u-my-sm-small {
    margin-block: var(--u-spacing-small);
  }
  .u-py-sm-small {
    padding-block: var(--u-spacing-small);
  }
}
@media (min-width: 600px) {
  .u-m-sm-medium {
    margin: var(--u-spacing-medium);
  }
  .u-p-sm-medium {
    padding: var(--u-spacing-medium);
  }
}
@media (min-width: 600px) {
  .u-mt-sm-medium {
    margin-top: var(--u-spacing-medium);
  }
  .u-pt-sm-medium {
    padding-top: var(--u-spacing-medium);
  }
}
@media (min-width: 600px) {
  .u-mb-sm-medium {
    margin-bottom: var(--u-spacing-medium);
  }
  .u-pb-sm-medium {
    padding-bottom: var(--u-spacing-medium);
  }
}
@media (min-width: 600px) {
  .u-ms-sm-medium {
    margin-inline-start: var(--u-spaci