:host,
.maui-theme-os {
  color-scheme: light;

  /* Theme */
  --maui-theme: maui-os;

  /* Typography */

  --maui-font-family-headline: 'Portada', Arial, Helvetica, 'MAMMilesSymbol', sans-serif;
  --maui-font-family-copy: 'CoreSans', Arial, Helvetica, 'MAMMilesSymbol', sans-serif;

  --maui-font-size-0: 10px;
  --maui-font-size-1: 13px;
  --maui-font-size-2: 15px;
  --maui-font-size-3: 19px;
  --maui-font-size-4: 22px;
  --maui-font-size-5: 24px;
  --maui-font-size-6: 25px;
  --maui-font-size-7: 29px;
  --maui-font-size-8: 32px;
  --maui-font-size-9: 36px;
  --maui-font-size-10: 40px;
  --maui-font-size-11: 45px;

  --maui-line-height-0: 15px;
  --maui-line-height-1-condensed: 17px;
  --maui-line-height-1: 19px;
  --maui-line-height-2: 23px;
  --maui-line-height-3: 26px;
  --maui-line-height-4: 27px;
  --maui-line-height-5: 34px;
  --maui-line-height-6: 35px;
  --maui-line-height-7: 39px;
  --maui-line-height-8: 43px;
  --maui-line-height-9: 49px;

  --maui-letter-spacing-1: 0.05px;
  --maui-letter-spacing-2: 0.19px;
  --maui-letter-spacing-3: 0.24px;
  --maui-letter-spacing-4: 0.25px;
  --maui-letter-spacing-5: 0.29px;
  --maui-letter-spacing-6: 0.32px;
  --maui-letter-spacing-7: 0.36px;
  --maui-letter-spacing-8: 0.4px;
  --maui-letter-spacing-9: 0.45px;
  --maui-letter-spacing-10: 1.3px;

  --maui-font-weight-regular: 400;
  --maui-font-weight-bold: 500;

  /* Radii */

  --maui-radii-default-radius: 3px;
  --maui-radii-pill-radius: 99999px;

  /* Spacing */

  --maui-spacing-base: 12px;

  --maui-spacing-1: 3px;
  --maui-spacing-2: 6px;
  --maui-spacing-3: 12px;
  --maui-spacing-4: 24px;
  --maui-spacing-5: 36px;
  --maui-spacing-6: 48px;
  --maui-spacing-7: 60px;
  --maui-spacing-8: 72px;
  --maui-spacing-9: 84px;
  --maui-spacing-10: 96px;

  --maui-form-column-width: 300px;


  /* Layout, Grid, and Section  */

  --maui-grid-gutter-mobile: 16px;
  --maui-grid-gutter-phablet: 24px;
  --maui-grid-gutter-mini-tablet: 24px;
  --maui-grid-gutter-desktop: 24px;
  --maui-grid-gutter-desktop-large: 24px;

  --maui-grid-row-gap-mobile: 24px;
  --maui-grid-row-gap-phablet: 24px;
  --maui-grid-row-gap-mini-tablet: 24px;
  --maui-grid-row-gap-desktop: 24px;
  --maui-grid-row-gap-desktop-large: 24px;

  --maui-layout-margin-mobile: 16px;
  --maui-layout-margin-phablet: 24px;
  --maui-layout-margin-mini-tablet: 48px;
  --maui-layout-margin-desktop: 72px;
  --maui-layout-margin-desktop-large: 84px;

  --maui-section-gap-mobile: 48px;
  --maui-section-gap-phablet: 48px;
  --maui-section-gap-mini-tablet: 48px;
  --maui-section-gap-desktop: 48px;
  --maui-section-gap-desktop-large: 84px;

  --maui-section-padding-mobile: 24px;
  --maui-section-padding-phablet: 24px;
  --maui-section-padding-mini-tablet: 36px;
  --maui-section-padding-desktop: 36px;
  --maui-section-padding-desktop-large: 48px;




  /*
   * Palette Colors
   *
   * Color values are only allowed to appear once!
   */

  --maui-color-brand-white: #ffffff;
  --maui-color-brand-white-transparent-1: #ffffff16;
  /* 10% opacity */
  --maui-color-brand-white-transparent-2: #ffffff4d;
  /* 30% opacity */
  --maui-color-brand-white-transparent-3: #ffffff80;
  /* 50% opacity */
  --maui-color-brand-osgrey1: #f9f9fa;
  --maui-color-brand-osgrey2: #f1f3f5;
  --maui-color-brand-osgrey2-transparent: #f1f3f54d;
  /* 30% opacity */
  --maui-color-brand-osgrey3: #dee2e7;
  --maui-color-brand-osgrey4: #cad1d8;
  --maui-color-brand-osgrey4-transparent-1: #cad1d8bf;
  /* 75% opacity */
  --maui-color-brand-osgrey4-transparent-2: #c9d1d8cc;
  /* 80% opacity */
  --maui-color-brand-osgrey5: #abb4bd;
  --maui-color-brand-osgrey6: #8b96a2;
  --maui-color-brand-osgrey7: #4b5b6b;
  --maui-color-brand-osgrey7-transparent-1: #4b5b6b4d;
  /* 30% opacity */
  --maui-color-brand-osgrey7-transparent-2: #4b5b6b80;
  /* 50% opacity */
  --maui-color-brand-osgrey8: #394551;
  --maui-color-brand-osgrey8-transparent: #3945514d;
  /* 30% opacity */
  --maui-color-brand-osgrey8-transparent-2: #38455233;
  /* 20% opacity */
  --maui-color-brand-osgrey8-transparent-3: #39455166;
  /* 40% opacity */
  --maui-color-brand-osgrey9: #4b5b6bd9;
  --maui-color-brand-black: #000000;

  --maui-color-brand-os-red: #d81e05;
  --maui-color-brand-milano-red: #ac1804;
  --maui-color-brand-petrol-blue: #3b7089;
  --maui-color-brand-calypso-blue: #285971;
  /* Message specific colors */
  --maui-color-brand-fun-green: #007d35;
  --maui-color-brand-harp-green: #e5f2eb;
  --maui-color-brand-pale-yellow: #fff6c6;
  --maui-color-brand-merlot-red: #8c1e33;
  --maui-color-brand-cosmos-red: #ffe3e5;
  /* Status specific colors */
  --maui-color-brand-blue: #05164d;
  --maui-color-brand-light-blue: #505C82;
  --maui-color-brand-light-silver: #9E9E9E;
  --maui-color-brand-silver: #757575;
  --maui-color-brand-light-gold: #B09C6F;
  --maui-color-brand-gold: #8f7231;
  --maui-color-brand-light-black-2: #686868;
  --maui-color-brand-black-2: #191919;
  /* cabinclass specific colors */
  --maui-color-brand-milano-red: #ac1804;
  --maui-color-brand-dusk-blue: #264f87;
  --maui-color-brand-dark-green: #014f30;
  --maui-color-brand-apple-green: #408236;

  /*
   * Functional colors
   *
   * These should match between the tenants, only reassigning of existing variables.
   */

  /* Brand */
  --maui-color-brand-primary: var(--maui-color-brand-os-red);
  --maui-color-brand-secondary: var(--maui-color-brand-black);
  --maui-color-brand-light: var(--maui-color-brand-white);
  --maui-color-brand-dark: var(--maui-color-brand-black);

  /* Grey */
  --maui-color-grey-01: var(--maui-color-brand-osgrey1);
  --maui-color-grey-02: var(--maui-color-brand-osgrey2);
  --maui-color-grey-03: var(--maui-color-brand-osgrey3);
  --maui-color-grey-04: var(--maui-color-brand-osgrey4);
  --maui-color-grey-05: var(--maui-color-brand-osgrey5);
  --maui-color-grey-06: var(--maui-color-brand-osgrey6);
  --maui-color-grey-07: var(--maui-color-brand-osgrey7);
  --maui-color-grey-08: var(--maui-color-brand-osgrey8);

  /* Status */
  --maui-color-status-member: var(--maui-color-brand-blue);
  --maui-color-status-member-light: var(--maui-color-brand-light-blue);
  --maui-color-status-frequenttraveller: var(--maui-color-brand-silver);
  --maui-color-status-frequenttraveller-light: var(--maui-color-brand-light-silver);
  --maui-color-status-senator: var(--maui-color-brand-gold);
  --maui-color-status-senator-light: var(--maui-color-brand-light-gold);
  --maui-color-status-hon: var(--maui-color-brand-black-2);
  --maui-color-status-hon-light: var(--maui-color-brand-light-black-2);

  /* Class */
  --maui-color-cabinclass-first: var(--maui-color-brand-milano-red);
  --maui-color-cabinclass-business: var(--maui-color-brand-dusk-blue);
  --maui-color-cabinclass-premiumeconomy: var(--maui-color-brand-dark-green);
  --maui-color-cabinclass-economy: var(--maui-color-brand-apple-green);

  /* Disabled */
  --maui-color-disabled-background: var(--maui-color-grey-02);
  --maui-color-disabled-foreground: var(--maui-color-brand-osgrey4-transparent-2);
  --maui-color-disabled-background-inverted: var(--maui-color-brand-osgrey2-transparent);
  --maui-color-disabled-foreground-inverted: var(--maui-color-brand-white-transparent-3);
  --maui-color-disabled-button-icon: var(--maui-color-brand-osgrey4);

  /* Text */
  --maui-color-text-headline: var(--maui-color-brand-black);
  --maui-color-text-copy: var(--maui-color-brand-black);
  --maui-color-text-label: var(--maui-color-brand-osgrey7);
  --maui-color-text-caption: var(--maui-color-brand-osgrey7);
  --maui-color-text-headline-inverted: var(--maui-color-brand-white);
  --maui-color-text-copy-inverted: var(--maui-color-brand-white);
  --maui-color-text-label-inverted: var(--maui-color-brand-white);
  --maui-color-text-caption-inverted: var(--maui-color-brand-white);

  /* Interaction */
  --maui-color-interaction-interaction: var(--maui-color-brand-petrol-blue);
  --maui-color-interaction-interactionhover: var(--maui-color-brand-calypso-blue);
  --maui-color-interaction-buttonprimary: var(--maui-color-brand-os-red);
  --maui-color-interaction-buttonprimaryhover: var(--maui-color-brand-milano-red);
  --maui-color-interaction-buttonsecondary: var(--maui-color-brand-os-red);
  --maui-color-interaction-buttonsecondaryhover: var(--maui-color-brand-milano-red);
  --maui-color-interaction-selection: var(--maui-color-brand-os-red);
  --maui-color-interaction-focus: var(--maui-color-brand-black);
  --maui-color-interaction-interaction-inverted: var(--maui-color-grey-02);
  --maui-color-interaction-interaction-invertedhover: var(--maui-color-brand-white);
  --maui-color-interaction-selection-inverted: var(--maui-color-brand-light);
  --maui-color-interaction-focus-inverted: var(--maui-color-brand-light);


  /* Notification */
  --maui-color-message-info: var(--maui-color-brand-osgrey8);
  --maui-color-message-bg-info: var(--maui-color-brand-osgrey3);
  --maui-color-message-success: var(--maui-color-brand-fun-green);
  --maui-color-message-bg-success: var(--maui-color-brand-harp-green);
  --maui-color-message-warning: var(--maui-color-brand-osgrey8);
  --maui-color-message-bg-warning: var(--maui-color-brand-pale-yellow);
  --maui-color-message-error: var(--maui-color-brand-merlot-red);
  --maui-color-message-bg-error: var(--maui-color-brand-cosmos-red);

  /* Display */
  --maui-color-display-ontime: var(--maui-color-brand-fun-green);
  --maui-color-display-delayed: var(--maui-color-brand-merlot-red);

  /* Modal */
  --maui-color-modal-dim: var(--maui-color-brand-osgrey4-transparent-2);

  /* Elevation Box Shadow */
  --maui-effect-elevation-1: 0px 2px 4px var(--maui-color-brand-osgrey8-transparent-2);
  --maui-effect-elevation-2: 0px 4px 12px var(--maui-color-brand-osgrey8-transparent);
  --maui-effect-elevation-3: 0px 6px 24px var(--maui-color-brand-osgrey8-transparent-3);

  /* Focus */
  --maui-focus-outline-offset: 5px;
  --maui-focus-radius: 0;
  --maui-focus-outline-box-shadow: var(--maui-effect-shadow-focus-offset-x, 0) var(--maui-effect-shadow-focus-offset-y, 0) var(--maui-effect-shadow-focus-radius, 0) var(--maui-effect-shadow-focus-spread, 1px) var(--maui-color-interaction-focus);
  --maui-focus-outline-box-shadow-inverted: var(--maui-effect-shadow-focus-offset-x, 0) var(--maui-effect-shadow-focus-offset-y, 0) var(--maui-effect-shadow-focus-radius, 0) var(--maui-effect-shadow-focus-spread, 1px) var(--maui-color-interaction-focus-inverted);
}

/*****************************************************************************
 * Utilities
 *****************************************************************************/

.maui-scroll-lock {
  padding-right: var(--maui-scroll-lock-size) !important;
  overflow: hidden !important;
}

/*****************************************************************************
 * Font face definitions
 *****************************************************************************/

@font-face {
  font-family: 'IconFontAustrian';
  src: url('../fonts/austrian/os-iconfont.woff') format('woff');
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: 'Portada';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/austrian/Portada-Regular.eot');
  src: url('../fonts/austrian/Portada-Regular.otf') format('opentype'),
    url('../fonts/austrian/Portada-Regular.woff2') format('woff2'),
    url('../fonts/austrian/Portada-Regular.woff') format('woff'),
    url('../fonts/austrian/Portada-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Portada';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/austrian/Portada-SemiBold.eot');
  src: url('../fonts/austrian/Portada-SemiBold.otf') format('opentype'),
    url('../fonts/austrian/Portada-SemiBold.woff2') format('woff2'),
    url('../fonts/austrian/Portada-SemiBold.woff') format('woff'),
    url('../fonts/austrian/Portada-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'CoreSans';
  src: url('../fonts/austrian/CoreSansRegular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'CoreSans';
  src: url('../fonts/austrian/CoreSansMedium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: 'CoreSans';
  src: url('../fonts/austrian/CoreSansMedium.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
}


@font-face {
  font-family: 'MAMMilesSymbol';
  src: url('../fonts/mmg/LufthansaMAMTextWeb-Regular.woff') format("woff");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'MAMMilesSymbol';
  src: url('../fonts/mmg/LufthansaMAMTextWeb-Bold.woff') format("woff");
  font-style: normal;
  font-weight: 700;
}