*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: inherit;
}

* {
  border: 0;
  outline: none;
  vertical-align: baseline;
  list-style-type: none;
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  height: 100%;
  margin: 0 auto;
  text-shadow: none;
  text-rendering: optimizelegibility;
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-base);
  background-color: var(--color-theme-background);
  box-sizing: border-box;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

input,
button,
textarea,
select {
  appearance: none;
  appearance: none;
  font: inherit;
}

/* Custom Media Queries */
@custom-media --xsmall (max-width: 579px);
/* should not be used as the css should be written in mobile first aaproach */
@custom-media --small-and-up (min-width: 580px);
@custom-media --small (width >=580px) and (width <=759px);
@custom-media --medium-and-up (min-width: 760px);
@custom-media --medium-and-below (max-width: 759px);
@custom-media --medium (width >=760px) and (width <=959px);
@custom-media --large-and-up (min-width: 960px);
@custom-media --large-and-below (max-width: 959px);
@custom-media --large (width >=960px) and (width <=1920px);
@custom-media --xlarge-and-up (min-width: 1921px);
[data-theme=tui],
[theme=tui],
:host([theme=tui]),
html.tui {
  --color-theme-base-dark: hsl(199deg, 74%, 39%);
  --color-theme-base: hsl(199deg, 86%, 70%);
  --color-theme-base-light: hsl(201deg, 85%, 87%);
  --color-theme-base-lighter: hsl(204deg, 93%, 94%);
  --color-theme-background: hsl(0deg, 0%, 100%);
  --color-theme-surface: hsl(0deg, 0%, 100%);
  --color-theme-base-variant: hsl(217deg, 83%, 20%);
  --color-theme-base-variant-dark: hsl(199deg, 74%, 25%);
  --color-theme-contrast: hsl(42deg, 98%, 53%);
  --color-theme-contrast-dark: hsl(42deg, 98%, 43%);
  --color-theme-promotion: hsl(358deg, 88%, 44%);
  --color-on-theme-base-dark: hsl(217deg, 83%, 20%);
  --color-on-theme-base: hsl(217deg, 83%, 20%);
  --color-on-theme-base-light: hsl(217deg, 83%, 20%);
  --color-on-theme-base-lighter: hsl(217deg, 83%, 20%);
  --color-on-theme-background: hsl(0deg, 0%, 30%);
  --color-on-theme-surface: hsl(0deg, 0%, 30%);
  --color-on-theme-base-variant: hsl(0deg, 0%, 100%);
  --color-on-theme-base-variant-dark: hsl(0deg, 0%, 100%);
  --color-on-theme-contrast: hsl(0deg, 0%, 0%);
  --color-on-theme-contrast-dark: hsl(0deg, 0%, 0%);
  --color-on-theme-promotion: hsl(0deg, 0%, 100%);
  --color-achromatic-base: hsl(45deg, 20%, 80%);
  --color-achromatic-base-light: hsl(40deg, 20%, 88%);
  --color-achromatic-base-lighter: hsl(34deg, 23%, 94%);
  --color-on-achromatic-base: hsl(0deg, 0%, 30%);
  --color-on-achromatic-base-light: hsl(0deg, 0%, 30%);
  --color-on-achromatic-base-lighter: hsl(0deg, 0%, 30%);
  --color-functional-base: hsl(199deg, 74%, 39%);
  --color-functional-base-light: hsl(199deg, 47%, 80%);
  --color-functional-base-lighter: hsl(199deg, 47%, 94%);
  --color-functional-important-dark: hsl(358deg, 88%, 24%);
  --color-functional-important: hsl(358deg, 88%, 44%);
  --color-functional-important-light: hsl(0deg, 90%, 92%);
  --color-functional-neutral-black: hsl(0deg, 0%, 0%);
  --color-functional-neutral-dark: hsl(0deg, 0%, 30%);
  --color-functional-neutral-light: hsl(0deg, 0%, 73%);
  --color-functional-neutral-lighter: hsl(0deg, 0%, 86%);
  --color-functional-neutral: hsl(0deg, 0%, 45%);
  --color-functional-positive-dark: hsl(73deg, 100%, 20%);
  --color-functional-positive: hsl(73deg, 100%, 42%);
  --color-functional-positive-light: hsl(72deg, 73%, 85%);
  --color-functional-warning-dark: hsl(47deg, 100%, 42%);
  --color-functional-warning: hsl(53deg, 100%, 50%);
  --color-functional-warning-light: hsl(53deg, 100%, 94%);
  --color-on-functional-base: hsl(0deg, 0%, 100%);
  --color-on-functional-base-light: hsl(217deg, 83%, 20%);
  --color-on-functional-base-lighter: hsl(217deg, 83%, 20%);
  --color-on-functional-important-dark: hsl(0deg, 0%, 100%);
  --color-on-functional-important-light: hsl(217deg, 83%, 20%);
  --color-on-functional-important: hsl(0deg, 0%, 100%);
  --color-on-functional-neutral-black: hsl(0deg, 0%, 100%);
  --color-on-functional-neutral-dark: hsl(0deg, 0%, 100%);
  --color-on-functional-neutral-light: hsl(0deg, 0%, 0%);
  --color-on-functional-neutral-lighter: hsl(0deg, 0%, 30%);
  --color-on-functional-neutral: hsl(0deg, 0%, 100%);
  --color-on-functional-positive-dark: hsl(0deg, 0%, 100%);
  --color-on-functional-positive-light: hsl(217deg, 83%, 20%);
  --color-on-functional-positive: hsl(217deg, 83%, 20%);
  --color-on-functional-warning-dark: hsl(0deg, 0%, 0%);
  --color-on-functional-warning-light: hsl(0deg, 0%, 0%);
  --color-on-functional-warning: hsl(0deg, 0%, 0%);
  --color-text-heading: hsl(217deg, 83%, 20%);
  --color-text-base: hsl(0deg, 0%, 30%);
  --color-text-link: hsl(199deg, 74%, 39%);
  --color-transparent: hsla(217deg, 83%, 20%, 0.75);
  --color-transparent-variant: hsla(0deg, 100%, 100%, 0.75);
  --color-transparent-contrast: hsla(199deg, 86%, 70%, 0.75);
  --color-transparent-neutral: hsla(0deg, 0%, 0%, 0.5);
  --color-transparent-neutral-light: hsla(0deg, 0%, 0%, 0.3);
  --color-transparent-neutral-lighter: hsla(0deg, 0%, 0%, 0.15);
  --color-gradient-diagonal: linear-gradient(-120deg, hsla(360deg 100% 100% / 0%) 0%, hsla(360deg 100% 100% / 0%) 5%, hsla(360deg 100% 100% / 80%) 85%, hsla(360deg 100% 100% / 100%) 100%);
  --color-gradient-linear: linear-gradient(180deg, hsla(360deg 100% 100% / 0%) 0%, hsla(360deg 100% 100% / 0%) 5%, hsla(360deg 100% 100% / 80%) 85%, hsla(360deg 100% 100% / 100%) 100%);
  --color-lighten-900: linear-gradient(180deg, rgb(255 255 255 / 90%) 0%, rgb(255 255 255 / 90%) 100%);
  --color-lighten-800: linear-gradient(180deg, rgb(255 255 255 / 80%) 0%, rgb(255 255 255 / 80%) 100%);
  --color-lighten-750: linear-gradient(180deg, rgb(255 255 255 / 75%) 0%, rgb(255 255 255 / 75%) 100%);
  --color-lighten-700: linear-gradient(180deg, rgb(255 255 255 / 70%) 0%, rgb(255 255 255 / 70%) 100%);
  --color-lighten-600: linear-gradient(180deg, rgb(255 255 255 / 60%) 0%, rgb(255 255 255 / 60%) 100%);
  --color-lighten-500: linear-gradient(180deg, rgb(255 255 255 / 50%) 0%, rgb(255 255 255 / 50%) 100%);
  --color-lighten-400: linear-gradient(180deg, rgb(255 255 255 / 40%) 0%, rgb(255 255 255 / 40%) 100%);
  --color-lighten-300: linear-gradient(180deg, rgb(255 255 255 / 30%) 0%, rgb(255 255 255 / 30%) 100%);
  --color-lighten-200: linear-gradient(180deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 20%) 100%);
  --color-lighten-100: linear-gradient(180deg, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 10%) 100%);
  --color-darken-150: linear-gradient(180deg, hsla(0deg 0% 0% / 15%) 0%, hsla(0deg 0% 0% / 15%) 100%);
  --color-darken-300: linear-gradient(180deg, hsla(0deg 0% 0% / 30%) 0%, hsla(0deg 0% 0% / 30%) 100%);
  --color-darken-600: linear-gradient(180deg, hsla(0deg 0% 0% / 30%) 0%, hsla(0deg 0% 0% / 30%) 100%);
  --font-family-primary: "TUITypeLight", tuitypelightregular, tui-type, arial, sans-serif;
  --font-family-base: "TUITypeLight", tuitypelightregular, tui-type, arial, sans-serif;
  --font-size-xsmall: .75rem;
  --font-size-small: 1rem;
  --font-size-medium: 1.125rem;
  --font-size-large: 1.5rem;
  --font-size-xlarge: 1.875rem;
  --font-size-xxlarge: 2.25rem;
  --font-size-xxxlarge: 2.625rem;
  --line-height-text-xsmall: 1.333;
  --line-height-text-small: 1.333;
  --line-height-text-medium: 1.333;
  --line-height-text-large: 1.333;
  --line-height-text-xlarge: 1.2;
  --line-height-text-xxlarge: 1.111;
  --line-height-text-xxxlarge: 1.047;
  --line-height-spaced: 1.556;
  --line-height-normal: 1.333;
  --line-height-baseline: 1;
  --font-fix: 1px;
  --grid-baseline: 4px;
  --layout-columns: 12;
  --layout-gutter-width: calc(var(--grid-baseline) * 4);
  --layout-float-breakpoint: 1220px;
  --layout-max-width: calc(var(--layout-float-breakpoint) + var(--layout-gutter-width));
  --spacing-0: 0;
  --spacing-05: calc(var(--grid-baseline) / 2);
  --spacing-1: var(--grid-baseline);
  --spacing-2: calc(var(--grid-baseline) * 2);
  --spacing-3: calc(var(--grid-baseline) * 3);
  --spacing-4: calc(var(--grid-baseline) * 4);
  --spacing-5: calc(var(--grid-baseline) * 5);
  --spacing-6: calc(var(--grid-baseline) * 6);
  --spacing-7: calc(var(--grid-baseline) * 7);
  --spacing-8: calc(var(--grid-baseline) * 8);
  --spacing-9: calc(var(--grid-baseline) * 9);
  --spacing-10: calc(var(--grid-baseline) * 10);
  --spacing-11: calc(var(--grid-baseline) * 11);
  --spacing-12: calc(var(--grid-baseline) * 12);
  --border-width-thin: .056em;
  --border-width-medium: .112em;
  --border-width-thick: .168em;
  --border-radius-0: 0;
  --border-radius-1: .125rem;
  --border-radius-2: .25rem;
  --border-radius-3: .375rem;
  --border-radius-4: .5rem;
  --border-radius-100: 100rem;
  --border-color-active-dark: var(--color-theme-base-variant);
  --border-color-active: var(--color-functional-base);
  --border-color-default: var(--color-functional-neutral);
  --border-color-important: var(--color-functional-important);
  --border-color-passive: var(--color-functional-neutral-light);
  --border-color-positive: var(--color-functional-positive);
  --border-color-text: var(--color-functional-neutral-dark);
  --layer-hidden: - 1;
  --layer-default: 0;
  --layer-top: 1;
  --layer-dropdown-background: 900;
  --layer-dropdown: 1000;
  --layer-sticky: 1020;
  --layer-fixed: 1030;
  --layer-modal-overlay: 1040;
  --layer-modal: 1050;
  --layer-popover: 1060;
  --layer-tooltip: 1070;
  --elevation-top: 0 0 2px 0 var(--shadow-color);
  --elevation-dropdown: 0 0 4px 0 var(--shadow-color);
  --elevation-sticky: 0 0 8px 0 var(--shadow-color);
  --elevation-fixed: 0 0 12px 0 var(--shadow-color);
  --elevation-modal: 0 0 16px 0 var(--shadow-color);
  --elevation-popover: 0 0 20px 0 var(--shadow-color);
  --elevation-tooltip: 0 0 24px 0 var(--shadow-color);
  --elevation-button: inset 0 -1px 0 0 var(--shadow-color);
  --elevation-focus: 0 0 0 2px var(--color-functional-base), 0 0 8px 0 var(--color-theme-base);
  --shadow-color: rgb(0 0 0 / 40%);
  --elevation-shadow-level-0: 0 0 4px 0 var(--shadow-color);
  --elevation-shadow-level-1: 0 0 8px 0 var(--shadow-color);
  --elevation-shadow-level-2: 0 0 12px 0 var(--shadow-color);
  --elevation-shadow-level-3: 0 0 16px 0 var(--shadow-color);
  --elevation-shadow-level-4: 0 0 20px 0 var(--shadow-color);
  --elevation-shadow-level-5: 0 0 24px 0 var(--shadow-color);
  --elevation-background-level-0: var(--color-theme-background);
  --elevation-background-level-1: var(--color-theme-base) var(--color-lighten-800);
  --elevation-background-level-2: var(--color-theme-base) var(--color-lighten-600);
  --elevation-background-level-3: var(--color-theme-base) var(--color-lighten-400);
  --elevation-background-level-4: var(--color-theme-base) var(--color-lighten-200);
  --elevation-background-level-5: var(--color-theme-base);
  --motion-delay-1: .1s;
  --motion-delay-2: .2s;
  --motion-delay-3: .5s;
  --motion-delay-4: .6s;
  --motion-delay-5: 1s;
  --motion-delay-none: 0s;
  --motion-duration-fast: .2s;
  --motion-duration-medium: .5s;
  --motion-duration-slow: .6s;
  --motion-timing-brand: cubic-bezier(.65, .05, .4, 1.3);
  --motion-timing-default: ease-in-out;
  --badge-border-radius: var(--border-radius-2);
  --card-border-radius: var(--border-radius-4);
  --eyecatcher-border-radius: var(--border-radius-100);
  --input-border-radius: var(--border-radius-2);
  --input-count-border-radius: var(--border-radius-100);
  --input-chip-choice-border-radius: var(--border-radius-100);
  --input-radio-border-radius: var(--border-radius-100);
  --input-toggle-border-radius: var(--border-radius-100);
  --review-border-radius: var(--border-radius-2);
  --stroke-border-radius: var(--border-radius-1);
  --button-border-radius-large: var(--border-radius-3);
  --button-border-radius-medium: var(--border-radius-2);
  --button-border-radius-small: var(--border-radius-1);
  --button-border-radius-xlarge: var(--border-radius-4);
  --button-border-radius: var(--border-radius-2);
  --button-border-width: 0;
  --button-disabled-border: transparent;
  --button-disabled-text: var(--color-on-functional-neutral-lighter);
  --button-disabled: var(--color-functional-neutral-lighter);
  --button-focus: 0 0 0 1px var(--color-theme-background), 0 0 0 3px var(--color-functional-base), 0 0 12px 0 var(--color-theme-base);
  --button-font-weight: 700;
  --button-height-large: 3rem;
  --button-height-medium: 2.5rem;
  --button-height-small: 2rem;
  --button-height-xlarge: 4rem;
  --button-space-large: 0 var(--spacing-3);
  --button-space-medium: 0 var(--spacing-2);
  --button-space-small: 0 var(--spacing-2);
  --button-space-xlarge: 0 var(--spacing-3);
  --button-ghost-active-image: var(--color-darken-300);
  --button-ghost-border: transparent;
  --button-ghost-hover-image: var(--color-darken-150);
  --button-ghost-hover-text: var(--color-theme-base-variant);
  --button-ghost-hover: transparent;
  --button-ghost-text: var(--color-functional-base);
  --button-ghost: transparent;
  --button-important-active-image: var(--color-darken-300);
  --button-important-border: transparent;
  --button-important-hover-image: var(--color-darken-150);
  --button-important-hover-text: var(--color-on-functional-important);
  --button-important-hover: var(--color-functional-important);
  --button-important-text: var(--color-on-functional-important);
  --button-important: var(--color-functional-important);
  --button-positive-active-image: var(--color-darken-300);
  --button-positive-border: transparent;
  --button-positive-hover-image: var(--color-darken-150);
  --button-positive-hover-text: var(--color-on-functional-positive);
  --button-positive-hover: var(--color-functional-positive);
  --button-positive-text: var(--color-on-functional-positive);
  --button-positive: var(--color-functional-positive);
  --button-primary-active-image: var(--color-darken-300);
  --button-primary-border: transparent;
  --button-primary-hover-image: var(--color-darken-150);
  --button-primary-hover-text: var(--color-on-theme-contrast);
  --button-primary-hover: var(--color-theme-contrast);
  --button-primary-text: var(--color-on-theme-contrast);
  --button-primary: var(--color-theme-contrast);
  --button-promotion-active-image: var(--color-darken-300);
  --button-promotion-border: transparent;
  --button-promotion-hover-image: var(--color-darken-150);
  --button-promotion-hover-text: var(--color-on-theme-promotion);
  --button-promotion-hover: var(--color-theme-promotion);
  --button-promotion-text: var(--color-on-theme-promotion);
  --button-promotion: var(--color-theme-promotion);
  --button-secondary-active-image: var(--color-darken-300);
  --button-secondary-border: transparent;
  --button-secondary-hover-image: var(--color-darken-150);
  --button-secondary-hover-text: var(--color-on-theme-base-variant);
  --button-secondary-hover: var(--color-theme-base-variant);
  --button-secondary-text: var(--color-on-theme-base-variant);
  --button-secondary: var(--color-theme-base-variant);
  --button-tertiary-active-image: var(--color-darken-300);
  --button-tertiary-border: transparent;
  --button-tertiary-hover-image: var(--color-darken-150);
  --button-tertiary-hover-text: var(--color-on-theme-base);
  --button-tertiary-hover: var(--color-theme-base);
  --button-tertiary-text: var(--color-on-theme-base);
  --button-tertiary: var(--color-theme-base);
  --input-background-active: var(--color-functional-base);
  --input-background-default: var(--color-theme-background);
  --input-background-error: var(--color-functional-important);
  --input-background-hover: var(--color-functional-base-light);
  --input-background-passive: var(--color-functional-neutral-lighter);
  --input-background-success: var(--color-functional-positive);
  --input-border-color-active: var(--color-functional-base);
  --input-border-color-default: var(--color-functional-neutral);
  --input-border-color-error: var(--color-functional-important);
  --input-border-color-hover: var(--color-functional-base);
  --input-border-color-passive: var(--color-functional-neutral-lighter);
  --input-border-color-success: var(--color-functional-positive);
  --input-border-width: var(--border-width-thin);
  --input-focus: 0 0 0 1px var(--color-functional-base), 0 0 8px 0 var(--color-theme-base);
  --input-icon-color-error: var(--color-functional-important);
  --input-icon-color-passive: var(--color-functional-neutral);
  --input-icon-color-success: var(--color-functional-positive);
  --input-indicator-on-active: var(--color-on-functional-base);
  --input-label-color-active: var(--color-functional-base);
  --input-label-color-default: var(--color-texxt-base);
  --input-label-color-error: var(--color-functional-important);
  --input-label-color-hover: var(--color-functional-base);
  --input-label-color-passive: var(--color-functional-neutral);
  --input-label-color-success: var(--color-functional-positive);
  --input-placeholder-default: var(--color-functional-neutral);
  --input-slider-border-radius: var(--border-radius-2);
  --input-slider-height: var(--border-width-medium);
  --input-slider-progress-background-default: var(--input-background-active);
  --input-slider-progress-background-passive: var(--input-background-passive);
  --input-slider-thumb-background-default: var(--input-background-default);
  --input-slider-thumb-background-passive: var(--input-background-passive);
  --input-slider-thumb-border-color-active: var(--input-border-color-active);
  --input-slider-thumb-border-color-default: var(--input-border-color-default);
  --input-slider-thumb-border-color-passive: var(--input-border-color-passive);
  --input-slider-thumb-border-radius: var(--border-radius-100);
  --input-slider-thumb-border-width: var(--input-border-width);
  --input-slider-thumb-size: 1.5rem;
  --input-slider-track-background-default: var(--color-functional-neutral-lighter);
  --input-slider-track-background-passive: var(--color-functional-neutral-lighter);
  --input-text-color-active: var(--color-functional-base);
  --input-text-color-default: var(--color-text-base);
  --input-text-color-error: var(--color-functional-important);
  --input-text-color-hover: var(--color-functional-base);
  --input-text-color-passive: var(--color-functional-neutral);
  --input-text-color-success: var(--color-functional-positive);
  --badge-background-primary: var(--color-theme-contrast);
  --badge-background-secondary: var(--color-theme-base-variant);
  --badge-background-tertiary: var(--color-theme-base);
  --badge-text-color-primary: var(--color-on-theme-contrast);
  --badge-text-color-secondary: var(--color-on-theme-base-variant);
  --badge-text-color-tertiary: var(--color-on-theme-base);
  --progress-background-light: var(--color-theme-base-lighter);
  --progress-background-default: var(--color-theme-base);
  --review-circle-background: var(--color-theme-base);
  --review-circle-text-color: var(--color-theme-background);
  --review-circle-trip-advisor: hsl(166deg 100% 34%);
  --skeleton-background-color: var(--color-functional-neutral-lighter);
  --skeleton-border-color: var(--color-functional-neutral-light);
  --skeleton-text-color: var(--color-functional-neutral);
  --link-text-color-default: var(--color-functional-base);
  --link-text-color-visited: var(--color-functional-base);
  --link-text-color-disabled: var(--color-functional-neutral);
  --link-underline-color-default: var(--color-theme-base);
  --link-underline-color-hover: var(--color-theme-base-light);
  --link-underline-color-active: var(--color-theme-base-lighter);
  --day-background-color: transparent;
  --day-border-color: transparent;
  --day-border-width: var(--border-width-thin);
  --day-border-radius: var(--border-radius-100);
  --day-font-size: var(--font-size-medium);
  --accordion-border-radius: var(--border-radius-2);
  --accordion-box-shadow: var(--elevation-top);
  --accordion-focus: var(--elevation-focus);
  --accordion-background-default: var(--color-theme-surface);
  --accordion-background-warning: var(--color-functional-warning-light);
  --accordion-background-info: var(--color-theme-base-lighter);
  --accordion-background-success: var(--color-functional-positive-light);
  --accordion-space: var(--spacing-2);
  --accordion-text-color-warning: var(--color-on-functional-warning-light);
  --accordion-text-color-info: var(--color-on-theme-base-lighter);
  --accordion-text-color-success: var(--color-on-functional-positive-light);
  --accordion-text-color-default: var(--color-text-base);
  --list-space: var(--spacing-2);
  --list-background-hover: var(--color-achromatic-base-lighter);
  --list-background-default: var(--color-theme-surface);
  --list-background-passive: var(--color-theme-surface);
  --list-text-color-passive: var(--text-color-passive);
  --list-text-color-hover: var(--color-on-achromatic-base-lighter);
  --list-meta-color: var(--color-functional-neutral);
  --icon-size: calc(var(--font-size-medium) * var(--line-height-text-medium));
  --icon-size-small: calc(var(--font-size-small) * var(--line-height-text-small));
  --icon-size-medium: calc(var(--font-size-medium) * var(--line-height-text-medium));
  --icon-size-large: calc(var(--font-size-large) * var(--line-height-text-large));
  --icon-size-xlarge: calc(var(--font-size-xlarge) * var(--line-height-text-xlarge));
  --icon-size-xxlarge: calc(var(--font-size-xxlarge) * var(--line-height-text-xxlarge));
  --icon-size-xxxlarge: calc(var(--font-size-xxxlarge) * var(--line-height-text-xxxlarge));
  --icon-stroke-width: var(--border-width-medium);
}

@font-face {
  font-family: "TUITypeLight";
  src: url("https://static.tui.com/assets/v2/fonts/tuitypelight-bold.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "TUITypeLight";
  src: url("https://static.tui.com/assets/v2/fonts/tuitypelight-regular.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
/**
* DEPRECATED (will be removed in 3.0.0)
* Please use @import "@tui/ui-library/scss/lib/typography
*/
p,
span,
.text {
  color: var(--color-text-base);
  font-family: var(--font-family-base);
  font-weight: normal;
  line-height: var(--line-height-normal);
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
  color: var(--color-text-heading);
  font-family: var(--font-family-primary);
  font-weight: normal;
  line-height: var(--line-height-normal);
}

/* Font sizes */
h1,
.h1,
.text-xxxlarge {
  font-size: var(--font-size-xxxlarge);
  line-height: var(--line-height-text-xxxlarge);
  margin-bottom: calc(var(--line-height-text-xxxlarge) * var(--font-size-xxxlarge));
}

h2,
.h2,
.text-xxlarge {
  font-size: var(--font-size-xxlarge);
  line-height: var(--line-height-text-xxlarge);
  margin-bottom: calc(var(--line-height-text-xxlarge) * var(--font-size-xxlarge));
}

h3,
.h3,
.text-xlarge {
  font-size: var(--font-size-xlarge);
  line-height: var(--line-height-text-xlarge);
  margin-bottom: calc(var(--line-height-text-xlarge) * var(--font-size-xlarge));
}

h4,
.h4,
.text-large {
  font-size: var(--font-size-large);
  line-height: var(--line-height-text-large);
  margin-bottom: calc(var(--line-height-text-large) * var(--font-size-large));
}

h5,
.h5,
.text-medium {
  font-size: var(--font-size-medium);
  line-height: var(--line-height-text-medium);
  margin-bottom: calc(var(--line-height-text-medium) * var(--font-size-medium));
}

h6,
.h6,
small,
.text-small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-text-small);
  margin-bottom: calc(var(--line-height-text-small) * var(--font-size-small));
}

sup,
sub,
.text-xsmall {
  font-size: var(--font-size-xsmall);
  line-height: var(--line-height-text-xsmall);
  margin-bottom: calc(var(--line-height-text-xsmall) * var(--font-size-xsmall));
}

.text.xsmall {
  font-size: var(--font-size-xsmall);
  line-height: var(--line-height-text-xsmall);
  margin-bottom: calc(var(--line-height-text-xsmall) * var(--font-size-xsmall));
}
.text.small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-text-small);
  margin-bottom: calc(var(--line-height-text-small) * var(--font-size-small));
}
.text.medium {
  font-size: var(--font-size-medium);
  line-height: var(--line-height-text-medium);
  margin-bottom: calc(var(--line-height-text-medium) * var(--font-size-medium));
}
.text.large {
  font-size: var(--font-size-large);
  line-height: var(--line-height-text-large);
  margin-bottom: calc(var(--line-height-text-large) * var(--font-size-large));
}
.text.xlarge {
  font-size: var(--font-size-xlarge);
  line-height: var(--line-height-text-xlarge);
  margin-bottom: calc(var(--line-height-text-xlarge) * var(--font-size-xlarge));
}
.text.xxlarge {
  font-size: var(--font-size-xxlarge);
  line-height: var(--line-height-text-xxlarge);
  margin-bottom: calc(var(--line-height-text-xxlarge) * var(--font-size-xxlarge));
}
.text.xxxlarge {
  font-size: var(--font-size-xxxlarge);
  line-height: var(--line-height-text-xxxlarge);
  margin-bottom: calc(var(--line-height-text-xxxlarge) * var(--font-size-xxxlarge));
}
.text.heading {
  color: var(--color-text-heading);
  font-family: var(--font-family-primary);
  font-weight: normal;
  line-height: var(--line-height-normal);
}
.text.base {
  color: var(--color-text-base);
  font-family: var(--font-family-base);
  font-weight: normal;
  line-height: var(--line-height-normal);
}
.text.functional {
  color: var(--color-text-link);
  font-family: var(--font-family-base);
  font-weight: normal;
  line-height: var(--line-height-normal);
}

/* line heights */
.line-height-normal {
  line-height: var(--line-height-normal);
}

.line-height-spaced {
  line-height: var(--line-height-spaced);
}

.line-height-baseline {
  line-height: var(--line-height-baseline);
}

/* font weights */
.text-normal {
  font-family: var(--font-family-base);
  font-weight: 400;
}

b,
strong,
.text-bold {
  font-family: var(--font-family-base);
  font-weight: 700;
}

/* Text utilities */
.text-uppercase {
  text-transform: uppercase;
}

.text-nospace {
  margin-bottom: 0;
}

.text-wrap {
  white-space: normal;
}

.text-nowrap {
  white-space: nowrap;
}

.text-break {
  word-wrap: break-word;
  word-break: break-word;
}

.text-decoration-none {
  text-decoration: none;
}

.text-decoration-underline {
  text-decoration: underline;
}

.text-start {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-end {
  text-align: right;
}

@media (min-width: 580px) {
  .text-sm-start {
    text-align: left;
  }

  .text-sm-center {
    text-align: center;
  }

  .text-sm-end {
    text-align: right;
  }
}
@media (min-width: 760px) {
  .text-md-start {
    text-align: left;
  }

  .text-md-center {
    text-align: center;
  }

  .text-md-end {
    text-align: right;
  }
}
@media (min-width: 960px) {
  .text-lg-start {
    text-align: left;
  }

  .text-lg-center {
    text-align: center;
  }

  .text-lg-end {
    text-align: right;
  }
}
@media (min-width: 1921px) {
  .text-xl-start {
    text-align: left;
  }

  .text-xl-center {
    text-align: center;
  }

  .text-xl-end {
    text-align: right;
  }
}
/**
* DEPRECATED (will be removed in 3.0.0)
* Please use @import "@tui/ui-library/scss/lib/link
*/
a,
.link {
  color: var(--link-text-color-default);
  cursor: pointer;
  font-family: var(--font-family-base);
  outline: none;
  text-decoration: none;
  box-shadow: inset 0 0 0 0 var(--link-underline-color-default);
  transition: box-shadow var(--motion-duration-medium) var(--motion-timing-default);
}
a.inline,
.link.inline {
  box-shadow: inset 0 calc(-1 * var(--border-width-thin)) 0 0 var(--link-underline-color-default);
}
a:active, a.active, a:focus, a:hover,
.link:active,
.link.active,
.link:focus,
.link:hover {
  box-shadow: inset 0 -2em 0 0 var(--link-underline-color-active);
}
a:visited,
.link:visited {
  color: var(--link-text-color-visited);
  text-decoration: none;
}
a.disabled,
.link.disabled {
  color: var(--link-text-color-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
a.no-motion,
.link.no-motion {
  transition: none;
}
a.icon,
.link.icon {
  align-items: center;
  display: inline-flex;
}
a.icon [class*=icon-],
.link.icon [class*=icon-] {
  align-items: center;
  background: none;
  display: block;
  padding: var(--spacing-05);
  text-align: center;
}

:root {
  --base-font-size: 1.2rem;
  --base-font-family: TUITypeLight;
}

html, body {
  height: 100%;
}

.page {
  height: 100vh;
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

.wrapper {
  max-width: 60rem;
  margin: 0 auto;
}

header {
  flex: 0 1 auto;
  font-size: var(--base-font-size);
  background: var(--color-theme-base-variant);
}
header .wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
header a, header a:link, header a:visited {
  display: block;
  color: #eee;
  cursor: pointer;
  padding: 1rem;
  box-shadow: none;
}
header a:hover, header a:focus {
  text-decoration: underline;
  box-shadow: none;
}
header p {
  padding: 0 0 0 1rem;
  display: flex;
  align-items: center;
}
header p a {
  font-weight: bold;
}

main {
  flex: 1 1 auto;
  overflow-y: auto;
  font-family: var(--base-font-family);
  padding: 1rem;
}
main .wrapper {
  margin: 3rem auto;
}
main h1 {
  margin: 0 0 2.5rem;
  font-size: calc(var(--base-font-size) * 2.6);
}
main p {
  font-family: var(--base-font-family);
  font-size: var(--base-font-size);
  margin: 0 0 0.8rem;
  line-height: calc(var(--base-font-size) * 1.5);
}
main a:hover, main a:focus {
  text-decoration: underline;
  box-shadow: none;
  transition: none;
}

footer {
  flex: 0 1 auto;
  background: #D40E14;
}
footer p {
  font-weight: bold;
  color: #fff;
  padding: 0.5rem 1rem;
  text-align: center;
}

:root {
  --font-size-regular: 1.1rem;
}

.gallery-demo {
  min-height: 20rem;
  margin: 3rem auto;
  padding: 0 3rem;
}
.gallery-demo .placeholder {
  background: #eee;
  height: 100%;
  position: relative;
}
.gallery-demo .placeholder:before {
  animation: spin 1s infinite linear;
  border: solid 0.5vmin #ddd;
  border-radius: 50%;
  border-top-color: #ccc;
  box-sizing: border-box;
  content: "";
  height: 4vmin;
  width: 4vmin;
  left: calc(50% - 2vmin);
  position: absolute;
  top: calc(50% - 2vmin);
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.l10n-demo {
  margin: 2rem auto;
  padding: 1rem;
  background: #eee;
  border-radius: 5px;
}

iframe.storybook {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
}

/*# sourceMappingURL=main.css.map */