/*
    Theme for for airline-direct. Don't change this file. It's maintained by the flights Frontend team.
*/

@font-face {
    font-family: Hind;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./../../fonts/hind-v16-latin-regular.woff2) format("woff2");
}

@font-face {
    font-family: Hind;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(./../../fonts/hind-v16-latin-500.woff2) format("woff2");
}

@font-face {
    font-family: Hind;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(./../../fonts/hind-v16-latin-600.woff2) format("woff2");
}

:root {
    --color-primary: #202b3f;
    --color-primary-semi-light: #2f4e69;
    --color-primary-light: #466e91;
    --color-primary-lighter: #5889b5;
    --color-primary-lightest: #83b3de;
    --color-primary-dark: #18202f;

    --color-secondary: #f8be10;
    --color-secondary-lighter: #ffe19a;
    --color-secondary-light: #ffd775;
    --color-secondary-dark: #ebb10d;
    --color-secondary-darker: #e0a700;

    --color-tertiary: #029b92;
    --color-tertiary-light: #ccebe9;
    --color-tertiary-lighter: #e5f5f4;
    --color-tertiary-dark: #006760;

    --color-negative: #ec5555;
    --color-negative-light: #fce6e6;
    --color-negative-lighter: #fef6f6;
    --color-negative-dark: #c53939;

    --color-positive: #71b800;
    --color-positive-light: #e8f2d9;
    --color-positive-lighter: #f7faf2;
    --color-positive-dark: #579a00;
    --color-positive-darker: #488306;

    --color-greyscale-50: #ffffff;
    --color-greyscale-50-rgb: 255, 255, 255;
    --color-greyscale-100: #f5f5f5;
    --color-greyscale-200: #eeeeee;
    --color-greyscale-300: #dddddd;
    --color-greyscale-400: #c5c5c5;
    --color-greyscale-500: #bababa;
    --color-greyscale-600: #999999;
    --color-greyscale-700: #666666;
    --color-greyscale-800: #333333;
    --color-greyscale-900: #000000;

    --color-separator: var(--color-greyscale-300);
    --color-error: var(--color-negative);
    --color-success: var(--color-positive);
    --color-text: var(--color-greyscale-800);
    --color-hint: var(--color-greyscale-700);
    --color-link: var(--color-primary);

    --font-family-1: Hind, Arial, Helvetica, sans-serif;
    --font-family-1-bold: 600;
    --font-family-1-semi-bold: 500;

    --font-family-2: var(--font-family-1);
    --font-family-2-bold: var(--font-family-1-bold);

    --font-size-base: 16px;
    --font-size-hint: 0.875rem;
    --font-size-title: 1.25rem;

    --line-height-base: 1.4375rem;
    --line-height-hint: 1.25rem;
    --line-height-title: 1.8125rem;

    --gap-size: 0.625rem; /* 10px */
    --content-gap-size: 3vw;
    --vertical-gap-size: 10px;
    --headline-content-gap-size: 15px;
    --headline-content-small-gap-size: 5px;

    --fd-app-header-z-index: 100;
    --fd-app-header-logo-height: 26px;
    --fd-app-header-height: 50px;

    --fd-backdrop-z-index: 110;
    --fd-layer-z-index: 120;
    --fd-drawer-z-index: 120;
    --fd-dialog-z-index: 130;

    --global-scroll-bar-gap: 0px;
}

/* --small-max-viewport */
@media (min-width: 414px) and (max-width: 767px) {
    :root {
        --content-gap-size: 4vw;
    }
}

/* --medium-viewport */
@media (min-width: 768px) and (max-width: 1219px) {
    :root {
        --headline-content-gap-size: 20px;
        --content-wrapper-max-width: 830px;
    }
}

/* --large-viewport */
@media (min-width: 1220px) {
    :root {
        --content-wrapper-max-width: 1200px;
        --main-section-width: 830px;
        --main-aside-width: 330px;
        --headline-content-gap-size: 30px;
    }
}

/* --medium-viewport and --large-viewport combined */
@media (min-width: 768px) {
    :root {
        --content-gap-size: 30px;
        --vertical-gap-size: 20px;
    }
}

html {
    font-size: var(--font-size-base);
    font-family: var(--font-family-1);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    background: var(--color-greyscale-200);
    /* Fixes the auto font-size adjustments on ios devices */
    --webkit-text-size-adjust: 100%;
}

header,
nav,
main,
footer {
    display: flex;
    justify-content: center;
    padding: 0 3vw;
}

header > .content-wrapper,
nav > .content-wrapper,
main > .content-wrapper,
footer > .content-wrapper {
    width: 100%;
}

main {
    padding-top: 3vw;
    padding-bottom: 30px;
}

main > .content-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

main > .content-wrapper[sidebar-align="left"] {
    flex-direction: row-reverse;
}

main > .content-wrapper > section:last-child {
    margin: 0 auto;
}

main > .content-wrapper > section {
    width: 100%;
}

main aside {
    display: none;
}

@media (min-width: 414px) and (max-width: 767px) {
    header,
    nav,
    main,
    footer {
        padding: 0 4vw;
    }

    main {
        padding-top: 4vw;
        padding-bottom: 30px;
    }
}

@media (min-width: 768px) and (max-width: 1219px) {
    header,
    nav,
    main,
    footer {
        padding: 0 4vw;
    }

    header > .content-wrapper,
    nav > .content-wrapper,
    main > .content-wrapper,
    footer > .content-wrapper {
        max-width: var(--content-wrapper-max-width);
    }

    main {
        padding-top: 20px;
        padding-bottom: 60px;
    }
}

@media (min-width: 1220px) {
    header,
    nav,
    main,
    footer {
        padding: 0;
    }

    header > .content-wrapper,
    nav > .content-wrapper,
    main > .content-wrapper,
    footer > .content-wrapper {
        max-width: var(--content-wrapper-max-width);
    }

    main {
        padding-top: 20px;
        padding-bottom: 60px;
    }
    main > .content-wrapper > section {
        width: var(--main-section-width);
    }

    main > .content-wrapper > aside {
        display: block;
        width: var(--main-aside-width);
    }
}

.single-frame {
    box-sizing: border-box;
    padding: 20px var(--content-gap-size);
}

.single-frame > .title {
    font-size: var(--font-size-title);
    font-weight: var(--font-family-1-bold);
    line-height: var(--line-height-title);
    margin-bottom: 20px;
}

.single-frame > .info-hint {
    margin-bottom: 30px;
}

.bundled-frame {
    display: flex;
    flex-wrap: wrap;
}

.bundled-frame .frame-item {
    padding: 20px var(--content-gap-size) 30px;
    flex-basis: 100%;
}

.bundled-frame .frame-item > h1,
.bundled-frame .frame-item > h2,
.bundled-frame .frame-item > h3,
.bundled-frame .frame-item > .title {
    margin: 0;
    padding: 0;
    display: block;
    font-weight: var(--font-family-1-bold);
    font-family: var(--font-family-1);
}

.bundled-frame .frame-item > .title,
.bundled-frame .frame-item > h2 {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin-bottom: 20px;
}

.bundled-frame .frame-item > .title + h3,
.bundled-frame .frame-item > h2 + h3 {
    margin-top: 0;
}

.bundled-frame .frame-item > h3 {
    margin: 30px 0 20px 0;
    font-size: var(--font-size-hint);
    line-height: var(--line-height-hint);
}

.bundled-frame .frame-item > h3 .hint {
    display: block;
    padding-top: 5px;
    font-weight: 400;
    color: var(--color-hint);
}

.bundled-frame .frame-item:not(.first-item) {
    margin-top: 2px;
}

.bundled-frame .frame-item.first-item {
    padding-bottom: 15px;
}

.bundled-frame .frame-item.first-item > .title,
.bundled-frame .frame-item.first-item > h1 {
    font-size: var(--font-size-title);
    line-height: var(--line-height-title);
    margin: 0;
}

.bundled-frame .frame-item.first-item > .title .hint,
.bundled-frame .frame-item.first-item > h1 .hint {
    display: block;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-weight: 400;
}

.bundled-frame .frame-item.last-item {
    padding-bottom: 20px;
}

.bundled-frame .frame-item > .info-hint {
    margin-bottom: 30px;
}

@media (min-width: 1220px) {
    .sidebar.single-frame {
        padding: 20px;
    }
    .sidebar.bundled-frame .frame-item {
        padding: 20px 20px 30px;
    }

    .sidebar.bundled-frame .frame-item.first-item {
        padding-top: 20px;
        padding-bottom: 15px;
    }

    .sidebar.bundled-frame .frame-item.last-item {
        padding-bottom: 20px;
    }
}

@media (min-width: 768px) and (max-width: 1219px), (min-width: 1220px) {
    .single-frame {
        padding: var(--content-gap-size);
    }
    .bundled-frame .frame-item {
        padding: 20px var(--content-gap-size) 30px;
    }

    .bundled-frame .frame-item.first-item {
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .bundled-frame .frame-item.last-item {
        padding-bottom: 30px;
    }

    .bundled-frame .frame-item.dynamic-item {
        flex: 1;
    }

    .bundled-frame .frame-item.dynamic-item:not(.first-dynamic-item) {
        margin-left: 2px;
    }

    .bundled-frame
        .frame-item.dynamic-item:not(.first-dynamic-item):not(
            .last-dynamic-item
        ) {
        padding-left: 20px;
        padding-right: 20px;
    }

    .bundled-frame .frame-item.dynamic-item.first-dynamic-item {
        padding-right: 20px;
    }

    .bundled-frame .frame-item.dynamic-item.last-dynamic-item {
        padding-left: 20px;
    }
}

.single-frame,
.bundled-frame {
    margin-bottom: var(--vertical-gap-size);
}

.single-frame:last-child,
.bundled-frame:last-child {
    margin-bottom: 0;
}

.single-frame {
    background-color: var(--color-greyscale-50);
}

.bundled-frame .frame-item {
    background-color: var(--color-greyscale-50);
}

.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    pointer-events: none;
    transition: all 300ms ease 0s;
    opacity: 0;
}

.scroll-to-top.visible {
    opacity: 1;
    pointer-events: initial;
}

.scroll-to-top button {
    position: relative;
    display: flex;
    align-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    border: none;
    outline: none;
}

.scroll-to-top button svg {
    width: 20px;
    fill: var(--color-greyscale-50);
    margin: 0 auto;
    pointer-events: inherit;
}

header {
    position: static;
    background-color: var(--color-primary);
    width: 100%;
    min-height: 60px;
    box-sizing: border-box;
    z-index: 1;
}

header .menu {
    margin: 0;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
    list-style-type: none;
}

header .menu a {
    display: block;
    padding: 10px;
    color: var(--color-text);
    -webkit-text-decoration: none;
    text-decoration: none;
    outline: none;
    cursor: pointer;
}

header .menu a:hover,
header .menu a[active] {
    background-color: var(--color-secondary-light);
}

header .menu a > * {
    pointer-events: none;
}

.app-header {
    display: flex;
    width: 100%;
    min-height: 60px;
    padding: 10px 0;

    box-sizing: border-box;
    background: var(--color-primary);
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
}

.app-header .app-menu {
    display: flex;
    flex: 0 1 auto;
}

.app-header .app-menu .button {
    background-color: var(--color-primary-light);
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.35);
}

.app-header .app-menu .button:hover {
    background-color: var(--color-primary-semi-light);
}

.app-header .app-menu .button .icon-menu {
    fill: var(--color-greyscale-50);
}

.app-header > * {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 85%;
    margin-right: calc(2 * var(--gap-size));
}

.app-header > *:first-child {
    justify-content: flex-start;
    flex: 0 1 auto;
    margin: 0;
}

.app-header > *:last-child {
    margin: 0;
}

.app-header > a {
    outline: none;
}

.app-header .logo {
    width: 100px;
}

.app-header .service-number {
    display: none;
    color: var(--color-greyscale-50);
    text-align: right;
}

.app-header .service-number .icon-phone {
    width: 13px;
    fill: var(--color-greyscale-50);
}

.app-header .service-number em {
    padding: 0 5px;
    font-weight: var(--font-family-1-bold);
    font-style: normal;
}

.app-header .service-number span {
    font-size: var(--font-size-hint);
    color: var(--color-greyscale-50);
    -webkit-text-decoration: underline;
    text-decoration: underline;
    vertical-align: middle;
}

@media (min-width: 768px) and (max-width: 1219px) {
    .app-header {
        height: 64px;
    }

    .app-header .logo {
        width: 128px;
    }
}

@media (min-width: 768px) and (max-width: 1219px), (min-width: 1220px) {
    .app-header .service-number {
        display: block;
    }
}

@media (min-width: 1220px) {
    .app-header {
        height: 110px;
        padding: 25px 0;
    }

    .app-header .service-number {
        color: var(--color-greyscale-50);
    }

    .app-header .service-number .icon-phone {
        fill: var(--color-greyscale-50);
    }

    .app-header .logo {
        width: 167px;
    }

    .app-header .app-menu {
        display: none;
    }
    header .menu {
        display: none;
    }
}

#layer {
    position: fixed;
    box-sizing: border-box;
    padding: 0;
    width: 200px;
    border-radius: 6px;
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.35);
    background-color: var(--color-greyscale-50);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.4s, opacity 0.4s;
    z-index: 100;
    z-index: var(--fd-layer-z-index, 100);
}

#layer[open] {
    visibility: visible;
    opacity: 1;
}

.sidebar-menu {
    display: block;
    box-sizing: border-box;
    background: var(--color-greyscale-50);
    position: sticky;
    top: 20px;
}
.sidebar-menu .title {
    font-weight: var(--font-family-1-bold);
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10px;
}
.sidebar-menu .menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.sidebar-menu .menu a {
    display: flex;
    padding: 10px;
    align-items: center;
    color: var(--color-text);
    -webkit-text-decoration: none;
    text-decoration: none;
    outline: none;
    cursor: pointer;
}
.sidebar-menu .menu a[active] {
    background-color: var(--color-secondary-light);
    color: var(--color-greyscale-800);
}
.sidebar-menu .menu a:hover {
    background-color: var(--color-secondary-light);
}
.sidebar-menu .menu a > * {
    pointer-events: none;
}

#app-footer {
    border-top: 1px dashed var(--color-separator);
    background-color: var(--color-greyscale-100);
    padding-top: calc(2 * var(--gap-size));
    z-index: 1;
}

.page-footer {
    --fd-page-footer--gap-size: var(--gap-size);
    --fd-page-footer--section-border: 1px dashed var(--color-separator);
    --fd-page-footer--section-gap: calc(2 * var(--gap-size));
    --fd-page-footer--line-height: var(--line-height-hint);

    display: block;
}

.page-footer .trust-section {
    border-top: var(--fd-page-footer--section-border);
    padding: var(--fd-page-footer--section-gap) 0;
}

.page-footer .social-section {
    border-top: var(--fd-page-footer--section-border);
    padding: var(--fd-page-footer--section-gap) 0;
}

.page-footer .col-items {
    border-top: var(--fd-page-footer--section-border);
    padding: var(--fd-page-footer--section-gap) 0 0;
}

.page-footer .col-payment-methods > .trust-section {
    border: none;
    display: none;
}

@media (min-width: 768px) and (max-width: 1219px) {
    .page-footer .trust-section {
        display: block;
        flex: 1 1 33.3%;
    }

    .page-footer .col-trust-section {
        display: flex;
    }

    .page-footer .col-trust-section .safe-payment {
        display: none;
    }

    .page-footer .social-section {
        flex: 1 1 66.6%;
    }

    .page-footer .payment-methods {
        flex: 1 1 66.6%;
        position: relative;
        padding: 0 0 calc(2 * var(--gap-size));
    }

    .page-footer .col-payment-methods {
        display: flex;
    }

    .page-footer .col-payment-methods > .trust-section {
        display: block;
        padding: 0;
    }

    .page-footer .col-payment-methods .safe-payment {
        padding: 0;
    }

    .page-footer .col-payment-methods .drv {
        display: none;
    }
}

@media (min-width: 1220px) {
    .page-footer {
        display: flex;
        flex-wrap: wrap;
    }

    .page-footer .payment-methods,
    .page-footer .col-items,
    .page-footer .trust-section,
    .page-footer .social-section {
        border-top: none;
    }

    .page-footer .col-payment-methods {
        flex: 1;
        order: 1;
        padding-bottom: var(--fd-page-footer--section-gap);
    }

    .page-footer .col-items {
        flex: 3;
        order: 2;
        padding: 0;
        padding-bottom: var(--fd-page-footer--section-gap);
    }

    .page-footer .col-trust-section {
        display: flex;
        flex: 100%;
        order: 3;
        border-top: var(--fd-page-footer--section-border);
        padding-top: var(--fd-page-footer--section-gap);
    }

    .page-footer .col-trust-section > .trust-section {
        display: flex;
    }

    .page-footer .trust-section,
    .page-footer .social-section {
        flex: 1;
        padding-top: 0;
    }

    .page-footer .payment-methods {
        padding-right: calc(2 * var(--gap-size));
    }
}

.payment-methods {
    display: block;
    font-size: var(--font-size-hint);
    padding: 0 0 calc(2 * var(--gap-size));
}

.payment-methods .title {
    margin: 0 0 var(--gap-size);
    font-weight: bold;
    color: var(--color-greyscale-800);
    line-height: var(--line-height-hint);
}

.payment-methods .hint,
.payment-methods .subtitle {
    margin: 0;
    font-size: var(--font-size-hint);
    color: var(--color-hint);
    line-height: var(--line-height-hint);
}

.payment-methods .subtitle {
    margin: var(--gap-size) 0;
}

.payment-method-wrap {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
}

.payment-method-wrap svg {
    display: block;
    padding: 10px;
    margin: 0 5px 0 0;
}

.payment-method-wrap ~ .hint {
    margin-top: 5px;
}

@media (min-width: 768px) and (max-width: 1219px), (min-width: 1220px) {
    .payment-methods {
        padding: 0;
    }
}

@media (min-width: 768px) and (max-width: 1219px) {
    .payment-methods .hint {
        margin-right: -33%;
    }
}

.footer-items {
    font-family: var(--fd-page-footer--font-family);
    font-size: var(--font-size-hint);
    line-height: var(--fd-page-footer--line-height);

    border-top: var(--fd-page-footer--separator-width) solid
        var(--fd-page-footer--seperator-color);
    padding: 0;

    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
}

.footer-items b {
    display: block;
    padding-top: 0;
    padding-bottom: 0.2em;
}

.footer-items ul {
    flex: 1;
    padding: 0;
    margin: 0;
    min-width: 145px;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
    list-style: none;
    color: var(--fd-page-footer--title-color);
}

@media (min-width: 1220px) {
    .footer-items ul:not(:last-of-type) {
        padding-right: 1.25em;
    }
}

.footer-items li {
    display: block;
    box-sizing: border-box;
    padding: 0 0 0.2em 0;
    line-height: var(--fd-page-footer--line-height);
}

.footer-items li.listitem {
    margin-bottom: 0.417em;
    padding-top: 0.2em;
}

.trust-section {
    display: flex;
    justify-content: space-between;
}

.trust-section label {
    display: block;
    color: var(--color-greyscale-800);
    font-weight: var(--font-family-1-bold);
    font-size: var(--font-size-hint);
    margin-bottom: 0.8em;
    line-height: var(--line-height-hint);
}

.trust-section section {
    flex: 1;
}

#pci-seal {
    width: 45px;
}

#drv-logo {
    width: 61px;
    height: auto;
}

.social-section {
    display: flex;
    justify-content: space-between;
}

.social-section > * {
    flex: 1;
}

.social-media-icons {
    font-size: var(--font-size-hint);
    font-family: var(--font-family-1);
}

.social-media-icons label {
    color: var(--color-greyscale-800);
    display: block;
    margin-bottom: 0.8em;
    font-weight: var(--font-family-1-bold);
    line-height: var(--line-height-hint);
}

.social-media-icons a {
    -webkit-text-decoration: none;
    text-decoration: none;
}

.social-media-icons a:not(:first-child) {
    margin-left: 0.8em;
}

.social-media-icons .icon-social-media {
    height: 20px;
}

.tv-icons {
    --fd-tv-icons-icon-size: 17px;

    font-size: var(--font-size-hint);
    font-family: var(--font-family-1);
}

.tv-icons label {
    color: var(--color-greyscale-800);
    display: block;
    margin-bottom: 0.5em;
    font-weight: var(--font-family-1-bold);
    line-height: var(--line-height-hint);
}

.tv-icons .icons {
    display: flex;
    align-items: center;
}

.tv-icons .icon-tv {
    width: var(--fd-tv-icons-icon-size);
    height: var(--fd-tv-icons-icon-size);
}

.tv-icons .icon-sat1 {
    width: calc(var(--fd-tv-icons-icon-size) * 1.1);
    height: calc(var(--fd-tv-icons-icon-size) * 1.1);
}

.tv-icons .icon-kabel-eins {
    width: calc(var(--fd-tv-icons-icon-size) * 1.5);
    height: calc(var(--fd-tv-icons-icon-size) * 1.5);
}

.tv-icons .icon-tv:not(:first-child) {
    margin-left: 0.8em;
}

@media (min-width: 768px) and (max-width: 1219px), (min-width: 1220px) {
    .social-media-icons .icon-social-media {
        height: 25px;
    }

    .tv-icons {
        --fd-tv-icons-icon-size: 21px;
    }
}

.link-style,
a:not(.no-link-style) {
    display: inline;
    position: relative;
    color: var(--color-primary);
    -webkit-text-decoration: none;
    text-decoration: none;
    line-height: var(--line-height-hint);
    cursor: pointer;
}
.link-style:not(.no-link-underline),
a:not(.no-link-style):not(.no-link-underline) {
    transition: background-size 200ms;
    background-image: linear-gradient(
            var(--color-primary),
            var(--color-primary)
        ),
        linear-gradient(var(--color-primary), var(--color-primary));
    background-repeat: no-repeat;
    background-size: 100% 1px, 0 2px;
    background-position: center calc(1.25em + 1px), center 1.25em;
}
.link-style:not(.no-link-underline):hover,
a:not(.no-link-style):not(.no-link-underline):hover,
.link-style:not(.no-link-underline):focus,
a:not(.no-link-style):not(.no-link-underline):focus {
    background-size: 100% 1px, 100% 2px;
    outline: none;
}
.link-style:not(.no-link-underline):active,
a:not(.no-link-style):not(.no-link-underline):active {
    background-position: center calc(1.25em + 1px), center calc(1.25em + 1px);
}

.tippy-box {
    font-size: var(--font-size-hint);
    font-family: var(--font-family-1);
    line-height: var(--line-height-hint);
    border-radius: 4px;
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.tippy-box[data-theme~="error"] {
    background-color: var(--color-error);
    color: var(--color-greyscale-50);
    pointer-events: all;
}

.tippy-box[data-theme~="error"][data-placement^="top"] > .tippy-arrow::before {
    border-top-color: var(--color-error);
}

.tippy-box[data-theme~="error"][data-placement^="bottom"]
    > .tippy-arrow::before {
    border-bottom-color: var(--color-error);
}

.tippy-box[data-theme~="error"][data-placement^="left"] > .tippy-arrow::before {
    border-left-color: var(--color-error);
}

.tippy-box[data-theme~="error"][data-placement^="right"]
    > .tippy-arrow::before {
    border-right-color: var(--color-error);
}

.tippy-box[data-theme~="notification"],
.tippy-box[data-theme~="warning"],
.tippy-box[data-theme~="tooltip"] {
    min-width: 280px;
    max-width: 280px;
    color: var(--color-greyscale-50);
}

.tippy-box[data-theme~="notification"] > .tippy-content,
.tippy-box[data-theme~="warning"] > .tippy-content {
    padding-right: 35px;
}

.tippy-box[data-theme~="notification"] [class^="icon-"],
.tippy-box[data-theme~="warning"] [class^="icon-"],
.tippy-box[data-theme~="tooltip"] [class^="icon-"] {
    height: var(--font-size-hint);
    fill: var(--color-greyscale-50);
}

.tippy-box[data-theme~="notification"] hr,
.tippy-box[data-theme~="warning"] hr,
.tippy-box[data-theme~="tooltip"] hr {
    border-top: 1px solid var(--color-greyscale-300);
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.tippy-box[data-theme~="notification"] .icon-cross,
.tippy-box[data-theme~="warning"] .icon-cross {
    position: absolute;
    top: var(--font-size-hint);
    right: 10px;
    cursor: pointer;
    pointer-events: all;
}

.tippy-box[data-theme~="tooltip"] {
    background-color: var(--color-greyscale-50);
    color: var(--color-hint);
}

.tippy-box[data-theme~="notification"] {
    background-color: var(--color-tertiary);
}

.tippy-box[data-theme~="warning"] {
    background-color: var(--color-error);
}

.tippy-content {
    padding: 10px;
}

.tippy-content a {
    display: inline;
    position: relative;
    color: var(--color-primary);
    -webkit-text-decoration: none;
    text-decoration: none;
    line-height: var(--line-height-hint);
    cursor: pointer;
    transition: background-size 200ms;
    background-image: linear-gradient(
            var(--color-primary),
            var(--color-primary)
        ),
        linear-gradient(var(--color-primary), var(--color-primary));
    background-repeat: no-repeat;
    background-size: 100% 1px, 0 2px;
    background-position: center calc(1.25em + 1px), center 1.25em;
}

.tippy-content a:hover,
.tippy-content a:focus {
    background-size: 100% 1px, 100% 2px;
    outline: none;
}

.tippy-content a:active {
    background-position: center calc(1.25em + 1px), center calc(1.25em + 1px);
}

.tippy-content .spaced-typesetting span {
    font-size: var(--font-size-hint);
}

.tippy-content .spaced-typesetting > span ~ span {
    display: block;
    margin-top: 10px;
}

@media (max-width: 767px) {
    .tippy-box[data-theme~="notification"],
    .tippy-box[data-theme~="warning"],
    .tippy-box[data-theme~="tooltip"] {
        width: 100%;
    }

    [data-tippy-root][fullscreen] {
        max-width: 100vw;
        width: 100%;
        padding: 0 var(--content-gap-size);
        box-sizing: border-box;
    }
}

.button {
    display: inline-block;
    padding: 15px 20px 12px;
    line-height: 1;
    font-size: 18px;
    background-color: var(--color-secondary);
    color: var(--color-greyscale-50);
    font-family: var(--font-family-1);
    font-weight: var(--font-family-1-bold);
    border: none;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.25s;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.35);
    -webkit-text-decoration: none;
    text-decoration: none;
    -webkit-appearance: none;
}

.button span,
.button svg {
    pointer-events: none;
}

.button:active {
    box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.35);
}

.button.inverted {
    background-color: var(--color-greyscale-50);
    color: var(--color-secondary);
}

.button.primary {
    background-color: var(--color-primary);
}

.button.primary.inverted {
    background-color: var(--color-greyscale-50);
    color: var(--color-primary);
}

.button.secondary {
    box-sizing: border-box;
    background-color: transparent;
    border: 2px solid var(--color-primary);
    padding: 13px 18px 10px;
    color: var(--color-primary);
}

.button.secondary:active {
    padding: 15px 20px 12px;
    border: none;
}

.button.secondary.small {
    padding: 9px 8px 7px;
}

.button.secondary.small:before {
    height: calc(100% + 4px + (2 * var(--fd-button-hit-area)));
    top: calc((var(--fd-button-hit-area) * -1) - 2px);
}

.button.secondary.small:active {
    padding: 10px 10px 9px;
}

.button.secondary[disabled] {
    border: none;
    padding: 0.833em 1.111em 0.667em;
}

.button.tertiary {
    box-sizing: border-box;
    background-color: transparent;
    border: 2px solid var(--color-secondary);
    padding: 13px 18px 10px;
    color: var(--color-secondary);
}

.button.tertiary:active {
    padding: 15px 20px 12px;
    border: none;
}

.button.tertiary.small {
    padding: 9px 8px 7px;
}

.button.tertiary.small:before {
    height: calc(100% + 4px + (2 * var(--fd-button-hit-area)));
    top: calc((var(--fd-button-hit-area) * -1) - 2px);
}

.button.tertiary.small:active {
    padding: 10px 10px 9px;
}

.button.tertiary[disabled] {
    border: none;
    padding: 0.833em 1.111em 0.667em;
}

.button.negative {
    background-color: var(--color-negative);
}

.button.ghost {
    background-color: rgba(var(--color-greyscale-50-rgb), 0);
    color: var(--color-greyscale-50);
    border: 2px solid var(--color-greyscale-50);
    white-space: nowrap;
    padding: 13px 18px 10px;
    box-shadow: none;
}

.button.ghost svg {
    fill: var(--color-greyscale-50);
    width: 12px;
    height: 12px;
}

.button.ghost:active {
    border: none;
    padding: 15px 20px 12px;
    box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.35);
}

.button[disabled] {
    background: var(--color-greyscale-300);
    color: var(--color-greyscale-400);
    cursor: default;
}

.button.small {
    font-size: var(--font-size-hint);
    padding: 11px 10px 9px;
    min-width: 44px;
    min-height: 34px;
}

.button.action {
    background: var(--color-primary-lightest);
    color: var(--color-primary-dark);
    box-shadow: none;
    min-width: 36px;
    height: 36px;
    white-space: nowrap;
    font-weight: normal;
    font-size: var(--font-size-hint);
    padding: 10px 10px 8px;
    line-height: 16px;
    vertical-align: center;
}

.button.action:active {
    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.35);
}

.button.action:active svg {
    fill: var(--color-greyscale-50);
}

.button.action svg {
    fill: var(--color-primary-dark);
    width: 13px;
    height: 13px;
    margin-top: -1px;
    vertical-align: middle;
}

.button.action span {
    display: inline-block;
    height: 16px;
    line-height: 16px;
}

.button.action span + svg {
    margin-left: 5px;
}

.button.action svg + span {
    margin-left: 5px;
}

.button.action.negative {
    background: var(--color-negative-light);
    color: var(--color-negative-dark);
}

.button.action.negative svg {
    fill: var(--color-negative-dark);
}

.button.small,
.button.action {
    position: relative;
    margin: var(--fd-button-hit-area) 0;
}

.button.small:before,
.button.action:before {
    content: "";
    position: absolute;
    display: block;
    height: calc(100% + (2 * var(--fd-button-hit-area)));
    width: 100%;
    top: calc((var(--fd-button-hit-area) * -1) - 1px);
    left: 0;
}

.button.button-icon-only svg {
    width: 16px;
    height: 16px;
}

.button.button-icon-only:before {
    width: calc(100% + 4px + (2 * var(--fd-button-hit-area)));
    left: calc((var(--fd-button-hit-area) * -1) - 2px);
}

.button.small-icon-only span {
    display: inline-block;
    color: var(--color-primary-dark);
    font-weight: normal;
    font-size: var(--font-size-hint);
}

.button.small-icon-only.negative span {
    color: var(--color-negative-dark);
}

@media (max-width: 767px) {
    .button.small-icon-only span {
        display: none;
    }

    .button.small-icon-only svg {
        width: 16px;
        height: 16px;
    }

    .button.small-icon-only span + svg {
        margin-left: 0;
    }

    .button.small-icon-only:before {
        width: calc(100% + 4px + (2 * var(--fd-button-hit-area)));
        left: calc((var(--fd-button-hit-area) * -1) - 2px);
    }
}

@media (hover: hover) {
    .button:hover {
        background-color: var(--color-secondary-dark);
    }
    .button.inverted:hover {
        background-color: var(--color-secondary);
        color: var(--color-greyscale-50);
    }
    .button.primary:hover {
        background-color: var(--color-primary-dark);
    }
    .button.primary.inverted:hover {
        background-color: var(--color-primary);
        color: var(--color-greyscale-50);
    }
    .button.secondary:hover {
        background-color: var(--color-primary);
        color: var(--color-greyscale-50);
    }
    .button.tertiary:hover {
        background-color: var(--color-secondary);
        color: var(--color-greyscale-50);
    }
    .button.negative:hover {
        background-color: var(--color-negative-dark);
    }
    .button.ghost:hover {
        background-color: rgba(var(--color-greyscale-50-rgb), 1);
        color: var(--color-primary);
    }

    .button.ghost:hover svg {
        fill: var(--color-primary);
    }
    .button[disabled]:hover {
        background-color: var(--color-greyscale-300);
        color: var(--color-greyscale-400);
    }
    .button.action:hover {
        color: var(--color-greyscale-50);
        background: var(--color-primary-lighter);
    }

    .button.action:hover span {
        color: var(--color-greyscale-50);
    }

    .button.action:hover svg {
        fill: var(--color-greyscale-50);
    }
    .button.action.negative:hover {
        color: var(--color-greyscale-50);
        background: var(--color-negative);
    }

    .button.action.negative:hover span {
        color: var(--color-greyscale-50);
    }

    .button.action.negative:hover svg {
        fill: var(--color-greyscale-50);
    }
}

.chip {
    position: relative;
    display: inline-block;
    padding: 10px 10px 10px;
    font: 400 var(--font-size-base) / 1 var(--font-family-1);
    border-radius: 4px;
    background-color: var(--color-greyscale-300);
    color: var(--color-greyscale-700);
    cursor: pointer;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    -webkit-text-decoration: none;
    text-decoration: none;
    margin-top: var(--fd-tabs-hit-area);
    margin-bottom: var(--fd-tabs-hit-area);
}
.chip:before {
    content: "";
    position: absolute;
    display: block;
    height: calc(100% + (2 * var(--fd-tabs-hit-area)));
    width: 100%;
    top: calc(var(--fd-tabs-hit-area) * -1);
    left: 0;
}
.chip[active] {
    background-color: var(--color-secondary);
    color: var(--color-greyscale-50);
}
.chip.light {
    background-color: var(--color-primary-semi-light);
    color: var(--color-greyscale-50);
    transition: background-color 0.25s, color 0.25s;
    font-size: var(--font-size-hint);
}
.chip.light[active] {
    background-color: var(--color-greyscale-50);
    color: var(--color-primary);
}
.chip.trigger {
    font-size: var(--font-size-hint);
    color: var(--color-greyscale-50);
    border: 1px solid var(--color-greyscale-50);
    background-color: var(--color-primary);
    padding: 9px 7px;
}
.chip.trigger:before {
    height: calc(100% + (2 * var(--fd-tabs-hit-area)) + 2px);
    top: calc((var(--fd-tabs-hit-area) * -1) - 1px);
}
.chip.trigger span {
    font-weight: 600;
}
.chip.trigger.inverted {
    color: var(--color-primary);
    border: 1px solid var(--color-greyscale-50);
    background-color: var(--color-greyscale-50);
    white-space: nowrap;
    font-weight: bold;
}
.chip.trigger.inverted svg {
    height: 12px;
    width: 12px;
    margin-right: 4px;
    vertical-align: middle;
    fill: var(--color-primary);
}

.flag {
    display: inline-block;
    line-height: var(--line-height-base);
    font-size: var(--font-size-hint);
    font-weight: normal;
    padding: 0.1em 0.3em 0;
    top: -1px;
    position: relative;
    background-color: var(--color-tertiary-light);
    color: var(--color-tertiary-dark);
}
.flag fd-icon {
    display: inline-block;
    color: var(--color-tertiary-dark);
    --fd-icon-size: var(--font-size-base);
    margin: 0.05em 0.5em 0 0;
}
.flag > svg {
    display: inline-block;
    fill: var(--color-tertiary-dark);
    height: var(--font-size-base);
    margin: 0.05em 0.5em 0 0;
}
.flag.flag-flex {
    display: flex;
}
.flag.flag-flex > svg,
.flag.flag-flex fd-icon {
    flex: 0 0 var(--font-size-base);
}
.flag.flag-highlight {
    color: var(--color-greyscale-50);
    background-color: var(--color-tertiary);
}
.flag.flag-highlight > svg {
    fill: var(--color-greyscale-50);
}
.flag.flag-highlight fd-icon {
    color: var(--color-greyscale-50);
}

.info-hint {
    display: flex;
    padding: 10px;
    font-size: var(--font-size-hint);
    line-height: var(--line-height-hint);
}
.info-hint > [class^="icon"],
.info-hint > [class*=" icon"] {
    position: relative;
    top: 1px;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-right: 5px;
}
.info-hint > p {
    margin: 0;
}
.info-hint.neutral {
    background-color: var(--color-tertiary-lighter);
}
.info-hint.neutral > [class^="icon"],
.info-hint.neutral > [class*=" icon"] {
    fill: var(--color-tertiary-dark);
}
.info-hint.neutral > p {
    color: var(--color-tertiary-dark);
}
.info-hint.warning {
    background-color: var(--color-secondary-lighter);
}
.info-hint.warning > [class^="icon"],
.info-hint.warning > [class*=" icon"] {
    fill: var(--color-secondary-dark);
}
.info-hint.warning > p {
    color: var(--color-secondary-dark);
}
.info-hint.error {
    background-color: var(--color-negative-light);
}
.info-hint.error > [class^="icon"],
.info-hint.error > [class*=" icon"] {
    fill: var(--color-negative-dark);
}
.info-hint.error > p {
    color: var(--color-negative-dark);
}

.feedback.bundled-frame .frame-item h2 {
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0 10px;
}

.feedback .frame-item > .hint {
    color: var(--color-hint);
    font-size: var(--font-size-hint);
    line-height: var(--line-height-hint);
}

.feedback .icon-flight {
    width: var(--font-size-base);
    height: var(--font-size-base);
    fill: var(--color-greyscale-700);
}

.feedback a[href^="tel"] {
    display: none;
}

@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
    .feedback .phone-number {
        display: none;
    }

    .feedback a[href^="tel"] {
        display: inline;
    }
}

/*
    Don't change this file. It's maintained by the flights Frontend team.
*/